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

package/lib/typescript/src/web/templates/RowRendererRegistry.d.ts

@@ -0,0 +1,83 @@
+import type { RowModel } from '../../models';
+export type RowRendererKey = RowModel['type'];
+export declare function rowRenderer(row: RowModel): {
+    key: string;
+    appliesSizePreset: boolean;
+    create: (document: Document, primitives: Readonly<{
+        background: string;
+        icon: (element: HTMLElement, name: string) => void;
+        iconAction: (name: string, actionKey: string | undefined, disabled?: boolean, tintColor?: string) => HTMLElement;
+        accessory: (rowKey: string, descriptor: import("../..").TrailingAccessory, slot: number) => HTMLElement;
+        visual: (source: import("../..").LeadingVisual | undefined, presentation?: string) => HTMLElement | undefined;
+        thumbnail: (source: Readonly<{
+            uri: string;
+            width: number;
+            height: number;
+            headers?: Readonly<Record<string, string>>;
+            contentFit?: import("../..").ImageContentFit;
+            cachePolicy?: import("../..").ImageCachePolicy;
+            autoplay?: boolean;
+            optimizeTos?: boolean;
+            overscan?: number;
+            loadingStrategy?: import("../..").ImageLoadingStrategy;
+            fallbackUri?: string;
+            retryTimes?: number;
+        }>) => HTMLElement | undefined;
+        textStyle: (element: HTMLElement, style: Readonly<{
+            token?: import("../..").NativeListTypographyToken;
+            fontSize?: number;
+            fontWeight?: "regular" | "medium" | "semibold" | "bold";
+            color?: string;
+            lineHeight?: number;
+            lines?: 1 | 2 | 3;
+            truncate?: "tail" | "clip";
+            alignment?: "start" | "center" | "end";
+            verticalAlignment?: "top" | "center" | "bottom";
+            offsetY?: number;
+        }>, defaultLines?: number) => void;
+        dispose: (element: HTMLElement) => void;
+    }>) => HTMLElement;
+    bind: (body: HTMLElement, primitives: Readonly<{
+        background: string;
+        icon: (element: HTMLElement, name: string) => void;
+        iconAction: (name: string, actionKey: string | undefined, disabled?: boolean, tintColor?: string) => HTMLElement;
+        accessory: (rowKey: string, descriptor: import("../..").TrailingAccessory, slot: number) => HTMLElement;
+        visual: (source: import("../..").LeadingVisual | undefined, presentation?: string) => HTMLElement | undefined;
+        thumbnail: (source: Readonly<{
+            uri: string;
+            width: number;
+            height: number;
+            headers?: Readonly<Record<string, string>>;
+            contentFit?: import("../..").ImageContentFit;
+            cachePolicy?: import("../..").ImageCachePolicy;
+            autoplay?: boolean;
+            optimizeTos?: boolean;
+            overscan?: number;
+            loadingStrategy?: import("../..").ImageLoadingStrategy;
+            fallbackUri?: string;
+            retryTimes?: number;
+        }>) => HTMLElement | undefined;
+        textStyle: (element: HTMLElement, style: Readonly<{
+            token?: import("../..").NativeListTypographyToken;
+            fontSize?: number;
+            fontWeight?: "regular" | "medium" | "semibold" | "bold";
+            color?: string;
+            lineHeight?: number;
+            lines?: 1 | 2 | 3;
+            truncate?: "tail" | "clip";
+            alignment?: "start" | "center" | "end";
+            verticalAlignment?: "top" | "center" | "bottom";
+            offsetY?: number;
+        }>, defaultLines?: number) => void;
+        dispose: (element: HTMLElement) => void;
+    }>) => void;
+    measure: (width: number, layout?: string) => number;
+    measureRendered: (body: HTMLElement) => number | undefined;
+    reorderPreview: (body: HTMLElement) => {
+        element: HTMLElement;
+        height: number;
+    } | undefined;
+};
+export declare function rowRendererKey(row: RowModel): RowRendererKey;
+export declare function recycleRowBody(body: HTMLElement): boolean;
+//# sourceMappingURL=RowRendererRegistry.d.ts.map

package/lib/typescript/src/web/templates/RowText.d.ts

