@onekeyfe/react-native-native-list 3.0.105

package/src/NativeList.tsx

@@ -0,0 +1,298 @@
+import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { callback, getHostComponent } from 'react-native-nitro-modules';
+import type {
+  NativeListMethods,
+  NativeListNativeProps,
+} from './NativeList.nitro';
+import type {
+  ActionAnchorInvalidatedEvent,
+  RowActionEvent,
+  SelectionDeltaEvent,
+  ReorderEvent,
+  EndReachedEvent,
+  VisibleRangeChangedEvent,
+} from './models';
+import type { NativeListProps, NativeListRef } from './NativeList.types';
+import {
+  normalizeIndexScroll,
+  normalizeKeyScroll,
+  normalizePositionScroll,
+  resolveLocationIndex,
+  scrollFailure,
+  validateOffset,
+  type NormalizedPositionScroll,
+} from './scrolling';
+import { serializePatches, serializeSnapshot } from './validation';
+
+export type { NativeListProps, NativeListRef } from './NativeList.types';
+export type {
+  ActionAnchorState,
+  ScrollAlignment,
+  ScrollPositionOptions,
+  ScrollToEndParams,
+  ScrollToIndexFailedInfo,
+  ScrollToIndexParams,
+  ScrollToItemParams,
+  ScrollToKeyParams,
+  ScrollToLocationParams,
+  ScrollToOffsetParams,
+} from './NativeList.types';
+
+const NativeListConfig = require('../nitrogen/generated/shared/json/NativeListConfig.json');
+
+const NativeListHost = getHostComponent<
+  NativeListNativeProps,
+  NativeListMethods
+>('NativeList', () => NativeListConfig);
+
+function parsePayload<T>(payloadJson: string): T {
+  return JSON.parse(payloadJson) as T;
+}
+
+export const NativeList = forwardRef<NativeListRef, NativeListProps>(
+  function NativeList(
+    {
+      snapshot,
+      webVirtualizationEnabled: _webVirtualizationEnabled,
+      onRowAction,
+      onActionAnchorInvalidated,
+      onSelectionDelta,
+      onReorder,
+      onEndReached,
+      onVisibleRangeChanged,
+      onRefresh,
+      onScrollToIndexFailed,
+      initialScrollIndex,
+      initialScrollKey,
+      initialScrollViewPosition,
+      initialScrollViewOffset,
+      ...viewProps
+    },
+    forwardedRef
+  ) {
+    const nativeRef = useRef<NativeListMethods | null>(null);
+    const callbacksRef = useRef({
+      onRowAction,
+      onActionAnchorInvalidated,
+      onSelectionDelta,
+      onReorder,
+      onEndReached,
+      onVisibleRangeChanged,
+      onRefresh,
+      onScrollToIndexFailed,
+    });
+    callbacksRef.current = {
+      onRowAction,
+      onActionAnchorInvalidated,
+      onSelectionDelta,
+      onReorder,
+      onEndReached,
+      onVisibleRangeChanged,
+      onRefresh,
+      onScrollToIndexFailed,
+    };
+    const snapshotRef = useRef(snapshot);
+    snapshotRef.current = snapshot;
+    const initialScrollRef = useRef<
+      | Readonly<{
+          index?: number;
+          key?: string;
+          scroll: NormalizedPositionScroll;
+        }>
+      | undefined
+    >(
+      initialScrollIndex === undefined && initialScrollKey === undefined
+        ? undefined
+        : initialScrollIndex !== undefined
+        ? normalizeIndexScroll({
+            index: initialScrollIndex,
+            animated: false,
+            viewPosition: initialScrollViewPosition,
+            viewOffset: initialScrollViewOffset,
+          })
+        : {
+            key: initialScrollKey,
+            scroll: normalizePositionScroll(
+              {
+                animated: false,
+                viewPosition: initialScrollViewPosition,
+                viewOffset: initialScrollViewOffset,
+              },
+              'start'
+            ),
+          }
+    );
+    const didApplyInitialScroll = useRef(false);
+    const snapshotJson = useMemo(() => serializeSnapshot(snapshot), [snapshot]);
+
+    const emitIndexFailure = (
+      index: number,
+      reason: Parameters<typeof scrollFailure>[2]
+    ) => {
+      callbacksRef.current.onScrollToIndexFailed?.(
+        scrollFailure(snapshotRef.current.rows, index, reason)
+      );
+    };
+
+    const dispatchIndexScroll = (
+      index: number,
+      scroll: NormalizedPositionScroll
+    ) => {
+      if (index >= snapshotRef.current.rows.length) {
+        emitIndexFailure(index, 'index-out-of-range');
+        return;
+      }
+      nativeRef.current?.scrollToIndex(
+        index,
+        scroll.animated,
+        scroll.alignment,
+        scroll.viewPosition,
+        scroll.viewOffset
+      );
+    };
+
+    const dispatchKeyScroll = (
+      key: string,
+      scroll: NormalizedPositionScroll
+    ) => {
+      nativeRef.current?.scrollToKey(
+        key,
+        scroll.animated,
+        scroll.alignment,
+        scroll.viewPosition,
+        scroll.viewOffset
+      );
+    };
+
+    const applyInitialScroll = () => {
+      if (didApplyInitialScroll.current || !nativeRef.current) return;
+      didApplyInitialScroll.current = true;
+      const initial = initialScrollRef.current;
+      if (!initial) return;
+      if (initial.index !== undefined)
+        dispatchIndexScroll(initial.index, initial.scroll);
+      else if (initial.key !== undefined)
+        dispatchKeyScroll(initial.key, initial.scroll);
+    };
+    const applyInitialScrollCallbackRef = useRef(applyInitialScroll);
+    applyInitialScrollCallbackRef.current = applyInitialScroll;
+
+    useImperativeHandle(forwardedRef, () => ({
+      applySnapshot(nextSnapshot) {
+        snapshotRef.current = nextSnapshot;
+        nativeRef.current?.applySnapshot(serializeSnapshot(nextSnapshot));
+      },
+      applyPatches(patches) {
+        if (patches.length > 0)
+          nativeRef.current?.applyPatches(serializePatches(patches));
+      },
+      reconcileSelection(selectedKeys) {
+        nativeRef.current?.reconcileSelection(JSON.stringify(selectedKeys));
+      },
+      scrollToKey(paramsOrKey, animated, alignment) {
+        const { key, scroll } = normalizeKeyScroll(
+          paramsOrKey,
+          animated,
+          alignment
+        );
+        dispatchKeyScroll(key, scroll);
+      },
+      scrollToIndex(paramsOrIndex, animated, alignment) {
+        const { index, scroll } = normalizeIndexScroll(
+          paramsOrIndex,
+          animated,
+          alignment
+        );
+        dispatchIndexScroll(index, scroll);
+      },
+      scrollToItem(params) {
+        const index = snapshotRef.current.rows.findIndex(
+          (row) => row.key === params.item.key
+        );
+        if (index < 0) {
+          emitIndexFailure(-1, 'item-not-found');
+          return;
+        }
+        dispatchIndexScroll(index, normalizePositionScroll(params, 'start'));
+      },
+      scrollToOffset({ offset, animated = true }) {
+        validateOffset(offset);
+        nativeRef.current?.scrollToOffset(offset, animated);
+      },
+      scrollToEnd({ animated = true } = {}) {
+        nativeRef.current?.scrollToEnd(animated);
+      },
+      scrollToLocation(params) {
+        const index = resolveLocationIndex(snapshotRef.current.rows, params);
+        if (index === undefined) {
+          const sectionCount = snapshotRef.current.rows.filter(
+            (row) => row.type === 'sectionHeader' && row.variant !== 'summary'
+          ).length;
+          emitIndexFailure(
+            params.itemIndex,
+            params.sectionIndex >= sectionCount
+              ? 'section-out-of-range'
+              : 'item-out-of-range'
+          );
+          return;
+        }
+        dispatchIndexScroll(index, normalizePositionScroll(params, 'start'));
+      },
+      setActionAnchorState(state) {
+        nativeRef.current?.setActionAnchorState(JSON.stringify(state));
+      },
+      setRefreshing(refreshing) {
+        nativeRef.current?.setRefreshing(refreshing);
+      },
+    }));
+
+    const nativeCallbacks = useMemo(
+      () => ({
+        hybridRef: callback((ref: NativeListMethods) => {
+          nativeRef.current = ref;
+          applyInitialScrollCallbackRef.current();
+        }),
+        onRowAction: callback((payloadJson: string) => {
+          const payload = parsePayload<RowActionEvent>(payloadJson);
+          if (payload.actionKey === 'nativeList.refresh')
+            callbacksRef.current.onRefresh?.();
+          callbacksRef.current.onRowAction?.(payload);
+        }),
+        onActionAnchorInvalidated: callback((payloadJson: string) => {
+          callbacksRef.current.onActionAnchorInvalidated?.(
+            parsePayload<ActionAnchorInvalidatedEvent>(payloadJson)
+          );
+        }),
+        onSelectionDelta: callback((payloadJson: string) => {
+          callbacksRef.current.onSelectionDelta?.(
+            parsePayload<SelectionDeltaEvent>(payloadJson)
+          );
+        }),
+        onReorder: callback((payloadJson: string) => {
+          callbacksRef.current.onReorder?.(
+            parsePayload<ReorderEvent>(payloadJson)
+          );
+        }),
+        onEndReached: callback((payloadJson: string) => {
+          callbacksRef.current.onEndReached?.(
+            parsePayload<EndReachedEvent>(payloadJson)
+          );
+        }),
+        onVisibleRangeChanged: callback((payloadJson: string) => {
+          callbacksRef.current.onVisibleRangeChanged?.(
+            parsePayload<VisibleRangeChangedEvent>(payloadJson)
+          );
+        }),
+      }),
+      []
+    );
+
+    return (
+      <NativeListHost
+        {...viewProps}
+        {...nativeCallbacks}
+        snapshotJson={snapshotJson}
+      />
+    );
+  }
+);

package/src/NativeList.types.ts

@@ -0,0 +1,125 @@
+import type { ViewProps } from 'react-native';
+import type {
+  ActionAnchorInvalidatedEvent,
+  EndReachedEvent,
+  NativeListSnapshot,
+  ReorderEvent,
+  RowActionEvent,
+  RowModel,
+  RowPatch,
+  SelectionDeltaEvent,
+  VisibleRangeChangedEvent,
+} from './models';
+
+export type ActionAnchorState = Readonly<{
+  token: string;
+  open: boolean;
+  restoreFocus?: boolean;
+}>;
+
+export type ScrollAlignment = 'start' | 'center' | 'end' | 'nearest';
+
+export type ScrollPositionOptions = Readonly<{
+  animated?: boolean;
+  alignment?: ScrollAlignment;
+  viewPosition?: number;
+  viewOffset?: number;
+}>;
+
+export type ScrollToIndexParams = ScrollPositionOptions &
+  Readonly<{ index: number }>;
+
+export type ScrollToKeyParams = ScrollPositionOptions &
+  Readonly<{ key: string }>;
+
+export type ScrollToItemParams = ScrollPositionOptions &
+  Readonly<{ item: RowModel }>;
+
+export type ScrollToOffsetParams = Readonly<{
+  offset: number;
+  animated?: boolean;
+}>;
+
+export type ScrollToEndParams = Readonly<{
+  animated?: boolean;
+}>;
+
+export type ScrollToLocationParams = ScrollPositionOptions &
+  Readonly<{
+    sectionIndex: number;
+    itemIndex: number;
+  }>;
+
+export type ScrollToIndexFailedInfo = Readonly<{
+  index: number;
+  itemCount: number;
+  highestMeasuredFrameIndex: number;
+  averageItemLength: number;
+  reason:
+    | 'index-out-of-range'
+    | 'section-out-of-range'
+    | 'item-out-of-range'
+    | 'item-not-found';
+}>;
+
+type InitialScrollProps =
+  | Readonly<{
+      initialScrollIndex?: never;
+      initialScrollKey?: never;
+      initialScrollViewPosition?: never;
+      initialScrollViewOffset?: never;
+    }>
+  | Readonly<{
+      initialScrollIndex: number;
+      initialScrollKey?: never;
+      initialScrollViewPosition?: number;
+      initialScrollViewOffset?: number;
+    }>
+  | Readonly<{
+      initialScrollIndex?: never;
+      initialScrollKey: string;
+      initialScrollViewPosition?: number;
+      initialScrollViewOffset?: number;
+    }>;
+
+type ScrollToIndex = (
+  paramsOrIndex: ScrollToIndexParams | number,
+  animated?: boolean,
+  alignment?: ScrollAlignment
+) => void;
+
+type ScrollToKey = (
+  paramsOrKey: ScrollToKeyParams | string,
+  animated?: boolean,
+  alignment?: ScrollAlignment
+) => void;
+
+export type NativeListRef = Readonly<{
+  applySnapshot(snapshot: NativeListSnapshot): void;
+  applyPatches(patches: readonly RowPatch[]): void;
+  reconcileSelection(selectedKeys: readonly string[]): void;
+  scrollToKey: ScrollToKey;
+  scrollToIndex: ScrollToIndex;
+  scrollToItem(params: ScrollToItemParams): void;
+  scrollToOffset(params: ScrollToOffsetParams): void;
+  scrollToEnd(params?: ScrollToEndParams): void;
+  scrollToLocation(params: ScrollToLocationParams): void;
+  setActionAnchorState(state: ActionAnchorState): void;
+  setRefreshing(refreshing: boolean): void;
+}>;
+
+export type NativeListProps = Omit<ViewProps, 'children'> &
+  Readonly<{
+    snapshot: NativeListSnapshot;
+    /** Web only. Defaults to true and is ignored by the native host. */
+    webVirtualizationEnabled?: boolean;
+    onRowAction?: (event: RowActionEvent) => void;
+    onActionAnchorInvalidated?: (event: ActionAnchorInvalidatedEvent) => void;
+    onSelectionDelta?: (event: SelectionDeltaEvent) => void;
+    onReorder?: (event: ReorderEvent) => void;
+    onEndReached?: (event: EndReachedEvent) => void;
+    onVisibleRangeChanged?: (event: VisibleRangeChangedEvent) => void;
+    onRefresh?: () => void;
+    onScrollToIndexFailed?: (info: ScrollToIndexFailedInfo) => void;
+  }> &
+  InitialScrollProps;

