@onekeyfe/react-native-native-list 6.7.0-alpha.401 → 6.7.0-alpha.403

package/src/web/NativeListWebEngine.ts

@@ -845,7 +845,7 @@ export const WEB_LIST_CSS = `
 .ok-native-list-trailing-button{appearance:none;box-sizing:border-box;flex:0 0 auto;padding:4px 10px;border:1px solid transparent;border-radius:9999px;background:var(--nl-button-bg,var(--nl-strong));color:var(--nl-button-text,var(--nl-primary));font:500 14px/20px var(--nl-font-medium);white-space:nowrap;cursor:pointer}.ok-native-list-trailing-button:hover:not(:disabled){background:var(--nl-button-hover,var(--nl-strong))}.ok-native-list-trailing-button:active:not(:disabled){background:var(--nl-button-pressed,var(--nl-pressed))}.ok-native-list-trailing-button:focus-visible{outline:2px solid var(--nl-button-focus,var(--nl-accent))}.ok-native-list-trailing-button:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon{box-sizing:border-box;flex:0 0 38px;width:38px;height:38px;margin:-7px;padding:6px;border:1px solid transparent;border-radius:9999px;color:var(--nl-icon-subdued);background:transparent}.ok-native-list-icon-button.ok-native-list-tertiary-icon:hover:not(:disabled){background:var(--nl-hover)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:active:not(:disabled){background:var(--nl-pressed)}.ok-native-list-icon-button.ok-native-list-tertiary-icon:disabled{opacity:.4;cursor:default}
 .ok-native-list-icon-button.ok-native-list-tertiary-icon:focus-visible:not(:disabled){outline:2px solid var(--nl-accent)}
-.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ok-native-list-identity-title-icon{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon);font-size:20px}.ok-native-list-identity-title-leading-icon{flex:0 0 16px;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:16px}.ok-native-list-identity-title-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ok-native-list-account-row .ok-native-list-visual,.ok-native-list-account-action-row .ok-native-list-visual{width:32px;height:32px;flex-basis:32px}.ok-native-list-account-row .ok-native-list-visual>img,.ok-native-list-account-row .ok-native-list-visual-main,.ok-native-list-account-action-row .ok-native-list-visual>img,.ok-native-list-account-action-row .ok-native-list-visual-main{width:32px;height:32px}.ok-native-list-account-row .ok-native-list-visual>.ok-native-list-visual-corner{width:20px;height:20px;padding:2px}.ok-native-list-account-action-row .ok-native-list-visual{border-radius:8px!important}.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-secondary);font-size:12px;line-height:16px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-item[data-native-list-selected="true"]>.ok-native-list-wallet-row .ok-native-list-title{color:var(--nl-primary)}.ok-native-list-account-row .ok-native-list-title{font-size:16px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}.ok-native-list-account-row .ok-native-list-secondary{font-size:14px;line-height:20px;font-weight:400;font-family:var(--nl-font-regular)}
 .ok-native-list-flex{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center}.ok-native-list-title{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--nl-font-semibold)}.ok-native-list-secondary{font-size:13px;line-height:18px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-tertiary{color:var(--nl-secondary)}.ok-native-list-info{color:var(--nl-info)}
 .ok-native-list-identity-row .ok-native-list-title,.ok-native-list-identity-row .ok-native-list-amounts>span:first-child{font-size:16px;line-height:20px}.ok-native-list-identity-row .ok-native-list-secondary{font-size:14px;line-height:20px}

package/src/web/templates/IdentityRowRenderer.ts

@@ -30,6 +30,79 @@ function toneColor(
   if (tone === 'secondary') return 'var(--nl-secondary)';
   return fallback === 'secondary' ? 'var(--nl-secondary)' : 'var(--nl-primary)';
 }
+// Hidden from sight, still read: the runs themselves are hidden from
+// assistive technology in favor of `title`.
+const VISUALLY_HIDDEN: Partial<CSSStyleDeclaration> = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  overflow: 'hidden',
+  clip: 'rect(0 0 0 0)',
+  whiteSpace: 'nowrap',
+};
+function appendTitleRuns(
+  document: Document,
+  target: HTMLElement,
+  row: IdentityRow
+): void {
+  const runs = createElement(
+    document,
+    'span',
+    'ok-native-list-identity-title-runs'
+  );
+  runs.setAttribute('aria-hidden', 'true');
+  Object.assign(runs.style, {
+    display: 'flex',
+    flex: '1 1 auto',
+    minWidth: '0',
+    maxWidth: '100%',
+    overflow: 'hidden',
+  });
+  row.titleSegments?.forEach((segment) => {
+    const run = createElement(
+      document,
+      'span',
+      'ok-native-list-identity-title-run',
+      segment.text
+    );
+    // Only the shrinking run gives up width; a cap is a share of the line.
+    Object.assign(run.style, {
+      flex: segment.shrink ? '0 1 auto' : '0 0 auto',
+      minWidth: segment.shrink ? '0' : '',
+      maxWidth:
+        segment.maxWidthRatio === undefined
+          ? ''
+          : `${segment.maxWidthRatio * 100}%`,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'pre',
+    });
+    if (segment.tone)
+      run.style.color =
+        segment.tone === 'secondary'
+          ? 'var(--nl-secondary)'
+          : 'var(--nl-primary)';
+    if (segment.fontWeight === 'medium') {
+      run.style.fontWeight = '500';
+      run.style.fontFamily = 'var(--nl-font-medium)';
+    } else if (segment.fontWeight === 'regular') {
+      run.style.fontWeight = '400';
+      run.style.fontFamily = 'var(--nl-font-regular)';
+    }
+    setData(run, 'tone', segment.tone);
+    runs.appendChild(run);
+  });
+  const spoken = createElement(
+    document,
+    'span',
+    'ok-native-list-identity-title-spoken',
+    row.title
+  );
+  Object.assign(spoken.style, VISUALLY_HIDDEN);
+  target.replaceChildren(runs, spoken);
+  target.style.display = 'flex';
+  target.style.minWidth = '0';
+}
 function appendAccessories(
   parent: HTMLElement,
   document: Document,
@@ -195,6 +268,18 @@ function createIdentityRow(
       fragment.appendChild(document.createTextNode(row.title.slice(offset)));
       textTarget.prepend(fragment);
     }
+    // The runs replace the plain title, except where `title` itself is
+    // highlighted or shown in the wallet sidebar.
+    const hasTitleRuns =
+      !!row.titleSegments?.length &&
+      presentation !== 'walletSidebar' &&
+      !row.titleMatch?.length;
+    if (hasTitleRuns) {
+      const textTarget =
+        titleElement.querySelector<HTMLElement>('[data-nl-slot="title"]') ??
+        titleElement;
+      appendTitleRuns(document, textTarget, row);
+    }
     if (row.subtitleSegments?.length) {
       column.querySelector('.ok-native-list-secondary')?.remove();
       const segments = createElement(
@@ -383,6 +468,58 @@ function createIdentityRow(
         badges.style.minWidth = '0';
       }
     }
+    if (hasTitleRuns) {
+      // The runs fill what the title line leaves, so a ratio is a share of
+      // that width and title accessories sit at the line's end.
+      const runs = titleElement.querySelector<HTMLElement>(
+        '.ok-native-list-identity-title-runs'
+      );
+      for (
+        let node = runs?.parentElement;
+        node && node !== titleElement;
+        node = node.parentElement
+      ) {
+        node.style.display = 'flex';
+        node.style.flex = '1 1 auto';
+        node.style.minWidth = '0';
+      }
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+    }
+    if (row.titleLeadingIcon && presentation !== 'walletSidebar') {
+      const descriptor = row.titleLeadingIcon;
+      if (titleElement.hasAttribute('data-nl-slot')) {
+        // Keep the glyph out of the title slot that text styles apply to.
+        const titleText = tagSlot(
+          createElement(document, 'span', 'ok-native-list-identity-title-text'),
+          'title'
+        );
+        while (titleElement.firstChild)
+          titleText.appendChild(titleElement.firstChild);
+        if (hasTitleRuns) {
+          titleText.style.display = 'flex';
+          titleText.style.minWidth = '0';
+        }
+        titleElement.removeAttribute('data-nl-slot');
+        titleElement.appendChild(titleText);
+      }
+      const icon = primitives.iconAction(
+        descriptor.name,
+        undefined,
+        undefined,
+        descriptor.tintColor
+      );
+      icon.className = 'ok-native-list-identity-title-leading-icon';
+      if (descriptor.accessibilityLabel)
+        icon.setAttribute('aria-label', descriptor.accessibilityLabel);
+      else icon.setAttribute('aria-hidden', 'true');
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      // 6px to the title, whatever gap the title line already has.
+      const lineGap = Number.parseFloat(titleElement.style.gap || '0') || 0;
+      icon.style.marginInlineEnd = `${Math.max(0, 6 - lineGap)}px`;
+      titleElement.prepend(icon);
+    }
     if (presentation === 'walletSidebar' && row.badges?.length) {
       const badges = createElement(
         document,
@@ -395,6 +532,7 @@ function createIdentityRow(
       column.appendChild(badges);
     }
     for (const key of ['title', 'subtitle'] as const) {
+      if (key === 'title' && hasTitleRuns) continue;
       const lines = row.style?.[key]?.lines ?? row[`${key}Lines`];
       if (lines !== undefined)
         column