@elliemae/ds-date-picker 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/DSDatePicker.js

@@ -0,0 +1,233 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('react');
+var reactDesc = require('react-desc');
+require('react-dates/initialize');
+var dsClassnames = require('@elliemae/ds-classnames');
+var moment = require('moment');
+var defaultPhrases = require('./defaultPhrases.js');
+var DatePickerNavigation = require('./components/DatePickerNavigation/DatePickerNavigation.js');
+var DatePickerDay = require('./components/DatePickerDay/DatePickerDay.js');
+var DatePickerPicker = require('./components/DatePickerPicker/DatePickerPicker.js');
+var DatePickerDropdown = require('./components/DatePickerDropdown.js');
+var DatePickerSingleDate = require('./components/DatePickerSingleDate/DatePickerSingleDate.js');
+var DatePickerHeader = require('./components/DatePickerHeader/DatePickerHeader.js');
+var DatePickerRange = require('./components/DatePickerRange/DatePickerRange.js');
+var DatePickerRangeHeader = require('./components/DatePickerRangeHeader/DatePickerRangeHeader.js');
+var SingleRangeDateSwitcher = require('./components/SingleRangeDateSwitcher/SingleRangeDateSwitcher.js');
+var DatePickerRenderMonth = require('./components/DatePickerRenderMonth/DatePickerRenderMonth.js');
+var DSDatePickerImpl = require('./components/DSDatePickerImpl.js');
+var DatePickerController = require('./components/DatePickerController/DatePickerController.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const DSDatePicker = _ref => {
+  let {
+    containerProps = {},
+    id = '',
+    appendToBody = true,
+    className = '',
+    date,
+    value,
+    placeholder = '',
+    disabled = false,
+    required = false,
+    readOnly = false,
+    hasError = false,
+    screenReaderInputMessage = 'Select date',
+    enableOutsideDays = true,
+    initialVisibleMonth = moment__default["default"](),
+    firstDayOfWeek = 0,
+    keepOpenOnDateSelect = false,
+    hideKeyboardShortcutsPanel = true,
+    onChange = () => null,
+    onDateChange = undefined,
+    onPrevMonthClick = () => null,
+    onNextMonthClick = () => null,
+    onClose = () => null,
+    onFocus = () => null,
+    onBlur = () => null,
+    phrases = defaultPhrases.SingleDatePickerPhrases,
+    displayFormat = 'L',
+    displayFormatDay = 'D',
+    transitionDuration = 0,
+    verticalSpacing = 0,
+    isDayBlocked = () => false,
+    isOutsideRange = () => false,
+    isDayHighlighted = () => false,
+    numberOfMonths = 1,
+    openDirection = 'down',
+    tabIndex = '',
+    zIndex = 1,
+    pickerProps = {},
+    calendarProps = {},
+    autoClear = false,
+    focusCurrentDate = false
+  } = _ref;
+  const {
+    cssClassName
+  } = dsClassnames.convertPropToCssClassName('datepicker', className, {
+    hasError,
+    readOnly,
+    disabled,
+    id
+  });
+  const safeDate = date || value;
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: cssClassName
+  }, containerProps), {}, {
+    style: {
+      minWidth: '140px'
+    },
+    children: /*#__PURE__*/_jsx__default["default"](DSDatePickerImpl, {
+      appendToBody: appendToBody,
+      autoClear: autoClear,
+      date: safeDate,
+      disabled: disabled,
+      displayFormat: displayFormat,
+      displayFormatDay: displayFormatDay,
+      enableOutsideDays: enableOutsideDays,
+      firstDayOfWeek: firstDayOfWeek,
+      hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+      initialVisibleMonth: () => initialVisibleMonth ? moment__default["default"](initialVisibleMonth) : moment__default["default"](safeDate),
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange === true || isOutsideRange === false ? () => isOutsideRange : isOutsideRange,
+      keepOpenOnDateSelect: keepOpenOnDateSelect,
+      numberOfMonths: numberOfMonths,
+      onBlur: onBlur,
+      onClose: onClose,
+      onChange: onChange,
+      onDateChange: function () {
+        if (onDateChange) onDateChange(...arguments);
+      },
+      onFocus: onFocus,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      openDirection: openDirection,
+      phrases: phrases,
+      placeholder: placeholder,
+      readOnly: readOnly,
+      required: required,
+      screenReaderInputMessage: screenReaderInputMessage,
+      transitionDuration: transitionDuration,
+      value: safeDate,
+      verticalSpacing: verticalSpacing,
+      tabIndex: tabIndex,
+      zIndex: zIndex,
+      pickerProps: pickerProps,
+      calendarProps: calendarProps,
+      focusCurrentDate: focusCurrentDate
+    })
+  }));
+};
+
+const datePickerProps = {
+  containerProps: reactDesc.PropTypes.shape({}).description('Set of Properties attached to the main container'),
+  id: reactDesc.PropTypes.string.description('components id'),
+  appendToBody: reactDesc.PropTypes.bool.description('append component to body or not').defaultValue(true),
+  className: reactDesc.PropTypes.string.description('html class attribute'),
+  date: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('selected date').defaultValue(undefined),
+  value: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('value'),
+  placeholder: reactDesc.PropTypes.string.description('input placeholder value'),
+  autoClear: reactDesc.PropTypes.bool.description('autoclears the input onblur if the date is not completely set').defaultValue(false),
+  disabled: reactDesc.PropTypes.bool.description('disable component or not').defaultValue(false),
+  required: reactDesc.PropTypes.bool.description('value is required or not').defaultValue(false),
+  readOnly: reactDesc.PropTypes.bool.description('is read only or not').defaultValue(false),
+  hasError: reactDesc.PropTypes.bool.description('set error state').defaultValue(false),
+  screenReaderInputMessage: reactDesc.PropTypes.string.description('message to anounce by screen reader').defaultValue('select date'),
+  enableOutsideDays: reactDesc.PropTypes.bool.description('enable days oustide month or not').defaultValue(true),
+  initialVisibleMonth: reactDesc.PropTypes.instanceOf(Date, moment__default["default"]).description('initial month to display'),
+  firstDayOfWeek: reactDesc.PropTypes.number.description('first day of week').defaultValue(0),
+  keepOpenOnDateSelect: reactDesc.PropTypes.bool.description('keep picker open when a date is selected').defaultValue(false),
+  hideKeyboardShortcutsPanel: reactDesc.PropTypes.bool.description('hide keyabord shortcut panel or not').defaultValue(true),
+  onChange: reactDesc.PropTypes.func.description("\n      function executed when input changes. This could trigger with invalid dates. It returns a string and a moment\n      if the date is valid.\n    "),
+  onDateChange: reactDesc.PropTypes.func.description('function executed when date changes. This doesnt trigger with invalid dates. It returns a moment object'),
+  onPrevMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on prev month button'),
+  onNextMonthClick: reactDesc.PropTypes.func.description('function executed when clicking on next month button'),
+  onBlur: reactDesc.PropTypes.func.description('function executed when component loses focus'),
+  onClose: reactDesc.PropTypes.func.description('function executed when component closes'),
+  onFocus: reactDesc.PropTypes.func.description('function executed when component gains focus'),
+  phrases: reactDesc.PropTypes.shape({
+    calendarLabel: reactDesc.PropTypes.string,
+    closeDatePicker: reactDesc.PropTypes.string,
+    clearDates: reactDesc.PropTypes.string,
+    focusStartDate: reactDesc.PropTypes.string,
+    jumpToPrevMonth: reactDesc.PropTypes.string,
+    jumpToNextMonth: reactDesc.PropTypes.string,
+    keyboardShortcuts: reactDesc.PropTypes.string,
+    showKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+    hideKeyboardShortcutsPanel: reactDesc.PropTypes.string,
+    openThisPanel: reactDesc.PropTypes.string,
+    enterKey: reactDesc.PropTypes.string,
+    leftArrowRightArrow: reactDesc.PropTypes.string,
+    upArrowDownArrow: reactDesc.PropTypes.string,
+    pageUpPageDown: reactDesc.PropTypes.string,
+    homeEnd: reactDesc.PropTypes.string,
+    escape: reactDesc.PropTypes.string,
+    questionMark: reactDesc.PropTypes.string,
+    selectFocusedDate: reactDesc.PropTypes.string,
+    moveFocusByOneDay: reactDesc.PropTypes.string,
+    moveFocusByOneWeek: reactDesc.PropTypes.string,
+    moveFocusByOneMonth: reactDesc.PropTypes.string,
+    moveFocustoStartAndEndOfWeek: reactDesc.PropTypes.string,
+    returnFocusToInput: reactDesc.PropTypes.string,
+    keyboardNavigationInstructions: reactDesc.PropTypes.string,
+    chooseAvailableStartDate: reactDesc.PropTypes.func,
+    chooseAvailableEndDate: reactDesc.PropTypes.func,
+    dateIsUnavailable: reactDesc.PropTypes.func,
+    dateIsSelected: reactDesc.PropTypes.func
+  }).description('react-dates phrases').defaultValue(defaultPhrases.SingleDatePickerPhrases),
+  displayFormat: reactDesc.PropTypes.string.description('display format').defaultValue('L'),
+  displayFormatDay: reactDesc.PropTypes.string.description('display format day').defaultValue('D'),
+  transitionDuration: reactDesc.PropTypes.number.description('transition duration').defaultValue(0),
+  verticalSpacing: reactDesc.PropTypes.number.description('vertical spacing'),
+  isDayBlocked: reactDesc.PropTypes.func.description('function that returns each day and disables desired dates'),
+  isOutsideRange: reactDesc.PropTypes.func.description('function that returns each day and disables outisde range dates'),
+  isDayHighlighted: reactDesc.PropTypes.func.description('function that returns each day and higlights desired dates'),
+  numberOfMonths: reactDesc.PropTypes.number.description('amount of months'),
+  openDirection: reactDesc.PropTypes.string.description('open direction of the popup').defaultValue('down'),
+  tabIndex: reactDesc.PropTypes.number.description('overrides tab index of the element'),
+  zIndex: reactDesc.PropTypes.string.description('overrides z-index of the element'),
+  pickerProps: reactDesc.PropTypes.shape(DatePickerPicker.PickerPropsTypes).description('props to be passed to the picker container'),
+  calendarProps: reactDesc.PropTypes.shape({
+    tabIndex: reactDesc.PropTypes.number
+  }).description('props to be passes to the calendar container'),
+  focusCurrentDate: reactDesc.PropTypes.bool.description('Wheter to focus current date on calendar').defaultValue(false)
+};
+const DatePickerWithSchema = reactDesc.describe(DSDatePicker);
+DatePickerWithSchema.propTypes = datePickerProps;
+
+exports.DatePickerNavigation = DatePickerNavigation;
+exports.DatePickerDay = DatePickerDay;
+exports.DatePickerPicker = DatePickerPicker.Picker;
+exports.Picker = DatePickerPicker.Picker;
+exports.DatePickerDropdown = DatePickerDropdown;
+exports.DatePickerSingleDate = DatePickerSingleDate;
+exports.DatePickerHeader = DatePickerHeader;
+exports.DatePickerRange = DatePickerRange;
+exports.DatePickerRangeHeader = DatePickerRangeHeader;
+exports.SingleRangeDateSwitcher = SingleRangeDateSwitcher;
+exports.renderMonthElement = DatePickerRenderMonth.renderMonthElement;
+exports.DSDatePickerController = DatePickerController;
+exports.DatePickerWithSchema = DatePickerWithSchema;
+exports["default"] = DSDatePicker;

