@onekeyfe/react-native-native-list 3.0.157-alpha.249 → 3.0.157-alpha.251

package/lib/module/web/templates/RowVisual.js

@@ -0,0 +1,43 @@
+"use strict";
+
+const properties = ['width', 'height', 'flex-basis', 'border-radius', 'overflow', 'object-fit', 'margin-inline-end', 'margin-bottom', 'align-self', 'border', 'box-sizing', 'clip-path', 'flex'];
+
+/** Restores factory geometry without touching async loading visibility. */
+export class RowVisualStyle {
+  defaults = new Map();
+  constructor(view) {
+    this.view = view;
+    [view, ...view.querySelectorAll('*')].forEach(element => {
+      this.defaults.set(element, new Map(properties.map(key => [key, element.style.getPropertyValue(key)])));
+    });
+  }
+  restore() {
+    this.defaults.forEach((style, element) => style.forEach((value, key) => {
+      element.style.removeProperty(key);
+      if (value) element.style.setProperty(key, value);
+    }));
+  }
+  apply(image, width, height, margin) {
+    this.restore();
+    const leading = this.view;
+    leading.style.width = `${width}px`;
+    leading.style.height = `${height}px`;
+    leading.style.flexBasis = `${width}px`;
+    leading.style.marginInlineEnd = `${margin}px`;
+    const radius = image?.cornerRadius !== undefined ? `${image.cornerRadius}px` : image?.shape === 'circle' ? '50%' : image?.shape === 'square' ? '0px' : image?.shape === 'rounded' ? '10px' : undefined;
+    if (radius !== undefined) {
+      leading.style.setProperty('border-radius', radius, 'important');
+      leading.style.overflow = leading.matches('img') ? 'hidden' : 'visible';
+    }
+    const images = leading.matches('img') ? [leading] : leading.querySelectorAll(':scope > img:not(.ok-native-list-visual-corner), :scope > .ok-native-list-visual-fallback:not(.ok-native-list-visual-corner)');
+    images.forEach(bitmap => {
+      if (bitmap !== leading) {
+        if (image?.width !== undefined) bitmap.style.width = '100%';
+        if (image?.height !== undefined) bitmap.style.height = '100%';
+      }
+      if (radius !== undefined) bitmap.style.borderRadius = radius;
+      if (image?.contentFit) bitmap.style.objectFit = image.contentFit === 'center' ? 'none' : image.contentFit;
+    });
+  }
+}
+//# sourceMappingURL=RowVisual.js.map

package/lib/module/web/templates/SectionHeaderRowRenderer.js

