@elliemae/ds-date-picker 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/components/DSDatePickerImpl.js

@@ -1,61 +1,105 @@
-import * as React from "react";
-import React2 from "react";
-import moment from "moment";
-import { DSInputGroup, DSDateInputV2 } from "@elliemae/ds-form";
-import { DSDatePickerController } from "./DatePickerController/DatePickerController";
-import { DatePickerDropdown } from "./DatePickerDropdown";
-const FORMAT = "MMDDYYYY";
-class DSDatePickerImpl extends React2.Component {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React from 'react';
+import moment from 'moment';
+import { DSInputGroup, DSDateInputV2 } from '@elliemae/ds-form';
+import DSDatePickerController from './DatePickerController/DatePickerController.js';
+import DatePickerDropdown from './DatePickerDropdown.js';
+
+const FORMAT = 'MMDDYYYY';
+class DSdatePickerImpl extends React.Component {
   constructor(props) {
     super(props);
+
     this.onClickPicker = () => {
-      this.setState({ inputFocused: true });
+      this.setState({
+        inputFocused: true
+      });
     };
+
     this.getSafeValue = () => {
-      const { value, date, defaultValue } = this.props;
-      const { selectedDate } = this.state;
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
+
       if (value) {
         return moment(value, FORMAT, true);
       }
+
       if (date) {
         return moment(date, FORMAT, true);
       }
+
       if (defaultValue) {
         return moment(defaultValue, FORMAT, true);
       }
+
       if (selectedDate) {
         return selectedDate;
       }
+
       return null;
     };
+
     this.getSafeInputValue = () => {
       const safeValue = this.getSafeValue();
+
       if (safeValue && safeValue.isValid()) {
         return safeValue.format(FORMAT);
       }
-      const { dataInput } = this.state;
+
+      const {
+        dataInput
+      } = this.state;
       return dataInput;
     };
+
     this.isControlled = () => {
-      const { value, date } = this.props;
+      const {
+        value,
+        date
+      } = this.props;
       return Boolean(value) || Boolean(date);
     };
+
     this.handleDateChange = (date, event) => {
-      const { readOnly, onDateChange, keepOpenOnDateSelect, onChange, onBlur } = this.props;
+      const {
+        readOnly,
+        onDateChange,
+        keepOpenOnDateSelect,
+        onChange,
+        onBlur
+      } = this.props;
+
       if (!readOnly) {
         if (!this.isControlled()) {
-          this.setState({ dataInput: date.format(FORMAT), selectedDate: date });
+          this.setState({
+            dataInput: date.format(FORMAT),
+            selectedDate: date
+          });
         }
+
         onChange(date.format(FORMAT), date);
         onDateChange(date);
-        if (!keepOpenOnDateSelect || event.key === "Enter") {
-          this.setState({ inputFocused: false });
+
+        if (!keepOpenOnDateSelect || event.key === 'Enter') {
+          this.setState({
+            inputFocused: false
+          });
           onBlur(date.format(FORMAT), date);
         }
       }
     };
+
     this.handleInputChange = (dataInput, newDate) => {
-      const { onChange } = this.props;
+      const {
+        onChange
+      } = this.props;
       const newState = {
         dataInput,
         selectedDate: newDate
@@ -63,71 +107,117 @@ class DSDatePickerImpl extends React2.Component {
       this.setState(() => newState);
       onChange(dataInput, newDate);
     };
-    this.handleChange = (newDate) => {
-      if (!newDate)
-        return;
-      const { onDateChange } = this.props;
+
+    this.handleChange = newDate => {
+      if (!newDate) return;
+      const {
+        onDateChange
+      } = this.props;
       const momentValue = moment(newDate, FORMAT, true);
-      if (!momentValue.isValid())
-        return;
-      this.setState({ selectedDate: momentValue });
+      if (!momentValue.isValid()) return;
+      this.setState({
+        selectedDate: momentValue
+      });
       onDateChange(momentValue);
     };
-    this.handleFocus = ({ focused }) => {
-      this.setState({ inputFocused: focused });
+
+    this.handleFocus = _ref => {
+      let {
+        focused
+      } = _ref;
+      this.setState({
+        inputFocused: focused
+      });
     };
+
     this.handleCalendarClose = () => {
-      const { onClose } = this.props;
-      this.setState({ inputFocused: false });
+      const {
+        onClose
+      } = this.props;
+      this.setState({
+        inputFocused: false
+      });
       this.handleOnBlur();
       onClose();
     };
+
     this.handleClickEscape = () => {
-      const { onClose } = this.props;
-      this.setState({ inputFocused: false });
+      const {
+        onClose
+      } = this.props;
+      this.setState({
+        inputFocused: false
+      });
       this.handleOnBlur();
       onClose();
     };
+
     this.handleOnBlur = () => {
       setTimeout(() => {
-        const { onBlur, autoClear } = this.props;
-        const { dataInput, selectedDate } = this.state;
+        const {
+          onBlur,
+          autoClear
+        } = this.props;
+        const {
+          dataInput,
+          selectedDate
+        } = this.state;
+
         if (moment(selectedDate, FORMAT, true).isValid()) {
           onBlur(dataInput, selectedDate);
         } else {
           if (autoClear) {
-            this.setState({ dataInput: void 0 });
+            this.setState({
+              dataInput: undefined
+            });
           }
+
           onBlur(dataInput, null);
         }
       });
     };
-    this.handleInputFocus = (dataInput) => {
-      const { onFocus } = this.props;
+
+    this.handleInputFocus = dataInput => {
+      const {
+        onFocus
+      } = this.props;
       onFocus(dataInput);
     };
+
     this.state = {
-      pickerRef: React2.createRef(),
-      dataInput: "",
+      pickerRef: /*#__PURE__*/React.createRef(),
+      dataInput: '',
       selectedDate: null,
       inputFocused: false
     };
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { dataInput: prevVal, selectedDate: prevDate } = prevState || {};
-    const { value: nextVal, date: nextDate } = nextProps;
+    const {
+      dataInput: prevVal,
+      selectedDate: prevDate
+    } = prevState || {};
+    const {
+      value: nextVal,
+      date: nextDate
+    } = nextProps;
     const isPrevValMoment = prevVal instanceof moment;
     const isPrevDateMoment = prevDate instanceof moment;
-    const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal;
+    const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal; // if users wants to clear, we use '==' to catch both undefined AND null
+
     if (nextVal == null && nextDate == null) {
       return {
-        dataInput: "",
+        dataInput: '',
         selectedDate: null
       };
-    }
-    if (prevValAsString?.length < 8) {
+    } // when val is an incomplete state, we don't want to mess with the state
+    //  it's incomplete when length is not the full mmddyyyy (length === 8)
+
+
+    if ((prevValAsString === null || prevValAsString === void 0 ? void 0 : prevValAsString.length) < 8) {
       return null;
     }
+
     const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
     const isNextValMoment = nextVal instanceof moment;
     const isNextDateMoment = nextDate instanceof moment;
@@ -138,23 +228,31 @@ class DSDatePickerImpl extends React2.Component {
     const hasValChanged = nextValAsString !== prevValAsString;
     const hasDateChanged = nextDateAsString !== prevDateAsString;
     const newState = {};
-    let skipStateChange = true;
+    let skipStateChange = true; // value has priority over date, if both date and value change we take date
+    // as such, order of condition is meaningful
+
     if (hasDateChanged) {
       skipStateChange = false;
       newState.dataInput = nextDateAsString;
       newState.selectedDate = nextDateAsMoment;
     }
+
     if (hasValChanged) {
       skipStateChange = false;
       newState.dataInput = nextValAsString;
       newState.selectedDate = nextValAsMoment;
     }
-    if (skipStateChange)
-      return null;
+
+    if (skipStateChange) return null;
     return newState;
   }
+
   render() {
-    const { inputFocused } = this.state;
+    var _this = this;
+
+    const {
+      inputFocused
+    } = this.state;
     const {
       disabled,
       numberOfMonths,
@@ -182,64 +280,67 @@ class DSDatePickerImpl extends React2.Component {
     const safedate = this.getSafeValue();
     const safeInputValue = this.getSafeInputValue();
     const hasSelectedDate = !!safedate;
-    return /* @__PURE__ */ React2.createElement(DSInputGroup, {
-      rightAddon: /* @__PURE__ */ React2.createElement(DatePickerDropdown, {
+    return /*#__PURE__*/_jsx(DSInputGroup, {
+      rightAddon: /*#__PURE__*/_jsx(DatePickerDropdown, {
         pickerRef: this.state.pickerRef,
-        disabled,
+        disabled: disabled,
         isOpen: inputFocused,
-        menu: /* @__PURE__ */ React2.createElement("div", {
-          style: { minHeight: "310px", zIndex: 1 },
-          className: hasSelectedDate ? "has-selected-date" : "without-selected-date",
+        menu: /*#__PURE__*/_jsx("div", {
+          style: {
+            minHeight: '310px',
+            zIndex: 1
+          },
+          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
           "data-testid": "date-picker-portal-wrapper"
-        }, /* @__PURE__ */ React2.createElement(DSDatePickerController, {
+        }, void 0, /*#__PURE__*/_jsx(DSDatePickerController, {
           date: safedate,
-          displayFormatDay,
-          enableOutsideDays,
-          firstDayOfWeek,
-          hideKeyboardShortcutsPanel,
-          isDayBlocked,
-          isDayHighlighted,
-          isOutsideRange,
-          keepOpenOnDateSelect,
-          numberOfMonths,
+          displayFormatDay: displayFormatDay,
+          enableOutsideDays: enableOutsideDays,
+          firstDayOfWeek: firstDayOfWeek,
+          hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+          isDayBlocked: isDayBlocked,
+          isDayHighlighted: isDayHighlighted,
+          isOutsideRange: isOutsideRange,
+          keepOpenOnDateSelect: keepOpenOnDateSelect,
+          numberOfMonths: numberOfMonths,
           onClickEscape: this.handleClickEscape,
-          onClose: (...args) => {
-            if (this.state.pickerRef.current)
-              this.state.pickerRef.current.focus();
-            onClose(...args);
-            this.setState({ inputFocused: false });
+          onClose: function () {
+            if (_this.state.pickerRef.current) _this.state.pickerRef.current.focus();
+            onClose(...arguments);
+
+            _this.setState({
+              inputFocused: false
+            });
           },
           onDateChange: this.handleDateChange,
           onFocusChange: this.handleFocus,
-          onNextMonthClick,
+          onNextMonthClick: onNextMonthClick,
           onOutsideClick: this.handleCalendarClose,
-          onPrevMonthClick,
-          phrases,
-          transitionDuration,
-          calendarProps,
-          focusCurrentDate
+          onPrevMonthClick: onPrevMonthClick,
+          phrases: phrases,
+          transitionDuration: transitionDuration,
+          calendarProps: calendarProps,
+          focusCurrentDate: focusCurrentDate
         })),
         onClick: this.onClickPicker,
-        readOnly,
-        zIndex,
-        pickerProps
+        readOnly: readOnly,
+        zIndex: zIndex,
+        pickerProps: pickerProps
       })
-    }, /* @__PURE__ */ React2.createElement(DSDateInputV2, {
+    }, void 0, /*#__PURE__*/_jsx(DSDateInputV2, {
       "data-testid": "datepicker-input",
-      "aria-label": placeholder || "Date Picker Input",
-      disabled,
+      "aria-label": placeholder || 'Date Picker Input',
+      disabled: disabled,
       onBlur: this.handleOnBlur,
       onChange: this.handleInputChange,
       onDateChange: this.handleChange,
       onFocus: this.handleInputFocus,
-      placeholder,
-      tabIndex,
+      placeholder: placeholder,
+      tabIndex: tabIndex,
       value: safeInputValue
     }));
   }
+
 }
-export {
-  DSDatePickerImpl,
-  DSDatePickerImpl as default
-};
-//# sourceMappingURL=DSDatePickerImpl.js.map
+
+export { DSdatePickerImpl as default };