diff --git a/packages/app-mobile/components/SelectDateTimeDialog.tsx b/packages/app-mobile/components/SelectDateTimeDialog.tsx index f68fe6b24..0f115127e 100644 --- a/packages/app-mobile/components/SelectDateTimeDialog.tsx +++ b/packages/app-mobile/components/SelectDateTimeDialog.tsx @@ -1,17 +1,56 @@ import * as React from 'react'; import { themeStyle } from '@joplin/lib/theme'; import { _ } from '@joplin/lib/locale'; -const { View, Button, Text } = require('react-native'); - -const PopupDialog = require('react-native-popup-dialog').default; -const { DialogTitle, DialogButton } = require('react-native-popup-dialog'); +const { Modal, View, Button, Text, StyleSheet } = require('react-native'); import time from '@joplin/lib/time'; const DateTimePickerModal = require('react-native-modal-datetime-picker').default; -export default class SelectDateTimeDialog extends React.PureComponent { +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', + }, +}); - private dialog_: any = null; - private shown_: boolean = false; +export default class SelectDateTimeDialog extends React.PureComponent { constructor(props: any) { super(props); @@ -32,24 +71,6 @@ export default class SelectDateTimeDialog extends React.PureComponent 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() { @@ -77,12 +98,10 @@ export default class SelectDateTimeDialog extends React.PureComponent } renderContent() { - if (!this.shown_) return ; - const theme = themeStyle(this.props.themeId); return ( - + { this.state.date && {time.formatDateToLocal(this.state.date)} }