@onekeyfe/react-native-native-list 3.0.105 → 3.0.106

package/lib/typescript/src/NativeList.web.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { NativeListProps } from './NativeList.types';
-import type { NativeListSnapshot } from './models';
+import type { NativeListSnapshot, RowPatch } from './models';
 export type { NativeListProps, NativeListRef } from './NativeList.types';
 export type { ActionAnchorState, ScrollAlignment, ScrollPositionOptions, ScrollToEndParams, ScrollToIndexFailedInfo, ScrollToIndexParams, ScrollToItemParams, ScrollToKeyParams, ScrollToLocationParams, ScrollToOffsetParams, } from './NativeList.types';
 export declare const NativeList: React.ForwardRefExoticComponent<NativeListProps & React.RefAttributes<Readonly<{
     applySnapshot(snapshot: NativeListSnapshot): void;
-    applyPatches(patches: readonly import("./models").RowPatch[]): void;
+    applyPatches(patches: readonly RowPatch[]): void;
     reconcileSelection(selectedKeys: readonly string[]): void;
     scrollToKey: (paramsOrKey: import("./NativeList.types").ScrollToKeyParams | string, animated?: boolean, alignment?: import("./NativeList.types").ScrollAlignment) => void;
     scrollToIndex: (paramsOrIndex: import("./NativeList.types").ScrollToIndexParams | number, animated?: boolean, alignment?: import("./NativeList.types").ScrollAlignment) => void;

package/lib/typescript/src/avatarPrefetch.d.ts

@@ -0,0 +1,28 @@
+import type { ImageSource, RowModel, RowPatch } from './models';
+export type AvatarCandidate = Readonly<{
+    source: ImageSource;
+    priority: 0 | 1 | 2;
+}>;
+export declare function avatarPrefetchWindow(rows: readonly RowModel[], first: number, last: number, direction: number, resolveRow?: (row: RowModel) => RowModel): AvatarCandidate[];
+export declare class NativeAvatarPrefetchModel {
+    private rows;
+    private rowByKey;
+    private readonly imageRows;
+    constructor(rows: readonly RowModel[]);
+    replaceSnapshot(rows: readonly RowModel[]): void;
+    applyPatches(patches: readonly RowPatch[], dispatch?: () => void): boolean;
+    window(first: number, last: number, direction: number): AvatarCandidate[];
+}
+export declare class NativeAvatarPrefetchQueue {
+    private readonly preload;
+    private pending;
+    private activeUri;
+    private timer;
+    private disposed;
+    private readonly recent;
+    constructor(preload: (source: ImageSource) => Promise<boolean>);
+    update(candidates: readonly AvatarCandidate[]): void;
+    dispose(): void;
+    private schedule;
+}
+//# sourceMappingURL=avatarPrefetch.d.ts.map

package/lib/typescript/src/models.d.ts

@@ -20,13 +20,43 @@ export type ImageSource = Readonly<{
     optimizeTos?: boolean;
     overscan?: number;
     loadingStrategy?: ImageLoadingStrategy;
+    fallbackUri?: string;
+    retryTimes?: number;
 }>;
 export type BadgeModel = Readonly<{
     key: string;
     text: string;
     tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 }>;
+export type SelectorTextSegment = Readonly<{
+    text: string;
+    textSegments?: readonly ValueTextSegment[];
+    tone?: TextTone | 'disabled' | 'caution';
+    separatorBefore?: boolean;
+}>;
+export type VisualOverlay = Readonly<{
+    position: 'topLeft' | 'bottomRight';
+    size?: number;
+    width?: number;
+    height?: number;
+    padding?: number;
+    offset?: number;
+    offsetX?: number;
+    offsetY?: number;
+    image?: ImageSource;
+    name?: string;
+    text?: string;
+    tintColor?: string;
+    backgroundColor?: string;
+}>;
 type VisualWithImage = Readonly<{
+    fallbackIcon?: Readonly<{
+        name: string;
+        tintColor?: string;
+    }>;
+    overlays?: readonly VisualOverlay[];
+    borderStyle?: 'dashed';
+    borderColor?: string;
     image?: ImageSource;
     fallbackText?: string;
     backgroundColor?: string;
@@ -67,10 +97,15 @@ export type SelectionTarget = Readonly<{
 }> | Readonly<{
     scope: 'list';
 }>;
+export type ValueTextSegment = Readonly<{
+    text: string;
+    style?: 'subscript';
+}>;
 export type TrailingAccessory = Readonly<{
     kind: 'value';
     text: string;
     secondary?: boolean;
+    textSegments?: readonly ValueTextSegment[];
 }> | Readonly<{
     kind: 'valuePair';
     primary: string;
@@ -109,6 +144,9 @@ export type TrailingAccessory = Readonly<{
     tintColor?: string;
     disabled?: boolean;
     actionKey?: string;
+    testID?: string;
+    hoverActionKey?: string;
+    accessibilityLabel?: string;
 }> | Readonly<{
     kind: 'spinner';
 }> | Readonly<{
@@ -122,6 +160,13 @@ export type FooterAction = Readonly<{
     disabled?: boolean;
 }>;
 export type RowBase = Readonly<{
+    height?: number;
+    heightRounding?: 'floor' | 'nearest';
+    testID?: string;
+    opacity?: number;
+    backgroundColor?: string;
+    backgroundFullWidth?: boolean;
+    pressDisabled?: boolean;
     key: string;
     revision?: number;
     sectionKey?: string;
@@ -136,6 +181,13 @@ export type RowBase = Readonly<{
 }>;
 export type IdentityRow = RowBase & Readonly<{
     type: 'identity';
+    titleMatch?: readonly Readonly<{
+        start: number;
+        end: number;
+    }>[];
+    titleActionKey?: string;
+    titleActionOnHover?: boolean;
+    subtitleSegments?: readonly SelectorTextSegment[];
     presentation?: 'walletSidebar' | 'accountSelector' | 'networkSelector';
     leading: LeadingVisual;
     leadingAction?: Extract<TrailingAccessory, {
@@ -243,6 +295,11 @@ export type MetricCardRow = RowBase & Readonly<{
 }>;
 export type SectionHeaderRow = RowBase & Readonly<{
     type: 'sectionHeader';
+    sticky?: boolean;
+    valueActionTestID?: string;
+    valueSegments?: readonly ValueTextSegment[];
+    titleActionKey?: string;
+    titleActionOnHover?: boolean;
     sectionKey: string;
     presentation?: 'networkSelector';
     indexTitle?: string;
@@ -284,6 +341,12 @@ export type SystemRow = RowBase & (Readonly<{
     variant: 'retry';
     message: string;
     actionKey: string;
+}> | Readonly<{
+    type: 'system';
+    variant: 'warning';
+    title: string;
+    message: string;
+    borderColor?: string;
 }> | Readonly<{
     type: 'system';
     variant: 'noMatch';
@@ -299,6 +362,10 @@ export type SystemRow = RowBase & (Readonly<{
 }>);
 export type RowModel = IdentityRow | WalletGroupRow | RailRow | ActivityRow | MessageRow | DataRow | MediaTileRow | MetricCardRow | SectionHeaderRow | ActionRow | SystemRow;
 export type NativeListTheme = Readonly<{
+    checkboxBackground?: string;
+    checkboxBorder?: string;
+    checkboxIcon?: string;
+    cautionBackground?: string;
     background: string;
     rowBackground: string;
     rowSelectedBackground: string;
@@ -318,6 +385,7 @@ export type NativeListTheme = Readonly<{
     inverseBackground?: string;
     inverseText?: string;
     info?: string;
+    caution?: string;
 }>;
 export type SectionIndexConfig = Readonly<{
     enabled: boolean;
@@ -355,11 +423,11 @@ export type NativeListSnapshot = Readonly<{
     fixedFooter?: ActionRow | SystemRow;
     theme?: NativeListTheme;
 }>;
-type CommonPatchFields = 'revision' | 'disabled' | 'selected' | 'separator';
+type CommonPatchFields = 'revision' | 'disabled' | 'selected' | 'separator' | 'height' | 'heightRounding' | 'opacity' | 'pressDisabled' | 'accessibilityLabel';
 export type RowPatch = Readonly<{
     type: 'identity';
     key: string;
-    changes: Partial<Pick<IdentityRow, CommonPatchFields | 'title' | 'subtitle' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction'>>;
+    changes: Partial<Pick<IdentityRow, CommonPatchFields | 'title' | 'subtitle' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>>;
 }> | Readonly<{
     type: 'rail';
     key: string;
@@ -387,7 +455,7 @@ export type RowPatch = Readonly<{
 }> | Readonly<{
     type: 'sectionHeader';
     key: string;
-    changes: Partial<Pick<SectionHeaderRow, CommonPatchFields | 'variant' | 'title' | 'subtitle' | 'value' | 'valueActionKey' | 'titleIcon' | 'valueIcon' | 'checkbox'>>;
+    changes: Partial<Pick<SectionHeaderRow, CommonPatchFields | 'variant' | 'title' | 'subtitle' | 'value' | 'valueActionKey' | 'titleActionKey' | 'titleActionOnHover' | 'titleIcon' | 'valueIcon' | 'checkbox'>>;
 }> | Readonly<{
     type: 'action';
     key: string;
@@ -424,7 +492,7 @@ export type RowActionEvent = Readonly<{
     sectionKey?: string;
     anchor?: NativeListActionAnchor;
 }>;
-export type ActionAnchorInvalidationReason = 'scroll' | 'rebind' | 'snapshot' | 'layout' | 'destroy';
+export type ActionAnchorInvalidationReason = 'pointerLeave' | 'scroll' | 'rebind' | 'snapshot' | 'layout' | 'destroy';
 export type ActionAnchorInvalidatedEvent = Readonly<{
     token: string;
     reason: ActionAnchorInvalidationReason;

package/lib/typescript/src/web/NativeListWebAvatarCache.d.ts

@@ -0,0 +1,6 @@
+export type AvatarLease = (() => void) & {
+    setPriority: (priority: number) => void;
+};
+export declare function canonicalNativeListAvatarUri(uri: string): string | undefined;
+export declare function acquireNativeListAvatar(document: Document, uri: string, resolve: (url: string) => void, reject: () => void, priority?: number): AvatarLease;
+//# sourceMappingURL=NativeListWebAvatarCache.d.ts.map

package/lib/typescript/src/web/NativeListWebEngine.d.ts

@@ -77,9 +77,13 @@ export declare class NativeListWebEngine {
     private resizeObserver;
     private pendingScroll;
     private lastVisibleSignature;
+    private readonly avatarLeases;
+    private avatarOffset;
+    private avatarDirection;
     private reachedGeneration;
     private stickyKey;
     private previewTimer;
+    private sectionIndexEntries;
     private pointerReorder;
     private keyboardReorder;
     private reorderMoveFrame;
@@ -100,6 +104,7 @@ export declare class NativeListWebEngine {
     private lastViewportWidth;
     private lastViewportHeight;
     private destroyed;
+    private measuredWarningHeights;
     constructor(host: HTMLElement, snapshot: NativeListSnapshot, callbacks: NativeListWebCallbacks, virtualizationEnabled?: boolean);
     updateCallbacks(callbacks: NativeListWebCallbacks): void;
     setVirtualizationEnabled(enabled: boolean): void;
@@ -117,10 +122,12 @@ export declare class NativeListWebEngine {
     private setSnapshot;
     private applyTheme;
     private recomputeLayout;
+    private updateAvatarWindow;
     private renderWindow;
     private positionElement;
     private renderElement;
     private renderFooter;
+    private sectionIndexVisibleEntryIndices;
     private renderSectionIndex;
     private updateVisibleSelection;
     private updateVisibleState;
@@ -145,6 +152,8 @@ export declare class NativeListWebEngine {
     private invalidateActionAnchor;
     private emitActionAnchorInvalidated;
     private handleRowPress;
+    private handleTitlePointerOver;
+    private handleTitlePointerOut;
     private handleClick;
     private handleKeyDown;
     private startKeyboardReorder;
@@ -157,7 +166,7 @@ export declare class NativeListWebEngine {
     private requestFrame;
     private cancelFrame;
     private selectIndexPosition;
-    private indexButtonAtEvent;
+    private sectionIndexEntryAtEvent;
     private handleIndexPointer;
     private handleIndexClick;
     private handlePullStart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.105",
+  "version": "3.0.106",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -82,7 +82,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.105",
+    "@onekeyfe/react-native-image": "3.0.106",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/NativeList.tsx

@@ -1,4 +1,18 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  OneKeyImageCache,
+  OneKeyImageCachePolicy,
+} from '@onekeyfe/react-native-image';
+import {
+  NativeAvatarPrefetchModel,
+  NativeAvatarPrefetchQueue,
+} from './avatarPrefetch';
 import { callback, getHostComponent } from 'react-native-nitro-modules';
 import type {
   NativeListMethods,
@@ -13,6 +27,7 @@ import type {
   VisibleRangeChangedEvent,
 } from './models';
 import type { NativeListProps, NativeListRef } from './NativeList.types';
+import { isSelectableRow } from './selection';
 import {
   normalizeIndexScroll,
   normalizeKeyScroll,
@@ -22,7 +37,11 @@ import {
   validateOffset,
   type NormalizedPositionScroll,
 } from './scrolling';
-import { serializePatches, serializeSnapshot } from './validation';
+import {
+  applyRowPatches,
+  serializePatches,
+  serializeSnapshot,
+} from './validation';
 
 export type { NativeListProps, NativeListRef } from './NativeList.types';
 export type {
@@ -91,8 +110,74 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
       onRefresh,
       onScrollToIndexFailed,
     };
+    const snapshotJson = useMemo(() => serializeSnapshot(snapshot), [snapshot]);
     const snapshotRef = useRef(snapshot);
-    snapshotRef.current = snapshot;
+    const previousSnapshotJsonRef = useRef(snapshotJson);
+    const snapshotChanged = previousSnapshotJsonRef.current !== snapshotJson;
+    if (snapshotChanged) {
+      snapshotRef.current = snapshot;
+      previousSnapshotJsonRef.current = snapshotJson;
+    }
+    // OneKey patch: range events already cross the bridge only when row indices
+    // change. Prefetch is optional work; scrolling and visible loads stay native.
+    const avatarQueueRef = useRef<NativeAvatarPrefetchQueue | null>(null);
+    const avatarRangeRef = useRef<
+      { first: number; last: number; direction: number } | undefined
+    >(undefined);
+    // OneKey patch: a changed prop is a complete snapshot; unrelated renders must
+    // not erase image patches already dispatched through the imperative handle.
+    // const avatarPrefetchPaused = useRef(false);
+    const avatarModelRef = useRef<NativeAvatarPrefetchModel | null>(null);
+    const avatarLifecycle = useRef<'pending' | 'mounted' | 'unmounted'>(
+      'pending'
+    );
+    if (!avatarModelRef.current)
+      avatarModelRef.current = new NativeAvatarPrefetchModel(snapshot.rows);
+    else if (snapshotChanged)
+      avatarModelRef.current.replaceSnapshot(snapshot.rows);
+    const updateAvatarPrefetch = () => {
+      const range = avatarRangeRef.current;
+      if (!range) return;
+      avatarQueueRef.current?.update(
+        avatarModelRef.current?.window(
+          range.first,
+          range.last,
+          range.direction
+        ) ?? []
+      );
+    };
+    const updateAvatarPrefetchRef = useRef(updateAvatarPrefetch);
+    updateAvatarPrefetchRef.current = updateAvatarPrefetch;
+    useEffect(() => {
+      avatarLifecycle.current = 'mounted';
+      const queue = new NativeAvatarPrefetchQueue((source) =>
+        OneKeyImageCache.preload([
+          {
+            uri: source.uri,
+            headers: source.headers,
+            resizeWidth: source.width,
+            resizeHeight: source.height,
+            optimizeTos: false,
+            cachePolicy:
+              source.cachePolicy === 'memory'
+                ? OneKeyImageCachePolicy.MEMORY
+                : source.cachePolicy === 'disk'
+                ? OneKeyImageCachePolicy.DISK
+                : OneKeyImageCachePolicy.MEMORY_DISK,
+          },
+        ])
+      );
+      avatarQueueRef.current = queue;
+      updateAvatarPrefetchRef.current();
+      return () => {
+        queue.dispose();
+        avatarQueueRef.current = null;
+        avatarLifecycle.current = 'unmounted';
+      };
+    }, []);
+    useEffect(() => {
+      updateAvatarPrefetchRef.current();
+    }, [snapshot]);
     const initialScrollRef = useRef<
       | Readonly<{
           index?: number;
@@ -123,7 +208,6 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
           }
     );
     const didApplyInitialScroll = useRef(false);
-    const snapshotJson = useMemo(() => serializeSnapshot(snapshot), [snapshot]);
 
     const emitIndexFailure = (
       index: number,
@@ -179,15 +263,46 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
 
     useImperativeHandle(forwardedRef, () => ({
       applySnapshot(nextSnapshot) {
+        const nextSnapshotJson = serializeSnapshot(nextSnapshot);
+        nativeRef.current?.applySnapshot(nextSnapshotJson);
         snapshotRef.current = nextSnapshot;
-        nativeRef.current?.applySnapshot(serializeSnapshot(nextSnapshot));
+        if (nativeRef.current && avatarLifecycle.current !== 'unmounted') {
+          avatarModelRef.current?.replaceSnapshot(nextSnapshot.rows);
+          updateAvatarPrefetchRef.current();
+        }
       },
       applyPatches(patches) {
-        if (patches.length > 0)
-          nativeRef.current?.applyPatches(serializePatches(patches));
+        if (patches.length === 0) return;
+        const nextSnapshot = applyRowPatches(snapshotRef.current, patches);
+        const native = nativeRef.current;
+        const dispatch = native
+          ? () => {
+              native.applyPatches(serializePatches(patches));
+              snapshotRef.current = nextSnapshot;
+            }
+          : undefined;
+        if (avatarLifecycle.current === 'unmounted') {
+          dispatch?.();
+          return;
+        }
+        if (avatarModelRef.current?.applyPatches(patches, dispatch))
+          updateAvatarPrefetchRef.current();
       },
       reconcileSelection(selectedKeys) {
         nativeRef.current?.reconcileSelection(JSON.stringify(selectedKeys));
+        const current = snapshotRef.current;
+        if (
+          current.selection &&
+          (current.selection.mode !== 'single' || selectedKeys.length <= 1) &&
+          selectedKeys.every((key) =>
+            current.rows.some((row) => row.key === key && isSelectableRow(row))
+          )
+        ) {
+          snapshotRef.current = {
+            ...current,
+            selection: { ...current.selection, selectedKeys },
+          };
+        }
       },
       scrollToKey(paramsOrKey, animated, alignment) {
         const { key, scroll } = normalizeKeyScroll(
@@ -264,9 +379,21 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
           );
         }),
         onSelectionDelta: callback((payloadJson: string) => {
-          callbacksRef.current.onSelectionDelta?.(
-            parsePayload<SelectionDeltaEvent>(payloadJson)
-          );
+          const payload = parsePayload<SelectionDeltaEvent>(payloadJson);
+          const current = snapshotRef.current;
+          if (current.selection) {
+            const selectedKeys = new Set(current.selection.selectedKeys);
+            payload.removedKeys.forEach((key) => selectedKeys.delete(key));
+            payload.addedKeys.forEach((key) => selectedKeys.add(key));
+            snapshotRef.current = {
+              ...current,
+              selection: {
+                ...current.selection,
+                selectedKeys: [...selectedKeys],
+              },
+            };
+          }
+          callbacksRef.current.onSelectionDelta?.(payload);
         }),
         onReorder: callback((payloadJson: string) => {
           callbacksRef.current.onReorder?.(
@@ -279,9 +406,18 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
           );
         }),
         onVisibleRangeChanged: callback((payloadJson: string) => {
-          callbacksRef.current.onVisibleRangeChanged?.(
-            parsePayload<VisibleRangeChangedEvent>(payloadJson)
-          );
+          const payload = parsePayload<VisibleRangeChangedEvent>(payloadJson);
+          const previous = avatarRangeRef.current;
+          avatarRangeRef.current = {
+            first: payload.firstIndex,
+            last: payload.lastIndex,
+            direction:
+              previous && payload.firstIndex !== previous.first
+                ? Math.sign(payload.firstIndex - previous.first)
+                : previous?.direction ?? 1,
+          };
+          updateAvatarPrefetchRef.current();
+          callbacksRef.current.onVisibleRangeChanged?.(payload);
         }),
       }),
       []

package/src/NativeList.web.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import { View } from 'react-native';
 import type { NativeListProps, NativeListRef } from './NativeList.types';
-import type { NativeListSnapshot } from './models';
+import type { NativeListSnapshot, RowPatch } from './models';
 import {
   normalizeIndexScroll,
   normalizeKeyScroll,
@@ -69,7 +69,20 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
       [snapshot]
     );
     const snapshotRef = useRef(validatedSnapshot);
-    snapshotRef.current = validatedSnapshot;
+    const snapshotPropRef = useRef(validatedSnapshot);
+    // An imperative snapshot survives host mounting until the snapshot prop changes.
+    if (snapshotPropRef.current !== validatedSnapshot) {
+      snapshotPropRef.current = validatedSnapshot;
+      snapshotRef.current = validatedSnapshot;
+    }
+    // OneKey patch: React refs can be ready before the DOM engine is mounted.
+    const pendingPatchesRef = useRef<
+      | {
+          snapshot: NativeListSnapshot;
+          batches: Array<readonly RowPatch[]>;
+        }
+      | undefined
+    >(undefined);
     const appliedSnapshotRef = useRef<NativeListSnapshot | undefined>(
       undefined
     );
@@ -125,6 +138,10 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
       );
       engineRef.current = engine;
       appliedSnapshotRef.current = snapshotRef.current;
+      const pending = pendingPatchesRef.current;
+      pendingPatchesRef.current = undefined;
+      if (pending?.snapshot === snapshotRef.current)
+        pending.batches.forEach((patches) => engine.applyPatches(patches));
       const initial = initialScrollRef.current;
       if (initial && !didApplyInitialScroll.current) {
         didApplyInitialScroll.current = true;
@@ -166,6 +183,7 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
     useImperativeHandle(forwardedRef, () => ({
       applySnapshot(nextSnapshot) {
         const next = validateSnapshot(nextSnapshot);
+        pendingPatchesRef.current = undefined;
         snapshotRef.current = next;
         appliedSnapshotRef.current = next;
         engineRef.current?.applySnapshot(next);
@@ -173,7 +191,16 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
       applyPatches(patches) {
         if (patches.length > 0) {
           serializePatches(patches);
-          engineRef.current?.applyPatches(patches);
+          // engineRef.current?.applyPatches(patches);
+          if (engineRef.current) engineRef.current.applyPatches(patches);
+          else {
+            if (pendingPatchesRef.current?.snapshot !== snapshotRef.current)
+              pendingPatchesRef.current = {
+                snapshot: snapshotRef.current,
+                batches: [],
+              };
+            pendingPatchesRef.current.batches.push(patches);
+          }
         }
       },
       reconcileSelection(selectedKeys) {