FEAT | Create bounded scroll

src/primitives/Lazy.tsx

@@ -1,6 +1,6 @@
-import * as s from 'solid-js';
 import * as lng from '@lightningtv/solid';
 import * as lngp from '@lightningtv/solid/primitives';
+import * as s from 'solid-js';
 
 type LazyProps<T extends readonly any[]> = lng.NewOmit<lng.NodeProps, 'children'> & {
   each: T | undefined | null | false;
@@ -27,7 +27,13 @@ function createLazy<T>(
       return props.buffer;
     }
     const scroll = props.scroll || props.style?.scroll;
-    if (!scroll || scroll === 'auto' || scroll === 'always') return props.upCount + 1;
+    if (
+      !scroll ||
+      scroll === 'auto' ||
+      scroll === 'always' ||
+      scroll === 'bounded'
+    )
+      return props.upCount + 1;
     if (scroll === 'center') return Math.ceil(props.upCount / 2) + 1;
     return 2;
   });
@@ -64,6 +70,32 @@ function createLazy<T>(
     queueMicrotask(() => viewRef.scrollToIndex(index));
   }
 
+  function isInNonScrollableZone(
+    this: lngp.NavigableElement,
+    element?: lng.ElementNode,
+  ): boolean {
+    if (!viewRef) {
+      return false;
+    }
+    const scroll = props.scroll || viewRef.scroll;
+    if (scroll !== 'bounded') {
+      return false;
+    }
+    const upCount = props.upCount;
+    const totalItems = props.each ? props.each.length : 0;
+    if (totalItems === 0) {
+      return false;
+    }
+    const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+    if (element) {
+      const elementIndex = viewRef.children.indexOf(element);
+      if (elementIndex === -1) return false;
+      return elementIndex >= nonScrollableZoneStart;
+    }
+    const selected = viewRef.selected ?? 0;
+    return selected >= nonScrollableZoneStart;
+  }
+
   const updateOffset = (_event: KeyboardEvent, container: lng.ElementNode) => {
     const maxOffset = props.each ? props.each.length : 0;
     const selected = container.selected || 0;
@@ -93,8 +125,10 @@ function createLazy<T>(
     <lng.Dynamic
       {...props}
       component={component}
+      upCount={props.upCount}
       {/* @once */ ...handler}
       lazyScrollToIndex={lazyScrollToIndex}
+      isInNonScrollableZone={isInNonScrollableZone}
       ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)} >
       <s.Index each={items()} children={props.children} />
     </lng.Dynamic>

src/primitives/Row.tsx

@@ -25,6 +25,29 @@ function scrollToIndex(this: ElementNode, index: number) {
   this.children[index]?.setFocus();
 }
 
+function isInNonScrollableZone(
+  this: ElementNode,
+  element?: ElementNode,
+): boolean {
+  const scroll = this.scroll;
+  if (scroll !== 'bounded') {
+    return false;
+  }
+
+  const upCount = (this.upCount || 6) as number;
+  const totalItems = this.children.length;
+  const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+
+  if (element) {
+    const elementIndex = this.children.indexOf(element);
+    if (elementIndex === -1) return false;
+    return elementIndex >= nonScrollableZoneStart;
+  }
+
+  const selected = this.selected ?? 0;
+  return selected >= nonScrollableZoneStart;
+}
+
 const onLeft = handleNavigation('left');
 const onRight = handleNavigation('right');
 
@@ -37,15 +60,16 @@ export const Row: Component<RowProps> = (props) => {
       onRight={/* @once */ chainFunctions(props.onRight, onRight)}
       forwardFocus={navigableForwardFocus}
       scrollToIndex={scrollToIndex}
+      isInNonScrollableZone={isInNonScrollableZone}
       onLayout={
         /* @once */
         props.selected ? chainFunctions(props.onLayout, scrollRow) : props.onLayout
       }
       onSelectedChanged={
         /* @once */ chainFunctions(
-          props.onSelectedChanged,
-          props.scroll !== 'none' ? scrollRow : undefined,
-        )
+        props.onSelectedChanged,
+        props.scroll !== 'none' ? scrollRow : undefined,
+      )
       }
       style={/* @once */ combineStyles(props.style, RowStyles)}
     />

src/primitives/utils/withScrolling.ts

@@ -15,10 +15,11 @@ export type Scroller = (
 // Adds properties expected by withScrolling
 export interface ScrollableElement extends ElementNode {
   scrollIndex?: number;
-  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center';
+  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center' | 'bounded';
   selected: number;
   offset?: number;
   endOffset?: number;
+  upCount?: number;
   onScrolled?: (
     elm: ScrollableElement,
     offset: number,
@@ -130,11 +131,41 @@ export function withScrolling(isRow: boolean): Scroller {
     // Default nextPosition to align with the selected position and offset
     let nextPosition = rootPosition;
 
+    const totalItems = componentRef.children.length;
+    const upCount = componentRef.upCount || 6;
+    const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+
     // Update nextPosition based on scroll type and specific conditions
     if (selectedElement.centerScroll) {
       nextPosition = -selectedPosition + (screenSize - selectedSizeScaled) / 2;
     } else if (scroll === 'always') {
       nextPosition = -selectedPosition + offset;
+    } else if (scroll === 'bounded') {
+      const isInNonScrollableZone = selected >= nonScrollableZoneStart;
+      const isFirstOfNonScrollableZone = selected === nonScrollableZoneStart;
+      const isEnteringZone =
+        isFirstOfNonScrollableZone &&
+        lastSelected !== undefined &&
+        lastSelected < nonScrollableZoneStart;
+
+      if (!isInNonScrollableZone) {
+        nextPosition = -selectedPosition + offset;
+      } else if (isIncrementing) {
+        if (isEnteringZone) {
+          const firstOfZoneElement =
+            componentRef.children[nonScrollableZoneStart];
+          const firstOfZonePosition = firstOfZoneElement?.[axis] ?? 0;
+          nextPosition = firstOfZoneElement
+            ? -firstOfZonePosition + offset
+            : rootPosition;
+        } else {
+          nextPosition = rootPosition;
+        }
+      } else if (isFirstOfNonScrollableZone) {
+        nextPosition = -selectedPosition + offset;
+      } else {
+        nextPosition = rootPosition;
+      }
     } else if (scroll === 'center') {
       const centerPosition =
         -selectedPosition +
@@ -160,7 +191,6 @@ export function withScrolling(isRow: boolean): Scroller {
           nextPosition = rootPosition + selectedSize + gap;
         }
       } else if (isIncrementing) {
-        //nextPosition = -selectedPosition + offset;
         nextPosition = rootPosition - selectedSize - gap;
       } else {
         nextPosition = rootPosition + selectedSize + gap;
@@ -174,7 +204,7 @@ export function withScrolling(isRow: boolean): Scroller {
 
     // Prevent container from moving beyond bounds
     nextPosition =
-      isIncrementing && scroll !== 'always'
+      isIncrementing && scroll !== 'always' && scroll !== 'bounded'
         ? Math.max(nextPosition, maxOffset)
         : Math.min(nextPosition, offset);