refactor: use shared HorizontalScroll component for Chips and Calendar

Stremio · Jul 3, 2024 · e7ddbcf · e7ddbcf
1 parent c6ad7e9
commit e7ddbcf
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 42 deletions.
diff --git a/src/common/Chips/Chips.less b/src/common/Chips/Chips.less
@@ -1,25 +1,10 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-@mask-width: 10%;
-
 .chips {
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 1rem;
-    overflow-x: auto;
-
-    &.left {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
-    }
-
-    &.right {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width);
-    }
-
-    &.center {
-        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
-    }
 }
diff --git a/src/common/Chips/Chips.tsx b/src/common/Chips/Chips.tsx
@@ -1,7 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
-import React, { memo, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
+import React, { memo } from 'react';
+import HorizontalScroll from '../HorizontalScroll';
 import Chip from './Chip';
 import styles from './Chips.less';
 
@@ -16,28 +16,9 @@ type Props = {
     onSelect: (value: string) => {},
 };
 
-const SCROLL_THRESHOLD = 1;
-
 const Chips = memo(({ options, selected, onSelect }: Props) => {
-    const ref = useRef<HTMLDivElement>(null);
-    const [scrollPosition, setScrollPosition] = useState('left');
-
-    useEffect(() => {
-        const onScroll = ({ target }: Event) => {
-            const { scrollLeft, scrollWidth, offsetWidth} = target as HTMLDivElement;
-            const position =
-                (scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
-                    (scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
-                        'center';
-            setScrollPosition(position);
-        };
-
-        ref.current?.addEventListener('scroll', onScroll);
-        return () => ref.current?.removeEventListener('scroll', onScroll);
-    }, []);
-
     return (
-        <div ref={ref} className={classNames(styles['chips'], [styles[scrollPosition]])}>
+        <HorizontalScroll className={styles['chips']}>
             {
                 options.map(({ label, value }) => (
                     <Chip
@@ -49,7 +30,7 @@ const Chips = memo(({ options, selected, onSelect }: Props) => {
                     />
                 ))
             }
-        </div>
+        </HorizontalScroll>
     );
 });
 

diff --git a/src/common/HorizontalScroll/HorizontalScroll.less b/src/common/HorizontalScroll/HorizontalScroll.less
@@ -0,0 +1,20 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+@mask-width: 10%;
+
+.horizontal-scroll {
+    position: relative;
+    overflow-x: auto;
+
+    &.left {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
+    }
+
+    &.right {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width);
+    }
+
+    &.center {
+        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) @mask-width, rgba(0, 0, 0, 1) calc(100% - @mask-width), rgba(0, 0, 0, 0) 100%);
+    }
+}
diff --git a/src/common/HorizontalScroll/HorizontalScroll.tsx b/src/common/HorizontalScroll/HorizontalScroll.tsx
@@ -0,0 +1,40 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import React, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import styles from './HorizontalScroll.less';
+
+const SCROLL_THRESHOLD = 1;
+
+type Props = {
+    className: string,
+    children: React.ReactNode,
+};
+
+const HorizontalScroll = ({ className, children }: Props) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [scrollPosition, setScrollPosition] = useState('left');
+
+    useEffect(() => {
+        const onScroll = ({ target }: Event) => {
+            const { scrollLeft, scrollWidth, offsetWidth } = target as HTMLDivElement;
+
+            setScrollPosition(() => (
+                (scrollLeft - SCROLL_THRESHOLD) <= 0 ? 'left' :
+                    (scrollLeft + offsetWidth + SCROLL_THRESHOLD) >= scrollWidth ? 'right' :
+                        'center'
+            ));
+        };
+
+        ref.current?.addEventListener('scroll', onScroll);
+        return () => ref.current?.removeEventListener('scroll', onScroll);
+    }, []);
+
+    return (
+        <div ref={ref} className={classNames(styles['horizontal-scroll'], className, [styles[scrollPosition]])}>
+            {children}
+        </div>
+    );
+};
+
+export default HorizontalScroll;
diff --git a/src/common/HorizontalScroll/index.ts b/src/common/HorizontalScroll/index.ts
@@ -0,0 +1,4 @@
+// Copyright (C) 2017-2024 Smart code 203358507
+
+import HorizontalScroll from './HorizontalScroll';
+export default HorizontalScroll;
diff --git a/src/common/index.js b/src/common/index.js
@@ -16,6 +16,7 @@ const MetaRow = require('./MetaRow');
 const ModalDialog = require('./ModalDialog');
 const Multiselect = require('./Multiselect');
 const { HorizontalNavBar, VerticalNavBar } = require('./NavBar');
+const { default: HorizontalScroll } = require('./HorizontalScroll');
 const PaginationInput = require('./PaginationInput');
 const PlayIconCircleCentered = require('./PlayIconCircleCentered');
 const Popup = require('./Popup');
@@ -64,6 +65,7 @@ module.exports = {
     ModalDialog,
     Multiselect,
     HorizontalNavBar,
+    HorizontalScroll,
     VerticalNavBar,
     PaginationInput,
     PlayIconCircleCentered,

diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
@@ -45,7 +45,6 @@
         gap: 1rem;
         height: 0;
         padding: 1rem;
-        overflow-x: scroll;
 
         .item {
             flex: none;

diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -2,7 +2,7 @@
 
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { Button, Image } from 'stremio/common';
+import { Button, Image, HorizontalScroll } from 'stremio/common';
 import styles from './Cell.less';
 
 type Props = {
@@ -37,7 +37,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
                     {date.day}
                 </div>
             </div>
-            <div className={styles['body']}>
+            <HorizontalScroll className={styles['body']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
                         <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
@@ -49,7 +49,7 @@ const Cell = ({ selected, monthInfo, date, items, onClick }: Props) => {
                         </Button>
                     ))
                 }
-            </div>
+            </HorizontalScroll>
         </div>
     );
 };