Better times

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 jobs:
   build:
     docker:
-      - image: circleci/node:10.11.0
+      - image: cimg/node:16.8.0
     steps:
       - checkout
       - run: ./bin/build-addon.sh

package.json

@@ -31,7 +31,7 @@
     "eslint-plugin-react": "6.8.0",
     "json-loader": "0.5.7",
     "mocha": "8.0.1",
-    "node-sass": "4.14.1",
+    "node-sass": "6.0.1",
     "npm-run-all": "3.1.2",
     "onchange": "7.0.2",
     "photon-colors": "1.3.1",
@@ -49,8 +49,8 @@
     "classnames": "2.2.5",
     "moment": "2.19.3",
     "rc-animate": "2.3.1",
-    "rc-calendar": "8.1.0",
-    "rc-time-picker": "2.2.1",
+    "rc-calendar": "8.4.1",
+    "rc-time-picker": "3.7.3",
     "rc-trigger": "1.8.1",
     "react": "15.4.1",
     "react-addons-css-transition-group": "15.4.2",
@@ -107,7 +107,7 @@
   "scripts": {
     "start": "npm run build && npm-run-all --parallel test watch",
     "build": "npm run clean && npm-run-all --parallel copy:* bundle:*",
-    "run": "web-ext run -s dist --firefox=nightly",
+    "run": "web-ext run -s dist",
     "clean": "shx rm -rf dist && shx mkdir -p dist/popup",
     "watch": "npm-run-all --parallel watch:*",
     "copy:locales": "node ./bin/build-locales.js",

src/lib/components/DatePickerPanel.js

@@ -51,7 +51,8 @@ export default class DatePickerPanel extends React.Component {
     this.validationTimer = null;
     this.state = {
       currentValue: props.defaultValue || props.moment(),
-      confirmDisabled: false
+      confirmDisabled: false,
+      timeDisabled: false
     };
   }
 
@@ -70,8 +71,7 @@ export default class DatePickerPanel extends React.Component {
 
   render() {
     const { id, header, active, onClose } = this.props;
-    const { currentValue, confirmDisabled } = this.state;
-    const disabledTimeFns = this.disabledTime();
+    const { currentValue, confirmDisabled, timeDisabled } = this.state;
 
     // Clone & patch the moment value to accept functions as formats
     const currentValueLocalized = currentValue.clone().locale(momentLocale);
@@ -90,18 +90,18 @@ export default class DatePickerPanel extends React.Component {
                   showToday={false}
                   value={currentValueLocalized}
                   disabledDate={this.disabledDate.bind(this)}
-                  disabledTime={this.disabledTime.bind(this)}
                   onChange={value => this.handleChange(value)}
                   onSelect={value => this.handleChange(value)} />
         <div className="time-wrapper">
           <TimePicker locale={calendarLocale}
+                      minuteStep={5}
                       showSecond={false}
+                      disabled={timeDisabled}
                       hideDisabledOptions={true}
                       allowEmpty={false}
                       value={currentValueLocalized}
                       format={timeFormat}
-                      onChange={value => this.handleChange(value)}
-                      {...disabledTimeFns} />
+                      onChange={value => this.handleChange(value)} />
         </div>
         <div className="footer" role="menu">
           <div className="back" tabIndex={1}
@@ -132,43 +132,17 @@ export default class DatePickerPanel extends React.Component {
     return out;
   }
 
-  disabledTime() {
-    const { currentValue } = this.state;
-    if (!currentValue) { return; }
-
+  disabledTime(currentValue) {
     // All time selection disabled for past dates
     const today = this.props.moment().hour(0).minute(0).second(0);
-    if (currentValue.valueOf() < today.valueOf()) {
-      return {
-        disabledHours: () => this.makeRangeArray(0, 24),
-        disabledMinutes: () => this.makeRangeArray(0, 60),
-        disabledSeconds: () => this.makeRangeArray(0, 60)
-      };
-    }
-
-    // Disable past times for today as appropriate
-    const now = this.props.moment();
-    if (now.date() === currentValue.date() &&
-        now.month() === currentValue.month() &&
-        now.year() === currentValue.year()) {
-      return {
-        disabledHours: () =>
-          this.makeRangeArray(0, now.hour()),
-        disabledMinutes: () =>
-          now.hour() === currentValue.hour() ?
-            this.makeRangeArray(0, now.minute()) : [],
-        disabledSeconds: () =>
-          now.hour() === currentValue.hour() &&
-          now.minute() === currentValue.minute() ?
-            this.makeRangeArray(0, now.second()) : []
-      };
-    }
+    return currentValue.valueOf() < today.valueOf();
   }
 
   handleChange(value) {
     this.setState({
       currentValue: value,
-      confirmDisabled: (value.valueOf() <= Date.now())
+      confirmDisabled: (value.valueOf() <= Date.now()),
+      timeDisabled: this.disabledTime(value)
     });
   }
 

src/lib/time-formats.js

@@ -25,11 +25,11 @@ const formats = {
 
   'long_date_time-en': [
     new Intl.DateTimeFormat(uiLocales, { weekday: 'short', month: 'short', day: 'numeric' }),
-    { format: (date) => tweakShortTimeForEn(formats.short_time_no_minutes.format(date)) }
+    { format: (date) => tweakShortTimeForEn(formats.short_time.format(date)) }
   ],
   'short_date_time-en': [
     new Intl.DateTimeFormat(uiLocales, { weekday: 'short' }),
-    { format: (date) => tweakShortTimeForEn(formats.short_time_no_minutes.format(date)) }
+    { format: (date) => tweakShortTimeForEn(formats.short_time.format(date)) }
   ],
   'short_time-en': [
     {format: () => ''},

src/lib/times.js

@@ -27,26 +27,26 @@ export function timeForId(time, id) {
   switch (id) {
     case 'debug':
       rv = rv.add(5, 'seconds');
-      text = getLocalizedDateTime(rv, 'short_time_no_minutes');
+      text = getLocalizedDateTime(rv, 'short_time');
       break;
     case 'later':
       rv = rv.add(3, 'hours').minute(0);
       text = getLocalizedDateTime(rv, 'short_time_no_minutes');
       break;
     case 'tomorrow':
-      rv = rv.add(1, 'day').hour(9).minute(0);
+      rv = rv.add(1, 'day').hour(8).minute(30);
       text = getLocalizedDateTime(rv, 'short_date_time');
       break;
     case 'weekend':
-      rv = rv.day(6).hour(9).minute(0);
+      rv = rv.day(6).hour(8).minute(30);
       text = getLocalizedDateTime(rv, 'short_date_time');
       break;
     case 'week':
-      rv = rv.add(1, 'week').hour(9).minute(0);
+      rv = rv.add(1, 'week').hour(8).minute(30);
       text = getLocalizedDateTime(rv, 'long_date_time');
       break;
     case 'month':
-      rv = rv.add(1, 'month').hour(9).minute(0);
+      rv = rv.add(1, 'month').hour(8).minute(30);
       text = getLocalizedDateTime(rv, 'long_date_time');
       break;
     case NEXT_OPEN: