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

package/src/web/templates/RowText.ts

@@ -0,0 +1,181 @@
+import type { NativeListTextStyle } from '../../models';
+import { createElement } from './RowElements';
+export function applyValueSegments(
+  element: HTMLElement,
+  segments:
+    | readonly Readonly<{ text: string; style?: 'subscript' }>[]
+    | undefined,
+  fontSize = 16,
+  lineHeight = 24,
+  weight = 500
+) {
+  if (!segments?.length) return;
+  element.textContent = '';
+  element.style.fontSize = String(fontSize) + 'px';
+  element.style.lineHeight = String(lineHeight) + 'px';
+  element.style.fontWeight = String(weight);
+  segments.forEach((segment) => {
+    const span = createElement(
+      element.ownerDocument,
+      'span',
+      undefined,
+      segment.text
+    );
+    if (segment.style === 'subscript') {
+      span.dataset.nlSegment = 'subscript';
+      applySubscriptMetrics(span, fontSize);
+    }
+    element.appendChild(span);
+  });
+}
+// Legacy subscript metrics: 60% of the field size on a field-size line box.
+function applySubscriptMetrics(span: HTMLElement, fontSize: number) {
+  span.style.fontSize = String(Math.ceil(fontSize * 0.6)) + 'px';
+  span.style.lineHeight = String(fontSize) + 'px';
+}
+export function applyTextLayout(
+  element: HTMLElement,
+  style: NativeListTextStyle,
+  defaultLines?: number
+): void {
+  if (
+    style.lines === undefined &&
+    style.truncate === undefined &&
+    style.verticalAlignment === undefined &&
+    style.offsetY === undefined &&
+    defaultLines === undefined
+  )
+    return;
+  let content = element.querySelector<HTMLElement>(
+    ':scope > .ok-native-list-text-content'
+  );
+  // Line clamps are only ever written inline by templates (no stylesheet rule
+  // sets them), so no computed-style read is needed; this also keeps the result
+  // identical for attached and detached rows.
+  const inheritedClamp = Number(
+    element.style.getPropertyValue('-webkit-line-clamp')
+  );
+  const lines = style.lines ?? defaultLines ?? (inheritedClamp || 1);
+  if (
+    !content &&
+    (style.verticalAlignment !== undefined ||
+      style.offsetY !== undefined ||
+      element.classList.contains('ok-native-list-market-change'))
+  ) {
+    content = element.ownerDocument.createElement('span');
+    content.className = 'ok-native-list-text-content';
+    content.append(...Array.from(element.childNodes));
+    element.appendChild(content);
+    element.style.display = 'flex';
+    element.style.flexDirection = 'column';
+    element.style.removeProperty('-webkit-line-clamp');
+    element.style.removeProperty('-webkit-box-orient');
+    content.style.minWidth = '0';
+    content.style.flex = '0 1 auto';
+    content.style.width = '100%';
+  }
+  const text = content ?? element;
+  if (style.verticalAlignment !== undefined) {
+    element.style.justifyContent = {
+      top: 'flex-start',
+      center: 'center',
+      bottom: 'flex-end',
+    }[style.verticalAlignment];
+  }
+  if (style.offsetY !== undefined)
+    text.style.transform = `translateY(${style.offsetY}px)`;
+  if (
+    style.lines === undefined &&
+    style.truncate === undefined &&
+    defaultLines === undefined &&
+    !inheritedClamp
+  ) {
+    if (content) {
+      // Inherit the slot's resolved wrapping/truncation from CSS or inline style.
+      content.style.whiteSpace = 'inherit';
+      content.style.textOverflow = 'inherit';
+      content.style.overflow = 'hidden';
+    }
+    return;
+  }
+  if (lines === 1) {
+    const walker = element.ownerDocument.createTreeWalker(
+      text,
+      4 /* SHOW_TEXT */
+    );
+    let previousCarriageReturn = false;
+    while (walker.nextNode()) {
+      const value = walker.currentNode.nodeValue ?? '';
+      if (!value) continue;
+      // A CRLF pair may straddle two styled runs.
+      const textValue =
+        previousCarriageReturn && value.startsWith('\n')
+          ? value.slice(1)
+          : value;
+      walker.currentNode.nodeValue = textValue.replace(/\r\n|[\r\n]/g, ' ');
+      previousCarriageReturn = value.endsWith('\r');
+    }
+  }
+  text.style.whiteSpace = lines === 1 ? 'nowrap' : 'pre-wrap';
+  text.style.overflow = 'hidden';
+  text.style.textOverflow = style.truncate === 'clip' ? 'clip' : 'ellipsis';
+  text.style.removeProperty('-webkit-line-clamp');
+  text.style.removeProperty('-webkit-box-orient');
+  text.style.maxHeight = '';
+  if (lines > 1 && style.truncate !== 'clip') {
+    text.style.display = '-webkit-box';
+    text.style.setProperty('-webkit-line-clamp', String(lines));
+    text.style.setProperty('-webkit-box-orient', 'vertical');
+  } else {
+    text.style.display = 'block';
+    if (lines > 1) {
+      // Rows are styled before mounting, when computed typography is unavailable.
+      // Resolve omitted line height in CSS after the template rules take effect.
+      text.style.maxHeight =
+        style.lineHeight !== undefined
+          ? `${lines * style.lineHeight}px`
+          : `${lines}lh`;
+    }
+  }
+}
+export function applyTextStyleToSlot(
+  element: HTMLElement,
+  style: NativeListTextStyle,
+  defaultLines?: number
+): void {
+  if (style.fontSize !== undefined)
+    element.style.fontSize = String(style.fontSize) + 'px';
+  if (style.lineHeight !== undefined)
+    element.style.lineHeight = String(style.lineHeight) + 'px';
+  if (style.fontWeight !== undefined)
+    element.style.fontWeight = String(fontWeight(style.fontWeight, 400));
+  if (style.color !== undefined) element.style.color = style.color;
+  // Explicit overrides also apply to rich text runs, but never to sibling badges.
+  // Subscript segments keep their legacy size relative to the field size.
+  element.querySelectorAll<HTMLElement>('span').forEach((run) => {
+    const subscript = run.dataset.nlSegment === 'subscript';
+    if (style.color !== undefined) run.style.color = style.color;
+    if (style.fontSize !== undefined) {
+      if (subscript) applySubscriptMetrics(run, style.fontSize);
+      else run.style.fontSize = String(style.fontSize) + 'px';
+    }
+    if (style.fontWeight !== undefined)
+      run.style.fontWeight = String(fontWeight(style.fontWeight, 400));
+    if (style.lineHeight !== undefined && !subscript)
+      run.style.lineHeight = String(style.lineHeight) + 'px';
+    if (style.lines !== undefined || style.truncate !== undefined)
+      run.style.whiteSpace = 'inherit';
+  });
+  if (style.alignment !== undefined) element.style.textAlign = style.alignment;
+  applyTextLayout(element, style, defaultLines);
+}
+export function fontWeight(
+  value: NativeListTextStyle['fontWeight'] | undefined,
+  fallback: number
+): number {
+  if (value === 'bold') return 700;
+  if (value === 'semibold') return 600;
+  if (value === 'medium') return 500;
+  if (value === 'regular') return 400;
+  return fallback;
+}

