related-ui-components 2.4.8 → 2.4.9

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.
Files changed (46) hide show
  1. package/lib/module/app.js +86 -121
  2. package/lib/module/app.js.map +1 -1
  3. package/lib/module/components/Input/PhoneInput.js +178 -0
  4. package/lib/module/components/Input/PhoneInput.js.map +1 -0
  5. package/lib/module/components/Input/index.js +2 -0
  6. package/lib/module/components/Input/index.js.map +1 -1
  7. package/lib/module/contexts/BottomSheetStackContext.js +12 -0
  8. package/lib/module/contexts/BottomSheetStackContext.js.map +1 -0
  9. package/lib/module/contexts/BottomSheetStackProvider.js +111 -0
  10. package/lib/module/contexts/BottomSheetStackProvider.js.map +1 -0
  11. package/lib/module/contexts/index.js +2 -2
  12. package/lib/module/contexts/index.js.map +1 -1
  13. package/lib/module/utils/flags.js +6 -0
  14. package/lib/module/utils/flags.js.map +1 -0
  15. package/lib/typescript/src/app.d.ts +3 -1
  16. package/lib/typescript/src/app.d.ts.map +1 -1
  17. package/lib/typescript/src/components/Input/PhoneInput.d.ts +22 -0
  18. package/lib/typescript/src/components/Input/PhoneInput.d.ts.map +1 -0
  19. package/lib/typescript/src/components/Input/index.d.ts +2 -0
  20. package/lib/typescript/src/components/Input/index.d.ts.map +1 -1
  21. package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts +16 -0
  22. package/lib/typescript/src/contexts/BottomSheetStackContext.d.ts.map +1 -0
  23. package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts +5 -0
  24. package/lib/typescript/src/contexts/BottomSheetStackProvider.d.ts.map +1 -0
  25. package/lib/typescript/src/contexts/index.d.ts +2 -2
  26. package/lib/typescript/src/contexts/index.d.ts.map +1 -1
  27. package/lib/typescript/src/utils/flags.d.ts +2 -0
  28. package/lib/typescript/src/utils/flags.d.ts.map +1 -0
  29. package/package.json +4 -1
  30. package/src/app.tsx +134 -116
  31. package/src/components/Input/PhoneInput.tsx +214 -0
  32. package/src/components/Input/index.ts +4 -1
  33. package/src/contexts/BottomSheetStackContext.tsx +30 -0
  34. package/src/contexts/BottomSheetStackProvider.tsx +138 -0
  35. package/src/contexts/index.ts +2 -2
  36. package/src/utils/flags.ts +7 -0
  37. package/lib/module/contexts/BottomSheetContext.js +0 -13
  38. package/lib/module/contexts/BottomSheetContext.js.map +0 -1
  39. package/lib/module/contexts/BottomSheetProvider.js +0 -104
  40. package/lib/module/contexts/BottomSheetProvider.js.map +0 -1
  41. package/lib/typescript/src/contexts/BottomSheetContext.d.ts +0 -10
  42. package/lib/typescript/src/contexts/BottomSheetContext.d.ts.map +0 -1
  43. package/lib/typescript/src/contexts/BottomSheetProvider.d.ts +0 -7
  44. package/lib/typescript/src/contexts/BottomSheetProvider.d.ts.map +0 -1
  45. package/src/contexts/BottomSheetContext.tsx +0 -28
  46. package/src/contexts/BottomSheetProvider.tsx +0 -136
