self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-06-27 23:28:38 +02:00
Code Issues Releases Activity

Fixed Select Alarm dialog and PoorManIntervals class

Browse Source
This commit is contained in:
Laurent Cozic
2020-10-13 21:54:52 +01:00
parent 8296676fd5
commit 1077ad8f16
15 changed files with 273 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
ReactNativeClient/lib/components/SelectDateTimeDialog.tsx Normal file
View File

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

2
ReactNativeClient/lib/components/screen-header.js
View File

@ -481,7 +481,7 @@ class ScreenHeaderComponent extends React.PureComponent {
!menuOptionComponents.length || !showContextMenuButton ? null : (
<Menu onSelect={value => this.menu_select(value)} style={this.styles().contextMenu}>
<MenuTrigger style={contextMenuStyle}>
<Icon name="more-vert" style={this.styles().contextMenuTrigger} />
<Icon name="md-ellipsis-vertical" style={this.styles().contextMenuTrigger} />
</MenuTrigger>
<MenuOptions>
<ScrollView style={{ maxHeight: windowHeight }}>{menuOptionComponents}</ScrollView>

4
ReactNativeClient/lib/components/screens/note.js
View File

@ -37,7 +37,7 @@ const { DocumentPicker, DocumentPickerUtil } = require('react-native-document-pi
const ImageResizer = require('react-native-image-resizer').default;
const shared = require('lib/components/shared/note-screen-shared.js');
const ImagePicker = require('react-native-image-picker');
const { SelectDateTimeDialog } = require('lib/components/select-date-time-dialog.js');
const SelectDateTimeDialog = require('lib/components/SelectDateTimeDialog').default;
const ShareExtension = require('lib/ShareExtension.js').default;
const CameraView = require('lib/components/CameraView');
const urlUtils = require('lib/urlUtils');
@ -1178,7 +1178,7 @@ class NoteScreenComponent extends BaseScreenComponent {
{bodyComponent}
{!this.useBetaEditor() && actionButtonComp}
<SelectDateTimeDialog shown={this.state.alarmDialogShown} date={dueDate} onAccept={this.onAlarmDialogAccept} onReject={this.onAlarmDialogReject} />
<SelectDateTimeDialog themeId={this.props.themeId} shown={this.state.alarmDialogShown} date={dueDate} onAccept={this.onAlarmDialogAccept} onReject={this.onAlarmDialogReject} />
<DialogBox
ref={dialogbox => {

109
ReactNativeClient/lib/components/select-date-time-dialog.js
View File

@ -1,109 +0,0 @@
import React from 'react';
import { View } 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';
const { time } = require('lib/time-utils.js');
class SelectDateTimeDialog extends React.PureComponent {
constructor() {
super();
this.dialog_ = null;
this.shown_ = false;
this.state = { date: null };
this.onReject = this.onReject.bind(this);
}
UNSAFE_componentWillReceiveProps(newProps) {
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 = true) {
if (doShow) {
this.dialog_.show();
} else {
this.dialog_.dismiss();
}
this.shown_ = doShow;
}
dismiss() {
this.show(false);
}
dateTimeFormat() {
return time.dateTimeFormat();
}
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 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) => { this.dialog_ = dialog; }}
dialogTitle={<DialogTitle title={_('Set alarm')} />}
actions={popupActions}
dismissOnTouchOutside={false}
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 }}
customStyles={{
btnConfirm: {
paddingVertical: 0,
},
btnCancel: {
paddingVertical: 0,
},
}}
/>
</View>
</PopupDialog>
);
}
}
// eslint-disable-next-line import/prefer-default-export
export { SelectDateTimeDialog };