This reverts commit 26cbef8763.
keep-around/61a2661a1c7b0f958a65795b5393822fb1d16524
Andrei Dekterev
3 years ago
parent
12b8c4d688
commit
61a2661a1c
@ -0,0 +1,6 @@ |
|||||||
|
import { atom } from 'recoil' |
||||||
|
|
||||||
|
export const isSportFilterShownAtom = atom({ |
||||||
|
default: true, |
||||||
|
key: 'isSportFilterShownAtom', |
||||||
|
}) |
||||||
@ -1,120 +1,113 @@ |
|||||||
import styled, { css } from 'styled-components/macro' |
import styled, { css } from 'styled-components/macro' |
||||||
|
|
||||||
import { ModalWindow } from 'features/Modal/styled' |
import { ModalWindow } from 'features/Modal/styled' |
||||||
import { OutsideClickWrapper } from 'features/OutsideClick' |
|
||||||
import { |
import { |
||||||
Modal as BaseModal, |
Modal as BaseModal, |
||||||
} from 'features/AuthServiceApp/components/RegisterPopup/styled' |
} from 'features/AuthServiceApp/components/RegisterPopup/styled' |
||||||
import { isMobileDevice } from 'config/userAgent' |
import { isMobileDevice } from 'config/userAgent' |
||||||
|
|
||||||
export const Modal = styled(BaseModal)` |
export const Modal = styled(BaseModal)` |
||||||
${OutsideClickWrapper} { |
|
||||||
${isMobileDevice |
|
||||||
? css`height: 100%;` |
|
||||||
: ''} |
|
||||||
} |
|
||||||
|
|
||||||
${ModalWindow} { |
${ModalWindow} { |
||||||
${isMobileDevice |
${isMobileDevice |
||||||
? css` |
? css` |
||||||
min-height: 201px; |
min-height: 201px; |
||||||
max-width: 351px; |
max-width: 351px; |
||||||
padding: 26px 15px 33px 15px; |
padding: 26px 19px 33px 19px; |
||||||
top: 19vh; |
|
||||||
` |
` |
||||||
: css` |
: css` |
||||||
min-height: 220px; |
min-height: 220px; |
||||||
max-width: 611px; |
max-width: 611px; |
||||||
padding: 37px 0 39px 0; |
padding: 37px 0 39px 0; |
||||||
`}
|
`}
|
||||||
} |
} |
||||||
` |
` |
||||||
|
|
||||||
export const PopupContainer = styled.div` |
export const PopupContainer = styled.div` |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: column; |
flex-direction: column; |
||||||
align-items: center; |
align-items: center; |
||||||
justify-content: center; |
justify-content: center; |
||||||
font-style: normal; |
font-style: normal; |
||||||
color: #FFFFFF; |
color: #FFFFFF; |
||||||
|
|
||||||
${isMobileDevice |
${isMobileDevice |
||||||
? '' |
? css`` |
||||||
: css`min-width: 611px;`} |
: css` |
||||||
|
min-width: 611px;`}
|
||||||
` |
` |
||||||
|
|
||||||
export const PopupTitle = styled.div` |
export const PopupTitle = styled.div` |
||||||
font-weight: 700; |
font-weight: 700; |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
line-height: 24px; |
line-height: 24px; |
||||||
margin-bottom: 45px; |
margin-bottom: 45px; |
||||||
|
${isMobileDevice |
||||||
${isMobileDevice |
|
||||||
? css` |
? css` |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
line-height: 24px; |
line-height: 24px; |
||||||
margin-bottom: 25px;` |
margin-bottom: 25px;` |
||||||
: css` |
: css` |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
line-height: 24px; |
line-height: 24px; |
||||||
margin-bottom: 45px;`}
|
margin-bottom: 45px;`}
|
||||||
` |
` |
||||||
|
|
||||||
export const PopupText = styled.div` |
export const PopupText = styled.div` |
||||||
font-weight: 400; |
font-weight: 400; |
||||||
|
|
||||||
${isMobileDevice |
${isMobileDevice |
||||||
? css` |
? css` |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
line-height: 22px; |
line-height: 22px; |
||||||
margin-bottom: 33px;` |
margin-bottom: 33px;` |
||||||
: css` |
: css` |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
line-height: 28px; |
line-height: 28px; |
||||||
margin-bottom: 55px;`}
|
margin-bottom: 55px;`}
|
||||||
` |
` |
||||||
|
|
||||||
export const ButtonsContainer = styled.div` |
export const ButtonsContainer = styled.div` |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
flex-direction: row; |
||||||
align-items: center; |
align-items: center; |
||||||
|
${isMobileDevice |
||||||
${isMobileDevice |
? css` |
||||||
? css`gap: 15px;` |
gap: 15px;` |
||||||
: css`gap: 20px;`} |
: css` |
||||||
|
gap: 20px; |
||||||
|
`}
|
||||||
` |
` |
||||||
|
|
||||||
const Button = styled.button` |
const Button = styled.button` |
||||||
display: flex; |
display: flex; |
||||||
flex-direction: row; |
flex-direction: row; |
||||||
justify-content: center; |
justify-content: center; |
||||||
align-items: center; |
align-items: center; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
color: #FFFF; |
color: #FFFF; |
||||||
font-weight: 600; |
font-weight: 600; |
||||||
|
|
||||||
${isMobileDevice |
${isMobileDevice |
||||||
? css` |
? css` |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
line-height: 16px; |
line-height: 16px; |
||||||
width: 149px; |
width: 149px; |
||||||
height: 38px;` |
height: 38px;` |
||||||
: css` |
: css` |
||||||
font-size: 20px; |
font-size: 20px; |
||||||
line-height: 50px; |
line-height: 50px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
width: 134px; |
width: 134px; |
||||||
height: 50px;`}
|
height: 50px;`}
|
||||||
` |
` |
||||||
|
|
||||||
export const ConfirmButton = styled(Button)` |
export const ConfirmButton = styled(Button)` |
||||||
background: #294FC4; |
background: #294FC4; |
||||||
border: 1px solid #294FC4; |
border: 1px solid #294FC4; |
||||||
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
||||||
` |
` |
||||||
|
|
||||||
export const CancelButton = styled(Button)` |
export const CancelButton = styled(Button)` |
||||||
border: 1px solid #FFFFFF; |
border: 1px solid #FFFFFF; |
||||||
background: none; |
background: none; |
||||||
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3)); |
||||||
` |
` |
||||||
|
|||||||
@ -0,0 +1,160 @@ |
|||||||
|
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,127 +0,0 @@ |
|||||||
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