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

package/esm/components/DSDatePickerImpl.js

@@ -0,0 +1,346 @@
+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.getSafeValue = () => {
+      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;
+      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(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(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.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;
+    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)
+
+
+    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 (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(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 };

package/esm/components/DatePickerController/DatePickerController.js

@@ -0,0 +1,350 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React from 'react';
+import { debounce } from 'lodash';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import 'react-dates/initialize';
+import { DayPickerSingleDateController } from 'react-dates';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import { SingleDatePickerPhrases } from '../../defaultPhrases.js';
+import { renderMonthElement } from '../DatePickerRenderMonth/DatePickerRenderMonth.js';
+import Navigation from '../DatePickerNavigation/DatePickerNavigation.js';
+import Day from '../DatePickerDay/DatePickerDay.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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 {
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('datepicker-range');
+const focusElementOnOpen = debounce((datePickerDom, firstFocusableItemDom, focusCurrentDate) => {
+  if (datePickerDom) {
+    const currentDay = Array.from(datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__today')).filter(el => !el.className.includes('CalendarDay__outside'))[0];
+    const [calendarDaySelected] = datePickerDom === null || datePickerDom === void 0 ? void 0 : datePickerDom.getElementsByClassName('CalendarDay__selected');
+
+    if (calendarDaySelected) {
+      var _calendarDaySelected$;
+
+      calendarDaySelected === null || calendarDaySelected === void 0 ? void 0 : (_calendarDaySelected$ = calendarDaySelected.focus) === null || _calendarDaySelected$ === void 0 ? void 0 : _calendarDaySelected$.call(calendarDaySelected);
+    } else if (focusCurrentDate && !calendarDaySelected) currentDay.focus();else {
+      var _navButton$focus;
+
+      const navButton = firstFocusableItemDom === null || firstFocusableItemDom === void 0 ? void 0 : firstFocusableItemDom.closest('.DayPickerNavigation_button>div');
+      navButton === null || navButton === void 0 ? void 0 : (_navButton$focus = navButton.focus) === null || _navButton$focus === void 0 ? void 0 : _navButton$focus.call(navButton);
+    }
+  }
+}, 100);
+class DSDatePickerController extends React.Component {
+  // eslint-disable-next-line react/static-property-placement
+  constructor(props) {
+    super(props);
+
+    this.handleMouseUp = () => {
+      var _focusedElement$blur;
+
+      const focusedElement = document.activeElement;
+      focusedElement === null || focusedElement === void 0 ? void 0 : (_focusedElement$blur = focusedElement.blur) === null || _focusedElement$blur === void 0 ? void 0 : _focusedElement$blur.call(focusedElement);
+    };
+
+    this.handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const {
+        onClickEscape
+      } = this.props;
+
+      switch (event.key) {
+        case 'Home':
+          firstDay.focus();
+          break;
+
+        case 'End':
+          lastDay.focus();
+          break;
+
+        case 'Escape':
+          onClickEscape();
+          break;
+      }
+    };
+
+    this.getSafeValue = () => {
+      const {
+        value,
+        date,
+        defaultValue
+      } = this.props;
+      const {
+        selectedDate
+      } = this.state;
+      if (value) return moment(value);
+      if (date) return moment(date);
+      if (defaultValue) return moment(defaultValue);
+      if (selectedDate) return moment(selectedDate);
+      return null;
+    };
+
+    this.isControlled = () => {
+      const {
+        value,
+        date
+      } = this.props;
+      return Boolean(value) || Boolean(date);
+    };
+
+    this.handleDateChange = date => {
+      const {
+        readOnly,
+        onDateChange,
+        onChange
+      } = this.props;
+
+      if (!readOnly) {
+        if (!this.isControlled()) {
+          this.setState({
+            selectedDate: date
+          });
+        }
+
+        onDateChange(date);
+        onChange(date);
+      }
+    };
+
+    this.handleChange = dataInput => {
+      const {
+        onDateChange,
+        onChange
+      } = this.props;
+      const momentvalue = moment(dataInput.target.value);
+      this.setState({
+        selectedDate: momentvalue
+      });
+      onDateChange(momentvalue);
+      onChange(momentvalue);
+    };
+
+    this.handleNavClick = (date, nav) => {
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
+      const {
+        onPrevMonthClick,
+        onNextMonthClick
+      } = this.props;
+
+      if (nav === 'prev') {
+        var _prev$focus;
+
+        prev === null || prev === void 0 ? void 0 : (_prev$focus = prev.focus) === null || _prev$focus === void 0 ? void 0 : _prev$focus.call(prev);
+        onPrevMonthClick(date);
+      } else {
+        var _next$focus;
+
+        next === null || next === void 0 ? void 0 : (_next$focus = next.focus) === null || _next$focus === void 0 ? void 0 : _next$focus.call(next);
+        onNextMonthClick(date);
+      }
+    };
+
+    this.insideBlur = event => {
+      const {
+        datePicker
+      } = this.state;
+
+      if (!datePicker.current.contains(event.currentTarget)) {
+        this.props.onClose();
+      }
+    };
+
+    this.state = {
+      selectedDate: null,
+      firstFocusableItem: /*#__PURE__*/React.createRef(),
+      datePicker: /*#__PURE__*/React.createRef()
+    };
+  }
+
+  componentDidMount() {
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    datePicker.current.addEventListener('mouseup', this.handleMouseUp, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
+    setTimeout(() => {
+      focusElementOnOpen(datePicker === null || datePicker === void 0 ? void 0 : datePicker.current, firstFocusableItem === null || firstFocusableItem === void 0 ? void 0 : firstFocusableItem.current, this.props.focusCurrentDate);
+    }, 400);
+  }
+
+  componentWillUnmount() {
+    const {
+      datePicker
+    } = this.state;
+    datePicker.current.removeEventListener('mouseup', this.handleMouseUp, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  render() {
+    const {
+      numberOfMonths,
+      enableOutsideDays,
+      transitionDuration,
+      initialVisibleMonth,
+      firstDayOfWeek,
+      keepOpenOnDateSelect,
+      hideKeyboardShortcutsPanel,
+      onClose,
+      phrases,
+      displayFormatDay,
+      isDayBlocked,
+      isOutsideRange,
+      isDayHighlighted,
+      onOutsideClick,
+      key,
+      calendarProps
+    } = this.props;
+    const {
+      datePicker,
+      firstFocusableItem
+    } = this.state;
+    const safedate = this.getSafeValue();
+    const safeinitialMonth = safedate && safedate.isValid() ? () => safedate : () => initialVisibleMonth;
+    return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      onBlur: this.insideBlur,
+      ref: datePicker,
+      className: classNameBlock('wrapper-day-picker-single-date-controller'),
+      "data-testid": "calendar-wrapper"
+    }, calendarProps), {}, {
+      children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
+        date: safedate,
+        enableOutsideDays: enableOutsideDays,
+        firstDayOfWeek: firstDayOfWeek,
+        focused: true,
+        hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel,
+        initialVisibleMonth: safeinitialMonth,
+        isDayBlocked: isDayBlocked,
+        isDayHighlighted: isDayHighlighted,
+        isOutsideRange: isOutsideRange,
+        keepOpenOnDateSelect: keepOpenOnDateSelect,
+        navNext: /*#__PURE__*/_jsx(Navigation, {
+          className: classNameElement('navigation-next')
+        }),
+        navPrev: /*#__PURE__*/_jsx(Navigation, {
+          className: classNameElement('navigation-prev'),
+          icon: ChevronLeft,
+          innerRef: firstFocusableItem
+        }),
+        renderMonthElement: renderMonthElement,
+        numberOfMonths: numberOfMonths,
+        onClose: onClose,
+        onDateChange: this.handleDateChange,
+        onNextMonthClick: e => {
+          this.handleNavClick(e, 'next');
+        },
+        onOutsideClick: onOutsideClick,
+        onPrevMonthClick: e => {
+          this.handleNavClick(e, 'prev');
+        },
+        phrases: phrases,
+        renderDayContents: date => /*#__PURE__*/_jsx(Day, {
+          className: classNameElement('day-contents'),
+          date: date.format(displayFormatDay)
+        }),
+        transitionDuration: transitionDuration,
+        onTab: e => {
+          if (e.target.classList.contains('CalendarDay')) {
+            e.preventDefault();
+            onClose();
+          }
+        }
+      }, key)
+    })));
+  }
+
+}
+DSDatePickerController.defaultProps = {
+  date: '',
+  value: '',
+  enableOutsideDays: false,
+  initialVisibleMonth: moment(),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onChange: () => null,
+  onClickEscape: () => null,
+  onDateChange: () => null,
+  phrases: SingleDatePickerPhrases,
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
+  transitionDuration: 0,
+  // verticalSpacing: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+DSDatePickerController.defaultProps = {
+  date: '',
+  value: '',
+  enableOutsideDays: false,
+  initialVisibleMonth: moment(),
+  firstDayOfWeek: 0,
+  keepOpenOnDateSelect: true,
+  hideKeyboardShortcutsPanel: true,
+  onPrevMonthClick: () => null,
+  onNextMonthClick: () => null,
+  onClose: () => null,
+  onClickEscape: () => null,
+  onChange: () => null,
+  onDateChange: () => null,
+  phrases: PropTypes.shape({
+    calendarLabel: PropTypes.string,
+    closeDatePicker: PropTypes.string,
+    clearDates: PropTypes.string,
+    focusStartDate: PropTypes.string,
+    jumpToPrevMonth: PropTypes.string,
+    jumpToNextMonth: PropTypes.string,
+    keyboardShortcuts: PropTypes.string,
+    showKeyboardShortcutsPanel: PropTypes.string,
+    hideKeyboardShortcutsPanel: PropTypes.string,
+    openThisPanel: PropTypes.string,
+    enterKey: PropTypes.string,
+    leftArrowRightArrow: PropTypes.string,
+    upArrowDownArrow: PropTypes.string,
+    pageUpPageDown: PropTypes.string,
+    homeEnd: PropTypes.string,
+    escape: PropTypes.string,
+    questionMark: PropTypes.string,
+    selectFocusedDate: PropTypes.string,
+    moveFocusByOneDay: PropTypes.string,
+    moveFocusByOneWeek: PropTypes.string,
+    moveFocusByOneMonth: PropTypes.string,
+    moveFocustoStartAndEndOfWeek: PropTypes.string,
+    returnFocusToInput: PropTypes.string,
+    keyboardNavigationInstructions: PropTypes.string,
+    chooseAvailableStartDate: PropTypes.func,
+    chooseAvailableEndDate: PropTypes.func,
+    dateIsUnavailable: PropTypes.func,
+    dateIsSelected: PropTypes.func
+  }),
+  // displayFormat: 'L',
+  displayFormatDay: 'D',
+  transitionDuration: 0,
+  // verticalSpacing: 0,
+  isDayBlocked: () => false,
+  isOutsideRange: () => false,
+  isDayHighlighted: () => false,
+  numberOfMonths: 1
+};
+
+export { DSDatePickerController as default };

package/esm/components/DatePickerDay/DatePickerDay.js

@@ -0,0 +1,18 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+
+const Day = _ref => {
+  let {
+    className = 'date-picker-content-day',
+    date = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    "data-testid": "datepicker-day-".concat(date)
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    className: "".concat(className, "-half"),
+    "data-testid": "datepicker-day"
+  }, void 0, date));
+};
+
+export { Day as default };