From 174ea0036de3b4c46bceb22d610ade4b23b1876f Mon Sep 17 00:00:00 2001 From: Ruslan Khayrullin Date: Wed, 15 Feb 2023 15:27:49 +0500 Subject: [PATCH] feat(in-264): fixes --- .../components/EventButton/index.tsx | 44 +++++++++++++++---- .../components/PlayersPlaylists/styled.tsx | 1 + .../components/PlayersTable/Cell.tsx | 3 +- .../components/PlayersTable/styled.tsx | 16 ------- .../components/TabEvents/styled.tsx | 8 +--- .../components/TabStats/styled.tsx | 8 ++-- src/hooks/useTooltip.tsx | 1 + 7 files changed, 45 insertions(+), 36 deletions(-) diff --git a/src/features/MatchSidePlaylists/components/EventButton/index.tsx b/src/features/MatchSidePlaylists/components/EventButton/index.tsx index cd369d1f..e5017e82 100644 --- a/src/features/MatchSidePlaylists/components/EventButton/index.tsx +++ b/src/features/MatchSidePlaylists/components/EventButton/index.tsx @@ -1,11 +1,18 @@ -import { ProfileTypes } from 'config' +import { createPortal } from 'react-dom' + +import { isMobileDevice, ProfileTypes } from 'config' import type { Event, Team } from 'requests' -import { usePageParams } from 'hooks/usePageParams' +import { + useTooltip, + usePageParams, + useModalRoot, +} from 'hooks' import { Name } from 'features/Name' import { T9n } from 'features/T9n' +import { useLexicsStore } from 'features/LexicsStore' import { Avatar, @@ -16,8 +23,8 @@ import { SubTitle, EventTime, EventLike, - PlayerNum, } from '../TabEvents/styled' +import { Tooltip } from '../TabStats/styled' type Props = { active?: boolean, @@ -37,6 +44,16 @@ export const EventButton = ({ team, }: Props) => { const { sportType } = usePageParams() + const { + isTooltipShown, + onMouseLeave, + onMouseOver, + tooltipStyle, + tooltipText, + } = useTooltip() + const modalRoot = useModalRoot() + const { suffix } = useLexicsStore() + const { c: clearTime, l: lexica, @@ -82,16 +99,25 @@ export const EventButton = ({ {(score1 || score2) && ` (${score1}-${score2})`} - - {nameObj && 'num' in nameObj && ( - - {(nameObj as Event['pl'])!.num} - - )}{' '} + + {playerName?.num}{' '} {(playerId || teamId) && nameObj && } + {isTooltipShown && modalRoot.current && createPortal( + + {tooltipText} + , + modalRoot.current, + )} ) } diff --git a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx index f96cb113..bb5955ad 100644 --- a/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersPlaylists/styled.tsx @@ -79,6 +79,7 @@ export const PlayerNum = styled.span` export const PlayButton = styled(PlayButtonBase)` justify-content: initial; + padding-right: 10px; ${Duration} { margin-left: auto; diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx index 2122ee81..360a000d 100644 --- a/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersTable/Cell.tsx @@ -10,7 +10,8 @@ import { useTooltip, } from 'hooks' -import { Tooltip, CellContainer } from './styled' +import { Tooltip } from '../TabStats/styled' +import { CellContainer } from './styled' type CellProps = { anchorId?: string, diff --git a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx index 7a721c9c..caf2403a 100644 --- a/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx +++ b/src/features/MatchSidePlaylists/components/PlayersTable/styled.tsx @@ -5,7 +5,6 @@ import styled, { css } from 'styled-components/macro' import { isIOS, isMobileDevice } from 'config' import { customScrollbar } from 'features/Common' -import { TooltipWrapper } from 'features/Tooltip' import { ArrowButton as ArrowButtonBase, Arrow as ArrowBase, @@ -76,21 +75,6 @@ export const Table = styled.table` table-layout: fixed; ` -export const Tooltip = styled(TooltipWrapper)` - display: block; - padding: 2px 10px; - border-radius: 6px; - transform: none; - font-size: 11px; - line-height: 1; - color: ${({ theme }) => theme.colors.black}; - z-index: 999; - - ::before { - display: none; - } -` - type ParamShortTitleProps = { showLeftArrow?: boolean, sortDirection: 'asc' | 'desc', diff --git a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx index f7dc7afe..f5e082d8 100644 --- a/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabEvents/styled.tsx @@ -121,12 +121,10 @@ export const SubTitle = styled(Title)` margin-top: 2px; ${NameStyled} { - font-weight: 600; + font-weight: 700; } ` -export const PlayerNum = styled.span`` - export const EventLike = styled.img` position: absolute; left: -14px; @@ -218,10 +216,6 @@ export const Button = styled(ButtonBase) ` background-size: cover; ` : '' )} - - &:hover ${EventDesc} { - overflow: visible; - } ${({ isHomeTeam }) => ( isHomeTeam diff --git a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx index 94355c8d..701d94f7 100644 --- a/src/features/MatchSidePlaylists/components/TabStats/styled.tsx +++ b/src/features/MatchSidePlaylists/components/TabStats/styled.tsx @@ -16,14 +16,16 @@ export const TabList = styled.div.attrs({ role: 'tablist' })` ` export const Tooltip = styled(TooltipWrapper)` - display: block; - padding: 2px 10px; + display: flex; + justify-content: center; + align-items: center; + height: 17px; + padding: 0 10px; border-radius: 6px; transform: none; font-size: 11px; line-height: 1; color: ${({ theme }) => theme.colors.black}; - z-index: 999; ::before { display: none; diff --git a/src/hooks/useTooltip.tsx b/src/hooks/useTooltip.tsx index 161f12d2..e2c236e6 100644 --- a/src/hooks/useTooltip.tsx +++ b/src/hooks/useTooltip.tsx @@ -56,6 +56,7 @@ export const useTooltip = () => { position: 'fixed', right: !isUndefined(coords.right) ? `${window.screen.width - coords.right}px` : 'auto', top: `${coords.top}px`, + zIndex: 999, ...(horizontalPosition === 'center' && { transform: 'translateX: (-50%)' }), ...(verticalPosition === 'top' && { transform: 'translateY: (-50%)' }),