@lightningtv/solid 2.9.4 → 2.9.6

package/src/primitives/VirtualGrid.tsx

@@ -0,0 +1,192 @@
+import * as s from 'solid-js';
+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';
+
+const columnScroll = lngp.withScrolling(false);
+
+const rowStyles: lng.NodeStyles = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 30,
+  transition: {
+    y: {
+      duration: 250,
+      easing: 'ease-out',
+    },
+  },
+};
+
+function scrollToIndex(this: lng.ElementNode, index: number) {
+  this.selected = index;
+  columnScroll(index, this);
+  this.setFocus();
+}
+
+export type VirtualGridProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
+  each: readonly T[] | undefined | null | false;
+  itemsPerRow: number; // items per row
+  numberOfRows?: number; // number of visible rows (default: 1)
+  rowsBuffer?: number;
+  onEndReached?: () => void;
+  children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
+};
+
+export function VirtualGrid<T>(props: VirtualGridProps<T>): s.JSX.Element {
+  const bufferSize = () => props.rowsBuffer ?? 2;
+  const [ cursor, setCursor ] = s.createSignal(props.selected ?? 0);
+  const items = s.createMemo(() => props.each || []);
+  const itemsPerRow = () => props.itemsPerRow;
+  const numberOfRows = () => props.numberOfRows ?? 1;
+  const totalVisibleItems = () => itemsPerRow() * numberOfRows();
+
+  const start = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+
+    return utils.clamp(
+      newRowIndex * perRow - bufferSize() * perRow,
+      0,
+      Math.max(0, items().length - totalVisibleItems())
+    );
+  })
+
+  const end = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+
+    return Math.min(
+      items().length,
+      (newRowIndex + bufferSize()) * perRow + totalVisibleItems()
+    );
+  })
+
+  const [slice, setSlice] = s.createSignal(items().slice(start(), end()));
+
+  let viewRef!: lngp.NavigableElement;
+
+  const onLeft = lngp.handleNavigation('left');
+  const onRight = lngp.handleNavigation('right');
+
+  const onUp: lngp.KeyHandler = function () {
+    const perRow = itemsPerRow();
+    const selected = this.selected || 0;
+    if (selected < perRow) return false;
+
+    const newIndex = utils.clamp(selected - perRow, 0, items().length - 1);
+    const lastIdx = selected;
+    this.selected = newIndex;
+    const active = this.children[this.selected];
+    if (active instanceof lng.ElementNode) {
+      active.setFocus();
+      chainedOnSelectedChanged.call(this as lngp.NavigableElement, this.selected, this as lngp.NavigableElement, active, lastIdx);
+    }
+  };
+
+  const onDown: lngp.KeyHandler = function () {
+    const perRow = itemsPerRow();
+    const selected = this.selected || 0;
+
+    const newIndex = utils.clamp(selected + perRow, 0, items().length - 1);
+    if (newIndex !== selected) {
+      const lastIdx = selected;
+      this.selected = newIndex;
+      const active = this.children[this.selected];
+      if (active instanceof lng.ElementNode) {
+        active.setFocus();
+        chainedOnSelectedChanged.call(this as lngp.NavigableElement, this.selected, this as lngp.NavigableElement, active, lastIdx);
+      }
+    }
+  };
+
+  const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, active, _lastIdx,) {
+    let idx = _idx;
+    let lastIdx = _lastIdx;
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(idx / perRow);
+    const prevRowIndex = Math.floor((lastIdx || 0) / perRow);
+    const prevStart = start();
+
+    if (newRowIndex === prevRowIndex) return;
+
+    setCursor(prevStart + idx);
+    setSlice(items().slice(start(), end()));
+
+    // this.selected is relative to the slice
+    // and it doesn't get corrected automatically after children change
+    const idxCorrection = prevStart - start();
+    if (lastIdx) lastIdx += idxCorrection;
+    idx += idxCorrection;
+    this.selected += idxCorrection;
+
+    if (cursor() >= items().length - perRow * bufferSize()) {
+      props.onEndReached?.();
+    }
+
+    queueMicrotask(() => {
+      const prevRowY = this.y + active.y;
+      this.updateLayout();
+      // if (prevRowY > active.y) {
+      // }
+      this.lng.y = prevRowY - active.y;
+      // this.y = prevRowY - active.y;
+      columnScroll(idx, elm, active, lastIdx);
+    });
+  };
+
+  const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
+
+  s.createEffect(
+    s.on([() => props.selected, items], ([selected]) => {
+      if (!viewRef || selected == null) return;
+
+      const item = items()[selected];
+      let active = viewRef.children.find(x => x.item === item);
+      const lastSelected = viewRef.selected;
+
+      if (active instanceof lng.ElementNode) {
+        viewRef.selected = viewRef.children.indexOf(active);
+        chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+      } else {
+        setSlice(items().slice(start(), end()));
+
+        queueMicrotask(() => {
+          viewRef.updateLayout();
+          active = viewRef.children.find(x => x.item === item);
+          if (active instanceof lng.ElementNode) {
+            viewRef.selected = viewRef.children.indexOf(active);
+            chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+          }
+        });
+      }
+    })
+  );
+
+  s.createEffect(
+    s.on(items, () => {
+      if (!viewRef) return;
+      setSlice(items().slice(start(), end()));
+    }, { defer: true })
+  );
+
+  return (
+    <view
+      {...props}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      selected={props.selected || 0}
+      cursor={cursor()}
+      onLeft={/* @once */ lngp.chainFunctions(props.onLeft, onLeft)}
+      onRight={/* @once */ lngp.chainFunctions(props.onRight, onRight)}
+      onUp={/* @once */ lngp.chainFunctions(props.onUp, onUp)}
+      onDown={/* @once */ lngp.chainFunctions(props.onDown, onDown)}
+      forwardFocus={/* @once */ lngp.onGridFocus(chainedOnSelectedChanged)}
+      onCreate={/* @once */ props.selected ? lngp.chainFunctions(props.onCreate, columnScroll) : props.onCreate}
+      scrollToIndex={/* @once */ scrollToIndex}
+      onSelectedChanged={/* @once */ chainedOnSelectedChanged}
+      style={/* @once */ lng.combineStyles(props.style, rowStyles)}
+    >
+      <List each={slice()}>{props.children}</List>
+    </view>
+  );
+}

