From 2776f2fb0da59bd185e08242b5ce99b408ddaf42 Mon Sep 17 00:00:00 2001 From: Mirlan Date: Fri, 31 Jul 2020 20:17:08 +0600 Subject: [PATCH] Ott 261 dropdown trigger click (#67) --- .../components/SportTypeFilter/hooks.tsx | 45 ++++++------ .../components/SportTypeFilter/index.tsx | 67 +++++++++++++----- .../components/SportTypeFilter/styled.tsx | 69 ++++++++----------- .../components/TournamentFilter/hooks.tsx | 6 +- .../components/TournamentFilter/styled.tsx | 21 +++--- .../HeaderFilters/store/hooks/index.tsx | 12 ++-- src/features/OutsideClick/hooks/index.tsx | 4 +- 7 files changed, 124 insertions(+), 100 deletions(-) diff --git a/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx b/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx index 599c18a4..8989e140 100644 --- a/src/features/HeaderFilters/components/SportTypeFilter/hooks.tsx +++ b/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([]) 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: , - 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, } } diff --git a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx b/src/features/HeaderFilters/components/SportTypeFilter/index.tsx index bbf27a58..8411dc68 100644 --- a/src/features/HeaderFilters/components/SportTypeFilter/index.tsx +++ b/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 ( - + + + + + + + + { + isOpen && ( + + + { + map(sportList, ({ + id, + lexic, + name, + }) => ( + onSelect(id)} + /> + )) + } + + + ) + } ) } diff --git a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx b/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx index b960b080..c76420f1 100644 --- a/src/features/HeaderFilters/components/SportTypeFilter/styled.tsx +++ b/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; } ` diff --git a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx b/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx index f1695862..9182211e 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/hooks.tsx +++ b/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([]) useEffect(() => { setList([]) - getSportTournaments(selectedSportType).then(setList) - }, [selectedSportType]) + getSportTournaments(selectedSportTypeId).then(setList) + }, [selectedSportTypeId]) return list } diff --git a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx b/src/features/HeaderFilters/components/TournamentFilter/styled.tsx index a2d41a4b..4360872d 100644 --- a/src/features/HeaderFilters/components/TournamentFilter/styled.tsx +++ b/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` 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` @@ -82,3 +74,14 @@ export const Arrows = styled.span` : '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; + } +` diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index 494f4367..0206b386 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/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.Live) - const [selectedSportType, setSelectedSportTypes] = useState(SportTypes.FOOTBALL) + const [selectedSportTypeId, setSelectedSportTypeId] = useState(SportTypes.FOOTBALL) const [selectedTournamentId, setSelectedTournamentId] = useState(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, ]) diff --git a/src/features/OutsideClick/hooks/index.tsx b/src/features/OutsideClick/hooks/index.tsx index ca065c82..d9cbfd1e 100644 --- a/src/features/OutsideClick/hooks/index.tsx +++ b/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