@@ -0,0 +1,9 @@
+import type { NativeListTextStyle } from '../../models';
+export declare function applyValueSegments(element: HTMLElement, segments: readonly Readonly<{
+    text: string;
+    style?: 'subscript';
+}>[] | undefined, fontSize?: number, lineHeight?: number, weight?: number): void;
+export declare function applyTextLayout(element: HTMLElement, style: NativeListTextStyle, defaultLines?: number): void;
+export declare function applyTextStyleToSlot(element: HTMLElement, style: NativeListTextStyle, defaultLines?: number): void;
+export declare function fontWeight(value: NativeListTextStyle['fontWeight'] | undefined, fallback: number): number;
+//# sourceMappingURL=RowText.d.ts.map

package/lib/typescript/src/web/templates/RowVisual.d.ts

@@ -0,0 +1,20 @@
+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;
+}>;
+/** Restores factory geometry without touching async loading visibility. */
+export declare class RowVisualStyle {
+    private readonly view;
+    private readonly defaults;
+    constructor(view: HTMLElement);
+    restore(): void;
+    apply(image: NativeListImageStyle | undefined, width: number, height: number, margin: number): void;
+}
+//# sourceMappingURL=RowVisual.d.ts.map

package/lib/typescript/src/web/templates/SectionHeaderRowRenderer.d.ts

@@ -0,0 +1,15 @@
+import type { SectionHeaderRow } from '../../models';
+import type { RowPrimitives } from './RowVisual';
+declare function bind(body: HTMLElement, row: SectionHeaderRow, primitives: RowPrimitives): void;
+declare function create(document: Document, row: SectionHeaderRow, primitives: RowPrimitives): HTMLDivElement;
+export declare const sectionHeaderRowRenderer: {
+    key: "sectionHeader";
+    create: typeof create;
+    bind: typeof bind;
+    recycle: (body: HTMLElement) => void;
+    appliesSizePreset: (row: SectionHeaderRow) => boolean;
+    measure: (row: SectionHeaderRow, _width: number, layout?: string) => 32 | 28 | 16 | 68 | 47 | 56 | 30 | 36;
+    measureRendered: (_body: HTMLElement, _row: SectionHeaderRow) => number | undefined;
+};
+export {};
+//# sourceMappingURL=SectionHeaderRowRenderer.d.ts.map

package/lib/typescript/src/web/templates/SystemRowRenderer.d.ts

@@ -0,0 +1,16 @@
+import type { SystemRow } from '../../models';
+import type { RowPrimitives } from './RowVisual';
+declare function bind(body: HTMLElement, row: SystemRow, primitives: RowPrimitives): void;
+declare function create(document: Document, row: SystemRow, primitives: RowPrimitives): HTMLDivElement;
+declare function measure(row: SystemRow, width: number): number;
+export declare const systemRowRenderer: {
+    key: "system";
+    appliesSizePreset: (row: SystemRow) => boolean;
+    create: typeof create;
+    bind: typeof bind;
+    measure: typeof measure;
+    measureRendered: (body: HTMLElement, row: SystemRow) => number | undefined;
+    recycle: (body: HTMLElement) => void;
+};
+export {};
+//# sourceMappingURL=SystemRowRenderer.d.ts.map

package/lib/typescript/src/web/templates/WalletGroupRowRenderer.d.ts

@@ -0,0 +1,20 @@
+import type { WalletGroupRow } from '../../models';
+import type { RowPrimitives } from './RowVisual';
+declare function bind(body: HTMLElement, row: WalletGroupRow, primitives: RowPrimitives): void;
+declare function create(document: Document, row: WalletGroupRow, primitives: RowPrimitives): HTMLDivElement;
+declare function recycle(body: HTMLElement): void;
+export declare const walletGroupRowRenderer: {
+    key: "walletGroup";
+    reorderPreview: (body: HTMLElement, row: WalletGroupRow) => {
+        element: HTMLElement;
+        height: number;
+    } | undefined;
+    create: typeof create;
+    bind: typeof bind;
+    recycle: typeof recycle;
+    appliesSizePreset: () => boolean;
+    measure: (row: WalletGroupRow, width: number) => number;
+    measureRendered: (_body: HTMLElement, _row: WalletGroupRow) => number | undefined;
+};
+export {};
+//# sourceMappingURL=WalletGroupRowRenderer.d.ts.map

package/package.json

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

package/src/models.ts

@@ -34,16 +34,42 @@ export type BadgeModel = Readonly<{
   tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 }>;
 
