@elliemae/ds-date-picker 1.61.0 → 2.0.0-alpha.12

package/cjs/components/DSDatePickerImpl.js

@@ -1,86 +1,50 @@
 'use strict';
 
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+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 components_DatePickerController_DatePickerController = require('./DatePickerController/DatePickerController.js');
-var components_DatePickerDropdown = require('./DatePickerDropdown.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/toArray');
-require('@babel/runtime/helpers/slicedToArray');
-require('lodash');
-require('prop-types');
-require('react-dates/initialize');
-require('react-dates');
-require('@elliemae/ds-classnames');
-require('@elliemae/ds-icons');
-require('../defaultPhrases.js');
-require('./DatePickerRenderMonth/DatePickerRenderMonth.js');
-require('@elliemae/ds-grid');
-require('./DatePickerNavigation/DatePickerNavigation.js');
-require('@elliemae/ds-icon');
-require('../prop-types-fcbbf657.js');
-require('./DatePickerDay/DatePickerDay.js');
-require('@elliemae/ds-popper');
-require('./DatePickerPicker/DatePickerPicker.js');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@elliemae/ds-button');
+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 _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
+const FORMAT = 'MMDDYYYY';
+class DSdatePickerImpl extends React__default["default"].Component {
+  constructor(props) {
+    super(props);
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var FORMAT = 'MMDDYYYY';
-
-var DSdatePickerImpl = /*#__PURE__*/function (_React$Component) {
-  _inherits__default['default'](DSdatePickerImpl, _React$Component);
-
-  var _super = _createSuper(DSdatePickerImpl);
-
-  function DSdatePickerImpl(props) {
-    var _this;
-
-    _classCallCheck__default['default'](this, DSdatePickerImpl);
-
-    _this = _super.call(this, props);
-
-    _this.onClickPicker = function () {
-      _this.setState({
+    this.onClickPicker = () => {
+      this.setState({
         inputFocused: true
       });
     };
 
-    _this.getSafeValue = function () {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          date = _this$props.date,
-          defaultValue = _this$props.defaultValue;
-      var selectedDate = _this.state.selectedDate;
+    this.getSafeValue = () => {
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
 
       if (value) {
-        return moment__default['default'](value, FORMAT, true);
+        return moment__default["default"](value, FORMAT, true);
       }
 
       if (date) {
-        return moment__default['default'](date, FORMAT, true);
+        return moment__default["default"](date, FORMAT, true);
       }
 
       if (defaultValue) {
-        return moment__default['default'](defaultValue, FORMAT, true);
+        return moment__default["default"](defaultValue, FORMAT, true);
       }
 
       if (selectedDate) {
@@ -90,35 +54,39 @@ var DSdatePickerImpl = /*#__PURE__*/function (_React$Component) {
       return null;
     };
 
-    _this.getSafeInputValue = function () {
-      var safeValue = _this.getSafeValue();
+    this.getSafeInputValue = () => {
+      const safeValue = this.getSafeValue();
 
       if (safeValue && safeValue.isValid()) {
         return safeValue.format(FORMAT);
       }
 
-      var dataInput = _this.state.dataInput;
+      const {
+        dataInput
+      } = this.state;
       return dataInput;
     };
 
-    _this.isControlled = function () {
-      var _this$props2 = _this.props,
-          value = _this$props2.value,
-          date = _this$props2.date;
+    this.isControlled = () => {
+      const {
+        value,
+        date
+      } = this.props;
       return Boolean(value) || Boolean(date);
     };
 
-    _this.handleDateChange = function (date, event) {
-      var _this$props3 = _this.props,
-          readOnly = _this$props3.readOnly,
-          onDateChange = _this$props3.onDateChange,
-          keepOpenOnDateSelect = _this$props3.keepOpenOnDateSelect,
-          onChange = _this$props3.onChange,
-          onBlur = _this$props3.onBlur;
+    this.handleDateChange = (date, event) => {
+      const {
+        readOnly,
+        onDateChange,
+        keepOpenOnDateSelect,
+        onChange,
+        onBlur
+      } = this.props;
 
       if (!readOnly) {
-        if (!_this.isControlled()) {
-          _this.setState({
+        if (!this.isControlled()) {
+          this.setState({
             dataInput: date.format(FORMAT),
             selectedDate: date
           });
@@ -128,88 +96,86 @@ var DSdatePickerImpl = /*#__PURE__*/function (_React$Component) {
         onDateChange(date);
 
         if (!keepOpenOnDateSelect || event.key === 'Enter') {
-          _this.setState({
+          this.setState({
             inputFocused: false
           });
-
           onBlur(date.format(FORMAT), date);
         }
       }
     };
 
-    _this.handleInputChange = function (dataInput, newDate) {
-      var onChange = _this.props.onChange;
-      var newState = {
-        dataInput: dataInput,
+    this.handleInputChange = (dataInput, newDate) => {
+      const {
+        onChange
+      } = this.props;
+      const newState = {
+        dataInput,
         selectedDate: newDate
       };
-
-      _this.setState(function () {
-        return newState;
-      });
-
+      this.setState(() => newState);
       onChange(dataInput, newDate);
     };
 
-    _this.handleChange = function (newDate) {
+    this.handleChange = newDate => {
       if (!newDate) return;
-      var onDateChange = _this.props.onDateChange;
-      var momentValue = moment__default['default'](newDate, FORMAT, true);
+      const {
+        onDateChange
+      } = this.props;
+      const momentValue = moment__default["default"](newDate, FORMAT, true);
       if (!momentValue.isValid()) return;
-
-      _this.setState({
+      this.setState({
         selectedDate: momentValue
       });
-
       onDateChange(momentValue);
     };
 
-    _this.handleFocus = function (_ref) {
-      var focused = _ref.focused;
-
-      _this.setState({
+    this.handleFocus = _ref => {
+      let {
+        focused
+      } = _ref;
+      this.setState({
         inputFocused: focused
       });
     };
 
-    _this.handleCalendarClose = function () {
-      var onClose = _this.props.onClose;
-
-      _this.setState({
+    this.handleCalendarClose = () => {
+      const {
+        onClose
+      } = this.props;
+      this.setState({
         inputFocused: false
       });
-
-      _this.handleOnBlur();
-
+      this.handleOnBlur();
       onClose();
     };
 
-    _this.handleClickEscape = function () {
-      var onClose = _this.props.onClose;
-
-      _this.setState({
+    this.handleClickEscape = () => {
+      const {
+        onClose
+      } = this.props;
+      this.setState({
         inputFocused: false
       });
-
-      _this.handleOnBlur();
-
+      this.handleOnBlur();
       onClose();
     };
 
-    _this.handleOnBlur = function () {
-      setTimeout(function () {
-        var _this$props4 = _this.props,
-            onBlur = _this$props4.onBlur,
-            autoClear = _this$props4.autoClear;
-        var _this$state = _this.state,
-            dataInput = _this$state.dataInput,
-            selectedDate = _this$state.selectedDate;
-
-        if (moment__default['default'](selectedDate, FORMAT, true).isValid()) {
+    this.handleOnBlur = () => {
+      setTimeout(() => {
+        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({
+            this.setState({
               dataInput: undefined
             });
           }
@@ -219,171 +185,170 @@ var DSdatePickerImpl = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.handleInputFocus = function (dataInput) {
-      var onFocus = _this.props.onFocus;
+    this.handleInputFocus = dataInput => {
+      const {
+        onFocus
+      } = this.props;
       onFocus(dataInput);
     };
 
-    _this.state = {
-      pickerRef: /*#__PURE__*/React__default['default'].createRef(),
+    this.state = {
+      pickerRef: /*#__PURE__*/React__default["default"].createRef(),
       dataInput: '',
       selectedDate: null,
       inputFocused: false
     };
-    return _this;
   }
 
-  _createClass__default['default'](DSdatePickerImpl, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var inputFocused = this.state.inputFocused;
-      var _this$props5 = this.props,
-          disabled = _this$props5.disabled,
-          numberOfMonths = _this$props5.numberOfMonths,
-          readOnly = _this$props5.readOnly,
-          enableOutsideDays = _this$props5.enableOutsideDays,
-          transitionDuration = _this$props5.transitionDuration,
-          firstDayOfWeek = _this$props5.firstDayOfWeek,
-          keepOpenOnDateSelect = _this$props5.keepOpenOnDateSelect,
-          hideKeyboardShortcutsPanel = _this$props5.hideKeyboardShortcutsPanel,
-          onPrevMonthClick = _this$props5.onPrevMonthClick,
-          onNextMonthClick = _this$props5.onNextMonthClick,
-          _onClose = _this$props5.onClose,
-          phrases = _this$props5.phrases,
-          placeholder = _this$props5.placeholder,
-          displayFormatDay = _this$props5.displayFormatDay,
-          isDayBlocked = _this$props5.isDayBlocked,
-          isOutsideRange = _this$props5.isOutsideRange,
-          isDayHighlighted = _this$props5.isDayHighlighted,
-          tabIndex = _this$props5.tabIndex,
-          zIndex = _this$props5.zIndex,
-          pickerProps = _this$props5.pickerProps,
-          calendarProps = _this$props5.calendarProps,
-          focusCurrentDate = _this$props5.focusCurrentDate;
-      var safedate = this.getSafeValue();
-      var safeInputValue = this.getSafeInputValue();
-      var hasSelectedDate = !!safedate;
-      return /*#__PURE__*/React__default['default'].createElement(dsForm.DSInputGroup, {
-        rightAddon: /*#__PURE__*/React__default['default'].createElement(components_DatePickerDropdown, {
-          pickerRef: this.state.pickerRef,
-          disabled: disabled,
-          isOpen: inputFocused,
-          menu: /*#__PURE__*/React__default['default'].createElement("div", {
-            style: {
-              minHeight: '310px',
-              zIndex: 1
-            },
-            className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
-            "data-testid": "date-picker-portal-wrapper"
-          }, /*#__PURE__*/React__default['default'].createElement(components_DatePickerController_DatePickerController, {
-            date: safedate,
-            displayFormatDay: displayFormatDay,
-            enableOutsideDays: enableOutsideDays,
-            firstDayOfWeek: firstDayOfWeek,
-            hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
-            isDayBlocked: isDayBlocked,
-            isDayHighlighted: isDayHighlighted,
-            isOutsideRange: isOutsideRange,
-            keepOpenOnDateSelect: keepOpenOnDateSelect,
-            numberOfMonths: numberOfMonths,
-            onClickEscape: this.handleClickEscape,
-            onClose: function onClose() {
-              if (_this2.state.pickerRef.current) _this2.state.pickerRef.current.focus();
-
-              _onClose.apply(void 0, arguments);
-
-              _this2.setState({
-                inputFocused: false
-              });
-            },
-            onDateChange: this.handleDateChange,
-            onFocusChange: this.handleFocus,
-            onNextMonthClick: onNextMonthClick,
-            onOutsideClick: this.handleCalendarClose,
-            onPrevMonthClick: onPrevMonthClick,
-            phrases: phrases,
-            transitionDuration: transitionDuration,
-            calendarProps: calendarProps,
-            focusCurrentDate: focusCurrentDate
-          })),
-          onClick: this.onClickPicker,
-          readOnly: readOnly,
-          zIndex: zIndex,
-          pickerProps: pickerProps
-        })
-      }, /*#__PURE__*/React__default['default'].createElement(dsForm.DSDateInputV2, {
-        "data-testid": "datepicker-input",
-        "aria-label": placeholder || 'Date Picker Input',
-        disabled: disabled,
-        onBlur: this.handleOnBlur,
-        onChange: this.handleInputChange,
-        onDateChange: this.handleChange,
-        onFocus: this.handleInputFocus,
-        placeholder: placeholder,
-        tabIndex: tabIndex,
-        value: safeInputValue
-      }));
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var _ref2 = prevState || {},
-          prevVal = _ref2.dataInput,
-          prevDate = _ref2.selectedDate;
-
-      var nextVal = nextProps.value,
-          nextDate = nextProps.date;
-      var isPrevValMoment = prevVal instanceof moment__default['default'];
-      var isPrevDateMoment = prevDate instanceof moment__default['default'];
-      var 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: '',
-          selectedDate: null
-        };
-      } // 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;
-      }
+  static getDerivedStateFromProps(nextProps, prevState) {
+    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: '',
+        selectedDate: null
+      };
+    } // 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)
 
-      var prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
-      var isNextValMoment = nextVal instanceof moment__default['default'];
-      var isNextDateMoment = nextDate instanceof moment__default['default'];
-      var nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
-      var nextValAsMoment = isNextValMoment ? nextVal : moment__default['default'](nextVal);
-      var nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
-      var nextDateAsMoment = isNextDateMoment ? nextDate : moment__default['default'](nextDate);
-      var hasValChanged = nextValAsString !== prevValAsString;
-      var hasDateChanged = nextDateAsString !== prevDateAsString;
-      var newState = {};
-      var 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 ((prevValAsString === null || prevValAsString === void 0 ? void 0 : prevValAsString.length) < 8) {
+      return null;
+    }
 
-      if (skipStateChange) return null;
-      return newState;
+    const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
+    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 : moment__default["default"](nextVal);
+    const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
+    const nextDateAsMoment = isNextDateMoment ? nextDate : moment__default["default"](nextDate);
+    const hasValChanged = nextValAsString !== prevValAsString;
+    const hasDateChanged = nextDateAsString !== prevDateAsString;
+    const newState = {};
+    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;
     }
-  }]);
 
-  return DSdatePickerImpl;
-}(React__default['default'].Component);
+    if (hasValChanged) {
+      skipStateChange = false;
+      newState.dataInput = nextValAsString;
+      newState.selectedDate = nextValAsMoment;
+    }
+
+    if (skipStateChange) return null;
+    return newState;
+  }
+
+  render() {
+    var _this = this;
+
+    const {
+      inputFocused
+    } = this.state;
+    const {
+      disabled,
+      numberOfMonths,
+      readOnly,
+      enableOutsideDays,
+      transitionDuration,
+      firstDayOfWeek,
+      keepOpenOnDateSelect,
+      hideKeyboardShortcutsPanel,
+      onPrevMonthClick,
+      onNextMonthClick,
+      onClose,
+      phrases,
+      placeholder,
+      displayFormatDay,
+      isDayBlocked,
+      isOutsideRange,
+      isDayHighlighted,
+      tabIndex,
+      zIndex,
+      pickerProps,
+      calendarProps,
+      focusCurrentDate
+    } = this.props;
+    const safedate = this.getSafeValue();
+    const safeInputValue = this.getSafeInputValue();
+    const hasSelectedDate = !!safedate;
+    return /*#__PURE__*/_jsx__default["default"](dsForm.DSInputGroup, {
+      rightAddon: /*#__PURE__*/_jsx__default["default"](DatePickerDropdown, {
+        pickerRef: this.state.pickerRef,
+        disabled: disabled,
+        isOpen: inputFocused,
+        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"
+        }, void 0, /*#__PURE__*/_jsx__default["default"](DatePickerController, {
+          date: safedate,
+          displayFormatDay: displayFormatDay,
+          enableOutsideDays: enableOutsideDays,
+          firstDayOfWeek: firstDayOfWeek,
+          hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+          isDayBlocked: isDayBlocked,
+          isDayHighlighted: isDayHighlighted,
+          isOutsideRange: isOutsideRange,
+          keepOpenOnDateSelect: keepOpenOnDateSelect,
+          numberOfMonths: numberOfMonths,
+          onClickEscape: this.handleClickEscape,
+          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,
+          onOutsideClick: this.handleCalendarClose,
+          onPrevMonthClick: onPrevMonthClick,
+          phrases: phrases,
+          transitionDuration: transitionDuration,
+          calendarProps: calendarProps,
+          focusCurrentDate: focusCurrentDate
+        })),
+        onClick: this.onClickPicker,
+        readOnly: readOnly,
+        zIndex: zIndex,
+        pickerProps: pickerProps
+      })
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSDateInputV2, {
+      "data-testid": "datepicker-input",
+      "aria-label": placeholder || 'Date Picker Input',
+      disabled: disabled,
+      onBlur: this.handleOnBlur,
+      onChange: this.handleInputChange,
+      onDateChange: this.handleChange,
+      onFocus: this.handleInputFocus,
+      placeholder: placeholder,
+      tabIndex: tabIndex,
+      value: safeInputValue
+    }));
+  }
+
+}
 
 module.exports = DSdatePickerImpl;
-//# sourceMappingURL=DSDatePickerImpl.js.map