@@ -0,0 +1,138 @@
1
+ import BottomSheet, {
2
+ BottomSheetBackdrop,
3
+ BottomSheetBackdropProps,
4
+ } from "@gorhom/bottom-sheet";
5
+ import React, {
6
+ ReactNode,
7
+ useCallback,
8
+ useEffect,
9
+ useMemo,
10
+ useRef,
11
+ useState,
12
+ } from "react";
13
+ import { BackHandler, StyleSheet } from "react-native";
14
+ import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
15
+ import { useSafeAreaInsets } from "react-native-safe-area-context";
16
+ import {
17
+ BottomSheetStackContext,
18
+ BottomSheetStackItem,
19
+ } from "./BottomSheetStackContext";
20
+
21
+ export const BottomSheetStackProvider: React.FC<{ children: ReactNode }> = ({
22
+ children,
23
+ }) => {
24
+ const [stack, setStack] = useState<BottomSheetStackItem[]>([]);
25
+ const sheetRef = useRef<BottomSheet>(null);
26
+ const { top } = useSafeAreaInsets();
27
+
28
+ const push = useCallback((item: BottomSheetStackItem) => {
29
+ setStack((prev) => [...prev, item]);
30
+ }, []);
31
+
32
+ const clear = useCallback(() => {
33
+ sheetRef.current?.close();
34
+ setStack([]);
35
+ }, []);
36
+
37
+ const pop = useCallback(() => {
38
+ if (stack.length <= 1) {
39
+ clear();
40
+ return;
41
+ }
42
+ setStack((prev) => prev.slice(0, -1));
43
+ }, [stack.length, clear]);
44
+
45
+ const replace = useCallback((item: BottomSheetStackItem) => {
46
+ setStack((prev) => [...prev.slice(0, -1), item]);
47
+ }, []);
48
+
49
+ const currentItem = useMemo(() => stack[stack.length - 1], [stack]);
50
+ const canGoBack = stack.length > 1;
51
+ const isOpen = stack.length > 0;
52
+
53
+ useEffect(() => {
54
+ if (isOpen && currentItem) {
55
+ sheetRef.current?.snapToIndex(0);
56
+ }
57
+
58
+ const backHandlerSubscription = BackHandler.addEventListener(
59
+ "hardwareBackPress",
60
+ () => {
61
+ if (canGoBack) {
62
+ pop();
63
+ return true;
64
+ }
65
+ if (!canGoBack && stack.length === 1) {
66
+ sheetRef.current?.close();
67
+ return true;
68
+ }
69
+ return false;
70
+ }
71
+ );
72
+
73
+ return () => backHandlerSubscription.remove();
74
+ }, [isOpen, canGoBack, currentItem, pop, stack]);
75
+
76
+ const AnimatedView = Animated.View;
77
+ const enteringAnimation = FadeIn.duration(200);
78
+ const exitingAnimation = FadeOut.duration(200);
79
+
80
+ const renderBackdrop = useCallback(
81
+ (props: BottomSheetBackdropProps) => (
82
+ <BottomSheetBackdrop
83
+ {...props}
84
+ disappearsOnIndex={-1}
85
+ style={[props.style, { backgroundColor: "rgba(0,0,0,0,1)" }]}
86
+ appearsOnIndex={0}
87
+ pressBehavior={"close"}
88
+ />
89
+ ),
90
+ []
91
+ );
92
+
93
+ return (
94
+ <BottomSheetStackContext.Provider
95
+ value={{ push, pop, replace, clear, canGoBack }}
96
+ >
97
+ {children}
98
+ <BottomSheet
99
+ ref={sheetRef}
100
+ index={0}
101
+ snapPoints={currentItem?.snapPoints || ["100%"]}
102
+ enableDynamicSizing={currentItem?.snapPoints === undefined}
103
+ enablePanDownToClose
104
+ android_keyboardInputMode="adjustResize"
105
+ enableBlurKeyboardOnGesture
106
+ keyboardBlurBehavior="restore"
107
+ keyboardBehavior="fillParent"
108
+ onClose={clear}
109
+ backdropComponent={renderBackdrop}
110
+ topInset={top}
111
+ handleIndicatorStyle={{ backgroundColor: "#CCCCCC" }}
112
+ style={styles.sheetContainer}
113
+ >
114
+ {currentItem && (
115
+ <AnimatedView
116
+ key={stack.length}
117
+ entering={enteringAnimation}
118
+ exiting={exitingAnimation}
119
+ style={styles.animatedView}
120
+ >
121
+ {currentItem.component}
122
+ </AnimatedView>
123
+ )}
124
+ </BottomSheet>
125
+ </BottomSheetStackContext.Provider>
126
+ );
127
+ };
128
+
129
+ const styles = StyleSheet.create({
130
+ sheetContainer: {
131
+ // backgroundColor: "#FFFFFF",
132
+ // borderTopLeftRadius: 20,
133
+ // borderTopRightRadius: 20,
134
+ },
135
+ animatedView: {
136
+ flex: 1,
137
+ },
138
+ });
@@ -1,2 +1,2 @@
1
- export * from "./BottomSheetContext"
2
- export * from "./BottomSheetProvider"
1
+ export * from "./BottomSheetStackContext"
2
+ export * from "./BottomSheetStackProvider"
@@ -0,0 +1,7 @@
1
+ export function iso2ToFlagEmoji(countryCode: string): string {
2
+ return countryCode
3
+ .toUpperCase()
4
+ .split('')
5
+ .map(ch => String.fromCodePoint(ch.charCodeAt(0) + 127397))
6
+ .join('');
7
+ }
@@ -1,13 +0,0 @@
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
@@ -1 +0,0 @@
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":[]}
@@ -1,104 +0,0 @@
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
@@ -1 +0,0 @@
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":[]}
@@ -1,10 +0,0 @@
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
@@ -1 +0,0 @@
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"}
@@ -1,7 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- interface BottomSheetProviderProps {
3
- children: ReactNode;
4
- }
5
- export declare const BottomSheetProvider: React.FC<BottomSheetProviderProps>;
6
- export {};
7
- //# sourceMappingURL=BottomSheetProvider.d.ts.map
@@ -1 +0,0 @@
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"}
@@ -1,28 +0,0 @@
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;
@@ -1,136 +0,0 @@
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
- });