Ott 261 dropdown trigger click (#67)

src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx

@@ -1,49 +1,44 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 
-import map from 'lodash/map'
+import find from 'lodash/find'
 
 import type { SportList } from 'requests/getSportList'
-import type { Option } from 'features/Combobox/types'
 import { getSportList } from 'requests/getSportList'
-import { useLexicsStore } from 'features/LexicsStore'
 import { useHeaderFiltersStore } from 'features/HeaderFilters/store'
-
-import { CustomOption } from './styled'
+import { useToggle } from 'hooks'
 
 export const useSportTypeFilter = () => {
   const [sportList, setSportList] = useState<SportList>([])
   const {
-    setSelectedSportTypes,
+    selectedSportTypeId,
+    setSelectedSportTypeId,
     setSelectedTournamentId,
   } = useHeaderFiltersStore()
 
   const {
-    translate,
-  } = useLexicsStore()
+    close,
+    isOpen,
+    open,
+  } = useToggle()
 
   useEffect(() => {
     getSportList().then(setSportList)
   }, [])
 
-  const options = map(sportList, ({
-    id,
-    lexic,
-    name,
-  }) => ({
-    children: <CustomOption t={lexic} image={name} />,
-    id,
-    name: translate(String(lexic)),
-  }))
-
-  const onSelect = (option: Option | null) => {
-    if (option) {
-      setSelectedSportTypes(option.id)
-      setSelectedTournamentId(null)
-    }
+  const onSelect = (id: number) => {
+    setSelectedSportTypeId(id)
+    setSelectedTournamentId(null)
+    close()
   }
 
+  const selectedSportType = find(sportList, (sport) => sport.id === selectedSportTypeId)
+
   return {
+    close,
+    isOpen,
     onSelect,
-    options,
+    open,
+    selectedSportType,
+    sportList,
   }
 }

src/features/HeaderFilters/components/SportTypeFilter/index.tsx

@@ -1,28 +1,63 @@
 import React from 'react'
 
-import { Combobox } from 'features/Combobox'
+import map from 'lodash/map'
+
+import { T9n } from 'features/T9n'
+import { OutsideClick } from 'features/OutsideClick'
 
-import { useLexicsStore } from 'features/LexicsStore'
 import { useSportTypeFilter } from './hooks'
-import { Wrapper, customListStyles } from './styled'
+import {
+  Wrapper,
+  SportList,
+  CustomOption,
+} from './styled'
+import {
+  DropdownButton,
+  ButtonTitle,
+  Arrows,
+} from '../TournamentFilter/styled'
 
 export const SportTypeFilter = () => {
-  const { onSelect, options } = useSportTypeFilter()
-  const { translate } = useLexicsStore()
+  const {
+    close,
+    isOpen,
+    onSelect,
+    open,
+    selectedSportType,
+    sportList,
+  } = useSportTypeFilter()
 
   return (
     <Wrapper>
-      <Combobox
-        id='sportTypeFilter'
-        options={options}
-        placeholder={translate('sport')}
-        customListStyles={customListStyles}
-        filterOptions={false}
-        onSelect={onSelect}
-        openOnFocus
-        withArrow
-        readOnly
-      />
+      <DropdownButton active={isOpen} onClick={open}>
+        <ButtonTitle>
+          <T9n t={selectedSportType?.lexic || 'sport'} />
+        </ButtonTitle>
+        <Arrows active={isOpen} />
+      </DropdownButton>
+
+      {
+        isOpen && (
+          <OutsideClick onClick={close}>
+            <SportList>
+              {
+                map(sportList, ({
+                  id,
+                  lexic,
+                  name,
+                }) => (
+                  <CustomOption
+                    key={id}
+                    t={lexic}
+                    image={name}
+                    onClick={() => onSelect(id)}
+                  />
+                ))
+              }
+            </SportList>
+          </OutsideClick>
+        )
+      }
     </Wrapper>
   )
 }

src/features/HeaderFilters/components/SportTypeFilter/styled.tsx

@@ -1,44 +1,40 @@
-import styled, { css } from 'styled-components/macro'
+import styled from 'styled-components/macro'
 
-import {
-  ComboboxStyled,
-  ComboboxInputStyled,
-  ComboboxOptionStyled,
-} from 'features/Combobox/styled'
 import { T9n } from 'features/T9n'
 
+import { DropdownButton } from '../TournamentFilter/styled'
+
 export const Wrapper = styled.div`
   width: 50%;
-  
-  ${ComboboxStyled} {
-    margin-top: 0;
-    padding-left: 18px;
-  }
+  position: relative;
+  border-right: 1px solid #222222;
 
-  ${ComboboxInputStyled} {
-    margin-left: 0;
-    overflow: hidden;
-    font-size: 18px;
-    cursor: pointer;
-
-    &[aria-expanded="true"] {
-      ::placeholder {
-        color: #fff;
-      }
-    }
-
-    &[aria-expanded="false"] {
-      ::placeholder {
-        color: #999;
-      }
-    }
+  ${DropdownButton} {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
   }
 `
 
+export const SportList = styled.ul`
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  width: 448px;
+  height: auto;
+  background: #666;
+  border-radius: 2px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+`
+
 export const CustomOption = styled(T9n)<{ image: string }>`
-   display: flex;
-   align-items: center;
-   height: 100%; 
+  width: 100%;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: bold;
+  color: #ccc;
 
   ::before {
     content: '';
@@ -48,14 +44,9 @@ export const CustomOption = styled(T9n)<{ image: string }>`
     background-position: center;
     background-repeat: no-repeat;
   }