package/cjs/components/DSDatePickerImpl.js

@@ -0,0 +1,354 @@
+'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.getSafeValue = () => {
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
+
+      if (value) {
+        return moment__default["default"](value, FORMAT, true);
+      }
+
+      if (date) {
+        return moment__default["default"](date, FORMAT, true);
+      }
+
+      if (defaultValue) {
+        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;
+      return dataInput;
+    };
+
+    this.isControlled = () => {
+      const {
+        value,
+        date
+      } = this.props;
+      return Boolean(value) || Boolean(date);
+    };
+
+    this.handleDateChange = (date, event) => {
+      const {
+        readOnly,
+        onDateChange,
+        keepOpenOnDateSelect,
+        onChange,
+        onBlur
+      } = this.props;
+
+      if (!readOnly) {
+        if (!this.isControlled()) {
+          this.setState({
+            dataInput: date.format(FORMAT),
+            selectedDate: date
+          });
+        }
+
+        onChange(date.format(FORMAT), date);
+        onDateChange(date);
+
+        if (!keepOpenOnDateSelect || event.key === 'Enter') {
+          this.setState({
+            inputFocused: false
+          });
+          onBlur(date.format(FORMAT), date);
+        }
+      }
+    };
+
+    this.handleInputChange = (dataInput, newDate) => {
+      const {
+        onChange
+      } = this.props;
+      const newState = {
+        dataInput,
+        selectedDate: newDate
+      };
+      this.setState(() => newState);
+      onChange(dataInput, newDate);
+    };
+
+    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 = _ref => {
+      let {
+        focused
+      } = _ref;
+      this.setState({
+        inputFocused: focused
+      });
+    };
+
+    this.handleCalendarClose = () => {
+      const {
+        onClose
+      } = this.props;
+      this.setState({
+        inputFocused: false
+      });
+      this.handleOnBlur();
+      onClose();
+    };
+
+    this.handleClickEscape = () => {
+      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 (moment__default["default"](selectedDate, FORMAT, true).isValid()) {
+          onBlur(dataInput, selectedDate);
+        } else {
+          if (autoClear) {
+            this.setState({
+              dataInput: undefined
+            });
+          }
+
+          onBlur(dataInput, null);
+        }
+      });
+    };
+
+    this.handleInputFocus = dataInput => {
+      const {
+        onFocus
+      } = this.props;
+      onFocus(dataInput);
+    };
+
+    this.state = {
+      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 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)
+
+
+    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__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;
+    }
+
+    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;