@transferwise/components 0.0.0-experimental-c0c64e3 → 0.0.0-experimental-f3d17a6

package/build/index.esm.js

@@ -3564,6 +3564,28 @@ DateHeader.defaultProps = {
 };
 var DateHeader$1 = DateHeader;
 
+function getFocusableTime(isSelected, isNow, isDisabled, timeSpan) {
+  let selected = null;
+  let now = null;
+  let disabled = null;
+  for (const time of timeSpan) {
+    if (isSelected(time)) {
+      selected = time;
+      break;
+    }
+    if (isNow(time)) {
+      now = time;
+    }
+    if (!isDisabled(time) && disabled === null) {
+      disabled = time;
+    }
+    if (selected) {
+      break;
+    }
+  }
+  return selected || now || disabled;
+}
+
 // NB! Using with UTC timestamp (YYYY-MM-DD) might lead to unexpected results, for example
 // getStartOfDay(new Date('1995-01-01')) in Los Angeles returns 31 Dec 1994, but in
 // in Singapore it is 1 Jan 1995.
@@ -3698,31 +3720,16 @@ class DayCalendarTable extends PureComponent {
     } = this.props;
     return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
   };
-  isToday = (day, viewMonth, viewYear) => {
+  isToday = day => {
+    const {
+      viewMonth,
+      viewYear
+    } = this.props;
     return +getStartOfDay(new Date()) === +new Date(viewYear, viewMonth, day);
   };
-  getAutofocusDay = (weeks, viewMonth, viewYear) => {
-    let activeDay = null;
-    let today = null;
-    let lowestNonDisabledDay = null;
-    for (const week of weeks) {
-      for (const day of week) {
-        if (this.isActive(day)) {
-          activeDay = day;
-          break;
-        }
-        if (this.isToday(day, viewMonth, viewYear)) {
-          today = day;
-        }
-        if (day && !this.isDisabled(day) && lowestNonDisabledDay === null) {
-          lowestNonDisabledDay = day;
-        }
-      }
-      if (activeDay !== null) {
-        break;
-      }
-    }
-    return activeDay || today || lowestNonDisabledDay;
+  getAutofocusDay = weeks => {
+    const days = weeks.flatMap(week => week);
+    return getFocusableTime(this.isActive, this.isToday, this.isDisabled, days);
   };
   render() {
     const {
@@ -3767,7 +3774,7 @@ class DayCalendarTable extends PureComponent {
               longTitle: formatDate(new Date(viewYear, viewMonth, day), locale),
               active: this.isActive(day),
               disabled: this.isDisabled(day),
-              today: this.isToday(day, viewMonth, viewYear),
+              today: this.isToday(day),
               onClick: this.selectDay
             })
           }, dayIndex))
@@ -3887,33 +3894,26 @@ const MonthCalendarTable = ({
       item: month,
       type: "month",
       title: formatDate(new Date(viewYear, month), locale, MONTH_ONLY_FORMAT),
-      active: !!(selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear()),
+      active: isSelected(month),
       disabled: isDisabled(month),
       today: viewYear === new Date().getFullYear() && month === new Date().getMonth(),
       autofocus: autofocusMonth === month,
       onClick: onSelect
     });
   };
+  const isSelected = month => {
+    return selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear();
+  };
+  const isThisMonth = month => {
+    return viewYear === new Date().getFullYear() && month === new Date().getMonth();
+  };
   const isDisabled = month => {
     const date = new Date(viewYear, month);
     return !!(min && date < new Date(min.getFullYear(), min.getMonth()) || max && date > new Date(max.getFullYear(), max.getMonth()));
   };
-  const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
   const autofocusMonth = (() => {
-    let activeMonth = null;
-    let lowestNonDisabledMonth = null;
-    for (const month of months) {
-      if (selectedDate && month === selectedDate.getMonth()) {
-        activeMonth = month;
-      }
-      if (!isDisabled(month) && lowestNonDisabledMonth === null) {
-        lowestNonDisabledMonth = month;
-      }
-      if (activeMonth !== null) {
-        break;
-      }
-    }
-    return activeMonth || lowestNonDisabledMonth;
+    const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
+    return getFocusableTime(isSelected, isThisMonth, isDisabled, months);
   })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0",
@@ -4045,25 +4045,18 @@ const YearCalendarTable = ({
       onClick: onSelect
     });
   };
+  const isSelected = year => {
+    return selectedDate && year === selectedDate.getFullYear();
+  };
+  const isThisYear = year => {
+    return year === new Date().getFullYear();
+  };
   const isDisabled = year => {
     return !!(min && year < min.getFullYear() || max && year > max.getFullYear());
   };
-  const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
   const autofocusYear = (() => {
-    let activeYear = null;
-    let lowestNonDisabledYear = null;
-    for (const year of years) {
-      if (selectedDate && year === selectedDate.getFullYear()) {
-        activeYear = year;
-      }
-      if (!isDisabled(year) && lowestNonDisabledYear === null) {
-        lowestNonDisabledYear = year;
-      }
-      if (activeYear !== null) {
-        break;
-      }
-    }
-    return activeYear || lowestNonDisabledYear;
+    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    return getFocusableTime(isSelected, isThisYear, isDisabled, years);
   })();
   return /*#__PURE__*/jsxs("table", {
     className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
@@ -4234,6 +4227,15 @@ class DateLookup extends PureComponent {
       onFocus();
     }
   };
+  discard = () => {
+    const {
+      originalDate
+    } = this.state;
+    if (originalDate !== null) {
+      this.props.onChange(originalDate);
+    }
+    this.close();
+  };
   close = () => {
     const {
       onBlur
@@ -4284,7 +4286,7 @@ class DateLookup extends PureComponent {
         event.preventDefault();
         break;
       case KeyCodes.ESCAPE:
-        this.props.onChange(originalDate);
+        originalDate && this.props.onChange(originalDate);
         this.close();
         event.preventDefault();
         break;
@@ -4435,7 +4437,7 @@ class DateLookup extends PureComponent {
         open: open,
         className: "tw-date-lookup-menu",
         position: Position.BOTTOM,
-        onClose: this.close,
+        onClose: this.discard,
         children: this.getCalendar()
       })]
     });