@lightningtv/solid 3.0.4 → 3.0.6

package/src/primitives/Virtual.tsx

@@ -3,6 +3,12 @@ import * as lng from '@lightningtv/solid';
 import * as lngp from '@lightningtv/solid/primitives';
 import { List } from '@solid-primitives/list';
 import * as utils from '../utils.js';
+import {
+  defaultTransitionBack,
+  defaultTransitionForward,
+  defaultTransitionDown,
+  defaultTransitionUp,
+} from './utils/handleNavigation.js';
 
 export type VirtualProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
   each: readonly T[] | undefined | null | false;
@@ -21,7 +27,7 @@ export type VirtualProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
 function createVirtual<T>(
   component: typeof lngp.Row | typeof lngp.Column,
   props: VirtualProps<T>,
-  keyHandlers: Record<string, lng.KeyHandler>
+  keyHandlers: Record<string, lng.KeyHandler>,
 ) {
   const isRow = component === lngp.Row;
   const axis = isRow ? 'x' : 'y';
@@ -46,81 +52,102 @@ function createVirtual<T>(
     return props.uniformSize !== false;
   });
 
-  type SliceState = { start: number; slice: T[]; selected: number, delta: number, shiftBy: number, atStart: boolean; cursor: number };
-    const [slice, setSlice] = s.createSignal<SliceState>({
-      start: 0,
-      slice: [],
-      selected: 0,
-      delta: 0,
-      shiftBy: 0,
-      atStart: true,
-      cursor: 0,
-    });
+  type SliceState = {
+    start: number;
+    slice: T[];
+    selected: number;
+    delta: number;
+    shiftBy: number;
+    atStart: boolean;
+    cursor: number;
+  };
+  const [slice, setSlice] = s.createSignal<SliceState>({
+    start: 0,
+    slice: [],
+    selected: 0,
+    delta: 0,
+    shiftBy: 0,
+    atStart: true,
+    cursor: 0,
+  });
 
-    function normalizeDeltaForWindow(delta: number, windowLen: number): number {
-      if (!windowLen) return 0;
-      const half = windowLen / 2;
-      if (delta > half) return delta - windowLen;
-      if (delta < -half) return delta + windowLen;
-      return delta;
-    }
+  function normalizeDeltaForWindow(delta: number, windowLen: number): number {
+    if (!windowLen) return 0;
+    const half = windowLen / 2;
+    if (delta > half) return delta - windowLen;
+    if (delta < -half) return delta + windowLen;
+    return delta;
+  }
 