-`
-
-export const customListStyles = css`
-  left: -19px;
-  min-width: 460px;
 
-  ${ComboboxOptionStyled} {
-    height: 56px;
-    padding-left: 0;
+  :hover {
+    background: #999;
+    color: #fff;
   }
 `

src/features/HeaderFilters/components/TournamentFilter/hooks.tsx

@@ -13,13 +13,13 @@ import { useLexicsStore } from 'features/LexicsStore'
 import { normalizeTournaments } from './helpers'
 
 const useTournamentsList = () => {
-  const { selectedSportType } = useHeaderFiltersStore()
+  const { selectedSportTypeId } = useHeaderFiltersStore()
   const [list, setList] = useState<Tournaments>([])
 
   useEffect(() => {
     setList([])
-    getSportTournaments(selectedSportType).then(setList)
-  }, [selectedSportType])
+    getSportTournaments(selectedSportTypeId).then(setList)
+  }, [selectedSportTypeId])
 
   return list
 }

src/features/HeaderFilters/components/TournamentFilter/styled.tsx

@@ -2,12 +2,6 @@ import styled from 'styled-components/macro'
 
 import { сustomScrollbar } from 'features/Common'
 
-export const Wrapper = styled.div`
-  height: 100%;
-  width: 50%;
-  position: relative;
-`
-
 export const ListWrapper = styled.div`
   position: absolute;
   left: -100%;
@@ -35,9 +29,6 @@ export const DropdownButton = styled.button<Props>`
   font-weight: 600;
   font-size: 18px;
   cursor: pointer;
-  border-left: 1px solid #222222;
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
   background-size: 12px 12px;
   background-repeat: no-repeat;
   background-position: 113px;
@@ -65,6 +56,7 @@ export const ButtonTitle = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: normal;
+  text-transform: capitalize;
 `
 
 export const Arrows = styled.span<Props>`
@@ -82,3 +74,14 @@ export const Arrows = styled.span<Props>`
       : 'background-image: url(/images/arrowDown.svg);'
   )}
 `
+
+export const Wrapper = styled.div`
+  height: 100%;
+  width: 50%;
+  position: relative;
+
+  ${DropdownButton} {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+`

src/features/HeaderFilters/store/hooks/index.tsx

@@ -23,7 +23,7 @@ const dateFormat = 'dd/MM/yyyy HH:mm:ss'
 export const useFilters = () => {
   const [selectedDate, setSelectedDate] = useState(new Date())
   const [selectedMatchStatus, setSelectedMatchStatus] = useState<MatchStatuses>(MatchStatuses.Live)
-  const [selectedSportType, setSelectedSportTypes] = useState<SportTypes>(SportTypes.FOOTBALL)
+  const [selectedSportTypeId, setSelectedSportTypeId] = useState<SportTypes>(SportTypes.FOOTBALL)
   const [selectedTournamentId, setSelectedTournamentId] = useState<number | null>(null)
   const fetchMatches = useCallback(debounce(getMatches, 300), [])
 
@@ -36,13 +36,13 @@ export const useFilters = () => {
     fetchMatches({
       date: formattedDate,
       matchStatus: selectedMatchStatus,
-      sportType: selectedSportType,
+      sportType: selectedSportTypeId,
       tournamentId: selectedTournamentId,
     })
   }, [
     selectedDate,
     selectedMatchStatus,
-    selectedSportType,
+    selectedSportTypeId,
     selectedTournamentId,
     fetchMatches,
   ])
@@ -50,16 +50,16 @@ export const useFilters = () => {
   const store = useMemo(() => ({
     selectedDate,
     selectedMatchStatus,
-    selectedSportType,
+    selectedSportTypeId,
     selectedTournamentId,
     setSelectedDate,
     setSelectedMatchStatus,
-    setSelectedSportTypes,
+    setSelectedSportTypeId,
     setSelectedTournamentId,
   }), [
     selectedDate,
     selectedMatchStatus,
-    selectedSportType,
+    selectedSportTypeId,
     selectedTournamentId,
     setSelectedTournamentId,
   ])

src/features/OutsideClick/hooks/index.tsx

@@ -20,10 +20,10 @@ export const useOutsideClickEffect = ({
       }
     }
 
-    window.addEventListener('mousedown', handleOutsideClick)
+    window.addEventListener('click', handleOutsideClick)
 
     return () => {
-      window.removeEventListener('mousedown', handleOutsideClick)
+      window.removeEventListener('click', handleOutsideClick)
     }
   }, [onClick, wrapperRef])
   return wrapperRef