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) => {
-
+
{
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 = ({
/>