joplin/ReactNativeClient/lib/components/select-date-time-dialog.js

import React, { Component } from "react";
import { Keyboard, View, Button, Text, StyleSheet, Linking, Image } from "react-native";
import PopupDialog, { DialogTitle, DialogButton } from "react-native-popup-dialog";
import DatePicker from "react-native-datepicker";
import moment from "moment";
import { _ } from "lib/locale.js";

class SelectDateTimeDialog extends Component {
	constructor() {
		super();
		this.dialog_ = null;
		this.shown_ = false;
		this.state = { date: null };
	}

	componentWillReceiveProps(newProps) {
		if (newProps.date != this.state.date) {
			this.setState({ date: newProps.date });
		}

		if ("shown" in newProps) {
			this.show(newProps.shown);
		}
	}

	show(doShow = true) {
		if (doShow) {
			this.dialog_.show();
		} else {
			this.dialog_.dismiss();
		}

		this.shown_ = doShow;
	}

	dismiss() {
		this.show(false);
	}

	dateTimeFormat() {
		return "MM/DD/YYYY HH:mm";
	}

	stringToDate(s) {
		return moment(s, this.dateTimeFormat()).toDate();
	}

	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);
	}

	render() {
		const popupActions = [
			<DialogButton text="Save alarm" align="center" onPress={() => this.onAccept()} key="saveButton" />,
			<DialogButton text="Clear alarm" align="center" onPress={() => this.onClear()} key="clearButton" />,
			<DialogButton text="Cancel" align="center" onPress={() => this.onReject()} key="cancelButton" />,
		];

		return (
			<PopupDialog
				ref={dialog => {
					this.dialog_ = dialog;
				}}
				dialogTitle={<DialogTitle title={_("Set alarm")} />}
				actions={popupActions}
				width={0.9}
				height={350}
			>
				<View style={{ flex: 1, margin: 20, alignItems: "center" }}>
					<DatePicker
						date={this.state.date}
						mode="datetime"
						placeholder={_("Select date")}
						format={this.dateTimeFormat()}
						confirmBtnText={_("Confirm")}
						cancelBtnText={_("Cancel")}
						onDateChange={date => {
							this.setState({ date: this.stringToDate(date) });
						}}
						style={{ width: 300 }}
					/>
				</View>
			</PopupDialog>
		);
	}
}

export { SelectDateTimeDialog };