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

package/esm/components/DSDatePickerImpl.js

@@ -1,63 +1,31 @@
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+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';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/toArray';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'lodash';
-import 'prop-types';
-import 'react-dates/initialize';
-import 'react-dates';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-icons';
-import '../defaultPhrases.js';
-import './DatePickerRenderMonth/DatePickerRenderMonth.js';
-import '@elliemae/ds-grid';
-import './DatePickerNavigation/DatePickerNavigation.js';
-import '@elliemae/ds-icon';
-import '../prop-types-578e866b.js';
-import './DatePickerDay/DatePickerDay.js';
-import '@elliemae/ds-popper';
-import './DatePickerPicker/DatePickerPicker.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@elliemae/ds-button';
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-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(DSdatePickerImpl, _React$Component);
-
-  var _super = _createSuper(DSdatePickerImpl);
-
-  function DSdatePickerImpl(props) {
-    var _this;
-
-    _classCallCheck(this, DSdatePickerImpl);
-
-    _this = _super.call(this, props);
-
-    _this.onClickPicker = function () {
-      _this.setState({
+
+const FORMAT = 'MMDDYYYY';
+class DSdatePickerImpl extends React.Component {
+  constructor(props) {
+    super(props);
+
+    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(value, FORMAT, true);
@@ -78,35 +46,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
           });
@@ -116,88 +88,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(newDate, FORMAT, true);
+      const {
+        onDateChange
+      } = this.props;
+      const momentValue = moment(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;
+    this.handleOnBlur = () => {
+      setTimeout(() => {
+        const {
+          onBlur,
+          autoClear
+        } = this.props;
+        const {
+          dataInput,
+          selectedDate
+        } = this.state;
 
         if (moment(selectedDate, FORMAT, true).isValid()) {
           onBlur(dataInput, selectedDate);
         } else {
           if (autoClear) {
-            _this.setState({
+            this.setState({
               dataInput: undefined
             });
           }
@@ -207,171 +177,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 = {
+    this.state = {
       pickerRef: /*#__PURE__*/React.createRef(),
       dataInput: '',
       selectedDate: null,
       inputFocused: false
     };
-    return _this;
   }
 
-  _createClass(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.createElement(DSInputGroup, {
-        rightAddon: /*#__PURE__*/React.createElement(DatePickerDropdown, {
-          pickerRef: this.state.pickerRef,
-          disabled: disabled,
-          isOpen: inputFocused,
-          menu: /*#__PURE__*/React.createElement("div", {
-            style: {
-              minHeight: '310px',
-              zIndex: 1
-            },
-            className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
-            "data-testid": "date-picker-portal-wrapper"
-          }, /*#__PURE__*/React.createElement(DSDatePickerController, {
-            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.createElement(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;
-      var isPrevDateMoment = prevDate instanceof moment;
-      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;
+    const isPrevDateMoment = prevDate instanceof moment;
+    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;
-      var isNextDateMoment = nextDate instanceof moment;
-      var nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
-      var nextValAsMoment = isNextValMoment ? nextVal : moment(nextVal);
-      var nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
-      var nextDateAsMoment = isNextDateMoment ? nextDate : moment(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;
+    }
+
+    const prevDateAsString = isPrevDateMoment ? prevDate.format(FORMAT) : prevDate;
+    const isNextValMoment = nextVal instanceof moment;
+    const isNextDateMoment = nextDate instanceof moment;
+    const nextValAsString = isNextValMoment ? nextVal.format(FORMAT) : nextVal;
+    const nextValAsMoment = isNextValMoment ? nextVal : moment(nextVal);
+    const nextDateAsString = isNextDateMoment ? nextDate.format(FORMAT) : nextDate;
+    const nextDateAsMoment = isNextDateMoment ? nextDate : moment(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;
+    }
 
-      if (skipStateChange) return null;
-      return newState;
+    if (hasValChanged) {
+      skipStateChange = false;
+      newState.dataInput = nextValAsString;
+      newState.selectedDate = nextValAsMoment;
     }
-  }]);
 
-  return DSdatePickerImpl;
-}(React.Component);
+    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(DSInputGroup, {
+      rightAddon: /*#__PURE__*/_jsx(DatePickerDropdown, {
+        pickerRef: this.state.pickerRef,
+        disabled: disabled,
+        isOpen: inputFocused,
+        menu: /*#__PURE__*/_jsx("div", {
+          style: {
+            minHeight: '310px',
+            zIndex: 1
+          },
+          className: hasSelectedDate ? 'has-selected-date' : 'without-selected-date',
+          "data-testid": "date-picker-portal-wrapper"
+        }, void 0, /*#__PURE__*/_jsx(DSDatePickerController, {
+          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(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
+    }));
+  }
+
+}
 
 export { DSdatePickerImpl as default };
-//# sourceMappingURL=DSDatePickerImpl.js.map