package/src/NativeList.web.tsx

@@ -0,0 +1,258 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View } from 'react-native';
+import type { NativeListProps, NativeListRef } from './NativeList.types';
+import type { NativeListSnapshot } from './models';
+import {
+  normalizeIndexScroll,
+  normalizeKeyScroll,
+  normalizePositionScroll,
+  resolveLocationIndex,
+  scrollFailure,
+  validateOffset,
+  type NormalizedPositionScroll,
+} from './scrolling';
+import { serializePatches, validateSnapshot } from './validation';
+import {
+  NativeListWebEngine,
+  type NativeListWebCallbacks,
+} from './web/NativeListWebEngine';
+
+export type { NativeListProps, NativeListRef } from './NativeList.types';
+export type {
+  ActionAnchorState,
+  ScrollAlignment,
+  ScrollPositionOptions,
+  ScrollToEndParams,
+  ScrollToIndexFailedInfo,
+  ScrollToIndexParams,
+  ScrollToItemParams,
+  ScrollToKeyParams,
+  ScrollToLocationParams,
+  ScrollToOffsetParams,
+} from './NativeList.types';
+
+export const NativeList = forwardRef<NativeListRef, NativeListProps>(
+  function NativeList(
+    {
+      snapshot,
+      webVirtualizationEnabled = true,
+      onRowAction,
+      onActionAnchorInvalidated,
+      onSelectionDelta,
+      onReorder,
+      onEndReached,
+      onVisibleRangeChanged,
+      onRefresh,
+      onScrollToIndexFailed,
+      initialScrollIndex,
+      initialScrollKey,
+      initialScrollViewPosition,
+      initialScrollViewOffset,
+      ...viewProps
+    },
+    forwardedRef
+  ) {
+    const [host, setHost] = useState<HTMLElement | null>(null);
+    const engineRef = useRef<NativeListWebEngine | undefined>(undefined);
+    const webVirtualizationEnabledRef = useRef(webVirtualizationEnabled);
+    webVirtualizationEnabledRef.current = webVirtualizationEnabled;
+    const validatedSnapshot = useMemo(
+      () => validateSnapshot(snapshot),
+      [snapshot]
+    );
+    const snapshotRef = useRef(validatedSnapshot);
+    snapshotRef.current = validatedSnapshot;
+    const appliedSnapshotRef = useRef<NativeListSnapshot | undefined>(
+      undefined
+    );
+    const callbacksRef = useRef<NativeListWebCallbacks>({});
+    callbacksRef.current = {
+      onRowAction,
+      onActionAnchorInvalidated,
+      onSelectionDelta,
+      onReorder,
+      onEndReached,
+      onVisibleRangeChanged,
+      onRefresh,
+      onScrollToIndexFailed,
+    };
+    const initialScrollRef = useRef<
+      | Readonly<{
+          index?: number;
+          key?: string;
+          scroll: NormalizedPositionScroll;
+        }>
+      | undefined
+    >(
+      initialScrollIndex === undefined && initialScrollKey === undefined
+        ? undefined
+        : initialScrollIndex !== undefined
+        ? normalizeIndexScroll({
+            index: initialScrollIndex,
+            animated: false,
+            viewPosition: initialScrollViewPosition,
+            viewOffset: initialScrollViewOffset,
+          })
+        : {
+            key: initialScrollKey,
+            scroll: normalizePositionScroll(
+              {
+                animated: false,
+                viewPosition: initialScrollViewPosition,
+                viewOffset: initialScrollViewOffset,
+              },
+              'start'
+            ),
+          }
+    );
+    const didApplyInitialScroll = useRef(false);
+
+    useEffect(() => {
+      if (!host) return;
+      const engine = new NativeListWebEngine(
+        host,
+        snapshotRef.current,
+        callbacksRef.current,
+        webVirtualizationEnabledRef.current
+      );
+      engineRef.current = engine;
+      appliedSnapshotRef.current = snapshotRef.current;
+      const initial = initialScrollRef.current;
+      if (initial && !didApplyInitialScroll.current) {
+        didApplyInitialScroll.current = true;
+        if (initial.index !== undefined)
+          engine.scrollToIndex(initial.index, initial.scroll);
+        else if (initial.key !== undefined)
+          engine.scrollToKey(initial.key, initial.scroll);
+      }
+      return () => {
+        engine.destroy();
+        if (engineRef.current === engine) engineRef.current = undefined;
+      };
+    }, [host]);
+
+    useEffect(() => {
+      engineRef.current?.setVirtualizationEnabled(webVirtualizationEnabled);
+    }, [webVirtualizationEnabled]);
+
+    useEffect(() => {
+      engineRef.current?.updateCallbacks(callbacksRef.current);
+    });
+
+    useEffect(() => {
+      const engine = engineRef.current;
+      if (!engine || appliedSnapshotRef.current === validatedSnapshot) return;
+      engine.applySnapshot(validatedSnapshot);
+      appliedSnapshotRef.current = validatedSnapshot;
+    }, [validatedSnapshot]);
+
+    const emitIndexFailure = (
+      index: number,
+      reason: Parameters<typeof scrollFailure>[2]
+    ) => {
+      callbacksRef.current.onScrollToIndexFailed?.(
+        scrollFailure(snapshotRef.current.rows, index, reason)
+      );
+    };
+
+    useImperativeHandle(forwardedRef, () => ({
+      applySnapshot(nextSnapshot) {
+        const next = validateSnapshot(nextSnapshot);
+        snapshotRef.current = next;
+        appliedSnapshotRef.current = next;
+        engineRef.current?.applySnapshot(next);
+      },
+      applyPatches(patches) {
+        if (patches.length > 0) {
+          serializePatches(patches);
+          engineRef.current?.applyPatches(patches);
+        }
+      },
+      reconcileSelection(selectedKeys) {
+        engineRef.current?.reconcileSelection(selectedKeys);
+      },
+      scrollToKey(paramsOrKey, animated, alignment) {
+        const { key, scroll } = normalizeKeyScroll(
+          paramsOrKey,
+          animated,
+          alignment
+        );
+        engineRef.current?.scrollToKey(key, scroll);
+      },
+      scrollToIndex(paramsOrIndex, animated, alignment) {
+        const { index, scroll } = normalizeIndexScroll(
+          paramsOrIndex,
+          animated,
+          alignment
+        );
+        if (index >= snapshotRef.current.rows.length) {
+          emitIndexFailure(index, 'index-out-of-range');
+          return;
+        }
+        engineRef.current?.scrollToIndex(index, scroll);
+      },
+      scrollToItem(params) {
+        const index = snapshotRef.current.rows.findIndex(
+          (row) => row.key === params.item.key
+        );
+        if (index < 0) {
+          emitIndexFailure(-1, 'item-not-found');
+          return;
+        }
+        engineRef.current?.scrollToIndex(
+          index,
+          normalizePositionScroll(params, 'start')
+        );
+      },
+      scrollToOffset({ offset, animated = true }) {
+        validateOffset(offset);
+        engineRef.current?.scrollToOffset(offset, animated);
+      },
+      scrollToEnd({ animated = true } = {}) {
+        engineRef.current?.scrollToEnd(animated);
+      },
+      scrollToLocation(params) {
+        const index = resolveLocationIndex(snapshotRef.current.rows, params);
+        if (index === undefined) {
+          const sectionCount = snapshotRef.current.rows.filter(
+            (row) => row.type === 'sectionHeader' && row.variant !== 'summary'
+          ).length;
+          emitIndexFailure(
+            params.itemIndex,
+            params.sectionIndex >= sectionCount
+              ? 'section-out-of-range'
+              : 'item-out-of-range'
+          );
+          return;
+        }
+        engineRef.current?.scrollToIndex(
+          index,
+          normalizePositionScroll(params, 'start')
+        );
+      },
+      setActionAnchorState(state) {
+        engineRef.current?.setActionAnchorState(state);
+      },
+      setRefreshing(refreshing) {
+        engineRef.current?.setRefreshing(refreshing);
+      },
+    }));
+
+    const setHostRef = useCallback(
+      (value: React.ComponentRef<typeof View> | null) => {
+        setHost(value as unknown as HTMLElement | null);
+      },
+      []
+    );
+
+    return <View {...viewProps} ref={setHostRef} />;
+  }
+);

package/src/index.ts

@@ -0,0 +1,35 @@
+export { NativeList } from './NativeList';
+export type {
+  ActionAnchorState,
+  NativeListProps,
+  NativeListRef,
+  ScrollAlignment,
+  ScrollPositionOptions,
+  ScrollToEndParams,
+  ScrollToIndexFailedInfo,
+  ScrollToIndexParams,
+  ScrollToItemParams,
+  ScrollToKeyParams,
+  ScrollToLocationParams,
+  ScrollToOffsetParams,
+} from './NativeList';
+export type * from './models';
+export {
+  applyRowPatches,
+  serializePatches,
+  serializeSnapshot,
+  validatePatches,
+  validateSnapshot,
+} from './validation';
+export {
+  checkboxStateForKeys,
+  checkboxStateForSection,
+  isSelectableRow,
+  reduceSelection,
+  selectionStateFromSnapshot,
+} from './selection';
+export type {
+  SelectionAction,
+  SelectionResult,
+  SelectionState,
+} from './selection';