package/src/primitives/VirtualList.tsx

@@ -0,0 +1,137 @@
+import * as s from 'solid-js';
+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';
+
+const rowOnLeft = lngp.handleNavigation('left');
+const rowOnRight = lngp.handleNavigation('right');
+const rowScroll = lngp.withScrolling(true);
+
+const rowStyles: lng.NodeStyles = {
+  display: 'flex',
+  gap: 30,
+  transition: {
+    x: {
+      duration: 250,
+      easing: 'ease-out',
+    },
+  },
+};
+
+function scrollToIndex(this: lng.ElementNode, index: number) {
+  this.selected = index;
+  rowScroll(index, this);
+  this.setFocus();
+}
+
+export type VirtualListProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
+  each: readonly T[] | undefined | null | false;
+  displaySize: number;
+  bufferSize?: number;
+  fallback?: s.JSX.Element;
+  children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
+};
+
+export function VirtualList<T>(props: VirtualListProps<T>): s.JSX.Element {
+
+  const [ cursor, setCursor ] = s.createSignal(props.selected ?? 0);
+
+  const bufferSize = () => props.bufferSize ?? 1;
+
+  const items = s.createMemo(() => props.each || []);
+
+  const start = () =>
+    utils.clamp(cursor() - bufferSize(), 0, Math.max(0, items().length - props.displaySize - bufferSize()));
+
+  const end = () =>
+    Math.min(items().length, cursor() + props.displaySize + bufferSize());
+
+  const [ slice, setSlice ] = s.createSignal(items().slice(start(), end()));
+
+  s.createEffect(s.on([ () => props.selected, items ], ([selected]) => {
+    if (!viewRef || !selected) return;
+
+    const item = items()![selected];
+    let active = viewRef.children.find(x => x.item === item);
+    const lastSelected = viewRef.selected;
+
+    if (active instanceof lng.ElementNode) {
+      viewRef.selected = viewRef.children.indexOf(active);
+      chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+    }
+    else {
+      setCursor(selected);
+      setSlice(items().slice(start(), end()));
+      queueMicrotask(() => {
+        viewRef.updateLayout();
+        active = viewRef.children.find(x => x.item === item);
+        if (active instanceof lng.ElementNode) {
+          viewRef.selected = viewRef.children.indexOf(active);
+          chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+        }
+      });
+    }
+  }));
+
+  s.createEffect(s.on(items, () => {
+    if (!viewRef) return;
+    setSlice(items().slice(start(), end()));
+  }, { defer: true }));
+
+  const onSelectedChanged: lngp.OnSelectedChanged = function (
+    _idx, elm, active, _lastIdx,
+  ) {
+    let idx = _idx;
+    let lastIdx = _lastIdx;
+
+    const prevChildX = this.x + active.x;
+    const prevStart = start();
+
+    // Update the displayed slice of items
+    setCursor(prevStart + idx);
+    setSlice(items().slice(start(), end()));
+
+    // this.selected is relative to the slice
+    // and it doesn't get corrected automatically after children change
+    const idxCorrection = prevStart - start();
+    if (lastIdx) lastIdx += idxCorrection;
+    idx += idxCorrection;
+    this.selected += idxCorrection;
+
+    // Microtask & this.updateLayout() to make sure the child position is recalculated
+    queueMicrotask(() => {
+      this.updateLayout();
+
+      // Correct this.x for changes to children, bypass animation
+      this.lng.x = prevChildX - active.x;
+
+      // smoothly scroll to new selected element
+      rowScroll(idx, elm, active, lastIdx);
+    });
+  };
+
+  const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
+
+  let viewRef!: lngp.NavigableElement;
+  return <>
+    <view
+      {...props}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      selected={props.selected || 0}
+      cursor={cursor()}
+      onLeft={/* @once */ lngp.chainFunctions(props.onLeft, rowOnLeft)}
+      onRight={/* @once */ lngp.chainFunctions(props.onRight, rowOnRight)}
+      forwardFocus={/* once */ lngp.onGridFocus(chainedOnSelectedChanged)}
+      scrollToIndex={scrollToIndex}
+      onCreate={/* @once */
+        props.selected ? lngp.chainFunctions(props.onCreate, rowScroll) : props.onCreate
+      }
+      /* lngp.NavigableElement.onSelectedChanged is used by lngp.handleNavigation */
+      onSelectedChanged={chainedOnSelectedChanged}
+      style={/* @once */ lng.combineStyles(props.style, rowStyles)}
+    >
+      <List each={slice()}>{props.children}</List>
+    </view>
+  </>;
+}

package/src/primitives/index.ts

@@ -16,6 +16,8 @@ export * from './Suspense.jsx';
 export * from './Marquee.jsx';
 export * from './createFocusStack.jsx';
 export * from './useHold.js';
+export * from './VirtualGrid.jsx';
+export * from './VirtualList.jsx';
 export { withScrolling } from './utils/withScrolling.js';
 export {
   type AnyFunction,

package/src/utils.ts

@@ -61,3 +61,8 @@ export function combineStylesMemo<T extends Styles>(
     ...style1,
   }));
 }
+
+export const clamp = (value: number, min = 0, max = 100) =>
+  min < max
+    ? Math.min(Math.max(value, min), max)
+    : Math.min(Math.max(value, max), min);