docs(HorizontalScroll): add spacing values for example playground

kiwicom · Nov 29, 2024 · fed7e3c · fed7e3c
1 parent 1abebe5
commit fed7e3c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/docs/src/__examples__/HorizontalScroll/default.tsx b/docs/src/__examples__/HorizontalScroll/default.tsx
@@ -88,7 +88,20 @@ export default {
         {
           name: "spacing",
           type: "select",
-          options: ["none", "50", "100", "200", "300", "400", "600", "800", "1000"],
+          options: [
+            "none",
+            "50",
+            "100",
+            "150",
+            "200",
+            "300",
+            "400",
+            "600",
+            "800",
+            "1000",
+            "1200",
+            "1600",
+          ],
           defaultValue: "none",
         },
       ],

diff --git a/packages/orbit-components/src/HorizontalScroll/index.tsx b/packages/orbit-components/src/HorizontalScroll/index.tsx
@@ -19,6 +19,7 @@ const getSnap = (scrollSnap: ScrollSnap) => {
   return scrollSnap;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getTriggerOffset = (spacing: string) => {
   const spacingValues = {
     [SPACINGS.NONE]: 0,
@@ -104,7 +105,9 @@ const HorizontalScroll = React.forwardRef<HTMLDivElement, Props>(
     const theme = useTheme();
     const scrollEl = scrollWrapperRef.current;
 
-    const TRIGGER_OFFSET = getTriggerOffset(spacing);
+    // const TRIGGER_OFFSET = getTriggerOffset(spacing);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const TRIGGER_OFFSET = 20;
 
     const handleOverflow = React.useCallback(() => {
       if (scrollWrapperRef.current?.scrollWidth && containerRef.current?.offsetWidth) {
@@ -136,13 +139,14 @@ const HorizontalScroll = React.forwardRef<HTMLDivElement, Props>(
       if (scrollEl) {
         const scrollWidth = scrollEl.scrollWidth - scrollEl.clientWidth;
         const { scrollLeft } = scrollEl;
-        if (scrollLeft - TRIGGER_OFFSET <= 0) {
+
+        if (scrollLeft === 0) {
           setReachedStart(true);
         } else {
           setReachedStart(false);
         }
 
-        if (scrollLeft + TRIGGER_OFFSET >= scrollWidth) {
+        if (scrollLeft >= scrollWidth) {
           setReachedEnd(true);
         } else {
           setReachedEnd(false);