@onekeyfe/react-native-native-list 6.7.0-alpha.398 → 6.7.0-alpha.400

package/lib/module/web/NativeListWebEngine.js

@@ -11,7 +11,7 @@ import { measureRailWidth } from "./templates/RailRowRenderer.js";
 import { rowRenderer, rowRendererKey, recycleRowBody } from "./templates/RowRendererRegistry.js";
 import { checkboxStateForKeys, checkboxStateForSection, isRowPressEnabled, isSelectableRow, reduceSelection, selectionStateFromSnapshot } from "../selection.js";
 import { calculateAlignedScrollOffset, resolveLocationIndex, scrollFailure, validateOffset } from "../scrolling.js";
-import { applyRowPatches, containNativeListInput, emptyNativeListSnapshot, validatePatches, validateSnapshot } from "../validation.js";
+import { applyValidatedRowPatches, containNativeListInput, emptyNativeListSnapshot, validateSnapshot } from "../validation.js";
 import { avatarPrefetchWindow } from "../avatarPrefetch.js";
 import { acquireNativeListAvatar, canonicalNativeListAvatarUri } from "./NativeListWebAvatarCache.js";
 const SECTION_INDEX_CONTENT_INSET = 16;
@@ -2007,20 +2007,14 @@ export class NativeListWebEngine {
     return this.snapshot;
   }
   applyPatches(patches) {
-    const accepted = containNativeListInput(() => {
-      const normalized = validatePatches(patches);
-      return {
-        patches: normalized,
-        snapshot: applyRowPatches(this.snapshot, normalized)
-      };
-    });
+    const accepted = containNativeListInput(() => applyValidatedRowPatches(this.snapshot, patches));
     if (!accepted || accepted.patches.length === 0) return;
     patches = accepted.patches;
     const next = accepted.snapshot;
     const selection = new Set(this.selectedKeys);
     patches.forEach(patch => {
       const selected = 'selected' in patch.changes ? patch.changes.selected : undefined;
-      if (selected === true) selection.add(patch.key);else if (selected === false) selection.delete(patch.key);
+      if (selected === true) selection.add(patch.key);else if (selected === false || selected === null) selection.delete(patch.key);
     });
     const tableValuesOnly = patches.every(patch => {
       const index = this.rows.findIndex(row => row.key === patch.key);

package/lib/module/web/templates/IdentityRowRenderer.js

@@ -100,7 +100,7 @@ function createIdentityRow(document, primitives, row) {
       });
       column.insertBefore(segments, titleElement.nextSibling);
     }
-    if (row.titleIcon || row.secondaryTitleIcon) {
+    if (row.titleIcon || row.secondaryTitleIcon || row.titleImage) {
       const badgeLine = titleElement.querySelector(':scope > .ok-native-list-badges');
       const titleText = createElement(document, 'span', 'ok-native-list-identity-title-text');
       while (titleElement.firstChild && titleElement.firstChild !== badgeLine) titleText.appendChild(titleElement.firstChild);
@@ -116,6 +116,38 @@ function createIdentityRow(document, primitives, row) {
         if (descriptor.accessibilityLabel) icon.setAttribute('aria-label', descriptor.accessibilityLabel);else icon.setAttribute('aria-hidden', 'true');
         return icon;
       });
+      if (row.titleImage) {
+        const descriptor = row.titleImage;
+        const holder = createElement(document, 'span', 'ok-native-list-identity-title-image');
+        Object.assign(holder.style, {
+          flex: `0 0 ${descriptor.image.width}px`,
+          width: `${descriptor.image.width}px`,
+          height: `${descriptor.image.height}px`,
+          borderRadius: '50%',
+          overflow: 'hidden'
+        });
+        const image = primitives.thumbnail(descriptor.image);
+        if (image) {
+          Object.assign(image.style, {
+            width: '100%',
+            height: '100%',
+            borderRadius: 'inherit',
+            objectFit: descriptor.image.contentFit === 'center' ? 'none' : descriptor.image.contentFit ?? 'cover'
+          });
+          image.setAttribute('alt', '');
+          holder.appendChild(image);
+        }
+        if (descriptor.hoverActionKey) {
+          setData(holder, 'nativeListHoverAction', descriptor.hoverActionKey);
+          setData(holder, 'nativeListIconHelp', true);
+          markActionAnchorSource(holder, 'leadingAction');
+        }
+        if (descriptor.accessibilityLabel) {
+          holder.setAttribute('role', 'img');
+          holder.setAttribute('aria-label', descriptor.accessibilityLabel);
+        } else holder.setAttribute('aria-hidden', 'true');
+        icons.push(holder);
+      }
       titleText.after(...icons);
       titleElement.style.display = 'flex';
       titleElement.style.alignItems = 'center';
@@ -144,7 +176,7 @@ function createIdentityRow(document, primitives, row) {
         const label = createElement(document, 'span', 'ok-native-list-identity-title-suffix', suffix.text);
         label.style.flex = '0 1 auto';
         label.style.minWidth = '0';
-        label.style.marginInlineStart = row.titleIcon || row.secondaryTitleIcon ? '4px' : '8px';
+        label.style.marginInlineStart = row.titleIcon || row.secondaryTitleIcon || row.titleImage ? '4px' : '8px';
         label.style.maxWidth = suffix.maxWidth === undefined ? '' : `${suffix.maxWidth}px`;
         label.style.overflow = 'hidden';
         label.style.textOverflow = 'ellipsis';
@@ -157,7 +189,7 @@ function createIdentityRow(document, primitives, row) {
         titleElement.insertBefore(label, badges);
       });
     }
-    if (row.badges?.length && !row.titleIcon && !row.secondaryTitleIcon) {
+    if (row.badges?.length && !row.titleIcon && !row.secondaryTitleIcon && !row.titleImage) {
       const titleText = titleElement.querySelector(':scope > [data-nl-slot="title"]');
       const badges = titleElement.querySelector(':scope > .ok-native-list-badges');
       titleElement.style.display = 'flex';
@@ -267,8 +299,22 @@ function bind(body, row, primitives) {
   const v = views.get(body);
   v.primitives = primitives;
   let used = false;
+  let usedTitleImage = false;
   const next = createIdentityRow(body.ownerDocument, {
     ...primitives,
+    thumbnail: source => {
+      usedTitleImage = true;
+      const key = JSON.stringify([row.key, source]);
+      if (v.titleImage?.key !== key) {
+        if (v.titleImage) primitives.dispose(v.titleImage.node);
+        const node = primitives.thumbnail(source);
+        v.titleImage = node ? {
+          key,
+          node
+        } : undefined;
+      }
+      return v.titleImage?.node;
+    },
     visual: (source, presentation) => {
       used = true;
       const key = JSON.stringify([row.key, source, presentation]);
@@ -293,6 +339,10 @@ function bind(body, row, primitives) {
     primitives.dispose(v.visual.node);
     v.visual = undefined;
   }
+  if (!usedTitleImage && v.titleImage) {
+    primitives.dispose(v.titleImage.node);
+    v.titleImage = undefined;
+  }
   body.replaceChildren(...Array.from(next.childNodes));
   body.className = next.className;
   body.style.cssText = next.style.cssText;
@@ -357,7 +407,11 @@ function create(document, row, primitives) {
 function recycle(body) {
   const v = views.get(body);
   if (v?.visual) v.primitives.dispose(v.visual.node);
-  if (v) v.visual = undefined;
+  if (v?.titleImage) v.primitives.dispose(v.titleImage.node);
+  if (v) {
+    v.visual = undefined;
+    v.titleImage = undefined;
+  }
   body.replaceChildren();
 }
 export const identityRowRenderer = {

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

@@ -428,6 +428,13 @@ export type IdentityRow = RowBase & Readonly<{
     }>;
     /** Web-only additional help icon after titleIcon. */
     secondaryTitleIcon?: IdentityRow['titleIcon'];
+    /** Circular image after title icons; image dimensions must be square, 1...40. */
+    titleImage?: Readonly<{
+        image: ImageSource;
+        accessibilityLabel?: string;
+        /** Web-only help anchor; the consumer owns tooltip content. */
+        hoverActionKey?: string;
+    }>;
     subtitle?: string;
     tertiary?: string;
     tertiaryTone?: 'secondary' | 'info';
@@ -864,57 +871,61 @@ export type NativeListSnapshot = Readonly<{
     listStyle?: NativeListListStyle;
 }>;
 type CommonPatchFields = 'revision' | 'disabled' | 'selected' | 'separator' | 'height' | 'heightRounding' | 'opacity' | 'pressDisabled' | 'accessibilityLabel' | 'style';
+/** Null removes optional fields; undefined leaves the existing value unchanged. */
+export type PatchClearableChanges<Row, Keys extends keyof Row> = Readonly<{
+    [K in Keys]?: undefined extends Row[K] ? Row[K] | null : Row[K];
+}>;
 export type RowPatch = Readonly<{
     type: 'identity';
     key: string;
-    changes: Partial<Pick<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>>;
+    changes: PatchClearableChanges<IdentityRow, CommonPatchFields | 'title' | 'titleSuffixes' | 'titleIcon' | 'secondaryTitleIcon' | 'titleImage' | 'subtitle' | 'subtitleLines' | 'contentHeight' | 'longPressActionKey' | 'tertiary' | 'tertiaryTone' | 'badges' | 'trailing' | 'leading' | 'leadingAction' | 'titleMatch' | 'titleActionKey' | 'titleActionOnHover' | 'subtitleSegments'>;
 }> | Readonly<{
     type: 'rail';
     key: string;
-    changes: Partial<Pick<RailRow, CommonPatchFields | 'title' | 'status' | 'badge' | 'visual'>>;
+    changes: PatchClearableChanges<RailRow, CommonPatchFields | 'title' | 'status' | 'badge' | 'visual'>;
 }> | Readonly<{
     type: 'activity';
     key: string;
-    changes: Partial<Pick<ActivityRow, CommonPatchFields | 'title' | 'description' | 'status' | 'amounts' | 'badges' | 'presentation' | 'fee' | 'descriptionActionKey' | 'primaryAmount' | 'secondaryAmount' | 'leading' | 'hideLeading' | 'secondaryLeading' | 'footerActions'>>;
+    changes: PatchClearableChanges<ActivityRow, CommonPatchFields | 'title' | 'description' | 'status' | 'amounts' | 'badges' | 'presentation' | 'fee' | 'descriptionActionKey' | 'primaryAmount' | 'secondaryAmount' | 'leading' | 'hideLeading' | 'secondaryLeading' | 'footerActions'>;
 }> | Readonly<{
     type: 'message';
     key: string;
-    changes: Partial<Pick<MessageRow, CommonPatchFields | 'unread' | 'title' | 'body' | 'bodyLines' | 'presentation' | 'time' | 'thumbnail'>>;
+    changes: PatchClearableChanges<MessageRow, CommonPatchFields | 'unread' | 'title' | 'body' | 'bodyLines' | 'presentation' | 'time' | 'thumbnail'>;
 }> | Readonly<{
     type: 'dataRow';
     key: string;
-    changes: Partial<Pick<DataRow, CommonPatchFields | 'leading' | 'columns' | 'trailing' | 'checkbox' | 'index' | 'badge' | 'badges' | 'favorite' | 'favoriteActive'>>;
+    changes: PatchClearableChanges<DataRow, CommonPatchFields | 'leading' | 'columns' | 'trailing' | 'checkbox' | 'index' | 'badge' | 'badges' | 'favorite' | 'favoriteActive'>;
 }> | Readonly<{
     type: 'market';
     key: string;
-    changes: Partial<Pick<MarketRow, CommonPatchFields | 'leadingAction' | 'leading' | 'title' | 'subtitle' | 'subtitleSegments' | 'price' | 'priceSegments' | 'change' | 'badges' | 'pressActionKey' | 'pressInActionKey' | 'longPressActionKey' | 'diagnostics' | 'webTable' | 'style'>>;
+    changes: PatchClearableChanges<MarketRow, CommonPatchFields | 'leadingAction' | 'leading' | 'title' | 'subtitle' | 'subtitleSegments' | 'price' | 'priceSegments' | 'change' | 'badges' | 'pressActionKey' | 'pressInActionKey' | 'longPressActionKey' | 'diagnostics' | 'webTable' | 'style'>;
 }> | Readonly<{
     type: 'mediaTile';
     key: string;
-    changes: Partial<Pick<MediaTileRow, CommonPatchFields | 'image' | 'imageState' | 'media' | 'networkImage' | 'title' | 'subtitle' | 'badge' | 'closeActionKey'>>;
+    changes: PatchClearableChanges<MediaTileRow, CommonPatchFields | 'image' | 'imageState' | 'media' | 'networkImage' | 'title' | 'subtitle' | 'badge' | 'closeActionKey'>;
 }> | Readonly<{
     type: 'metricCard';
     key: string;
-    changes: Partial<Pick<MetricCardRow, CommonPatchFields | 'variant' | 'title' | 'value' | 'subtitle' | 'trend' | 'trendTone' | 'visual' | 'badge' | 'metrics' | 'progress'>>;
+    changes: PatchClearableChanges<MetricCardRow, CommonPatchFields | 'variant' | 'title' | 'value' | 'subtitle' | 'trend' | 'trendTone' | 'visual' | 'badge' | 'metrics' | 'progress'>;
 }> | Readonly<{
     type: 'sectionHeader';
     key: string;
-    changes: Partial<Pick<SectionHeaderRow, CommonPatchFields | 'variant' | 'titleLoading' | 'title' | 'subtitle' | 'value' | 'valueHelp' | 'leadingBadge' | 'valueActionKey' | 'titleActionKey' | 'titleActionOnHover' | 'titleIcon' | 'valueIcon' | 'checkbox'>>;
+    changes: PatchClearableChanges<SectionHeaderRow, CommonPatchFields | 'variant' | 'titleLoading' | 'title' | 'subtitle' | 'value' | 'valueHelp' | 'leadingBadge' | 'valueActionKey' | 'titleActionKey' | 'titleActionOnHover' | 'titleIcon' | 'valueIcon' | 'checkbox'>;
 }> | Readonly<{
     type: 'action';
     key: string;
-    changes: Partial<Pick<ActionRow, CommonPatchFields | 'title' | 'tone' | 'icon' | 'checkbox' | 'trailing'>>;
+    changes: PatchClearableChanges<ActionRow, CommonPatchFields | 'title' | 'tone' | 'icon' | 'checkbox' | 'trailing'>;
 }> | Readonly<{
     type: 'buttonGroup';
     key: string;
-    changes: Partial<Pick<ButtonGroupRow, CommonPatchFields | 'buttons'>>;
+    changes: PatchClearableChanges<ButtonGroupRow, CommonPatchFields | 'buttons'>;
 }> | Readonly<{
     type: 'system';
     key: string;
     changes: Readonly<{
-        revision?: number;
-        disabled?: boolean;
-        message?: string;
+        revision?: number | null;
+        disabled?: boolean | null;
+        message?: string | null;
     }>;
 }>;
 export type NativeListActionSource = 'row' | 'marketBadge' | 'leadingAction' | 'trailingAccessory' | 'footerAction' | 'buttonGroup' | 'description' | 'mediaClose';

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

@@ -10,13 +10,18 @@ export declare function ownValidatedNativeSnapshot(snapshot: NativeListSnapshot)
 export declare function validatePatches(patches: readonly RowPatch[]): readonly RowPatch[];
 /** Plan value-only patches; callers own valid immutable snapshots and commit state. */
 export declare function planNativeListPatches(previous: NativeListSnapshot, next: NativeListSnapshot): readonly RowPatch[] | undefined;
-export declare function applyRowPatches(snapshot: NativeListSnapshot, patches: readonly RowPatch[]): NativeListSnapshot;
-/** Native wrapper only: preserve full public validation for unsupported patches. */
+/** One canonical batch owns both accepted rows and the native wire payload. */
+export declare function applyValidatedRowPatches(snapshot: NativeListSnapshot, patches: readonly RowPatch[]): {
+    patches: readonly RowPatch[];
+    snapshot: NativeListSnapshot;
+    json: string;
+};
 export declare function applyOwnedNativePatches(snapshot: NativeListSnapshot, patches: readonly RowPatch[]): {
     patches: readonly RowPatch[];
     snapshot: NativeListSnapshot;
     json: string;
 };
+export declare function applyRowPatches(snapshot: NativeListSnapshot, patches: readonly RowPatch[]): NativeListSnapshot;
 export declare function serializeSnapshot(snapshot: NativeListSnapshot): string;
 export declare function serializePatches(patches: readonly RowPatch[]): string;
 //# sourceMappingURL=validation.d.ts.map

package/package.json

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

package/src/NativeList.web.tsx

@@ -25,7 +25,6 @@ import {
   applyRowPatches,
   containNativeListInput,
   emptyNativeListSnapshot,
-  validatePatches,
   validateSnapshot,
 } from './validation';
 import {
@@ -454,20 +453,17 @@ export const NativeList = forwardRef<NativeListRef, NativeListProps>(
         synchronizeSlots(next);
       },
       applyPatches(patches) {
-        const accepted = containNativeListInput(() => validatePatches(patches));
-        if (accepted && accepted.length > 0) {
-          const engine = engineRef.current;
-          if (engine) {
-            engine.applyPatches(accepted);
-            snapshotRef.current = engine.currentSnapshot();
-          } else {
-            const next = containNativeListInput(() =>
-              applyRowPatches(snapshotRef.current, accepted)
-            );
-            if (next) snapshotRef.current = next;
-          }
-          acceptedSnapshotRef.current = snapshotRef.current;
+        const engine = engineRef.current;
+        if (engine) {
+          engine.applyPatches(patches);
+          snapshotRef.current = engine.currentSnapshot();
+        } else {
+          const next = containNativeListInput(() =>
+            applyRowPatches(snapshotRef.current, patches)
+          );
+          if (next) snapshotRef.current = next;
         }
+        acceptedSnapshotRef.current = snapshotRef.current;
       },
       reconcileSelection(selectedKeys) {
         engineRef.current?.reconcileSelection(selectedKeys);