@elliemae/ds-date-range-picker 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/components/DSDateRangePickerImpl.js

@@ -0,0 +1,330 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import moment from 'moment';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSFormItemLayout, DSInputMask, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
+import DSPopper from '@elliemae/ds-popper';
+import { renderMonthElement, DatePickerPicker } from '@elliemae/ds-date-picker';
+import DayPickerRangeController from './DayPickerRangeController.js';
+import { isMaxDiffSafe } from '../isMaxDiffSafe.js';
+
+const START_DATE = 'startDate';
+const END_DATE = 'endDate';
+const {
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('datepicker');
+class DSDateRangePickerImpl extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onDatesChange = _ref => {
+      let {
+        startDate,
+        endDate
+      } = _ref;
+      const {
+        onDatesChange
+      } = this.props;
+      onDatesChange(startDate, endDate);
+      const safe = isMaxDiffSafe(startDate, endDate, this.state.startDate, this.state.endDate);
+
+      if (!safe) {
+        this.setState({
+          showPicker: false
+        });
+      }
+
+      this.setState({
+        startDate,
+        endDate,
+        primaryStartInput: false,
+        primaryEndInput: false
+      });
+    };
+
+    this.onFocusChange = () => {
+      this.setState(_ref2 => {
+        let {
+          focusedInput
+        } = _ref2;
+        return {
+          focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
+        };
+      });
+    };
+
+    this.handleKeyDown = event => {
+      if (event.key === 'Escape') this.setState({
+        showPicker: false
+      });
+    };
+
+    this.getSafeStartInputValue = () => {
+      const {
+        startInput,
+        primaryStartInput,
+        startDate
+      } = this.state;
+      if (primaryStartInput && startInput) return startInput;
+      if (!startDate) return '';
+      return startDate.format('MMDDYYYY');
+    };
+
+    this.getSafeEndInputValue = () => {
+      const {
+        endInput,
+        primaryEndInput,
+        endDate
+      } = this.state;
+      if (primaryEndInput && endInput) return endInput;
+      if (!endDate) return '';
+      return endDate.format('MMDDYYYY');
+    };
+
+    this.changeFocus = () => {
+      const {
+        disabled
+      } = this.props;
+
+      if (!disabled) {
+        this.setState(() => ({
+          focusedInput: 'startDate'
+        }));
+      }
+    };
+
+    this.handleChangeStart = e => {
+      var _momentValue;
+
+      const {
+        onChangeStartInput,
+        isDayBlocked,
+        minimumNights
+      } = this.props;
+      const {
+        endDate
+      } = this.state;
+      const startInputVal = e.target.value;
+      let momentValue = null;
+
+      if (startInputVal && moment(startInputVal, 'MM/DD/YYYY', true).isValid()) {
+        momentValue = moment(startInputVal);
+      }
+
+      const startDateBlocked = isDayBlocked(momentValue);
+      const isStartDateAcceptable = !startDateBlocked && momentValue && startInputVal !== '';
+      const areDatesValid = endDate && momentValue && (endDate === null || endDate === void 0 ? void 0 : endDate.isValid()) && ((_momentValue = momentValue) === null || _momentValue === void 0 ? void 0 : _momentValue.isValid());
+      const canEndBeSameAsStart = minimumNights === 0;
+      const isStartAcceptableWithSelectedEnd = !endDate || areDatesValid && (canEndBeSameAsStart && momentValue.diff(endDate, 'days') <= 0 || !canEndBeSameAsStart && momentValue.diff(endDate, 'days') < 0);
+      const invalidDate = !isStartDateAcceptable || !isStartAcceptableWithSelectedEnd;
+      if (startDateBlocked) momentValue = null;
+      onChangeStartInput(momentValue);
+      this.setState(prevState => ({
+        startDate: momentValue,
+        startInput: startInputVal,
+        primaryStartInput: true,
+        startDateError: invalidDate,
+        endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
+      }));
+    };
+
+    this.handleChangeEnd = e => {
+      var _momentValue2;
+
+      const {
+        onChangeEndInput,
+        isDayBlocked,
+        minimumNights
+      } = this.props;
+      const {
+        startDate
+      } = this.state;
+      const endInputValue = e.target.value;
+      let momentValue = null;
+
+      if (endInputValue && moment(endInputValue, 'MM/DD/YYYY', true).isValid()) {
+        momentValue = moment(endInputValue);
+      }
+
+      const endDateBlocked = isDayBlocked(momentValue);
+      const isEndDateAcceptable = !endDateBlocked && momentValue && endInputValue !== '';
+      const areDatesValid = startDate && momentValue && (startDate === null || startDate === void 0 ? void 0 : startDate.isValid()) && ((_momentValue2 = momentValue) === null || _momentValue2 === void 0 ? void 0 : _momentValue2.isValid());
+      const canEndBeSameAsStart = minimumNights === 0;
+      const isEndAcceptableWithSelectedStart = !startDate || // we can't compare with start date because it's not yet set
+      areDatesValid && ( // it's set and both are valid
+      canEndBeSameAsStart && momentValue.diff(startDate, 'days') >= 0 || // >= is valid
+      !canEndBeSameAsStart && momentValue.diff(startDate, 'days') > 0); // only > is valid
+
+      const invalidDate = !isEndDateAcceptable || !isEndAcceptableWithSelectedStart;
+      if (endDateBlocked) momentValue = null;
+      onChangeEndInput(momentValue);
+      this.setState(prevState => ({
+        endDate: momentValue,
+        endInput: endInputValue,
+        primaryEndInput: true,
+        startDateError: !isEndDateAcceptable || !prevState.startDateError ? prevState.startDateError : !isEndAcceptableWithSelectedStart,
+        endDateError: invalidDate
+      }));
+    };
+
+    this.handleChangeDate = _ref3 => {
+      let {
+        startDate: _start,
+        endDate
+      } = _ref3;
+
+      if (_start && endDate) {
+        this.setState({
+          startDate: moment(_start),
+          endDate,
+          primaryStartInput: false,
+          primaryEndInput: false
+        });
+      } else if (_start) {
+        this.setState({
+          startDate: moment(_start),
+          primaryStartInput: false
+        });
+      } else if (endDate) {
+        this.setState({
+          endDate,
+          primaryEndInput: false
+        });
+      }
+    };
+
+    this.state = {
+      startDate: props.startDate ? moment(props.startDate) : null,
+      endDate: props.endDate ? moment(props.endDate) : null,
+      focusedInput: START_DATE,
+      showPicker: false,
+      startDateError: false,
+      endDateError: false
+    };
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown, false);
+  }
+
+  render() {
+    const {
+      startDate,
+      endDate,
+      focusedInput,
+      showPicker,
+      startDateError,
+      endDateError
+    } = this.state;
+    const {
+      disabled,
+      displayFormatDay,
+      minimumNights,
+      labelFrom,
+      labelTo,
+      isDayBlocked,
+      isDayHighlighted,
+      isOutsideRange,
+      enableOutsideDays,
+      startDateRequired,
+      endDateRequired,
+      onOutsideClick,
+      onNextMonthClick,
+      onPrevMonthClick,
+      onClose,
+      hasError,
+      validationMessage
+    } = this.props;
+    const inputClass = classNameBlock('inputs', 'range-picker');
+    const inputClassModifier = '';
+    const safeStartInputValue = this.getSafeStartInputValue();
+    const safeEndInputValue = this.getSafeEndInputValue();
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(inputClass, " ").concat(inputClassModifier)
+    }, void 0, /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('wrapper-input-date-range-picker-controller')
+    }, void 0, /*#__PURE__*/_jsx(DSFormItemLayout, {
+      floatingLabel: true,
+      inputComponent: DSInputMask,
+      labelText: labelFrom,
+      mask: MASK_TYPES.DATE,
+      onChange: this.handleChangeStart,
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
+      pipe: MASK_PIPES.AUTO_CORRECT_DATE,
+      value: safeStartInputValue,
+      required: startDateRequired,
+      hasError: hasError || startDateError,
+      placeholder: "MM/DD/YYYY"
+    }), /*#__PURE__*/_jsx(DSFormItemLayout, {
+      floatingLabel: true,
+      inputComponent: DSInputMask,
+      labelText: labelTo,
+      mask: MASK_TYPES.DATE,
+      onChange: this.handleChangeEnd,
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
+      pipe: MASK_PIPES.AUTO_CORRECT_DATE,
+      value: safeEndInputValue,
+      required: endDateRequired,
+      hasError: hasError || endDateError,
+      validationMessage: validationMessage,
+      placeholder: "MM/DD/YYYY"
+    })), /*#__PURE__*/_jsx("div", {
+      className: classNameBlock('wrapper-button-date-range-picker-controller')
+    }, void 0, /*#__PURE__*/_jsx(DSPopper, {
+      contentComponent: /*#__PURE__*/_jsx("div", {}, void 0, showPicker && /*#__PURE__*/_jsx(DayPickerRangeController, {
+        enableOutsideDays: enableOutsideDays,
+        isDayBlocked: isDayBlocked,
+        isDayHighlighted: isDayHighlighted,
+        isOutsideRange: isOutsideRange,
+        displayFormatDay: displayFormatDay,
+        endDate: endDate,
+        focusedInput: focusedInput,
+        hideKeyboardShortcutsPanel: true,
+        minimumNights: minimumNights,
+        onDatesChange: this.onDatesChange,
+        onFocusChange: this.onFocusChange,
+        onOutsideClick: e => {
+          onOutsideClick(e);
+          this.setState({
+            showPicker: false
+          });
+        },
+        onNextMonthClick: onNextMonthClick,
+        onPrevMonthClick: onPrevMonthClick,
+        startDate: startDate,
+        renderMonthElement: renderMonthElement
+      })),
+      isOpen: showPicker && !startDateError && !endDateError,
+      onClose: onClose,
+      placement: "bottom-end",
+      showArrow: false,
+      triggerComponent: /*#__PURE__*/_jsx("div", {
+        onFocus: () => this.setState({
+          showPicker: true
+        })
+      }, void 0, /*#__PURE__*/_jsx(DatePickerPicker, {
+        className: classNameElement('picker'),
+        disabled: disabled,
+        onClick: () => this.setState({
+          showPicker: true
+        })
+      }), hasError && validationMessage && /*#__PURE__*/_jsx("div", {
+        style: {
+          height: 15
+        }
+      }))
+    })));
+  }
+
+}
+
+export { END_DATE, START_DATE, DSDateRangePickerImpl as default };