-    function computeSize(selected: number = 0) {
-      if (uniformSize() && cachedScaledSize) {
-        return cachedScaledSize;
-      } else if (viewRef) {
-        const gap = viewRef.gap || 0;
-        const dimension = isRow ? 'width' : 'height'; // This can't be moved up as it depends on viewRef
-        const prevSelectedChild = viewRef.children[selected];
-
-        if (prevSelectedChild instanceof lng.ElementNode) {
-          const itemSize = prevSelectedChild[dimension] || 0;
-          const focusStyle = (prevSelectedChild.style?.focus as lng.NodeStyles);
-          const scale = (focusStyle?.scale ?? prevSelectedChild.scale ?? 1);
-          const scaledSize = itemSize * (props.factorScale ? scale : 1) + gap;
-          cachedScaledSize = scaledSize;
-          return scaledSize;
-        }
+  function computeSize(selected: number = 0) {
+    if (uniformSize() && cachedScaledSize) {
+      return cachedScaledSize;
+    } else if (viewRef) {
+      const gap = viewRef.gap || 0;
+      const dimension = isRow ? 'width' : 'height'; // This can't be moved up as it depends on viewRef
+      const prevSelectedChild = viewRef.children[selected];
+
+      if (prevSelectedChild instanceof lng.ElementNode) {
+        const itemSize = prevSelectedChild[dimension] || 0;
+        const focusStyle = prevSelectedChild.style?.focus as lng.NodeStyles;
+        const scale = focusStyle?.scale ?? prevSelectedChild.scale ?? 1;
+        const scaledSize = itemSize * (props.factorScale ? scale : 1) + gap;
+        cachedScaledSize = scaledSize;
+        return scaledSize;
       }
-      return 0;
     }
+    return 0;
+  }
 
-    function computeSlice(c: number, delta: number, prev: SliceState): SliceState {
-      const total = itemCount();
-      if (total === 0) return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true, cursor: 0 };
-
-      const length = props.displaySize + bufferSize();
-      let start = prev.start;
-      let selected = prev.selected;
-      let atStart = prev.atStart;
-      let shiftBy = -delta;
-
-      switch (scrollType()) {
-        case 'always':
-          if (props.wrap) {
-            start = utils.mod(c - 1, total);
-            selected = 1;
+  function computeSlice(
+    c: number,
+    delta: number,
+    prev: SliceState,
+  ): SliceState {
+    const total = itemCount();
+    if (total === 0)
+      return {
+        start: 0,
+        slice: [],
+        selected: 0,
+        delta,
+        shiftBy: 0,
+        atStart: true,
+        cursor: 0,
+      };
+
+    const length = props.displaySize + bufferSize();
+    let start = prev.start;
+    let selected = prev.selected;
+    let atStart = prev.atStart;
+    let shiftBy = -delta;
+
+    switch (scrollType()) {
+      case 'always':
+        if (props.wrap) {
+          start = utils.mod(c - 1, total);
+          selected = 1;
+        } else {
+          start = utils.clamp(
+            c - bufferSize(),
+            0,
+            Math.max(0, total - props.displaySize - bufferSize()),
+          );
+          if (delta === 0 && c > 3) {
+            shiftBy = c < 3 ? -c : -2;
+            selected = 2;
           } else {
-            start = utils.clamp(
-              c - bufferSize(),
-              0,
-              Math.max(0, total - props.displaySize - bufferSize()),
-            );
-            if (delta === 0 && c > 3) {
-              shiftBy = c < 3 ? -c : -2;
-              selected = 2;
-            } else {
-              selected =
-                c < bufferSize()
-                  ? c
-                  : c >= total - props.displaySize
+            selected =
+              c < bufferSize()
+                ? c
+                : c >= total - props.displaySize
                   ? c - (total - props.displaySize) + bufferSize()
                   : bufferSize();
-            }
           }
-          break;
+        }
+        break;
 
-        case 'auto':
+      case 'auto':
         if (props.wrap) {
           if (delta === 0) {
             selected = scrollIndex() || 1;
@@ -144,7 +171,7 @@ function createVirtual<T>(
               start = 0;
               selected = prev.selected - 1;
               atStart = true;
-            }  else if (selected >= props.displaySize - 1) {
+            } else if (selected >= props.displaySize - 1) {
               // Shift window left, keep selection pinned
               start = 0;
               selected = prev.selected - 1;
@@ -176,12 +203,15 @@ function createVirtual<T>(
             } else {
               // Shift window right, keep selection pinned
               start = prev.start + 1;
-              selected = Math.max(prev.selected, scrollIndex() + 1);;
+              selected = Math.max(prev.selected, scrollIndex() + 1);
             }
           } else {
             // Initial setup
             if (c > 0) {
-              start = Math.min(c - (scrollIndex() || 1), total - props.displaySize - bufferSize());
+              start = Math.min(
+                c - (scrollIndex() || 1),
+                total - props.displaySize - bufferSize(),
+              );
               selected = Math.max(scrollIndex() || 1, c - start);
               shiftBy = total - c < 3 ? c - total : -1;
               atStart = false;
@@ -202,107 +232,118 @@ function createVirtual<T>(
         }
         break;
 
-        case 'edge':
-          const startScrolling = Math.max(1, props.displaySize + (atStart ? -1 : 0));
-          if (props.wrap) {
-            if (delta > 0) {
-              if (prev.selected < startScrolling) {
-                selected = prev.selected + 1;
-                shiftBy = 0;
-              } else if (prev.selected === startScrolling && atStart) {
-                selected = prev.selected + 1;
-                atStart = false;
-              } else {
-                start = utils.mod(prev.start + 1, total);
-                selected = prev.selected;
-              }
-            } else if (delta < 0) {
-              if (prev.selected > 1) {
-                selected = prev.selected - 1;
-                shiftBy = 0;
-              } else {
-                start = utils.mod(prev.start - 1, total);
-                selected = 1;
-              }
+      case 'edge':
+        const startScrolling = Math.max(
+          1,
+          props.displaySize + (atStart ? -1 : 0),
+        );
+        if (props.wrap) {
+          if (delta > 0) {
+            if (prev.selected < startScrolling) {
+              selected = prev.selected + 1;
+              shiftBy = 0;
+            } else if (prev.selected === startScrolling && atStart) {
+              selected = prev.selected + 1;
+              atStart = false;
+            } else {
+              start = utils.mod(prev.start + 1, total);
+              selected = prev.selected;
+            }
+          } else if (delta < 0) {
+            if (prev.selected > 1) {
+              selected = prev.selected - 1;
+              shiftBy = 0;
             } else {
-              start = utils.mod(c - 1, total);
+              start = utils.mod(prev.start - 1, total);
               selected = 1;
-              shiftBy = -1;
-              atStart = false;
             }
           } else {
-            if (delta === 0 && c > 0) {
-              //initial setup
-              selected = c > startScrolling ? startScrolling : c;
-              start = Math.max(0, c - startScrolling + 1);
-              shiftBy = c > startScrolling ? -1 : 0;
-              atStart = c < startScrolling;
-            } else if (delta > 0) {
-              if (prev.selected < startScrolling) {
-                selected = prev.selected + 1;
-                shiftBy = 0;
-              } else if (prev.selected === startScrolling && atStart) {
-                selected = prev.selected + 1;
-                atStart = false;
-              } else {
-                start = prev.start + 1;
-                selected = prev.selected;
-                atStart = false;
-              }
-            } else if (delta < 0) {
-              if (prev.selected > 1) {
-                selected = prev.selected - 1;
-                shiftBy = 0;
-              } else if (c > 1) {
-                start = Math.max(0, c - 1);
-                selected = 1;
-              } else if (c === 1) {
-                start = 0;
-                selected = 1;
-              } else {
-                start = 0;
-                selected = 0;
-                shiftBy = atStart ? 0 : shiftBy;
-                atStart = true;
-              }
+            start = utils.mod(c - 1, total);
+            selected = 1;
+            shiftBy = -1;
+            atStart = false;
+          }
+        } else {
+          if (delta === 0 && c > 0) {
+            //initial setup
+            selected = c > startScrolling ? startScrolling : c;
+            start = Math.max(0, c - startScrolling + 1);
+            shiftBy = c > startScrolling ? -1 : 0;
+            atStart = c < startScrolling;
+          } else if (delta > 0) {
+            if (prev.selected < startScrolling) {
+              selected = prev.selected + 1;
+              shiftBy = 0;
+            } else if (prev.selected === startScrolling && atStart) {
+              selected = prev.selected + 1;
+              atStart = false;
+            } else {
+              start = prev.start + 1;
+              selected = prev.selected;
+              atStart = false;
+            }
+          } else if (delta < 0) {
+            if (prev.selected > 1) {
+              selected = prev.selected - 1;
+              shiftBy = 0;
+            } else if (c > 1) {
+              start = Math.max(0, c - 1);
+              selected = 1;
+            } else if (c === 1) {
+              start = 0;
+              selected = 1;
+            } else {
+              start = 0;
+              selected = 0;
+              shiftBy = atStart ? 0 : shiftBy;
+              atStart = true;
             }
           }
-          break;
-
-        case 'none':
-        default:
-          start = 0;
-          selected = c;
-          shiftBy = 0;
-          break;
-      }
+        }
+        break;
 
-      let newSlice = prev.slice;
-      if (start !== prev.start || newSlice.length === 0) {
-        newSlice = props.wrap
-          ? Array.from(
-              { length },
-              (_, i) => items()[utils.mod(start + i, total)],
-            ) as T[]
-          : items().slice(start, start + length);
-      }
+      case 'none':
+      default:
+        start = 0;
+        selected = c;
+        shiftBy = 0;
+        break;
+    }
 
-      const state: SliceState = { start, slice: newSlice, selected, delta, shiftBy, atStart, cursor: c };
-
-      if (props.debugInfo) {
-        console.log(`[Virtual]`, {
-          cursor: c,
-          delta,
-          start,
-          selected,
-          shiftBy,
-          slice: state.slice,
-        });
-      }
+    let newSlice = prev.slice;
+    if (start !== prev.start || newSlice.length === 0) {
+      newSlice = props.wrap
+        ? (Array.from(
+            { length },
+            (_, i) => items()[utils.mod(start + i, total)],
+          ) as T[])
+        : items().slice(start, start + length);
+    }
 
-      return state;
+    const state: SliceState = {
+      start,
+      slice: newSlice,
+      selected,
+      delta,
+      shiftBy,
+      atStart,
+      cursor: c,
+    };
+
+    if (props.debugInfo) {
+      console.log(`[Virtual]`, {
+        cursor: c,
+        delta,
+        start,
+        selected,
+        shiftBy,
+        slice: state.slice,
+      });
     }
 
+    return state;
+  }
+
   let viewRef!: lngp.NavigableElement;
 
   function scrollToIndex(this: lng.ElementNode, index: number) {
@@ -334,7 +375,12 @@ function createVirtual<T>(
   }
 
   let originalPosition: number | undefined;
-  const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, _active, _lastIdx) {
+  const onSelectedChanged: lngp.OnSelectedChanged = function (
+    _idx,
+    elm,
+    _active,
+    _lastIdx,
+  ) {
     let idx = _idx;
     let lastIdx = _lastIdx || 0;
     let active = _active;
@@ -343,19 +389,24 @@ function createVirtual<T>(
     originalPosition = originalPosition ?? elm[axis];
 
     if (props.onSelectedChanged) {
-      props.onSelectedChanged.call(this as lngp.NavigableElement, idx, this as lngp.NavigableElement, active, lastIdx);
+      props.onSelectedChanged.call(
+        this as lngp.NavigableElement,
+        idx,
+        this as lngp.NavigableElement,
+        active,
+        lastIdx,
+      );
     }
 
     if (noChange) return;
 
     const rawDelta = idx - (lastIdx ?? 0);
-    const windowLen =
-          elm?.children?.length ?? props.displaySize + bufferSize();
+    const windowLen = elm?.children?.length ?? props.displaySize + bufferSize();
     const delta = props.wrap
-          ? normalizeDeltaForWindow(rawDelta, windowLen)
-          : rawDelta;
+      ? normalizeDeltaForWindow(rawDelta, windowLen)
+      : rawDelta;
 
-    setCursor(c => {
+    setCursor((c) => {
       const next = c + delta;
       return props.wrap
         ? utils.mod(next, total)
@@ -381,19 +432,25 @@ function createVirtual<T>(
       elm.updateLayout();
       const childSize = computeSize(slice().selected);
 
-      if (cachedAnimationController && cachedAnimationController.state === 'running') {
-        cachedAnimationController.stop();;
+      if (
+        cachedAnimationController &&
+        cachedAnimationController.state === 'running'
+      ) {
+        cachedAnimationController.stop();
       }
 
       if (lng.Config.animationsEnabled) {
         this.lng[axis] = prevChildPos - active[axis];
-        targetPosition = this.lng[axis] + (childSize * slice().shiftBy);
+        targetPosition = this.lng[axis] + childSize * slice().shiftBy;
         cachedAnimationController = this.animate(
           { [axis]: targetPosition },
-          { ...this.animationSettings, duration: getAdaptiveDuration(this.animationSettings?.duration)}
+          {
+            ...this.animationSettings,
+            duration: getAdaptiveDuration(this.animationSettings?.duration),
+          },
         ).start();
       } else {
-        this.lng[axis] = this.lng[axis]! + (childSize * slice().shiftBy);
+        this.lng[axis] = this.lng[axis]! + childSize * slice().shiftBy;
       }
     });
   };
@@ -407,7 +464,7 @@ function createVirtual<T>(
 
     queueMicrotask(() => {
       viewRef.updateLayout();
-      let activeIndex = viewRef.children.findIndex(x => x.item === item);
+      let activeIndex = viewRef.children.findIndex((x) => x.item === item);
       if (activeIndex === -1) return;
       viewRef.selected = activeIndex;
       if (lng.hasFocus(viewRef)) {
@@ -421,60 +478,72 @@ function createVirtual<T>(
       originalPosition = originalPosition ?? viewRef.lng[axis];
       targetPosition = targetPosition ?? viewRef.lng[axis];
 
-      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + (childSize * -1);
+      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + childSize * -1;
     });
   };
 
   let doOnce = false;
-  s.createEffect(s.on([() => props.wrap, items], () => {
-    if (!viewRef || itemCount() === 0 || !props.wrap || doOnce) return;
-    doOnce = true;
-    // offset just for wrap so we keep one item before
-    queueMicrotask(() => {
-      const childSize = computeSize(slice().selected);
-      viewRef.lng[axis] = (viewRef.lng[axis] || 0) + (childSize * -1);
-      // Original Position is offset to support scrollToIndex
-      originalPosition = viewRef.lng[axis];
-      targetPosition = viewRef.lng[axis];
-    });
-  }));
+  s.createEffect(
+    s.on([() => props.wrap, items], () => {
+      if (!viewRef || itemCount() === 0 || !props.wrap || doOnce) return;
+      doOnce = true;
+      // offset just for wrap so we keep one item before
+      queueMicrotask(() => {
+        const childSize = computeSize(slice().selected);
+        viewRef.lng[axis] = (viewRef.lng[axis] || 0) + childSize * -1;
+        // Original Position is offset to support scrollToIndex
+        originalPosition = viewRef.lng[axis];
+        targetPosition = viewRef.lng[axis];
+      });
+    }),
+  );
 
   s.createEffect(s.on([() => props.selected, items], updateSelected));
 
-  s.createEffect(s.on(items, () => {
-    if (!viewRef) return;
-    if (cursor() >= itemCount()) {
-      setCursor(Math.max(0, itemCount() - 1));
-    }
-    const newState = computeSlice(cursor(), 0, slice());
-    setSlice(newState);
-    viewRef.selected = newState.selected;
-  }));
+  s.createEffect(
+    s.on(items, () => {
+      if (!viewRef) return;
+      if (cursor() >= itemCount()) {
+        setCursor(Math.max(0, itemCount() - 1));
+      }
+      const newState = computeSlice(cursor(), 0, slice());
+      setSlice(newState);
+      viewRef.selected = newState.selected;
+    }),
+  );
 
-  return (<view
+  return (
+    <view
+      transition={/* @once */ {}}
+      transitionLeft={isRow ? defaultTransitionBack : undefined}
+      transitionRight={isRow ? defaultTransitionForward : undefined}
+      transitionUp={!isRow ? defaultTransitionUp : undefined}
+      transitionDown={!isRow ? defaultTransitionDown : undefined}
       {...props}
       {...keyHandlers}
-      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      ref={lngp.chainRefs((el) => {
+        viewRef = el as lngp.NavigableElement;
+      }, props.ref)}
       selected={selected()}
       cursor={cursor()}
       forwardFocus={/* @once */ lngp.navigableForwardFocus}
       scrollToIndex={/* @once */ scrollToIndex}
       onSelectedChanged={/* @once */ onSelectedChanged}
-      style={/* @once */ lng.combineStyles(
-        props.style,
-        component === lngp.Row
-          ? {
-              display: 'flex',
-              gap: 30,
-              transition: { x: { duration: 250, easing: 'ease-out' } },
-            }
-          : {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 30,
-              transition: { y: { duration: 250, easing: 'ease-out' } },
-            }
-      )}
+      style={
+        /* @once */ lng.combineStyles(
+          props.style,
+          component === lngp.Row
+            ? {
+                display: 'flex',
+                gap: 30,
+              }
+            : {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 30,
+              },
+        )
+      }
     >
       <List each={slice().slice}>{props.children}</List>
     </view>
@@ -483,14 +552,26 @@ function createVirtual<T>(
 
 export function VirtualRow<T>(props: VirtualProps<T>) {
   return createVirtual(lngp.Row, props, {
-    onLeft: lngp.chainFunctions(props.onLeft, lngp.handleNavigation('left')) as lng.KeyHandler,
-    onRight: lngp.chainFunctions(props.onRight, lngp.handleNavigation('right')) as lng.KeyHandler,
+    onLeft: lngp.chainFunctions(
+      props.onLeft,
+      lngp.handleNavigation('left'),
+    ) as lng.KeyHandler,
+    onRight: lngp.chainFunctions(
+      props.onRight,
+      lngp.handleNavigation('right'),
+    ) as lng.KeyHandler,
   });
 }
 
 export function VirtualColumn<T>(props: VirtualProps<T>) {
   return createVirtual(lngp.Column, props, {
-    onUp: lngp.chainFunctions(props.onUp, lngp.handleNavigation('up')) as lng.KeyHandler,
-    onDown: lngp.chainFunctions(props.onDown, lngp.handleNavigation('down')) as lng.KeyHandler,
+    onUp: lngp.chainFunctions(
+      props.onUp,
+      lngp.handleNavigation('up'),
+    ) as lng.KeyHandler,
+    onDown: lngp.chainFunctions(
+      props.onDown,
+      lngp.handleNavigation('down'),
+    ) as lng.KeyHandler,
   });
 }