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,113 +1,120 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { ModalWindow } from 'features/Modal/styled' |
||||
import { OutsideClickWrapper } from 'features/OutsideClick' |
||||
import { |
||||
Modal as BaseModal, |
||||
} from 'features/AuthServiceApp/components/RegisterPopup/styled' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
export const Modal = styled(BaseModal)` |
||||
${OutsideClickWrapper} { |
||||
${isMobileDevice |
||||
? css`height: 100%;` |
||||
: ''} |
||||
} |
||||
|
||||
${ModalWindow} { |
||||
${isMobileDevice |
||||
? css` |
||||
min-height: 201px; |
||||
max-width: 351px; |
||||
padding: 26px 19px 33px 19px; |
||||
min-height: 201px; |
||||
max-width: 351px; |
||||
padding: 26px 15px 33px 15px; |
||||
top: 19vh; |
||||
` |
||||
: css` |
||||
min-height: 220px; |
||||
max-width: 611px; |
||||
padding: 37px 0 39px 0; |
||||
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; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-style: normal; |
||||
color: #FFFFFF; |
||||
|
||||
${isMobileDevice |
||||
? css`` |
||||
: css` |
||||
min-width: 611px;`}
|
||||
${isMobileDevice |
||||
? '' |
||||
: 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-weight: 700; |
||||
font-size: 24px; |
||||
line-height: 24px; |
||||
margin-bottom: 45px;`}
|
||||
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; |
||||
font-weight: 400; |
||||
|
||||
${isMobileDevice |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 16px; |
||||
line-height: 22px; |
||||
margin-bottom: 33px;` |
||||
font-size: 16px; |
||||
line-height: 22px; |
||||
margin-bottom: 33px;` |
||||
: css` |
||||
font-size: 20px; |
||||
line-height: 28px; |
||||
margin-bottom: 55px;`}
|
||||
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; |
||||
`}
|
||||
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; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border-radius: 5px; |
||||
color: #FFFF; |
||||
font-weight: 600; |
||||
|
||||
${isMobileDevice |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 16px; |
||||
line-height: 16px; |
||||
width: 149px; |
||||
height: 38px;` |
||||
font-size: 16px; |
||||
line-height: 16px; |
||||
width: 149px; |
||||
height: 38px;` |
||||
: css` |
||||
font-size: 20px; |
||||
line-height: 50px; |
||||
cursor: pointer; |
||||
width: 134px; |
||||
height: 50px;`}
|
||||
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)); |
||||
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)); |
||||
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> |
||||
) |
||||
} |
||||
@ -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