react-native-boxes 1.4.14 → 1.4.16
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/package.json +1 -1
- package/src/Message.tsx +2 -0
- package/src/Modal.tsx +54 -40
package/package.json
CHANGED
package/src/Message.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import { ThemeContext } from "./ThemeContext";
|
|
|
5
5
|
import FontAwesome from '@expo/vector-icons/FontAwesome';
|
|
6
6
|
import { Platform, Pressable, Text, ViewProps } from "react-native";
|
|
7
7
|
import { TextView } from "./Text";
|
|
8
|
+
import { isDesktop } from "./utils";
|
|
8
9
|
|
|
9
10
|
|
|
10
11
|
|
|
@@ -40,6 +41,7 @@ export function AlertMessage(props:
|
|
|
40
41
|
return (
|
|
41
42
|
<HBox style={[{
|
|
42
43
|
flex: 1,
|
|
44
|
+
minHeight: isDesktop() ? undefined : '10%',
|
|
43
45
|
margin: theme.dimens.space.sm,
|
|
44
46
|
backgroundColor: theme.colors[type] || color,
|
|
45
47
|
alignItems: 'center',
|
package/src/Modal.tsx
CHANGED
|
@@ -54,6 +54,26 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
54
54
|
.onEnd(() => {
|
|
55
55
|
props.onDismiss && props.onDismiss()
|
|
56
56
|
})
|
|
57
|
+
|
|
58
|
+
const Wrapper = props.swipeToCloseDisabled ? ({ children }: any) => {
|
|
59
|
+
return (
|
|
60
|
+
<View style={[styles.modalContainer, {
|
|
61
|
+
backgroundColor: props.backgroundColor || theme.colors.forground
|
|
62
|
+
}]}>
|
|
63
|
+
{children}
|
|
64
|
+
</View>
|
|
65
|
+
)
|
|
66
|
+
} : ({ children }: any) => {
|
|
67
|
+
return (
|
|
68
|
+
<View style={[styles.modalContainer, {
|
|
69
|
+
backgroundColor: props.backgroundColor || theme.colors.forground
|
|
70
|
+
}]}>
|
|
71
|
+
<GestureDetector gesture={fling}>
|
|
72
|
+
{children}
|
|
73
|
+
</GestureDetector>
|
|
74
|
+
</View>
|
|
75
|
+
)
|
|
76
|
+
}
|
|
57
77
|
return (
|
|
58
78
|
<View style={styles.container}>
|
|
59
79
|
<Modal
|
|
@@ -92,43 +112,39 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
92
112
|
visible={modalVisible}
|
|
93
113
|
onRequestClose={() => cancel()}
|
|
94
114
|
>
|
|
95
|
-
<
|
|
96
|
-
backgroundColor: props.backgroundColor || theme.colors.forground
|
|
97
|
-
}]}>
|
|
115
|
+
<Wrapper>
|
|
98
116
|
<View style={[{
|
|
99
117
|
paddingTop: theme.dimens.space.md,
|
|
100
118
|
paddingStart: theme.dimens.space.lg,
|
|
101
119
|
paddingEnd: theme.dimens.space.lg,
|
|
102
120
|
}]}>
|
|
103
|
-
<
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
</HBox>
|
|
131
|
-
</GestureDetector>
|
|
121
|
+
<HBox style={{
|
|
122
|
+
justifyContent: 'space-between',
|
|
123
|
+
width: '100%'
|
|
124
|
+
}}>
|
|
125
|
+
|
|
126
|
+
<View style={{ width: theme.dimens.icon.md }} />
|
|
127
|
+
{
|
|
128
|
+
typeof props.title == 'string' ? (
|
|
129
|
+
<Subtitle style={{
|
|
130
|
+
fontFamily: theme.fonts.Bold
|
|
131
|
+
}}>{props.title.toString()}</Subtitle>
|
|
132
|
+
) : <>{props.title}</>
|
|
133
|
+
}
|
|
134
|
+
{
|
|
135
|
+
cancellable ? (<TouchableOpacity
|
|
136
|
+
style={{
|
|
137
|
+
padding: theme.dimens.space.sm
|
|
138
|
+
}}
|
|
139
|
+
onPress={() => {
|
|
140
|
+
cancel()
|
|
141
|
+
}}>
|
|
142
|
+
<CloseIcon />
|
|
143
|
+
</TouchableOpacity>) : (
|
|
144
|
+
<View style={{ width: theme.dimens.icon.md }} />
|
|
145
|
+
)
|
|
146
|
+
}
|
|
147
|
+
</HBox>
|
|
132
148
|
<VBox style={{
|
|
133
149
|
width: '100%'
|
|
134
150
|
}}>
|
|
@@ -144,20 +160,18 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
144
160
|
{props.children}
|
|
145
161
|
</ScrollView>
|
|
146
162
|
) : (
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
</VBox>
|
|
153
|
-
</GestureDetector>
|
|
163
|
+
<VBox style={{
|
|
164
|
+
width: '100%'
|
|
165
|
+
}}>
|
|
166
|
+
{props.children}
|
|
167
|
+
</VBox>
|
|
154
168
|
)
|
|
155
169
|
}
|
|
156
170
|
|
|
157
171
|
|
|
158
172
|
</VBox>
|
|
159
173
|
</View>
|
|
160
|
-
</
|
|
174
|
+
</Wrapper>
|
|
161
175
|
</Modal>
|
|
162
176
|
</View>
|
|
163
177
|
);
|