secullum-react-native-ui 4.18.1-beta.0 → 4.18.1
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.
|
@@ -13,6 +13,7 @@ export interface RangeDatePickerProperties {
|
|
|
13
13
|
export interface RangeDatePickerState {
|
|
14
14
|
showStartDateModal: boolean;
|
|
15
15
|
showEndDateModal: boolean;
|
|
16
|
+
renderEndModal: boolean;
|
|
16
17
|
isDarkModeEnabled: boolean;
|
|
17
18
|
}
|
|
18
19
|
export declare class RangeDatePicker extends React.Component<RangeDatePickerProperties, RangeDatePickerState> {
|
|
@@ -25,6 +26,7 @@ export declare class RangeDatePicker extends React.Component<RangeDatePickerProp
|
|
|
25
26
|
handleStartDateCancel: () => void;
|
|
26
27
|
handleEndDateConfirm: (date: Date) => void;
|
|
27
28
|
handleEndDateCancel: () => void;
|
|
29
|
+
handleEndModalHide: () => void;
|
|
28
30
|
getStyles: () => {
|
|
29
31
|
container: {
|
|
30
32
|
paddingHorizontal: number;
|
|
@@ -16,6 +16,7 @@ class RangeDatePicker extends React.Component {
|
|
|
16
16
|
this.state = {
|
|
17
17
|
showStartDateModal: false,
|
|
18
18
|
showEndDateModal: false,
|
|
19
|
+
renderEndModal: false,
|
|
19
20
|
isDarkModeEnabled: react_native_1.Appearance.getColorScheme() === 'dark'
|
|
20
21
|
};
|
|
21
22
|
this.handleDatePickerPress = () => {
|
|
@@ -26,7 +27,8 @@ class RangeDatePicker extends React.Component {
|
|
|
26
27
|
this.handleStartDateConfirm = (date) => {
|
|
27
28
|
this.setState({
|
|
28
29
|
showStartDateModal: false,
|
|
29
|
-
showEndDateModal: true
|
|
30
|
+
showEndDateModal: true,
|
|
31
|
+
renderEndModal: true
|
|
30
32
|
}, () => {
|
|
31
33
|
// When using RangeDatePicker on Android devices the end date modal were not being displayed, in order to avoid it,
|
|
32
34
|
// the setTimeOut was implemented so as it will set a little delay (enough time to update the state) before execute other functions.
|
|
@@ -42,7 +44,8 @@ class RangeDatePicker extends React.Component {
|
|
|
42
44
|
this.handleStartDateCancel = () => {
|
|
43
45
|
this.setState({
|
|
44
46
|
showStartDateModal: false,
|
|
45
|
-
showEndDateModal: true
|
|
47
|
+
showEndDateModal: true,
|
|
48
|
+
renderEndModal: true
|
|
46
49
|
});
|
|
47
50
|
};
|
|
48
51
|
this.handleEndDateConfirm = (date) => {
|
|
@@ -60,6 +63,16 @@ class RangeDatePicker extends React.Component {
|
|
|
60
63
|
showEndDateModal: false
|
|
61
64
|
});
|
|
62
65
|
};
|
|
66
|
+
// sec-issues#14524: confirmar a data desmontava o picker na hora, com o Modal
|
|
67
|
+
// nativo ainda visível, pulando a animação de saída. Isso deixava um view
|
|
68
|
+
// controller órfão que o iOS reexibia por um frame na navegação seguinte (a
|
|
69
|
+
// piscada ao enviar). Agora o showEndDateModal só controla o isVisible (o modal
|
|
70
|
+
// fecha com a animação) e o picker só é desmontado aqui, no onHide, após o dismiss.
|
|
71
|
+
this.handleEndModalHide = () => {
|
|
72
|
+
this.setState({
|
|
73
|
+
renderEndModal: false
|
|
74
|
+
});
|
|
75
|
+
};
|
|
63
76
|
this.getStyles = () => {
|
|
64
77
|
const theme = (0, theme_1.getTheme)();
|
|
65
78
|
const styles = react_native_1.StyleSheet.create({
|
|
@@ -103,7 +116,7 @@ class RangeDatePicker extends React.Component {
|
|
|
103
116
|
}
|
|
104
117
|
render() {
|
|
105
118
|
const { label, startDate, endDate, style, nativeID } = this.props;
|
|
106
|
-
const { showStartDateModal, showEndDateModal, isDarkModeEnabled } = this.state;
|
|
119
|
+
const { showStartDateModal, showEndDateModal, renderEndModal, isDarkModeEnabled } = this.state;
|
|
107
120
|
const displayFormat = 'MMM d, yyyy';
|
|
108
121
|
const displayText = (0, format_1.formatDate)(startDate, displayFormat) +
|
|
109
122
|
' - ' +
|
|
@@ -118,8 +131,8 @@ class RangeDatePicker extends React.Component {
|
|
|
118
131
|
react_native_1.Platform.OS !== 'web' &&
|
|
119
132
|
(showStartDateModal ? (React.createElement(react_native_modal_datetime_picker_1.default, { date: startDate, isVisible: true, onConfirm: this.handleStartDateConfirm, onCancel: this.handleStartDateCancel, isDarkModeEnabled: isDarkModeEnabled,
|
|
120
133
|
//@ts-ignore
|
|
121
|
-
display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })) :
|
|
122
|
-
React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible:
|
|
134
|
+
display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' })) : renderEndModal ? (React.createElement(Delay_1.Delay, { wait: 5 },
|
|
135
|
+
React.createElement(react_native_modal_datetime_picker_1.default, { date: endDate, isVisible: showEndDateModal, onConfirm: this.handleEndDateConfirm, onCancel: this.handleEndDateCancel, onHide: this.handleEndModalHide, isDarkModeEnabled: isDarkModeEnabled,
|
|
123
136
|
//@ts-ignore
|
|
124
137
|
display: react_native_1.Platform.OS == 'ios' ? 'inline' : 'default' }))) : null))));
|
|
125
138
|
}
|
|
@@ -102,9 +102,7 @@ class TimePicker extends React.Component {
|
|
|
102
102
|
React.createElement(react_native_1.View, null,
|
|
103
103
|
React.createElement(react_native_1.Text, { style: styles.label }, label),
|
|
104
104
|
React.createElement(react_native_1.Text, { style: styles.value }, value)),
|
|
105
|
-
!disabled && (React.createElement(ImageButton_1.ImageButton, { icon: value && clearable ? 'times' : 'clock-o',
|
|
106
|
-
? `${nativeID}-${value && clearable ? 'clear' : 'clock'}`
|
|
107
|
-
: undefined, style: styles.clearIcon, iconColor: value && clearable ? theme.textColor1 : theme.textColor2, onPress: value && clearable ? this.handleClear : this.handlePress, hitBoxSize: 30 })),
|
|
105
|
+
!disabled && (React.createElement(ImageButton_1.ImageButton, { icon: value && clearable ? 'times' : 'clock-o', style: styles.clearIcon, iconColor: value && clearable ? theme.textColor1 : theme.textColor2, onPress: value && clearable ? this.handleClear : this.handlePress, hitBoxSize: 30 })),
|
|
108
106
|
react_native_1.Platform.OS !== 'web' && (React.createElement(react_native_modal_datetime_picker_1.default, { mode: "time", date: date, isVisible: showModal, onConfirm: this.handleConfirm, onCancel: this.handleCancel, isDarkModeEnabled: isDarkModeEnabled, display: react_native_1.Platform.OS == 'ios' ? 'spinner' : 'default' }))))));
|
|
109
107
|
}
|
|
110
108
|
}
|