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

package/lib/module/validation.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { ROW_BOX_STYLE_KEYS_BY_TYPE } from "./models.js";
 const MAX_KEY_LENGTH = 256;
 const MAX_TEXT_LENGTH = 4096;
 const MAX_BADGES = 2;
@@ -68,8 +69,90 @@ function assertBoundedStyleNumber(value, path, min, max) {
     fail(path, `must be within ${min}...${max}`);
   }
 }
-function assertMarketTextStyle(style, path) {
-  if (!style) return;
+
+/**
+ * The named typography scale from docs/STYLE_SPEC.md §3.2. Tokens are resolved
+ * to numbers here, before serialization, so the iOS, Android, and Web renderers
+ * never learn the vocabulary and cannot drift from it.
+ */
+const TYPOGRAPHY_TOKENS = {
+  $headingXl: {
+    fontSize: 24,
+    lineHeight: 32,
+    fontWeight: 'semibold'
+  },
+  $headingLg: {
+    fontSize: 20,
+    lineHeight: 28,
+    fontWeight: 'semibold'
+  },
+  $headingMd: {
+    fontSize: 18,
+    lineHeight: 24,
+    fontWeight: 'semibold'
+  },
+  $headingSm: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'medium'
+  },
+  $headingXs: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: 'semibold'
+  },
+  $bodyLg: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'regular'
+  },
+  $bodyMd: {
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: 'regular'
+  },
+  $bodySm: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: 'regular'
+  },
+  $bodyXs: {
+    fontSize: 11,
+    lineHeight: 16,
+    fontWeight: 'regular'
+  }
+};
+
+/** Style keys name model fields, never views. See docs/STYLE_SPEC.md §4. */
+const TEXT_STYLE_KEYS_BY_ROW_TYPE = {
+  identity: ['title', 'subtitle', 'tertiary', 'badge', 'value', 'valueSecondary'],
+  walletGroup: [],
+  rail: ['title', 'badge', 'status'],
+  activity: ['title', 'description', 'status', 'primaryAmount', 'secondaryAmount'],
+  message: ['title', 'body', 'time'],
+  dataRow: ['columns', 'columnSecondary', 'index'],
+  market: ['title', 'subtitle', 'price', 'change'],
+  mediaTile: ['title', 'subtitle', 'badge'],
+  metricCard: ['title', 'value', 'subtitle', 'trend'],
+  sectionHeader: ['title', 'subtitle', 'value'],
+  action: ['title', 'value'],
+  system: ['title', 'message', 'actionText']
+};
+const EXTRA_STYLE_KEYS_BY_ROW_TYPE = {
+  market: ['titleBadgeLayout', 'contentTrailingGap', 'subtitleTrailingPadding', 'changeWidth', 'changeHeight', 'changeCornerRadius']
+};
+function assertTextStyle(style, path, additionalKeys = []) {
+  if (style === undefined) return;
+  if (typeof style !== 'object' || style === null || Array.isArray(style)) {
+    fail(path, 'must be an object');
+  }
+  assertUnknownKeys(style, ['token', 'fontSize', 'fontWeight', 'color', 'lineHeight', 'lines', 'truncate', 'alignment', 'verticalAlignment', 'offsetY', ...additionalKeys], path, 'text style key');
+  if (style.color !== undefined && (typeof style.color !== 'string' || !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(style.color))) {
+    fail(`${path}.color`, 'must be #RRGGBB or #RRGGBBAA');
+  }
+  if (style.token !== undefined && !Object.prototype.hasOwnProperty.call(TYPOGRAPHY_TOKENS, style.token)) {
+    fail(`${path}.token`, `must be one of ${Object.keys(TYPOGRAPHY_TOKENS).join(', ')}`);
+  }
   assertBoundedStyleNumber(style.fontSize, `${path}.fontSize`, 8, 48);
   assertBoundedStyleNumber(style.lineHeight, `${path}.lineHeight`, 8, 64);
   if (style.fontWeight !== undefined && !['regular', 'medium', 'semibold', 'bold'].includes(style.fontWeight)) {
@@ -78,36 +161,191 @@ function assertMarketTextStyle(style, path) {
   if (style.alignment !== undefined && !['start', 'center', 'end'].includes(style.alignment)) {
     fail(`${path}.alignment`, 'must be start, center, or end');
   }
-  if (style.lines !== undefined && ![1, 2].includes(style.lines)) {
-    fail(`${path}.lines`, 'must be 1 or 2');
+  if (style.lines !== undefined && ![1, 2, 3].includes(style.lines)) {
+    fail(`${path}.lines`, 'must be 1, 2, or 3');
+  }
+  if (style.truncate !== undefined && !['tail', 'clip'].includes(style.truncate)) {
+    fail(`${path}.truncate`, 'must be tail or clip');
+  }
+  if (style.verticalAlignment !== undefined && !['top', 'center', 'bottom'].includes(style.verticalAlignment)) {
+    fail(`${path}.verticalAlignment`, 'must be top, center, or bottom');
+  }
+  assertBoundedStyleNumber(style.offsetY, `${path}.offsetY`, -8, 8);
+}
+function assertBoxStyle(style, path) {
+  const container = style.container;
+  if (container !== undefined) {
+    const containerPath = `${path}.container`;
+    if (typeof container !== 'object' || container === null || Array.isArray(container)) {
+      fail(containerPath, 'must be an object');
+    }
+    assertUnknownKeys(container, ['height', 'backgroundColor', 'opacity', 'cornerRadius', 'borderWidth', 'borderColor', 'contentVerticalAlignment'], containerPath, 'row container style key');
+    for (const key of ['backgroundColor', 'borderColor']) {
+      const value = container[key];
+      if (value !== undefined && (typeof value !== 'string' || !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(value))) {
+        fail(`${containerPath}.${key}`, 'must be #RRGGBB or #RRGGBBAA');
+      }
+    }
+    assertBoundedStyleNumber(container.height, `${containerPath}.height`, 0, 4096);
+    assertBoundedStyleNumber(container.opacity, `${containerPath}.opacity`, 0, 1);
+    assertBoundedStyleNumber(container.cornerRadius, `${containerPath}.cornerRadius`, 0, 80);
+    assertBoundedStyleNumber(container.borderWidth, `${containerPath}.borderWidth`, 0, 8);
+    if (container.contentVerticalAlignment !== undefined && !['top', 'center', 'bottom'].includes(container.contentVerticalAlignment)) {
+      fail(`${containerPath}.contentVerticalAlignment`, 'must be top, center, or bottom');
+    }
+  }
+  for (const field of ['horizontalPadding', 'verticalPadding', 'leadingGap', 'titleBadgeGap', 'trailingGap']) {
+    assertBoundedStyleNumber(style[field], `${path}.${field}`, 0, 64);
+  }
+  assertBoundedStyleNumber(style.lineGap, `${path}.lineGap`, 0, 16);
+  if (style.image !== undefined) {
+    if (typeof style.image !== 'object' || style.image === null || Array.isArray(style.image)) {
+      fail(`${path}.image`, 'must be an object');
+    }
+    assertUnknownKeys(style.image, ['width', 'height', 'shape', 'cornerRadius', 'contentFit'], `${path}.image`, 'image style key');
+    assertBoundedStyleNumber(style.image.width, `${path}.image.width`, 1, 160);
+    assertBoundedStyleNumber(style.image.height, `${path}.image.height`, 1, 160);
+    assertBoundedStyleNumber(style.image.cornerRadius, `${path}.image.cornerRadius`, 0, 80);
+    assertVisualShape(style.image.shape, `${path}.image.shape`);
+    if (style.image.contentFit !== undefined && !['cover', 'contain', 'fill', 'center'].includes(style.image.contentFit)) {
+      fail(`${path}.image.contentFit`, 'must be cover, contain, fill, or center');
+    }
   }
 }
 function assertMarketStyle(style, path) {
   if (!style) return;
-  for (const field of ['horizontalPadding', 'verticalPadding', 'leadingGap', 'titleBadgeGap', 'trailingGap', 'contentTrailingGap', 'subtitleTrailingPadding']) {
+  assertBoxStyle(style, path);
+  for (const field of ['contentTrailingGap', 'subtitleTrailingPadding']) {
     assertBoundedStyleNumber(style[field], `${path}.${field}`, 0, 64);
   }
   // OneKey patch: validate the opt-in Market badge layout.
   if (style.titleBadgeLayout !== undefined && style.titleBadgeLayout !== 'inline') {
     fail(`${path}.titleBadgeLayout`, 'must be inline when provided');
   }
-  assertBoundedStyleNumber(style.lineGap, `${path}.lineGap`, 0, 16);
   assertBoundedStyleNumber(style.changeWidth, `${path}.changeWidth`, 1, 160);
   assertBoundedStyleNumber(style.changeHeight, `${path}.changeHeight`, 1, 160);
   assertBoundedStyleNumber(style.changeCornerRadius, `${path}.changeCornerRadius`, 0, 80);
-  if (style.image) {
-    assertBoundedStyleNumber(style.image.width, `${path}.image.width`, 1, 160);
-    assertBoundedStyleNumber(style.image.height, `${path}.image.height`, 1, 160);
-    assertBoundedStyleNumber(style.image.cornerRadius, `${path}.image.cornerRadius`, 0, 80);
-    assertVisualShape(style.image.shape, `${path}.image.shape`);
-    if (style.image.contentFit !== undefined && !['cover', 'contain', 'fill', 'center'].includes(style.image.contentFit)) {
-      fail(`${path}.image.contentFit`, 'must be cover, contain, fill, or center');
+  assertTextStyle(style.title, `${path}.title`);
+  assertTextStyle(style.subtitle, `${path}.subtitle`);
+  assertTextStyle(style.price, `${path}.price`);
+  assertTextStyle(style.change, `${path}.change`);
+}
+
+/**
+ * Rejects keys the template does not declare, so a style written for one
+ * template cannot reach a shared view through another. See docs/STYLE_SPEC.md
+ * §7 rule 1.
+ */
+function assertRowStyle(row, path) {
+  const style = row.style;
+  if (style === undefined) return;
+  if (typeof style !== 'object' || style === null || Array.isArray(style)) {
+    fail(`${path}.style`, 'must be an object');
+  }
+  const textKeys = TEXT_STYLE_KEYS_BY_ROW_TYPE[row.type] ?? [];
+  const allowed = new Set(['container', ...ROW_BOX_STYLE_KEYS_BY_TYPE[row.type], ...textKeys, ...(EXTRA_STYLE_KEYS_BY_ROW_TYPE[row.type] ?? [])]);
+  Object.keys(style).forEach(key => {
+    if (!allowed.has(key)) {
+      fail(`${path}.style.${key}`, `is not a style key of the "${row.type}" template`);
     }
+  });
+  // Market keeps its own richer assertions, driven from assertMarketRow.
+  if (row.type === 'market') return;
+  assertBoxStyle(style, `${path}.style`);
+  const slots = style;
+  textKeys.forEach(key => assertTextStyle(slots[key], `${path}.style.${key}`));
+}
+const LIST_STYLE_KEYS = ['separator', 'groupCornerRadius'];
+const SEPARATOR_STYLE_KEYS = ['inset', 'color'];
+function assertUnknownKeys(value, allowed, path, subject) {
+  Object.keys(value).forEach(key => {
+    if (!allowed.includes(key)) fail(`${path}.${key}`, `is not a ${subject}`);
+  });
+}
+function assertListStyle(listStyle, path) {
+  if (listStyle === undefined) return;
+  if (typeof listStyle !== 'object' || listStyle === null || Array.isArray(listStyle)) {
+    fail(path, 'must be an object');
+  }
+  assertUnknownKeys(listStyle, LIST_STYLE_KEYS, path, 'list style key');
+  assertBoundedStyleNumber(listStyle.groupCornerRadius, `${path}.groupCornerRadius`, 0, 40);
+  const separator = listStyle.separator;
+  if (separator === undefined) return;
+  if (typeof separator !== 'object' || separator === null || Array.isArray(separator)) {
+    fail(`${path}.separator`, 'must be an object');
+  }
+  assertUnknownKeys(separator, SEPARATOR_STYLE_KEYS, `${path}.separator`, 'separator style key');
+  assertBoundedStyleNumber(separator.inset, `${path}.separator.inset`, 0, 64);
+  // Same format as every row style color; renderers parse it directly.
+  if (separator.color !== undefined && (typeof separator.color !== 'string' || !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(separator.color))) {
+    fail(`${path}.separator.color`, 'must be #RRGGBB or #RRGGBBAA');
   }
-  assertMarketTextStyle(style.title, `${path}.title`);
-  assertMarketTextStyle(style.subtitle, `${path}.subtitle`);
-  assertMarketTextStyle(style.price, `${path}.price`);
-  assertMarketTextStyle(style.change, `${path}.change`);
+}
+
+/** Token resolution is idempotent: a resolved style carries no token. */
+function resolveTextStyle(style) {
+  if (!style?.token) return style;
+  const {
+    token,
+    ...overrides
+  } = style;
+  return {
+    ...TYPOGRAPHY_TOKENS[token],
+    ...overrides
+  };
+}
+function resolveStyleTokens(style, rowType) {
+  const textKeys = TEXT_STYLE_KEYS_BY_ROW_TYPE[rowType] ?? [];
+  let changed = false;
+  const next = {
+    ...style
+  };
+  textKeys.forEach(key => {
+    const slot = style[key];
+    const resolved = resolveTextStyle(slot);
+    if (resolved !== slot) {
+      next[key] = resolved;
+      changed = true;
+    }
+  });
+  return changed ? next : style;
+}
+function normalizeRowStyles(row) {
+  // Narrowing a generic does not reach the walletGroup members; go through the
+  // union type instead.
+  const model = row;
+  const style = row.style;
+  const nextStyle = style ? resolveStyleTokens(style, row.type) : style;
+  const prefix = model.type === 'market' ? model.subtitlePrefix : undefined;
+  const nextPrefixStyle = resolveTextStyle(prefix?.style);
+  let nextParent;
+  let nextChildren;
+  if (model.type === 'walletGroup') {
+    const parent = normalizeRowStyles(model.parent);
+    const children = model.children.map(normalizeRowStyles);
+    if (parent !== model.parent || children.some((child, index) => child !== model.children[index])) {
+      nextParent = parent;
+      nextChildren = children;
+    }
+  }
+  if (nextStyle === style && nextPrefixStyle === prefix?.style && nextParent === undefined) {
+    return row;
+  }
+  const next = {
+    ...row
+  };
+  if (nextStyle !== style) next.style = nextStyle;
+  if (prefix && nextPrefixStyle !== prefix.style) {
+    next.subtitlePrefix = {
+      ...prefix,
+      style: nextPrefixStyle
+    };
+  }
+  if (nextParent !== undefined) {
+    next.parent = nextParent;
+    next.children = nextChildren;
+  }
+  return next;
 }
 function assertMarketRow(row, path) {
   if (!['token', 'stock', 'perp'].includes(row.variant)) {
@@ -120,7 +358,7 @@ function assertMarketRow(row, path) {
     assertText(row.subtitlePrefix.text, `${path}.subtitlePrefix.text`);
     assertBoundedStyleNumber(row.subtitlePrefix.gap, `${path}.subtitlePrefix.gap`, 0, 64);
     assertBoundedStyleNumber(row.subtitlePrefix.maxWidth, `${path}.subtitlePrefix.maxWidth`, 1, 320);
-    assertMarketTextStyle(row.subtitlePrefix.style, `${path}.subtitlePrefix.style`);
+    assertTextStyle(row.subtitlePrefix.style, `${path}.subtitlePrefix.style`);
   }
   assertText(row.price, `${path}.price`);
   assertText(row.change.text, `${path}.change.text`);
@@ -159,7 +397,8 @@ function assertMarketRow(row, path) {
     badgeKeys.add(badge.key);
     assertText(badge.text, `${badgePath}.text`);
     // OneKey patch: share typography bounds with Market text styles.
-    assertMarketTextStyle(badge.style, `${badgePath}.style`);
+    assertTextStyle(badge.style, `${badgePath}.style`, ['height', 'horizontalPadding']);
+    if (badge.style) assertUnknownKeys(badge.style, ['fontSize', 'fontWeight', 'lineHeight', 'height', 'horizontalPadding'], `${badgePath}.style`, 'Market badge style key');
     assertBoundedStyleNumber(badge.style?.height, `${badgePath}.style.height`, 1, 64);
     assertBoundedStyleNumber(badge.style?.horizontalPadding, `${badgePath}.style.horizontalPadding`, 0, 32);
     if (badge.iconName !== undefined && badge.iconName !== 'verified') {
@@ -309,11 +548,17 @@ function assertWalletGroup(row, path) {
     keys.add(member.key);
   });
 }
+function assertRowType(type, path) {
+  if (typeof type !== 'string' || !Object.prototype.hasOwnProperty.call(ROW_BOX_STYLE_KEYS_BY_TYPE, type)) {
+    fail(`${path}.type`, 'is not supported');
+  }
+}
 function assertRow(row, index, path = `rows[${index}]`) {
+  assertRowType(row.type, path);
   assertKey(row.key, `${path}.key`);
   // OneKey patch: explicit dimensions and opacity cannot corrupt list layout.
   if (row.height !== undefined && (row.height < 0 || row.height > 4096)) fail(`${path}.height`, 'must be within 0...4096');
-  if (row.heightRounding !== undefined && (row.height === undefined || !['floor', 'nearest'].includes(row.heightRounding))) fail(`${path}.heightRounding`, 'requires an explicit height and must be floor or nearest');
+  if (row.heightRounding !== undefined && (row.height === undefined && row.style?.container?.height === undefined || !['floor', 'nearest'].includes(row.heightRounding))) fail(`${path}.heightRounding`, 'requires an explicit height and must be floor or nearest');
   if (row.opacity !== undefined && (row.opacity < 0 || row.opacity > 1)) fail(`${path}.opacity`, 'must be within 0...1');
   if (row.groupId && !row.groupPosition) {
     fail(`${path}.groupPosition`, 'is required when groupId is present');
@@ -321,6 +566,7 @@ function assertRow(row, index, path = `rows[${index}]`) {
   if (!row.groupId && row.groupPosition) {
     fail(`${path}.groupId`, 'is required when groupPosition is present');
   }
+  assertRowStyle(row, path);
   assertVisual(row, path);
   switch (row.type) {
     case 'walletGroup':
@@ -364,8 +610,8 @@ function assertRow(row, index, path = `rows[${index}]`) {
     case 'message':
       assertText(row.title, `${path}.title`);
       assertText(row.body, `${path}.body`);
-      if ((row.bodyLines ?? 3) < 1 || (row.bodyLines ?? 3) > 3) {
-        fail(`${path}.bodyLines`, 'must be within 1...3');
+      if (![1, 2, 3].includes(row.bodyLines ?? 3)) {
+        fail(`${path}.bodyLines`, 'must be 1, 2, or 3');
       }
       assertImage(row.thumbnail, `${path}.thumbnail`);
       break;
@@ -532,6 +778,7 @@ export function validateSnapshot(snapshot) {
       fail('snapshot.capabilities.sectionIndex', 'requires a vertical sectioned layout');
     }
   }
+  assertListStyle(snapshot.listStyle, 'snapshot.listStyle');
   const rowKeys = new Set();
   const sectionIndexTitles = new Set();
   snapshot.rows.forEach((row, index) => {
@@ -566,10 +813,41 @@ export function validateSnapshot(snapshot) {
   if (snapshot.selection?.mode === 'single' && selectedKeys.size > 1) {
     fail('snapshot.selection.selectedKeys', 'supports at most one key in single mode');
   }
-  return snapshot;
+  return normalizeSnapshotStyles(snapshot);
+}
+
+/**
+ * Resolves typography tokens to numbers. Returns the original snapshot when
+ * nothing needs resolving, so the common no-style path keeps object identity.
+ */
+function normalizeSnapshotStyles(snapshot) {
+  let changed = false;
+  const rows = snapshot.rows.map(row => {
+    const next = normalizeRowStyles(row);
+    if (next !== row) changed = true;
+    return next;
+  });
+  const emptyState = snapshot.emptyState ? normalizeRowStyles(snapshot.emptyState) : snapshot.emptyState;
+  const fixedFooter = snapshot.fixedFooter ? normalizeRowStyles(snapshot.fixedFooter) : snapshot.fixedFooter;
+  if (!changed && emptyState === snapshot.emptyState && fixedFooter === snapshot.fixedFooter) {
+    return snapshot;
+  }
+  return {
+    ...snapshot,
+    rows,
+    emptyState,
+    fixedFooter
+  };
 }
 function assertPatchChanges(patch, index) {
   const path = `patches[${index}].changes`;
+  const patchedStyle = patch.changes.style;
+  if (patchedStyle !== undefined) {
+    assertRowStyle({
+      type: patch.type,
+      style: patchedStyle
+    }, path);
+  }
   // OneKey patch: partial balance updates retain a valid, current accessibility label.
   if ('accessibilityLabel' in patch.changes) {
     assertText(patch.changes.accessibilityLabel, `${path}.accessibilityLabel`);
@@ -617,8 +895,8 @@ function assertPatchChanges(patch, index) {
       assertText(patch.changes.title, `${path}.title`);
       assertText(patch.changes.body, `${path}.body`);
       assertText(patch.changes.time, `${path}.time`);
-      if (patch.changes.bodyLines !== undefined && (patch.changes.bodyLines < 1 || patch.changes.bodyLines > 3)) {
-        fail(`${path}.bodyLines`, 'must be within 1...3');
+      if (patch.changes.bodyLines !== undefined && ![1, 2, 3].includes(patch.changes.bodyLines)) {
+        fail(`${path}.bodyLines`, 'must be 1, 2, or 3');
       }
       assertImage(patch.changes.thumbnail, `${path}.thumbnail`);
       break;
@@ -723,7 +1001,27 @@ export function validatePatches(patches) {
     }
     assertPatchChanges(patch, index);
   });
-  return patches;
+  return normalizePatchStyles(patches);
+}
+
+/** Patches reach the native side without passing through a snapshot. */
+function normalizePatchStyles(patches) {
+  let changed = false;
+  const next = patches.map(patch => {
+    const style = patch.changes.style;
+    if (!style) return patch;
+    const resolved = resolveStyleTokens(style, patch.type);
+    if (resolved === style) return patch;
+    changed = true;
+    return {
+      ...patch,
+      changes: {
+        ...patch.changes,
+        style: resolved
+      }
+    };
+  });
+  return changed ? next : patches;
 }
 export function applyRowPatches(snapshot, patches) {
   validatePatches(patches);