-
Notifications
You must be signed in to change notification settings - Fork 170
/
DatePickerModal.tsx
131 lines (122 loc) · 3.38 KB
/
DatePickerModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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
131
import {
Modal,
StyleSheet,
TouchableWithoutFeedback,
useWindowDimensions,
View,
Platform,
} from 'react-native'
import { useTheme } from 'react-native-paper'
import DatePickerModalContent, {
DatePickerModalContentMultiProps,
DatePickerModalContentRangeProps,
DatePickerModalContentSingleProps,
} from './DatePickerModalContent'
import React, { memo } from 'react'
import { sharedStyles } from '../shared/styles'
import { supportedOrientations } from '../shared/utils'
interface DatePickerModalProps {
visible: boolean
animationType?: 'slide' | 'fade' | 'none'
disableStatusBar?: boolean
disableStatusBarPadding?: boolean
inputEnabled?: boolean
presentationStyle?: 'pageSheet' | 'overFullScreen'
}
export interface DatePickerModalSingleProps
extends DatePickerModalContentSingleProps,
DatePickerModalProps {}
export interface DatePickerModalMultiProps
extends DatePickerModalContentMultiProps,
DatePickerModalProps {}
export interface DatePickerModalRangeProps
extends DatePickerModalContentRangeProps,
DatePickerModalProps {}
export function DatePickerModal(
props:
| DatePickerModalRangeProps
| DatePickerModalSingleProps
| DatePickerModalMultiProps
) {
const {
visible,
animationType,
disableStatusBar,
disableStatusBarPadding,
inputEnabled,
presentationStyle,
statusBarOnTopOfBackdrop,
...rest
} = props
const animationTypeCalculated =
animationType ||
Platform.select({
web: 'none',
default: 'slide',
})
const isPageSheet = presentationStyle === 'pageSheet' && Platform.OS === 'ios'
const theme = useTheme()
const dimensions = useWindowDimensions()
return (
<View style={StyleSheet.absoluteFill} pointerEvents="box-none">
<Modal
animationType={animationTypeCalculated}
transparent={!isPageSheet}
visible={visible}
onRequestClose={rest.onDismiss}
presentationStyle={isPageSheet ? 'pageSheet' : 'overFullScreen'}
supportedOrientations={supportedOrientations}
statusBarTranslucent={true}
>
<TouchableWithoutFeedback onPress={rest.onDismiss}>
<View
style={[
StyleSheet.absoluteFill,
sharedStyles.root,
{ backgroundColor: theme.colors.backdrop },
]}
/>
</TouchableWithoutFeedback>
<View
style={[StyleSheet.absoluteFill, styles.modalRoot]}
pointerEvents="box-none"
>
<View
style={[
styles.modalContent,
{ backgroundColor: theme.colors.surface },
dimensions.width > 650 ? styles.modalContentBig : null,
]}
>
<DatePickerModalContent
{...rest}
inputEnabled={inputEnabled}
disableSafeTop={disableStatusBarPadding}
disableStatusBar={disableStatusBar}
statusBarOnTopOfBackdrop={isPageSheet || statusBarOnTopOfBackdrop}
/>
</View>
</View>
</Modal>
</View>
)
}
const styles = StyleSheet.create({
modalContent: {
flex: 1,
width: '100%',
},
modalContentBig: {
maxWidth: 600,
maxHeight: 800,
borderRadius: 10,
width: '100%',
overflow: 'hidden',
},
modalRoot: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
})
export default memo(DatePickerModal)