mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
Added auto-reset of time input if invalid time was entered
no issue - it was possible to enter invalid times when scheduling in the publish flow, in which case the underlying schedule date was not updated but the input still showed the invalid time - added passthrough of the blur event in `<GhDateTimePicker>` to the `setTime` action so we have access to the input field, then updated the `setTime` action to set the time input value back to the currently set schedule time when an invalid time is entered so the UI matches the actually set value
This commit is contained in:
parent
34a45d99a2
commit
f137aaea5c
2 changed files with 12 additions and 4 deletions
|
@ -17,8 +17,15 @@ export default class PublishAtOption extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
setTime(time) {
|
setTime(time, event) {
|
||||||
|
const newDate = moment.utc(this.args.publishOptions.scheduledAtUTC);
|
||||||
|
|
||||||
|
// used to reset the time value on blur if it's invalid
|
||||||
|
// TODO: handle this in the picker component instead
|
||||||
|
const oldTime = newDate.tz(this.settings.get('timezone')).format('HH:mm');
|
||||||
|
|
||||||
if (!time) {
|
if (!time) {
|
||||||
|
event.target.value = oldTime;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,12 +34,14 @@ export default class PublishAtOption extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!time.match(/^\d\d:\d\d$/)) {
|
if (!time.match(/^\d\d:\d\d$/)) {
|
||||||
|
event.target.value = oldTime;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const [hour, minute] = time.split(':').map(n => parseInt(n, 10));
|
const [hour, minute] = time.split(':').map(n => parseInt(n, 10));
|
||||||
|
|
||||||
if (isNaN(hour) || hour < 0 || hour > 23 || isNaN(minute) || minute < 0 || minute > 59) {
|
if (isNaN(hour) || hour < 0 || hour > 23 || isNaN(minute) || minute < 0 || minute > 59) {
|
||||||
|
event.target.value = oldTime;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -42,7 +51,6 @@ export default class PublishAtOption extends Component {
|
||||||
conversionDate.set({hour, minute});
|
conversionDate.set({hour, minute});
|
||||||
const utcDate = moment.utc(conversionDate);
|
const utcDate = moment.utc(conversionDate);
|
||||||
|
|
||||||
const newDate = moment.utc(this.args.publishOptions.scheduledAtUTC);
|
|
||||||
newDate.set({hour: utcDate.get('hour'), minute: utcDate.get('minute')});
|
newDate.set({hour: utcDate.get('hour'), minute: utcDate.get('minute')});
|
||||||
|
|
||||||
this.args.publishOptions.setScheduledAt(newDate);
|
this.args.publishOptions.setScheduledAt(newDate);
|
||||||
|
|
|
@ -156,13 +156,13 @@ export default class GhDateTimePicker extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
setTimeInternal(time) {
|
setTimeInternal(time, event) {
|
||||||
if (time.match(/^\d:\d\d$/)) {
|
if (time.match(/^\d:\d\d$/)) {
|
||||||
time = `0${time}`;
|
time = `0${time}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (time !== this._previousTime) {
|
if (time !== this._previousTime) {
|
||||||
this.setTime(time);
|
this.setTime(time, event);
|
||||||
this.set('_previousTime', time);
|
this.set('_previousTime', time);
|
||||||
|
|
||||||
if (isBlank(this.date)) {
|
if (isBlank(this.date)) {
|
||||||
|
|
Loading…
Add table
Reference in a new issue