@coinbase/cds-mobile 9.12.1 → 9.12.2
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 +6 -0
- package/dts/visualizations/chart/CartesianChart.d.ts.map +1 -1
- package/dts/visualizations/chart/scrubber/ScrubberProvider.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/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.12.2 (8/10/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Fix: support flex grow charts. [[#836](https://github.com/coinbase/cds/pull/836)]
|
|
16
|
+
|
|
11
17
|
## 9.12.1 (8/8/2026 PST)
|
|
12
18
|
|
|
13
19
|
#### 🐞 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"}
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.2",
|
|
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.2",
|
|
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",
|