This reverts commit 3d3716c8ee.
keep-around/bb3d202daeac32d9232e5a603e69b84d03b59745
Andrei Dekterev
3 years ago
parent
61a2661a1c
commit
bb3d202dae
|
Before Width: | Height: | Size: 696 B |
|
Before Width: | Height: | Size: 717 B |
@ -1,185 +0,0 @@ |
|||||||
import { |
|
||||||
useCallback, |
|
||||||
useEffect, |
|
||||||
useMemo, |
|
||||||
useState, |
|
||||||
MouseEvent, |
|
||||||
ChangeEvent, |
|
||||||
} from 'react' |
|
||||||
import some from 'lodash/some' |
|
||||||
import isNil from 'lodash/isNil' |
|
||||||
import includes from 'lodash/includes' |
|
||||||
import filter from 'lodash/filter' |
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
import map from 'lodash/map' |
|
||||||
import reduce from 'lodash/reduce' |
|
||||||
import size from 'lodash/size' |
|
||||||
|
|
||||||
import { format } from 'date-fns' |
|
||||||
|
|
||||||
import { |
|
||||||
getHomeMatches, |
|
||||||
Match, |
|
||||||
TQueryParams, |
|
||||||
} from 'requests' |
|
||||||
|
|
||||||
const getTimezoneOffset = (date: Date) => { |
|
||||||
const offset = date.getTimezoneOffset() |
|
||||||
if (offset === 0) return offset |
|
||||||
return -(offset) |
|
||||||
} |
|
||||||
const getDate = (date: Date) => format(date, 'yyyy-MM-dd') |
|
||||||
|
|
||||||
export type TActiveFilters = { |
|
||||||
arena?: Array<TDefaultType>, |
|
||||||
division?: Array<TDefaultType>, |
|
||||||
gender?: Array<TDefaultType>, |
|
||||||
main_team?: Array<TDefaultType>, |
|
||||||
round?: Array<TDefaultType>, |
|
||||||
youth_age?: Array<number>, |
|
||||||
} |
|
||||||
export type TDefaultType = { |
|
||||||
id: number, |
|
||||||
name_eng: string, |
|
||||||
name_rus: string, |
|
||||||
} |
|
||||||
|
|
||||||
export const useMatchFilters = (selectedDate: Date) => { |
|
||||||
const [filtersList, setFiltersList] = useState<Array<Match>>() |
|
||||||
const [isOpenList, setOpenList] = useState<string>('') |
|
||||||
const [activeFilters, setActiveFilters] = useState<TActiveFilters>({}) |
|
||||||
const [inputValue, setInputValue] = useState<string>('') |
|
||||||
const [openPopup, setOpenPopup] = useState(false) |
|
||||||
|
|
||||||
const setFilters = (filters: Array<Match>) => { |
|
||||||
setFiltersList(filters) |
|
||||||
} |
|
||||||
|
|
||||||
const openDropdownList = (title: string) => () => { |
|
||||||
setOpenList(title === isOpenList ? '' : title) |
|
||||||
} |
|
||||||
|
|
||||||
const closeDropdownList = () => { |
|
||||||
setOpenList('') |
|
||||||
} |
|
||||||
const fetchMatches = useCallback( |
|
||||||
(limit: number, offset: number) => getHomeMatches({ |
|
||||||
date: getDate(selectedDate), |
|
||||||
limit, |
|
||||||
offset, |
|
||||||
timezoneOffset: getTimezoneOffset(selectedDate), |
|
||||||
}), |
|
||||||
[selectedDate], |
|
||||||
) |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
fetchMatches(1000, 0).then((resp) => setFiltersList(resp.broadcast)) |
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [selectedDate]) |
|
||||||
|
|
||||||
const currentFilters = useMemo(() => { |
|
||||||
const arr = [] |
|
||||||
if (some(filtersList, (item) => !isNil(item.arena?.id))) arr.push('arena') |
|
||||||
if (some(filtersList, (item) => !isNil(item.round?.id))) arr.push('round') |
|
||||||
if (some(filtersList, (item) => !isNil(item.team1?.main_team) || !isNil(item.team2?.main_team))) arr.push('main_team') |
|
||||||
if (some(filtersList, (item) => !isNil(item.team1?.youth_age) || !isNil(item.team2?.youth_age))) arr.push('youth_age') |
|
||||||
if (some(filtersList, (item) => !isNil(item.team1?.gender) || !isNil(item.team2?.gender))) arr.push('gender') |
|
||||||
if (some(filtersList, (item) => !isNil(item.team1?.division?.id) || !isNil(item.team2?.division?.id))) arr.push('division') |
|
||||||
return arr |
|
||||||
}, [filtersList]) |
|
||||||
|
|
||||||
const handleSetFilters = (filterName: string, value: any) => { |
|
||||||
const isFilterPresent = !isNil(activeFilters[filterName as keyof typeof activeFilters]) |
|
||||||
if (isFilterPresent) { |
|
||||||
const isValuePresent = includes( |
|
||||||
activeFilters[filterName as keyof typeof activeFilters], value, |
|
||||||
) |
|
||||||
const currentValue = isValuePresent |
|
||||||
? filter(activeFilters[filterName as keyof typeof activeFilters], (item) => item !== value) |
|
||||||
: [...activeFilters[filterName as keyof typeof activeFilters]!, value] |
|
||||||
|
|
||||||
return setActiveFilters({ |
|
||||||
...activeFilters, |
|
||||||
[filterName]: currentValue, |
|
||||||
}) |
|
||||||
} |
|
||||||
return setActiveFilters({ |
|
||||||
...activeFilters, |
|
||||||
[filterName]: [value], |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const clearFilters = (filterName: string) => (e: MouseEvent | ChangeEvent<HTMLInputElement>) => { |
|
||||||
e.stopPropagation() |
|
||||||
e.preventDefault() |
|
||||||
return setActiveFilters({ |
|
||||||
...activeFilters, |
|
||||||
[filterName]: [], |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const clearAllFilters = (e: MouseEvent) => { |
|
||||||
e.stopPropagation() |
|
||||||
setActiveFilters({}) |
|
||||||
} |
|
||||||
|
|
||||||
const isEmptyFilters = some(activeFilters, (filterItem) => isEmpty(filterItem)) |
|
||||||
|| isEmpty(activeFilters) |
|
||||||
|
|
||||||
const queryParams: TQueryParams = useMemo(() => { |
|
||||||
const params = { |
|
||||||
arena: map(activeFilters.arena, (item) => item.id), |
|
||||||
division: map(activeFilters.division, (item) => item.id), |
|
||||||
gender: map(activeFilters.gender, (item) => item.id), |
|
||||||
main_team: map(activeFilters.main_team, (item) => item.id), |
|
||||||
round: map(activeFilters.round, (item) => item.id), |
|
||||||
youth_age: activeFilters.youth_age, |
|
||||||
} |
|
||||||
|
|
||||||
return (params) |
|
||||||
}, [activeFilters]) |
|
||||||
|
|
||||||
const changeInput = (e: ChangeEvent<HTMLInputElement>) => { |
|
||||||
const { value } = e.target |
|
||||||
setInputValue(value) |
|
||||||
} |
|
||||||
|
|
||||||
const clickClearAll = () => { |
|
||||||
setOpenPopup(true) |
|
||||||
} |
|
||||||
|
|
||||||
const confirmClear = (e: MouseEvent) => { |
|
||||||
setOpenPopup(false) |
|
||||||
clearAllFilters(e) |
|
||||||
} |
|
||||||
|
|
||||||
const clickCancel = () => { |
|
||||||
setOpenPopup(false) |
|
||||||
} |
|
||||||
|
|
||||||
const filtersSize = reduce(activeFilters, |
|
||||||
(result, |
|
||||||
value) => result + size(value), 0) |
|
||||||
|
|
||||||
return { |
|
||||||
activeFilters, |
|
||||||
changeInput, |
|
||||||
clearAllFilters, |
|
||||||
clearFilters, |
|
||||||
clickCancel, |
|
||||||
clickClearAll, |
|
||||||
closeDropdownList, |
|
||||||
confirmClear, |
|
||||||
currentFilters, |
|
||||||
filtersList, |
|
||||||
filtersSize, |
|
||||||
handleSetFilters, |
|
||||||
inputValue, |
|
||||||
isEmptyFilters, |
|
||||||
isOpenList, |
|
||||||
openDropdownList, |
|
||||||
openPopup, |
|
||||||
queryParams, |
|
||||||
setFilters, |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import React from 'react' |
|
||||||
import { |
|
||||||
ButtonsContainer, |
|
||||||
CancelButton, |
|
||||||
ConfirmButton, |
|
||||||
Modal, |
|
||||||
PopupContainer, |
|
||||||
PopupText, |
|
||||||
PopupTitle, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
export const ClearFiltersPopup = () => { |
|
||||||
const { |
|
||||||
clickCancel, |
|
||||||
confirmClear, |
|
||||||
openPopup, |
|
||||||
} = useHeaderFiltersStore() |
|
||||||
|
|
||||||
return ( |
|
||||||
<Modal isOpen={openPopup} withCloseButton={false}> |
|
||||||
<PopupContainer> |
|
||||||
<PopupTitle> |
|
||||||
<T9n t='clear_filters' /> |
|
||||||
</PopupTitle> |
|
||||||
<PopupText> |
|
||||||
<T9n t='clear_popup_message' /> |
|
||||||
</PopupText> |
|
||||||
<ButtonsContainer> |
|
||||||
<ConfirmButton onClick={confirmClear}> |
|
||||||
<T9n t='clear' /> |
|
||||||
</ConfirmButton> |
|
||||||
<CancelButton onClick={clickCancel}> |
|
||||||
<T9n t='still_cancel' /> |
|
||||||
</CancelButton> |
|
||||||
</ButtonsContainer> |
|
||||||
</PopupContainer> |
|
||||||
</Modal> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,113 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { ModalWindow } from 'features/Modal/styled' |
|
||||||
import { |
|
||||||
Modal as BaseModal, |
|
||||||
} from 'features/AuthServiceApp/components/RegisterPopup/styled' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
export const Modal = styled(BaseModal)` |
|
||||||
${ModalWindow} { |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
min-height: 201px; |
|
||||||
max-width: 351px; |
|
||||||
padding: 26px 19px 33px 19px; |
|
||||||
` |
|
||||||
: css` |
|
||||||
min-height: 220px; |
|
||||||
max-width: 611px; |
|
||||||
padding: 37px 0 39px 0; |
|
||||||
`}
|
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const PopupContainer = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
justify-content: center; |
|
||||||
font-style: normal; |
|
||||||
color: #FFFFFF; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css`` |
|
||||||
: css` |
|
||||||
min-width: 611px;`}
|
|
||||||
` |
|
||||||
|
|
||||||
export const PopupTitle = styled.div` |
|
||||||
font-weight: 700; |
|
||||||
font-size: 24px; |
|
||||||
line-height: 24px; |
|
||||||
margin-bottom: 45px; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 20px; |
|
||||||
line-height: 24px; |
|
||||||
margin-bottom: 25px;` |
|
||||||
: css` |
|
||||||
font-size: 24px; |
|
||||||
line-height: 24px; |
|
||||||
margin-bottom: 45px;`}
|
|
||||||
` |
|
||||||
|
|
||||||
export const PopupText = styled.div` |
|
||||||
font-weight: 400; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 16px; |
|
||||||
line-height: 22px; |
|
||||||
margin-bottom: 33px;` |
|
||||||
: css` |
|
||||||
font-size: 20px; |
|
||||||
line-height: 28px; |
|
||||||
margin-bottom: 55px;`}
|
|
||||||
` |
|
||||||
|
|
||||||
export const ButtonsContainer = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
gap: 15px;` |
|
||||||
: css` |
|
||||||
gap: 20px; |
|
||||||
`}
|
|
||||||
` |
|
||||||
|
|
||||||
const Button = styled.button` |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
border-radius: 5px; |
|
||||||
color: #FFFF; |
|
||||||
font-weight: 600; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 16px; |
|
||||||
line-height: 16px; |
|
||||||
width: 149px; |
|
||||||
height: 38px;` |
|
||||||
: css` |
|
||||||
font-size: 20px; |
|
||||||
line-height: 50px; |
|
||||||
cursor: pointer; |
|
||||||
width: 134px; |
|
||||||
height: 50px;`}
|
|
||||||
` |
|
||||||
|
|
||||||
export const ConfirmButton = styled(Button)` |
|
||||||
background: #294FC4; |
|
||||||
border: 1px solid #294FC4; |
|
||||||
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
|
||||||
` |
|
||||||
export const CancelButton = styled(Button)` |
|
||||||
border: 1px solid #FFFFFF; |
|
||||||
background: none; |
|
||||||
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
|
||||||
` |
|
||||||
@ -1,160 +0,0 @@ |
|||||||
import React, { useMemo } from 'react' |
|
||||||
|
|
||||||
import map from 'lodash/map' |
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
import includes from 'lodash/includes' |
|
||||||
|
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { Name } from 'features/Name' |
|
||||||
|
|
||||||
import { useLexicsStore } from 'features/LexicsStore' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import { |
|
||||||
getAge, |
|
||||||
getArena, |
|
||||||
getDivision, |
|
||||||
getGender, |
|
||||||
getMainTeam, |
|
||||||
getRound, |
|
||||||
} from './helpers' |
|
||||||
import { |
|
||||||
TDropDownProps, |
|
||||||
TFilterItem, |
|
||||||
TItem, |
|
||||||
} from './types' |
|
||||||
import { |
|
||||||
DropDownContainer, |
|
||||||
FiltersList, |
|
||||||
FilterItem, |
|
||||||
Checkbox, |
|
||||||
CommonButtonsBlock, |
|
||||||
ClearButtonContainer, |
|
||||||
SearchWithAllContainer, |
|
||||||
SearchContainer, |
|
||||||
SearchInput, |
|
||||||
BackButton, |
|
||||||
} from './styled' |
|
||||||
|
|
||||||
const Label = ({ item }: TFilterItem) => { |
|
||||||
const isNumber = typeof item === 'number' |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
{isNumber ? (<>U{item}</>) : (<Name nameObj={item} />)} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export const DropDown = ({ |
|
||||||
activeFilters, |
|
||||||
changeInput, |
|
||||||
clearFilters, |
|
||||||
closeDropdownList, |
|
||||||
filterList, |
|
||||||
filterTitle, |
|
||||||
inputValue, |
|
||||||
setFilters, |
|
||||||
}: TDropDownProps) => { |
|
||||||
const { translate } = useLexicsStore() |
|
||||||
|
|
||||||
const dropDownList = useMemo(() => { |
|
||||||
switch (filterTitle) { |
|
||||||
case 'gender': |
|
||||||
return getGender(filterList) |
|
||||||
case 'youth_age': |
|
||||||
return getAge(filterList) |
|
||||||
case 'division': |
|
||||||
return getDivision(filterList) |
|
||||||
case 'main_team': |
|
||||||
return getMainTeam(filterList) |
|
||||||
case 'arena': |
|
||||||
return getArena(filterList, inputValue) |
|
||||||
case 'round': |
|
||||||
return getRound(filterList) |
|
||||||
default: |
|
||||||
return [] |
|
||||||
} |
|
||||||
}, [filterTitle, filterList, inputValue]) as Array<TItem> | Array<any> |
|
||||||
|
|
||||||
const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters] |
|
||||||
|
|
||||||
return ( |
|
||||||
<DropDownContainer> |
|
||||||
<FiltersList> |
|
||||||
<CommonButtonsBlock isArena={filterTitle === 'arena'}> |
|
||||||
<SearchWithAllContainer> |
|
||||||
{/* {isMobileDevice && (<T9n className='filter_title' t={filterTitle} />)} */} |
|
||||||
{isMobileDevice && closeDropdownList |
|
||||||
&& ( |
|
||||||
<BackButton onClick={closeDropdownList} className='back_button'> |
|
||||||
{filterTitle} |
|
||||||
</BackButton> |
|
||||||
)} |
|
||||||
{filterTitle === 'arena' && ( |
|
||||||
<SearchContainer> |
|
||||||
<SearchInput |
|
||||||
onChange={changeInput} |
|
||||||
onClick={(e) => e.stopPropagation()} |
|
||||||
placeholder={translate('search')} |
|
||||||
/> |
|
||||||
</SearchContainer> |
|
||||||
)} |
|
||||||
<Checkbox |
|
||||||
onChange={clearFilters(filterTitle)} |
|
||||||
checked={isEmpty(currentActiveFilter)} |
|
||||||
labelLexic='all' |
|
||||||
/> |
|
||||||
</SearchWithAllContainer> |
|
||||||
<ClearButtonContainer |
|
||||||
onClick={clearFilters(filterTitle)} |
|
||||||
> |
|
||||||
<T9n |
|
||||||
className='clear_button' |
|
||||||
t='clear' |
|
||||||
/> |
|
||||||
</ClearButtonContainer> |
|
||||||
</CommonButtonsBlock> |
|
||||||
|
|
||||||
{!isEmpty(dropDownList) && map(dropDownList, (filterItem, i) => ( |
|
||||||
<> |
|
||||||
<FilterItem |
|
||||||
key={i} |
|
||||||
onClick={(e) => { |
|
||||||
e.preventDefault() |
|
||||||
e.stopPropagation() |
|
||||||
setFilters(filterTitle, filterItem) |
|
||||||
}} |
|
||||||
> |
|
||||||
{filterTitle === 'gender' |
|
||||||
? ( |
|
||||||
<Checkbox |
|
||||||
// eslint-disable-next-line max-len
|
|
||||||
checked={includes(currentActiveFilter, |
|
||||||
filterItem || filterItem.name_eng || filterItem.name_rus)} |
|
||||||
onChange={(e) => { |
|
||||||
e.preventDefault() |
|
||||||
e.stopPropagation() |
|
||||||
setFilters(filterTitle, filterItem) |
|
||||||
}} |
|
||||||
labelLexic={filterItem.title} |
|
||||||
/> |
|
||||||
) |
|
||||||
: ( |
|
||||||
<Checkbox |
|
||||||
checked={includes(currentActiveFilter, |
|
||||||
filterItem || filterItem.name_eng || filterItem.name_rus)} |
|
||||||
onChange={(e) => { |
|
||||||
e.preventDefault() |
|
||||||
e.stopPropagation() |
|
||||||
setFilters(filterTitle, filterItem) |
|
||||||
}} |
|
||||||
label={(<Label item={filterItem} />)} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</FilterItem> |
|
||||||
</> |
|
||||||
))} |
|
||||||
</FiltersList> |
|
||||||
</DropDownContainer> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,62 +0,0 @@ |
|||||||
import map from 'lodash/map' |
|
||||||
import some from 'lodash/some' |
|
||||||
import filter from 'lodash/filter' |
|
||||||
import uniq from 'lodash/uniq' |
|
||||||
import flatten from 'lodash/flatten' |
|
||||||
import compact from 'lodash/compact' |
|
||||||
import startsWith from 'lodash/startsWith' |
|
||||||
import toLower from 'lodash/toLower' |
|
||||||
|
|
||||||
import { Match } from 'requests' |
|
||||||
|
|
||||||
const checkStartString = (text: string, searchString: string) => startsWith( |
|
||||||
toLower(text), toLower(searchString), |
|
||||||
) |
|
||||||
export const getAge = (filterList: Array<Match>) => compact( |
|
||||||
uniq( |
|
||||||
flatten( |
|
||||||
map( |
|
||||||
filterList, (item) => [item.team1.youth_age, item.team2.youth_age], |
|
||||||
), |
|
||||||
), |
|
||||||
), |
|
||||||
) |
|
||||||
|
|
||||||
export const getDivision = (filterList: Array<Match>) => filter( |
|
||||||
flatten( |
|
||||||
map( |
|
||||||
filterList, (item) => [item.team1.division, item.team2.division], |
|
||||||
), |
|
||||||
), (item) => item?.id, |
|
||||||
) |
|
||||||
|
|
||||||
export const getMainTeam = (filterList: Array<Match>) => filter( |
|
||||||
flatten( |
|
||||||
map( |
|
||||||
filterList, (item) => [item.team1.main_team, item.team2.main_team], |
|
||||||
), |
|
||||||
), (item) => item?.id, |
|
||||||
) |
|
||||||
|
|
||||||
export const getArena = (filterList: Array<Match>, inputValue: string) => filter( |
|
||||||
map( |
|
||||||
filterList, (item) => item.arena, |
|
||||||
), (item) => item?.id |
|
||||||
&& (checkStartString(item.name_eng, inputValue) |
|
||||||
|| checkStartString(item.name_rus, inputValue)), |
|
||||||
) |
|
||||||
|
|
||||||
export const getRound = (filterList: Array<Match>) => filter( |
|
||||||
map( |
|
||||||
filterList, (item) => item.round, |
|
||||||
), (item) => item?.id, |
|
||||||
) |
|
||||||
|
|
||||||
export const getGender = (filterList: Array<Match>) => { |
|
||||||
const list = [] |
|
||||||
|
|
||||||
if (some(filterList, (item) => item.team1.gender === 1 || item.team2.gender === 1)) list.push({ id: 1, title: 'gender_male_long' }) |
|
||||||
if (some(filterList, (item) => item.team1.gender === 2 || item.team2.gender === 2)) list.push({ id: 2, title: 'gender_female_long' }) |
|
||||||
|
|
||||||
return list |
|
||||||
} |
|
||||||
@ -1,215 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
import { customScrollbar } from 'features/Common' |
|
||||||
import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox' |
|
||||||
import { Label } from 'features/Common/Checkbox/styled' |
|
||||||
import { CheckboxSvg } from 'features/Common/Checkbox/Icon' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import { NameStyled } from 'features/Name' |
|
||||||
|
|
||||||
export const DropDownContainer = styled.div` |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
border-top: 1px solid #505050;` |
|
||||||
: css` |
|
||||||
position: absolute; |
|
||||||
top: 57px; |
|
||||||
right: -24px; |
|
||||||
background: #333333; |
|
||||||
border-radius: 3.5px; |
|
||||||
z-index: 10;`}
|
|
||||||
` |
|
||||||
export const FiltersList = styled.ul` |
|
||||||
${customScrollbar} |
|
||||||
overflow-y: auto; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
max-height: 500px; |
|
||||||
` |
|
||||||
export const FilterItem = styled.li` |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
max-width: 280px; |
|
||||||
white-space: nowrap; |
|
||||||
padding: 10px 0 10px 13px; |
|
||||||
` |
|
||||||
: css` |
|
||||||
min-width: 286px; |
|
||||||
white-space: nowrap; |
|
||||||
padding: 15px 26px;`}
|
|
||||||
:hover { |
|
||||||
background: rgba(255, 255, 255, 0.2); |
|
||||||
} |
|
||||||
` |
|
||||||
export const Checkbox = styled(BaseCheckbox)` |
|
||||||
display: block; |
|
||||||
text-transform: uppercase; |
|
||||||
|
|
||||||
${Label} { |
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 700; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 10px; |
|
||||||
line-height: 11px; |
|
||||||
` |
|
||||||
: css` |
|
||||||
font-size: 18px; |
|
||||||
line-height: 16px; |
|
||||||
`}
|
|
||||||
${NameStyled} { |
|
||||||
overflow: hidden; |
|
||||||
text-overflow: ellipsis; |
|
||||||
white-space: nowrap; |
|
||||||
} |
|
||||||
|
|
||||||
${({ checked }) => (checked |
|
||||||
? css`` |
|
||||||
: css` |
|
||||||
color: rgba(255, 255, 255, 0.6);` |
|
||||||
)} |
|
||||||
} |
|
||||||
|
|
||||||
${CheckboxSvg} { |
|
||||||
margin-right: 8px; |
|
||||||
|
|
||||||
flex: 0 0 auto; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 14px; |
|
||||||
height: 14px; |
|
||||||
` |
|
||||||
: css`
|
|
||||||
width: 20px; |
|
||||||
height: 20px; |
|
||||||
`}
|
|
||||||
} |
|
||||||
` |
|
||||||
type TCommonButtonsBlock = { |
|
||||||
isArena?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const CommonButtonsBlock = styled.div<TCommonButtonsBlock>` |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
${({ isArena }) => (isArena |
|
||||||
? css` |
|
||||||
align-items: flex-start; |
|
||||||
padding: ${isMobileDevice ? '8px 25px 10px 13px' : '24px 26px 15px 26px'}; |
|
||||||
` |
|
||||||
: css` |
|
||||||
align-items: center; |
|
||||||
padding:${isMobileDevice ? '8px 25px 10px 13px' : '15px 26px'}; |
|
||||||
` |
|
||||||
)} |
|
||||||
` |
|
||||||
export const ClearButtonContainer = styled.div` |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
position: absolute; |
|
||||||
top: 14px; |
|
||||||
right: 36px;` |
|
||||||
: ''} |
|
||||||
|
|
||||||
.clear_button { |
|
||||||
font-style: normal; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px;` |
|
||||||
: css` |
|
||||||
font-size: 18px; |
|
||||||
line-height: 22px;`}
|
|
||||||
font-weight: 400; |
|
||||||
|
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
color: rgba(255, 255, 255, 0.5); |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
` |
|
||||||
export const SearchContainer = styled.div` |
|
||||||
padding-right: ${isMobileDevice ? '0px' : '20px'}; |
|
||||||
position: relative; |
|
||||||
|
|
||||||
:before { |
|
||||||
content: ''; |
|
||||||
background: url(/images/search.svg) no-repeat; |
|
||||||
position: absolute; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
left: 8px; |
|
||||||
top: 7px;` |
|
||||||
: css` |
|
||||||
left: 13px; |
|
||||||
top: 13px;`}
|
|
||||||
z-index: 2; |
|
||||||
width: 13px; |
|
||||||
height: 11px; |
|
||||||
} |
|
||||||
` |
|
||||||
export const SearchInput = styled.input` |
|
||||||
border: none; |
|
||||||
background: transparent; |
|
||||||
outline: none; |
|
||||||
width: 100%; |
|
||||||
background: #292929; |
|
||||||
border-radius: 10px; |
|
||||||
margin-bottom: 15px; |
|
||||||
|
|
||||||
color: #FFFF; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
height: 24px; |
|
||||||
min-width: 242px; |
|
||||||
padding-left: 23px;` |
|
||||||
: css` |
|
||||||
min-width: 513px; |
|
||||||
padding-left: 36px; |
|
||||||
height: 36px;`}
|
|
||||||
|
|
||||||
::placeholder { |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
font-size: 10px; |
|
||||||
line-height: 15px;` |
|
||||||
: css`
|
|
||||||
font-size: 18px; |
|
||||||
line-height: 22px;`}
|
|
||||||
|
|
||||||
text-transform: uppercase; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
} |
|
||||||
` |
|
||||||
export const SearchWithAllContainer = styled.div` |
|
||||||
flex: 1 1 auto; |
|
||||||
` |
|
||||||
export const BackButton = styled.div` |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px; |
|
||||||
align-items: center; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #FFFFFF; |
|
||||||
cursor: pointer; |
|
||||||
position: absolute; |
|
||||||
top: 12px; |
|
||||||
left: 13px; |
|
||||||
padding-left: 24px; |
|
||||||
:before { |
|
||||||
content: ''; |
|
||||||
display: block; |
|
||||||
background: url(/images/arrowUpWhite.svg) center no-repeat; |
|
||||||
background-size: 12px 12xp; |
|
||||||
transform: rotate(-90deg); |
|
||||||
right: 0; |
|
||||||
width: 12px; |
|
||||||
height: 12px; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
` |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
import { MouseEvent, ChangeEvent } from 'react' |
|
||||||
import { Match } from 'requests' |
|
||||||
import { TActiveFilters } from 'features/HeaderFilters/store/hooks/useMatchFilters' |
|
||||||
|
|
||||||
export type TDropDownProps = { |
|
||||||
activeFilters: TActiveFilters, |
|
||||||
changeInput: (e: ChangeEvent<HTMLInputElement>) => void, |
|
||||||
clearFilters: (filterName: string) => (e: MouseEvent | ChangeEvent<HTMLInputElement>) => void, |
|
||||||
closeDropdownList?: () => void, |
|
||||||
filterList: Array<Match>, |
|
||||||
filterTitle: string, |
|
||||||
inputValue: string, |
|
||||||
setFilters: (filterName: string, value: number) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export type TItem = { |
|
||||||
id: number, |
|
||||||
name_eng: string, |
|
||||||
name_rus: string, |
|
||||||
} |
|
||||||
|
|
||||||
export type TFilterItem = { |
|
||||||
item: TItem | number, |
|
||||||
} |
|
||||||
@ -1,14 +0,0 @@ |
|||||||
import join from 'lodash/join' |
|
||||||
import take from 'lodash/take' |
|
||||||
import size from 'lodash/size' |
|
||||||
import { TDefaultType } from 'features/HeaderFilters/store/hooks/useMatchFilters' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
|
|
||||||
const TEXT_LENGTH = isMobileDevice ? 6 : 7 |
|
||||||
|
|
||||||
export const truncateString = (text: string) => ( |
|
||||||
size(text) <= TEXT_LENGTH ? text : `${join(take(text, TEXT_LENGTH), '')}...`) |
|
||||||
|
|
||||||
export const checkSize = (filtersList: Array<TDefaultType> | Array<Number> | undefined) => ( |
|
||||||
(filtersList && size(filtersList) > 2) |
|
||||||
) |
|
||||||
@ -1,110 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
import map from 'lodash/map' |
|
||||||
import isNil from 'lodash/isNil' |
|
||||||
import size from 'lodash/size' |
|
||||||
|
|
||||||
import { useName } from 'features/Name' |
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
|
||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import { |
|
||||||
FilterContainer, |
|
||||||
FiltersCount, |
|
||||||
MatchFiltersContainer, |
|
||||||
ActiveFilters, |
|
||||||
ActiveFilter, |
|
||||||
CloseButton, |
|
||||||
} from './styled' |
|
||||||
import { DropDown } from '../Dropdown/Dropdown' |
|
||||||
import { checkSize, truncateString } from './helpers' |
|
||||||
|
|
||||||
type TProps = { |
|
||||||
filterTitle: string, |
|
||||||
item: any, |
|
||||||
} |
|
||||||
|
|
||||||
const ActiveFilterText = ({ filterTitle, item }: TProps) => { |
|
||||||
const name = useName(item) |
|
||||||
if (filterTitle === 'gender') return (<T9n t={item.title} />) |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{truncateString(name)} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
type TFiltersProps = { |
|
||||||
isMobile?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const MatchesFilters = ({ isMobile }: TFiltersProps) => { |
|
||||||
const { |
|
||||||
activeFilters, |
|
||||||
changeInput, |
|
||||||
clearFilters, |
|
||||||
currentFilters, |
|
||||||
filtersList, |
|
||||||
filtersSize, |
|
||||||
handleSetFilters, |
|
||||||
inputValue, |
|
||||||
isOpenList, |
|
||||||
openDropdownList, |
|
||||||
} = useHeaderFiltersStore() |
|
||||||
|
|
||||||
return ( |
|
||||||
<MatchFiltersContainer> |
|
||||||
{map(currentFilters, (filterTitle, index) => { |
|
||||||
const currentActiveFilters = activeFilters[filterTitle as keyof typeof activeFilters] |
|
||||||
|
|
||||||
const isShrinkFilters = filtersSize >= 7 || size(currentActiveFilters) >= 7 |
|
||||||
|| isMobile |
|
||||||
const shrinkedActiveFilters = isShrinkFilters && currentActiveFilters |
|
||||||
&& size(currentActiveFilters) > 2 |
|
||||||
? [currentActiveFilters[0], currentActiveFilters[1]] |
|
||||||
: currentActiveFilters |
|
||||||
|
|
||||||
return ( |
|
||||||
<FilterContainer |
|
||||||
active={isOpenList === filterTitle} |
|
||||||
key={index} |
|
||||||
onClick={openDropdownList(filterTitle)} |
|
||||||
> |
|
||||||
{/* <T9n className='filter_title' t={filterTitle} /> */} |
|
||||||
<span className='filter_title'>{filterTitle}</span> |
|
||||||
<ActiveFilters> |
|
||||||
{map(shrinkedActiveFilters, (item, i) => ( |
|
||||||
<ActiveFilter key={i}> |
|
||||||
{typeof item === 'number' |
|
||||||
? `U${item}` |
|
||||||
: (<ActiveFilterText filterTitle={filterTitle} item={item} />)} |
|
||||||
<CloseButton onClick={(e) => { |
|
||||||
e.stopPropagation() |
|
||||||
handleSetFilters(filterTitle, item) |
|
||||||
}} |
|
||||||
/> |
|
||||||
</ActiveFilter> |
|
||||||
))} |
|
||||||
|
|
||||||
{checkSize(currentActiveFilters) && isShrinkFilters && ( |
|
||||||
<FiltersCount> |
|
||||||
+{size(currentActiveFilters) - 2} |
|
||||||
</FiltersCount> |
|
||||||
)} |
|
||||||
</ActiveFilters> |
|
||||||
{isOpenList === filterTitle && !isNil(filtersList) && !isMobileDevice && ( |
|
||||||
<DropDown |
|
||||||
changeInput={changeInput} |
|
||||||
inputValue={inputValue} |
|
||||||
clearFilters={clearFilters} |
|
||||||
activeFilters={activeFilters} |
|
||||||
setFilters={handleSetFilters} |
|
||||||
filterTitle={filterTitle} |
|
||||||
filterList={filtersList} |
|
||||||
/> |
|
||||||
)} |
|
||||||
</FilterContainer> |
|
||||||
) |
|
||||||
})} |
|
||||||
|
|
||||||
</MatchFiltersContainer> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,169 +0,0 @@ |
|||||||
import { isMobileDevice } from 'config/userAgent' |
|
||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
export const MatchFiltersContainer = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-wrap: no-wrap; |
|
||||||
justify-content: flex-end; |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
flex-direction: column; |
|
||||||
padding-right: 16px; |
|
||||||
border-top: 1px solid #505050; |
|
||||||
padding-top: 19px; |
|
||||||
gap: 22px; |
|
||||||
` |
|
||||||
: css` |
|
||||||
gap: 30px; |
|
||||||
flex-direction: row; |
|
||||||
padding-right: 25px; |
|
||||||
`}
|
|
||||||
` |
|
||||||
|
|
||||||
type TFilterContainer = { |
|
||||||
active?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const FilterContainer = styled.div<TFilterContainer>` |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
position: relative; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
color:#8b8b8b; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 14px; |
|
||||||
padding-left: 19px; |
|
||||||
flex-direction: row; |
|
||||||
align-items: center; |
|
||||||
` |
|
||||||
: css` |
|
||||||
font-size: 18px; |
|
||||||
line-height: 34px; |
|
||||||
height: 34px; |
|
||||||
color: #FFFFFF; |
|
||||||
padding-left: 32px; |
|
||||||
flex-direction: column;`}
|
|
||||||
|
|
||||||
.filter_title { |
|
||||||
cursor: pointer; |
|
||||||
${isMobileDevice && 'margin-right: 6px;'} |
|
||||||
} |
|
||||||
${({ active }) => active && !isMobileDevice && css` |
|
||||||
:after { |
|
||||||
content: ''; |
|
||||||
display: block; |
|
||||||
position: fixed; |
|
||||||
background: #000000; |
|
||||||
opacity: 0.7; |
|
||||||
top: 0px; |
|
||||||
left: 0px; |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
z-index: 9; |
|
||||||
cursor: auto; |
|
||||||
}`}
|
|
||||||
|
|
||||||
|
|
||||||
:before { |
|
||||||
display: block; |
|
||||||
position: absolute; |
|
||||||
top: 0; |
|
||||||
content: ''; |
|
||||||
height: 100%; |
|
||||||
cursor: pointer; |
|
||||||
|
|
||||||
${({ active }) => (active |
|
||||||
? css` |
|
||||||
z-index: 12; |
|
||||||
` |
|
||||||
: css` |
|
||||||
transform: rotate(180deg); |
|
||||||
`)}
|
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
background: url(/images/arrowUpWhite.svg) center no-repeat; |
|
||||||
transform: rotate(90deg); |
|
||||||
right: 0; |
|
||||||
width: 10px; |
|
||||||
` |
|
||||||
: css` |
|
||||||
background: url(/images/arrowUpWhite.svg) center no-repeat; |
|
||||||
background-size: 20px 12px; |
|
||||||
left: 0; |
|
||||||
width: 20px; |
|
||||||
`}
|
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
span { |
|
||||||
${({ active }) => (active && css` |
|
||||||
z-index:12;
|
|
||||||
position: relative; |
|
||||||
`)}
|
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const ActiveFilters = styled.div` |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
gap: 5px;` |
|
||||||
: css` |
|
||||||
gap: 10px;`}
|
|
||||||
` |
|
||||||
export const CloseButton = styled.div` |
|
||||||
background: url(/images/closeWhite.svg) no-repeat; |
|
||||||
|
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
width: 7px; |
|
||||||
height: 7px; |
|
||||||
background-size: 7px;` |
|
||||||
: css` |
|
||||||
height: 9px; |
|
||||||
width: 9px; |
|
||||||
background-size: 10px;`}
|
|
||||||
|
|
||||||
` |
|
||||||
export const ActiveFilter = styled.span` |
|
||||||
font-style: normal; |
|
||||||
font-weight: 600; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #FFFFFF; |
|
||||||
border: 1px solid #FFFFFF; |
|
||||||
border-radius: 16px; |
|
||||||
gap: 5px; |
|
||||||
cursor: pointer; |
|
||||||
${isMobileDevice |
|
||||||
? css` |
|
||||||
padding: 0 5px; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px;` |
|
||||||
: css` |
|
||||||
padding: 0 10px; |
|
||||||
font-size: 14px; |
|
||||||
height: 17px; |
|
||||||
:hover { |
|
||||||
background: #ffff; |
|
||||||
color: #000000; |
|
||||||
|
|
||||||
${CloseButton} { |
|
||||||
background: url(/images/closeBlack.svg) no-repeat; |
|
||||||
} |
|
||||||
}`}
|
|
||||||
|
|
||||||
|
|
||||||
` |
|
||||||
export const FiltersCount = styled(ActiveFilter)`` |
|
||||||
@ -1,87 +0,0 @@ |
|||||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
|
||||||
import { T9n } from 'features/T9n' |
|
||||||
import React, { useState } from 'react' |
|
||||||
import isEmpty from 'lodash/isEmpty' |
|
||||||
import isNil from 'lodash/isNil' |
|
||||||
import { MatchesFilters } from '../MatchesFilters' |
|
||||||
import { |
|
||||||
ClearButton, |
|
||||||
CloseButton, |
|
||||||
FilterContainer, |
|
||||||
Modal, |
|
||||||
} from './styled' |
|
||||||
import { DropDown } from '../Dropdown/Dropdown' |
|
||||||
import { ClearFiltersPopup } from '../ClearFiltersPopup' |
|
||||||
|
|
||||||
export const MobileMathesFilters = () => { |
|
||||||
const [isOpen, setOpen] = useState(false) |
|
||||||
const { |
|
||||||
activeFilters, |
|
||||||
changeInput, |
|
||||||
clearFilters, |
|
||||||
clickClearAll, |
|
||||||
closeDropdownList, |
|
||||||
currentFilters, |
|
||||||
filtersList, |
|
||||||
filtersSize, |
|
||||||
handleSetFilters, |
|
||||||
inputValue, |
|
||||||
isOpenList, |
|
||||||
} = useHeaderFiltersStore() |
|
||||||
|
|
||||||
const openFilters = () => setOpen(true) |
|
||||||
|
|
||||||
const clearAllFilters = () => { |
|
||||||
setOpen(false) |
|
||||||
clickClearAll() |
|
||||||
} |
|
||||||
|
|
||||||
const closeFilters = () => { |
|
||||||
setOpen(false) |
|
||||||
closeDropdownList() |
|
||||||
} |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{!isEmpty(currentFilters) && ( |
|
||||||
<> |
|
||||||
<FilterContainer active={filtersSize !== 0} onClick={openFilters}> |
|
||||||
<T9n t='filter' /> |
|
||||||
{filtersSize !== 0 && ` ${filtersSize}`} |
|
||||||
</FilterContainer> |
|
||||||
<Modal isOpen={isOpen} withCloseButton={false}> |
|
||||||
{isEmpty(isOpenList) |
|
||||||
? ( |
|
||||||
<> |
|
||||||
<MatchesFilters isMobile /> |
|
||||||
{filtersSize !== 0 && ( |
|
||||||
<ClearButton onClick={clearAllFilters}> |
|
||||||
<T9n t='clear' /> |
|
||||||
</ClearButton> |
|
||||||
)} |
|
||||||
<CloseButton onClick={closeFilters} /> |
|
||||||
</> |
|
||||||
) |
|
||||||
: ( |
|
||||||
<> |
|
||||||
{!isNil(filtersList) && ( |
|
||||||
<DropDown |
|
||||||
changeInput={changeInput} |
|
||||||
inputValue={inputValue} |
|
||||||
clearFilters={clearFilters} |
|
||||||
activeFilters={activeFilters} |
|
||||||
setFilters={handleSetFilters} |
|
||||||
filterTitle={isOpenList} |
|
||||||
filterList={filtersList} |
|
||||||
closeDropdownList={closeDropdownList} |
|
||||||
/> |
|
||||||
)} |
|
||||||
<CloseButton onClick={closeFilters} /> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</Modal> |
|
||||||
<ClearFiltersPopup /> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,71 +0,0 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
|
||||||
|
|
||||||
import { ModalWindow } from 'features/Modal/styled' |
|
||||||
import { |
|
||||||
Modal as BaseModal, |
|
||||||
} from 'features/AuthServiceApp/components/RegisterPopup/styled' |
|
||||||
|
|
||||||
export const Modal = styled(BaseModal)` |
|
||||||
${ModalWindow} { |
|
||||||
min-height: auto; |
|
||||||
max-height: 452px; |
|
||||||
max-width: 293px; |
|
||||||
padding: 35px 0 9px 0; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const CloseButton = styled.div` |
|
||||||
position: absolute; |
|
||||||
width: 13px; |
|
||||||
height: 13px; |
|
||||||
background:url(/images/closeWhite.svg) no-repeat; |
|
||||||
background-size: 13px; |
|
||||||
top: 13px; |
|
||||||
right: 13px; |
|
||||||
` |
|
||||||
|
|
||||||
type TFilterProps = { |
|
||||||
active?: boolean, |
|
||||||
} |
|
||||||
|
|
||||||
export const FilterContainer = styled.div<TFilterProps>` |
|
||||||
font-style: normal; |
|
||||||
font-weight: 700; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
color: #FFFFFF; |
|
||||||
padding-left: 22px; |
|
||||||
position: relative; |
|
||||||
margin-left: 20px; |
|
||||||
|
|
||||||
:before{ |
|
||||||
content: ''; |
|
||||||
display: block; |
|
||||||
position: absolute; |
|
||||||
left: 0; |
|
||||||
top: 0; |
|
||||||
width:14px; |
|
||||||
height: 14px; |
|
||||||
${({ active }) => (active |
|
||||||
? css` |
|
||||||
background: url(/images/filter-white.svg) no-repeat;` |
|
||||||
: css` |
|
||||||
background: url(/images/filter-gray.svg) no-repeat;`)} |
|
||||||
background-size: 14px 14px; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export const ClearButton = styled.div` |
|
||||||
font-style: normal; |
|
||||||
position: absolute; |
|
||||||
top: 14px; |
|
||||||
right: 36px; |
|
||||||
font-size: 10px; |
|
||||||
line-height: 12px; |
|
||||||
font-weight: 400; |
|
||||||
letter-spacing: 0.05em; |
|
||||||
text-transform: uppercase; |
|
||||||
color: rgba(255,255,255,0.5); |
|
||||||
` |
|
||||||
Loading…
Reference in new issue