@coinbase/cds-mobile 9.10.1 → 9.10.4
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 +18 -0
- package/dts/cards/CardRoot.d.ts +2 -2
- package/dts/cards/CardRoot.d.ts.map +1 -1
- package/dts/cards/MediaCard/MediaCard.d.ts +8 -8
- package/dts/cards/MediaCard/MediaCard.d.ts.map +1 -1
- package/dts/examples/ExampleScreen.d.ts.map +1 -1
- package/dts/overlays/drawer/Drawer.d.ts.map +1 -1
- package/dts/overlays/drawer/useDrawerPanResponder.d.ts.map +1 -1
- package/dts/visualizations/chart/scrubber/ScrubberProvider.d.ts.map +1 -1
- package/esm/controls/InputStack.js +0 -6
- package/esm/examples/ExampleScreen.js +2 -2
- package/esm/overlays/drawer/Drawer.js +44 -34
- package/esm/overlays/drawer/useDrawerPanResponder.js +8 -3
- package/esm/visualizations/chart/scrubber/ScrubberProvider.js +37 -26
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,24 @@ All notable changes to this project will be documented in this file.
|
|
|
8
8
|
|
|
9
9
|
<!-- template-start -->
|
|
10
10
|
|
|
11
|
+
## 9.10.4 (8/6/2026 PST)
|
|
12
|
+
|
|
13
|
+
#### 🐞 Fixes
|
|
14
|
+
|
|
15
|
+
- Enable chart scrubbing inside Tray/Drawer on Android (GestureHandlerRootView in Modal; chart claims touch responder so outside-handle pan-to-dismiss does not block long-press scrub). [[#827](https://github.com/coinbase/cds/pull/827)]
|
|
16
|
+
|
|
17
|
+
## 9.10.3 (8/5/2026 PST)
|
|
18
|
+
|
|
19
|
+
#### 🐞 Fixes
|
|
20
|
+
|
|
21
|
+
- Fix: remove unnecessary padding on inputstack. [[#823](https://github.com/coinbase/cds/pull/823)]
|
|
22
|
+
|
|
23
|
+
## 9.10.2 (7/31/2026 PST)
|
|
24
|
+
|
|
25
|
+
#### 🐞 Fixes
|
|
26
|
+
|
|
27
|
+
- Fix: move Pressalbe props from MediaCardProps to MediaCardBaseProps to allow them to be accessed in ComponentConfig settings which only manages -BaseProps". [[#819](https://github.com/coinbase/cds/pull/819)]
|
|
28
|
+
|
|
11
29
|
## 9.10.1 (7/30/2026 PST)
|
|
12
30
|
|
|
13
31
|
#### 🐞 Fixes
|
package/dts/cards/CardRoot.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { StyleProp, View, ViewStyle } from 'react-native';
|
|
3
|
-
import { type PressableProps } from '../system/Pressable';
|
|
4
|
-
export type CardRootBaseProps = {
|
|
3
|
+
import { type PressableBaseProps, type PressableProps } from '../system/Pressable';
|
|
4
|
+
export type CardRootBaseProps = Omit<PressableBaseProps, 'style'> & {
|
|
5
5
|
/** Content to render inside the card. */
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardRoot.d.ts","sourceRoot":"","sources":["../../src/cards/CardRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"CardRoot.d.ts","sourceRoot":"","sources":["../../src/cards/CardRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAa,KAAK,kBAAkB,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE9F,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,kBAAkB,EAAE,OAAO,CAAC,GAAG;IAClE,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEJ;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,6EAMhB,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CAQF,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import type { StyleProp, View, ViewStyle } from 'react-native';
|
|
2
|
-
import { type
|
|
2
|
+
import { type CardRootBaseProps } from '../CardRoot';
|
|
3
3
|
import { type MediaCardLayoutProps } from './MediaCardLayout';
|
|
4
|
-
export type MediaCardBaseProps = MediaCardLayoutProps
|
|
5
|
-
export type MediaCardProps = MediaCardBaseProps &
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
};
|
|
4
|
+
export type MediaCardBaseProps = MediaCardLayoutProps & Omit<CardRootBaseProps, 'children'>;
|
|
5
|
+
export type MediaCardProps = MediaCardBaseProps & {
|
|
6
|
+
style?: StyleProp<ViewStyle>;
|
|
7
|
+
styles?: {
|
|
8
|
+
/** Root element */
|
|
9
|
+
root?: StyleProp<ViewStyle>;
|
|
11
10
|
};
|
|
11
|
+
};
|
|
12
12
|
export declare const MediaCard: import('react').MemoExoticComponent<
|
|
13
13
|
({
|
|
14
14
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"MediaCard.d.ts","sourceRoot":"","sources":["../../../src/cards/MediaCard/MediaCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG/D,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE/D,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAC;AAE5F,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE;QACP,mBAAmB;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC7B,CAAC;CACH,CAAC;AAQF,eAAO,MAAM,SAAS,+KAYjB,cAAc,GAAG;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;CACvB,6CAeF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;qCAIvB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KAC7B;;
|
|
1
|
+
{"version":3,"file":"ExampleScreen.d.ts","sourceRoot":"","sources":["../../src/examples/ExampleScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AACjG,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAG5E,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAM5D,KAAK,qBAAqB,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,qBAAqB,GAAG,KAAK,CAAC,SAAS,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,kEAOrB,YAAY,4CA8Bd,CAAC;AAEF,eAAO,MAAM,aAAa;qCAIvB,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,GAAG;QACzC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;KAC7B;;CAyCA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAcrF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qDAAqD,CAAC;AACpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAM1E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAgBxE,MAAM,MAAM,oBAAoB,GAAG,CAAC,IAAI,EAAE;IAAE,WAAW,EAAE,MAAM,IAAI,CAAA;CAAE,KAAK,KAAK,CAAC,SAAS,CAAC;AAE1F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,gDAAgD;IAChD,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,GAAG,yBAAyB,CAAC,GAChF,IAAI,CAAC,UAAU,EAAE,gBAAgB,GAAG,UAAU,CAAC,GAAG;IAChD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IAClD;;;SAGK;IACL,GAAG,CAAC,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,kCAAkC,CAAC,EAAE,OAAO,CAAC;IAC7C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IAC7C;;SAEK;IACL,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uDAAuD;IACvD,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,iCAAiC,CAAC,EAAE,OAAO,CAAC;IAC5C,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC;;;OAGG;IACH,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC;;;;OAIG;IACH,YAAY,CAAC,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAAC;IACtD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;CACxC,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG;IAC1C,MAAM,CAAC,EAAE;QACP,6BAA6B;QAC7B,IAAI,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC5B,+BAA+B;QAC/B,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC/B,yCAAyC;QACzC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,mCAAmC;QACnC,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,mCAAmC;QACnC,eAAe,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACvC,qCAAqC;QACrC,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAMF,eAAO,MAAM,MAAM,iDAId,WAAW,GAAG;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;CACrC,6CAwOF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAc9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"useDrawerPanResponder.d.ts","sourceRoot":"","sources":["../../../src/overlays/drawer/useDrawerPanResponder.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAmD,MAAM,cAAc,CAAC;AAc9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAMhF,KAAK,2BAA2B,GAAG;IACjC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,eAAe,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IAC7C,GAAG,EAAE,gBAAgB,CAAC;IACtB,iCAAiC,EAAE,OAAO,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACjC,8BAA8B,EAAE,MAAM,CAAC;CACxC,CAAC;AASF,eAAO,MAAM,qBAAqB,GAAI,6JASnC,2BAA2B,gDAqO7B,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,CA+
|
|
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,CA+K5D,CAAC"}
|
|
@@ -143,14 +143,8 @@ export const InputStack = /*#__PURE__*/memo(function InputStack(_props) {
|
|
|
143
143
|
})]
|
|
144
144
|
}));
|
|
145
145
|
});
|
|
146
|
-
|
|
147
|
-
// Fixes a problem found in Accordion children element.
|
|
148
|
-
// When `overflow: auto` is set the thickened border when focused is not accounted for
|
|
149
|
-
// hence you see a cutoff.
|
|
150
|
-
// Padding must accommodate the focus border extension (default 2px for focusedBorderWidth: 200)
|
|
151
146
|
const staticStyles = StyleSheet.create({
|
|
152
147
|
inputAreaContainerStyle: {
|
|
153
|
-
padding: 2,
|
|
154
148
|
flexGrow: 2
|
|
155
149
|
}
|
|
156
150
|
});
|
|
@@ -74,13 +74,13 @@ export const ExampleScreen = _ref2 => {
|
|
|
74
74
|
borderedTop: true,
|
|
75
75
|
background: "bg",
|
|
76
76
|
borderColor: "bgLineHeavy",
|
|
77
|
-
paddingX: gutter,
|
|
78
77
|
testID: "mobile-playground-screen"
|
|
79
78
|
}, boxProps, {
|
|
80
79
|
children: /*#__PURE__*/_jsx(ScrollView, {
|
|
81
80
|
ref: ref,
|
|
82
81
|
contentContainerStyle: {
|
|
83
|
-
flexGrow: 1
|
|
82
|
+
flexGrow: 1,
|
|
83
|
+
paddingHorizontal: theme.space[gutter]
|
|
84
84
|
},
|
|
85
85
|
keyboardShouldPersistTaps: "always",
|
|
86
86
|
persistentScrollbar: false,
|
|
@@ -3,7 +3,8 @@ const _excluded = ["ref"],
|
|
|
3
3
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
4
4
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
5
5
|
import React, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
6
|
-
import { Animated, Keyboard, Modal, Platform, StatusBar, useWindowDimensions } from 'react-native';
|
|
6
|
+
import { Animated, Keyboard, Modal, Platform, StatusBar, StyleSheet, useWindowDimensions } from 'react-native';
|
|
7
|
+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
7
8
|
import { drawerAnimationDefaultDuration, MAX_OVER_DRAG } from '@coinbase/cds-common/animation/drawer';
|
|
8
9
|
import { OverlayContentContext } from '@coinbase/cds-common/overlays/OverlayContentContext';
|
|
9
10
|
import { horizontalDrawerPercentageOfView, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
|
|
@@ -18,6 +19,12 @@ import { useDrawerAnimation } from './useDrawerAnimation';
|
|
|
18
19
|
import { useDrawerPanResponder } from './useDrawerPanResponder';
|
|
19
20
|
import { useDrawerSpacing } from './useDrawerSpacing';
|
|
20
21
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
|
+
const drawerStyles = StyleSheet.create({
|
|
23
|
+
// Android Modal is outside the app gesture root; RNGH needs one here.
|
|
24
|
+
gestureRoot: {
|
|
25
|
+
flex: 1
|
|
26
|
+
}
|
|
27
|
+
});
|
|
21
28
|
const overlayContentContextValue = {
|
|
22
29
|
isDrawer: true
|
|
23
30
|
};
|
|
@@ -182,39 +189,42 @@ export const Drawer = /*#__PURE__*/memo(_ref => {
|
|
|
182
189
|
onRequestClose: handleRequestClose,
|
|
183
190
|
style: rootStyle
|
|
184
191
|
}, props, {
|
|
185
|
-
children: /*#__PURE__*/
|
|
186
|
-
|
|
187
|
-
children:
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
192
|
+
children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
|
|
193
|
+
style: drawerStyles.gestureRoot,
|
|
194
|
+
children: /*#__PURE__*/_jsxs(OverlayContentContext.Provider, {
|
|
195
|
+
value: overlayContentContextValue,
|
|
196
|
+
children: [Platform.select({
|
|
197
|
+
ios: hideStatusBar ? /*#__PURE__*/_jsx(StatusBar, {
|
|
198
|
+
animated: true,
|
|
199
|
+
hidden: true
|
|
200
|
+
}) : null,
|
|
201
|
+
default: null
|
|
202
|
+
}), /*#__PURE__*/_jsx(Overlay, {
|
|
203
|
+
onTouchStart: handleOverlayPress,
|
|
204
|
+
opacity: opacityAnimation,
|
|
205
|
+
style: styles == null ? void 0 : styles.overlay,
|
|
206
|
+
testID: "drawer-overlay"
|
|
207
|
+
}), /*#__PURE__*/_jsxs(Box, _extends({}, getContainerPanHandlers, {
|
|
208
|
+
animated: true
|
|
209
|
+
// close modal when user performs the "escape" accessibility gesture
|
|
210
|
+
// https://reactnative.dev/docs/accessibility#onaccessibilityescape-ios
|
|
211
|
+
,
|
|
212
|
+
onAccessibilityEscape: handleClose,
|
|
213
|
+
pin: pin,
|
|
214
|
+
style: containerStyle,
|
|
215
|
+
width: isSideDrawer ? horizontalDrawerWidth : '100%',
|
|
216
|
+
children: [showHandleBarOutside && handleBar, /*#__PURE__*/_jsxs(Box, {
|
|
217
|
+
accessibilityLabel: accessibilityLabel,
|
|
218
|
+
accessibilityLabelledBy: accessibilityLabelledBy,
|
|
219
|
+
borderRadius: isSideDrawer ? 0 : 600,
|
|
220
|
+
bordered: theme.activeColorScheme === 'dark',
|
|
221
|
+
elevation: 2,
|
|
222
|
+
maxHeight: !isSideDrawer ? verticalDrawerMaxHeight : '100%',
|
|
223
|
+
style: drawerStyle,
|
|
224
|
+
children: [showHandleBarInside && handleBar, content]
|
|
225
|
+
})]
|
|
226
|
+
}))]
|
|
227
|
+
})
|
|
218
228
|
})
|
|
219
229
|
}));
|
|
220
230
|
});
|
|
@@ -3,6 +3,9 @@ import { PanResponder, useWindowDimensions } from 'react-native';
|
|
|
3
3
|
import { DISMISSAL_DRAG_THRESHOLD, DISMISSAL_VELOCITY_THRESHOLD, MAX_OVER_DRAG, MIN_PAN_DISTANCE } from '@coinbase/cds-common/animation/drawer';
|
|
4
4
|
import { handleBarHeight, handleBarOffset, horizontalDrawerPercentageOfView, normalizeDrawerPanDistanceMultiplier, verticalDrawerPercentageOfView as defaultVerticalDrawerPercentageOfView } from '@coinbase/cds-common/tokens/drawer';
|
|
5
5
|
import { modulate } from '@coinbase/cds-common/utils/modulate';
|
|
6
|
+
|
|
7
|
+
/** Min dominant-axis travel before the drawer steals the gesture from children. */
|
|
8
|
+
const DRAWER_GESTURE_CAPTURE_DISTANCE = 10;
|
|
6
9
|
/** accumulated distance of the gesture - max over drag */
|
|
7
10
|
const calculateDragOffset = x => {
|
|
8
11
|
const newX = x / 100;
|
|
@@ -35,10 +38,12 @@ export const useDrawerPanResponder = _ref => {
|
|
|
35
38
|
dx,
|
|
36
39
|
dy
|
|
37
40
|
} = _ref2;
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
// Only capture when dismiss-axis movement dominates, so cross-axis child
|
|
42
|
+
// gestures (e.g. horizontal chart scrubbing in a bottom tray) are not stolen.
|
|
43
|
+
if (pin === 'bottom' || pin === 'top') {
|
|
44
|
+
return Math.abs(dy) > DRAWER_GESTURE_CAPTURE_DISTANCE && Math.abs(dy) > Math.abs(dx);
|
|
40
45
|
}
|
|
41
|
-
return dx >
|
|
46
|
+
return Math.abs(dx) > DRAWER_GESTURE_CAPTURE_DISTANCE && Math.abs(dx) > Math.abs(dy);
|
|
42
47
|
}, [pin]);
|
|
43
48
|
const shouldCaptureGestures = useCallback((_, state) => {
|
|
44
49
|
if (disableCapturePanGestureToDismiss) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import { Platform } from 'react-native';
|
|
2
|
+
import { Platform, View } 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';
|
|
@@ -92,35 +92,43 @@ export const ScrubberProvider = _ref => {
|
|
|
92
92
|
runOnJS(onScrubberPositionChange)(currentValue);
|
|
93
93
|
}
|
|
94
94
|
}, [onScrubberPositionChange]);
|
|
95
|
+
const longPressGesture = useMemo(() => {
|
|
96
|
+
const pan = Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures);
|
|
95
97
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
// Fail on cross-axis movement so parent pan-to-dismiss can win.
|
|
99
|
+
if (categoryAxisIsX) {
|
|
100
|
+
pan.failOffsetY([-15, 15]);
|
|
101
|
+
} else {
|
|
102
|
+
pan.failOffsetX([-15, 15]);
|
|
103
|
+
}
|
|
104
|
+
return pan.onStart(function onStart(event) {
|
|
105
|
+
runOnJS(handleStartEndHaptics)();
|
|
99
106
|
|
|
100
|
-
|
|
101
|
-
|
|
107
|
+
// Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
|
|
108
|
+
if (Platform.OS === 'android') {
|
|
109
|
+
const pointerPosition = categoryAxisIsX ? event.x : event.y;
|
|
110
|
+
const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
|
|
111
|
+
if (newScrubberPosition !== scrubberPosition.value) {
|
|
112
|
+
scrubberPosition.value = newScrubberPosition;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}).onUpdate(function onUpdate(event) {
|
|
102
116
|
const pointerPosition = categoryAxisIsX ? event.x : event.y;
|
|
103
117
|
const newScrubberPosition = getDataIndexFromPosition(pointerPosition);
|
|
104
118
|
if (newScrubberPosition !== scrubberPosition.value) {
|
|
105
119
|
scrubberPosition.value = newScrubberPosition;
|
|
106
120
|
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
}).onTouchesCancelled(function onTouchesCancelled() {
|
|
120
|
-
if (enableScrubbing) {
|
|
121
|
-
scrubberPosition.value = undefined;
|
|
122
|
-
}
|
|
123
|
-
}), [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
|
|
121
|
+
}).onEnd(function onEnd() {
|
|
122
|
+
if (enableScrubbing) {
|
|
123
|
+
runOnJS(handleStartEndHaptics)();
|
|
124
|
+
scrubberPosition.value = undefined;
|
|
125
|
+
}
|
|
126
|
+
}).onTouchesCancelled(function onTouchesCancelled() {
|
|
127
|
+
if (enableScrubbing) {
|
|
128
|
+
scrubberPosition.value = undefined;
|
|
129
|
+
}
|
|
130
|
+
});
|
|
131
|
+
}, [allowOverflowGestures, handleStartEndHaptics, getDataIndexFromPosition, categoryAxisIsX, scrubberPosition, enableScrubbing]);
|
|
124
132
|
const contextValue = useMemo(() => ({
|
|
125
133
|
enableScrubbing: !!enableScrubbing,
|
|
126
134
|
scrubberPosition
|
|
@@ -129,12 +137,15 @@ export const ScrubberProvider = _ref => {
|
|
|
129
137
|
value: contextValue,
|
|
130
138
|
children: children
|
|
131
139
|
});
|
|
132
|
-
|
|
133
|
-
// Wrap with gesture handler only if scrubbing is enabled
|
|
134
140
|
if (enableScrubbing) {
|
|
135
141
|
return /*#__PURE__*/_jsx(GestureDetector, {
|
|
136
142
|
gesture: longPressGesture,
|
|
137
|
-
children:
|
|
143
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
144
|
+
collapsable: false,
|
|
145
|
+
onMoveShouldSetResponder: () => true,
|
|
146
|
+
onStartShouldSetResponder: () => true,
|
|
147
|
+
children: content
|
|
148
|
+
})
|
|
138
149
|
});
|
|
139
150
|
}
|
|
140
151
|
return content;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coinbase/cds-mobile",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.4",
|
|
4
4
|
"description": "Coinbase Design System - Mobile",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -218,9 +218,9 @@
|
|
|
218
218
|
"react-native-worklets": "0.5.2"
|
|
219
219
|
},
|
|
220
220
|
"dependencies": {
|
|
221
|
-
"@coinbase/cds-common": "^9.10.
|
|
221
|
+
"@coinbase/cds-common": "^9.10.4",
|
|
222
222
|
"@coinbase/cds-icons": "^5.21.0",
|
|
223
|
-
"@coinbase/cds-illustrations": "^4.
|
|
223
|
+
"@coinbase/cds-illustrations": "^4.46.0",
|
|
224
224
|
"@coinbase/cds-lottie-files": "^3.3.4",
|
|
225
225
|
"@coinbase/cds-utils": "^2.3.5",
|
|
226
226
|
"@floating-ui/react-native": "^0.10.5",
|