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

package/src/web/templates/SystemRowRenderer.ts

@@ -0,0 +1,282 @@
+import type { NativeListTextStyle, SystemRow } from '../../models';
+import type { RowPrimitives } from './RowVisual';
+import {
+  captureInlineStyles,
+  createElement,
+  hasExplicitRowHeight,
+  restoreInlineStyles,
+  setData,
+  tagSlot,
+} from './RowElements';
+function createSystemRow(
+  document: Document,
+  primitives: RowPrimitives,
+  row: SystemRow
+): HTMLElement {
+  const body = createElement(
+    document,
+    'div',
+    'ok-native-list-row ok-native-list-system'
+  );
+  setData(body, 'variant', row.variant);
+  if ('presentation' in row)
+    setData(body, 'nativeListPresentation', row.presentation);
+  if (row.variant === 'loading' && row.loadingStyle === 'skeleton') {
+    body.classList.add('ok-native-list-market-skeleton');
+    const background = primitives.background;
+    const rgb = Number.parseInt(background.slice(1, 7), 16);
+    const dark =
+      ((rgb >> 16) & 255) * 0.299 +
+        ((rgb >> 8) & 255) * 0.587 +
+        (rgb & 255) * 0.114 <
+      128;
+    body.style.setProperty('--nl-skeleton-base', dark ? '#111111' : '#fafafa');
+    body.style.setProperty(
+      '--nl-skeleton-highlight',
+      dark ? '#333333' : '#cdcdcd'
+    );
+    const left = createElement(document, 'div', 'ok-native-list-skeleton-left');
+    const mark = (width: number, height: number, circle = false) => {
+      const element = createElement(
+        document,
+        'span',
+        'ok-native-list-skeleton-mark'
+      );
+      element.style.width = `${width}px`;
+      element.style.height = `${height}px`;
+      if (circle) element.style.borderRadius = '50%';
+      return element;
+    };
+    left.appendChild(mark(32, 32, true));
+    const text = createElement(document, 'div', 'ok-native-list-skeleton-text');
+    text.appendChild(mark(80, 16));
+    text.appendChild(mark(60, 12));
+    left.appendChild(text);
+    body.appendChild(left);
+    const right = createElement(
+      document,
+      'div',
+      'ok-native-list-skeleton-right'
+    );
+    right.appendChild(mark(80, 18));
+    right.appendChild(mark(80, 18));
+    body.appendChild(right);
+    return body;
+  }
+  if (row.variant === 'loading' && row.loadingStyle === 'spinner') {
+    body.style.justifyContent = 'center';
+    body.style.padding = '16px';
+    const spinner = createElement(
+      document,
+      'span',
+      'ok-native-list-market-spinner'
+    );
+    spinner.setAttribute('role', 'progressbar');
+    // Same 20px SVG and 750ms rotation as react-native-web ActivityIndicator.
+    spinner.innerHTML =
+      '<svg viewBox="0 0 32 32" width="20" height="20"><circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="4" opacity="0.2"/><circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-dashoffset="60"/></svg>';
+    body.appendChild(spinner);
+    return body;
+  }
+  if ('presentation' in row && row.presentation === 'market') {
+    if (row.variant === 'noMatch') {
+      body.style.justifyContent = 'center';
+      body.style.padding = '32px';
+      const message = tagSlot(
+        createElement(document, 'span', '', row.message),
+        'message'
+      );
+      message.style.fontSize = '16px';
+      message.style.lineHeight = '24px';
+      body.appendChild(message);
+      return body;
+    }
+    if (row.variant === 'end') {
+      body.style.justifyContent = 'center';
+      body.style.padding = '16px';
+      body.style.gap = '8px';
+      for (const width of [80, 4, 80]) {
+        const mark = createElement(document, 'span', '');
+        mark.style.width = String(width) + 'px';
+        mark.style.height = width === 4 ? '4px' : '1px';
+        mark.style.borderRadius = width === 4 ? '2px' : '0';
+        mark.style.background = 'var(--nl-separator)';
+        body.appendChild(mark);
+      }
+      return body;
+    }
+  }
+  if (row.variant === 'warning') {
+    body.classList.add('ok-native-list-warning');
+    body.style.borderColor = row.borderColor ?? 'var(--nl-separator)';
+    body.appendChild(
+      tagSlot(
+        createElement(
+          document,
+          'span',
+          'ok-native-list-warning-title',
+          row.title
+        ),
+        'title'
+      )
+    );
+    body.appendChild(
+      tagSlot(
+        createElement(
+          document,
+          'span',
+          'ok-native-list-warning-message',
+          row.message
+        ),
+        'message'
+      )
+    );
+    return body;
+  }
+  if (row.variant === 'loading')
+    body.appendChild(createElement(document, 'span', 'ok-native-list-spinner'));
+  const message =
+    row.variant === 'spacer'
+      ? ''
+      : row.message ?? (row.variant === 'end' ? 'End' : '');
+  if (message)
+    body.appendChild(
+      tagSlot(
+        createElement(document, 'span', 'ok-native-list-secondary', message),
+        'message'
+      )
+    );
+  // Legacy Web draws no retry button for any presentation: a retry row shows
+  // only its message and the whole row (click, Enter or Space) emits the
+  // retry `actionKey`. `actionText` / `style.actionText` therefore have no Web
+  // target; they style the native retry button only.
+  return body;
+}
+
+type Binding = { key: string; defaults: Map<HTMLElement, string> };
+const bindings = new WeakMap<HTMLElement, Binding>();
+function bind(body: HTMLElement, row: SystemRow, primitives: RowPrimitives) {
+  // Text styles are part of the key: applyTextLayout inserts wrappers and
+  // rewrites text (lines: 1), which restoring inline styles cannot undo.
+  const content = {
+    ...row,
+    style: { title: row.style?.title, message: row.style?.message },
+  };
+  const key = JSON.stringify([content, primitives.background]);
+  let binding = bindings.get(body);
+  if (!binding || binding.key !== key) {
+    const next = createSystemRow(body.ownerDocument, primitives, row);
+    body.replaceChildren(...Array.from(next.childNodes));
+    body.className = next.className;
+    body.style.cssText = next.style.cssText;
+    body.dataset.variant = row.variant;
+    body.dataset.nativeListPresentation =
+      'presentation' in row ? row.presentation ?? '' : '';
+    binding = {
+      key,
+      defaults: captureInlineStyles(body),
+    };
+    bindings.set(body, binding);
+  }
+  restoreInlineStyles(binding.defaults);
+  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`;
+  if (style?.lineGap !== undefined && row.variant === 'warning')
+    body.style.rowGap = `${style.lineGap}px`;
+  for (const slot of ['title', 'message'] as const) {
+    const text = style?.[slot];
+    if (!text) continue;
+    body
+      .querySelectorAll<HTMLElement>(`[data-nl-slot="${slot}"]`)
+      .forEach((node) =>
+        primitives.textStyle(
+          node,
+          text,
+          row.variant === 'warning' ? 0 : undefined
+        )
+      );
+  }
+}
+function create(document: Document, row: SystemRow, primitives: RowPrimitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'system';
+  bind(body, row, primitives);
+  return body;
+}
+function measure(row: SystemRow, width: number) {
+  if (row.variant === 'warning') {
+    const textWidth = Math.max(
+      1,
+      width - (row.style?.horizontalPadding ?? 12) * 2
+    );
+    const height = (text: string, style: NativeListTextStyle | undefined) => {
+      const size = style?.fontSize ?? 14;
+      const lines = text
+        .split(/\r\n|[\r\n]/)
+        .reduce(
+          (total, line) =>
+            total +
+            Math.max(
+              1,
+              Math.ceil(
+                Array.from(line).reduce(
+                  (length, char) =>
+                    length + (char.charCodeAt(0) > 255 ? size : size / 2),
+                  0
+                ) / textWidth
+              )
+            ),
+          0
+        );
+      return (
+        Math.min(style?.lines ?? Infinity, lines) * (style?.lineHeight ?? 20)
+      );
+    };
+    return (
+      (row.style?.verticalPadding ?? 14) * 2 +
+      (row.style?.lineGap ?? 4) +
+      height(row.title, row.style?.title) +
+      height(row.message, row.style?.message)
+    );
+  }
+  return row.variant === 'spacer'
+    ? row.height
+    : row.variant === 'loading' && row.loadingStyle === 'skeleton'
+    ? 56
+    : row.variant === 'loading' && row.loadingStyle === 'spinner'
+    ? 52
+    : 'presentation' in row && row.presentation === 'market'
+    ? row.variant === 'loading'
+      ? 68
+      : 44
+    : row.variant === 'noMatch' || row.variant === 'end'
+    ? 36
+    : row.variant === 'retry'
+    ? 44
+    : 56;
+}
+export const systemRowRenderer = {
+  key: 'system' as const,
+  appliesSizePreset: (row: SystemRow) =>
+    !['warning', 'spacer'].includes(row.variant),
+  create,
+  bind,
+  measure,
+  // Legacy Web lays out an automatic-height warning at its rendered border-box
+  // height (padding, both borders and wrapped text), not the estimate above.
+  measureRendered: (body: HTMLElement, row: SystemRow): number | undefined => {
+    if (row.variant !== 'warning' || hasExplicitRowHeight(row))
+      return undefined;
+    const height = body.offsetHeight;
+    return height > 0 ? height : undefined;
+  },
+  recycle: (body: HTMLElement) => {
+    bindings.delete(body);
+    body.replaceChildren();
+  },
+};

package/src/web/templates/WalletGroupRowRenderer.ts

@@ -0,0 +1,131 @@
+import type { IdentityRow, WalletGroupRow } from '../../models';
+import { identityRowRenderer } from './IdentityRowRenderer';
+import {
+  applyRowContainerStyle,
+  resetRowContainerStyle,
+} from './RowContainerStyle';
+import { setData } from './RowElements';
+import type { RowPrimitives } from './RowVisual';
+
+type Member = { wrapper: HTMLElement; body: HTMLElement };
+const membersByBody = new WeakMap<HTMLElement, Map<string, Member>>();
+// Members are walletSidebar identities; like the legacy engine, their preset
+// height (68, +24 with badges) ignores the `size` preset adjustment.
+const memberHeight = (member: IdentityRow, width: number) =>
+  member.style?.container?.height ??
+  member.height ??
+  identityRowRenderer.measure(member, width);
+
+function bind(
+  body: HTMLElement,
+  row: WalletGroupRow,
+  primitives: RowPrimitives
+) {
+  const members = membersByBody.get(body)!;
+  const nextKeys = new Set(
+    [row.parent, ...row.children].map((member) => member.key)
+  );
+  for (const [key, member] of members) {
+    if (!nextKeys.has(key)) {
+      identityRowRenderer.recycle(member.body);
+      member.wrapper.remove();
+      members.delete(key);
+    }
+  }
+  body.style.cssText = '';
+  for (const name of body.getAttributeNames())
+    if (name.startsWith('data-') && name !== 'data-nl-renderer')
+      body.removeAttribute(name);
+  // The group's legacy 1px border is its default one-unit inset (native: a
+  // 1-unit padding when the parent has `height`). A style padding replaces that
+  // inset, so the border supplies its first unit and CSS padding the rest; the
+  // edge-to-content distance is then exactly the style value, as on native and
+  // as `measure` budgets it.
+  if (row.style?.horizontalPadding !== undefined)
+    body.style.paddingInline = `${Math.max(
+      0,
+      row.style.horizontalPadding - 1
+    )}px`;
+  if (row.style?.verticalPadding !== undefined)
+    body.style.paddingBlock = `${Math.max(0, row.style.verticalPadding - 1)}px`;
+  [row.parent, ...row.children].forEach((memberRow, index) => {
+    let member = members.get(memberRow.key);
+    if (member) {
+      resetRowContainerStyle(member.body);
+      identityRowRenderer.bind(member.body, memberRow, primitives);
+    } else {
+      const wrapper = body.ownerDocument.createElement('div');
+      wrapper.className = 'ok-native-list-wallet-member';
+      const memberBody = identityRowRenderer.create(
+        body.ownerDocument,
+        memberRow,
+        primitives
+      );
+      wrapper.appendChild(memberBody);
+      member = { wrapper, body: memberBody };
+      members.set(memberRow.key, member);
+    }
+    const { wrapper, body: memberBody } = member;
+    setData(wrapper, 'nativeListGroupMemberKey', memberRow.key);
+    setData(wrapper, 'testid', memberRow.testID);
+    setData(wrapper, 'nativeListGroupParent', index === 0);
+    setData(wrapper, 'nativeListSelected', memberRow.selected);
+    wrapper.style.cssText = '';
+    wrapper.style.flexBasis = `${memberHeight(memberRow, 0)}px`;
+    wrapper.style.height = wrapper.style.flexBasis;
+    wrapper.style.opacity = String(
+      (memberRow.style?.container?.opacity ?? memberRow.opacity ?? 1) *
+        (memberRow.disabled ? 0.5 : 1)
+    );
+    if (memberRow.style?.container?.cornerRadius !== undefined)
+      wrapper.style.borderRadius = `${memberRow.style.container.cornerRadius}px`;
+    if (memberRow.backgroundColor)
+      memberBody.style.backgroundColor = memberRow.backgroundColor;
+    applyRowContainerStyle(memberBody, memberRow);
+    body.appendChild(wrapper);
+  });
+}
+function create(
+  document: Document,
+  row: WalletGroupRow,
+  primitives: RowPrimitives
+) {
+  const body = document.createElement('div');
+  body.className = 'ok-native-list-wallet-group';
+  body.dataset.nlRenderer = 'walletGroup';
+  membersByBody.set(body, new Map());
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body: HTMLElement) {
+  const members = membersByBody.get(body);
+  members?.forEach((member) => identityRowRenderer.recycle(member.body));
+  members?.clear();
+  body.replaceChildren();
+}
+export const walletGroupRowRenderer = {
+  key: 'walletGroup' as const,
+  reorderPreview: (body: HTMLElement, row: WalletGroupRow) => {
+    const parent = membersByBody.get(body)?.get(row.parent.key);
+    return parent ? { element: parent.body, height: 68 } : undefined;
+  },
+  create,
+  bind,
+  recycle,
+  appliesSizePreset: () => false,
+  // Legacy group height: members, 12-unit gaps and the 1px border pair, which
+  // (like native's 1-unit inset) is budgeted only when the parent carries
+  // `height`. `style.verticalPadding` replaces that inset, as on native.
+  measure: (row: WalletGroupRow, width: number) =>
+    [row.parent, ...row.children].reduce(
+      (total, member) => total + memberHeight(member, width),
+      0
+    ) +
+    row.children.length * 12 +
+    (row.style?.verticalPadding ?? (row.parent.height !== undefined ? 1 : 0)) *
+      2,
+  measureRendered: (
+    _body: HTMLElement,
+    _row: WalletGroupRow
+  ): number | undefined => undefined,
+};