react-native-boxes 1.4.87 → 1.4.90

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 (3) hide show
  1. package/package.json +2 -2
  2. package/src/Message.tsx +9 -7
  3. package/src/Modal.tsx +83 -146
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "react-native-boxes",
3
- "version": "1.4.87",
3
+ "version": "1.4.90",
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/Message.tsx CHANGED
@@ -36,17 +36,19 @@ export function AlertMessage(props:
36
36
  'warning': '#FFC107',
37
37
  'critical': '#F44336'
38
38
  }[type];
39
-
39
+ let colorType = theme.colors[type] || color
40
+ let textColor = theme.name != 'dark' && type == 'warning' ? theme.colors.text : colorType;
40
41
  if (!props.text || props.text.length < 1) {
41
42
  return undefined
42
43
  }
43
44
 
44
45
  return (
45
46
  <HBox style={[{
46
- flex: 1,
47
47
  minHeight: isDesktop() ? undefined : '10%',
48
48
  margin: theme.dimens.space.sm,
49
- backgroundColor: theme.colors[type] || color,
49
+ borderColor: colorType,
50
+ borderWidth: theme.dimens.space.xs,
51
+ backgroundColor: colorType + "1A",
50
52
  alignItems: 'center',
51
53
  justifyContent: 'space-between',
52
54
  flexDirection: 'row',
@@ -56,7 +58,7 @@ export function AlertMessage(props:
56
58
  theme.dimens.space.lg : theme.dimens.space.md,
57
59
  paddingTop: props.text.length > 40 && Platform.OS == 'web' ?
58
60
  theme.dimens.space.lg : theme.dimens.space.md,
59
- borderRadius: theme.dimens.space.sm,
61
+ borderRadius: theme.dimens.space.md,
60
62
  }, props.style]}>
61
63
 
62
64
  <HBox style={{
@@ -69,11 +71,11 @@ export function AlertMessage(props:
69
71
  }}
70
72
  name={icon}
71
73
  size={theme.dimens.icon.md}
72
- color={props.color || theme.colors.invert.text} />
74
+ color={props.color || textColor} />
73
75
  <TextView style={{
74
76
  flexShrink: 1,
75
77
  padding: 0,
76
- color: props.color || theme.colors.invert.text,
78
+ color: props.color || textColor,
77
79
  }}>{props.text}
78
80
  </TextView>
79
81
  </HBox>
@@ -89,7 +91,7 @@ export function AlertMessage(props:
89
91
  }}>
90
92
  <FontAwesome name={'close'}
91
93
  size={theme.dimens.icon.md}
92
- color={theme.colors.invert.text} />
94
+ color={theme.colors.text} />
93
95
  </Pressable>
94
96
  }
95
97
  </HBox>
package/src/Modal.tsx CHANGED
@@ -26,163 +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
- paddingBottom: theme.insets?.bottom || 0
126
- }]}>
127
- <HBox style={{
128
- justifyContent: 'space-between',
129
- width: '100%'
130
- }}>
42
+ const handleDismiss = () => {
43
+ setModalVisible(false);
44
+ props.onDismiss && props.onDismiss();
45
+ };
131
46
 
132
- <View style={{ width: theme.dimens.icon.md }} />
133
- {
134
- typeof props.title == 'string' ? (
135
- <Subtitle style={{
136
- fontFamily: theme.fonts.Bold
137
- }}>{props.title.toString()}</Subtitle>
138
- ) : (props.title as any)
139
- }
140
- {
141
- cancellable ? (<TouchableOpacity
142
- style={{
143
- padding: theme.dimens.space.sm
144
- }}
145
- onPress={() => {
146
- cancel()
147
- }}>
148
- <CloseIcon />
149
- </TouchableOpacity>) : (
150
- <View style={{ width: theme.dimens.icon.md }} />
151
- )
152
- }
153
- </HBox>
154
- <VBox style={{
155
- width: '100%'
156
- }}>
157
- {
158
- props.swipeToCloseDisabled && isWeb() ? (
159
- <ScrollView
160
- nestedScrollEnabled={true}
161
- showsVerticalScrollIndicator={false}
162
- style={{
163
- flex: 1,
164
- maxHeight: 500,
165
- }}>
166
- {props.children}
167
- </ScrollView>
168
- ) : (
169
- <VBox style={{
170
- width: '100%'
171
- }}>
172
- {props.children}
173
- </VBox>
174
- )
175
- }
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
+ );
176
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
+ );
177
81
 
178
- </VBox>
179
- </View>
180
- </Wrapper>
181
- </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>
182
100
  </View>
183
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
+ );
184
120
  };
185
121
 
122
+
186
123
  const styles = StyleSheet.create({
187
124
  container: {
188
125
  flex: 1,