@@ -0,0 +1,146 @@
+"use strict";
+
+import { applyTabularNumbers, hasExplicitRowHeight } from "./RowElements.js";
+import { createElement, setData, tagSlot, markActionAnchorSource, createTextColumn } from "./RowElements.js";
+import { applyValueSegments } from "./RowText.js";
+function createSectionHeader(document, primitives, row) {
+  const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-section');
+  setData(body, 'variant', row.variant);
+  if (row.titleIcon) {
+    const titleIcon = primitives.iconAction(row.titleIcon.name, row.titleIcon.actionKey, row.titleIcon.disabled, row.titleIcon.tintColor);
+    markActionAnchorSource(titleIcon, 'leadingAction');
+    body.appendChild(titleIcon);
+  }
+  // OneKey patch: section title help has its own measurable action target.
+  // body.appendChild(createTextColumn(document, row.title, row.subtitle));
+  const column = createTextColumn(document, row.title, row.subtitle);
+  const title = column.firstElementChild;
+  title.classList.add('ok-native-list-section-title');
+  if (row.titleActionKey) {
+    setData(title, 'nativeListAction', row.titleActionKey);
+    markActionAnchorSource(title, 'leadingAction');
+    title.setAttribute('role', 'button');
+    title.tabIndex = 0;
+    title.style.alignSelf = 'flex-start';
+    title.style.maxWidth = '100%';
+    // OneKey patch: explicit network headers reserve a separate 3-point underline area.
+    if (row.presentation !== 'networkSelector' || !hasExplicitRowHeight(row)) {
+      title.style.textDecoration = 'underline dotted';
+      title.style.textUnderlineOffset = '6px';
+    }
+    if (row.titleActionOnHover) setData(title, 'nativeListHoverAction', true);
+  }
+  if (row.presentation === 'networkSelector' && hasExplicitRowHeight(row)) {
+    body.style.padding = row.variant === 'summary' ? '24px 12px 20px' : '0 12px';
+    body.style.backgroundColor = 'var(--nl-bg)';
+    body.style.gap = row.checkbox ? '12px' : '8px';
+    title.style.fontSize = row.variant === 'summary' ? '16px' : '14px';
+    title.style.lineHeight = row.variant === 'summary' ? '24px' : '20px';
+    title.style.fontWeight = row.variant === 'summary' || row.titleActionKey && !row.checkbox ? '500' : '600';
+    if (row.titleActionKey) {
+      const text = createElement(document, 'span', 'ok-native-list-section-title-text', row.title);
+      text.style.overflow = 'hidden';
+      text.style.textOverflow = 'ellipsis';
+      text.style.maxWidth = '100%';
+      const dotted = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      dotted.setAttribute('height', '2');
+      dotted.style.cssText = 'display:block;position:absolute;left:0;bottom:0;width:100%;height:2px;color:var(--nl-secondary)';
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+      for (const [key, value] of Object.entries({
+        x1: '1',
+        y1: '1',
+        x2: '100%',
+        y2: '1',
+        stroke: 'currentColor',
+        'stroke-width': '1.5',
+        'stroke-dasharray': '0,4',
+        'stroke-linecap': 'round'
+      })) line.setAttribute(key, value);
+      // OneKey patch: keep both round caps inside the original full-width viewport.
+      const lineViewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      lineViewport.setAttribute('width', 'calc(100% - 1px)');
+      lineViewport.setAttribute('height', '2');
+      lineViewport.setAttribute('overflow', 'visible');
+      lineViewport.appendChild(line);
+      dotted.appendChild(lineViewport);
+      // OneKey patch: SVG intrinsic width must not expand the title action beyond its text.
+      title.style.display = 'block';
+      title.style.position = 'relative';
+      title.style.width = 'fit-content';
+      title.style.paddingBottom = '3px';
+      text.style.display = 'block';
+      title.replaceChildren(text, dotted);
+    }
+  }
+  body.appendChild(column);
+  if (row.value) {
+    const value = tagSlot(createElement(document, row.valueActionKey ? 'button' : 'span', row.valueActionKey ? 'ok-native-list-action-button ok-native-list-section-value' : 'ok-native-list-value ok-native-list-section-value', row.value), 'value');
+    applyValueSegments(value, row.valueSegments);
+    if (row.presentation === 'networkSelector' && hasExplicitRowHeight(row)) {
+      value.style.fontFamily = 'inherit';
+      value.style.fontSize = '16px';
+      value.style.lineHeight = '24px';
+      value.style.fontWeight = '500';
+      if (row.valueActionKey) {
+        value.style.color = 'var(--nl-secondary)';
+        value.style.padding = '0';
+        value.style.flexShrink = '0';
+      }
+    }
+    if (row.valueActionTestID) setData(value, 'testid', row.valueActionTestID);
+    if (row.valueActionKey) {
+      value.setAttribute('type', 'button');
+      setData(value, 'nativeListAction', row.valueActionKey);
+      markActionAnchorSource(value, 'trailingAccessory', 0);
+    }
+    body.appendChild(value);
+  }
+  if (row.valueIcon) {
+    const valueIcon = primitives.iconAction(row.valueIcon.name, row.valueIcon.actionKey, row.valueIcon.disabled, row.valueIcon.tintColor);
+    markActionAnchorSource(valueIcon, 'trailingAccessory', 1);
+    body.appendChild(valueIcon);
+  }
+  if (row.checkbox) body.appendChild(primitives.accessory(row.key, row.checkbox, 0));
+  return body;
+}
+function bind(body, row, primitives) {
+  const next = createSectionHeader(body.ownerDocument, primitives, row);
+  body.replaceChildren(...Array.from(next.childNodes));
+  body.className = next.className;
+  body.style.cssText = next.style.cssText;
+  if (row.presentation === 'networkSelector') applyTabularNumbers(body);
+  body.dataset.variant = row.variant ?? '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  const style = row.style;
+  if (!style) return;
+  if (style.horizontalPadding !== undefined) body.style.paddingInline = style.horizontalPadding + 'px';
+  if (style.verticalPadding !== undefined) body.style.paddingBlock = style.verticalPadding + 'px';
+  if (style.lineGap !== undefined) body.querySelectorAll(':scope > .ok-native-list-flex').forEach(column => {
+    column.style.rowGap = style.lineGap + 'px';
+  });
+  if (style.trailingGap !== undefined) {
+    const children = Array.from(body.children);
+    const column = children.findIndex(child => child.classList.contains('ok-native-list-flex'));
+    children.slice(column + 2).forEach(child => {
+      child.style.marginInlineStart = 'calc(' + style.trailingGap + 'px - ' + (body.style.gap || '12px') + ')';
+    });
+  }
+  for (const slot of ['title', 'subtitle', 'value']) if (style[slot]) body.querySelectorAll('[data-nl-slot="' + slot + '"]').forEach(node => primitives.textStyle(node, style[slot]));
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'sectionHeader';
+  bind(body, row, primitives);
+  return body;
+}
+export const sectionHeaderRowRenderer = {
+  key: 'sectionHeader',
+  create,
+  bind,
+  recycle: body => body.replaceChildren(),
+  appliesSizePreset: row => !['summary', 'gallery'].includes(row.variant ?? ''),
+  measure: (row, _width, layout = 'linear') => layout === 'table' ? 28 : row.presentation === 'networkSelector' ? 47 : row.variant === 'history' ? 16 : row.variant === 'summary' ? 68 : row.variant === 'gallery' ? 32 : row.checkbox ? 56 : layout === 'linear' ? 30 : 36,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=SectionHeaderRowRenderer.js.map

package/lib/module/web/templates/SystemRowRenderer.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import { captureInlineStyles, createElement, hasExplicitRowHeight, restoreInlineStyles, setData, tagSlot } from "./RowElements.js";
+function createSystemRow(document, primitives, row) {
+  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, height, 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;
+}
+const bindings = new WeakMap();
+function bind(body, row, primitives) {
+  // 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']) {
+    const text = style?.[slot];
+    if (!text) continue;
+    body.querySelectorAll(`[data-nl-slot="${slot}"]`).forEach(node => primitives.textStyle(node, text, row.variant === 'warning' ? 0 : undefined));
+  }
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'system';
+  bind(body, row, primitives);
+  return body;
+}
+function measure(row, width) {
+  if (row.variant === 'warning') {
+    const textWidth = Math.max(1, width - (row.style?.horizontalPadding ?? 12) * 2);
+    const height = (text, style) => {
+      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',
+  appliesSizePreset: row => !['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, row) => {
+    if (row.variant !== 'warning' || hasExplicitRowHeight(row)) return undefined;
+    const height = body.offsetHeight;
+    return height > 0 ? height : undefined;
+  },
+  recycle: body => {
+    bindings.delete(body);
+    body.replaceChildren();
+  }
+};
+//# sourceMappingURL=SystemRowRenderer.js.map

package/lib/module/web/templates/WalletGroupRowRenderer.js

@@ -0,0 +1,96 @@
+"use strict";
+
+import { identityRowRenderer } from "./IdentityRowRenderer.js";
+import { applyRowContainerStyle, resetRowContainerStyle } from "./RowContainerStyle.js";
+import { setData } from "./RowElements.js";
+const membersByBody = new WeakMap();
+// Members are walletSidebar identities; like the legacy engine, their preset
+// height (68, +24 with badges) ignores the `size` preset adjustment.
+const memberHeight = (member, width) => member.style?.container?.height ?? member.height ?? identityRowRenderer.measure(member, width);
+function bind(body, row, primitives) {
+  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, row, primitives) {
+  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) {
+  const members = membersByBody.get(body);
+  members?.forEach(member => identityRowRenderer.recycle(member.body));
+  members?.clear();
+  body.replaceChildren();
+}
+export const walletGroupRowRenderer = {
+  key: 'walletGroup',
+  reorderPreview: (body, row) => {
+    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, width) => [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, _row) => undefined
+};
+//# sourceMappingURL=WalletGroupRowRenderer.js.map