Fixed Select Alarm dialog and PoorManIntervals class

2025-06-27 23:28:38 +02:00 · 2020-10-13 21:54:52 +01:00
parent 8296676fd5
commit 1077ad8f16
15 changed files with 273 additions and 204 deletions
--- a/ReactNativeClient/lib/components/SelectDateTimeDialog.tsx
+++ b/ReactNativeClient/lib/components/SelectDateTimeDialog.tsx
@ -0,0 +1,125 @@
+import * as React from 'react';
+import { View, Button, Text } from 'react-native';
+import { themeStyle } from 'lib/theme';
+import { _ } from 'lib/locale';
+
+const PopupDialog = require('react-native-popup-dialog').default;
+const { DialogTitle, DialogButton } = require('react-native-popup-dialog');
+const { time } = require('lib/time-utils.js');
+const DateTimePickerModal = require('react-native-modal-datetime-picker').default;
+
+export default class SelectDateTimeDialog extends React.PureComponent<any, any> {
+
+	private dialog_:any = null;
+	private shown_:boolean = false;
+
+	constructor(props:any) {
+		super(props);
+
+		this.state = {
+			date: null,
+			mode: 'date',
+			showPicker: false,
+		};
+
+		this.onReject = this.onReject.bind(this);
+		this.onPickerConfirm = this.onPickerConfirm.bind(this);
+		this.onPickerCancel = this.onPickerCancel.bind(this);
+		this.onSetDate = this.onSetDate.bind(this);
+	}
+
+	UNSAFE_componentWillReceiveProps(newProps:any) {
+		if (newProps.date != this.state.date) {
+			this.setState({ date: newProps.date });
+		}
+
+		if ('shown' in newProps && newProps.shown != this.shown_) {
+			this.show(newProps.shown);
+		}
+	}
+
+	show(doShow:boolean = true) {
+		if (doShow) {
+			this.dialog_.show();
+		} else {
+			this.dialog_.dismiss();
+		}
+
+		this.shown_ = doShow;
+	}
+
+	dismiss() {
+		this.show(false);
+	}
+
+	onAccept() {
+		if (this.props.onAccept) this.props.onAccept(this.state.date);
+	}
+
+	onReject() {
+		if (this.props.onReject) this.props.onReject();
+	}
+
+	onClear() {
+		if (this.props.onAccept) this.props.onAccept(null);
+	}
+
+	onPickerConfirm(selectedDate:Date) {
+		this.setState({ date: selectedDate, showPicker: false });
+	}
+
+	onPickerCancel() {
+		this.setState({ showPicker: false });
+	}
+
+	onSetDate() {
+		this.setState({ showPicker: true });
+	}
+
+	renderContent() {
+		if (!this.shown_) return <View/>;
+
+		const theme = themeStyle(this.props.themeId);
+
+		return (
+			<View style={{ flex: 1, margin: 20, alignItems: 'center' }}>
+				<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+					{ this.state.date && <Text style={{ ...theme.normalText, marginRight: 10 }}>{time.formatDateToLocal(this.state.date)}</Text> }
+					<Button title="Set date" onPress={this.onSetDate} />
+				</View>
+				<DateTimePickerModal
+					date={this.state.date ? this.state.date : new Date()}
+					is24Hour={time.use24HourFormat()}
+					isVisible={this.state.showPicker}
+					mode="datetime"
+					onConfirm={this.onPickerConfirm}
+					onCancel={this.onPickerCancel}
+				/>
+			</View>
+		);
+	}
+
+	render() {
+		const clearAlarmText = _('Clear alarm'); // For unknown reasons, this particular string doesn't get translated if it's directly in the text property below
+
+		const popupActions = [
+			<DialogButton text={_('Save alarm')} align="center" onPress={() => this.onAccept()} key="saveButton" />,
+			<DialogButton text={clearAlarmText} align="center" onPress={() => this.onClear()} key="clearButton" />,
+			<DialogButton text={_('Cancel')} align="center" onPress={() => this.onReject()} key="cancelButton" />,
+		];
+
+		return (
+			<PopupDialog
+				ref={(dialog:any) => { this.dialog_ = dialog; }}
+				dialogTitle={<DialogTitle title={_('Set alarm')} />}
+				actions={popupActions}
+				dismissOnTouchOutside={false}
+				width={0.9}
+				height={350}
+			>
+				{this.renderContent()}
+			</PopupDialog>
+		);
+	}
+
+}