import * as React from 'react'; import { themeStyle } from '@joplin/lib/theme'; import { _ } from '@joplin/lib/locale'; const { Modal, View, Button, Text, StyleSheet } = require('react-native'); import time from '@joplin/lib/time'; const DateTimePickerModal = require('react-native-modal-datetime-picker').default; const styles = StyleSheet.create({ centeredView: { flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 22, }, modalView: { display: 'flex', flexDirection: 'column', margin: 10, backgroundColor: 'white', borderRadius: 10, alignItems: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, }, button: { borderRadius: 20, padding: 10, elevation: 2, }, buttonOpen: { backgroundColor: '#F194FF', }, buttonClose: { backgroundColor: '#2196F3', }, textStyle: { color: 'white', fontWeight: 'bold', textAlign: 'center', }, modalText: { marginBottom: 15, textAlign: 'center', }, }); export default class SelectDateTimeDialog extends React.PureComponent { 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 }); } } 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() { const theme = themeStyle(this.props.themeId); return ( { this.state.date && {time.formatDateToLocal(this.state.date)} }