package/esm/components/DatePickerLabel/DatePickerLabel.js

@@ -0,0 +1,14 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+
+const Label = _ref => {
+  let {
+    className = 'date-picker-label',
+    label = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className
+  }, void 0, /*#__PURE__*/_jsx("span", {}, void 0, label));
+};
+
+export { Label as default };

package/{dist/esm → esm}/components/DatePickerRangeHeader/DatePickerRangeHeader.js

@@ -1,63 +1,75 @@
-import * as React from "react";
-import React2, { useState, useEffect } from "react";
-import moment from "moment";
-import DSInputMask, { DSInputGroup, MASK_TYPES, MASK_PIPES } from "@elliemae/ds-form";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockname = "date-range-picker";
-const Header = aggregatedClasses("div")(blockname, "header");
-const formatDate = (date) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import moment from 'moment';
+import DSInputMask, { DSInputGroup, MASK_TYPES, MASK_PIPES } from '@elliemae/ds-form';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const blockname = 'date-range-picker';
+const Header = aggregatedClasses('div')(blockname, 'header');
+
+const formatDate = date => {
   if (date) {
-    return date.format("MMDDYYYY");
+    return date.format('MMDDYYYY');
   }
 };
-const DatePickerRangeHeader = ({
-  placeholderStart = "Start Date",
-  placeholderEnd = "End Date",
-  onStartInputChange = () => null,
-  onEndInputChange = () => null,
-  selectedStartDate,
-  selectedEndDate
-}) => {
-  const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : "");
-  const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : "");
+
+const DatePickerRangeHeader = _ref => {
+  let {
+    placeholderStart = 'Start Date',
+    placeholderEnd = 'End Date',
+    onStartInputChange = () => null,
+    onEndInputChange = () => null,
+    selectedStartDate,
+    selectedEndDate
+  } = _ref;
+  const [startValue, setStartValue] = useState(selectedStartDate ? formatDate(selectedStartDate) : '');
+  const [endValue, setEndValue] = useState(selectedEndDate ? formatDate(selectedEndDate) : '');
   useEffect(() => {
     const startDate = formatDate(selectedStartDate);
     const endDate = formatDate(selectedEndDate);
     startDate !== startValue && setStartValue(startDate);
     endDate !== endValue && setEndValue(endDate);
   }, [selectedStartDate, selectedEndDate]);
-  const handleOnChangeStart = (e) => {
+
+  const handleOnChangeStart = e => {
     const newStartValue = e.target.value;
     setStartValue(newStartValue);
   };
-  const handleOnChangeEnd = (e) => {
+
+  const handleOnChangeEnd = e => {
     const newEndValue = e.target.value;
     setEndValue(newEndValue);
   };
-  const handleOnBlurStart = (e) => {
+
+  const handleOnBlurStart = e => {
     const newStartValue = e.target.value;
     onStartInputChange(moment(newStartValue));
   };
-  const handleOnBlurEnd = (e) => {
+
+  const handleOnBlurEnd = e => {
     const newEndValue = e.target.value;
     onEndInputChange(moment(newEndValue));
   };
-  const handleOnKeyDownStart = (e) => {
-    if (e.key === "Enter") {
+
+  const handleOnKeyDownStart = e => {
+    if (e.key === 'Enter') {
       const newValue = e.target.value;
       onStartInputChange(moment(newValue));
       e.target.blur();
     }
   };
-  const handleOnKeyDownEnd = (e) => {
-    if (e.key === "Enter") {
+
+  const handleOnKeyDownEnd = e => {
+    if (e.key === 'Enter') {
       const newValue = e.target.value;
       onEndInputChange(moment(newValue));
       e.target.blur();
     }
   };
-  return /* @__PURE__ */ React2.createElement(Header, null, /* @__PURE__ */ React2.createElement(DSInputGroup, null, /* @__PURE__ */ React2.createElement(DSInputMask, {
-    "aria-label": placeholderStart || "Date Picker Input Mask",
+
+  return /*#__PURE__*/_jsx(Header, {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {}, void 0, /*#__PURE__*/_jsx(DSInputMask, {
+    "aria-label": placeholderStart || 'Date Picker Input Mask',
     mask: MASK_TYPES.DATE,
     onBlur: handleOnBlurStart,
     onChange: handleOnChangeStart,
@@ -65,8 +77,8 @@ const DatePickerRangeHeader = ({
     pipe: MASK_PIPES.AUTO_CORRECT_DATE,
     placeholder: placeholderStart,
     value: startValue
-  }), /* @__PURE__ */ React2.createElement(DSInputMask, {
-    "aria-label": placeholderEnd || "Date Picker Input Mask",
+  }), /*#__PURE__*/_jsx(DSInputMask, {
+    "aria-label": placeholderEnd || 'Date Picker Input Mask',
     mask: MASK_TYPES.DATE,
     onBlur: handleOnBlurEnd,
     onChange: handleOnChangeEnd,
@@ -76,8 +88,5 @@ const DatePickerRangeHeader = ({
     value: endValue
   })));
 };
-var DatePickerRangeHeader_default = DatePickerRangeHeader;
-export {
-  DatePickerRangeHeader_default as default
-};
-//# sourceMappingURL=DatePickerRangeHeader.js.map
+
+export { DatePickerRangeHeader as default };

package/esm/components/DayPickerRangeController.js

@@ -0,0 +1,139 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useRef, useEffect } from 'react';
+import { DayPickerRangeController as DayPickerRangeController$1 } from 'react-dates';
+import { DatePickerNavigation, DatePickerDay, renderMonthElement } from '@elliemae/ds-date-picker';
+import { ChevronLeft } from '@elliemae/ds-icons';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["endDate", "startDate", "displayFormatDay", "focusedInput", "enableOutsideDays", "onDatesChange", "onFocusChange", "onOutsideClick", "isDayBlocked", "isDayHighlighted", "isOutsideRange", "onNextMonthClick", "onPrevMonthClick"];
+
+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 DayPickerRangeController = _ref => {
+  let {
+    endDate = undefined,
+    startDate = undefined,
+    displayFormatDay = 'D',
+    focusedInput = undefined,
+    enableOutsideDays = false,
+    onDatesChange = () => null,
+    onFocusChange = () => null,
+    onOutsideClick = () => null,
+    isDayBlocked = () => null,
+    isDayHighlighted = () => null,
+    isOutsideRange = () => null,
+    onNextMonthClick = () => null,
+    onPrevMonthClick = () => null
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const datePickerRef = useRef();
+  useEffect(() => {
+    const handleMouseUp = () => {
+      const focusedElement = document.activeElement;
+      focusedElement.blur();
+    };
+
+    const handleKeyDown = event => {
+      const [firstDay, ...restOfDays] = document.getElementsByClassName('CalendarMonthGrid_month__horizontal')[1].getElementsByClassName('CalendarDay');
+      const [lastDay] = restOfDays.slice(-1);
+      const focusedElement = document.activeElement;
+      const [prev, next] = document.getElementsByClassName('DayPickerNavigation_button');
+
+      switch (event.key) {
+        case 'Home':
+          event.stopPropagation();
+          firstDay.focus();
+          break;
+
+        case 'End':
+          event.stopPropagation();
+          lastDay.focus();
+          break;
+
+        case 'Enter':
+        case ' ':
+          if (focusedElement === prev) {
+            event.stopPropagation();
+            setTimeout(() => {
+              prev.focus();
+            }, 240);
+          } else if (focusedElement === next) {
+            event.stopPropagation();
+            setTimeout(() => {
+              next === null || next === void 0 ? void 0 : next.focus();
+            }, 240);
+          }
+
+          break;
+
+        case 'Tab':
+          if (firstDay === focusedElement || restOfDays.includes(focusedElement)) {
+            event.preventDefault();
+            prev.focus();
+          }
+
+          break;
+      }
+    };
+
+    datePickerRef.current.addEventListener('mouseup', handleMouseUp, false);
+    datePickerRef.current.addEventListener('keydown', handleKeyDown, false);
+    return () => {
+      if (datePickerRef.current) {
+        datePickerRef.current.removeEventListener('mouseup', handleMouseUp, false);
+        datePickerRef.current.removeEventListener('keydown', handleKeyDown, false);
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsx("div", {
+    ref: datePickerRef,
+    className: classNameBlock('wrapper-day-picker-single-date-controller'),
+    "data-testid": otherProps['data-testid'] || 'date-range-picker-controller',
+    children: /*#__PURE__*/jsx(DayPickerRangeController$1, _objectSpread(_objectSpread({}, otherProps), {}, {
+      isDayBlocked: isDayBlocked,
+      isDayHighlighted: isDayHighlighted,
+      isOutsideRange: isOutsideRange,
+      enableOutsideDays: enableOutsideDays,
+      endDate: endDate,
+      focused: true,
+      focusedInput: focusedInput,
+      hideKeyboardShortcutsPanel: true,
+      navNext: /*#__PURE__*/_jsx(DatePickerNavigation, {
+        className: classNameElement('navigation-next')
+      }),
+      navPrev: /*#__PURE__*/_jsx(DatePickerNavigation, {
+        className: classNameElement('navigation-prev'),
+        icon: ChevronLeft
+      }),
+      onDatesChange: onDatesChange,
+      onFocusChange: onFocusChange,
+      onOutsideClick: onOutsideClick,
+      onNextMonthClick: onNextMonthClick,
+      onPrevMonthClick: onPrevMonthClick,
+      renderDayContents: date => /*#__PURE__*/_jsx(DatePickerDay, {
+        className: classNameElement('day-contents'),
+        date: date.format(displayFormatDay)
+      }),
+      renderMonthElement: renderMonthElement,
+      startDate: startDate
+    }))
+  });
+};
+
+export { DayPickerRangeController as default };

package/esm/index.js

@@ -0,0 +1,3 @@
+export { DateRangePickerWithSchema, default } from './DSDateRangePicker.js';
+export { default as DayPickerRangeController } from './components/DayPickerRangeController.js';
+export { END_DATE, START_DATE } from './components/DSDateRangePickerImpl.js';

package/esm/isMaxDiffSafe.js

@@ -0,0 +1,15 @@
+/* eslint-disable max-params */
+const MAX_YEARS_DIFF = 150; // https://jira.elliemae.io/browse/PUI-4145
+
+const isMaxDiffSafe = (startDate, endDate, prevStart, prevEnd) => {
+  try {
+    const diff = Math.abs(endDate.diff(startDate, 'years'));
+    const diffStart = Math.abs(startDate.diff(prevStart, 'years'));
+    const diffEnd = Math.abs(endDate.diff(prevEnd, 'years'));
+    return diff < MAX_YEARS_DIFF && diffStart < MAX_YEARS_DIFF && diffEnd < MAX_YEARS_DIFF;
+  } catch (error) {
+    return true;
+  }
+};
+
+export { MAX_YEARS_DIFF, isMaxDiffSafe };