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

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

@@ -0,0 +1,310 @@
+"use strict";
+
+import { createElement, setData, markActionAnchorSource } from "./RowElements.js";
+import { applyTextStyleToSlot, applyValueSegments, fontWeight } from "./RowText.js";
+import { RowVisualStyle } from "./RowVisual.js";
+export function resolveWebMarketLayoutStyle(row) {
+  const style = row.style;
+  const imageWidth = style?.image?.width ?? (row.variant === 'stock' ? 40 : 32);
+  const imageHeight = style?.image?.height ?? (row.variant === 'stock' ? 40 : 32);
+  return {
+    horizontalPadding: style?.horizontalPadding ?? (row.variant === 'perp' ? 16 : 20),
+    verticalPadding: style?.verticalPadding ?? 12,
+    leadingGap: style?.leadingGap ?? (row.variant === 'perp' ? 8 : 14),
+    titleBadgeGap: style?.titleBadgeGap ?? 4,
+    trailingGap: style?.trailingGap ?? 8,
+    imageWidth,
+    imageHeight,
+    imageCornerRadius: style?.image?.cornerRadius ?? (style?.image?.shape === 'square' ? 0 : style?.image?.shape === 'rounded' ? 8 : Math.min(imageWidth, imageHeight) / 2),
+    changeWidth: style?.changeWidth ?? 80,
+    changeHeight: style?.changeHeight ?? 32,
+    changeCornerRadius: style?.changeCornerRadius ?? 8
+  };
+}
+function applyMarketTextStyle(element, style, defaults) {
+  element.style.fontSize = String(style?.fontSize ?? defaults.fontSize) + 'px';
+  element.style.lineHeight = String(style?.lineHeight ?? defaults.lineHeight) + 'px';
+  element.style.fontWeight = String(fontWeight(style?.fontWeight, defaults.weight));
+  element.style.color = style?.color ?? '';
+  element.style.textAlign = style?.alignment ?? defaults.alignment;
+  element.style.whiteSpace = (style?.lines ?? 1) > 1 ? 'normal' : 'nowrap';
+  element.style.display = '';
+  element.style.removeProperty('-webkit-line-clamp');
+  element.style.removeProperty('-webkit-box-orient');
+  if ((style?.lines ?? 1) > 1) {
+    element.style.display = '-webkit-box';
+    element.style.setProperty('-webkit-line-clamp', String(style?.lines ?? 2));
+    element.style.setProperty('-webkit-box-orient', 'vertical');
+  }
+}
+export function setMarketQuoteContent(element, row) {
+  const style = row.style;
+  const layoutStyle = resolveWebMarketLayoutStyle(row);
+  const price = element.querySelector('.ok-native-list-market-price');
+  if (price) {
+    price.textContent = row.price;
+    applyMarketTextStyle(price, style?.price, {
+      fontSize: 16,
+      lineHeight: 24,
+      weight: 500,
+      alignment: 'end'
+    });
+    applyValueSegments(price, row.priceSegments, style?.price?.fontSize ?? 16, style?.price?.lineHeight ?? 24, fontWeight(style?.price?.fontWeight, 500));
+  }
+  const change = element.querySelector('.ok-native-list-market-change');
+  if (change) {
+    change.textContent = row.change.text;
+    setData(change, 'tone', row.change.tone);
+    applyMarketTextStyle(change, style?.change, {
+      fontSize: 14,
+      lineHeight: 20,
+      weight: 500,
+      alignment: 'center'
+    });
+    applyValueSegments(change, row.change.textSegments, style?.change?.fontSize ?? 14, style?.change?.lineHeight ?? 20, fontWeight(style?.change?.fontWeight, 500));
+    change.style.width = String(layoutStyle.changeWidth) + 'px';
+    change.style.height = String(layoutStyle.changeHeight) + 'px';
+    change.style.borderRadius = String(layoutStyle.changeCornerRadius) + 'px';
+    change.style.color = style?.change?.color ?? row.change.textColor ?? '';
+    change.style.background = row.change.backgroundColor ?? '';
+  }
+  if (price) applyTextStyleToSlot(price, style?.price ?? {}, 1);
+  if (change) applyTextStyleToSlot(change, style?.change ?? {}, 1);
+  element.setAttribute('aria-label', row.accessibilityLabel ?? [row.title, row.subtitle, row.price, row.change.text].filter(Boolean).join(', '));
+}
+function createMarketRow(document, primitives, row) {
+  const body = createElement(document, 'div', 'ok-native-list-row ok-native-list-market');
+  setData(body, 'variant', row.variant);
+  const style = row.style;
+  const layoutStyle = resolveWebMarketLayoutStyle(row);
+  body.style.padding = String(layoutStyle.verticalPadding) + 'px ' + String(layoutStyle.horizontalPadding) + 'px';
+  body.style.gap = '0px';
+  if (row.leadingAction) {
+    const action = primitives.iconAction(row.leadingAction.name, row.leadingAction.actionKey, row.leadingAction.disabled, row.leadingAction.tintColor);
+    action.style.flex = '0 0 36px';
+    action.style.width = '36px';
+    action.style.height = '36px';
+    action.style.marginRight = '5px';
+    setData(action, 'testid', row.leadingAction.testID);
+    if (row.leadingAction.accessibilityLabel) action.setAttribute('aria-label', row.leadingAction.accessibilityLabel);
+    markActionAnchorSource(action, 'leadingAction');
+    body.appendChild(action);
+  }
+  const visual = primitives.visual(row.leading);
+  if (visual) {
+    const width = layoutStyle.imageWidth;
+    const height = layoutStyle.imageHeight;
+    visual.style.width = String(width) + 'px';
+    visual.style.height = String(height) + 'px';
+    visual.style.flexBasis = String(width) + 'px';
+    visual.style.borderRadius = String(layoutStyle.imageCornerRadius) + 'px';
+    const borderColor = 'borderColor' in row.leading ? row.leading.borderColor : undefined;
+    if (borderColor) {
+      visual.style.border = '1px solid ' + borderColor;
+      visual.style.boxSizing = 'border-box';
+    }
+    visual.querySelectorAll('img').forEach(image => {
+      if (!image.classList.contains('ok-native-list-visual-corner')) {
+        image.style.width = '100%';
+        image.style.height = '100%';
+        if (borderColor) {
+          image.style.borderRadius = '0';
+          image.style.clipPath = 'inset(-1px round ' + String(layoutStyle.imageCornerRadius) + 'px)';
+        }
+        image.style.objectFit = style?.image?.contentFit === 'center' ? 'none' : style?.image?.contentFit ?? image.style.objectFit;
+      } else {
+        image.style.width = '20px';
+        image.style.height = '20px';
+        if (borderColor) {
+          image.style.right = '-5px';
+          image.style.bottom = '-5px';
+        }
+      }
+    });
+    visual.style.marginInlineEnd = String(layoutStyle.leadingGap) + 'px';
+    body.appendChild(visual);
+  }
+  const main = createElement(document, 'span', 'ok-native-list-market-main');
+  main.style.gap = String(style?.lineGap ?? 0) + 'px';
+  const titleLine = createElement(document, 'span', 'ok-native-list-market-title-line');
+  titleLine.style.gap = String(layoutStyle.titleBadgeGap) + 'px';
+  const title = createElement(document, 'span', 'ok-native-list-market-title', row.title);
+  applyMarketTextStyle(title, style?.title, {
+    fontSize: 16,
+    lineHeight: 24,
+    weight: 500,
+    alignment: 'start'
+  });
+  titleLine.appendChild(title);
+  row.badges?.forEach((badge, slot) => {
+    const element = createElement(document, badge.actionKey ? 'button' : 'span', 'ok-native-list-market-badge', badge.text);
+    if (badge.actionKey) {
+      element.setAttribute('type', 'button');
+      setData(element, 'nativeListAction', badge.actionKey);
+      markActionAnchorSource(element, 'marketBadge', slot);
+    }
+    setData(element, 'tone', badge.tone);
+    element.style.color = badge.textColor ?? (badge.tone === 'success' ? 'var(--nl-positive)' : badge.tone === 'danger' ? 'var(--nl-negative)' : badge.tone === 'info' ? 'var(--nl-info)' : badge.tone === 'warning' ? 'var(--nl-primary)' : '');
+    element.style.background = badge.backgroundColor ?? ((badge.icon || badge.iconName) && !badge.text ? 'transparent' : '');
+    if ((badge.icon || badge.iconName) && !badge.text) {
+      element.style.padding = '0';
+    }
+    if (badge.style) {
+      applyTextStyleToSlot(element, badge.style);
+      if (badge.style.height !== undefined) element.style.height = `${badge.style.height}px`;
+      if (badge.style.horizontalPadding !== undefined && badge.text) element.style.paddingInline = `${badge.style.horizontalPadding}px`;
+    }
+    if (badge.accessibilityLabel) element.setAttribute('aria-label', badge.accessibilityLabel);
+    if (badge.icon) {
+      const icon = primitives.thumbnail(badge.icon);
+      if (icon) {
+        icon.className = '';
+        icon.style.borderRadius = '50%';
+        element.prepend(icon);
+      }
+    }
+    if (badge.iconName === 'verified') {
+      const icon = createElement(document, 'span', 'ok-native-list-market-badge-icon');
+      primitives.icon(icon, 'BadgeVerifiedSolid');
+      element.prepend(icon);
+    }
+    titleLine.appendChild(element);
+  });
+  main.appendChild(titleLine);
+  if (row.subtitlePrefix || row.subtitle || row.subtitleSegments?.length) {
+    const subtitleLine = createElement(document, 'span', 'ok-native-list-market-subtitle-line');
+    subtitleLine.style.display = 'flex';
+    subtitleLine.style.alignItems = 'center';
+    subtitleLine.style.minWidth = '0';
+    subtitleLine.style.overflow = 'hidden';
+    subtitleLine.style.gap = String(row.subtitlePrefix ? row.subtitlePrefix.gap ?? 4 : 0) + 'px';
+    if (row.subtitlePrefix) {
+      const prefix = createElement(document, 'span', 'ok-native-list-market-subtitle-prefix', row.subtitlePrefix.text);
+      applyMarketTextStyle(prefix, row.subtitlePrefix.style, {
+        fontSize: 12,
+        lineHeight: 16,
+        weight: 400,
+        alignment: 'start'
+      });
+      prefix.style.display = 'block';
+      prefix.style.flex = '1 1 auto';
+      prefix.style.minWidth = '0';
+      prefix.style.overflow = 'hidden';
+      prefix.style.textOverflow = 'ellipsis';
+      prefix.style.color = row.subtitlePrefix.style?.color ?? 'var(--nl-secondary)';
+      if (row.subtitlePrefix.maxWidth !== undefined) {
+        prefix.style.maxWidth = String(row.subtitlePrefix.maxWidth) + 'px';
+      }
+      subtitleLine.appendChild(prefix);
+    }
+    if (row.subtitle || row.subtitleSegments?.length) {
+      const subtitle = createElement(document, 'span', 'ok-native-list-market-subtitle', row.subtitle);
+      applyMarketTextStyle(subtitle, style?.subtitle, {
+        fontSize: 14,
+        lineHeight: 20,
+        weight: 400,
+        alignment: 'start'
+      });
+      applyValueSegments(subtitle, row.subtitleSegments, style?.subtitle?.fontSize ?? 14, style?.subtitle?.lineHeight ?? 20, fontWeight(style?.subtitle?.fontWeight, 400));
+      subtitle.style.flex = row.subtitlePrefix ? '0 0 auto' : '1 1 auto';
+      subtitleLine.appendChild(subtitle);
+    }
+    main.appendChild(subtitleLine);
+  }
+  body.appendChild(main);
+  const trailing = createElement(document, 'span', 'ok-native-list-market-trailing');
+  trailing.style.gap = String(layoutStyle.trailingGap) + 'px';
+  trailing.append(createElement(document, 'span', 'ok-native-list-market-price'), createElement(document, 'span', 'ok-native-list-market-change'));
+  body.appendChild(trailing);
+  setMarketQuoteContent(body, row);
+  for (const key of ['title', 'subtitle']) {
+    const text = body.querySelector(`.ok-native-list-market-${key}`);
+    if (text) applyTextStyleToSlot(text, style?.[key] ?? {}, 1);
+  }
+  const prefix = body.querySelector('.ok-native-list-market-subtitle-prefix');
+  if (prefix) applyTextStyleToSlot(prefix, row.subtitlePrefix?.style ?? {}, 1);
+  return body;
+}
+// A quote payload changes only the quote nodes; full binds retain equal image slots.
+
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  const content = JSON.stringify({
+    ...row,
+    price: undefined,
+    priceSegments: undefined,
+    change: undefined,
+    accessibilityLabel: undefined
+  });
+  if (v.content === content) {
+    setMarketQuoteContent(body, row);
+    return;
+  }
+  let index = 0;
+  function asset(source, createAsset) {
+    const slot = index++,
+      key = JSON.stringify([row.key, source]);
+    let entry = v.assets[slot];
+    if (entry?.key !== key) {
+      if (entry) primitives.dispose(entry.node);
+      const node = createAsset();
+      if (!node) return;
+      entry = {
+        key,
+        node,
+        defaults: new RowVisualStyle(node)
+      };
+      v.assets[slot] = entry;
+    }
+    entry.defaults.restore();
+    return entry.node;
+  }
+  const next = createMarketRow(body.ownerDocument, {
+    ...primitives,
+    visual: source => asset(source, () => primitives.visual(source)),
+    thumbnail: source => asset(source, () => primitives.thumbnail(source))
+  }, row);
+  v.assets.slice(index).forEach(slot => primitives.dispose(slot.node));
+  v.assets.length = index;
+  body.replaceChildren(...Array.from(next.childNodes));
+  body.className = next.className;
+  body.style.cssText = next.style.cssText;
+  body.dataset.variant = row.variant;
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  body.setAttribute('aria-label', next.getAttribute('aria-label') ?? '');
+  v.content = content;
+}
+function create(document, row, primitives) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'market';
+  views.set(body, {
+    assets: [],
+    content: '',
+    primitives
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  v.assets.forEach(slot => v.primitives.dispose(slot.node));
+  v.assets = [];
+  v.content = '';
+  body.replaceChildren();
+}
+export const marketRowRenderer = {
+  key: 'market',
+  create,
+  bind,
+  recycle,
+  measure: (row, _width) => {
+    const style = resolveWebMarketLayoutStyle(row);
+    return Math.max(row.variant === 'stock' ? 72 : 68, style.imageHeight + 2 * style.verticalPadding);
+  },
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=MarketRowRenderer.js.map

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

@@ -0,0 +1,132 @@
+"use strict";
+
+const views = new WeakMap();
+function bind(body, row, primitives) {
+  const v = views.get(body);
+  v.primitives = primitives;
+  const style = row.style;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  if (style?.horizontalPadding !== undefined) body.style.paddingInline = `${style.horizontalPadding}px`;
+  if (style?.verticalPadding !== undefined) body.style.paddingBlock = `${style.verticalPadding}px`;
+  const text = (node, value, roleStyle) => {
+    node.style.cssText = '';
+    node.textContent = value;
+    if (roleStyle) primitives.textStyle(node, roleStyle);
+  };
+  text(v.title, row.title, style?.title);
+  text(v.subtitle, row.subtitle || '-', style?.subtitle);
+  text(v.badge, row.badge?.text ?? '', style?.badge);
+  if (row.badge) {
+    v.metadata.appendChild(v.badge);
+    v.badge.dataset.tone = row.badge.tone ?? '';
+  } else v.badge.remove();
+  v.metadata.style.cssText = '';
+  if (style?.leadingGap !== undefined) v.metadata.style.paddingTop = `${style.leadingGap}px`;
+  if (style?.lineGap !== undefined) Object.assign(v.metadata.style, {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: `${style.lineGap}px`
+  });
+  const imageKey = JSON.stringify([row.key, row.image, row.imageState]);
+  if (v.imageKey !== imageKey) {
+    if (v.image) {
+      primitives.dispose(v.image);
+      v.image.remove();
+    }
+    v.image = row.image && !row.imageState ? primitives.thumbnail(row.image) : undefined;
+    if (!v.image) {
+      v.image = body.ownerDocument.createElement('span');
+      v.image.dataset.state = row.imageState ?? 'empty';
+      v.image.textContent = row.imageState === 'error' ? '▧' : '';
+    }
+    v.image.className = 'ok-native-list-media-image';
+    body.insertBefore(v.image, v.metadata);
+    v.imageKey = imageKey;
+  }
+  const image = v.image;
+  // Only restore geometry; loading opacity is owned by the image primitive.
+  ['width', 'height', 'border-radius', 'overflow', 'object-fit'].forEach(key => image.style.removeProperty(key));
+  if (style?.image?.width !== undefined) image.style.width = `${style.image.width}px`;
+  if (style?.image?.height !== undefined) image.style.height = `${style.image.height}px`;
+  const shape = style?.image?.shape;
+  const radius = style?.image?.cornerRadius !== undefined ? `${style.image.cornerRadius}px` : shape === 'circle' ? '50%' : shape === 'square' ? '0px' : shape === 'rounded' ? '10px' : undefined;
+  if (radius !== undefined) image.style.setProperty('border-radius', radius, 'important');
+  const fit = style?.image?.contentFit ?? row.image?.contentFit;
+  if (fit) image.style.objectFit = fit === 'center' ? 'none' : fit;
+  const networkKey = JSON.stringify([row.key, row.networkImage]);
+  if (v.networkKey !== networkKey) {
+    if (v.network) {
+      primitives.dispose(v.network);
+      v.network.remove();
+    }
+    v.network = row.networkImage ? primitives.thumbnail(row.networkImage) : undefined;
+    if (v.network) {
+      v.network.className = 'ok-native-list-media-network';
+      v.subtitleLine.appendChild(v.network);
+    }
+    v.networkKey = networkKey;
+  }
+  if (row.closeActionKey) {
+    v.close.dataset.nativeListAction = row.closeActionKey;
+    body.appendChild(v.close);
+  } else v.close.remove();
+}
+function create(document, row, primitives) {
+  const node = (tag, className, slot) => {
+    const n = document.createElement(tag);
+    n.className = className;
+    if (slot) n.dataset.nlSlot = slot;
+    return n;
+  };
+  const body = node('div', 'ok-native-list-row ok-native-list-media');
+  body.dataset.nlRenderer = 'mediaTile';
+  const metadata = node('div', 'ok-native-list-media-meta');
+  const subtitleLine = node('div', 'ok-native-list-media-subtitle-row');
+  const title = node('div', 'ok-native-list-media-title', 'title');
+  const subtitle = node('span', 'ok-native-list-media-subtitle', 'subtitle');
+  const badge = node('span', 'ok-native-list-badge', 'badge');
+  const close = node('button', 'ok-native-list-media-close');
+  close.type = 'button';
+  close.textContent = '×';
+  close.setAttribute('aria-label', 'Close');
+  close.dataset.nativeListAnchorSource = 'mediaClose';
+  subtitleLine.appendChild(subtitle);
+  metadata.append(subtitleLine, title);
+  body.appendChild(metadata);
+  views.set(body, {
+    title,
+    subtitle,
+    badge,
+    metadata,
+    subtitleLine,
+    close,
+    primitives,
+    imageKey: '',
+    networkKey: ''
+  });
+  bind(body, row, primitives);
+  return body;
+}
+function recycle(body) {
+  const v = views.get(body);
+  if (!v) return;
+  [v.image, v.network].forEach(n => {
+    if (n) {
+      v.primitives.dispose(n);
+      n.remove();
+    }
+  });
+  v.image = v.network = undefined;
+  v.imageKey = v.networkKey = '';
+}
+export const mediaTileRowRenderer = {
+  key: 'mediaTile',
+  create,
+  bind,
+  recycle,
+  measure: (_row, _width) => 244,
+  measureRendered: (_body, _row) => undefined
+};
+//# sourceMappingURL=MediaTileRowRenderer.js.map

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

@@ -0,0 +1,165 @@
+"use strict";
+
+import { RowVisualStyle } from "./RowVisual.js";
+export function resolveMessageRow(row) {
+  const text = (value, style, fontSize, lineHeight, lines, color, fontWeight = 'regular') => ({
+    value,
+    style: {
+      fontSize,
+      lineHeight,
+      lines,
+      color,
+      fontWeight,
+      alignment: 'start',
+      ...style
+    }
+  });
+  return {
+    title: text(row.title, row.style?.title, 15, 20, 2, 'var(--nl-primary)', 'semibold'),
+    body: text(row.body, row.style?.body, 13, 18, row.bodyLines ?? 3, 'var(--nl-secondary)'),
+    time: text(row.time ?? '', row.style?.time, 11, 16, 1, 'var(--nl-secondary)'),
+    horizontalPadding: row.style?.horizontalPadding ?? 12,
+    verticalPadding: row.style?.verticalPadding ?? 8,
+    lineGap: row.style?.lineGap ?? 0,
+    leadingGap: row.style?.leadingGap ?? 12,
+    imageWidth: row.style?.image?.width ?? (row.leading?.kind === 'stackedImages' ? 48 : 40),
+    imageHeight: row.style?.image?.height ?? 40,
+    image: row.style?.image,
+    automaticHeight: (row.style?.container?.height ?? row.height) === undefined
+  };
+}
+const viewsByBody = new WeakMap();
+const identity = (key, source) => JSON.stringify([key, source]);
+export function classifyMessageUpdate(old, row) {
+  if (!old || old.key !== row.key) return 'replace';
+  if (JSON.stringify(old) === JSON.stringify(row)) return 'unchanged';
+  if (identity(row.key, old.leading) !== identity(row.key, row.leading) || identity(row.key, old.thumbnail) !== identity(row.key, row.thumbnail)) return 'assets';
+  return 'content';
+}
+export function bindMessageRow(body, row, primitives) {
+  const views = viewsByBody.get(body);
+  if (!views) throw new Error('Message renderer received an incompatible body');
+  const resolved = resolveMessageRow(row);
+  views.primitives = primitives;
+  const update = classifyMessageUpdate(views.row, row);
+  if (update === 'unchanged') return;
+  body.style.cssText = '';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  body.style.padding = `${resolved.verticalPadding}px ${resolved.horizontalPadding}px`;
+  body.style.height = resolved.automaticHeight ? 'auto' : '100%';
+  views.column.style.cssText = '';
+  views.column.style.rowGap = `${resolved.lineGap}px`;
+  for (const [view, text] of [[views.title, resolved.title], [views.body, resolved.body], [views.time, resolved.time]]) {
+    view.style.cssText = '';
+    view.textContent = text.value;
+    primitives.textStyle(view, text.style);
+  }
+  views.unread.style.cssText = '';
+  if (row.body) {
+    if (!views.body.parentElement) views.column.appendChild(views.body);
+  } else views.body.remove();
+  if (row.unread) {
+    if (!views.unread.parentElement) body.insertBefore(views.unread, views.column);
+  } else views.unread.remove();
+  const leadingIdentity = identity(row.key, row.leading);
+  if (leadingIdentity !== views.leadingIdentity) {
+    if (views.leading) {
+      primitives.dispose(views.leading);
+      views.leading.remove();
+    }
+    views.leading = primitives.visual(row.leading);
+    views.leadingIdentity = leadingIdentity;
+    views.visualStyle = undefined;
+    if (views.leading) {
+      body.insertBefore(views.leading, body.firstChild);
+      views.visualStyle = new RowVisualStyle(views.leading);
+    }
+  }
+  views.visualStyle?.apply(resolved.image, resolved.imageWidth, resolved.imageHeight, resolved.leadingGap - 12);
+  const thumbnailIdentity = identity(row.key, row.thumbnail);
+  if (thumbnailIdentity !== views.thumbnailIdentity) {
+    if (views.thumbnail) {
+      primitives.dispose(views.thumbnail);
+      views.thumbnail.remove();
+    }
+    views.thumbnail = row.thumbnail ? primitives.thumbnail(row.thumbnail) : undefined;
+    views.thumbnailIdentity = thumbnailIdentity;
+    if (views.thumbnail) body.appendChild(views.thumbnail);
+  }
+  if (views.thumbnail) views.thumbnail.style.alignSelf = '';
+  views.row = row;
+}
+export function createMessageRow(document, row, primitives) {
+  const span = (className, role) => {
+    const view = document.createElement('span');
+    view.className = className;
+    if (role) view.dataset.nlSlot = role;
+    return view;
+  };
+  const body = document.createElement('div');
+  body.className = 'ok-native-list-row ok-native-list-standard';
+  body.dataset.nlRenderer = 'message';
+  const column = span('ok-native-list-flex');
+  const title = span('ok-native-list-title', 'title');
+  const text = span('ok-native-list-secondary', 'body');
+  const time = span('ok-native-list-time', 'time');
+  column.append(title, text);
+  body.append(column, time);
+  viewsByBody.set(body, {
+    column,
+    title,
+    body: text,
+    time,
+    unread: span('ok-native-list-unread'),
+    leadingIdentity: '',
+    thumbnailIdentity: '',
+    primitives
+  });
+  bindMessageRow(body, row, primitives);
+  return body;
+}
+export function recycleMessageRow(body) {
+  const views = viewsByBody.get(body);
+  if (!views) return;
+  if (views.leading) {
+    views.primitives.dispose(views.leading);
+    views.leading.remove();
+  }
+  if (views.thumbnail) {
+    views.primitives.dispose(views.thumbnail);
+    views.thumbnail.remove();
+  }
+  views.leading = undefined;
+  views.thumbnail = undefined;
+  views.row = undefined;
+  views.leadingIdentity = '';
+  views.thumbnailIdentity = '';
+  views.visualStyle = undefined;
+}
+export function measureMessageRow(row, availableWidth) {
+  const r = resolveMessageRow(row);
+  const estimate = (text, width) => {
+    if (!text.value) return 0;
+    const value = text.style.lines === 1 ? text.value.replace(/\r\n|[\r\n]/g, ' ') : text.value;
+    const lines = value.split(/\r\n|[\r\n]/).reduce((total, line) => total + Math.max(1, Math.ceil(Array.from(line).reduce((sum, char) => sum + (char.charCodeAt(0) > 255 ? text.style.fontSize : text.style.fontSize / 2), 0) / Math.max(1, width))), 0);
+    return Math.min(text.style.lines, lines) * text.style.lineHeight;
+  };
+  const timeWidth = Math.min(availableWidth / 3, Math.max(0, r.time.value.length * r.time.style.fontSize / 2));
+  const textWidth = availableWidth - r.horizontalPadding * 2 - (row.leading ? r.imageWidth + r.leadingGap : 0) - (row.thumbnail ? 76 : 0) - (row.unread ? 19 : 0) - timeWidth - 12;
+  const columnHeight = estimate(r.title, textWidth) + estimate(r.body, textWidth) + (row.body ? r.lineGap : 0);
+  return r.verticalPadding * 2 + Math.max(columnHeight, estimate(r.time, timeWidth), row.leading ? r.imageHeight : 0, row.thumbnail ? 64 : 0);
+}
+export const messageRowRenderer = {
+  key: 'message',
+  create: createMessageRow,
+  bind: bindMessageRow,
+  recycle: recycleMessageRow,
+  measure: measureMessageRow,
+  measureRendered: (body, row) => {
+    if (!resolveMessageRow(row).automaticHeight) return undefined;
+    const height = body.getBoundingClientRect().height;
+    return height > 0 ? Math.max(0, height + (row.size === 'small' ? -8 : row.size === 'large' ? 12 : 0)) : undefined;
+  }
+};
+//# sourceMappingURL=MessageRowRenderer.js.map