alexnofoget
3 years ago
parent
873718947f
commit
291d44c858
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 314 B |
|
After Width: | Height: | Size: 609 B |
|
After Width: | Height: | Size: 590 B |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,101 @@ |
||||
import { useMemo, useState } from 'react' |
||||
|
||||
import includes from 'lodash/includes' |
||||
import filter from 'lodash/filter' |
||||
import isEmpty from 'lodash/isEmpty' |
||||
import size from 'lodash/size' |
||||
|
||||
type TTogglePlayers = { |
||||
id: Number, |
||||
team: String, |
||||
} |
||||
|
||||
type TFilters = { |
||||
events: Array<Number>, |
||||
players: Array<Number>, |
||||
} |
||||
|
||||
export const useFiltersPopup = () => { |
||||
const [isOpen, setIsOpen] = useState(false) |
||||
const [activeEvents, setActiveEvents] = useState<Array<Number>>([]) |
||||
const [activeFirstTeamPlayers, setActiveFirstTeamPlayers] = useState<Array<Number>>([]) |
||||
const [activeSecondTeamPlayers, setActiveSecondTeamPlayers] = useState<Array<Number>>([]) |
||||
const [activeFilters, setActiveFilters] = useState<TFilters>({ events: [], players: [] }) |
||||
|
||||
const toggle = () => { |
||||
setIsOpen(!isOpen) |
||||
} |
||||
|
||||
const close = () => { |
||||
setIsOpen(false) |
||||
} |
||||
|
||||
const toggleActiveEvents = (id: number) => () => { |
||||
setActiveEvents(includes(activeEvents, id) |
||||
? [...filter(activeEvents, (item) => item !== id)] |
||||
: [...activeEvents, id]) |
||||
} |
||||
|
||||
const toggleActivePlayers = ({ id, team }: TTogglePlayers) => () => { |
||||
const teamState = team === 'team1' |
||||
? activeFirstTeamPlayers |
||||
: activeSecondTeamPlayers |
||||
|
||||
const setterTeamState = team === 'team1' |
||||
? setActiveFirstTeamPlayers |
||||
: setActiveSecondTeamPlayers |
||||
|
||||
setterTeamState(includes(teamState, id) |
||||
? [...filter(teamState, (item) => item !== id)] |
||||
: [...teamState, id]) |
||||
} |
||||
|
||||
const resetPlayers = (team: string) => () => { |
||||
const teamState = team === 'team1' |
||||
? activeFirstTeamPlayers |
||||
: activeSecondTeamPlayers |
||||
|
||||
const setterTeamState = team === 'team1' |
||||
? setActiveFirstTeamPlayers |
||||
: setActiveSecondTeamPlayers |
||||
|
||||
if (isEmpty(teamState)) return |
||||
setterTeamState([]) |
||||
} |
||||
|
||||
const resetEvents = () => { |
||||
if (isEmpty(activeEvents)) return |
||||
setActiveEvents([]) |
||||
} |
||||
|
||||
const applyFilters = () => { |
||||
setActiveFilters({ |
||||
events: [...activeEvents], |
||||
players: [...activeFirstTeamPlayers, ...activeSecondTeamPlayers], |
||||
}) |
||||
close() |
||||
} |
||||
|
||||
const isEmptyFilters = useMemo(() => ( |
||||
isEmpty(activeFilters.events) && isEmpty(activeFilters.players)), [activeFilters]) |
||||
|
||||
const countOfFilters = useMemo(() => ( |
||||
size(activeFilters.events) + size(activeFilters.players)), [activeFilters]) |
||||
|
||||
return { |
||||
activeEvents, |
||||
activeFirstTeamPlayers, |
||||
activeSecondTeamPlayers, |
||||
applyFilters, |
||||
close, |
||||
countOfFilters, |
||||
filters: activeFilters, |
||||
isEmptyFilters, |
||||
isOpen, |
||||
resetEvents, |
||||
resetPlayers, |
||||
toggle, |
||||
toggleActiveEvents, |
||||
toggleActivePlayers, |
||||
} |
||||
} |
||||
@ -0,0 +1,80 @@ |
||||
import { |
||||
useCallback, |
||||
useMemo, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import map from 'lodash/map' |
||||
import groupBy from 'lodash/groupBy' |
||||
import reverse from 'lodash/reverse' |
||||
import filter from 'lodash/filter' |
||||
import values from 'lodash/values' |
||||
import flatten from 'lodash/flatten' |
||||
import { Events, MatchInfo } from 'requests' |
||||
import { useToggle } from 'hooks' |
||||
import { EventPlaylistOption } from 'features/MatchPage/types' |
||||
|
||||
type TPropsTabEvents = { |
||||
events?: Events, |
||||
profile?: MatchInfo, |
||||
} |
||||
|
||||
export const useTabEvents = ({ |
||||
events, |
||||
profile, |
||||
}: TPropsTabEvents) => { |
||||
const [likesOnly, setLikesOnly] = useState(false) |
||||
|
||||
const { |
||||
close: setUnreversed, |
||||
isOpen: areEventsReversed, |
||||
open: setReversed, |
||||
} = useToggle() |
||||
|
||||
const likeToggle = useCallback(() => setLikesOnly((state) => !state), []) |
||||
const likeImage = likesOnly ? '/images/like-active-icon.svg' : '/images/likeDisable.svg' |
||||
|
||||
const isLiveMatch = profile?.live |
||||
const reverseStatus = (areEventsReversed || isLiveMatch) && (areEventsReversed !== isLiveMatch) |
||||
const activeStatus = isLiveMatch ? areEventsReversed : !areEventsReversed |
||||
|
||||
const reversedGroupEvents = useMemo(() => { |
||||
const eventsList = likesOnly ? filter(events, 'like') : events |
||||
const groupedEvents = values( |
||||
groupBy( |
||||
reverseStatus |
||||
? reverse([...eventsList!]) |
||||
: eventsList, |
||||
({ h }) => h, |
||||
), |
||||
) |
||||
return reverseStatus |
||||
? reverse(groupedEvents) |
||||
: groupedEvents |
||||
}, [ |
||||
events, |
||||
likesOnly, |
||||
reverseStatus, |
||||
]) |
||||
|
||||
const episodesToPlay = map(flatten(reversedGroupEvents), ((event) => ({ |
||||
episodes: [{ |
||||
e: event.e, |
||||
h: event.h, |
||||
s: event.s, |
||||
}], |
||||
id: event.n, |
||||
type: 3, |
||||
}))) as Array<EventPlaylistOption> |
||||
|
||||
return { |
||||
activeStatus, |
||||
episodesToPlay, |
||||
isLiveMatch, |
||||
likeImage, |
||||
likeToggle, |
||||
reversedGroupEvents, |
||||
setReversed, |
||||
setUnreversed, |
||||
} |
||||
} |
||||
@ -0,0 +1,145 @@ |
||||
import uniq from 'lodash/uniq' |
||||
import map from 'lodash/map' |
||||
import isEmpty from 'lodash/isEmpty' |
||||
import includes from 'lodash/includes' |
||||
import filter from 'lodash/filter' |
||||
|
||||
import { T9n } from 'features/T9n' |
||||
import { useMatchPageStore } from 'features/MatchPage/store' |
||||
import { PlayerPlaylistOption } from 'features/MatchPage/types' |
||||
import { CloseButton } from 'features/PopupComponents' |
||||
import { Name, useName } from 'features/Name' |
||||
|
||||
import { |
||||
Checkbox, |
||||
CloseButtonContainer, |
||||
PartBlock, |
||||
HeaderText, |
||||
ItemBlock, |
||||
ItemsContainer, |
||||
ItemText, |
||||
MainCheckboxContainer, |
||||
PopupContainer, |
||||
PopupHeader, |
||||
Button, |
||||
ButtonConatiner, |
||||
PlayerNumber, |
||||
} from './styled' |
||||
|
||||
type TLabelProps = { |
||||
player: PlayerPlaylistOption, |
||||
} |
||||
|
||||
const Label = ({ player }: TLabelProps) => { |
||||
const { num } = player |
||||
return ( |
||||
<ItemText> |
||||
<PlayerNumber> |
||||
{num} |
||||
</PlayerNumber> |
||||
<Name nameObj={player} /> |
||||
</ItemText> |
||||
) |
||||
} |
||||
|
||||
export const FiltersPopup = () => { |
||||
const { |
||||
activeEvents, |
||||
activeFirstTeamPlayers, |
||||
activeSecondTeamPlayers, |
||||
applyFilters, |
||||
closePopup, |
||||
events, |
||||
matchPlaylists, |
||||
profile, |
||||
resetEvents, |
||||
resetPlayers, |
||||
toggleActiveEvents, |
||||
toggleActivePlayers, |
||||
} = useMatchPageStore() |
||||
const currentEvents = filter(events, (event) => event.pl !== undefined |
||||
&& event.t !== undefined) |
||||
|
||||
const uniqEvents = uniq(map(currentEvents, ({ l }) => l)) |
||||
|
||||
const team1Name = useName(profile!.team1) |
||||
const team2Name = useName(profile!.team2) |
||||
|
||||
return ( |
||||
<PopupContainer> |
||||
<CloseButtonContainer> |
||||
<CloseButton onClick={closePopup} /> |
||||
</CloseButtonContainer> |
||||
<PopupHeader> |
||||
<HeaderText> |
||||
<T9n t='filter' /> |
||||
</HeaderText> |
||||
</PopupHeader> |
||||
<PartBlock> |
||||
<MainCheckboxContainer> |
||||
<Checkbox |
||||
onChange={resetEvents} |
||||
checked={isEmpty(activeEvents)} |
||||
labelLexic='all_actions' |
||||
/> |
||||
</MainCheckboxContainer> |
||||
<ItemsContainer> |
||||
{map(uniqEvents, ((event) => ( |
||||
<ItemBlock key={event}> |
||||
<Checkbox |
||||
checked={includes(activeEvents, event)} |
||||
onChange={toggleActiveEvents(event)} |
||||
labelLexic={event} |
||||
/> |
||||
</ItemBlock> |
||||
)))} |
||||
</ItemsContainer> |
||||
</PartBlock> |
||||
<PartBlock> |
||||
<MainCheckboxContainer> |
||||
<Checkbox |
||||
checked={isEmpty(activeFirstTeamPlayers)} |
||||
label={team1Name} |
||||
onChange={resetPlayers('team1')} |
||||
/> |
||||
</MainCheckboxContainer> |
||||
<ItemsContainer> |
||||
{map(matchPlaylists.players.team1, ((player) => ( |
||||
<ItemBlock key={player.id}> |
||||
<Checkbox |
||||
onChange={toggleActivePlayers({ id: player.id, team: 'team1' })} |
||||
checked={includes(activeFirstTeamPlayers, player.id)} |
||||
label={(<Label player={player} />)} |
||||
/> |
||||
</ItemBlock> |
||||
)))} |
||||
</ItemsContainer> |
||||
</PartBlock> |
||||
<PartBlock> |
||||
<MainCheckboxContainer> |
||||
<Checkbox |
||||
checked={isEmpty(activeSecondTeamPlayers)} |
||||
label={team2Name} |
||||
onChange={resetPlayers('team2')} |
||||
/> |
||||
</MainCheckboxContainer> |
||||
<ItemsContainer> |
||||
{map(matchPlaylists.players.team2, ((player) => ( |
||||
<ItemBlock key={player.id}> |
||||
<Checkbox |
||||
onChange={toggleActivePlayers({ id: player.id, team: 'team2' })} |
||||
checked={includes(activeSecondTeamPlayers, player.id)} |
||||
label={(<Label player={player} />)} |
||||
/> |
||||
</ItemBlock> |
||||
)))} |
||||
</ItemsContainer> |
||||
</PartBlock> |
||||
<ButtonConatiner> |
||||
<Button onClick={applyFilters}> |
||||
<T9n t='apply_filter' /> |
||||
</Button> |
||||
</ButtonConatiner> |
||||
</PopupContainer> |
||||
) |
||||
} |
||||
@ -0,0 +1,199 @@ |
||||
import styled, { css } from 'styled-components/macro' |
||||
|
||||
import { Checkbox as BaseCheckbox } from 'features/Common/Checkbox' |
||||
import { Label } from 'features/Common/Checkbox/styled' |
||||
import { CheckboxSvg } from 'features/Common/Checkbox/Icon' |
||||
import { customScrollbar } from 'features/Common' |
||||
import { NameStyled } from 'features/Name' |
||||
import { isMobileDevice } from 'config/userAgent' |
||||
import { BaseButton } from 'features/PopupComponents' |
||||
|
||||
export const PopupContainer = styled.div` |
||||
background: #333333; |
||||
box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.6); |
||||
border-radius: 2px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
position: absolute; |
||||
overflow-y: auto; |
||||
z-index: 1000; |
||||
height: 100%; |
||||
right: 0; |
||||
top: 0; |
||||
|
||||
${customScrollbar} |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
position: fixed; |
||||
height: calc(100vh - 40px); |
||||
width: 100%; |
||||
padding-bottom: 70px; |
||||
top: 40px;` |
||||
: css` |
||||
width: 651px;`}
|
||||
` |
||||
|
||||
export const PopupHeader = styled.div` |
||||
flex: 0 0 auto; |
||||
${isMobileDevice |
||||
? css` |
||||
height: auto; |
||||
padding: 12px 0px 0px 0px; |
||||
margin-bottom: 14px;` |
||||
: css` |
||||
height: 50px; |
||||
padding: 17px 22px 0px 22px;`}
|
||||
` |
||||
|
||||
export const CloseButtonContainer = styled.div` |
||||
position: absolute; |
||||
top: 14px; |
||||
right: 12px; |
||||
|
||||
${BaseButton} { |
||||
top: -4px; |
||||
right:0 ; |
||||
} |
||||
` |
||||
|
||||
export const HeaderText = styled.div` |
||||
font-family: 'Montserrat'; |
||||
font-style: normal; |
||||
font-weight: 700; |
||||
text-transform: uppercase; |
||||
|
||||
color: #FFFFFF; |
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
line-height: 15px; |
||||
text-align: center;` |
||||
: css` |
||||
font-size: 18px; |
||||
line-height: 22px; |
||||
margin-bottom: 21px;`}
|
||||
` |
||||
|
||||
export const PartBlock = styled.div` |
||||
flex: 1 0 auto; |
||||
border-bottom: 1px solid #505050; |
||||
padding: 17px 22px 17px 22px; |
||||
` |
||||
|
||||
export const ItemsContainer = styled.ul` |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
` |
||||
|
||||
export const MainCheckboxContainer = styled.div` |
||||
margin-bottom: 15px; |
||||
display: flex; |
||||
` |
||||
|
||||
export const ItemBlock = styled.div` |
||||
flex: 0 0 33.33%; |
||||
margin-bottom: 4px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
flex: 0 0 50%;` |
||||
: css` |
||||
flex: 0 0 33.33%;`}
|
||||
` |
||||
|
||||
export const Checkbox = styled(BaseCheckbox)` |
||||
height: 28px; |
||||
display: block; |
||||
|
||||
${Label} { |
||||
height: 100%; |
||||
font-style: normal; |
||||
font-weight: 400; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
font-size: 12px; |
||||
line-height: 18px;` |
||||
: css` |
||||
font-size: 14px; |
||||
line-height: 16px;`}
|
||||
|
||||
${({ checked }) => (checked |
||||
? css`` |
||||
: css` |
||||
color: rgba(255, 255, 255, 0.6);` |
||||
)} |
||||
} |
||||
|
||||
${CheckboxSvg} { |
||||
margin-right: 8px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
` |
||||
|
||||
export const ItemText = styled.div` |
||||
display: flex; |
||||
height: 100%; |
||||
align-items: center; |
||||
|
||||
${NameStyled} { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
width: 130px; |
||||
} |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 110px;` |
||||
: css` |
||||
width: 130px;`}
|
||||
` |
||||
|
||||
export const TeamBlock = styled.div`` |
||||
|
||||
export const ButtonConatiner = styled.div` |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex: 0 0 66px; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
position: fixed; |
||||
bottom: 14px; |
||||
left: 50%; |
||||
transform: translate(-50%, 0);` |
||||
: css``} |
||||
` |
||||
|
||||
export const Button = styled.button` |
||||
height: 41px; |
||||
background: #294FC4; |
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); |
||||
border-radius: 5px; |
||||
border: none; |
||||
cursor: pointer; |
||||
font-size: 15px; |
||||
line-height: 50px; |
||||
font-weight: 600; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
color: #ffff; |
||||
|
||||
${isMobileDevice |
||||
? css` |
||||
width: 301px;` |
||||
: css` |
||||
width: 167px;`}
|
||||
` |
||||
export const PlayerNumber = styled.span` |
||||
margin-right: 8px; |
||||
font-size: 11px; |
||||
line-height: 16px; |
||||
font-weight: 600; |
||||
` |
||||
Loading…
Reference in new issue