From b3f3586b31f90f301f881e0545c4fbe1d3d0a3a6 Mon Sep 17 00:00:00 2001
From: boyvanov <boyvanov.sergey@gmail.com>
Date: Wed, 28 Sep 2022 14:48:14 +0300
Subject: [PATCH] fix(ott-2850): add dynamic padding

---
 .../components/TabVideo/index.tsx             |  8 +++++-
 .../components/TabVideo/styled.tsx            |  8 ++++--
 src/features/MatchSidePlaylists/index.tsx     | 12 ++++++++-
 src/features/MatchSidePlaylists/styled.tsx    | 12 ++-------
 src/features/MatchSidePlaylists/useScroll.tsx | 27 +++++++++++++++++++
 5 files changed, 53 insertions(+), 14 deletions(-)
 create mode 100644 src/features/MatchSidePlaylists/useScroll.tsx

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}
       />
-      <MatchesWrapper>
+      <MatchesWrapper
+        hasScroll={hasScroll}
+        ref={ref}
+      >
         {
           map(sortBy(matches, ({ live }) => !live), (match) => (
             <MatchCard
diff --git a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
index e9b0b502..69fe7d38 100644
--- a/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
+++ b/src/features/MatchSidePlaylists/components/TabVideo/styled.tsx
@@ -2,10 +2,14 @@ import styled, { css } from 'styled-components/macro'
 import { customScrollbar } from 'features/Common'
 import { isMobileDevice } from '../../../../config/userAgent'
 
-export const MatchesWrapper = styled.div`
+type TMatchesWrapper = {
+  hasScroll: boolean,
+}
+
+export const MatchesWrapper = styled.div<TMatchesWrapper>`
   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<HTMLDivElement | null>(null)
 
   useEventListener({
@@ -101,7 +107,11 @@ export const MatchSidePlaylists = ({
         </TabsGroup>
 
       </TabsWrapper>
-      <Container forVideoTab={selectedTab === Tabs.VIDEO}>
+      <Container
+        hasScroll={hasScroll}
+        ref={ref}
+        forVideoTab={selectedTab === Tabs.VIDEO}
+      >
         <TabPane
           tournamentData={tournamentData}
           onSelect={onSelect}
diff --git a/src/features/MatchSidePlaylists/styled.tsx b/src/features/MatchSidePlaylists/styled.tsx
index a39dc443..9f02dcf3 100644
--- a/src/features/MatchSidePlaylists/styled.tsx
+++ b/src/features/MatchSidePlaylists/styled.tsx
@@ -29,28 +29,20 @@ export const TabsWrapper = styled.div`
 
 type TContainer = {
   forVideoTab?: boolean,
+  hasScroll: boolean,
 }
 
 export const Container = styled.div<TContainer>`
   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<HTMLDivElement | null>(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,
+  }
+}