feat: make scroll button sticky and scroll to each tile as target

oxen-io · Oct 9, 2024 · c4962a7 · c4962a7
1 parent 45ed7b7
commit c4962a7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/packages/sanity-cms/components/SanityTiles.tsx b/packages/sanity-cms/components/SanityTiles.tsx
@@ -36,27 +36,30 @@ export function SanityTiles({
   }
 
   const id = `${value._key}-tiles-scrollable`;
+  const tileContainer = `${value._key}-tiles-scrollable-tile-container`;
 
   const isScrollableOnMobile =
     variant === TILES_VARIANT.TEXT_OVERLAY_IMAGE || tiles.length % 2 !== 0;
 
   return (
     <div
       id={id}
-      className="relative my-4 flex flex-col items-start overflow-x-auto pb-1 pt-8 md:pt-0"
+      className="relative my-4 flex flex-col items-start overflow-x-auto pb-1 md:pt-0"
       style={{
         maxWidth: 'calc(100vw - 24px)',
       }}
     >
       {isScrollableOnMobile ? (
         <ScrollButton
           scrollText={scrollText}
-          targetId={id}
+          parentId={id}
+          tileContainerId={tileContainer}
           isRTLLocale={isRTLLocale}
           className="absolute left-0 top-0 md:hidden"
         />
       ) : null}
       <div
+        id={tileContainer}
         className={cn(
           'h-max gap-4',
           variant === TILES_VARIANT.TEXT_UNDER_IMAGE && tiles.length % 2 === 0

diff --git a/packages/sanity-cms/components/ScrollButton.tsx b/packages/sanity-cms/components/ScrollButton.tsx
@@ -3,35 +3,58 @@
 import { Button } from '@session/ui/ui/button';
 import { LongArrowIcon } from '@session/ui/icons/LongArrowIcon';
 import { cn } from '@session/ui/lib/utils';
+import { useState } from 'react';
 
 export function ScrollButton({
   scrollText,
-  targetId,
+  parentId,
+  tileContainerId,
   isRTLLocale,
+  defaultScrollAmount = 240,
   className,
 }: {
   scrollText: string;
-  targetId: string;
+  parentId: string;
+  tileContainerId: string;
   isRTLLocale?: boolean;
+  defaultScrollAmount?: number;
   className?: string;
 }) {
+  const [tileIndex, setTileIndex] = useState<number>(0);
+
   const handleClick = () => {
-    const element = document.getElementById(targetId);
-    if (element) {
-      element.scrollBy({ behavior: 'smooth', left: isRTLLocale ? -240 : 240 });
+    const tiles = document.getElementById(tileContainerId)?.children;
+    if (tiles) {
+      const targetIndex = tileIndex >= tiles.length - 1 ? 0 : tileIndex + 1;
+      const tile = tiles[targetIndex];
+      if (tile) {
+        tile.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'center',
+        });
+        setTileIndex(targetIndex);
+      }
+    } else {
+      document.getElementById(parentId)?.scrollBy({
+        behavior: 'smooth',
+        left: isRTLLocale ? -defaultScrollAmount : defaultScrollAmount,
+      });
     }
   };
   return (
-    <Button
-      className={cn('text-session-text-black-secondary gap-2 fill-current px-1', className)}
-      size="xs"
-      rounded="md"
-      variant="ghost"
-      data-testid={`button:scroll-${targetId}`}
-      onClick={handleClick}
-    >
-      {scrollText}
-      <LongArrowIcon className={cn('h-6 w-12 fill-current', isRTLLocale && 'rotate-180')} />
-    </Button>
+    <div className="sticky left-2 top-0 mb-7">
+      <Button
+        className={cn('text-session-text-black-secondary gap-2 fill-current px-1', className)}
+        size="xs"
+        rounded="md"
+        variant="ghost"
+        data-testid={`button:scroll-${parentId}`}
+        onClick={handleClick}
+      >
+        {scrollText}
+        <LongArrowIcon className={cn('h-6 w-12 fill-current', isRTLLocale && 'rotate-180')} />
+      </Button>
+    </div>
   );
 }