react-native-boxes 1.4.86 → 1.4.89

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/Modal.tsx +83 -145
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "react-native-boxes",
3
- "version": "1.4.86",
3
+ "version": "1.4.89",
4
4
  "description": "A react native library for rapid development of UI using boxes",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
7
- "release": "npm run build && git add src && git add package.json && git commit -m Update-files | npm version patch && npm publish && git add package.json && git commit -m Update-version | git push",
7
+ "release": "npm run build && git add src && git add package.json && git commit -m Update-files | npm version patch && npm login && npm publish && git add package.json && git commit -m Update-version | git push",
8
8
  "build": "tsc --build --verbose",
9
9
  "test": "echo Skipping..."
10
10
  },
package/src/Modal.tsx CHANGED
@@ -26,162 +26,100 @@ export type BottomSheetProps = {
26
26
  containerStyle?: StyleProp<ViewStyle>
27
27
 
28
28
  }
29
- /**
30
- * set swipeToCloseDisabled = true if you face issues with scrolling
31
- * @param props
32
- * @returns
33
- */
29
+
30
+
34
31
  export const BottomSheet = (props: BottomSheetProps) => {
35
- const [modalVisible, setModalVisible] = useState(false);
36
- const theme = useContext(ThemeContext)
37
- let cancellable = props.cancellable != undefined ?
38
- props.cancellable : true
39
- let swipeToCloseDisabled = props.swipeToCloseDisabled != undefined ?
40
- props.swipeToCloseDisabled : true
32
+ const theme = useContext(ThemeContext);
33
+ const [modalVisible, setModalVisible] = useState(props.visible);
34
+ const cancellable = props.cancellable !== undefined ? props.cancellable : true;
41
35
  useEffect(() => {
42
- setModalVisible(props.visible)
43
- if (props.visible)
44
- theme.onTrack(TrackingActionType.VIEW, TrackingViewType.DIALOG, (TrackerUtils.textOf(props.title)))
45
- }, [props.visible])
46
-
47
- function cancel() {
48
- setModalVisible(false)
49
- if (props.onDismiss) {
50
- props.onDismiss()
36
+ setModalVisible(props.visible);
37
+ if (props.visible) {
38
+ theme.onTrack(TrackingActionType.VIEW, TrackingViewType.DIALOG, TrackerUtils.textOf(props.title));
51
39
  }
52
- }
53
-
54
- const CloseIcon = getIcon(props.closeIcon) || (() => {
55
- return (<Icon color={theme.colors.caption} name="close" />)
56
- })
57
- const fling = Gesture.Fling()
58
- .direction(Directions.DOWN)
59
- .onEnd(() => {
60
- props.onDismiss && props.onDismiss()
61
- })
62
-
63
- const Wrapper = swipeToCloseDisabled ? ({ children }: any) => {
64
- return (
65
- <View style={[styles.modalContainer, {
66
- backgroundColor: props.backgroundColor || theme.colors.forground
67
- }]}>
68
- {children}
69
- </View>
70
- )
71
- } : ({ children }: any) => {
72
- return (
73
- <View style={[styles.modalContainer, {
74
- backgroundColor: props.backgroundColor || theme.colors.forground
75
- }]}>
76
- <GestureDetector gesture={fling}>
77
- {children}
78
- </GestureDetector>
79
- </View>
80
- )
81
- }
82
- return (
83
- <View style={[styles.container, props.containerStyle]}>
84
- <Modal
85
- onDismiss={() => {
86
-
87
- }}
88
- animationType="fade"
89
- transparent={true}
90
- visible={modalVisible}
91
- onRequestClose={() => {
92
- cancel()
93
- }}
94
- >
95
- <TouchableHighlight
96
- onPress={() => {
97
- cancel()
98
- }}
99
- style={{
100
- flex: 1,
101
- backgroundColor: 'rgba(0, 0, 0, 0.5)'
102
- }}>
103
- <View />
104
- </TouchableHighlight>
105
-
106
- </Modal>
40
+ }, [props.visible]);
107
41
 
108
- <Modal
109
- onDismiss={() => {
110
- cancel()
111
- }}
112
- style={{
113
- flex: 1
114
- }}
115
- animationType="slide"
116
- transparent={true}
117
- visible={modalVisible}
118
- onRequestClose={() => cancel()}
119
- >
120
- <Wrapper>
121
- <View style={[{
122
- paddingTop: theme.dimens.space.md,
123
- paddingStart: theme.dimens.space.lg,
124
- paddingEnd: theme.dimens.space.lg,
125
- }]}>
126
- <HBox style={{
127
- justifyContent: 'space-between',
128
- width: '100%'
129
- }}>
42
+ const handleDismiss = () => {
43
+ setModalVisible(false);
44
+ props.onDismiss && props.onDismiss();
45
+ };
130
46
 
131
- <View style={{ width: theme.dimens.icon.md }} />
132
- {
133
- typeof props.title == 'string' ? (
134
- <Subtitle style={{
135
- fontFamily: theme.fonts.Bold
136
- }}>{props.title.toString()}</Subtitle>
137
- ) : (props.title as any)
138
- }
139
- {
140
- cancellable ? (<TouchableOpacity
141
- style={{
142
- padding: theme.dimens.space.sm
143
- }}
144
- onPress={() => {
145
- cancel()
146
- }}>
147
- <CloseIcon />
148
- </TouchableOpacity>) : (
149
- <View style={{ width: theme.dimens.icon.md }} />
150
- )
151
- }
152
- </HBox>
153
- <VBox style={{
154
- width: '100%'
155
- }}>
156
- {
157
- props.swipeToCloseDisabled && isWeb() ? (
158
- <ScrollView
159
- nestedScrollEnabled={true}
160
- showsVerticalScrollIndicator={false}
161
- style={{
162
- flex: 1,
163
- maxHeight: 500,
164
- }}>
165
- {props.children}
166
- </ScrollView>
167
- ) : (
168
- <VBox style={{
169
- width: '100%'
170
- }}>
171
- {props.children}
172
- </VBox>
173
- )
174
- }
47
+ const CloseIcon = getIcon(props.closeIcon) || (() => <Icon color={theme.colors.caption} name="close" />);
48
+
49
+ // Sheet header
50
+ const SheetHeader = (
51
+ <HBox style={{ justifyContent: 'space-between', width: '100%' }}>
52
+ <View style={{ width: theme.dimens.icon.md }} />
53
+ {typeof props.title === 'string' ? (
54
+ <Subtitle style={{ fontFamily: theme.fonts.Bold }}>{props.title}</Subtitle>
55
+ ) : (props.title as any)}
56
+ {cancellable ? (
57
+ <TouchableOpacity style={{ padding: theme.dimens.space.sm }} onPress={handleDismiss}>
58
+ <CloseIcon />
59
+ </TouchableOpacity>
60
+ ) : (
61
+ <View style={{ width: theme.dimens.icon.md }} />
62
+ )}
63
+ </HBox>
64
+ );
175
65
 
66
+ // Sheet body
67
+ const SheetBody = (
68
+ <VBox style={{ width: '100%' }}>
69
+ {isWeb() ? (
70
+ <ScrollView
71
+ nestedScrollEnabled={true}
72
+ showsVerticalScrollIndicator={false}
73
+ style={{ flex: 1, maxHeight: 500 }}>
74
+ {props.children}
75
+ </ScrollView>
76
+ ) : (
77
+ <VBox style={{ width: '100%' }}>{props.children}</VBox>
78
+ )}
79
+ </VBox>
80
+ );
176
81
 
177
- </VBox>
178
- </View>
179
- </Wrapper>
180
- </Modal>
82
+ // The sheet itself
83
+ const Sheet = (
84
+ <View
85
+ style={[
86
+ styles.modalContainer,
87
+ { backgroundColor: props.backgroundColor || theme.colors.forground },
88
+ props.containerStyle,
89
+ ]}
90
+ >
91
+ <View style={{
92
+ paddingTop: theme.dimens.space.md,
93
+ paddingStart: theme.dimens.space.lg,
94
+ paddingEnd: theme.dimens.space.lg,
95
+ paddingBottom: theme.insets?.bottom || 0
96
+ }}>
97
+ {SheetHeader}
98
+ {SheetBody}
99
+ </View>
181
100
  </View>
182
101
  );
102
+
103
+ return (
104
+ <Modal
105
+ animationType="slide"
106
+ transparent={true}
107
+ visible={modalVisible}
108
+ onRequestClose={handleDismiss}
109
+ >
110
+ {/* Overlay */}
111
+ <Pressable
112
+ style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
113
+ onPress={cancellable ? handleDismiss : undefined}
114
+ accessible={false}
115
+ />
116
+ {/* Sheet */}
117
+ {Sheet}
118
+ </Modal>
119
+ );
183
120
  };
184
121
 
122
+
185
123
  const styles = StyleSheet.create({
186
124
  container: {
187
125
  flex: 1,