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

package/src/web/templates/ActionRowRenderer.ts

@@ -0,0 +1,123 @@
+import { applyTabularNumbers, hasExplicitRowHeight } from './RowElements';
+import type { ActionRow } from '../../models';
+import { RowVisualStyle, type RowPrimitives } from './RowVisual';
+
+type Views = {
+  title: HTMLElement;
+  controls: HTMLElement;
+  visual?: HTMLElement;
+  visualStyle?: RowVisualStyle;
+  visualKey: string;
+  primitives: RowPrimitives;
+};
+const views = new WeakMap<HTMLElement, Views>();
+function bind(body: HTMLElement, row: ActionRow, primitives: RowPrimitives) {
+  const v = views.get(body)!;
+  v.primitives = primitives;
+  body.className =
+    'ok-native-list-row ok-native-list-action-row' +
+    (row.presentation === 'accountSelector'
+      ? ' ok-native-list-account-action-row'
+      : '');
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined)
+    body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined)
+    body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.title.style.cssText = '';
+  v.title.textContent = row.title;
+  v.title.dataset.tone = row.tone ?? '';
+  if (row.presentation === 'accountSelector' && row.icon)
+    v.title.style.fontWeight = '500';
+  if (style?.title) primitives.textStyle(v.title, style.title);
+  const visualKey = JSON.stringify([row.key, row.icon]);
+  if (v.visualKey !== visualKey) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.icon);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    if (v.visual) body.insertBefore(v.visual, v.title);
+    v.visualKey = visualKey;
+  }
+  if (v.visualStyle && v.visual) {
+    const size = row.presentation === 'accountSelector' ? 32 : 40;
+    v.visualStyle.apply(
+      style?.image,
+      style?.image?.width ?? size,
+      style?.image?.height ?? size,
+      (style?.leadingGap ?? 12) - 12
+    );
+  }
+  v.controls.replaceChildren();
+  v.controls.style.cssText = '';
+  v.controls.removeAttribute('data-native-list-account-control');
+  const descriptors = row.trailing ?? [];
+  if (row.checkbox)
+    v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
+  if (descriptors.length) {
+    const trailing = body.ownerDocument.createElement('span');
+    trailing.className = 'ok-native-list-accessories';
+    if (style?.trailingGap !== undefined)
+      trailing.style.gap = `${style.trailingGap}px`;
+    if (
+      hasExplicitRowHeight(row) &&
+      row.presentation === 'accountSelector' &&
+      descriptors.length === 1 &&
+      descriptors[0]?.kind === 'icon' &&
+      descriptors[0].name === 'PlusSmallOutline'
+    )
+      trailing.dataset.nativeListAccountControl = 'createAddress';
+    let valueIndex = 0;
+    descriptors.forEach((descriptor, index) => {
+      const node = primitives.accessory(row.key, descriptor, index);
+      if (descriptor.kind === 'value' || descriptor.kind === 'valuePair') {
+        node.dataset.nlSlot = valueIndex++ === 0 ? 'value' : 'valueSecondary';
+        if (node.dataset.nlSlot === 'value' && style?.value)
+          primitives.textStyle(node, style.value);
+      }
+      trailing.appendChild(node);
+    });
+    v.controls.appendChild(trailing);
+  }
+  v.controls.style.display = 'contents';
+  if (row.presentation === 'accountSelector') applyTabularNumbers(body);
+}
+function create(document: Document, row: ActionRow, primitives: RowPrimitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'action';
+  const title = document.createElement('span');
+  title.className = 'ok-native-list-action-title';
+  title.dataset.nlSlot = 'title';
+  const controls = document.createElement('span');
+  body.append(title, controls);
+  views.set(body, { title, controls, visualKey: '', 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.visualKey = '';
+  v.controls.replaceChildren();
+}
+export const actionRowRenderer = {
+  key: 'action' as const,
+  create,
+  bind,
+  recycle,
+  measure: (row: ActionRow, _width: number) =>
+    row.presentation === 'accountSelector' ? 48 : row.icon ? 60 : 44,
+  measureRendered: (_body: HTMLElement, _row: ActionRow): number | undefined =>
+    undefined,
+};

package/src/web/templates/ActivityRowRenderer.ts

@@ -0,0 +1,159 @@
+import type { ActivityRow } from '../../models';
+import { createElement, tagSlot, markActionAnchorSource } from './RowElements';
+import { RowVisualStyle, type RowPrimitives } from './RowVisual';
+type Views = {
+  column: HTMLElement;
+  fields: Record<string, HTMLElement>;
+  amounts: HTMLElement;
+  actions: HTMLElement;
+  visuals: HTMLElement[];
+  visualStyles: RowVisualStyle[];
+  visualKey: string;
+  primitives: RowPrimitives;
+};
+const views = new WeakMap<HTMLElement, Views>();
+function bind(body: HTMLElement, row: ActivityRow, primitives: RowPrimitives) {
+  const v = views.get(body)!;
+  v.primitives = primitives;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined)
+    body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined)
+    body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.column.style.rowGap =
+    style?.lineGap !== undefined ? `${style.lineGap}px` : '';
+  v.amounts.style.gap =
+    style?.trailingGap !== undefined ? `${style.trailingGap}px` : '';
+  for (const key of [
+    'title',
+    'description',
+    'status',
+    'primaryAmount',
+    'secondaryAmount',
+  ] as const) {
+    const node = v.fields[key]!;
+    node.style.cssText = '';
+    node.textContent = row[key] ?? '';
+    node.hidden = !row[key];
+    if (style?.[key]) primitives.textStyle(node, style[key]!);
+  }
+  const visualKey = JSON.stringify([
+    row.key,
+    row.leading,
+    row.secondaryLeading,
+  ]);
+  if (v.visualKey !== visualKey) {
+    v.visuals.forEach((node) => {
+      primitives.dispose(node);
+      node.remove();
+    });
+    v.visuals = [row.leading, row.secondaryLeading]
+      .map((source) => primitives.visual(source))
+      .filter((node): node is HTMLElement => !!node);
+    v.visuals.forEach((node) => body.insertBefore(node, v.column));
+    v.visualStyles = v.visuals.map((node) => new RowVisualStyle(node));
+    v.visualKey = visualKey;
+  }
+  if (v.visualStyles[0])
+    v.visualStyles[0].apply(
+      style?.image,
+      style?.image?.width ?? 40,
+      style?.image?.height ?? 40,
+      (style?.leadingGap ?? 12) - 12
+    );
+  v.actions.replaceChildren();
+  v.actions.hidden = !row.footerActions?.length;
+  row.footerActions?.forEach((action, index) => {
+    const button = createElement(
+      body.ownerDocument,
+      'button',
+      'ok-native-list-action-button',
+      action.label
+    );
+    button.setAttribute('type', 'button');
+    button.toggleAttribute('disabled', Boolean(action.disabled));
+    button.dataset.tone = action.tone ?? '';
+    button.dataset.nativeListAction = action.key;
+    markActionAnchorSource(button, 'footerAction', index);
+    v.actions.appendChild(button);
+  });
+}
+function create(
+  document: Document,
+  row: ActivityRow,
+  primitives: RowPrimitives
+) {
+  const body = createElement(
+    document,
+    'div',
+    'ok-native-list-row ok-native-list-standard'
+  );
+  body.dataset.nlRenderer = 'activity';
+  const column = createElement(document, 'span', 'ok-native-list-flex');
+  const amounts = createElement(document, 'span', 'ok-native-list-amounts');
+  const actions = createElement(document, 'span', 'ok-native-list-actions');
+  const fields: Record<string, HTMLElement> = {};
+  for (const key of [
+    'title',
+    'description',
+    'status',
+    'primaryAmount',
+    'secondaryAmount',
+  ]) {
+    const node = tagSlot(
+      createElement(
+        document,
+        'span',
+        key === 'title'
+          ? 'ok-native-list-title'
+          : key === 'primaryAmount'
+          ? 'ok-native-list-value'
+          : 'ok-native-list-secondary'
+      ),
+      key
+    );
+    fields[key] = node;
+    (key.endsWith('Amount') ? amounts : column).appendChild(node);
+  }
+  column.appendChild(actions);
+  body.append(column, amounts);
+  views.set(body, {
+    column,
+    amounts,
+    actions,
+    fields,
+    visuals: [],
+    visualStyles: [],
+    visualKey: '',
+    primitives,
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body: HTMLElement) {
+  const v = views.get(body);
+  if (!v) return;
+  v.visuals.forEach((node) => {
+    v.primitives.dispose(node);
+    node.remove();
+  });
+  v.visuals = [];
+  v.visualStyles = [];
+  v.visualKey = '';
+  v.actions.replaceChildren();
+}
+export const activityRowRenderer = {
+  key: 'activity' as const,
+  create,
+  bind,
+  recycle,
+  measure: (row: ActivityRow, _width: number) =>
+    row.footerActions?.length ? 100 : 60,
+  measureRendered: (
+    _body: HTMLElement,
+    _row: ActivityRow
+  ): number | undefined => undefined,
+};

package/src/web/templates/DataRowRenderer.ts

@@ -0,0 +1,212 @@
+import type { DataRow, TextTone } from '../../models';
+import { createElement, tagSlot } from './RowElements';
+import { RowVisualStyle, type RowPrimitives } from './RowVisual';
+type ColumnViews = {
+  body: HTMLElement;
+  primaryLine: HTMLElement;
+  primary: HTMLElement;
+  badges: HTMLElement;
+  secondaryLine: HTMLElement;
+  secondary: HTMLElement[];
+};
+type Views = {
+  favorite: HTMLElement;
+  index: HTMLElement;
+  controls: HTMLElement;
+  columns: ColumnViews[];
+  visual?: HTMLElement;
+  visualStyle?: RowVisualStyle;
+  visualKey: string;
+  primitives: RowPrimitives;
+};
+const views = new WeakMap<HTMLElement, Views>();
+const tone = (value: TextTone | undefined, fallback: string) =>
+  value === 'positive'
+    ? 'var(--nl-positive)'
+    : value === 'negative'
+    ? 'var(--nl-negative)'
+    : value === 'secondary'
+    ? 'var(--nl-secondary)'
+    : `var(--nl-${fallback})`;
+function bind(body: HTMLElement, row: DataRow, primitives: RowPrimitives) {
+  const v = views.get(body)!;
+  v.primitives = primitives;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (style?.horizontalPadding !== undefined)
+    body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined)
+    body.style.paddingBlock = `${style.verticalPadding}px`;
+  v.controls.replaceChildren();
+  if (row.checkbox)
+    v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
+  v.controls.style.display = 'contents';
+  v.index.style.cssText = '';
+  v.index.hidden = row.index === undefined;
+  v.index.textContent = String(row.index ?? '');
+  if (style?.index) primitives.textStyle(v.index, style.index);
+  v.favorite.hidden = !row.favorite;
+  v.favorite.textContent = row.favoriteActive ? '★' : '☆';
+  v.favorite.dataset.active = String(!!row.favoriteActive);
+  const visualKey = JSON.stringify([row.key, row.leading]);
+  if (visualKey !== v.visualKey) {
+    if (v.visual) {
+      primitives.dispose(v.visual);
+      v.visual.remove();
+    }
+    v.visual = primitives.visual(row.leading);
+    v.visualStyle = v.visual ? new RowVisualStyle(v.visual) : undefined;
+    if (v.visual) body.insertBefore(v.visual, v.columns[0]!.body);
+    v.visualKey = visualKey;
+  }
+  v.visualStyle?.apply(
+    style?.image,
+    style?.image?.width ?? 40,
+    style?.image?.height ?? 40,
+    (style?.leadingGap ?? 12) - 12
+  );
+  v.columns.forEach((cell, index) => {
+    const column = row.columns[index];
+    cell.body.hidden = !column;
+    if (!column) {
+      cell.body.remove();
+      return;
+    }
+    body.appendChild(cell.body);
+    cell.body.style.cssText = '';
+    cell.body.hidden = false;
+    cell.body.style.flex = String(column.weight ?? 1);
+    cell.body.style.display = 'flex';
+    cell.body.dataset.align = column.alignment ?? 'start';
+    if (style?.lineGap !== undefined)
+      cell.body.style.rowGap = `${style.lineGap}px`;
+    cell.primaryLine.style.cssText = '';
+    cell.primaryLine.style.color = tone(column.tone, 'primary');
+    if (style?.titleBadgeGap !== undefined)
+      cell.primaryLine.style.gap = `${style.titleBadgeGap}px`;
+    cell.primary.style.cssText = '';
+    cell.primary.textContent = column.text;
+    if (style?.columns) primitives.textStyle(cell.primary, style.columns);
+    cell.badges.replaceChildren();
+    cell.badges.style.display = 'contents';
+    if (column.key === 'asset')
+      row.badges?.forEach((badge) => {
+        const label = tagSlot(
+          createElement(
+            body.ownerDocument,
+            'span',
+            'ok-native-list-badge',
+            badge.text
+          ),
+          'badge'
+        );
+        label.dataset.tone = badge.tone ?? '';
+        cell.badges.appendChild(label);
+      });
+    // Legacy Web layout: secondary leading text sits inline before the primary
+    // text; secondary text is a direct line below it, toned by secondaryTone.
+    cell.secondaryLine.style.display = column.secondaryText
+      ? 'contents'
+      : 'none';
+    [column.secondaryLeadingText, column.secondaryText].forEach(
+      (text, slot) => {
+        const label = cell.secondary[slot]!;
+        label.hidden = !text;
+        if (!text) label.remove();
+        else if (slot === 0) cell.primaryLine.insertBefore(label, cell.primary);
+        else cell.secondaryLine.appendChild(label);
+        label.style.cssText = '';
+        label.textContent = text ?? '';
+        if (slot === 1)
+          label.style.color = tone(column.secondaryTone, 'secondary');
+        if (style?.columnSecondary)
+          primitives.textStyle(label, style.columnSecondary);
+      }
+    );
+  });
+}
+function create(document: Document, row: DataRow, primitives: RowPrimitives) {
+  const body = createElement(
+    document,
+    'div',
+    'ok-native-list-row ok-native-list-data'
+  );
+  body.dataset.nlRenderer = 'dataRow';
+  const index = tagSlot(
+    createElement(document, 'span', 'ok-native-list-index'),
+    'index'
+  );
+  const favorite = createElement(document, 'span', 'ok-native-list-favorite');
+  const controls = createElement(document, 'span');
+  body.append(controls, index, favorite);
+  const columns = Array.from({ length: 4 }, () => {
+    const cell = createElement(document, 'span', 'ok-native-list-data-cell');
+    const primaryLine = createElement(
+      document,
+      'span',
+      'ok-native-list-data-primary'
+    );
+    const primary = tagSlot(createElement(document, 'span'), 'columns');
+    const badges = createElement(document, 'span');
+    primaryLine.append(primary, badges);
+    const secondaryLine = createElement(
+      document,
+      'span',
+      'ok-native-list-data-secondary-line'
+    );
+    const secondary = Array.from({ length: 2 }, () =>
+      tagSlot(
+        createElement(document, 'span', 'ok-native-list-secondary'),
+        'columnSecondary'
+      )
+    );
+    secondaryLine.append(...secondary);
+    cell.append(primaryLine, secondaryLine);
+    body.appendChild(cell);
+    return {
+      body: cell,
+      primaryLine,
+      primary,
+      badges,
+      secondaryLine,
+      secondary,
+    };
+  });
+  views.set(body, {
+    favorite,
+    index,
+    controls,
+    columns,
+    visualKey: '',
+    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.visualKey = '';
+  v.controls.replaceChildren();
+}
+export const dataRowRenderer = {
+  key: 'dataRow' as const,
+  create,
+  bind,
+  recycle,
+  // Legacy presets: table rows without secondary text are 8 units shorter.
+  measure: (row: DataRow, _width: number, layout?: string) => {
+    const secondary = row.columns.some((column) => column.secondaryText);
+    return (secondary ? 60 : 56) + (layout === 'table' && !secondary ? -8 : 0);
+  },
+  measureRendered: (_body: HTMLElement, _row: DataRow): number | undefined =>
+    undefined,
+};