related-ui-components 2.1.0 → 2.1.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/lib/module/contexts/BottomSheetContext.js +13 -0
- package/lib/module/contexts/BottomSheetContext.js.map +1 -0
- package/lib/module/contexts/BottomSheetProvider.js +104 -0
- package/lib/module/contexts/BottomSheetProvider.js.map +1 -0
- package/lib/module/contexts/index.js +5 -0
- package/lib/module/contexts/index.js.map +1 -0
- package/lib/module/index.js +8 -4
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/contexts/BottomSheetContext.d.ts +10 -0
- package/lib/typescript/src/contexts/BottomSheetContext.d.ts.map +1 -0
- package/lib/typescript/src/contexts/BottomSheetProvider.d.ts +7 -0
- package/lib/typescript/src/contexts/BottomSheetProvider.d.ts.map +1 -0
- package/lib/typescript/src/contexts/index.d.ts +3 -0
- package/lib/typescript/src/contexts/index.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/contexts/BottomSheetContext.tsx +28 -0
- package/src/contexts/BottomSheetProvider.tsx +136 -0
- package/src/contexts/index.ts +2 -0
- package/src/index.ts +6 -5
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { createContext, useContext } from "react";
|
|
4
|
+
const BottomSheetContext = /*#__PURE__*/createContext(undefined);
|
|
5
|
+
export const useBottomSheet = () => {
|
|
6
|
+
const context = useContext(BottomSheetContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("useBottomSheet must be used within a BottomSheetProvider");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
export default BottomSheetContext;
|
|
13
|
+
//# sourceMappingURL=BottomSheetContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useContext","BottomSheetContext","undefined","useBottomSheet","context","Error"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetContext.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAmB,OAAO;AAa5D,MAAMC,kBAAkB,gBAAGF,aAAa,CACtCG,SACF,CAAC;AAED,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,MAAMC,OAAO,GAAGJ,UAAU,CAACC,kBAAkB,CAAC;EAC9C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,0DACF,CAAC;EACH;EACA,OAAOD,OAAO;AAChB,CAAC;AAED,eAAeH,kBAAkB","ignoreList":[]}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { useState, useRef, useCallback, useMemo, useEffect } from "react";
|
|
4
|
+
import BottomSheet, { BottomSheetBackdrop } from "@gorhom/bottom-sheet";
|
|
5
|
+
import BottomSheetContext from "./BottomSheetContext.js";
|
|
6
|
+
import { Keyboard, StyleSheet } from "react-native";
|
|
7
|
+
import { useTheme } from "../theme/index.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
export const BottomSheetProvider = ({
|
|
10
|
+
children
|
|
11
|
+
}) => {
|
|
12
|
+
const {
|
|
13
|
+
theme
|
|
14
|
+
} = useTheme(); // Get theme for styling the provider's sheet if needed
|
|
15
|
+
const styles = useMemo(() => providerStyles(theme), [theme]);
|
|
16
|
+
const sheetRef = useRef(null);
|
|
17
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
18
|
+
const [content, setContent] = useState(null);
|
|
19
|
+
const [size, setSize] = useState("small");
|
|
20
|
+
const [sp, setSnapPoints] = useState(["30%", "50%", "85%"]);
|
|
21
|
+
const [onCloseCallback, setOnCloseCallback] = useState(null);
|
|
22
|
+
const openBottomSheet = useCallback((newContent, size, onClose, snapPoints) => {
|
|
23
|
+
setContent(newContent);
|
|
24
|
+
setSize(size);
|
|
25
|
+
setOnCloseCallback(() => onClose);
|
|
26
|
+
setIsOpen(true);
|
|
27
|
+
if (snapPoints) {
|
|
28
|
+
setSnapPoints(snapPoints);
|
|
29
|
+
}
|
|
30
|
+
}, []);
|
|
31
|
+
const closeBottomSheet = useCallback(() => {
|
|
32
|
+
sheetRef.current?.close();
|
|
33
|
+
setIsOpen(false);
|
|
34
|
+
}, []);
|
|
35
|
+
const renderBackdrop = useCallback(props => /*#__PURE__*/_jsx(BottomSheetBackdrop, {
|
|
36
|
+
...props,
|
|
37
|
+
disappearsOnIndex: -1,
|
|
38
|
+
appearsOnIndex: 0,
|
|
39
|
+
opacity: 0.5,
|
|
40
|
+
pressBehavior: "close",
|
|
41
|
+
style: [props.style, {
|
|
42
|
+
backgroundColor: "rgba(0,0,0,0.5)"
|
|
43
|
+
}]
|
|
44
|
+
}), []);
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (isOpen && content) {
|
|
47
|
+
sheetRef.current?.snapToIndex(size === "small" ? 0 : 1);
|
|
48
|
+
} else {
|
|
49
|
+
sheetRef.current?.close();
|
|
50
|
+
}
|
|
51
|
+
}, [isOpen, content, size]);
|
|
52
|
+
return /*#__PURE__*/_jsxs(BottomSheetContext.Provider, {
|
|
53
|
+
value: {
|
|
54
|
+
openBottomSheet,
|
|
55
|
+
closeBottomSheet,
|
|
56
|
+
isOpen
|
|
57
|
+
},
|
|
58
|
+
children: [children, /*#__PURE__*/_jsx(BottomSheet, {
|
|
59
|
+
ref: sheetRef,
|
|
60
|
+
index: -1,
|
|
61
|
+
snapPoints: sp,
|
|
62
|
+
enablePanDownToClose: true,
|
|
63
|
+
backdropComponent: renderBackdrop,
|
|
64
|
+
android_keyboardInputMode: "adjustResize",
|
|
65
|
+
keyboardBlurBehavior: "restore",
|
|
66
|
+
keyboardBehavior: "extend",
|
|
67
|
+
enableDynamicSizing: false,
|
|
68
|
+
style: styles.bottomSheetContainer,
|
|
69
|
+
onClose: () => {
|
|
70
|
+
setIsOpen(false);
|
|
71
|
+
Keyboard.dismiss();
|
|
72
|
+
},
|
|
73
|
+
handleIndicatorStyle: {
|
|
74
|
+
backgroundColor: theme.onSurface
|
|
75
|
+
},
|
|
76
|
+
children: content
|
|
77
|
+
})]
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
const providerStyles = theme => StyleSheet.create({
|
|
81
|
+
bottomSheetContainer: {
|
|
82
|
+
backgroundColor: theme.surface,
|
|
83
|
+
// Ensure sheet background matches theme
|
|
84
|
+
borderTopLeftRadius: 20,
|
|
85
|
+
borderTopRightRadius: 20,
|
|
86
|
+
overflow: "hidden" // Important for rounded corners with content
|
|
87
|
+
},
|
|
88
|
+
headerContainer: {
|
|
89
|
+
padding: 16,
|
|
90
|
+
borderBottomWidth: 1,
|
|
91
|
+
borderBottomColor: theme.divider,
|
|
92
|
+
// Use theme color for divider
|
|
93
|
+
alignItems: "center"
|
|
94
|
+
},
|
|
95
|
+
headerTitle: {
|
|
96
|
+
fontSize: 18,
|
|
97
|
+
fontWeight: "bold",
|
|
98
|
+
color: theme.onSurface
|
|
99
|
+
},
|
|
100
|
+
contentContainer: {
|
|
101
|
+
flex: 1 // Ensure content can take up available space
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
//# sourceMappingURL=BottomSheetProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","useRef","useCallback","useMemo","useEffect","BottomSheet","BottomSheetBackdrop","BottomSheetContext","Keyboard","StyleSheet","useTheme","jsx","_jsx","jsxs","_jsxs","BottomSheetProvider","children","theme","styles","providerStyles","sheetRef","isOpen","setIsOpen","content","setContent","size","setSize","sp","setSnapPoints","onCloseCallback","setOnCloseCallback","openBottomSheet","newContent","onClose","snapPoints","closeBottomSheet","current","close","renderBackdrop","props","disappearsOnIndex","appearsOnIndex","opacity","pressBehavior","style","backgroundColor","snapToIndex","Provider","value","ref","index","enablePanDownToClose","backdropComponent","android_keyboardInputMode","keyboardBlurBehavior","keyboardBehavior","enableDynamicSizing","bottomSheetContainer","dismiss","handleIndicatorStyle","onSurface","create","surface","borderTopLeftRadius","borderTopRightRadius","overflow","headerContainer","padding","borderBottomWidth","borderBottomColor","divider","alignItems","headerTitle","fontSize","fontWeight","color","contentContainer","flex"],"sourceRoot":"..\\..\\..\\src","sources":["contexts/BottomSheetProvider.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["contexts/index.ts"],"mappings":";;AAAA,cAAc,yBAAsB;AACpC,cAAc,0BAAuB","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { registerRootComponent } from 'expo';
|
|
4
|
-
import "react-native-reanimated";
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
// import { registerRootComponent } from 'expo';
|
|
4
|
+
// import "react-native-reanimated";
|
|
5
|
+
|
|
6
|
+
// import App from "./app";
|
|
7
|
+
|
|
8
|
+
// registerRootComponent(App);
|
|
9
|
+
|
|
7
10
|
export * from "./theme/index.js";
|
|
8
11
|
export * from "./components/index.js";
|
|
12
|
+
export * from "./contexts/index.js";
|
|
9
13
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\src","sources":["index.ts"],"mappings":";;AAAA;AACA;;AAGA;;AAEA;;AAEA,cAAc,kBAAS;AACvB,cAAc,uBAAc;AAC5B,cAAc,qBAAY","ignoreList":[]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
|
+
interface BottomSheetContextProps {
|
|
3
|
+
openBottomSheet: (content: ReactNode | (() => ReactNode), size: "small" | "large", onClose?: () => void, snapPoints?: string[]) => void;
|
|
4
|
+
closeBottomSheet: () => void;
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
}
|
|
7
|
+
declare const BottomSheetContext: import("react").Context<BottomSheetContextProps | undefined>;
|
|
8
|
+
export declare const useBottomSheet: () => BottomSheetContextProps;
|
|
9
|
+
export default BottomSheetContext;
|
|
10
|
+
//# sourceMappingURL=BottomSheetContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomSheetContext.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,eAAe,EAAE,CACf,OAAO,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,EACtC,IAAI,EAAE,OAAO,GAAG,OAAO,EACvB,OAAO,CAAC,EAAE,MAAM,IAAI,EACpB,UAAU,CAAC,EAAE,MAAM,EAAE,KAClB,IAAI,CAAC;IACV,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,kBAAkB,8DAEvB,CAAC;AAEF,eAAO,MAAM,cAAc,+BAQ1B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BottomSheetProvider.d.ts","sourceRoot":"","sources":["../../../../src/contexts/BottomSheetProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,SAAS,EAGV,MAAM,OAAO,CAAC;AASf,UAAU,wBAAwB;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2FlE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { createContext, useContext, ReactNode } from "react";
|
|
2
|
+
|
|
3
|
+
interface BottomSheetContextProps {
|
|
4
|
+
openBottomSheet: (
|
|
5
|
+
content: ReactNode | (() => ReactNode),
|
|
6
|
+
size: "small" | "large",
|
|
7
|
+
onClose?: () => void,
|
|
8
|
+
snapPoints?: string[]
|
|
9
|
+
) => void;
|
|
10
|
+
closeBottomSheet: () => void;
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const BottomSheetContext = createContext<BottomSheetContextProps | undefined>(
|
|
15
|
+
undefined
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
export const useBottomSheet = () => {
|
|
19
|
+
const context = useContext(BottomSheetContext);
|
|
20
|
+
if (!context) {
|
|
21
|
+
throw new Error(
|
|
22
|
+
"useBottomSheet must be used within a BottomSheetProvider"
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
return context;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
export default BottomSheetContext;
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import React, {
|
|
2
|
+
useState,
|
|
3
|
+
useRef,
|
|
4
|
+
useCallback,
|
|
5
|
+
ReactNode,
|
|
6
|
+
useMemo,
|
|
7
|
+
useEffect,
|
|
8
|
+
} from "react";
|
|
9
|
+
import BottomSheet, {
|
|
10
|
+
BottomSheetBackdrop,
|
|
11
|
+
BottomSheetBackdropProps,
|
|
12
|
+
} from "@gorhom/bottom-sheet";
|
|
13
|
+
import BottomSheetContext from "./BottomSheetContext";
|
|
14
|
+
import { Keyboard, StyleSheet } from "react-native";
|
|
15
|
+
import { ThemeType, useTheme } from "../theme";
|
|
16
|
+
|
|
17
|
+
interface BottomSheetProviderProps {
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const BottomSheetProvider: React.FC<BottomSheetProviderProps> = ({
|
|
22
|
+
children,
|
|
23
|
+
}) => {
|
|
24
|
+
const { theme } = useTheme(); // Get theme for styling the provider's sheet if needed
|
|
25
|
+
const styles = useMemo(() => providerStyles(theme), [theme]);
|
|
26
|
+
const sheetRef = useRef<BottomSheet>(null);
|
|
27
|
+
|
|
28
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
29
|
+
const [content, setContent] = useState<ReactNode>(null);
|
|
30
|
+
const [size, setSize] = useState<"small" | "large">("small");
|
|
31
|
+
const [sp, setSnapPoints] = useState<string[] | undefined>([
|
|
32
|
+
"30%",
|
|
33
|
+
"50%",
|
|
34
|
+
"85%",
|
|
35
|
+
]);
|
|
36
|
+
|
|
37
|
+
const [onCloseCallback, setOnCloseCallback] = useState<(() => void) | null>(
|
|
38
|
+
null
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
const openBottomSheet = useCallback(
|
|
42
|
+
(
|
|
43
|
+
newContent: ReactNode | (() => ReactNode),
|
|
44
|
+
size: "small" | "large",
|
|
45
|
+
onClose?: () => void,
|
|
46
|
+
snapPoints?: string[]
|
|
47
|
+
) => {
|
|
48
|
+
setContent(newContent);
|
|
49
|
+
setSize(size);
|
|
50
|
+
setOnCloseCallback(() => onClose);
|
|
51
|
+
setIsOpen(true);
|
|
52
|
+
if (snapPoints) {
|
|
53
|
+
setSnapPoints(snapPoints);
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
[]
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
const closeBottomSheet = useCallback(() => {
|
|
60
|
+
sheetRef.current?.close();
|
|
61
|
+
setIsOpen(false);
|
|
62
|
+
}, []);
|
|
63
|
+
|
|
64
|
+
const renderBackdrop = useCallback(
|
|
65
|
+
(props: BottomSheetBackdropProps) => (
|
|
66
|
+
<BottomSheetBackdrop
|
|
67
|
+
{...props}
|
|
68
|
+
disappearsOnIndex={-1}
|
|
69
|
+
appearsOnIndex={0}
|
|
70
|
+
opacity={0.5}
|
|
71
|
+
pressBehavior="close"
|
|
72
|
+
style={[props.style, { backgroundColor: "rgba(0,0,0,0.5)" }]}
|
|
73
|
+
/>
|
|
74
|
+
),
|
|
75
|
+
[]
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
useEffect(() => {
|
|
79
|
+
if (isOpen && content) {
|
|
80
|
+
sheetRef.current?.snapToIndex(size === "small" ? 0 : 1);
|
|
81
|
+
} else {
|
|
82
|
+
sheetRef.current?.close();
|
|
83
|
+
}
|
|
84
|
+
}, [isOpen, content, size]);
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<BottomSheetContext.Provider
|
|
88
|
+
value={{ openBottomSheet, closeBottomSheet, isOpen }}
|
|
89
|
+
>
|
|
90
|
+
{children}
|
|
91
|
+
<BottomSheet
|
|
92
|
+
ref={sheetRef}
|
|
93
|
+
index={-1}
|
|
94
|
+
snapPoints={sp}
|
|
95
|
+
enablePanDownToClose
|
|
96
|
+
backdropComponent={renderBackdrop}
|
|
97
|
+
android_keyboardInputMode="adjustResize"
|
|
98
|
+
keyboardBlurBehavior="restore"
|
|
99
|
+
keyboardBehavior="extend"
|
|
100
|
+
enableDynamicSizing={false}
|
|
101
|
+
style={styles.bottomSheetContainer}
|
|
102
|
+
onClose={() => {
|
|
103
|
+
setIsOpen(false);
|
|
104
|
+
Keyboard.dismiss();
|
|
105
|
+
}}
|
|
106
|
+
handleIndicatorStyle={{ backgroundColor: theme.onSurface }}
|
|
107
|
+
>
|
|
108
|
+
{content}
|
|
109
|
+
</BottomSheet>
|
|
110
|
+
</BottomSheetContext.Provider>
|
|
111
|
+
);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
const providerStyles = (theme: ThemeType) =>
|
|
115
|
+
StyleSheet.create({
|
|
116
|
+
bottomSheetContainer: {
|
|
117
|
+
backgroundColor: theme.surface, // Ensure sheet background matches theme
|
|
118
|
+
borderTopLeftRadius: 20,
|
|
119
|
+
borderTopRightRadius: 20,
|
|
120
|
+
overflow: "hidden", // Important for rounded corners with content
|
|
121
|
+
},
|
|
122
|
+
headerContainer: {
|
|
123
|
+
padding: 16,
|
|
124
|
+
borderBottomWidth: 1,
|
|
125
|
+
borderBottomColor: theme.divider, // Use theme color for divider
|
|
126
|
+
alignItems: "center",
|
|
127
|
+
},
|
|
128
|
+
headerTitle: {
|
|
129
|
+
fontSize: 18,
|
|
130
|
+
fontWeight: "bold",
|
|
131
|
+
color: theme.onSurface,
|
|
132
|
+
},
|
|
133
|
+
contentContainer: {
|
|
134
|
+
flex: 1, // Ensure content can take up available space
|
|
135
|
+
},
|
|
136
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { registerRootComponent } from 'expo';
|
|
2
|
-
import "react-native-reanimated";
|
|
1
|
+
// import { registerRootComponent } from 'expo';
|
|
2
|
+
// import "react-native-reanimated";
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
import App from "./app";
|
|
5
|
+
// import App from "./app";
|
|
6
6
|
|
|
7
|
-
registerRootComponent(App);
|
|
7
|
+
// registerRootComponent(App);
|
|
8
8
|
|
|
9
9
|
export * from "./theme"
|
|
10
|
-
export * from "./components";
|
|
10
|
+
export * from "./components";
|
|
11
|
+
export * from "./contexts";
|