package/src/web/templates/RowVisual.ts

@@ -0,0 +1,115 @@
+import type {
+  TrailingAccessory,
+  ImageSource,
+  LeadingVisual,
+  NativeListTextStyle,
+  NativeListImageStyle,
+} from '../../models';
+
+export type RowPrimitives = Readonly<{
+  background: string;
+  icon: (element: HTMLElement, name: string) => void;
+  iconAction: (
+    name: string,
+    actionKey: string | undefined,
+    disabled?: boolean,
+    tintColor?: string
+  ) => HTMLElement;
+  accessory: (
+    rowKey: string,
+    descriptor: TrailingAccessory,
+    slot: number
+  ) => HTMLElement;
+  visual: (
+    source: LeadingVisual | undefined,
+    presentation?: string
+  ) => HTMLElement | undefined;
+  thumbnail: (source: ImageSource) => HTMLElement | undefined;
+  textStyle: (
+    element: HTMLElement,
+    style: NativeListTextStyle,
+    defaultLines?: number
+  ) => void;
+  dispose: (element: HTMLElement) => void;
+}>;
+
+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 {
+  private readonly defaults = new Map<HTMLElement, Map<string, string>>();
+  constructor(private readonly view: HTMLElement) {
+    [view, ...view.querySelectorAll<HTMLElement>('*')].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: NativeListImageStyle | undefined,
+    width: number,
+    height: number,
+    margin: number
+  ) {
+    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<HTMLElement>(
+          ':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;
+    });
+  }
+}

package/src/web/templates/SectionHeaderRowRenderer.ts

@@ -0,0 +1,243 @@
+import { applyTabularNumbers, hasExplicitRowHeight } from './RowElements';
+import type { SectionHeaderRow } from '../../models';
+import {
+  createElement,
+  setData,
+  tagSlot,
+  markActionAnchorSource,
+  createTextColumn,
+} from './RowElements';
+import { applyValueSegments } from './RowText';
+import type { RowPrimitives } from './RowVisual';
+function createSectionHeader(
+  document: Document,
+  primitives: RowPrimitives,
+  row: SectionHeaderRow
+): HTMLElement {
+  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 as HTMLElement;
+  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: HTMLElement,
+  row: SectionHeaderRow,
+  primitives: RowPrimitives
+) {
+  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<HTMLElement>(':scope > .ok-native-list-flex')
+      .forEach((column) => {
+        column.style.rowGap = style.lineGap + 'px';
+      });
+  if (style.trailingGap !== undefined) {
+    const children = Array.from(body.children) as HTMLElement[];
+    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'] as const)
+    if (style[slot])
+      body
+        .querySelectorAll<HTMLElement>('[data-nl-slot="' + slot + '"]')
+        .forEach((node) => primitives.textStyle(node, style[slot]!));
+}
+function create(
+  document: Document,
+  row: SectionHeaderRow,
+  primitives: RowPrimitives
+) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'sectionHeader';
+  bind(body, row, primitives);
+  return body;
+}
+export const sectionHeaderRowRenderer = {
+  key: 'sectionHeader' as const,
+  create,
+  bind,
+  recycle: (body: HTMLElement) => body.replaceChildren(),
+  appliesSizePreset: (row: SectionHeaderRow) =>
+    !['summary', 'gallery'].includes(row.variant ?? ''),
+  measure: (row: SectionHeaderRow, _width: number, 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: HTMLElement,
+    _row: SectionHeaderRow
+  ): number | undefined => undefined,
+};