boyvanov
3 years ago
committed by
Andrei Dekterev
parent
3d3716c8ee
commit
26cbef8763
@ -1,6 +0,0 @@ |
||||
import { atom } from 'recoil' |
||||
|
||||
export const isSportFilterShownAtom = atom({ |
||||
default: true, |
||||
key: 'isSportFilterShownAtom', |
||||
}) |
||||
@ -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> |
||||
) |
||||
} |
||||
@ -0,0 +1,127 @@ |
||||
import { ChangeEvent, MouseEvent } from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
import isEmpty from 'lodash/isEmpty' |
||||
import includes from 'lodash/includes' |
||||
import isNumber from 'lodash/isNumber' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { Name } from 'features/Name' |
||||
import { useLexicsStore } from 'features/LexicsStore' |
||||
import { useHeaderFiltersStore } from 'features/HeaderFilters' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { |
||||
TDropDownProps, |
||||
TFilterItem, |
||||
TItem, |
||||
} from './types' |
||||
import { |
||||
DropDownContainer, |
||||
FiltersList, |
||||
FilterItem, |
||||
Checkbox, |
||||
CommonButtonsBlock, |
||||
ClearButtonContainer, |
||||
SearchWithAllContainer, |
||||
SearchContainer, |
||||
SearchInput, |
||||
BackButton, |
||||
} from './styled' |
||||
import { Title } from '../MatchesFilters/styled' |
||||
|
||||
const Label = ({ item }: TFilterItem) => ( |
||||
isNumber(item) ? <>U{item}</> : <Name nameObj={item} /> |
||||
) |
||||
|
||||
export const DropDown = ({ |
||||
activeFilters, |
||||
changeInput, |
||||
clearFilters, |
||||
closeDropdownList, |
||||
filterTitle, |
||||
inputValue, |
||||
setFilters, |
||||
}: TDropDownProps) => { |
||||
const { translate } = useLexicsStore() |
||||
const { getDropdownList } = useHeaderFiltersStore() |
||||
|
||||
const dropdownList = getDropdownList(filterTitle, inputValue) as Array<TItem | number> |
||||
|
||||
const currentActiveFilter = activeFilters[filterTitle as keyof typeof activeFilters] |
||||
|
||||
return ( |
||||
<DropDownContainer> |
||||
<FiltersList> |
||||
<CommonButtonsBlock isArena={filterTitle === 'arena'}> |
||||
<SearchWithAllContainer> |
||||
{isMobileDevice && closeDropdownList |
||||
&& ( |
||||
<BackButton onClick={closeDropdownList} className='back_button'> |
||||
{isMobileDevice && (<Title t={filterTitle} />)} |
||||
</BackButton> |
||||
)} |
||||
{filterTitle === 'arena' && ( |
||||
<SearchContainer> |
||||
<SearchInput |
||||
onChange={changeInput} |
||||
onClick={(e) => e.stopPropagation()} |
||||
placeholder={translate('search')} |
||||
value={inputValue} |
||||
/> |
||||
</SearchContainer> |
||||
)} |
||||
<Checkbox |
||||
onChange={clearFilters(filterTitle)} |
||||
checked={isEmpty(currentActiveFilter)} |
||||
labelLexic='all' |
||||
/> |
||||
</SearchWithAllContainer> |
||||
{!isEmpty(currentActiveFilter) && ( |
||||
<ClearButtonContainer |
||||
onClick={clearFilters(filterTitle)} |
||||
> |
||||
<T9n |
||||
className='clear_button' |
||||
t='clear' |
||||
/> |
||||
</ClearButtonContainer> |
||||
)} |
||||
</CommonButtonsBlock> |
||||
|
||||
{map(dropdownList, (filterItem) => { |
||||
const filterValue = isNumber(filterItem) ? filterItem : filterItem.id |
||||
const handleClick = (e: ChangeEvent | MouseEvent) => { |
||||
e.preventDefault() |
||||
e.stopPropagation() |
||||
setFilters(filterTitle, filterValue) |
||||
} |
||||
|
||||
return ( |
||||
<FilterItem |
||||
key={filterValue} |
||||
onClick={handleClick} |
||||
> |
||||
{includes(['gender', 'sport'], filterTitle) |
||||
? ( |
||||
<Checkbox |
||||
checked={includes(currentActiveFilter, filterValue)} |
||||
onChange={handleClick} |
||||
labelLexic={!isNumber(filterItem) ? filterItem.lexic : ''} |
||||
/> |
||||
) |
||||
: ( |
||||
<Checkbox |
||||
checked={includes(currentActiveFilter, filterValue)} |
||||
onChange={handleClick} |
||||
label={(<Label item={filterItem} />)} |
||||
/> |
||||
)} |
||||
</FilterItem> |
||||
) |
||||
})} |
||||
</FiltersList> |
||||
</DropDownContainer> |
||||
) |
||||
} |
||||
Loading…
Reference in new issue