@onekeyfe/react-native-native-list 3.0.112 → 3.0.113

package/lib/typescript/src/web/NativeListWebEngine.d.ts

@@ -1,4 +1,4 @@
-import type { ActionAnchorInvalidatedEvent, NativeListSnapshot, NativeListActionAnchor, NativeListActionSource, ReorderEvent, RowActionEvent, RowModel, RowPatch, SelectionDeltaEvent, VisibleRangeChangedEvent } from '../models';
+import type { ActionAnchorInvalidatedEvent, MarketRow, NativeListSnapshot, NativeListActionAnchor, NativeListActionSource, ReorderEvent, RowActionEvent, RowModel, RowPatch, SelectionDeltaEvent, VisibleRangeChangedEvent } from '../models';
 import type { ActionAnchorState, ScrollToIndexFailedInfo, ScrollToLocationParams } from '../NativeList.types';
 import { type NormalizedPositionScroll } from '../scrolling';
 export declare const WEB_REORDER_ANIMATION: {
@@ -7,6 +7,7 @@ export declare const WEB_REORDER_ANIMATION: {
     readonly dropDurationMs: 80;
     readonly dropTimingFunction: "ease";
 };
+export declare const WEB_MARKET_VERIFIED_PATH = "M9.483 11.458v3.5h-1v-3.5z M10.467 2.698a2.03 2.03 0 0 1 3.065 0l1.358 1.564a.03.03 0 0 0 .028.01l2.046-.325a2.03 2.03 0 0 1 2.347 1.971l.037 2.07q0 .016.014.026l1.776 1.066a2.03 2.03 0 0 1 .532 3.019l-1.304 1.609a.03.03 0 0 0-.005.03l.675 1.956a2.03 2.03 0 0 1-1.533 2.656l-2.033.394a.03.03 0 0 0-.023.019l-.741 1.933a2.03 2.03 0 0 1-2.88 1.05l-1.811-1.006a.03.03 0 0 0-.03 0l-1.811 1.005a2.03 2.03 0 0 1-2.88-1.049l-.742-1.933a.03.03 0 0 0-.023-.019l-2.033-.394a2.03 2.03 0 0 1-1.532-2.656l.675-1.957a.03.03 0 0 0-.005-.029l-1.304-1.61a2.03 2.03 0 0 1 .532-3.018l1.776-1.066a.03.03 0 0 0 .014-.026l.035-2.07a2.03 2.03 0 0 1 2.349-1.97l2.045.324a.03.03 0 0 0 .028-.01zm1.516 3.76a.5.5 0 0 0-.447.276l-1.861 3.724H8.483a1 1 0 0 0-1 1v3.5a1 1 0 0 0 1 1h6.692a2 2 0 0 0 1.981-1.73l.341-2.5a2 2 0 0 0-1.982-2.27h-1.939l.197-1.269a1.5 1.5 0 0 0-1.481-1.731z";
 export type WebLayoutItem = Readonly<{
     index: number;
     key: string;
@@ -21,6 +22,21 @@ export type WebListLayout = Readonly<{
     contentHeight: number;
     horizontal: boolean;
 }>;
+export type WebMarketLayoutStyle = Readonly<{
+    horizontalPadding: number;
+    verticalPadding: number;
+    leadingGap: number;
+    titleBadgeGap: number;
+    trailingGap: number;
+    imageWidth: number;
+    imageHeight: number;
+    imageCornerRadius: number;
+    changeWidth: number;
+    changeHeight: number;
+    changeCornerRadius: number;
+}>;
+/** Resolves every reusable Market geometry field, including legacy defaults. */
+export declare function resolveWebMarketLayoutStyle(row: MarketRow): WebMarketLayoutStyle;
 export type NativeListWebCallbacks = Readonly<{
     onRowAction?: (event: RowActionEvent) => void;
     onActionAnchorInvalidated?: (event: ActionAnchorInvalidatedEvent) => void;
@@ -52,6 +68,9 @@ export declare function webWalletGroupReorderBadge(row: RowModel): string | unde
 export declare function visibleWebLayoutItems(layout: WebListLayout, offset: number, viewportLength: number, overscan?: number): readonly WebLayoutItem[];
 export declare function webLayoutItemsForMount(layout: WebListLayout, offset: number, viewportLength: number, virtualizationEnabled: boolean, overscan?: number): readonly WebLayoutItem[];
 export declare function webRowRenderSignature(row: RowModel): string;
+export declare function isWebMarketQuotePatch(patch: RowPatch): boolean;
+/** Number of Market image-binding passes caused by one Web patch transaction. */
+export declare function webMarketImageBindDeltaForPatches(patches: readonly RowPatch[]): 0 | 1;
 export declare const WEB_LIST_CSS: string;
 export declare class NativeListWebEngine {
     private readonly document;
@@ -101,6 +120,8 @@ export declare class NativeListWebEngine {
     private readonly actionAnchorInstanceId;
     private actionAnchorCounter;
     private bindingEpochCounter;
+    private marketPointer;
+    private marketLongPressFired;
     private lastViewportWidth;
     private lastViewportHeight;
     private destroyed;
@@ -152,6 +173,10 @@ export declare class NativeListWebEngine {
     private invalidateActionAnchor;
     private emitActionAnchorInvalidated;
     private handleRowPress;
+    private cancelMarketPointer;
+    private handleMarketPointerDown;
+    private handleMarketPointerMove;
+    private handleMarketPointerEnd;
     private handleTitlePointerOver;
     private handleTitlePointerOut;
     private handleClick;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-native-list",
-  "version": "3.0.112",
+  "version": "3.0.113",
   "description": "Template-driven native RecyclerView and UICollectionView for React Native",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",
@@ -82,7 +82,7 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@onekeyfe/react-native-image": "3.0.112",
+    "@onekeyfe/react-native-image": "3.0.113",
     "react": "*",
     "react-native": "*",
     "react-native-nitro-modules": "0.37.0"

package/src/models.ts

@@ -33,6 +33,62 @@ export type BadgeModel = Readonly<{
   tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 }>;
 
+export type MarketTextStyle = Readonly<{
+  fontSize?: number;
+  fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
+  color?: string;
+  lineHeight?: number;
+  lines?: 1 | 2;
+  alignment?: 'start' | 'center' | 'end';
+}>;
+
+export type MarketImageStyle = Readonly<{
+  width?: number;
+  height?: number;
+  shape?: 'circle' | 'rounded' | 'square';
+  cornerRadius?: number;
+  contentFit?: ImageContentFit;
+}>;
+
+export type MarketRowStyle = Readonly<{
+  horizontalPadding?: number;
+  verticalPadding?: number;
+  leadingGap?: number;
+  /** Space between title and subtitle; 0 by default, bounded to 0..16. */
+  lineGap?: number;
+  titleBadgeGap?: number;
+  trailingGap?: number;
+  image?: MarketImageStyle;
+  title?: MarketTextStyle;
+  subtitle?: MarketTextStyle;
+  price?: MarketTextStyle;
+  change?: MarketTextStyle;
+  changeWidth?: number;
+  changeHeight?: number;
+  changeCornerRadius?: number;
+}>;
+
+export type MarketBadgeModel = Readonly<{
+  key: string;
+  text?: string;
+  /** Finite native glyph set; currently only the community verified mark. */
+  iconName?: 'verified';
+  icon?: ImageSource;
+  tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+  textColor?: string;
+  backgroundColor?: string;
+  actionKey?: string;
+  accessibilityLabel?: string;
+}>;
+
+export type MarketChangeModel = Readonly<{
+  text: string;
+  textSegments?: readonly ValueTextSegment[];
+  tone: 'positive' | 'negative' | 'neutral';
+  textColor?: string;
+  backgroundColor?: string;
+}>;
+
 // OneKey patch: keep selector decoration and text data serializable.
 export type SelectorTextSegment = Readonly<{
   text: string;
@@ -272,6 +328,26 @@ export type DataRow = RowBase &
     favoriteActive?: boolean;
   }>;
 
+/** Native Market quote row. All values are already localized/formatted strings. */
+export type MarketRow = RowBase &
+  Readonly<{
+    type: 'market';
+    variant: 'token' | 'stock' | 'perp';
+    leading: LeadingVisual;
+    title: string;
+    subtitle?: string;
+    subtitleSegments?: readonly ValueTextSegment[];
+    price: string;
+    priceSegments?: readonly ValueTextSegment[];
+    change: MarketChangeModel;
+    badges?: readonly MarketBadgeModel[];
+    pressActionKey?: string;
+    pressInActionKey?: string;
+    longPressActionKey?: string;
+    diagnostics?: Readonly<{ imageBindActionKey?: string }>;
+    style?: MarketRowStyle;
+  }>;
+
 export type MediaTileRow = RowBase &
   Readonly<{
     type: 'mediaTile';
@@ -345,10 +421,17 @@ export type ActionRow = RowBase &
 
 export type SystemRow = RowBase &
   (
-    | Readonly<{ type: 'system'; variant: 'loading'; message?: string }>
+    | Readonly<{
+        type: 'system';
+        variant: 'loading';
+        presentation?: 'market';
+        loadingStyle?: 'skeleton' | 'spinner';
+        message?: string;
+      }>
     | Readonly<{
         type: 'system';
         variant: 'retry';
+        presentation?: 'market';
         message: string;
         actionKey: string;
       }>
@@ -359,8 +442,18 @@ export type SystemRow = RowBase &
         message: string;
         borderColor?: string;
       }>
-    | Readonly<{ type: 'system'; variant: 'noMatch'; message: string }>
-    | Readonly<{ type: 'system'; variant: 'end'; message?: string }>
+    | Readonly<{
+        type: 'system';
+        variant: 'noMatch';
+        presentation?: 'market';
+        message: string;
+      }>
+    | Readonly<{
+        type: 'system';
+        variant: 'end';
+        presentation?: 'market';
+        message?: string;
+      }>
     | Readonly<{ type: 'system'; variant: 'spacer'; height: number }>
   );
 
@@ -371,6 +464,7 @@ export type RowModel =
   | ActivityRow
   | MessageRow
   | DataRow
+  | MarketRow
   | MediaTileRow
   | MetricCardRow
   | SectionHeaderRow
@@ -545,6 +639,29 @@ export type RowPatch =
         >
       >;
     }>
+  | Readonly<{
+      type: 'market';
+      key: string;
+      changes: Partial<
+        Pick<
+          MarketRow,
+          | CommonPatchFields
+          | 'leading'
+          | 'title'
+          | 'subtitle'
+          | 'subtitleSegments'
+          | 'price'
+          | 'priceSegments'
+          | 'change'
+          | 'badges'
+          | 'pressActionKey'
+          | 'pressInActionKey'
+          | 'longPressActionKey'
+          | 'diagnostics'
+          | 'style'
+        >
+      >;
+    }>
   | Readonly<{
       type: 'mediaTile';
       key: string;
@@ -629,6 +746,7 @@ export type RowPatch =
 
 export type NativeListActionSource =
   | 'row'
+  | 'marketBadge'
   | 'leadingAction'
   | 'trailingAccessory'
   | 'footerAction'

package/src/validation.ts

@@ -3,6 +3,9 @@ import type {
   IdentityRow,
   ImageSource,
   LeadingVisual,
+  MarketRow,
+  MarketRowStyle,
+  MarketTextStyle,
   NativeListSnapshot,
   RowModel,
   RowPatch,
@@ -19,6 +22,7 @@ const MAX_IMAGE_HEADERS = 32;
 const MAX_HEADER_LENGTH = 4096;
 const MAX_SPACER_HEIGHT = 512;
 const MAX_SECTION_INDEX_TITLE_LENGTH = 8;
+const MAX_MARKET_BADGES = 3;
 
 function fail(path: string, message: string): never {
   throw new Error(`NativeList ${path}: ${message}`);
@@ -109,6 +113,173 @@ function assertTextTone(tone: string | undefined, path: string): void {
   }
 }
 
+function assertBoundedStyleNumber(
+  value: number | undefined,
+  path: string,
+  min: number,
+  max: number
+): void {
+  if (
+    value !== undefined &&
+    (!Number.isFinite(value) || value < min || value > max)
+  ) {
+    fail(path, `must be within ${min}...${max}`);
+  }
+}
+
+function assertMarketTextStyle(
+  style: MarketTextStyle | undefined,
+  path: string
+): void {
+  if (!style) return;
+  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)
+  ) {
+    fail(`${path}.fontWeight`, 'must be regular, medium, semibold, or bold');
+  }
+  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');
+  }
+}
+
+function assertMarketStyle(
+  style: MarketRowStyle | undefined,
+  path: string
+): void {
+  if (!style) return;
+  for (const field of [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'titleBadgeGap',
+    'trailingGap',
+  ] as const) {
+    assertBoundedStyleNumber(style[field], `${path}.${field}`, 0, 64);
+  }
+  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'
+      );
+    }
+  }
+  assertMarketTextStyle(style.title, `${path}.title`);
+  assertMarketTextStyle(style.subtitle, `${path}.subtitle`);
+  assertMarketTextStyle(style.price, `${path}.price`);
+  assertMarketTextStyle(style.change, `${path}.change`);
+}
+
+function assertMarketRow(row: MarketRow, path: string): void {
+  if (!['token', 'stock', 'perp'].includes(row.variant)) {
+    fail(`${path}.variant`, 'must be token, stock, or perp');
+  }
+  assertText(row.title, `${path}.title`);
+  assertText(row.subtitle, `${path}.subtitle`);
+  assertText(row.price, `${path}.price`);
+  assertText(row.change.text, `${path}.change.text`);
+  assertLeadingVisual(row.leading, `${path}.leading`);
+  const assertSegments = (
+    segments: MarketRow['priceSegments'],
+    segmentPath: string
+  ) => {
+    segments?.forEach((segment, index) => {
+      assertText(segment.text, `${segmentPath}[${index}].text`);
+      if (segment.style !== undefined && segment.style !== 'subscript') {
+        fail(
+          `${segmentPath}[${index}].style`,
+          'must be subscript when provided'
+        );
+      }
+    });
+  };
+  assertSegments(row.subtitleSegments, `${path}.subtitleSegments`);
+  assertSegments(row.priceSegments, `${path}.priceSegments`);
+  assertSegments(row.change.textSegments, `${path}.change.textSegments`);
+  if (!['positive', 'negative', 'neutral'].includes(row.change.tone)) {
+    fail(`${path}.change.tone`, 'must be positive, negative, or neutral');
+  }
+  if ((row.badges?.length ?? 0) > MAX_MARKET_BADGES) {
+    fail(`${path}.badges`, `supports at most ${MAX_MARKET_BADGES} badges`);
+  }
+  const badgeKeys = new Set<string>();
+  row.badges?.forEach((badge, index) => {
+    const badgePath = `${path}.badges[${index}]`;
+    assertKey(badge.key, `${badgePath}.key`);
+    if (badgeKeys.has(badge.key)) {
+      fail(`${path}.badges`, `duplicate badge key "${badge.key}"`);
+    }
+    badgeKeys.add(badge.key);
+    assertText(badge.text, `${badgePath}.text`);
+    if (badge.iconName !== undefined && badge.iconName !== 'verified') {
+      fail(`${badgePath}.iconName`, 'must be verified when provided');
+    }
+    if (badge.iconName !== undefined && badge.icon !== undefined) {
+      fail(`${badgePath}.icon`, 'cannot be combined with iconName');
+    }
+    assertImage(badge.icon, `${badgePath}.icon`);
+    if (
+      badge.tone !== undefined &&
+      !['neutral', 'info', 'success', 'warning', 'danger'].includes(badge.tone)
+    ) {
+      fail(
+        `${badgePath}.tone`,
+        'must be neutral, info, success, warning, or danger'
+      );
+    }
+    if (!badge.text && !badge.icon && !badge.iconName) {
+      fail(badgePath, 'requires text, icon, or iconName');
+    }
+    if (badge.actionKey !== undefined) {
+      assertKey(badge.actionKey, `${badgePath}.actionKey`);
+    }
+  });
+  for (const [key, value] of [
+    ['pressActionKey', row.pressActionKey],
+    ['pressInActionKey', row.pressInActionKey],
+    ['longPressActionKey', row.longPressActionKey],
+    ['diagnostics.imageBindActionKey', row.diagnostics?.imageBindActionKey],
+  ] as const) {
+    if (value !== undefined) assertKey(value, `${path}.${key}`);
+  }
+  assertMarketStyle(row.style, `${path}.style`);
+}
+
 function assertSectionHeaderVariant(
   variant: string | undefined,
   path: string
@@ -295,6 +466,8 @@ function assertVisual(row: RowModel, path: string): void {
       ? [row.leading]
       : row.type === 'dataRow'
       ? [row.leading]
+      : row.type === 'market'
+      ? [row.leading]
       : row.type === 'metricCard'
       ? [row.visual]
       : [];
@@ -488,6 +661,9 @@ function assertRow(
         fail(`${path}.badges`, `supports at most ${MAX_BADGES} badges`);
       }
       break;
+    case 'market':
+      assertMarketRow(row, path);
+      break;
     case 'mediaTile':
       assertImage(row.image, `${path}.image`);
       if (
@@ -583,6 +759,10 @@ function assertRow(
       assertTrailingAccessories(row.trailing, `${path}.trailing`);
       break;
     case 'system':
+      const presentation = 'presentation' in row ? row.presentation : undefined;
+      if (presentation !== undefined && presentation !== 'market') {
+        fail(`${path}.presentation`, 'must be market when provided');
+      }
       if (
         // OneKey patch: deprecated-wallet warnings retain the original scrolling semantics.
         !['loading', 'retry', 'noMatch', 'end', 'spacer', 'warning'].includes(
@@ -595,6 +775,17 @@ function assertRow(
         );
       }
       if (row.variant === 'warning') assertText(row.title, `${path}.title`);
+      if (
+        row.variant === 'loading' &&
+        row.loadingStyle !== undefined &&
+        row.loadingStyle !== 'skeleton' &&
+        row.loadingStyle !== 'spinner'
+      ) {
+        fail(
+          `${path}.loadingStyle`,
+          'must be skeleton or spinner when provided'
+        );
+      }
       if (row.variant !== 'spacer') {
         assertText(row.message, `${path}.message`);
       }
@@ -879,6 +1070,21 @@ function assertPatchChanges(patch: RowPatch, index: number): void {
         fail(`${path}.badges`, `supports at most ${MAX_BADGES} badges`);
       }
       break;
+    case 'market':
+      assertMarketRow(
+        {
+          type: 'market',
+          key: patch.key,
+          variant: 'token',
+          leading: { kind: 'icon', name: 'placeholder' },
+          title: '',
+          price: '',
+          change: { text: '', tone: 'neutral' },
+          ...patch.changes,
+        } as MarketRow,
+        path
+      );
+      break;
     case 'mediaTile':
       assertImage(patch.changes.image, `${path}.image`);
       if (