@onekeyfe/react-native-native-list 3.0.113 → 3.0.114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -57
- package/android/src/main/java/com/onekey/nativelist/NativeListAdapter.kt +1 -17
- package/android/src/main/java/com/onekey/nativelist/NativeListRowView.kt +34 -545
- package/android/src/main/java/com/onekey/nativelist/NativeListView.kt +2 -26
- package/ios/NativeListCell.swift +20 -504
- package/ios/NativeListDesignAssets.swift +0 -8
- package/ios/RNCNativeListView.swift +7 -85
- package/lib/module/validation.js +1 -129
- package/lib/module/web/NativeListWebEngine.js +5 -357
- package/lib/typescript/src/models.d.ts +2 -82
- package/lib/typescript/src/web/NativeListWebEngine.d.ts +1 -26
- package/package.json +2 -2
- package/src/models.ts +3 -121
- package/src/validation.ts +0 -206
- package/src/web/NativeListWebEngine.ts +4 -578
- package/ios/Resources/NativeListIcons.xcassets/onekey_badge_verified_solid.imageset/Contents.json +0 -1
- package/ios/Resources/NativeListIcons.xcassets/onekey_badge_verified_solid.imageset/icon.svg +0 -1
|
@@ -20,9 +20,6 @@ export const WEB_REORDER_ANIMATION = {
|
|
|
20
20
|
dropTimingFunction: 'ease'
|
|
21
21
|
};
|
|
22
22
|
const REORDER_TOUCH_LONG_PRESS_MS = 120;
|
|
23
|
-
const MARKET_LONG_PRESS_MS = 800;
|
|
24
|
-
const MARKET_MOVE_CANCEL_PX = 10;
|
|
25
|
-
export 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';
|
|
26
23
|
const REORDER_MOUSE_MOVE_THRESHOLD_PX = 5;
|
|
27
24
|
const REORDER_EDGE_RATIO = 0.25;
|
|
28
25
|
const REORDER_MAX_SPEED_ZONE_RATIO = 0.05;
|
|
@@ -53,25 +50,6 @@ const defaultTheme = {
|
|
|
53
50
|
inverseText: '#FCFCFC',
|
|
54
51
|
info: '#0D74CE'
|
|
55
52
|
};
|
|
56
|
-
/** Resolves every reusable Market geometry field, including legacy defaults. */
|
|
57
|
-
export function resolveWebMarketLayoutStyle(row) {
|
|
58
|
-
const style = row.style;
|
|
59
|
-
const imageWidth = style?.image?.width ?? (row.variant === 'stock' ? 40 : 32);
|
|
60
|
-
const imageHeight = style?.image?.height ?? (row.variant === 'stock' ? 40 : 32);
|
|
61
|
-
return {
|
|
62
|
-
horizontalPadding: style?.horizontalPadding ?? (row.variant === 'perp' ? 16 : 20),
|
|
63
|
-
verticalPadding: style?.verticalPadding ?? 12,
|
|
64
|
-
leadingGap: style?.leadingGap ?? (row.variant === 'perp' ? 8 : 14),
|
|
65
|
-
titleBadgeGap: style?.titleBadgeGap ?? 4,
|
|
66
|
-
trailingGap: style?.trailingGap ?? 8,
|
|
67
|
-
imageWidth,
|
|
68
|
-
imageHeight,
|
|
69
|
-
imageCornerRadius: style?.image?.cornerRadius ?? (style?.image?.shape === 'square' ? 0 : style?.image?.shape === 'rounded' ? 8 : Math.min(imageWidth, imageHeight) / 2),
|
|
70
|
-
changeWidth: style?.changeWidth ?? 80,
|
|
71
|
-
changeHeight: style?.changeHeight ?? 32,
|
|
72
|
-
changeCornerRadius: style?.changeCornerRadius ?? 8
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
53
|
export function webActionAnchorPayload(token, rect, source, generation, layoutDirection, slot) {
|
|
76
54
|
return {
|
|
77
55
|
token,
|
|
@@ -217,7 +195,7 @@ export function estimateWebRowHeight(row, snapshot, availableWidth) {
|
|
|
217
195
|
break;
|
|
218
196
|
}
|
|
219
197
|
case 'system':
|
|
220
|
-
base = row.variant === '
|
|
198
|
+
base = row.variant === 'noMatch' || row.variant === 'end' ? 36 : row.variant === 'retry' ? 44 : 56;
|
|
221
199
|
break;
|
|
222
200
|
case 'action':
|
|
223
201
|
base = row.presentation === 'accountSelector' ? 48 : row.icon ? 60 : 44;
|
|
@@ -225,12 +203,6 @@ export function estimateWebRowHeight(row, snapshot, availableWidth) {
|
|
|
225
203
|
case 'dataRow':
|
|
226
204
|
base = row.columns.some(column => column.secondaryText) ? 60 : 56;
|
|
227
205
|
break;
|
|
228
|
-
case 'market':
|
|
229
|
-
{
|
|
230
|
-
const marketStyle = resolveWebMarketLayoutStyle(row);
|
|
231
|
-
base = Math.max(row.variant === 'stock' ? 72 : 68, marketStyle.imageHeight + marketStyle.verticalPadding * 2);
|
|
232
|
-
break;
|
|
233
|
-
}
|
|
234
206
|
case 'identity':
|
|
235
207
|
base = row.tertiary ? 72 : row.subtitle ? 60 : 56;
|
|
236
208
|
break;
|
|
@@ -419,15 +391,6 @@ function rowWithoutSelectionState(row) {
|
|
|
419
391
|
export function webRowRenderSignature(row) {
|
|
420
392
|
return JSON.stringify(rowWithoutSelectionState(row));
|
|
421
393
|
}
|
|
422
|
-
const MARKET_QUOTE_PATCH_FIELDS = new Set(['revision', 'price', 'priceSegments', 'change', 'accessibilityLabel']);
|
|
423
|
-
export function isWebMarketQuotePatch(patch) {
|
|
424
|
-
return patch.type === 'market' && Object.keys(patch.changes).every(key => MARKET_QUOTE_PATCH_FIELDS.has(key));
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
/** Number of Market image-binding passes caused by one Web patch transaction. */
|
|
428
|
-
export function webMarketImageBindDeltaForPatches(patches) {
|
|
429
|
-
return patches.length > 0 && patches.every(isWebMarketQuotePatch) ? 0 : 1;
|
|
430
|
-
}
|
|
431
394
|
|
|
432
395
|
// OneKey patch: selector names must shrink before the sidebar clips their contents.
|
|
433
396
|
export const WEB_LIST_CSS = `
|
|
@@ -485,14 +448,11 @@ export const WEB_LIST_CSS = `
|
|
|
485
448
|
.ok-native-list-media{display:block;padding:0 5px;background:transparent;border-radius:16px}.ok-native-list-media-image{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:var(--nl-strong);object-fit:cover}.ok-native-list-media-image[data-state="empty"]{background:transparent}.ok-native-list-media-image[data-state="error"]{display:flex;align-items:center;justify-content:center;color:var(--nl-icon-subdued);font-size:24px}.ok-native-list-media-meta{padding-top:7px}.ok-native-list-media-subtitle-row{display:flex;align-items:center;gap:6px}.ok-native-list-media-subtitle{flex:1;min-width:0;font-size:12px;color:var(--nl-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-network{width:14px;height:14px;border-radius:50%}.ok-native-list-media-title{font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ok-native-list-media-close{position:absolute;right:9px;top:4px;border:0;background:color-mix(in srgb,var(--nl-inverse) 72%,transparent);color:var(--nl-inverse-text);width:24px;height:24px;border-radius:50%;font:18px/20px inherit;cursor:pointer}
|
|
486
449
|
.ok-native-list-metric{display:flex;flex-direction:column;align-items:flex-start;padding:12px;border-radius:12px;gap:5px;background:var(--nl-row)}.ok-native-list-metric-value{font-size:22px;line-height:28px;font-weight:700}.ok-native-list-composite{display:flex;flex-direction:column;align-items:stretch;padding:14px;border-radius:12px;gap:12px;background:var(--nl-subdued)}.ok-native-list-composite-heading{font-size:14px;letter-spacing:1px;color:var(--nl-secondary)}.ok-native-list-composite-row{display:flex;gap:12px}.ok-native-list-composite-cell{flex:1;min-width:0}.ok-native-list-composite-cell[data-shaded="true"]{padding:10px;border-radius:10px;background:color-mix(in srgb,var(--nl-primary) 5%,transparent)}.ok-native-list-composite-value{font-size:18px;font-weight:600}.ok-native-list-divider{height:1px;background:var(--nl-separator)}.ok-native-list-progress{height:4px;border-radius:2px;overflow:hidden;background:var(--nl-negative)}.ok-native-list-progress>span{display:block;height:100%;border-radius:2px;background:var(--nl-positive)}
|
|
487
450
|
.ok-native-list-data{padding:6px 12px}.ok-native-list-index{flex:0 0 28px;color:var(--nl-secondary);font-size:13px}.ok-native-list-favorite{flex:0 0 24px;color:var(--nl-icon-subdued);font-size:22px}.ok-native-list-favorite[data-active="true"]{color:var(--nl-accent)}.ok-native-list-data-cell{display:flex;flex-direction:column;min-width:0}.ok-native-list-data-cell[data-align="center"]{align-items:center}.ok-native-list-data-cell[data-align="end"]{align-items:flex-end}.ok-native-list-data-primary{display:flex;align-items:center;gap:5px;max-width:100%;font-size:16px;font-weight:500;white-space:nowrap}.ok-native-list-unread{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--nl-accent)}.ok-native-list-thumbnail{width:64px;height:64px;border-radius:10px;object-fit:cover}
|
|
488
|
-
.ok-native-list-market{padding:12px 20px;gap:14px}.ok-native-list-market>.ok-native-list-visual{width:32px;height:32px;flex-basis:32px}.ok-native-list-market[data-variant="stock"]>.ok-native-list-visual{width:40px;height:40px;flex-basis:40px}.ok-native-list-market>.ok-native-list-visual>.ok-native-list-visual-main{width:100%;height:100%}.ok-native-list-market-main{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center}.ok-native-list-market-title-line{display:flex;align-items:center;min-width:0;gap:4px}.ok-native-list-market-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nl-primary);font-size:16px;line-height:24px;font-weight:500}.ok-native-list-market-subtitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--nl-secondary);font-size:14px;line-height:20px;font-weight:400}.ok-native-list-market-badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;max-width:72px;height:18px;padding:0 5px;border:0;border-radius:4px;background:var(--nl-strong);color:var(--nl-secondary);font:500 11px/18px inherit;overflow:hidden;white-space:nowrap}.ok-native-list-market-badge img{width:14px;height:14px;object-fit:contain}.ok-native-list-market-trailing{display:flex;flex:0 0 auto;align-items:center;gap:8px}.ok-native-list-market-price{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;color:var(--nl-primary);font-size:16px;line-height:24px;font-weight:500;font-variant-numeric:tabular-nums}.ok-native-list-market-change{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:80px;height:32px;border-radius:8px;color:#fff;background:#8d8d8d;font-size:14px;line-height:20px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.ok-native-list-market-change[data-tone="positive"]{background:var(--nl-positive)}.ok-native-list-market-change[data-tone="negative"]{background:var(--nl-negative)}
|
|
489
|
-
.ok-native-list-market-badge>svg,.ok-native-list-market-badge>.ok-native-list-market-badge-icon>svg{display:block;width:16px;height:16px;flex:0 0 16px}.ok-native-list-system[data-native-list-presentation="market"]{box-sizing:border-box;padding:12px 20px}.ok-native-list-system[data-native-list-presentation="market"]>.ok-native-list-spinner{width:32px;height:32px}
|
|
490
451
|
.ok-native-list-footer{flex:0 0 auto;min-height:0}.ok-native-list-sticky{position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:auto;box-shadow:0 1px 0 var(--nl-separator)}.ok-native-list-index-rail{position:absolute;z-index:6;top:0;right:0;bottom:0;width:${SECTION_INDEX_RAIL_WIDTH}px;touch-action:none;cursor:pointer}.ok-native-list-index-rail[hidden]{display:none}.ok-native-list-index-button{appearance:none;position:absolute;left:6px;display:flex;width:20px;height:16px;align-items:center;justify-content:center;padding:0;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:var(--nl-secondary);font:600 10px/1 inherit;cursor:pointer}.ok-native-list-index-button[data-active="true"]{background:var(--nl-accent);color:var(--nl-inverse-text)}.ok-native-list-index-button:focus-visible{outline:2px solid var(--nl-accent);outline-offset:1px}.ok-native-list-index-preview{position:absolute;z-index:8;right:40px;top:50%;display:flex;width:48px;height:48px;align-items:center;justify-content:center;transform:translateY(-50%) scale(.92);border-radius:14px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:22px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease}.ok-native-list-index-preview[data-visible="true"]{opacity:1;transform:translateY(-50%) scale(1)}
|
|
491
452
|
.ok-native-list-refresh{position:absolute;z-index:7;left:50%;top:8px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--nl-inverse);color:var(--nl-inverse-text);font-size:12px;opacity:0;transform:translate(-50%,-16px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}.ok-native-list-refresh[data-visible="true"]{opacity:1;transform:translate(-50%,0)}
|
|
492
453
|
.ok-native-list-warning{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:14px 12px;border-top:1px solid;border-bottom:1px solid;box-sizing:border-box;cursor:default}.ok-native-list-warning-title,.ok-native-list-warning-message{font-size:14px;line-height:20px;white-space:normal;overflow-wrap:anywhere}.ok-native-list-warning-title{font-weight:500;color:var(--nl-primary)}.ok-native-list-warning-message{font-weight:400;color:var(--nl-secondary)}
|
|
493
454
|
.ok-native-list-subtitle-segments{display:flex;align-items:center;min-width:0;max-width:100%;height:20px}.ok-native-list-subtitle-segments>.ok-native-list-secondary{flex:0 1 auto;min-width:0}.ok-native-list-subtitle-dot{flex:0 0 4px;width:4px;height:4px;margin:0 6px;border-radius:50%;background:var(--nl-disabled)}.ok-native-list-wallet-row>.ok-native-list-flex{flex:0 1 auto;width:100%;align-items:center}.ok-native-list-wallet-badges{display:flex;gap:4px;justify-content:center;margin-top:4px;height:20px;max-width:100%}.ok-native-list-wallet-badges>.ok-native-list-badge{background:var(--nl-strong);color:var(--nl-secondary);font-size:12px;line-height:16px;height:20px;box-sizing:border-box;padding:2px 4px}.ok-native-list-visual-overlay{position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:50%;overflow:hidden;line-height:1;font-size:10px}.ok-native-list-visual-overlay img,.ok-native-list-visual-overlay svg{width:100%;height:100%;object-fit:contain}
|
|
494
|
-
|
|
495
|
-
@media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner,.ok-native-list-market-spinner{animation:none}.ok-native-list-skeleton-mark{animation:none;background:var(--nl-skeleton-base)}}
|
|
455
|
+
@media (prefers-reduced-motion:reduce){.ok-native-list-index-preview,.ok-native-list-refresh{transition:none}.ok-native-list-spinner{animation:none}}
|
|
496
456
|
/* OneKey patch: selector controls follow their original semantic colors and geometry. */
|
|
497
457
|
.ok-native-list-checkbox[data-selector="networkSelector"]{padding:0;border-radius:4px;border-color:var(--nl-checkbox-border,var(--nl-separator));background:var(--nl-checkbox-icon,var(--nl-inverse-text))}
|
|
498
458
|
.ok-native-list-checkbox[data-selector="networkSelector"]::after{display:none}
|
|
@@ -852,15 +812,6 @@ const selectorIcons = {
|
|
|
852
812
|
fillRule: 'nonzero',
|
|
853
813
|
opacity: 1
|
|
854
814
|
}]
|
|
855
|
-
},
|
|
856
|
-
BadgeVerifiedSolid: {
|
|
857
|
-
viewBox: '0 0 24 24',
|
|
858
|
-
paths: [{
|
|
859
|
-
d: WEB_MARKET_VERIFIED_PATH,
|
|
860
|
-
fill: 'currentColor',
|
|
861
|
-
fillRule: 'evenodd',
|
|
862
|
-
opacity: 1
|
|
863
|
-
}]
|
|
864
815
|
}
|
|
865
816
|
};
|
|
866
817
|
function applySelectorIcon(element, name) {
|
|
@@ -908,7 +859,6 @@ function visualFromRow(row) {
|
|
|
908
859
|
if (row.type === 'activity') return row.leading;
|
|
909
860
|
if (row.type === 'message') return row.leading;
|
|
910
861
|
if (row.type === 'dataRow') return row.leading;
|
|
911
|
-
if (row.type === 'market') return row.leading;
|
|
912
862
|
if (row.type === 'metricCard') return row.visual;
|
|
913
863
|
return undefined;
|
|
914
864
|
}
|
|
@@ -1316,69 +1266,6 @@ function createActionRow(context, row) {
|
|
|
1316
1266
|
function createSystemRow(context, row) {
|
|
1317
1267
|
const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-system');
|
|
1318
1268
|
setData(body, 'variant', row.variant);
|
|
1319
|
-
if ('presentation' in row) setData(body, 'nativeListPresentation', row.presentation);
|
|
1320
|
-
if (row.variant === 'loading' && row.loadingStyle === 'skeleton') {
|
|
1321
|
-
body.classList.add('ok-native-list-market-skeleton');
|
|
1322
|
-
const background = resolvedTheme(context.snapshot).background;
|
|
1323
|
-
const rgb = Number.parseInt(background.slice(1, 7), 16);
|
|
1324
|
-
const dark = (rgb >> 16 & 255) * 0.299 + (rgb >> 8 & 255) * 0.587 + (rgb & 255) * 0.114 < 128;
|
|
1325
|
-
body.style.setProperty('--nl-skeleton-base', dark ? '#111111' : '#fafafa');
|
|
1326
|
-
body.style.setProperty('--nl-skeleton-highlight', dark ? '#333333' : '#cdcdcd');
|
|
1327
|
-
const left = createElement(context.document, 'div', 'ok-native-list-skeleton-left');
|
|
1328
|
-
const mark = (width, height, circle = false) => {
|
|
1329
|
-
const element = createElement(context.document, 'span', 'ok-native-list-skeleton-mark');
|
|
1330
|
-
element.style.width = `${width}px`;
|
|
1331
|
-
element.style.height = `${height}px`;
|
|
1332
|
-
if (circle) element.style.borderRadius = '50%';
|
|
1333
|
-
return element;
|
|
1334
|
-
};
|
|
1335
|
-
left.appendChild(mark(32, 32, true));
|
|
1336
|
-
const text = createElement(context.document, 'div', 'ok-native-list-skeleton-text');
|
|
1337
|
-
text.appendChild(mark(80, 16));
|
|
1338
|
-
text.appendChild(mark(60, 12));
|
|
1339
|
-
left.appendChild(text);
|
|
1340
|
-
body.appendChild(left);
|
|
1341
|
-
const right = createElement(context.document, 'div', 'ok-native-list-skeleton-right');
|
|
1342
|
-
right.appendChild(mark(80, 18));
|
|
1343
|
-
right.appendChild(mark(80, 18));
|
|
1344
|
-
body.appendChild(right);
|
|
1345
|
-
return body;
|
|
1346
|
-
}
|
|
1347
|
-
if (row.variant === 'loading' && row.loadingStyle === 'spinner') {
|
|
1348
|
-
body.style.justifyContent = 'center';
|
|
1349
|
-
body.style.padding = '16px';
|
|
1350
|
-
const spinner = createElement(context.document, 'span', 'ok-native-list-market-spinner');
|
|
1351
|
-
spinner.setAttribute('role', 'progressbar');
|
|
1352
|
-
// Same 20px SVG and 750ms rotation as react-native-web ActivityIndicator.
|
|
1353
|
-
spinner.innerHTML = '<svg viewBox="0 0 32 32" width="20" height="20"><circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="4" opacity="0.2"/><circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="4" stroke-dasharray="80" stroke-dashoffset="60"/></svg>';
|
|
1354
|
-
body.appendChild(spinner);
|
|
1355
|
-
return body;
|
|
1356
|
-
}
|
|
1357
|
-
if ('presentation' in row && row.presentation === 'market') {
|
|
1358
|
-
if (row.variant === 'noMatch') {
|
|
1359
|
-
body.style.justifyContent = 'center';
|
|
1360
|
-
body.style.padding = '32px';
|
|
1361
|
-
const message = createElement(context.document, 'span', '', row.message);
|
|
1362
|
-
message.style.fontSize = '16px';
|
|
1363
|
-
message.style.lineHeight = '24px';
|
|
1364
|
-
body.appendChild(message);
|
|
1365
|
-
return body;
|
|
1366
|
-
}
|
|
1367
|
-
if (row.variant === 'end') {
|
|
1368
|
-
body.style.justifyContent = 'center';
|
|
1369
|
-
body.style.padding = '16px';
|
|
1370
|
-
body.style.gap = '8px';
|
|
1371
|
-
for (const width of [80, 4, 80]) {
|
|
1372
|
-
const mark = createElement(context.document, 'span', '');
|
|
1373
|
-
mark.style.width = String(width) + 'px';
|
|
1374
|
-
mark.style.height = width === 4 ? '4px' : '1px';
|
|
1375
|
-
mark.style.borderRadius = width === 4 ? '2px' : '0';
|
|
1376
|
-
mark.style.background = 'var(--nl-separator)';
|
|
1377
|
-
body.appendChild(mark);
|
|
1378
|
-
}
|
|
1379
|
-
return body;
|
|
1380
|
-
}
|
|
1381
|
-
}
|
|
1382
1269
|
if (row.variant === 'warning') {
|
|
1383
1270
|
body.classList.add('ok-native-list-warning');
|
|
1384
1271
|
body.style.borderColor = row.borderColor ?? 'var(--nl-separator)';
|
|
@@ -1668,163 +1555,6 @@ function createWalletGroupRow(context, row) {
|
|
|
1668
1555
|
});
|
|
1669
1556
|
return body;
|
|
1670
1557
|
}
|
|
1671
|
-
function marketFontWeight(value, fallback) {
|
|
1672
|
-
if (value === 'bold') return 700;
|
|
1673
|
-
if (value === 'semibold') return 600;
|
|
1674
|
-
if (value === 'medium') return 500;
|
|
1675
|
-
if (value === 'regular') return 400;
|
|
1676
|
-
return fallback;
|
|
1677
|
-
}
|
|
1678
|
-
function applyMarketTextStyle(element, style, defaults) {
|
|
1679
|
-
element.style.fontSize = String(style?.fontSize ?? defaults.fontSize) + 'px';
|
|
1680
|
-
element.style.lineHeight = String(style?.lineHeight ?? defaults.lineHeight) + 'px';
|
|
1681
|
-
element.style.fontWeight = String(marketFontWeight(style?.fontWeight, defaults.weight));
|
|
1682
|
-
element.style.color = style?.color ?? '';
|
|
1683
|
-
element.style.textAlign = style?.alignment ?? defaults.alignment;
|
|
1684
|
-
element.style.whiteSpace = style?.lines === 2 ? 'normal' : 'nowrap';
|
|
1685
|
-
element.style.display = '';
|
|
1686
|
-
element.style.removeProperty('-webkit-line-clamp');
|
|
1687
|
-
element.style.removeProperty('-webkit-box-orient');
|
|
1688
|
-
if (style?.lines === 2) {
|
|
1689
|
-
element.style.display = '-webkit-box';
|
|
1690
|
-
element.style.setProperty('-webkit-line-clamp', '2');
|
|
1691
|
-
element.style.setProperty('-webkit-box-orient', 'vertical');
|
|
1692
|
-
}
|
|
1693
|
-
}
|
|
1694
|
-
function setMarketQuoteContent(element, row) {
|
|
1695
|
-
const style = row.style;
|
|
1696
|
-
const layoutStyle = resolveWebMarketLayoutStyle(row);
|
|
1697
|
-
const price = element.querySelector('.ok-native-list-market-price');
|
|
1698
|
-
if (price) {
|
|
1699
|
-
price.textContent = row.price;
|
|
1700
|
-
applyMarketTextStyle(price, style?.price, {
|
|
1701
|
-
fontSize: 16,
|
|
1702
|
-
lineHeight: 24,
|
|
1703
|
-
weight: 500,
|
|
1704
|
-
alignment: 'end'
|
|
1705
|
-
});
|
|
1706
|
-
applyValueSegments(price, row.priceSegments, style?.price?.fontSize ?? 16, style?.price?.lineHeight ?? 24, marketFontWeight(style?.price?.fontWeight, 500));
|
|
1707
|
-
}
|
|
1708
|
-
const change = element.querySelector('.ok-native-list-market-change');
|
|
1709
|
-
if (change) {
|
|
1710
|
-
change.textContent = row.change.text;
|
|
1711
|
-
setData(change, 'tone', row.change.tone);
|
|
1712
|
-
applyMarketTextStyle(change, style?.change, {
|
|
1713
|
-
fontSize: 14,
|
|
1714
|
-
lineHeight: 20,
|
|
1715
|
-
weight: 500,
|
|
1716
|
-
alignment: 'center'
|
|
1717
|
-
});
|
|
1718
|
-
applyValueSegments(change, row.change.textSegments, style?.change?.fontSize ?? 14, style?.change?.lineHeight ?? 20, marketFontWeight(style?.change?.fontWeight, 500));
|
|
1719
|
-
change.style.width = String(layoutStyle.changeWidth) + 'px';
|
|
1720
|
-
change.style.height = String(layoutStyle.changeHeight) + 'px';
|
|
1721
|
-
change.style.borderRadius = String(layoutStyle.changeCornerRadius) + 'px';
|
|
1722
|
-
change.style.color = row.change.textColor ?? style?.change?.color ?? '';
|
|
1723
|
-
change.style.background = row.change.backgroundColor ?? '';
|
|
1724
|
-
}
|
|
1725
|
-
element.setAttribute('aria-label', row.accessibilityLabel ?? [row.title, row.subtitle, row.price, row.change.text].filter(Boolean).join(', '));
|
|
1726
|
-
}
|
|
1727
|
-
function createMarketRow(context, row) {
|
|
1728
|
-
const body = createElement(context.document, 'div', 'ok-native-list-row ok-native-list-market');
|
|
1729
|
-
setData(body, 'variant', row.variant);
|
|
1730
|
-
const style = row.style;
|
|
1731
|
-
const layoutStyle = resolveWebMarketLayoutStyle(row);
|
|
1732
|
-
body.style.padding = String(layoutStyle.verticalPadding) + 'px ' + String(layoutStyle.horizontalPadding) + 'px';
|
|
1733
|
-
body.style.gap = '0px';
|
|
1734
|
-
const visual = createVisual(context, row.leading);
|
|
1735
|
-
if (visual) {
|
|
1736
|
-
const width = layoutStyle.imageWidth;
|
|
1737
|
-
const height = layoutStyle.imageHeight;
|
|
1738
|
-
visual.style.width = String(width) + 'px';
|
|
1739
|
-
visual.style.height = String(height) + 'px';
|
|
1740
|
-
visual.style.flexBasis = String(width) + 'px';
|
|
1741
|
-
visual.style.borderRadius = String(layoutStyle.imageCornerRadius) + 'px';
|
|
1742
|
-
const borderColor = 'borderColor' in row.leading ? row.leading.borderColor : undefined;
|
|
1743
|
-
if (borderColor) {
|
|
1744
|
-
visual.style.border = '1px solid ' + borderColor;
|
|
1745
|
-
visual.style.boxSizing = 'border-box';
|
|
1746
|
-
}
|
|
1747
|
-
visual.querySelectorAll('img').forEach(image => {
|
|
1748
|
-
if (!image.classList.contains('ok-native-list-visual-corner')) {
|
|
1749
|
-
image.style.width = '100%';
|
|
1750
|
-
image.style.height = '100%';
|
|
1751
|
-
if (borderColor) {
|
|
1752
|
-
image.style.borderRadius = '0';
|
|
1753
|
-
image.style.clipPath = 'inset(-1px round ' + String(layoutStyle.imageCornerRadius) + 'px)';
|
|
1754
|
-
}
|
|
1755
|
-
image.style.objectFit = style?.image?.contentFit ?? image.style.objectFit;
|
|
1756
|
-
} else {
|
|
1757
|
-
image.style.width = '20px';
|
|
1758
|
-
image.style.height = '20px';
|
|
1759
|
-
if (borderColor) {
|
|
1760
|
-
image.style.right = '-5px';
|
|
1761
|
-
image.style.bottom = '-5px';
|
|
1762
|
-
}
|
|
1763
|
-
}
|
|
1764
|
-
});
|
|
1765
|
-
visual.style.marginRight = String(layoutStyle.leadingGap) + 'px';
|
|
1766
|
-
body.appendChild(visual);
|
|
1767
|
-
}
|
|
1768
|
-
const main = createElement(context.document, 'span', 'ok-native-list-market-main');
|
|
1769
|
-
main.style.gap = String(style?.lineGap ?? 0) + 'px';
|
|
1770
|
-
const titleLine = createElement(context.document, 'span', 'ok-native-list-market-title-line');
|
|
1771
|
-
titleLine.style.gap = String(layoutStyle.titleBadgeGap) + 'px';
|
|
1772
|
-
const title = createElement(context.document, 'span', 'ok-native-list-market-title', row.title);
|
|
1773
|
-
applyMarketTextStyle(title, style?.title, {
|
|
1774
|
-
fontSize: 16,
|
|
1775
|
-
lineHeight: 24,
|
|
1776
|
-
weight: 500,
|
|
1777
|
-
alignment: 'start'
|
|
1778
|
-
});
|
|
1779
|
-
titleLine.appendChild(title);
|
|
1780
|
-
row.badges?.forEach((badge, slot) => {
|
|
1781
|
-
const element = createElement(context.document, badge.actionKey ? 'button' : 'span', 'ok-native-list-market-badge', badge.text);
|
|
1782
|
-
if (badge.actionKey) {
|
|
1783
|
-
element.setAttribute('type', 'button');
|
|
1784
|
-
setData(element, 'nativeListAction', badge.actionKey);
|
|
1785
|
-
markActionAnchorSource(element, 'marketBadge', slot);
|
|
1786
|
-
}
|
|
1787
|
-
setData(element, 'tone', badge.tone);
|
|
1788
|
-
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)' : '');
|
|
1789
|
-
element.style.background = badge.backgroundColor ?? ((badge.icon || badge.iconName) && !badge.text ? 'transparent' : '');
|
|
1790
|
-
if ((badge.icon || badge.iconName) && !badge.text) {
|
|
1791
|
-
element.style.padding = '0';
|
|
1792
|
-
}
|
|
1793
|
-
if (badge.accessibilityLabel) element.setAttribute('aria-label', badge.accessibilityLabel);
|
|
1794
|
-
if (badge.icon) {
|
|
1795
|
-
const icon = createImage(context, badge.icon);
|
|
1796
|
-
if (icon) {
|
|
1797
|
-
icon.style.borderRadius = '50%';
|
|
1798
|
-
element.prepend(icon);
|
|
1799
|
-
}
|
|
1800
|
-
}
|
|
1801
|
-
if (badge.iconName === 'verified') {
|
|
1802
|
-
const icon = createElement(context.document, 'span', 'ok-native-list-market-badge-icon');
|
|
1803
|
-
applySelectorIcon(icon, 'BadgeVerifiedSolid');
|
|
1804
|
-
element.prepend(icon);
|
|
1805
|
-
}
|
|
1806
|
-
titleLine.appendChild(element);
|
|
1807
|
-
});
|
|
1808
|
-
main.appendChild(titleLine);
|
|
1809
|
-
if (row.subtitle || row.subtitleSegments?.length) {
|
|
1810
|
-
const subtitle = createElement(context.document, 'span', 'ok-native-list-market-subtitle', row.subtitle);
|
|
1811
|
-
applyMarketTextStyle(subtitle, style?.subtitle, {
|
|
1812
|
-
fontSize: 14,
|
|
1813
|
-
lineHeight: 20,
|
|
1814
|
-
weight: 400,
|
|
1815
|
-
alignment: 'start'
|
|
1816
|
-
});
|
|
1817
|
-
applyValueSegments(subtitle, row.subtitleSegments, style?.subtitle?.fontSize ?? 14, style?.subtitle?.lineHeight ?? 20, marketFontWeight(style?.subtitle?.fontWeight, 400));
|
|
1818
|
-
main.appendChild(subtitle);
|
|
1819
|
-
}
|
|
1820
|
-
body.appendChild(main);
|
|
1821
|
-
const trailing = createElement(context.document, 'span', 'ok-native-list-market-trailing');
|
|
1822
|
-
trailing.style.gap = String(layoutStyle.trailingGap) + 'px';
|
|
1823
|
-
trailing.append(createElement(context.document, 'span', 'ok-native-list-market-price'), createElement(context.document, 'span', 'ok-native-list-market-change'));
|
|
1824
|
-
body.appendChild(trailing);
|
|
1825
|
-
setMarketQuoteContent(body, row);
|
|
1826
|
-
return body;
|
|
1827
|
-
}
|
|
1828
1558
|
function createRowBody(context, row) {
|
|
1829
1559
|
switch (row.type) {
|
|
1830
1560
|
case 'walletGroup':
|
|
@@ -1843,8 +1573,6 @@ function createRowBody(context, row) {
|
|
|
1843
1573
|
return createMetricRow(context, row);
|
|
1844
1574
|
case 'dataRow':
|
|
1845
1575
|
return createDataRow(context, row);
|
|
1846
|
-
case 'market':
|
|
1847
|
-
return createMarketRow(context, row);
|
|
1848
1576
|
case 'identity':
|
|
1849
1577
|
case 'activity':
|
|
1850
1578
|
case 'message':
|
|
@@ -1872,7 +1600,6 @@ export class NativeListWebEngine {
|
|
|
1872
1600
|
actionAnchorInstanceId = String(++webNativeListInstanceCounter);
|
|
1873
1601
|
actionAnchorCounter = 0;
|
|
1874
1602
|
bindingEpochCounter = 0;
|
|
1875
|
-
marketLongPressFired = false;
|
|
1876
1603
|
lastViewportWidth = -1;
|
|
1877
1604
|
lastViewportHeight = -1;
|
|
1878
1605
|
destroyed = false;
|
|
@@ -1916,10 +1643,6 @@ export class NativeListWebEngine {
|
|
|
1916
1643
|
passive: true
|
|
1917
1644
|
});
|
|
1918
1645
|
this.root.addEventListener('click', this.handleClick);
|
|
1919
|
-
this.root.addEventListener('pointerdown', this.handleMarketPointerDown);
|
|
1920
|
-
this.root.addEventListener('pointermove', this.handleMarketPointerMove);
|
|
1921
|
-
this.root.addEventListener('pointerup', this.handleMarketPointerEnd);
|
|
1922
|
-
this.root.addEventListener('pointercancel', this.handleMarketPointerEnd);
|
|
1923
1646
|
// OneKey patch: preserve web tooltip hover for section titles.
|
|
1924
1647
|
this.root.addEventListener('pointerover', this.handleTitlePointerOver);
|
|
1925
1648
|
this.root.addEventListener('pointerout', this.handleTitlePointerOut);
|
|
@@ -1975,31 +1698,12 @@ export class NativeListWebEngine {
|
|
|
1975
1698
|
applyPatches(patches) {
|
|
1976
1699
|
if (patches.length === 0) return;
|
|
1977
1700
|
const next = applyRowPatches(this.snapshot, patches);
|
|
1701
|
+
this.invalidateActionAnchor('snapshot');
|
|
1978
1702
|
const selection = new Set(this.selectedKeys);
|
|
1979
1703
|
patches.forEach(patch => {
|
|
1980
1704
|
const selected = 'selected' in patch.changes ? patch.changes.selected : undefined;
|
|
1981
1705
|
if (selected === true) selection.add(patch.key);else if (selected === false) selection.delete(patch.key);
|
|
1982
1706
|
});
|
|
1983
|
-
if (webMarketImageBindDeltaForPatches(patches) === 0) {
|
|
1984
|
-
this.snapshot = next;
|
|
1985
|
-
this.rows = effectiveRows(next);
|
|
1986
|
-
this.selectedKeys = selection;
|
|
1987
|
-
patches.forEach(patch => {
|
|
1988
|
-
const index = this.rows.findIndex(row => row.key === patch.key);
|
|
1989
|
-
const row = this.rows[index];
|
|
1990
|
-
const element = this.mounted.get(index);
|
|
1991
|
-
if (row?.type === 'market' && element) {
|
|
1992
|
-
setMarketQuoteContent(element, row);
|
|
1993
|
-
element.dataset.renderSignature = webRowRenderSignature(row);
|
|
1994
|
-
}
|
|
1995
|
-
if (row?.type === 'market' && this.sticky.dataset.nativeListRowKey === row.key) {
|
|
1996
|
-
setMarketQuoteContent(this.sticky, row);
|
|
1997
|
-
this.sticky.dataset.renderSignature = webRowRenderSignature(row);
|
|
1998
|
-
}
|
|
1999
|
-
});
|
|
2000
|
-
return;
|
|
2001
|
-
}
|
|
2002
|
-
this.invalidateActionAnchor('snapshot');
|
|
2003
1707
|
this.setSnapshot(next, selection);
|
|
2004
1708
|
}
|
|
2005
1709
|
reconcileSelection(keys) {
|
|
@@ -2123,11 +1827,6 @@ export class NativeListWebEngine {
|
|
|
2123
1827
|
this.document.defaultView?.removeEventListener('resize', this.handleWindowResize);
|
|
2124
1828
|
this.viewport.removeEventListener('scroll', this.handleScroll);
|
|
2125
1829
|
this.root.removeEventListener('click', this.handleClick);
|
|
2126
|
-
this.cancelMarketPointer();
|
|
2127
|
-
this.root.removeEventListener('pointerdown', this.handleMarketPointerDown);
|
|
2128
|
-
this.root.removeEventListener('pointermove', this.handleMarketPointerMove);
|
|
2129
|
-
this.root.removeEventListener('pointerup', this.handleMarketPointerEnd);
|
|
2130
|
-
this.root.removeEventListener('pointercancel', this.handleMarketPointerEnd);
|
|
2131
1830
|
this.root.removeEventListener('pointerover', this.handleTitlePointerOver);
|
|
2132
1831
|
this.root.removeEventListener('pointerout', this.handleTitlePointerOut);
|
|
2133
1832
|
this.root.removeEventListener('keydown', this.handleKeyDown);
|
|
@@ -2159,7 +1858,6 @@ export class NativeListWebEngine {
|
|
|
2159
1858
|
this.avatarLeases.clear();
|
|
2160
1859
|
}
|
|
2161
1860
|
setSnapshot(snapshot, selectedKeys) {
|
|
2162
|
-
this.cancelMarketPointer();
|
|
2163
1861
|
this.measuredWarningHeights.clear();
|
|
2164
1862
|
this.snapshot = snapshot;
|
|
2165
1863
|
this.rows = effectiveRows(snapshot);
|
|
@@ -2409,13 +2107,6 @@ export class NativeListWebEngine {
|
|
|
2409
2107
|
}
|
|
2410
2108
|
}
|
|
2411
2109
|
element.replaceChildren(body);
|
|
2412
|
-
if (row.type === 'market' && row.diagnostics?.imageBindActionKey && body.querySelector('img')) {
|
|
2413
|
-
this.callbacks.onRowAction?.({
|
|
2414
|
-
rowKey: row.key,
|
|
2415
|
-
actionKey: row.diagnostics.imageBindActionKey,
|
|
2416
|
-
sectionKey: row.sectionKey
|
|
2417
|
-
});
|
|
2418
|
-
}
|
|
2419
2110
|
}
|
|
2420
2111
|
renderFooter() {
|
|
2421
2112
|
const row = this.snapshot.fixedFooter;
|
|
@@ -2730,7 +2421,7 @@ export class NativeListWebEngine {
|
|
|
2730
2421
|
}, row);
|
|
2731
2422
|
return;
|
|
2732
2423
|
}
|
|
2733
|
-
const actionKey = row.type === 'action' ? row.actionKey : row.type === 'system' && row.variant === 'retry' ? row.actionKey :
|
|
2424
|
+
const actionKey = row.type === 'action' ? row.actionKey : row.type === 'system' && row.variant === 'retry' ? row.actionKey : 'press';
|
|
2734
2425
|
if (rowElement && sourceElement) {
|
|
2735
2426
|
const anchor = this.createActionAnchor(sourceElement, rowElement, 'row');
|
|
2736
2427
|
this.callbacks.onRowAction?.({
|
|
@@ -2743,47 +2434,6 @@ export class NativeListWebEngine {
|
|
|
2743
2434
|
this.emitRowAction(row, actionKey);
|
|
2744
2435
|
}
|
|
2745
2436
|
}
|
|
2746
|
-
cancelMarketPointer() {
|
|
2747
|
-
const state = this.marketPointer;
|
|
2748
|
-
if (!state) return;
|
|
2749
|
-
this.document.defaultView?.clearTimeout(state.timer);
|
|
2750
|
-
this.marketPointer = undefined;
|
|
2751
|
-
}
|
|
2752
|
-
handleMarketPointerDown = event => {
|
|
2753
|
-
if (event.button !== 0 || !(event.target instanceof Element)) return;
|
|
2754
|
-
this.marketLongPressFired = false;
|
|
2755
|
-
if (event.target.closest('[data-native-list-action]')) return;
|
|
2756
|
-
const rowElement = event.target.closest('[data-native-list-row-key]');
|
|
2757
|
-
const row = this.rowAtElement(rowElement);
|
|
2758
|
-
if (row?.type !== 'market' || row.disabled) return;
|
|
2759
|
-
this.cancelMarketPointer();
|
|
2760
|
-
if (row.pressInActionKey) this.emitRowAction(row, row.pressInActionKey, rowElement ?? undefined, rowElement ?? undefined);
|
|
2761
|
-
if (!row.longPressActionKey || !rowElement) return;
|
|
2762
|
-
markActionAnchorSource(rowElement, 'row');
|
|
2763
|
-
const timer = this.document.defaultView?.setTimeout(() => {
|
|
2764
|
-
const current = this.marketPointer;
|
|
2765
|
-
if (!current || current.pointerId !== event.pointerId) return;
|
|
2766
|
-
this.marketPointer = undefined;
|
|
2767
|
-
this.marketLongPressFired = true;
|
|
2768
|
-
this.emitRowAction(row, row.longPressActionKey, rowElement, rowElement);
|
|
2769
|
-
}, MARKET_LONG_PRESS_MS);
|
|
2770
|
-
if (timer === undefined) return;
|
|
2771
|
-
this.marketPointer = {
|
|
2772
|
-
pointerId: event.pointerId,
|
|
2773
|
-
rowKey: row.key,
|
|
2774
|
-
startX: event.clientX,
|
|
2775
|
-
startY: event.clientY,
|
|
2776
|
-
timer
|
|
2777
|
-
};
|
|
2778
|
-
};
|
|
2779
|
-
handleMarketPointerMove = event => {
|
|
2780
|
-
const state = this.marketPointer;
|
|
2781
|
-
if (!state || state.pointerId !== event.pointerId) return;
|
|
2782
|
-
if (Math.abs(event.clientX - state.startX) > MARKET_MOVE_CANCEL_PX || Math.abs(event.clientY - state.startY) > MARKET_MOVE_CANCEL_PX) this.cancelMarketPointer();
|
|
2783
|
-
};
|
|
2784
|
-
handleMarketPointerEnd = event => {
|
|
2785
|
-
if (this.marketPointer?.pointerId === event.pointerId) this.cancelMarketPointer();
|
|
2786
|
-
};
|
|
2787
2437
|
|
|
2788
2438
|
// OneKey patch: hover opens the same anchored help action as native taps.
|
|
2789
2439
|
handleTitlePointerOver = event => {
|
|
@@ -2806,8 +2456,7 @@ export class NativeListWebEngine {
|
|
|
2806
2456
|
if (this.actionAnchor?.actionElement === action) this.invalidateActionAnchor('pointerLeave');
|
|
2807
2457
|
};
|
|
2808
2458
|
handleClick = event => {
|
|
2809
|
-
if (
|
|
2810
|
-
this.marketLongPressFired = false;
|
|
2459
|
+
if (Date.now() < this.suppressClickUntil) {
|
|
2811
2460
|
event.preventDefault();
|
|
2812
2461
|
event.stopPropagation();
|
|
2813
2462
|
return;
|
|
@@ -2932,7 +2581,6 @@ export class NativeListWebEngine {
|
|
|
2932
2581
|
});
|
|
2933
2582
|
}
|
|
2934
2583
|
handleScroll = () => {
|
|
2935
|
-
this.cancelMarketPointer();
|
|
2936
2584
|
this.invalidateActionAnchor('scroll');
|
|
2937
2585
|
this.scheduleFrame();
|
|
2938
2586
|
};
|
|
@@ -28,57 +28,6 @@ export type BadgeModel = Readonly<{
|
|
|
28
28
|
text: string;
|
|
29
29
|
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
30
30
|
}>;
|
|
31
|
-
export type MarketTextStyle = Readonly<{
|
|
32
|
-
fontSize?: number;
|
|
33
|
-
fontWeight?: 'regular' | 'medium' | 'semibold' | 'bold';
|
|
34
|
-
color?: string;
|
|
35
|
-
lineHeight?: number;
|
|
36
|
-
lines?: 1 | 2;
|
|
37
|
-
alignment?: 'start' | 'center' | 'end';
|
|
38
|
-
}>;
|
|
39
|
-
export type MarketImageStyle = Readonly<{
|
|
40
|
-
width?: number;
|
|
41
|
-
height?: number;
|
|
42
|
-
shape?: 'circle' | 'rounded' | 'square';
|
|
43
|
-
cornerRadius?: number;
|
|
44
|
-
contentFit?: ImageContentFit;
|
|
45
|
-
}>;
|
|
46
|
-
export type MarketRowStyle = Readonly<{
|
|
47
|
-
horizontalPadding?: number;
|
|
48
|
-
verticalPadding?: number;
|
|
49
|
-
leadingGap?: number;
|
|
50
|
-
/** Space between title and subtitle; 0 by default, bounded to 0..16. */
|
|
51
|
-
lineGap?: number;
|
|
52
|
-
titleBadgeGap?: number;
|
|
53
|
-
trailingGap?: number;
|
|
54
|
-
image?: MarketImageStyle;
|
|
55
|
-
title?: MarketTextStyle;
|
|
56
|
-
subtitle?: MarketTextStyle;
|
|
57
|
-
price?: MarketTextStyle;
|
|
58
|
-
change?: MarketTextStyle;
|
|
59
|
-
changeWidth?: number;
|
|
60
|
-
changeHeight?: number;
|
|
61
|
-
changeCornerRadius?: number;
|
|
62
|
-
}>;
|
|
63
|
-
export type MarketBadgeModel = Readonly<{
|
|
64
|
-
key: string;
|
|
65
|
-
text?: string;
|
|
66
|
-
/** Finite native glyph set; currently only the community verified mark. */
|
|
67
|
-
iconName?: 'verified';
|
|
68
|
-
icon?: ImageSource;
|
|
69
|
-
tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
70
|
-
textColor?: string;
|
|
71
|
-
backgroundColor?: string;
|
|
72
|
-
actionKey?: string;
|
|
73
|
-
accessibilityLabel?: string;
|
|
74
|
-
}>;
|
|
75
|
-
export type MarketChangeModel = Readonly<{
|
|
76
|
-
text: string;
|
|
77
|
-
textSegments?: readonly ValueTextSegment[];
|
|
78
|
-
tone: 'positive' | 'negative' | 'neutral';
|
|
79
|
-
textColor?: string;
|
|
80
|
-
backgroundColor?: string;
|
|
81
|
-
}>;
|
|
82
31
|
export type SelectorTextSegment = Readonly<{
|
|
83
32
|
text: string;
|
|
84
33
|
textSegments?: readonly ValueTextSegment[];
|
|
@@ -312,26 +261,6 @@ export type DataRow = RowBase & Readonly<{
|
|
|
312
261
|
favorite?: boolean;
|
|
313
262
|
favoriteActive?: boolean;
|
|
314
263
|
}>;
|
|
315
|
-
/** Native Market quote row. All values are already localized/formatted strings. */
|
|
316
|
-
export type MarketRow = RowBase & Readonly<{
|
|
317
|
-
type: 'market';
|
|
318
|
-
variant: 'token' | 'stock' | 'perp';
|
|
319
|
-
leading: LeadingVisual;
|
|
320
|
-
title: string;
|
|
321
|
-
subtitle?: string;
|
|
322
|
-
subtitleSegments?: readonly ValueTextSegment[];
|
|
323
|
-
price: string;
|
|
324
|
-
priceSegments?: readonly ValueTextSegment[];
|
|
325
|
-
change: MarketChangeModel;
|
|
326
|
-
badges?: readonly MarketBadgeModel[];
|
|
327
|
-
pressActionKey?: string;
|
|
328
|
-
pressInActionKey?: string;
|
|
329
|
-
longPressActionKey?: string;
|
|
330
|
-
diagnostics?: Readonly<{
|
|
331
|
-
imageBindActionKey?: string;
|
|
332
|
-
}>;
|
|
333
|
-
style?: MarketRowStyle;
|
|
334
|
-
}>;
|
|
335
264
|
export type MediaTileRow = RowBase & Readonly<{
|
|
336
265
|
type: 'mediaTile';
|
|
337
266
|
variant: 'gallery' | 'browserPreview';
|
|
@@ -406,13 +335,10 @@ export type ActionRow = RowBase & Readonly<{
|
|
|
406
335
|
export type SystemRow = RowBase & (Readonly<{
|
|
407
336
|
type: 'system';
|
|
408
337
|
variant: 'loading';
|
|
409
|
-
presentation?: 'market';
|
|
410
|
-
loadingStyle?: 'skeleton' | 'spinner';
|
|
411
338
|
message?: string;
|
|
412
339
|
}> | Readonly<{
|
|
413
340
|
type: 'system';
|
|
414
341
|
variant: 'retry';
|
|
415
|
-
presentation?: 'market';
|
|
416
342
|
message: string;
|
|
417
343
|
actionKey: string;
|
|
418
344
|
}> | Readonly<{
|
|
@@ -424,19 +350,17 @@ export type SystemRow = RowBase & (Readonly<{
|
|
|
424
350
|
}> | Readonly<{
|
|
425
351
|
type: 'system';
|
|
426
352
|
variant: 'noMatch';
|
|
427
|
-
presentation?: 'market';
|
|
428
353
|
message: string;
|
|
429
354
|
}> | Readonly<{
|
|
430
355
|
type: 'system';
|
|
431
356
|
variant: 'end';
|
|
432
|
-
presentation?: 'market';
|
|
433
357
|
message?: string;
|
|
434
358
|
}> | Readonly<{
|
|
435
359
|
type: 'system';
|
|
436
360
|
variant: 'spacer';
|
|
437
361
|
height: number;
|
|
438
362
|
}>);
|
|
439
|
-
export type RowModel = IdentityRow | WalletGroupRow | RailRow | ActivityRow | MessageRow | DataRow |
|
|
363
|
+
export type RowModel = IdentityRow | WalletGroupRow | RailRow | ActivityRow | MessageRow | DataRow | MediaTileRow | MetricCardRow | SectionHeaderRow | ActionRow | SystemRow;
|
|
440
364
|
export type NativeListTheme = Readonly<{
|
|
441
365
|
checkboxBackground?: string;
|
|
442
366
|
checkboxBorder?: string;
|
|
@@ -521,10 +445,6 @@ export type RowPatch = Readonly<{
|
|
|
521
445
|
type: 'dataRow';
|
|
522
446
|
key: string;
|
|
523
447
|
changes: Partial<Pick<DataRow, CommonPatchFields | 'leading' | 'columns' | 'checkbox' | 'index' | 'badge' | 'badges' | 'favorite' | 'favoriteActive'>>;
|
|
524
|
-
}> | Readonly<{
|
|
525
|
-
type: 'market';
|
|
526
|
-
key: string;
|
|
527
|
-
changes: Partial<Pick<MarketRow, CommonPatchFields | 'leading' | 'title' | 'subtitle' | 'subtitleSegments' | 'price' | 'priceSegments' | 'change' | 'badges' | 'pressActionKey' | 'pressInActionKey' | 'longPressActionKey' | 'diagnostics' | 'style'>>;
|
|
528
448
|
}> | Readonly<{
|
|
529
449
|
type: 'mediaTile';
|
|
530
450
|
key: string;
|
|
@@ -550,7 +470,7 @@ export type RowPatch = Readonly<{
|
|
|
550
470
|
message?: string;
|
|
551
471
|
}>;
|
|
552
472
|
}>;
|
|
553
|
-
export type NativeListActionSource = 'row' | '
|
|
473
|
+
export type NativeListActionSource = 'row' | 'leadingAction' | 'trailingAccessory' | 'footerAction' | 'mediaClose';
|
|
554
474
|
export type NativeListWindowRect = Readonly<{
|
|
555
475
|
x: number;
|
|
556
476
|
y: number;
|