diff --git a/src/features/MatchPage/helpers/buildPlaylists.tsx b/src/features/MatchPage/helpers/buildPlaylists.tsx index 8bb99611..279497d3 100644 --- a/src/features/MatchPage/helpers/buildPlaylists.tsx +++ b/src/features/MatchPage/helpers/buildPlaylists.tsx @@ -36,8 +36,6 @@ const getMatchPlaylists = (matchPlaylists: MatchPlaylists | null): MatchPlaylist const getPlayerPlaylists = (players?: Players): PlayerPlaylistOptions => ( map(players, (player) => ({ ...player, - name_eng: `${player.num} ${player.name_eng}`, - name_rus: `${player.num} ${player.name_rus}`, type: PlaylistTypes.PLAYER, })) ) diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx index b32d8d11..ae4d718e 100644 --- a/src/features/MatchPage/types.tsx +++ b/src/features/MatchPage/types.tsx @@ -19,6 +19,7 @@ export type PlayerPlaylistOption = { id: number, name_eng: string, name_rus: string, + num: string, start?: boolean, type: PlaylistTypes.PLAYER, } diff --git a/src/features/MatchPopup/components/PlayersList/index.tsx b/src/features/MatchPopup/components/PlayersList/index.tsx index b25d6b29..6f965367 100644 --- a/src/features/MatchPopup/components/PlayersList/index.tsx +++ b/src/features/MatchPopup/components/PlayersList/index.tsx @@ -3,6 +3,7 @@ import map from 'lodash/map' import { ProfileTypes } from 'config' import { T9n } from 'features/T9n' +import { Name } from 'features/Name' import { PlayerPlaylistOptions } from 'features/MatchPage/types' import { useMatchPopupStore } from 'features/MatchPopup/store' @@ -11,7 +12,8 @@ import { List, Item, Logo, - PlayerName, + NameWrapper, + ShirtNumber, Button, PlayerPhoto, PlayerGk, @@ -54,7 +56,10 @@ export const PlayersList = ({ )} - + + {player.num} + + )) diff --git a/src/features/MatchPopup/components/PlayersList/styled.tsx b/src/features/MatchPopup/components/PlayersList/styled.tsx index 2e3ccbe5..f9de59d8 100644 --- a/src/features/MatchPopup/components/PlayersList/styled.tsx +++ b/src/features/MatchPopup/components/PlayersList/styled.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components/macro' import { devices } from 'config' -import { Name } from 'features/Name' import { ProfileLogo } from 'features/ProfileLogo' import { Teams } from '../../types' @@ -65,7 +64,6 @@ export const Button = styled.button` display: flex; flex-direction: column; align-items: center; - justify-content: space-between; @media ${devices.mobile} { flex-direction: row; @@ -87,14 +85,12 @@ export const Logo = styled(ProfileLogo)` )}; ` -export const PlayerName = styled(Name)` - width: 100%; - font-weight: bold; - font-size: 10px; +export const NameWrapper = styled.span` + color: #fff; line-height: 10px; + font-size: 10px; text-align: center; letter-spacing: 0.02em; - color: #fff; @media ${devices.mobile} { text-align: start; @@ -104,6 +100,11 @@ export const PlayerName = styled(Name)` } ` +export const ShirtNumber = styled.span` + font-weight: bold; + margin-right: 6px; +` + export const PlayerPhoto = styled.div` position: relative; width: 65px; diff --git a/src/features/MatchSidePlaylists/components/DropdownSection/index.tsx b/src/features/MatchSidePlaylists/components/DropdownSection/index.tsx index 2b7e7224..c2fca87f 100644 --- a/src/features/MatchSidePlaylists/components/DropdownSection/index.tsx +++ b/src/features/MatchSidePlaylists/components/DropdownSection/index.tsx @@ -14,22 +14,23 @@ import { type Props = { children: ReactNode, + isOpen?: boolean, itemsCount: number, title?: string | number, } -export const DropdownSection = (props: Props) => { +export const DropdownSection = ({ + children, + isOpen: isOpenInitial, + itemsCount, + title, +}: Props) => { const { isOpen, toggle, - } = useToggle() + } = useToggle(isOpenInitial) - const { - children, - itemsCount, - title, - } = props - if (!title) return null + if (!title || itemsCount === 0) return null return ( diff --git a/src/features/MatchSidePlaylists/components/DropdownSection/styled.tsx b/src/features/MatchSidePlaylists/components/DropdownSection/styled.tsx index c85b92f8..e66e1181 100644 --- a/src/features/MatchSidePlaylists/components/DropdownSection/styled.tsx +++ b/src/features/MatchSidePlaylists/components/DropdownSection/styled.tsx @@ -8,12 +8,6 @@ export const Wrapper = styled.div` margin-bottom: 10px; ` -export const Item = styled.li` - margin-top: 15px; - width: 100%; - height: 50px; -` - export const SectionWrapper = styled.div` overflow: hidden; transition: .3s; diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx index b2dc3ba5..e51df95e 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx @@ -1,19 +1,25 @@ +import { useRef, useEffect } from 'react' + import styled from 'styled-components/macro' import map from 'lodash/map' +import find from 'lodash/find' import type { Team } from 'requests' -import type { PlaylistOption } from 'features/MatchPage/types' +import type { + PlayerPlaylistOptions, + PlayerPlaylistOption, + PlaylistOption, +} from 'features/MatchPage/types' import { Name } from 'features/Name' import { isEqual } from 'features/MatchSidePlaylists' import { PlayButton } from '../PlayButton' -import { Item } from '../DropdownSection/styled' type Props = { - onSelect: (selectedMathPlaylist: PlaylistOption) => void, - players: Array, + onSelect: (selectedMathPlaylist: PlayerPlaylistOption) => void, + players: PlayerPlaylistOptions, selectedMathPlaylist?: PlaylistOption, teamName?: Team, } @@ -24,9 +30,12 @@ const Wrapper = styled.div` const List = styled.ul`` -const PlayersItem = styled(Item)` - margin-top: 10px +const PlayersItem = styled.li` + width: 100%; + height: 50px; + margin-top: 10px; ` + const Title = styled.span` font-weight: 300; font-size: 16px; @@ -35,13 +44,28 @@ const Title = styled.span` color: #ffffff; ` -export const PlayersPlaylists = (props: Props) => { - const { - onSelect, - players, - selectedMathPlaylist, - teamName, - } = props +const ShirtNumber = styled.span` + font-weight: bold; + margin-right: 6px; +` + +export const PlayersPlaylists = ({ + onSelect, + players, + selectedMathPlaylist, + teamName, +}: Props) => { + const listRef = useRef(null) + + useEffect(() => { + const found = find( + players, + (player) => isEqual(player, selectedMathPlaylist), + ) + if (found) { + listRef.current?.scrollIntoView() + } + }, [players, selectedMathPlaylist]) if (!selectedMathPlaylist || !teamName) return null @@ -50,7 +74,7 @@ export const PlayersPlaylists = (props: Props) => { <Name nameObj={teamName} /> - + { map(players, (player) => ( @@ -58,6 +82,7 @@ export const PlayersPlaylists = (props: Props) => { onClick={() => onSelect(player)} active={isEqual(player, selectedMathPlaylist)} > + {player.num} diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 23743346..318a374c 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -1,5 +1,6 @@ import size from 'lodash/size' +import { PlaylistTypes } from 'features/MatchPage/types' import type { PlaylistOption, Playlists } from 'features/MatchPage/types' import type { MatchInfo } from 'requests' @@ -54,6 +55,7 @@ export const MatchSidePlaylists = ({ />