react-native-boxes 1.4.7 → 1.4.8
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/Modal.tsx +10 -4
package/package.json
CHANGED
package/src/Modal.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useContext, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { Animated, Button, Easing, LayoutChangeEvent, Linking, Modal, Platform, Pressable, ScrollView, StyleProp, StyleSheet, TextStyle, TouchableHighlight, TouchableOpacity, View, ViewProps } from 'react-native';
|
|
4
|
-
import { Icon, IconProps } from './Image';
|
|
4
|
+
import { getIcon, Icon, IconProps } from './Image';
|
|
5
5
|
import { getNavParamsFromDeeplink, isDesktop, isWeb } from './utils';
|
|
6
6
|
import { ThemeContext } from './ThemeContext';
|
|
7
7
|
import { Center, HBox, VBox, VPage } from './Box';
|
|
@@ -18,6 +18,9 @@ export type BottomSheetProps = {
|
|
|
18
18
|
cancellable?: boolean
|
|
19
19
|
children: any
|
|
20
20
|
onDismiss?: Function
|
|
21
|
+
backgroundColor?: string
|
|
22
|
+
closeIcon?: string | React.ReactNode
|
|
23
|
+
|
|
21
24
|
}
|
|
22
25
|
export const BottomSheet = (props: BottomSheetProps) => {
|
|
23
26
|
const [modalVisible, setModalVisible] = useState(false);
|
|
@@ -36,6 +39,10 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
36
39
|
}
|
|
37
40
|
}
|
|
38
41
|
|
|
42
|
+
const CloseIcon = getIcon(props.closeIcon) || (() => {
|
|
43
|
+
return (<Icon color={theme.colors.caption} name="close" />)
|
|
44
|
+
})
|
|
45
|
+
|
|
39
46
|
return (
|
|
40
47
|
<View style={styles.container}>
|
|
41
48
|
<Modal
|
|
@@ -75,7 +82,7 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
75
82
|
onRequestClose={() => cancel()}
|
|
76
83
|
>
|
|
77
84
|
<View style={[styles.modalContainer, {
|
|
78
|
-
backgroundColor: theme.colors.forground
|
|
85
|
+
backgroundColor: props.backgroundColor || theme.colors.forground
|
|
79
86
|
}]}>
|
|
80
87
|
<View style={[{
|
|
81
88
|
paddingTop: theme.dimens.space.md,
|
|
@@ -102,8 +109,7 @@ export const BottomSheet = (props: BottomSheetProps) => {
|
|
|
102
109
|
onPress={() => {
|
|
103
110
|
cancel()
|
|
104
111
|
}}>
|
|
105
|
-
<
|
|
106
|
-
color={theme.colors.caption} name="close" />
|
|
112
|
+
<CloseIcon />
|
|
107
113
|
</TouchableOpacity>) : (
|
|
108
114
|
<View style={{ width: theme.dimens.icon.md }} />
|
|
109
115
|
)
|