@coinbase/cds-mobile 9.12.1 → 9.12.3
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/CHANGELOG.md +12 -0
- package/dts/visualizations/chart/CartesianChart.d.ts.map +1 -1
- package/dts/visualizations/chart/scrubber/ScrubberProvider.d.ts.map +1 -1
- package/dts/visualizations/chart/utils/transition.d.ts.map +1 -1
- package/esm/visualizations/chart/CartesianChart.js +19 -6
- package/esm/visualizations/chart/line/__stories__/LineChart.stories.js +86 -81
- package/esm/visualizations/chart/scrubber/ScrubberProvider.js +4 -7
- package/esm/visualizations/chart/utils/transition.js +7 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.12.3 (8/10/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: reuse initial path on mobile charts. [[#837](https://github.com/coinbase/cds/pull/837)]
|
|
16
|
+
|
|
17
|
+
## 9.12.2 (8/10/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🐞 Fixes
|
|
20
|
+
|
|
21
|
+
- Fix: support flex grow charts. [[#836](https://github.com/coinbase/cds/pull/836)]
|
|
22
|
+
|
|
11
23
|
## 9.12.1 (8/8/2026 PST)
|
|
12
24
|
|
|
13
25
|
#### 🐞 Fixes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjG,OAAO,EAAgB,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI/D,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAEL,KAAK,wBAAwB,EAO9B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,KAAK,UAAU,EAKf,KAAK,cAAc,EACnB,KAAK,MAAM,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAmC,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../src/visualizations/chart/CartesianChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AACvF,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEjG,OAAO,EAAgB,KAAK,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEvF,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI/D,OAAO,EAEL,KAAK,8BAA8B,EACpC,MAAM,sCAAsC,CAAC;AAC9C,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAC3F,OAAO,EAEL,KAAK,wBAAwB,EAO9B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,KAAK,UAAU,EAKf,KAAK,cAAc,EACnB,KAAK,MAAM,EACZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAmC,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAwE7F,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,GACpE,IAAI,CAAC,qBAAqB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC,GAAG;IAC5E;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,wBAAwB,CAAC,EAAE,CAAC;IAChF;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,wBAAwB,CAAC,GAAG,OAAO,CAAC,wBAAwB,CAAC,EAAE,CAAC;IAChF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEJ,MAAM,MAAM,mBAAmB,GAAG,uBAAuB,GACvD,IAAI,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,GACpD,IAAI,CAAC,QAAQ,EAAE,YAAY,CAAC,GAAG;IAC7B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,sBAAsB,CAAC;IACtC;;;OAGG;IACH,6BAA6B,CAAC,EAAE,8BAA8B,CAAC,oBAAoB,CAAC,CAAC;IACrF;;OAEG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B;;WAEG;QACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC9B,CAAC;CACH,CAAC;AAEJ,eAAO,MAAM,cAAc,+cAkCtB,mBAAmB,GAAG;IACvB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CA6cF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAOpD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAI9E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,CAAC,GAAG;IAC3F,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqK5D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,GAAG,IAAI,KAAG,MA4BpF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/transition.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,WAAW,EAKhB,KAAK,gBAAgB,EAErB,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAsB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG7E;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,UAAU,GAAG,CACrB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,CAC1C,GAAG;IACF;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAI/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,MAAM,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAOF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAGF;;GAEG;AACH,KAAK,YAAY,CAAC,CAAC,IAAI,CACrB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EAAE,EACf,MAAM,EAAE,CAAC,EAAE,EACX,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,CAAC,KACN,CAAC,CAAC;AAEP,eAAO,MAAM,eAAe,GAAI,CAAC,EAC/B,SAAS,MAAM,CAAC,EAChB,OAAO,WAAW,CAAC,MAAM,CAAC,EAC1B,cAAc,YAAY,CAAC,CAAC,CAAC,EAC7B,OAAO,MAAM,EAAE,EACf,QAAQ,CAAC,EAAE,EACX,UAAU,iBAAiB,mBAc5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,EAAE,YAAY,UAAU,GAAG,IAAI,KAAG,MA4BpF,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAoHrB,CAAC"}
|
|
@@ -13,6 +13,7 @@ import { convertToSerializableScale } from './utils/scale';
|
|
|
13
13
|
import { useChartContextBridge } from './ChartContextBridge';
|
|
14
14
|
import { CartesianChartProvider } from './ChartProvider';
|
|
15
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
+
const claimTouchResponder = () => true;
|
|
16
17
|
const ChartCanvas = /*#__PURE__*/memo(_ref => {
|
|
17
18
|
let {
|
|
18
19
|
children,
|
|
@@ -405,12 +406,24 @@ export const CartesianChart = /*#__PURE__*/memo(_ref2 => {
|
|
|
405
406
|
}
|
|
406
407
|
return legend;
|
|
407
408
|
}, [legend, legendAccessibilityLabel, legendPosition]);
|
|
408
|
-
const rootBoxProps = useMemo(() =>
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
409
|
+
const rootBoxProps = useMemo(() => {
|
|
410
|
+
const rootProps = _extends({
|
|
411
|
+
ref,
|
|
412
|
+
height,
|
|
413
|
+
style: rootStyles,
|
|
414
|
+
width
|
|
415
|
+
}, props, enableScrubbing ? {
|
|
416
|
+
onStartShouldSetResponder: claimTouchResponder,
|
|
417
|
+
onMoveShouldSetResponder: claimTouchResponder
|
|
418
|
+
} : null);
|
|
419
|
+
if (enableScrubbing) {
|
|
420
|
+
return _extends({}, rootProps, {
|
|
421
|
+
onStartShouldSetResponder: claimTouchResponder,
|
|
422
|
+
onMoveShouldSetResponder: claimTouchResponder
|
|
423
|
+
});
|
|
424
|
+
}
|
|
425
|
+
return rootProps;
|
|
426
|
+
}, [ref, height, rootStyles, width, props, enableScrubbing]);
|
|
414
427
|
return /*#__PURE__*/_jsx(CartesianChartProvider, {
|
|
415
428
|
value: contextValue,
|
|
416
429
|
children: /*#__PURE__*/_jsx(ScrubberProvider, {
|
|
@@ -918,82 +918,83 @@ function AssetPriceWithDottedArea() {
|
|
|
918
918
|
const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
|
|
919
919
|
return price + " " + date;
|
|
920
920
|
}, [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues]);
|
|
921
|
-
return /*#__PURE__*/
|
|
922
|
-
|
|
923
|
-
children:
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
921
|
+
return /*#__PURE__*/_jsx(Box, {
|
|
922
|
+
height: 420,
|
|
923
|
+
children: /*#__PURE__*/_jsxs(VStack, {
|
|
924
|
+
flexGrow: 1,
|
|
925
|
+
gap: 2,
|
|
926
|
+
height: "100%",
|
|
927
|
+
children: [/*#__PURE__*/_jsx(SectionHeader, {
|
|
928
|
+
balance: formatPrice(currentPrice),
|
|
929
|
+
end: /*#__PURE__*/_jsx(VStack, {
|
|
930
|
+
justifyContent: "center",
|
|
931
|
+
children: /*#__PURE__*/_jsx(RemoteImage, {
|
|
932
|
+
shape: "circle",
|
|
933
|
+
size: "xl",
|
|
934
|
+
source: assets.btc.imageUrl
|
|
935
|
+
})
|
|
936
|
+
}),
|
|
937
|
+
title: "Bitcoin"
|
|
938
|
+
}), /*#__PURE__*/_jsx(LineChart, {
|
|
939
|
+
enableScrubbing: true,
|
|
940
|
+
showArea: true,
|
|
941
|
+
accessibilityLabel: chartAccessibilityLabel,
|
|
942
|
+
areaType: "dotted",
|
|
943
|
+
getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
|
|
944
|
+
inset: {
|
|
945
|
+
top: 52
|
|
946
|
+
},
|
|
947
|
+
series: [{
|
|
948
|
+
id: 'btc',
|
|
949
|
+
data: sparklineTimePeriodDataValues,
|
|
950
|
+
color: assets.btc.color
|
|
951
|
+
}],
|
|
952
|
+
style: {
|
|
953
|
+
flex: 1
|
|
954
|
+
},
|
|
955
|
+
children: /*#__PURE__*/_jsx(Scrubber, {
|
|
956
|
+
idlePulse: true,
|
|
957
|
+
labelElevated: true,
|
|
958
|
+
label: d => {
|
|
959
|
+
const date = formatDate(sparklineTimePeriodDataTimestamps[d]);
|
|
960
|
+
const price = formatPrice(sparklineTimePeriodDataValues[d]);
|
|
961
|
+
const regularStyle = {
|
|
962
|
+
fontFamilies: ['Inter'],
|
|
963
|
+
fontSize: 14,
|
|
964
|
+
fontStyle: {
|
|
965
|
+
weight: FontWeight.Normal
|
|
966
|
+
},
|
|
967
|
+
color: Skia.Color(theme.color.fgMuted)
|
|
968
|
+
};
|
|
969
|
+
const boldStyle = _extends({
|
|
970
|
+
fontFamilies: ['Inter']
|
|
971
|
+
}, regularStyle, {
|
|
972
|
+
fontStyle: {
|
|
973
|
+
weight: FontWeight.Bold
|
|
974
|
+
}
|
|
975
|
+
});
|
|
976
976
|
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
977
|
+
// 3. Use the ParagraphBuilder
|
|
978
|
+
const builder = Skia.ParagraphBuilder.Make({
|
|
979
|
+
textAlign: TextAlign.Left
|
|
980
|
+
}, fontMgr);
|
|
981
|
+
builder.pushStyle(boldStyle);
|
|
982
|
+
builder.addText(price);
|
|
983
|
+
builder.pushStyle(regularStyle);
|
|
984
|
+
builder.addText(" " + date);
|
|
985
|
+
const para = builder.build();
|
|
986
|
+
para.layout(512);
|
|
987
|
+
return para;
|
|
988
|
+
}
|
|
989
|
+
})
|
|
990
|
+
}), /*#__PURE__*/_jsx(PeriodSelector, {
|
|
991
|
+
TabComponent: BTCTab,
|
|
992
|
+
TabsActiveIndicatorComponent: BTCActiveIndicator,
|
|
993
|
+
activeTab: timePeriod,
|
|
994
|
+
onChange: onPeriodChange,
|
|
995
|
+
tabs: tabs
|
|
996
|
+
})]
|
|
997
|
+
})
|
|
997
998
|
});
|
|
998
999
|
});
|
|
999
1000
|
return /*#__PURE__*/_jsx(AssetPriceDotted, {});
|
|
@@ -1664,13 +1665,17 @@ function DataCardWithLineChart() {
|
|
|
1664
1665
|
subtitle: "Price trend",
|
|
1665
1666
|
thumbnail: exampleThumbnail,
|
|
1666
1667
|
title: "Line Chart Card",
|
|
1667
|
-
children: /*#__PURE__*/_jsx(
|
|
1668
|
-
showArea: true,
|
|
1669
|
-
accessibilityLabel: "Ethereum price chart",
|
|
1670
|
-
areaType: "dotted",
|
|
1668
|
+
children: /*#__PURE__*/_jsx(Box, {
|
|
1671
1669
|
height: 120,
|
|
1672
|
-
|
|
1673
|
-
|
|
1670
|
+
overflow: "hidden",
|
|
1671
|
+
children: /*#__PURE__*/_jsx(LineChart, {
|
|
1672
|
+
showArea: true,
|
|
1673
|
+
accessibilityLabel: "Ethereum price chart",
|
|
1674
|
+
areaType: "dotted",
|
|
1675
|
+
flexGrow: 1,
|
|
1676
|
+
inset: 0,
|
|
1677
|
+
series: lineChartSeries
|
|
1678
|
+
})
|
|
1674
1679
|
})
|
|
1675
1680
|
}), /*#__PURE__*/_jsx(DataCard, {
|
|
1676
1681
|
layout: "vertical",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import { Platform
|
|
2
|
+
import { Platform } from 'react-native';
|
|
3
3
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
4
4
|
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
|
|
5
5
|
import { Haptics } from '../../../utils/haptics';
|
|
@@ -137,15 +137,12 @@ export const ScrubberProvider = _ref => {
|
|
|
137
137
|
value: contextValue,
|
|
138
138
|
children: children
|
|
139
139
|
});
|
|
140
|
+
|
|
141
|
+
// Wrap with gesture handler only if scrubbing is enabled
|
|
140
142
|
if (enableScrubbing) {
|
|
141
143
|
return /*#__PURE__*/_jsx(GestureDetector, {
|
|
142
144
|
gesture: longPressGesture,
|
|
143
|
-
children:
|
|
144
|
-
collapsable: false,
|
|
145
|
-
onMoveShouldSetResponder: () => true,
|
|
146
|
-
onStartShouldSetResponder: () => true,
|
|
147
|
-
children: content
|
|
148
|
-
})
|
|
145
|
+
children: content
|
|
149
146
|
});
|
|
150
147
|
}
|
|
151
148
|
return content;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useEffect, useMemo, useRef } from 'react';
|
|
1
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { useAnimatedReaction, useSharedValue, withDelay, withSpring, withTiming } from 'react-native-reanimated';
|
|
3
3
|
import { notifyChange, Skia } from '@shopify/react-native-skia';
|
|
4
4
|
import { interpolatePath } from 'd3-interpolate-path';
|
|
@@ -166,7 +166,6 @@ export const buildTransition = (targetValue, transition) => {
|
|
|
166
166
|
* });
|
|
167
167
|
*/
|
|
168
168
|
export const usePathTransition = _ref => {
|
|
169
|
-
var _Skia$Path$MakeFromSV;
|
|
170
169
|
let {
|
|
171
170
|
currentPath,
|
|
172
171
|
initialPath,
|
|
@@ -183,7 +182,12 @@ export const usePathTransition = _ref => {
|
|
|
183
182
|
const isFirstAnimation = useRef(!!initialPath);
|
|
184
183
|
const interpolatorRef = useRef(null);
|
|
185
184
|
const progress = useSharedValue(0);
|
|
186
|
-
|
|
185
|
+
|
|
186
|
+
// Re-renders must not re-parse SVG; lazy useState seeds useSharedValue on mount only.
|
|
187
|
+
const [initialSkiaPath] = useState(() => {
|
|
188
|
+
var _Skia$Path$MakeFromSV;
|
|
189
|
+
return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(initialPath != null ? initialPath : currentPath)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
|
|
190
|
+
});
|
|
187
191
|
const normalizedStartShared = useSharedValue(initialSkiaPath);
|
|
188
192
|
const normalizedEndShared = useSharedValue(initialSkiaPath);
|
|
189
193
|
const fallbackPathShared = useSharedValue(initialSkiaPath);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.3",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.12.
|
|
221
|
+
"@coinbase/cds-common": "^9.12.3",
|
|
222
222
|
"@coinbase/cds-icons": "^5.21.0",
|
|
223
223
|
"@coinbase/cds-illustrations": "^4.47.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|