@onekeyfe/react-native-native-list 6.7.0-alpha.397 → 6.7.0-alpha.399

package/src/web/NativeListWebEngine.ts

@@ -61,10 +61,9 @@ import {
   type NormalizedPositionScroll,
 } from '../scrolling';
 import {
-  applyRowPatches,
+  applyValidatedRowPatches,
   containNativeListInput,
   emptyNativeListSnapshot,
-  validatePatches,
   validateSnapshot,
 } from '../validation';
 import { avatarPrefetchWindow } from '../avatarPrefetch';
@@ -1206,6 +1205,62 @@ const selectorIcons: Readonly<
       },
     ],
   },
+  DotVerSolid: {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M14 18v4h-4v-4zm0-4h-4v-4h4zm0-8h-4V2h4z',
+        fill: 'currentColor',
+        fillRule: 'nonzero',
+        opacity: 1,
+      },
+    ],
+  },
+  Document2Outline: {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M12 16H8v-2h4zm4-4H8v-2h8zm0-4H8V6h8z',
+        fill: 'currentColor',
+        fillRule: 'nonzero',
+        opacity: 1,
+      },
+      {
+        d: 'M20 22H4V2h16zM6 20h12V4H6z',
+        fill: 'currentColor',
+        fillRule: 'evenodd',
+        opacity: 1,
+      },
+    ],
+  },
+  WalletOutline: {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M15.5 13.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5',
+        fill: 'currentColor',
+        fillRule: 'nonzero',
+        opacity: 1,
+      },
+      {
+        d: 'M17 8h4v13H7a4 4 0 0 1-4-4V6.5A3.5 3.5 0 0 1 6.5 3H17zM5 17a2 2 0 0 0 2 2h12v-9H6.5c-.537 0-1.045-.12-1.5-.337zM6.5 5a1.5 1.5 0 1 0 0 3H15V5z',
+        fill: 'currentColor',
+        fillRule: 'evenodd',
+        opacity: 1,
+      },
+    ],
+  },
+  PlusLargeOutline: {
+    viewBox: '0 0 24 24',
+    paths: [
+      {
+        d: 'M13 11h8v2h-8v8h-2v-8H3v-2h8V3h2z',
+        fill: 'currentColor',
+        fillRule: 'nonzero',
+        opacity: 1,
+      },
+    ],
+  },
   TicketOutline: {
     viewBox: '0 0 24 24',
     paths: [
@@ -3143,13 +3198,9 @@ export class NativeListWebEngine {
   }
 
   applyPatches(patches: readonly RowPatch[]) {
-    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;
@@ -3158,7 +3209,8 @@ export class NativeListWebEngine {
       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);
+      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/src/web/templates/IdentityRowRenderer.ts

@@ -226,7 +226,7 @@ function createIdentityRow(
       });
       column.insertBefore(segments, titleElement.nextSibling);
     }
-    if (row.titleIcon || row.secondaryTitleIcon) {
+    if (row.titleIcon || row.secondaryTitleIcon || row.titleImage) {
       const badgeLine = titleElement.querySelector<HTMLElement>(
         ':scope > .ok-native-list-badges'
       );
@@ -258,6 +258,45 @@ function createIdentityRow(
           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';
@@ -300,7 +339,9 @@ function createIdentityRow(
         label.style.flex = '0 1 auto';
         label.style.minWidth = '0';
         label.style.marginInlineStart =
-          row.titleIcon || row.secondaryTitleIcon ? '4px' : '8px';
+          row.titleIcon || row.secondaryTitleIcon || row.titleImage
+            ? '4px'
+            : '8px';
         label.style.maxWidth =
           suffix.maxWidth === undefined ? '' : `${suffix.maxWidth}px`;
         label.style.overflow = 'hidden';
@@ -317,7 +358,12 @@ function createIdentityRow(
         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<HTMLElement>(
         ':scope > [data-nl-slot="title"]'
       );
@@ -513,6 +559,7 @@ type Views = {
     node: HTMLElement;
     defaults: RowVisualStyle;
   };
+  titleImage?: { key: string; node: HTMLElement };
   primitives: RowPrimitives;
 };
 const views = new WeakMap<HTMLElement, Views>();
@@ -520,10 +567,21 @@ function bind(body: HTMLElement, row: IdentityRow, primitives: RowPrimitives) {
   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]);
@@ -550,6 +608,10 @@ function bind(body: HTMLElement, row: IdentityRow, primitives: RowPrimitives) {
     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;
@@ -640,7 +702,11 @@ function create(
 function recycle(body: HTMLElement) {
   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 = {