@instructure/ui-date-time-input 8.25.1-snapshot-7 → 8.25.1-snapshot-10

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.25.1-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
+## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
 
 **Note:** Version bump only for package @instructure/ui-date-time-input
 

package/es/DateTimeInput/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _class2, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
+var _dec, _class, _IconArrowOpenStartSo, _IconArrowOpenEndSoli;
 
 /*
  * The MIT License (MIT)
@@ -42,169 +42,33 @@ category: components
 @tsProps
 **/
 
-let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeInput extends Component {
+let DateTimeInput = (_dec = testable(), _dec(_class = class DateTimeInput extends Component {
+  static displayName = "DateTimeInput";
   // extra verbose localized date and time
-  // This is used by Tooltip for positioning
+  static DEFAULT_MESSAGE_FORMAT = 'LLLL';
+  static propTypes = propTypes;
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    layout: 'inline',
+    colSpacing: 'medium',
+    rowSpacing: 'small',
+    timeStep: 30,
+    messageFormat: DateTimeInput.DEFAULT_MESSAGE_FORMAT,
+    isRequired: false,
+    dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
+
+  };
+  static contextType = ApplyLocaleContext;
+  ref = null; // This is used by Tooltip for positioning
+
+  handleRef = el => {
+    this.ref = el;
+  };
+
   constructor(props) {
     super(props); // State needs to be calculated because render could be called before
     // componentDidMount()
 
-    this.context = void 0;
-    this.ref = null;
-
-    this.handleRef = el => {
-      this.ref = el;
-    };
-
-    this.handleDateTextChange = (_event, date) => {
-      const dateParsed = this.tryParseDate(date.value);
-      this.setState({
-        dateInputText: date.value,
-        dateInputTextChanged: true,
-        calendarSelectedDate: dateParsed ? dateParsed : void 0,
-        renderedDate: dateParsed ? dateParsed.clone() : DateTime.now(this.locale(), this.timezone())
-      });
-    };
-
-    this.handleDayClick = (event, _ref) => {
-      let date = _ref.date;
-      const dateParsed = DateTime.parse(date, this.locale(), this.timezone());
-      this.updateStateBasedOnDateInput(dateParsed, event);
-    };
-
-    this.handleHideCalendar = event => {
-      // update state based on the DateInput's text value
-      if (this.state.dateInputTextChanged || event.key === 'Enter') {
-        const dateParsed = this.tryParseDate(this.state.dateInputText);
-        this.updateStateBasedOnDateInput(dateParsed, event);
-      } else {
-        // user clicked outside or tabbed away or pressed esc, reset text
-        this.setState({
-          dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
-          calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
-        });
-      }
-
-      this.setState({
-        isShowingCalendar: false,
-        dateInputTextChanged: false
-      });
-    };
-
-    this.handleTimeChange = (event, option) => {
-      let newValue;
-
-      if (this.state.iso) {
-        newValue = option.value;
-      } else {
-        // if no date is set just return the input text, it will error
-        newValue = option.inputText;
-      }
-
-      const newState = this.recalculateState(newValue, true, false);
-      this.changeStateIfNeeded(newState, event);
-      this.setState({
-        timeSelectValue: option.value
-      });
-    };
-
-    this.changeStateIfNeeded = (newState, e) => {
-      this.setState({
-        message: newState.message
-      });
-
-      if (!newState.iso && !this.state.iso) {
-        return;
-      }
-
-      if (!this.state.iso || !newState.iso || !this.state.iso.isSame(newState.iso)) {
-        this.setState(newState);
-
-        if (this.props.onChange) {
-          var _newState$iso;
-
-          this.props.onChange(e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
-        }
-      }
-    };
-
-    this.handleBlur = e => {
-      // when TABbing from the DateInput to TimeInput or visa-versa, the blur
-      // happens on the target before the relatedTarget gets focus.
-      // The timeout gives it a moment for that to happen
-      if (typeof this.props.onBlur === 'function') {
-        window.setTimeout(() => {
-          var _this$props$onBlur, _this$props;
-
-          (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, e);
-        }, 0);
-      }
-    };
-
-    this.handleShowCalendar = _event => {
-      this.setState({
-        isShowingCalendar: true
-      });
-    };
-
-    this.handleSelectNextDay = _event => {
-      let toAlter;
-
-      if (this.state.calendarSelectedDate) {
-        toAlter = this.state.calendarSelectedDate.clone();
-      } else if (this.state.iso) {
-        toAlter = this.state.iso.clone();
-      } else {
-        toAlter = DateTime.now(this.locale(), this.timezone());
-      }
-
-      toAlter.add({
-        days: 1
-      });
-      this.setState({
-        calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
-      });
-    };
-
-    this.handleSelectPrevDay = _event => {
-      let toAlter;
-
-      if (this.state.calendarSelectedDate) {
-        toAlter = this.state.calendarSelectedDate.clone();
-      } else if (this.state.iso) {
-        toAlter = this.state.iso.clone();
-      } else {
-        toAlter = DateTime.now(this.locale(), this.timezone());
-      }
-
-      toAlter.subtract({
-        days: 1
-      });
-      this.setState({
-        calendarSelectedDate: toAlter,
-        renderedDate: toAlter.clone(),
-        dateInputText: toAlter.format(this.dateFormat)
-      });
-    };
-
-    this.handleRenderNextMonth = _event => {
-      this.setState({
-        renderedDate: this.state.renderedDate.clone().add({
-          months: 1
-        })
-      });
-    };
-
-    this.handleRenderPrevMonth = _event => {
-      this.setState({
-        renderedDate: this.state.renderedDate.clone().subtract({
-          months: 1
-        })
-      });
-    };
-
     this.state = this.recalculateState(props.value || props.defaultValue);
   }
 
@@ -348,12 +212,46 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
   } // Called when the user enters text into dateInput
 
 
+  handleDateTextChange = (_event, date) => {
+    const dateParsed = this.tryParseDate(date.value);
+    this.setState({
+      dateInputText: date.value,
+      dateInputTextChanged: true,
+      calendarSelectedDate: dateParsed ? dateParsed : void 0,
+      renderedDate: dateParsed ? dateParsed.clone() : DateTime.now(this.locale(), this.timezone())
+    });
+  };
+
   tryParseDate(val) {
     const parsed = DateTime.parse(val, this.locale(), this.timezone());
     return parsed.isValid() ? parsed : null;
   } // date is returned es a ISO string, like 2021-09-14T22:00:00.000Z
 
 
+  handleDayClick = (event, _ref) => {
+    let date = _ref.date;
+    const dateParsed = DateTime.parse(date, this.locale(), this.timezone());
+    this.updateStateBasedOnDateInput(dateParsed, event);
+  };
+  handleHideCalendar = event => {
+    // update state based on the DateInput's text value
+    if (this.state.dateInputTextChanged || event.key === 'Enter') {
+      const dateParsed = this.tryParseDate(this.state.dateInputText);
+      this.updateStateBasedOnDateInput(dateParsed, event);
+    } else {
+      // user clicked outside or tabbed away or pressed esc, reset text
+      this.setState({
+        dateInputText: this.state.iso ? this.state.iso.format(this.dateFormat) : '',
+        calendarSelectedDate: this.state.iso ? this.state.iso.clone() : void 0
+      });
+    }
+
+    this.setState({
+      isShowingCalendar: false,
+      dateInputTextChanged: false
+    });
+  };
+
   updateStateBasedOnDateInput(dateParsed, event) {
     let newState;
 
@@ -375,6 +273,113 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     this.changeStateIfNeeded(newState, event);
   }
 
+  handleTimeChange = (event, option) => {
+    let newValue;
+
+    if (this.state.iso) {
+      newValue = option.value;
+    } else {
+      // if no date is set just return the input text, it will error
+      newValue = option.inputText;
+    }
+
+    const newState = this.recalculateState(newValue, true, false);
+    this.changeStateIfNeeded(newState, event);
+    this.setState({
+      timeSelectValue: option.value
+    });
+  };
+  changeStateIfNeeded = (newState, e) => {
+    this.setState({
+      message: newState.message
+    });
+
+    if (!newState.iso && !this.state.iso) {
+      return;
+    }
+
+    if (!this.state.iso || !newState.iso || !this.state.iso.isSame(newState.iso)) {
+      this.setState(newState);
+
+      if (this.props.onChange) {
+        var _newState$iso;
+
+        this.props.onChange(e, (_newState$iso = newState.iso) === null || _newState$iso === void 0 ? void 0 : _newState$iso.toISOString());
+      }
+    }
+  };
+  handleBlur = e => {
+    // when TABbing from the DateInput to TimeInput or visa-versa, the blur
+    // happens on the target before the relatedTarget gets focus.
+    // The timeout gives it a moment for that to happen
+    if (typeof this.props.onBlur === 'function') {
+      window.setTimeout(() => {
+        var _this$props$onBlur, _this$props;
+
+        (_this$props$onBlur = (_this$props = this.props).onBlur) === null || _this$props$onBlur === void 0 ? void 0 : _this$props$onBlur.call(_this$props, e);
+      }, 0);
+    }
+  };
+  handleShowCalendar = _event => {
+    this.setState({
+      isShowingCalendar: true
+    });
+  };
+  handleSelectNextDay = _event => {
+    let toAlter;
+
+    if (this.state.calendarSelectedDate) {
+      toAlter = this.state.calendarSelectedDate.clone();
+    } else if (this.state.iso) {
+      toAlter = this.state.iso.clone();
+    } else {
+      toAlter = DateTime.now(this.locale(), this.timezone());
+    }
+
+    toAlter.add({
+      days: 1
+    });
+    this.setState({
+      calendarSelectedDate: toAlter,
+      renderedDate: toAlter.clone(),
+      dateInputText: toAlter.format(this.dateFormat)
+    });
+  };
+  handleSelectPrevDay = _event => {
+    let toAlter;
+
+    if (this.state.calendarSelectedDate) {
+      toAlter = this.state.calendarSelectedDate.clone();
+    } else if (this.state.iso) {
+      toAlter = this.state.iso.clone();
+    } else {
+      toAlter = DateTime.now(this.locale(), this.timezone());
+    }
+
+    toAlter.subtract({
+      days: 1
+    });
+    this.setState({
+      calendarSelectedDate: toAlter,
+      renderedDate: toAlter.clone(),
+      dateInputText: toAlter.format(this.dateFormat)
+    });
+  };
+  handleRenderNextMonth = _event => {
+    this.setState({
+      renderedDate: this.state.renderedDate.clone().add({
+        months: 1
+      })
+    });
+  };
+  handleRenderPrevMonth = _event => {
+    this.setState({
+      renderedDate: this.state.renderedDate.clone().subtract({
+        months: 1
+      })
+    });
+  };
+
   renderDays() {
     if (!this.state.isShowingCalendar) {
       // this is an expensive function, only execute if the calendar is open
@@ -526,15 +531,6 @@ let DateTimeInput = (_dec = testable(), _dec(_class = (_class2 = class DateTimeI
     }));
   }
 
-}, _class2.displayName = "DateTimeInput", _class2.DEFAULT_MESSAGE_FORMAT = 'LLLL', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
-  layout: 'inline',
-  colSpacing: 'medium',
-  rowSpacing: 'small',
-  timeStep: 30,
-  messageFormat: _class2.DEFAULT_MESSAGE_FORMAT,
-  isRequired: false,
-  dateFormat: 'LL' // Localized date with full month, e.g. "August 6, 2014"
-
-}, _class2.contextType = ApplyLocaleContext, _class2)) || _class);
+}) || _class);
 export default DateTimeInput;
 export { DateTimeInput };