-export type MarketTextStyle = Readonly<{
+/**
+ * Named typography steps, shared with the application's design scale. Resolved
+ * to fontSize/lineHeight/fontWeight in JavaScript before the snapshot is
+ * serialized, so no native renderer needs to know the vocabulary.
+ * See docs/STYLE_SPEC.md §3.2.
+ */
+export type NativeListTypographyToken =
+  | '$headingXl'
+  | '$headingLg'
+  | '$headingMd'
+  | '$headingSm'
+  | '$headingXs'
+  | '$bodyLg'
+  | '$bodyMd'
+  | '$bodySm'
+  | '$bodyXs';
+
+export type NativeListTextStyle = Readonly<{
+  token?: NativeListTypographyToken;
   fontSize?: number;
   fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
   color?: string;
   lineHeight?: number;
-  lines?: 1 | 2;
+  /** Maximum visible lines; does not reserve empty lines or enlarge the row. */
+  lines?: 1 | 2 | 3;
+  truncate?: 'tail' | 'clip';
   alignment?: 'start' | 'center' | 'end';
+  verticalAlignment?: 'top' | 'center' | 'bottom';
+  /** Optical translation in logical units; does not affect layout. */
+  offsetY?: number;
 }>;
 
-export type MarketImageStyle = Readonly<{
+/** Retained alias: Market shipped this name before the style surface was shared. */
+export type MarketTextStyle = NativeListTextStyle;
+
+export type NativeListImageStyle = Readonly<{
   width?: number;
   height?: number;
   shape?: 'circle' | 'rounded' | 'square';
@@ -51,29 +77,224 @@ export type MarketImageStyle = Readonly<{
   contentFit?: ImageContentFit;
 }>;
 
-export type MarketRowStyle = Readonly<{
+export type MarketImageStyle = NativeListImageStyle;
+
+export type NativeListRowContainerStyle = Readonly<{
+  /** Explicit row height in logical units; overrides RowBase.height. */
+  height?: number;
+  backgroundColor?: string;
+  opacity?: number;
+  cornerRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  contentVerticalAlignment?: 'top' | 'center' | 'bottom';
+}>;
+
+/** Local box vocabulary. Each template exposes only parameters for its own slots. */
+export type RowBoxStyle = Readonly<{
+  container?: NativeListRowContainerStyle;
   horizontalPadding?: number;
   verticalPadding?: number;
   leadingGap?: number;
-  /** Space between title and subtitle; 0 by default, bounded to 0..16. */
+  /** Gap between the template's text rows. Omission preserves its default. */
   lineGap?: number;
   titleBadgeGap?: number;
-  /** OneKey patch: keep badges next to the intrinsic title width. */
-  titleBadgeLayout?: 'inline';
   trailingGap?: number;
-  /** OneKey patch: preserve separate Market content and subtitle insets. */
-  contentTrailingGap?: number;
-  subtitleTrailingPadding?: number;
-  image?: MarketImageStyle;
-  title?: MarketTextStyle;
-  subtitle?: MarketTextStyle;
-  price?: MarketTextStyle;
-  change?: MarketTextStyle;
-  changeWidth?: number;
-  changeHeight?: number;
-  changeCornerRadius?: number;
+  image?: NativeListImageStyle;
 }>;
 
+/** Template-owned slots determine which local box parameters exist, on every platform. */
+export const ROW_BOX_STYLE_KEYS_BY_TYPE = {
+  identity: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'titleBadgeGap',
+    'trailingGap',
+    'image',
+  ],
+  walletGroup: ['horizontalPadding', 'verticalPadding'],
+  rail: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'titleBadgeGap',
+    'trailingGap',
+    'image',
+  ],
+  activity: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'trailingGap',
+    'image',
+  ],
+  message: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'image',
+  ],
+  dataRow: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'titleBadgeGap',
+    'image',
+  ],
+  market: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'titleBadgeGap',
+    'trailingGap',
+    'image',
+  ],
+  mediaTile: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'image',
+  ],
+  metricCard: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'lineGap',
+    'image',
+  ],
+  sectionHeader: [
+    'horizontalPadding',
+    'verticalPadding',
+    'lineGap',
+    'trailingGap',
+  ],
+  action: [
+    'horizontalPadding',
+    'verticalPadding',
+    'leadingGap',
+    'trailingGap',
+    'image',
+  ],
+  system: ['horizontalPadding', 'verticalPadding', 'lineGap'],
+} as const;
+
+type TemplateBoxStyle<T extends keyof typeof ROW_BOX_STYLE_KEYS_BY_TYPE> = Pick<
+  RowBoxStyle,
+  (typeof ROW_BOX_STYLE_KEYS_BY_TYPE)[T][number] | 'container'
+>;
+
+/**
+ * A style key names the model field it modifies, never the view that carries
+ * it. Each template renderer owns its views and maps the key to whichever view
+ * renders that field (for example metricCard `value` is its large number), so
+ * the same key name keeps one meaning across platforms. See docs/STYLE_SPEC.md §4.
+ */
+export type IdentityRowStyle = TemplateBoxStyle<'identity'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    subtitle?: NativeListTextStyle;
+    tertiary?: NativeListTextStyle;
+    badge?: NativeListTextStyle;
+    value?: NativeListTextStyle;
+    valueSecondary?: NativeListTextStyle;
+  }>;
+
+export type WalletGroupRowStyle = TemplateBoxStyle<'walletGroup'>;
+
+export type RailRowStyle = TemplateBoxStyle<'rail'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    badge?: NativeListTextStyle;
+    status?: NativeListTextStyle;
+  }>;
+
+export type ActivityRowStyle = TemplateBoxStyle<'activity'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    description?: NativeListTextStyle;
+    status?: NativeListTextStyle;
+    primaryAmount?: NativeListTextStyle;
+    secondaryAmount?: NativeListTextStyle;
+  }>;
+
+export type MessageRowStyle = TemplateBoxStyle<'message'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    body?: NativeListTextStyle;
+    time?: NativeListTextStyle;
+  }>;
+
+export type DataRowStyle = TemplateBoxStyle<'dataRow'> &
+  Readonly<{
+    columns?: NativeListTextStyle;
+    columnSecondary?: NativeListTextStyle;
+    index?: NativeListTextStyle;
+  }>;
+
+export type MarketRowStyle = TemplateBoxStyle<'market'> &
+  Readonly<{
+    /** OneKey patch: keep badges next to the intrinsic title width. */
+    titleBadgeLayout?: 'inline';
+    /** OneKey patch: preserve separate Market content and subtitle insets. */
+    contentTrailingGap?: number;
+    subtitleTrailingPadding?: number;
+    title?: NativeListTextStyle;
+    subtitle?: NativeListTextStyle;
+    price?: NativeListTextStyle;
+    change?: NativeListTextStyle;
+    changeWidth?: number;
+    changeHeight?: number;
+    changeCornerRadius?: number;
+  }>;
+
+export type MediaTileRowStyle = TemplateBoxStyle<'mediaTile'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    subtitle?: NativeListTextStyle;
+    badge?: NativeListTextStyle;
+  }>;
+
+export type MetricCardRowStyle = TemplateBoxStyle<'metricCard'> &
+  Readonly<{
+    /** Standard-card label or composite-card heading. */
+    title?: NativeListTextStyle;
+    /** Large number in the standard template; absent in composite variants. */
+    value?: NativeListTextStyle;
+    subtitle?: NativeListTextStyle;
+    trend?: NativeListTextStyle;
+  }>;
+
+export type SectionHeaderRowStyle = TemplateBoxStyle<'sectionHeader'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    subtitle?: NativeListTextStyle;
+    value?: NativeListTextStyle;
+  }>;
+
+export type ActionRowStyle = TemplateBoxStyle<'action'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    value?: NativeListTextStyle;
+  }>;
+
+export type SystemRowStyle = TemplateBoxStyle<'system'> &
+  Readonly<{
+    title?: NativeListTextStyle;
+    message?: NativeListTextStyle;
+    /**
+     * Retry button text. Web draws a retry button only for the Market retry;
+     * a non-Market Web retry is message-only, so this has no target there.
+     */
+    actionText?: NativeListTextStyle;
+  }>;
+
 export type MarketBadgeModel = Readonly<{
   key: string;
   text?: string;
@@ -273,6 +494,7 @@ export type IdentityRow = RowBase &
     badges?: readonly BadgeModel[];
     trailing?: readonly TrailingAccessory[];
     draggable?: boolean;
+    style?: IdentityRowStyle;
   }>;
 
 export type WalletGroupRow = RowBase &
