diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx index 92248928..dcfe083d 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx +++ b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx @@ -19,6 +19,7 @@ import { usePageParams } from 'hooks/usePageParams' import { VideoDate } from './components/VideoDate' import { MatchesWrapper } from './styled' +import { useScroll } from '../../useScroll' type Props = { profile: MatchInfo, @@ -39,6 +40,8 @@ export const TabVideo = ({ const [selectedDate, setSelectedDate] = useState(profileDate) + const { hasScroll, ref } = useScroll([selectedDate]) + const matches = useMemo(() => ( tournamentData.matches.filter((match) => ( formatDate(match.date) === selectedDate && match.id !== profileId @@ -70,7 +73,10 @@ export const TabVideo = ({ profileDate={profileDate} onDateClick={setSelectedDate} /> - + { map(sortBy(matches, ({ live }) => !live), (match) => ( ` overflow-y: auto; max-height: calc(100vh - 170px); - padding-right: 5px; + ${({ hasScroll }) => (hasScroll ? css`padding-right: 5px;` : '')} > * { margin-bottom: 15px; diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index d73993ce..27bbe8bf 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/src/features/MatchSidePlaylists/index.tsx @@ -14,6 +14,7 @@ import { TabEvents } from './components/TabEvents' import { TabWatch } from './components/TabWatch' import { TabVideo } from './components/TabVideo' import { useMatchSidePlaylists } from './hooks' +import { useScroll } from './useScroll' import { Wrapper, TabsWrapper, @@ -53,6 +54,11 @@ export const MatchSidePlaylists = ({ const TabPane = tabPanes[selectedTab] + const { hasScroll, ref } = useScroll([ + playlists, + selectedTab, + ]) + const containerRef = useRef(null) useEventListener({ @@ -101,7 +107,11 @@ export const MatchSidePlaylists = ({ - + ` width: 320px; margin-top: 14px; - padding: 0 18px 0 14px; + padding: ${({ hasScroll }) => (hasScroll ? '0 10px 0 14px' : '0 18px 0 14px')}; max-height: calc(100vh - 130px); overflow-y: ${({ forVideoTab }) => (forVideoTab ? 'hidden' : 'auto')}; ${customScrollbar} - ::-webkit-scrollbar { - display: none; - } - @media ${devices.tablet} { margin-top: 15px; - padding: 0 10px 0 14px; - - ::-webkit-scrollbar { - display: initial; - } } ${isMobileDevice diff --git a/src/features/MatchSidePlaylists/useScroll.tsx b/src/features/MatchSidePlaylists/useScroll.tsx new file mode 100644 index 00000000..4144e212 --- /dev/null +++ b/src/features/MatchSidePlaylists/useScroll.tsx @@ -0,0 +1,27 @@ +import { + useEffect, + useRef, + useState, +} from 'react' + +export const useScroll = (deps: any) => { + const ref = useRef(null) + + const [hasRefScroll, setRefScroll] = useState(false) + + useEffect(() => { + const { + clientHeight = 0, + scrollHeight = 0, + } = ref.current || {} + const hasScroll = scrollHeight > clientHeight + + setRefScroll(hasScroll) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ref, ...deps]) + + return { + hasScroll: hasRefScroll, + ref, + } +}