@draftbit/core 48.4.6-f29495.2 → 48.4.6
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/lib/commonjs/components/BottomSheet/BottomSheet.js +1 -1
- package/lib/typescript/src/components/BottomSheet/BottomSheet.d.ts +3 -2
- package/lib/typescript/src/components/BottomSheet/BottomSheet.js +3 -3
- package/lib/typescript/src/components/BottomSheet/BottomSheet.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/BottomSheet/BottomSheet.js +3 -3
- package/src/components/BottomSheet/BottomSheet.js.map +1 -1
- package/src/components/BottomSheet/BottomSheet.tsx +90 -81
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.4.6
|
|
3
|
+
"version": "48.4.6",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "
|
|
44
|
+
"@draftbit/types": "48.3.0",
|
|
45
45
|
"@expo/vector-icons": "^13.0.0",
|
|
46
46
|
"@material-ui/core": "^4.11.0",
|
|
47
47
|
"@material-ui/pickers": "^3.2.10",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
],
|
|
101
101
|
"testEnvironment": "node"
|
|
102
102
|
},
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "98837af1fb2f76f21a65c5ecc52bc836bd184b83"
|
|
104
104
|
}
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import { StyleSheet, View, } from "react-native";
|
|
3
3
|
import BottomSheetComponent from "./BottomSheetComponent";
|
|
4
4
|
import { withTheme } from "../../theming";
|
|
5
|
-
const BottomSheet = ({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }) => {
|
|
5
|
+
const BottomSheet = React.forwardRef(({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%", middleSnapPosition = "50%", bottomSnapPosition = "80%", initialSnapIndex, initialSnapPosition = "bottom", showHandle = true, handleColor = theme.colors.divider, topBorderRadius = 20, borderWidth = 1, borderColor = theme.colors.divider, onSettle, style, children, ...rest }, ref) => {
|
|
6
6
|
const backgroundColor = (style === null || style === void 0 ? void 0 : style.backgroundColor) || theme.colors.background;
|
|
7
7
|
const snapPoints = snapPointsProp || [
|
|
8
8
|
topSnapPosition,
|
|
@@ -20,7 +20,7 @@ const BottomSheet = ({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%
|
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
return (React.createElement(View, { style: styles.parentContainer, pointerEvents: "box-none" },
|
|
23
|
-
React.createElement(BottomSheetComponent, { componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
|
|
23
|
+
React.createElement(BottomSheetComponent, { ref: ref, componentType: "ScrollView", snapPoints: snapPoints, initialSnapIndex: initialSnapIndex !== null && initialSnapIndex !== void 0 ? initialSnapIndex : getSnapIndexFromPosition(initialSnapPosition), renderHandle: () => (React.createElement(React.Fragment, null, showHandle && (React.createElement(View, { style: [
|
|
24
24
|
styles.handleContainer,
|
|
25
25
|
{
|
|
26
26
|
backgroundColor,
|
|
@@ -38,7 +38,7 @@ const BottomSheet = ({ theme, snapPoints: snapPointsProp, topSnapPosition = "10%
|
|
|
38
38
|
borderColor,
|
|
39
39
|
},
|
|
40
40
|
]), onSettle: onSettle, ...rest }, children)));
|
|
41
|
-
};
|
|
41
|
+
});
|
|
42
42
|
const styles = StyleSheet.create({
|
|
43
43
|
//Render on top of everything
|
|
44
44
|
parentContainer: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,cAAc,CAAC;AAEtB,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAuB1C,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"BottomSheet.js","sourceRoot":"","sources":["BottomSheet.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,91 +32,100 @@ export interface BottomSheetProps extends ScrollViewProps {
|
|
|
32
32
|
theme: Theme;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
const BottomSheet
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
35
|
+
const BottomSheet = React.forwardRef<
|
|
36
|
+
BottomSheetComponent<any>,
|
|
37
|
+
BottomSheetProps
|
|
38
|
+
>(
|
|
39
|
+
(
|
|
40
|
+
{
|
|
41
|
+
theme,
|
|
42
|
+
snapPoints: snapPointsProp,
|
|
43
|
+
topSnapPosition = "10%",
|
|
44
|
+
middleSnapPosition = "50%",
|
|
45
|
+
bottomSnapPosition = "80%",
|
|
46
|
+
initialSnapIndex,
|
|
47
|
+
initialSnapPosition = "bottom",
|
|
48
|
+
showHandle = true,
|
|
49
|
+
handleColor = theme.colors.divider,
|
|
50
|
+
topBorderRadius = 20,
|
|
51
|
+
borderWidth = 1,
|
|
52
|
+
borderColor = theme.colors.divider,
|
|
53
|
+
onSettle,
|
|
54
|
+
style,
|
|
55
|
+
children,
|
|
56
|
+
...rest
|
|
57
|
+
},
|
|
58
|
+
ref
|
|
59
|
+
) => {
|
|
60
|
+
const backgroundColor =
|
|
61
|
+
(style as ViewStyle)?.backgroundColor || theme.colors.background;
|
|
55
62
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
63
|
+
const snapPoints = snapPointsProp || [
|
|
64
|
+
topSnapPosition,
|
|
65
|
+
middleSnapPosition,
|
|
66
|
+
bottomSnapPosition,
|
|
67
|
+
];
|
|
61
68
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
const getSnapIndexFromPosition = (position: SnapPosition) => {
|
|
70
|
+
switch (position) {
|
|
71
|
+
case "top":
|
|
72
|
+
return 0;
|
|
73
|
+
case "middle":
|
|
74
|
+
return 1;
|
|
75
|
+
case "bottom":
|
|
76
|
+
return 2;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
72
79
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
initialSnapIndex
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
style={[
|
|
86
|
-
styles.handleContainer,
|
|
87
|
-
{
|
|
88
|
-
backgroundColor,
|
|
89
|
-
borderTopLeftRadius: topBorderRadius,
|
|
90
|
-
borderTopRightRadius: topBorderRadius,
|
|
91
|
-
},
|
|
92
|
-
]}
|
|
93
|
-
>
|
|
80
|
+
return (
|
|
81
|
+
<View style={styles.parentContainer} pointerEvents="box-none">
|
|
82
|
+
<BottomSheetComponent
|
|
83
|
+
ref={ref}
|
|
84
|
+
componentType="ScrollView"
|
|
85
|
+
snapPoints={snapPoints}
|
|
86
|
+
initialSnapIndex={
|
|
87
|
+
initialSnapIndex ?? getSnapIndexFromPosition(initialSnapPosition)
|
|
88
|
+
}
|
|
89
|
+
renderHandle={() => (
|
|
90
|
+
<>
|
|
91
|
+
{showHandle && (
|
|
94
92
|
<View
|
|
95
|
-
style={[
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
93
|
+
style={[
|
|
94
|
+
styles.handleContainer,
|
|
95
|
+
{
|
|
96
|
+
backgroundColor,
|
|
97
|
+
borderTopLeftRadius: topBorderRadius,
|
|
98
|
+
borderTopRightRadius: topBorderRadius,
|
|
99
|
+
},
|
|
100
|
+
]}
|
|
101
|
+
>
|
|
102
|
+
<View
|
|
103
|
+
style={[styles.handle, { backgroundColor: handleColor }]}
|
|
104
|
+
/>
|
|
105
|
+
</View>
|
|
106
|
+
)}
|
|
107
|
+
</>
|
|
108
|
+
)}
|
|
109
|
+
contentContainerStyle={[styles.contentContainerStyle, style]}
|
|
110
|
+
containerStyle={StyleSheet.flatten([
|
|
111
|
+
styles.containerStyle,
|
|
112
|
+
{
|
|
113
|
+
backgroundColor,
|
|
114
|
+
borderTopLeftRadius: topBorderRadius,
|
|
115
|
+
borderTopRightRadius: topBorderRadius,
|
|
116
|
+
borderWidth,
|
|
117
|
+
borderColor,
|
|
118
|
+
},
|
|
119
|
+
])}
|
|
120
|
+
onSettle={onSettle}
|
|
121
|
+
{...rest}
|
|
122
|
+
>
|
|
123
|
+
{children}
|
|
124
|
+
</BottomSheetComponent>
|
|
125
|
+
</View>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
);
|
|
120
129
|
|
|
121
130
|
const styles = StyleSheet.create({
|
|
122
131
|
//Render on top of everything
|