@@ -281,6 +503,7 @@ export type WalletGroupRow = RowBase &
     parent: IdentityRow;
     children: readonly IdentityRow[];
     draggable?: boolean;
+    style?: WalletGroupRowStyle;
   }>;
 
 export type RailRow = RowBase &
@@ -291,6 +514,7 @@ export type RailRow = RowBase &
     status?: 'none' | 'online' | 'warning' | 'error';
     badge?: BadgeModel;
     draggable?: boolean;
+    style?: RailRowStyle;
   }>;
 
 export type ActivityRow = RowBase &
@@ -304,6 +528,7 @@ export type ActivityRow = RowBase &
     primaryAmount?: string;
     secondaryAmount?: string;
     footerActions?: readonly FooterAction[];
+    style?: ActivityRowStyle;
   }>;
 
 export type MessageRow = RowBase &
@@ -316,6 +541,7 @@ export type MessageRow = RowBase &
     bodyLines?: 1 | 2 | 3;
     time: string;
     thumbnail?: ImageSource;
+    style?: MessageRowStyle;
   }>;
 
 export type DataColumn = Readonly<{
@@ -340,6 +566,7 @@ export type DataRow = RowBase &
     badges?: readonly BadgeModel[];
     favorite?: boolean;
     favoriteActive?: boolean;
+    style?: DataRowStyle;
   }>;
 
 /** Native Market quote row. All values are already localized/formatted strings. */
