@onekeyfe/react-native-native-list 6.7.0-alpha.424 → 6.7.0-alpha.428

package/src/validation.ts

@@ -1344,6 +1344,108 @@ function assertButtonGroup(
   });
 }
 
+const MAX_TITLE_SEGMENTS = 4;
+const HEX_COLOR_PATTERN = /^#[0-9a-f]{6}([0-9a-f]{2})?$/i;
+
+function assertTitleSegments(value: unknown, path: string): void {
+  if (
+    !Array.isArray(value) ||
+    value.length === 0 ||
+    value.length > MAX_TITLE_SEGMENTS
+  )
+    fail(path, `must hold 1...${MAX_TITLE_SEGMENTS} segments`);
+  let shrinking = 0;
+  value.forEach((item: unknown, index) => {
+    const segmentPath = `${path}[${index}]`;
+    const segment = protocolObject(item, segmentPath);
+    assertUnknownKeys(
+      segment,
+      ['text', 'tone', 'fontWeight', 'shrink', 'maxWidthRatio'],
+      segmentPath,
+      'title segment key'
+    );
+    const { text, tone, fontWeight, shrink, maxWidthRatio } = segment;
+    if (typeof text !== 'string' || !text.trim())
+      fail(`${segmentPath}.text`, 'must be non-blank');
+    assertText(text, `${segmentPath}.text`);
+    if (tone !== undefined && tone !== 'primary' && tone !== 'secondary')
+      fail(`${segmentPath}.tone`, 'must be primary or secondary');
+    if (
+      fontWeight !== undefined &&
+      fontWeight !== 'regular' &&
+      fontWeight !== 'medium'
+    )
+      fail(`${segmentPath}.fontWeight`, 'must be regular or medium');
+    if (shrink !== undefined && typeof shrink !== 'boolean')
+      fail(`${segmentPath}.shrink`, 'must be a boolean');
+    if (shrink) shrinking += 1;
+    if (
+      maxWidthRatio !== undefined &&
+      (typeof maxWidthRatio !== 'number' ||
+        !Number.isFinite(maxWidthRatio) ||
+        maxWidthRatio <= 0 ||
+        maxWidthRatio > 1)
+    )
+      fail(`${segmentPath}.maxWidthRatio`, 'must be finite within (0, 1]');
+  });
+  if (shrinking > 1) fail(path, 'allows at most one shrinking segment');
+}
+
+function assertTitleLeadingIcon(value: unknown, path: string): void {
+  const icon = protocolObject(value, path);
+  assertUnknownKeys(
+    icon,
+    ['name', 'tintColor', 'accessibilityLabel'],
+    path,
+    'title leading icon key'
+  );
+  const { name, tintColor, accessibilityLabel } = icon;
+  if (typeof name !== 'string' || !name.trim())
+    fail(`${path}.name`, 'must be non-blank');
+  if (
+    tintColor !== undefined &&
+    (typeof tintColor !== 'string' || !HEX_COLOR_PATTERN.test(tintColor))
+  )
+    fail(`${path}.tintColor`, 'must be #RRGGBB or #RRGGBBAA');
+  if (
+    accessibilityLabel !== undefined &&
+    typeof accessibilityLabel !== 'string'
+  )
+    fail(`${path}.accessibilityLabel`, 'must be a string');
+}
+
+function assertIdentityTitleRuns(
+  row: Pick<
+    IdentityRow,
+    'titleSegments' | 'titleLeadingIcon' | 'titleMatch' | 'presentation'
+  >,
+  path: string
+): void {
+  if (row.titleSegments !== undefined) {
+    assertTitleSegments(row.titleSegments, `${path}.titleSegments`);
+    // titleMatch ranges index `title`, which the runs replace on screen.
+    if (row.titleMatch?.length)
+      fail(`${path}.titleMatch`, 'cannot be combined with titleSegments');
+    if (row.presentation === 'walletSidebar')
+      fail(`${path}.titleSegments`, 'is not supported with walletSidebar');
+  }
+  if (row.titleLeadingIcon !== undefined) {
+    assertTitleLeadingIcon(row.titleLeadingIcon, `${path}.titleLeadingIcon`);
+    if (row.presentation === 'walletSidebar')
+      fail(`${path}.titleLeadingIcon`, 'is not supported with walletSidebar');
+  }
+}
+
+/** Production keeps decorative title runs only when they pass the rules. */
+function passesTitleRunRules(check: () => void): boolean {
+  try {
+    check();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
 function assertIdentityExtras(
   row: Pick<
     IdentityRow,
@@ -1834,6 +1936,7 @@ function assertRow(
           );
       });
       assertIdentityExtras(row, path);
+      assertIdentityTitleRuns(row, path);
       assertText(row.subtitle, `${path}.subtitle`);
       // OneKey patch: selector text segments truncate independently.
       row.subtitleSegments?.forEach((segment, segmentIndex) => {
@@ -2416,6 +2519,8 @@ const ROW_FIELDS: Readonly<Record<string, readonly string[]>> = {
     'titleIcon',
     'secondaryTitleIcon',
     'titleImage',
+    'titleSegments',
+    'titleLeadingIcon',
     'subtitle',
     'tertiary',
     'tertiaryTone',
@@ -2593,6 +2698,8 @@ const PATCH_FIELDS: Readonly<Record<string, readonly string[]>> = {
     'titleIcon',
     'secondaryTitleIcon',
     'titleImage',
+    'titleSegments',
+    'titleLeadingIcon',
     'subtitle',
     'tertiary',
     'tertiaryTone',
@@ -2724,6 +2831,7 @@ function protocolKey(value: unknown, path: string): void {
 const PROTOCOL_ARRAY_FIELDS = new Set([
   'columns',
   'titleSuffixes',
+  'titleSegments',
   'cells',
   'points',
   'images',
@@ -2965,7 +3073,10 @@ function assertRowProtocol(row: RowModel, path: string): void {
   if (row.height !== undefined && row.height < 0)
     fail(`${path}.height`, 'must be non-negative');
   if (row.type === 'identity') {
-    if (isDevelopment()) assertIdentityExtras(row, path);
+    if (isDevelopment()) {
+      assertIdentityExtras(row, path);
+      assertIdentityTitleRuns(row, path);
+    }
     if (row.titleSuffixes !== undefined && !Array.isArray(row.titleSuffixes))
       fail(`${path}.titleSuffixes`, 'must be an array');
     row.titleSuffixes?.forEach((suffix, index) => {
@@ -3560,6 +3671,14 @@ const NESTED_DECORATION_FIELDS: Readonly<Record<string, readonly string[]>> = {
 
 function sanitizeDecoration(value: unknown, field: string): unknown {
   if (value === undefined || value === null) return undefined;
+  if (field === 'titleSegments')
+    return passesTitleRunRules(() => assertTitleSegments(value, field))
+      ? value
+      : undefined;
+  if (field === 'titleLeadingIcon')
+    return passesTitleRunRules(() => assertTitleLeadingIcon(value, field))
+      ? value
+      : undefined;
   if (
     !Array.isArray(value) &&
     [

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(
@@ -238,6 +323,14 @@ function createIdentityRow(
       while (titleElement.firstChild && titleElement.firstChild !== badgeLine)
         titleText.appendChild(titleElement.firstChild);
       titleElement.prepend(titleText);
+      // The title slot tag moves with the text. `applyTextLayout` writes the
+      // single-line clamp (`display: block`, nowrap, ellipsis) onto the slot
+      // element; left on this container it would undo the flex row below and
+      // leave the inline-flex glyph baseline-aligned above the title (OK-66402).
+      if (titleElement.hasAttribute('data-nl-slot')) {
+        titleElement.removeAttribute('data-nl-slot');
+        tagSlot(titleText, 'title');
+      }
       const icons = [row.titleIcon, row.secondaryTitleIcon]
         .filter((icon): icon is NonNullable<typeof icon> => icon !== undefined)
         .map((descriptor) => {
@@ -383,6 +476,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 +540,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