react-native-paper-dates 0.22.55 → 0.22.56
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/lib/commonjs/Date/DatePickerModal.js +21 -5
- package/lib/commonjs/Date/DatePickerModal.js.map +1 -1
- package/lib/module/Date/DatePickerModal.js +21 -5
- package/lib/module/Date/DatePickerModal.js.map +1 -1
- package/lib/typescript/Date/DatePickerModal.d.ts +1 -1
- package/lib/typescript/Date/DatePickerModal.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Date/DatePickerModal.tsx +31 -6
|
@@ -28,18 +28,27 @@ function DatePickerModal(props) {
|
|
|
28
28
|
web: 'none',
|
|
29
29
|
default: 'slide'
|
|
30
30
|
});
|
|
31
|
-
const isPageSheet = presentationStyle === 'pageSheet' && _reactNative.Platform.OS === 'ios';
|
|
32
31
|
const theme = (0, _reactNativePaper.useTheme)();
|
|
33
32
|
const dimensions = (0, _reactNative.useWindowDimensions)();
|
|
33
|
+
|
|
34
|
+
// Automatically use formSheet on iPad for better fit
|
|
35
|
+
// iPad detection: width > 650 AND height > 650 (works in both orientations)
|
|
36
|
+
// - iPad portrait: 744x1133, landscape: 1133x744 (both > 650)
|
|
37
|
+
// - iPhone landscape: 932x430 (height < 650, so excluded)
|
|
38
|
+
// pageSheet on iPad is ~540pt wide, but calendar is max 400pt, causing centering
|
|
39
|
+
// formSheet at ~540x620pt provides a better fit for the date picker
|
|
40
|
+
const shouldUseSheet = _reactNative.Platform.OS === 'ios' && (presentationStyle === 'pageSheet' || presentationStyle === 'formSheet');
|
|
41
|
+
const useFormSheet = shouldUseSheet && dimensions.width > 650 && dimensions.height > 650;
|
|
42
|
+
const isSheet = shouldUseSheet;
|
|
34
43
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
35
44
|
style: _reactNative.StyleSheet.absoluteFill,
|
|
36
45
|
pointerEvents: "box-none",
|
|
37
46
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
|
|
38
47
|
animationType: animationTypeCalculated,
|
|
39
|
-
transparent: !
|
|
48
|
+
transparent: !isSheet,
|
|
40
49
|
visible: visible,
|
|
41
50
|
onRequestClose: rest.onDismiss,
|
|
42
|
-
presentationStyle:
|
|
51
|
+
presentationStyle: useFormSheet ? 'formSheet' : shouldUseSheet ? 'pageSheet' : 'overFullScreen',
|
|
43
52
|
supportedOrientations: _utils.supportedOrientations,
|
|
44
53
|
statusBarTranslucent: !disableStatusBar,
|
|
45
54
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
@@ -55,13 +64,13 @@ function DatePickerModal(props) {
|
|
|
55
64
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
56
65
|
style: [styles.modalContent, {
|
|
57
66
|
backgroundColor: theme.colors.surface
|
|
58
|
-
}, dimensions.width > 650 ? styles.modalContentBig : null],
|
|
67
|
+
}, dimensions.width > 650 ? useFormSheet ? styles.modalContentFormSheet : styles.modalContentBig : null],
|
|
59
68
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePickerModalContent.default, {
|
|
60
69
|
...rest,
|
|
61
70
|
inputEnabled: inputEnabled,
|
|
62
71
|
disableSafeTop: disableStatusBarPadding,
|
|
63
72
|
disableStatusBar: disableStatusBar,
|
|
64
|
-
statusBarOnTopOfBackdrop:
|
|
73
|
+
statusBarOnTopOfBackdrop: isSheet || statusBarOnTopOfBackdrop,
|
|
65
74
|
withDateFormatInLabel: props.withDateFormatInLabel,
|
|
66
75
|
placeholder: props.placeholder
|
|
67
76
|
})
|
|
@@ -82,6 +91,13 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
82
91
|
width: '100%',
|
|
83
92
|
overflow: 'hidden'
|
|
84
93
|
},
|
|
94
|
+
modalContentFormSheet: {
|
|
95
|
+
maxWidth: 520,
|
|
96
|
+
maxHeight: 600,
|
|
97
|
+
borderRadius: 10,
|
|
98
|
+
width: '100%',
|
|
99
|
+
overflow: 'hidden'
|
|
100
|
+
},
|
|
85
101
|
modalRoot: {
|
|
86
102
|
justifyContent: 'center',
|
|
87
103
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_reactNativePaper","_DatePickerModalContent","_interopRequireDefault","_react","_styles","_utils","_jsxRuntime","e","__esModule","default","DatePickerModal","props","visible","animationType","disableStatusBar","disableStatusBarPadding","inputEnabled","presentationStyle","statusBarOnTopOfBackdrop","rest","animationTypeCalculated","Platform","select","web","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_reactNativePaper","_DatePickerModalContent","_interopRequireDefault","_react","_styles","_utils","_jsxRuntime","e","__esModule","default","DatePickerModal","props","visible","animationType","disableStatusBar","disableStatusBarPadding","inputEnabled","presentationStyle","statusBarOnTopOfBackdrop","rest","animationTypeCalculated","Platform","select","web","theme","useTheme","dimensions","useWindowDimensions","shouldUseSheet","OS","useFormSheet","width","height","isSheet","jsx","View","style","StyleSheet","absoluteFill","pointerEvents","children","jsxs","Modal","transparent","onRequestClose","onDismiss","supportedOrientations","statusBarTranslucent","TouchableWithoutFeedback","onPress","sharedStyles","root","backgroundColor","colors","backdrop","styles","modalRoot","modalContent","surface","modalContentFormSheet","modalContentBig","disableSafeTop","withDateFormatInLabel","placeholder","create","flex","maxWidth","maxHeight","borderRadius","overflow","justifyContent","alignItems","_default","exports","memo"],"sourceRoot":"../../../src","sources":["Date/DatePickerModal.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,18 +22,27 @@ export function DatePickerModal(props) {
|
|
|
22
22
|
web: 'none',
|
|
23
23
|
default: 'slide'
|
|
24
24
|
});
|
|
25
|
-
const isPageSheet = presentationStyle === 'pageSheet' && Platform.OS === 'ios';
|
|
26
25
|
const theme = useTheme();
|
|
27
26
|
const dimensions = useWindowDimensions();
|
|
27
|
+
|
|
28
|
+
// Automatically use formSheet on iPad for better fit
|
|
29
|
+
// iPad detection: width > 650 AND height > 650 (works in both orientations)
|
|
30
|
+
// - iPad portrait: 744x1133, landscape: 1133x744 (both > 650)
|
|
31
|
+
// - iPhone landscape: 932x430 (height < 650, so excluded)
|
|
32
|
+
// pageSheet on iPad is ~540pt wide, but calendar is max 400pt, causing centering
|
|
33
|
+
// formSheet at ~540x620pt provides a better fit for the date picker
|
|
34
|
+
const shouldUseSheet = Platform.OS === 'ios' && (presentationStyle === 'pageSheet' || presentationStyle === 'formSheet');
|
|
35
|
+
const useFormSheet = shouldUseSheet && dimensions.width > 650 && dimensions.height > 650;
|
|
36
|
+
const isSheet = shouldUseSheet;
|
|
28
37
|
return /*#__PURE__*/_jsx(View, {
|
|
29
38
|
style: StyleSheet.absoluteFill,
|
|
30
39
|
pointerEvents: "box-none",
|
|
31
40
|
children: /*#__PURE__*/_jsxs(Modal, {
|
|
32
41
|
animationType: animationTypeCalculated,
|
|
33
|
-
transparent: !
|
|
42
|
+
transparent: !isSheet,
|
|
34
43
|
visible: visible,
|
|
35
44
|
onRequestClose: rest.onDismiss,
|
|
36
|
-
presentationStyle:
|
|
45
|
+
presentationStyle: useFormSheet ? 'formSheet' : shouldUseSheet ? 'pageSheet' : 'overFullScreen',
|
|
37
46
|
supportedOrientations: supportedOrientations,
|
|
38
47
|
statusBarTranslucent: !disableStatusBar,
|
|
39
48
|
children: [/*#__PURE__*/_jsx(TouchableWithoutFeedback, {
|
|
@@ -49,13 +58,13 @@ export function DatePickerModal(props) {
|
|
|
49
58
|
children: /*#__PURE__*/_jsx(View, {
|
|
50
59
|
style: [styles.modalContent, {
|
|
51
60
|
backgroundColor: theme.colors.surface
|
|
52
|
-
}, dimensions.width > 650 ? styles.modalContentBig : null],
|
|
61
|
+
}, dimensions.width > 650 ? useFormSheet ? styles.modalContentFormSheet : styles.modalContentBig : null],
|
|
53
62
|
children: /*#__PURE__*/_jsx(DatePickerModalContent, {
|
|
54
63
|
...rest,
|
|
55
64
|
inputEnabled: inputEnabled,
|
|
56
65
|
disableSafeTop: disableStatusBarPadding,
|
|
57
66
|
disableStatusBar: disableStatusBar,
|
|
58
|
-
statusBarOnTopOfBackdrop:
|
|
67
|
+
statusBarOnTopOfBackdrop: isSheet || statusBarOnTopOfBackdrop,
|
|
59
68
|
withDateFormatInLabel: props.withDateFormatInLabel,
|
|
60
69
|
placeholder: props.placeholder
|
|
61
70
|
})
|
|
@@ -76,6 +85,13 @@ const styles = StyleSheet.create({
|
|
|
76
85
|
width: '100%',
|
|
77
86
|
overflow: 'hidden'
|
|
78
87
|
},
|
|
88
|
+
modalContentFormSheet: {
|
|
89
|
+
maxWidth: 520,
|
|
90
|
+
maxHeight: 600,
|
|
91
|
+
borderRadius: 10,
|
|
92
|
+
width: '100%',
|
|
93
|
+
overflow: 'hidden'
|
|
94
|
+
},
|
|
79
95
|
modalRoot: {
|
|
80
96
|
justifyContent: 'center',
|
|
81
97
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Modal","Platform","StyleSheet","TouchableWithoutFeedback","useWindowDimensions","View","useTheme","DatePickerModalContent","memo","sharedStyles","supportedOrientations","jsx","_jsx","jsxs","_jsxs","DatePickerModal","props","visible","animationType","disableStatusBar","disableStatusBarPadding","inputEnabled","presentationStyle","statusBarOnTopOfBackdrop","rest","animationTypeCalculated","select","web","default","
|
|
1
|
+
{"version":3,"names":["Modal","Platform","StyleSheet","TouchableWithoutFeedback","useWindowDimensions","View","useTheme","DatePickerModalContent","memo","sharedStyles","supportedOrientations","jsx","_jsx","jsxs","_jsxs","DatePickerModal","props","visible","animationType","disableStatusBar","disableStatusBarPadding","inputEnabled","presentationStyle","statusBarOnTopOfBackdrop","rest","animationTypeCalculated","select","web","default","theme","dimensions","shouldUseSheet","OS","useFormSheet","width","height","isSheet","style","absoluteFill","pointerEvents","children","transparent","onRequestClose","onDismiss","statusBarTranslucent","onPress","root","backgroundColor","colors","backdrop","styles","modalRoot","modalContent","surface","modalContentFormSheet","modalContentBig","disableSafeTop","withDateFormatInLabel","placeholder","create","flex","maxWidth","maxHeight","borderRadius","overflow","justifyContent","alignItems"],"sourceRoot":"../../../src","sources":["Date/DatePickerModal.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ interface DatePickerModalProps {
|
|
|
5
5
|
disableStatusBar?: boolean;
|
|
6
6
|
disableStatusBarPadding?: boolean;
|
|
7
7
|
inputEnabled?: boolean;
|
|
8
|
-
presentationStyle?: 'pageSheet' | 'overFullScreen';
|
|
8
|
+
presentationStyle?: 'pageSheet' | 'formSheet' | 'overFullScreen';
|
|
9
9
|
}
|
|
10
10
|
export interface DatePickerModalSingleProps extends DatePickerModalContentSingleProps, DatePickerModalProps {
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerModal.d.ts","sourceRoot":"","sources":["../../../src/Date/DatePickerModal.tsx"],"names":[],"mappings":"AASA,OAA+B,EAC7B,gCAAgC,EAChC,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,0BAA0B,CAAA;AAKjC,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,WAAW,GAAG,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"DatePickerModal.d.ts","sourceRoot":"","sources":["../../../src/Date/DatePickerModal.tsx"],"names":[],"mappings":"AASA,OAA+B,EAC7B,gCAAgC,EAChC,gCAAgC,EAChC,iCAAiC,EAClC,MAAM,0BAA0B,CAAA;AAKjC,UAAU,oBAAoB;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IACzC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,iBAAiB,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,gBAAgB,CAAA;CACjE;AAED,MAAM,WAAW,0BACf,SAAQ,iCAAiC,EACvC,oBAAoB;CAAG;AAE3B,MAAM,WAAW,yBACf,SAAQ,gCAAgC,EACtC,oBAAoB;CAAG;AAE3B,MAAM,WAAW,yBACf,SAAQ,gCAAgC,EACtC,oBAAoB;CAAG;AAE3B,wBAAgB,eAAe,CAC7B,KAAK,EACD,yBAAyB,GACzB,0BAA0B,GAC1B,yBAAyB,2CAsF9B;;AA4BD,wBAAoC"}
|
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@ interface DatePickerModalProps {
|
|
|
22
22
|
disableStatusBar?: boolean
|
|
23
23
|
disableStatusBarPadding?: boolean
|
|
24
24
|
inputEnabled?: boolean
|
|
25
|
-
presentationStyle?: 'pageSheet' | 'overFullScreen'
|
|
25
|
+
presentationStyle?: 'pageSheet' | 'formSheet' | 'overFullScreen'
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
export interface DatePickerModalSingleProps
|
|
@@ -59,19 +59,33 @@ export function DatePickerModal(
|
|
|
59
59
|
web: 'none',
|
|
60
60
|
default: 'slide',
|
|
61
61
|
})
|
|
62
|
-
const isPageSheet = presentationStyle === 'pageSheet' && Platform.OS === 'ios'
|
|
63
62
|
|
|
64
63
|
const theme = useTheme()
|
|
65
64
|
const dimensions = useWindowDimensions()
|
|
66
65
|
|
|
66
|
+
// Automatically use formSheet on iPad for better fit
|
|
67
|
+
// iPad detection: width > 650 AND height > 650 (works in both orientations)
|
|
68
|
+
// - iPad portrait: 744x1133, landscape: 1133x744 (both > 650)
|
|
69
|
+
// - iPhone landscape: 932x430 (height < 650, so excluded)
|
|
70
|
+
// pageSheet on iPad is ~540pt wide, but calendar is max 400pt, causing centering
|
|
71
|
+
// formSheet at ~540x620pt provides a better fit for the date picker
|
|
72
|
+
const shouldUseSheet =
|
|
73
|
+
Platform.OS === 'ios' &&
|
|
74
|
+
(presentationStyle === 'pageSheet' || presentationStyle === 'formSheet')
|
|
75
|
+
const useFormSheet =
|
|
76
|
+
shouldUseSheet && dimensions.width > 650 && dimensions.height > 650
|
|
77
|
+
const isSheet = shouldUseSheet
|
|
78
|
+
|
|
67
79
|
return (
|
|
68
80
|
<View style={StyleSheet.absoluteFill} pointerEvents="box-none">
|
|
69
81
|
<Modal
|
|
70
82
|
animationType={animationTypeCalculated}
|
|
71
|
-
transparent={!
|
|
83
|
+
transparent={!isSheet}
|
|
72
84
|
visible={visible}
|
|
73
85
|
onRequestClose={rest.onDismiss}
|
|
74
|
-
presentationStyle={
|
|
86
|
+
presentationStyle={
|
|
87
|
+
useFormSheet ? 'formSheet' : shouldUseSheet ? 'pageSheet' : 'overFullScreen'
|
|
88
|
+
}
|
|
75
89
|
supportedOrientations={supportedOrientations}
|
|
76
90
|
statusBarTranslucent={!disableStatusBar}
|
|
77
91
|
>
|
|
@@ -92,7 +106,11 @@ export function DatePickerModal(
|
|
|
92
106
|
style={[
|
|
93
107
|
styles.modalContent,
|
|
94
108
|
{ backgroundColor: theme.colors.surface },
|
|
95
|
-
dimensions.width > 650
|
|
109
|
+
dimensions.width > 650
|
|
110
|
+
? useFormSheet
|
|
111
|
+
? styles.modalContentFormSheet
|
|
112
|
+
: styles.modalContentBig
|
|
113
|
+
: null,
|
|
96
114
|
]}
|
|
97
115
|
>
|
|
98
116
|
<DatePickerModalContent
|
|
@@ -100,7 +118,7 @@ export function DatePickerModal(
|
|
|
100
118
|
inputEnabled={inputEnabled}
|
|
101
119
|
disableSafeTop={disableStatusBarPadding}
|
|
102
120
|
disableStatusBar={disableStatusBar}
|
|
103
|
-
statusBarOnTopOfBackdrop={
|
|
121
|
+
statusBarOnTopOfBackdrop={isSheet || statusBarOnTopOfBackdrop}
|
|
104
122
|
withDateFormatInLabel={props.withDateFormatInLabel}
|
|
105
123
|
placeholder={props.placeholder}
|
|
106
124
|
/>
|
|
@@ -123,6 +141,13 @@ const styles = StyleSheet.create({
|
|
|
123
141
|
width: '100%',
|
|
124
142
|
overflow: 'hidden',
|
|
125
143
|
},
|
|
144
|
+
modalContentFormSheet: {
|
|
145
|
+
maxWidth: 520,
|
|
146
|
+
maxHeight: 600,
|
|
147
|
+
borderRadius: 10,
|
|
148
|
+
width: '100%',
|
|
149
|
+
overflow: 'hidden',
|
|
150
|
+
},
|
|
126
151
|
modalRoot: {
|
|
127
152
|
justifyContent: 'center',
|
|
128
153
|
alignItems: 'center',
|