@@ -381,6 +608,7 @@ export type MediaTileRow = RowBase &
     subtitle?: string;
     badge?: BadgeModel;
     closeActionKey?: string;
+    style?: MediaTileRowStyle;
   }>;
 
 /** Compact KPI card for dashboards and grids. */
@@ -405,6 +633,7 @@ export type MetricCardRow = RowBase &
     badge?: BadgeModel;
     metrics?: readonly MetricValue[];
     progress?: number;
+    style?: MetricCardRowStyle;
   }>;
 
 export type SectionHeaderRow = RowBase &
@@ -427,6 +656,7 @@ export type SectionHeaderRow = RowBase &
     titleIcon?: Extract<TrailingAccessory, { kind: 'icon' }>;
     valueIcon?: Extract<TrailingAccessory, { kind: 'icon' }>;
     checkbox?: Extract<TrailingAccessory, { kind: 'checkbox' }>;
+    style?: SectionHeaderRowStyle;
   }>;
 
 export type ActionRow = RowBase &
@@ -439,9 +669,11 @@ export type ActionRow = RowBase &
     icon?: Extract<LeadingVisual, { kind: 'icon' }>;
     checkbox?: Extract<TrailingAccessory, { kind: 'checkbox' }>;
     trailing?: readonly TrailingAccessory[];
+    style?: ActionRowStyle;
   }>;
 
 export type SystemRow = RowBase &
+  Readonly<{ style?: SystemRowStyle }> &
   (
     | Readonly<{
         type: 'system';
@@ -529,6 +761,34 @@ export type SectionIndexConfig = Readonly<{
   centeredInWindow?: boolean;
 }>;
 
+export type NativeListSeparatorStyle = Readonly<{
+  /**
+   * Leading inset in logical pixels. Omitted keeps each platform's own default,
+   * which is not the same everywhere — see docs/STYLE_SPEC.md §6.2.
+   */
+  inset?: number;
+  /**
+   * Overrides the `separator` theme token for this list only. Must be
+   * `#RRGGBB` or `#RRGGBBAA`, like every row style color.
+   */
+  color?: string;
+}>;
+
+/**
+ * List chrome that every platform can honour. Pull to refresh, the section index
+ * rail and the reorder preview are deliberately absent: the first two are system
+ * controls or three independent constant sets, and the third is drawn with
+ * platform-specific primitives. See docs/STYLE_SPEC.md §5.
+ */
+export type NativeListListStyle = Readonly<{
+  separator?: NativeListSeparatorStyle;
+  /**
+   * Corner radius of a `groupId` card, `0…40` logical units. Does not affect
+   * rail or media tiles.
+   */
+  groupCornerRadius?: number;
+}>;
+
 export type NativeListSnapshot = Readonly<{
   schemaVersion: 1;
   generation: number;
@@ -560,6 +820,7 @@ export type NativeListSnapshot = Readonly<{
   emptyState?: ActionRow | SystemRow;
   fixedFooter?: ActionRow | SystemRow;
   theme?: NativeListTheme;
+  listStyle?: NativeListListStyle;
 }>;
 
 // OneKey patch: include selector-only mutable presentation fields.
@@ -575,7 +836,8 @@ type CommonPatchFields =
   | 'heightRounding'
   | 'opacity'
   | 'pressDisabled'
-  | 'accessibilityLabel';
+  | 'accessibilityLabel'
+  | 'style';
 
 export type RowPatch =
   | Readonly<{