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

package/cjs/components/DSDatePickerImpl.js

@@ -1,93 +1,113 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSDatePickerImpl_exports = {};
-__export(DSDatePickerImpl_exports, {
-  DSDatePickerImpl: () => DSDatePickerImpl,
-  default: () => DSDatePickerImpl
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_moment = __toESM(require("moment"));
-var import_ds_form = require("@elliemae/ds-form");
-var import_DatePickerController = require("./DatePickerController/DatePickerController");
-var import_DatePickerDropdown = require("./DatePickerDropdown");
-const FORMAT = "MMDDYYYY";
-class DSDatePickerImpl extends import_react.default.Component {
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var moment = require('moment');
+var dsForm = require('@elliemae/ds-form');
+var DatePickerController = require('./DatePickerController/DatePickerController.js');
+var DatePickerDropdown = require('./DatePickerDropdown.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+const FORMAT = 'MMDDYYYY';
+class DSdatePickerImpl extends React__default["default"].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 (0, import_moment.default)(value, FORMAT, true);
+        return moment__default["default"](value, FORMAT, true);
       }
+
       if (date) {
-        return (0, import_moment.default)(date, FORMAT, true);
+        return moment__default["default"](date, FORMAT, true);
       }
+
       if (defaultValue) {
-        return (0, import_moment.default)(defaultValue, FORMAT, true);
+        return moment__default["default"](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
@@ -95,98 +115,152 @@ class DSDatePickerImpl extends import_react.default.Component {
       this.setState(() => newState);
       onChange(dataInput, newDate);
     };
-    this.handleChange = (newDate) => {
-      if (!newDate)
-        return;
-      const { onDateChange } = this.props;
-      const momentValue = (0, import_moment.default)(newDate, FORMAT, true);
-      if (!momentValue.isValid())
-        return;
-      this.setState({ selectedDate: momentValue });
+
+    this.handleChange = newDate => {
+      if (!newDate) return;
+      const {
+        onDateChange
+      } = this.props;
+      const momentValue = moment__default["default"](newDate, FORMAT, true);
+      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;
-        if ((0, import_moment.default)(selectedDate, FORMAT, true).isValid()) {
+        const {
+          onBlur,
+          autoClear
+        } = this.props;
+        const {
+          dataInput,
+          selectedDate
+        } = this.state;
+
+        if (moment__default["default"](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: import_react.default.createRef(),
-      dataInput: "",
+      pickerRef: /*#__PURE__*/React__default["default"].createRef(),
+      dataInput: '',
       selectedDate: null,
       inputFocused: false
     };
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { dataInput: prevVal, selectedDate: prevDate } = prevState || {};
-    const { value: nextVal, date: nextDate } = nextProps;
-    const isPrevValMoment = prevVal instanceof import_moment.default;
-    const isPrevDateMoment = prevDate instanceof import_moment.default;
-    const prevValAsString = isPrevValMoment ? prevVal.format(FORMAT) : prevVal;
+    const {
+      dataInput: prevVal,
+      selectedDate: prevDate
+    } = prevState || {};
+    const {
+      value: nextVal,
+      date: nextDate
+    } = nextProps;
+    const isPrevValMoment = prevVal instanceof moment__default["default"];
+    const isPrevDateMoment = prevDate instanceof moment__default["default"];
+    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 import_moment.default;
-    const isNextDateMoment = nextDate instanceof import_moment.default;
+    const isNextValMoment = nextVal instanceof moment__default["default"];
+    const isNextDateMoment = nextDate instanceof moment__default["default"];
     const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
-    const nextValAsMoment = isNextValMoment ? nextVal : (0, import_moment.default)(nextVal);
+    const nextValAsMoment = isNextValMoment ? nextVal : moment__default["default"](nextVal);
     const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
-    const nextDateAsMoment = isNextDateMoment ? nextDate : (0, import_moment.default)(nextDate);
+    const nextDateAsMoment = isNextDateMoment ? nextDate : moment__default["default"](nextDate);
     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,
@@ -214,61 +288,67 @@ class DSDatePickerImpl extends import_react.default.Component {
     const safedate = this.getSafeValue();
     const safeInputValue = this.getSafeInputValue();
     const hasSelectedDate = !!safedate;
-    return /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSInputGroup, {
-      rightAddon: /* @__PURE__ */ import_react.default.createElement(import_DatePickerDropdown.DatePickerDropdown, {
+    return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+      rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
         pickerRef: this.state.pickerRef,
-        disabled,
+        disabled: disabled,
         isOpen: inputFocused,
-        menu: /* @__PURE__ */ import_react.default.createElement("div", {
-          style: { minHeight: "310px", zIndex: 1 },
-          className: hasSelectedDate ? "has-selected-date" : "without-selected-date",
+        menu: /*#__PURE__*/_jsx__default["default"]("div", {
+          style: {
+            minHeight: '310px',
+            zIndex: 1
+          },
+          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
           "data-testid": "date-picker-portal-wrapper"
-        }, /* @__PURE__ */ import_react.default.createElement(import_DatePickerController.DSDatePickerController, {
+        }, void 0, /*#__PURE__*/_jsx__default["default"](DatePickerController, {
           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__ */ import_react.default.createElement(import_ds_form.DSDateInputV2, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.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
     }));
   }
+
 }
-module.exports = __toCommonJS(DSDatePickerImpl_exports);
-//# sourceMappingURL=DSDatePickerImpl.js.map
+
+module.exports = DSdatePickerImpl;