@onekeyfe/react-native-native-list 3.0.157-alpha.248 → 3.0.157-alpha.250

package/src/web/templates/RailRowRenderer.ts

@@ -0,0 +1,136 @@
+import type { NativeListTextStyle, RailRow } from '../../models';
+import type { RowPrimitives } from './RowVisual';
+import { RowVisualStyle } from './RowVisual';
+
+export function resolveRailRow(row: RailRow) {
+  const style = row.style;
+  return {
+    horizontalPadding: style?.horizontalPadding ?? 4,
+    verticalPadding: style?.verticalPadding ?? 4,
+    leadingGap: style?.leadingGap ?? 6,
+    badgeGap: style?.titleBadgeGap ?? 6,
+    trailingGap: style?.trailingGap ?? 6,
+    width: style?.image?.width ?? 20,
+    height: style?.image?.height ?? 20,
+    title: row.title,
+    badge: row.badge?.text ?? '',
+    status: row.status === 'none' ? '' : row.status ?? '',
+  };
+}
+
+type Views = {
+  title: HTMLElement;
+  badge: HTMLElement;
+  status: HTMLElement;
+  visual?: HTMLElement;
+  visualStyle?: RowVisualStyle;
+  identity: string;
+  primitives: RowPrimitives;
+};
+const views = new WeakMap<HTMLElement, Views>();
+
+function bind(body: HTMLElement, row: RailRow, primitives: RowPrimitives) {
+  const v = views.get(body)!;
+  v.primitives = primitives;
+  const r = resolveRailRow(row);
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  body.style.padding = `${r.verticalPadding}px ${r.horizontalPadding}px`;
+  const text = (
+    view: HTMLElement,
+    value: string,
+    style?: NativeListTextStyle
+  ) => {
+    view.style.cssText = '';
+    view.textContent = value;
+    if (style) primitives.textStyle(view, style);
+    if (value) body.appendChild(view);
+    else view.remove();
+  };
+  text(v.title, r.title, row.style?.title);
+  text(v.badge, r.badge, row.style?.badge);
+  if (row.badge?.tone) v.badge.dataset.tone = row.badge.tone;
+  else delete v.badge.dataset.tone;
+  v.badge.style.marginInlineStart = `${r.badgeGap - 6}px`;
+  text(v.status, r.status, row.style?.status);
+  v.status.style.marginInlineStart = `${r.trailingGap - 6}px`;
+  const identity = JSON.stringify([row.key, row.visual]);
+  if (identity !== v.identity) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.visual);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    v.identity = identity;
+  }
+  if (v.visual) body.insertBefore(v.visual, body.firstChild);
+  v.visualStyle?.apply(row.style?.image, r.width, r.height, r.leadingGap - 6);
+}
+function create(document: Document, row: RailRow, primitives: RowPrimitives) {
+  const span = (className: string, slot: string) => {
+    const view = document.createElement('span');
+    view.className = className;
+    view.dataset.nlSlot = slot;
+    return view;
+  };
+  const body = document.createElement('div');
+  body.className = 'ok-native-list-row ok-native-list-rail';
+  body.dataset.nlRenderer = 'rail';
+  views.set(body, {
+    title: span('ok-native-list-rail-title', 'title'),
+    badge: span('ok-native-list-badge', 'badge'),
+    status: span('ok-native-list-secondary', 'status'),
+    identity: '',
+    primitives,
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body: HTMLElement) {
+  const v = views.get(body);
+  if (!v) return;
+  if (v.visual) {
+    v.primitives.dispose(v.visual);
+    v.visual.remove();
+  }
+  v.visual = undefined;
+  v.visualStyle = undefined;
+  v.identity = '';
+}
+export function measureRailWidth(row: RailRow) {
+  const r = resolveRailRow(row);
+  const width = (
+    value: string,
+    style: NativeListTextStyle | undefined,
+    size: number
+  ) => value.length * 7 * ((style?.fontSize ?? size) / size);
+  // Retain the historical 50px allowance and viewport limits at default values.
+  return Math.min(
+    288,
+    Math.max(
+      72,
+      50 +
+        width(r.title, row.style?.title, 12) +
+        width(r.badge, row.style?.badge, 11) +
+        width(r.status, row.style?.status, 13) +
+        (r.horizontalPadding - 4) * 2 +
+        r.width -
+        20 +
+        r.leadingGap -
+        6 +
+        (r.badge ? r.badgeGap - 6 : 0) +
+        (r.status ? r.trailingGap - 6 : 0)
+    )
+  );
+}
+export const railRowRenderer = {
+  key: 'rail' as const,
+  create,
+  bind,
+  recycle,
+  measure: (_row: RailRow, _width: number) => 40,
+  measureRendered: (_body: HTMLElement, _row: RailRow): number | undefined =>
+    undefined,
+};

package/src/web/templates/RowContainerStyle.ts

@@ -0,0 +1,131 @@
+import type { RowModel } from '../../models';
+
+type Write = {
+  element: HTMLElement;
+  property: string;
+  previous: string;
+  previousPriority: string;
+  written: string;
+};
+
+// Inline properties written by the container pass, per row body. Renderers only
+// reset the nodes they own, so the container undoes its own writes on rebind.
+const writesByBody = new WeakMap<HTMLElement, Write[]>();
+
+function restoreContainerWrites(body: HTMLElement, force: boolean) {
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const writes = writesByBody.get(body);
+  if (!writes) return;
+  writesByBody.delete(body);
+  // Undo in reverse so repeated writes restore the oldest value.
+  for (let index = writes.length - 1; index >= 0; index -= 1) {
+    const write = writes[index]!;
+    const { style } = write.element;
+    // Fallback path only (no reset before the renderer bind): a renderer that
+    // already rewrote this property owns its current value. It cannot tell a
+    // renderer rewrite of the same value apart, which is why the engine and
+    // WalletGroup reset before binding instead.
+    if (!force && style.getPropertyValue(write.property) !== write.written)
+      continue;
+    style.removeProperty(write.property);
+    if (write.previous)
+      style.setProperty(write.property, write.previous, write.previousPriority);
+  }
+}
+
+/**
+ * Undo the previous container pass before a renderer rebinds `body`, so the
+ * renderer always writes over its own baseline and the next
+ * `applyRowContainerStyle` records that fresh value as the value to restore.
+ */
+export function resetRowContainerStyle(body: HTMLElement): void {
+  restoreContainerWrites(body, true);
+}
+
+function writeProperty(
+  body: HTMLElement,
+  element: HTMLElement,
+  property: string,
+  value: string,
+  priority = ''
+) {
+  const { style } = element;
+  const write: Write = {
+    element,
+    property,
+    previous: style.getPropertyValue(property),
+    previousPriority: style.getPropertyPriority(property),
+    written: '',
+  };
+  style.setProperty(property, value, priority);
+  write.written = style.getPropertyValue(property);
+  let writes = writesByBody.get(body);
+  if (!writes) writesByBody.set(body, (writes = []));
+  writes.push(write);
+}
+
+export function applyRowContainerStyle(body: HTMLElement, row: RowModel): void {
+  restoreContainerWrites(body, false);
+  const set = (element: HTMLElement, property: string, value: string) =>
+    writeProperty(body, element, property, value);
+  if (
+    row.type === 'system' &&
+    row.variant === 'warning' &&
+    (row.style?.container?.height ?? row.height) !== undefined
+  )
+    set(body, 'height', '100%');
+  const container = row.style?.container;
+  if (!container) return;
+  if (container.backgroundColor !== undefined) {
+    set(body, '--nl-container-background', container.backgroundColor);
+    body.setAttribute('data-nl-container-background', 'true');
+    // A CSS rule allows existing hover/press feedback to override the resting fill.
+    // The template/engine re-applies its own fill on every bind, so this
+    // removal is not tracked for restoration.
+    body.style.removeProperty('background');
+    body.style.removeProperty('background-color');
+  }
+  if (container.cornerRadius !== undefined)
+    set(body, 'border-radius', `${container.cornerRadius}px`);
+  if (container.borderWidth !== undefined) {
+    // Paint above member backgrounds without changing the content box or hit targets.
+    body.setAttribute('data-nl-container-border', 'true');
+    set(body, '--nl-container-border-width', `${container.borderWidth}px`);
+    set(
+      body,
+      '--nl-container-border-color',
+      container.borderColor ?? 'transparent'
+    );
+    set(body, 'border-color', 'transparent');
+  } else if (container.borderColor !== undefined)
+    set(body, 'border-color', container.borderColor);
+  if (container.contentVerticalAlignment !== undefined) {
+    const alignment = {
+      top: 'flex-start',
+      center: 'center',
+      bottom: 'flex-end',
+    }[container.contentVerticalAlignment];
+    const vertical =
+      row.type === 'walletGroup' ||
+      row.type === 'mediaTile' ||
+      row.type === 'metricCard' ||
+      (row.type === 'identity' && row.presentation === 'walletSidebar') ||
+      (row.type === 'system' && row.variant === 'warning');
+    if (vertical) {
+      set(body, 'display', 'flex');
+      set(body, 'flex-direction', 'column');
+      if (row.type === 'mediaTile') set(body, 'gap', '0px');
+      set(body, 'justify-content', alignment);
+      Array.from(body.children).forEach((child) => {
+        set(child as HTMLElement, 'flex-shrink', '0');
+      });
+    } else {
+      set(body, 'align-items', alignment);
+      // Timestamp/accessory defaults may have their own align-self.
+      Array.from(body.children).forEach((child) => {
+        set(child as HTMLElement, 'align-self', alignment);
+      });
+    }
+  }
+}

package/src/web/templates/RowElements.ts

@@ -0,0 +1,160 @@
+import type { NativeListActionSource } from '../../models';
+export function createElement(
+  document: Document,
+  tag: string,
+  className?: string,
+  text?: string
+): HTMLElement {
+  const element = document.createElement(tag);
+  if (className) element.className = className;
+  if (text !== undefined) element.textContent = text;
+  return element;
+}
+
+export function setData(
+  element: HTMLElement,
+  name: string,
+  value: string | number | boolean | undefined
+) {
+  if (value === undefined) delete element.dataset[name];
+  else element.dataset[name] = String(value);
+}
+
+export function tagSlot<T extends HTMLElement>(element: T, slot: string): T {
+  element.dataset.nlSlot = slot;
+  return element;
+}
+
+export function markActionAnchorSource(
+  element: HTMLElement,
+  source: NativeListActionSource,
+  slot?: number
+) {
+  setData(element, 'nativeListAnchorSource', source);
+  if (slot !== undefined) setData(element, 'nativeListAnchorSlot', slot);
+}
+
+export function createTextColumn(
+  document: Document,
+  title: string,
+  subtitle?: string,
+  tertiary?: string,
+  tertiaryTone?: 'secondary' | 'info',
+  badges?: readonly Readonly<{ text: string; tone?: string }>[],
+  slots: Readonly<{ title: string; subtitle: string; tertiary: string }> = {
+    title: 'title',
+    subtitle: 'subtitle',
+    tertiary: 'tertiary',
+  }
+): HTMLElement {
+  const column = createElement(document, 'span', 'ok-native-list-flex');
+  const titleLine = tagSlot(
+    createElement(document, 'span', 'ok-native-list-title', title),
+    slots.title
+  );
+  if (badges?.length) {
+    titleLine.removeAttribute('data-nl-slot');
+    titleLine.replaceChildren(
+      tagSlot(createElement(document, 'span', undefined, title), slots.title)
+    );
+    const badgeLine = createElement(document, 'span', 'ok-native-list-badges');
+    badges.forEach((badge) =>
+      badgeLine.appendChild(createBadge(document, badge))
+    );
+    titleLine.appendChild(badgeLine);
+  }
+  column.appendChild(titleLine);
+  if (subtitle)
+    column.appendChild(
+      tagSlot(
+        createElement(document, 'span', 'ok-native-list-secondary', subtitle),
+        slots.subtitle
+      )
+    );
+  if (tertiary) {
+    const element = tagSlot(
+      createElement(
+        document,
+        'span',
+        tertiaryTone === 'info'
+          ? 'ok-native-list-secondary ok-native-list-info'
+          : 'ok-native-list-secondary ok-native-list-tertiary',
+        tertiary
+      ),
+      slots.tertiary
+    );
+    column.appendChild(element);
+  }
+  return column;
+}
+export function createBadge(
+  document: Document,
+  badge: Readonly<{ text: string; tone?: string }>
+): HTMLElement {
+  const element = tagSlot(
+    createElement(document, 'span', 'ok-native-list-badge', badge.text),
+    'badge'
+  );
+  setData(element, 'tone', badge.tone);
+  return element;
+}
+
+// Selector digits retain their font family, including explicit button fonts.
+export function applyTabularNumbers(body: HTMLElement): void {
+  body.style.fontVariantNumeric = 'tabular-nums';
+  body.querySelectorAll<HTMLElement>('span,button').forEach((text) => {
+    text.style.fontVariantNumeric = 'tabular-nums';
+  });
+}
+
+/**
+ * Selector presentations use their explicit-height geometry whenever the row
+ * has a resolved explicit height: the legacy `row.height` or the preferred
+ * `style.container.height`.
+ */
+export function hasExplicitRowHeight(
+  row: Readonly<{
+    height?: number;
+    style?: Readonly<{ container?: Readonly<{ height?: number }> }>;
+  }>
+): boolean {
+  return (row.style?.container?.height ?? row.height) !== undefined;
+}
+
+/** Legacy `size` preset adjustment, applied by templates that opt in. */
+export function rowSizeModifier(size: string | undefined): number {
+  if (size === 'small') return -8;
+  if (size === 'large') return 12;
+  return 0;
+}
+
+// Async image reveal state is owned by the image lifecycle, not by template
+// defaults: a reused image that already fired `load` never fires it again.
+const isImageLoadingNode = (node: HTMLElement) =>
+  node.tagName === 'IMG' ||
+  node.classList.contains('ok-native-list-selector-image-background');
+
+/** Captures factory inline styles of a template subtree. */
+export function captureInlineStyles(
+  root: HTMLElement
+): Map<HTMLElement, string> {
+  return new Map(
+    [root, ...root.querySelectorAll<HTMLElement>('*')].map((node) => [
+      node,
+      node.style.cssText,
+    ])
+  );
+}
+
+/** Restores captured factory styles while keeping image loading visibility. */
+export function restoreInlineStyles(defaults: Map<HTMLElement, string>) {
+  defaults.forEach((css, node) => {
+    if (!isImageLoadingNode(node)) {
+      node.style.cssText = css;
+      return;
+    }
+    const opacity = node.style.opacity;
+    node.style.cssText = css;
+    node.style.opacity = opacity;
+  });
+}

package/src/web/templates/RowRendererRegistry.ts

@@ -0,0 +1,111 @@
+import type { WalletGroupRow } from '../../models';
+import { walletGroupRowRenderer } from './WalletGroupRowRenderer';
+import type { IdentityRow, SectionHeaderRow } from '../../models';
+import { identityRowRenderer } from './IdentityRowRenderer';
+import { sectionHeaderRowRenderer } from './SectionHeaderRowRenderer';
+import type { MarketRow } from '../../models';
+import { marketRowRenderer } from './MarketRowRenderer';
+import type { MetricCardRow } from '../../models';
+import { metricCardRowRenderer } from './MetricCardRowRenderer';
+import type { DataRow } from '../../models';
+import { dataRowRenderer } from './DataRowRenderer';
+import type { ActivityRow } from '../../models';
+import { activityRowRenderer } from './ActivityRowRenderer';
+import type { SystemRow } from '../../models';
+import { systemRowRenderer } from './SystemRowRenderer';
+import type { ActionRow } from '../../models';
+import { actionRowRenderer } from './ActionRowRenderer';
+import { mediaTileRowRenderer } from './MediaTileRowRenderer';
+import type { MessageRow, RailRow, MediaTileRow, RowModel } from '../../models';
+import { messageRowRenderer } from './MessageRowRenderer';
+import type { RowPrimitives } from './RowVisual';
+import { railRowRenderer } from './RailRowRenderer';
+
+type Renderer<R extends RowModel> = {
+  key: string;
+  appliesSizePreset?: (row: R) => boolean;
+  create: (
+    document: Document,
+    row: R,
+    primitives: RowPrimitives
+  ) => HTMLElement;
+  bind: (body: HTMLElement, row: R, primitives: RowPrimitives) => void;
+  measure: (row: R, width: number, layout?: string) => number;
+  measureRendered: (body: HTMLElement, row: R) => number | undefined;
+  recycle: (body: HTMLElement) => void;
+  reorderPreview?: (
+    body: HTMLElement,
+    row: R
+  ) => { element: HTMLElement; height: number } | undefined;
+};
+function registration<R extends RowModel>(renderer: Renderer<R>, row: R) {
+  return {
+    key: renderer.key,
+    appliesSizePreset: renderer.appliesSizePreset?.(row) ?? true,
+    create: (document: Document, primitives: RowPrimitives) =>
+      renderer.create(document, row, primitives),
+    bind: (body: HTMLElement, primitives: RowPrimitives) =>
+      renderer.bind(body, row, primitives),
+    measure: (width: number, layout?: string) =>
+      renderer.measure(row, width, layout),
+    measureRendered: (body: HTMLElement) => renderer.measureRendered(body, row),
+    reorderPreview: (body: HTMLElement) => renderer.reorderPreview?.(body, row),
+  };
+}
+const factories = {
+  walletGroup: (row: RowModel) =>
+    registration(walletGroupRowRenderer, row as WalletGroupRow),
+  identity: (row: RowModel) =>
+    registration(identityRowRenderer, row as IdentityRow),
+  sectionHeader: (row: RowModel) =>
+    registration(sectionHeaderRowRenderer, row as SectionHeaderRow),
+  market: (row: RowModel) => registration(marketRowRenderer, row as MarketRow),
+  metricCard: (row: RowModel) =>
+    registration(metricCardRowRenderer, row as MetricCardRow),
+  dataRow: (row: RowModel) => registration(dataRowRenderer, row as DataRow),
+  activity: (row: RowModel) =>
+    registration(activityRowRenderer, row as ActivityRow),
+  system: (row: RowModel) => registration(systemRowRenderer, row as SystemRow),
+  action: (row: RowModel) => registration(actionRowRenderer, row as ActionRow),
+  message: (row: RowModel) =>
+    registration(messageRowRenderer, row as MessageRow),
+  rail: (row: RowModel) => registration(railRowRenderer, row as RailRow),
+  mediaTile: (row: RowModel) =>
+    registration(mediaTileRowRenderer, row as MediaTileRow),
+} satisfies Record<
+  RowModel['type'],
+  (row: RowModel) => ReturnType<typeof registration>
+>;
+const renderers = {
+  walletGroup: walletGroupRowRenderer,
+  identity: identityRowRenderer,
+  sectionHeader: sectionHeaderRowRenderer,
+  market: marketRowRenderer,
+  metricCard: metricCardRowRenderer,
+  dataRow: dataRowRenderer,
+  activity: activityRowRenderer,
+  system: systemRowRenderer,
+  action: actionRowRenderer,
+  message: messageRowRenderer,
+  rail: railRowRenderer,
+  mediaTile: mediaTileRowRenderer,
+};
+export type RowRendererKey = RowModel['type'];
+const isRegistered = (key: string): key is keyof typeof factories =>
+  Object.prototype.hasOwnProperty.call(factories, key);
+
+// Closed registration; a row's data key, styles and placement never affect reuse.
+export function rowRenderer(row: RowModel) {
+  if (!isRegistered(row.type))
+    throw new Error('No renderer registered for ' + row.type);
+  return factories[row.type](row);
+}
+export function rowRendererKey(row: RowModel): RowRendererKey {
+  return row.type;
+}
+export function recycleRowBody(body: HTMLElement): boolean {
+  const key = body.dataset.nlRenderer ?? '';
+  if (!isRegistered(key)) return false;
+  renderers[key].recycle(body);
+  return true;
+}