@elliemae/ds-date-range-picker 2.2.0-alpha.3 → 2.2.0-next.2

package/esm/components/DSDateRangePickerImpl.js

@@ -1,26 +1,40 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-import moment from "moment";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { MASK_TYPES, MASK_PIPES, DSFormItemLayout, DSInputMask } from "@elliemae/ds-form";
-import DSPopper from "@elliemae/ds-popper";
-import { DatePickerPicker, renderMonthElement } from "@elliemae/ds-date-picker";
-import DayPickerRangeController from "./DayPickerRangeController";
-import { isMaxDiffSafe } from "../isMaxDiffSafe";
-const START_DATE = "startDate";
-const END_DATE = "endDate";
-const { classNameElement, classNameBlock } = convertPropToCssClassName("datepicker");
-class DSDateRangePickerImpl extends React2.Component {
+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 = ({ startDate, endDate }) => {
-      const { onDatesChange } = this.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({
+          showPicker: false
+        });
       }
+
       this.setState({
         startDate,
         endDate,
@@ -28,55 +42,85 @@ class DSDateRangePickerImpl extends React2.Component {
         primaryEndInput: false
       });
     };
+
     this.onFocusChange = () => {
-      this.setState(({ focusedInput }) => ({
-        focusedInput: focusedInput === START_DATE ? END_DATE : START_DATE
-      }));
+      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.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");
+      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");
+      const {
+        endInput,
+        primaryEndInput,
+        endDate
+      } = this.state;
+      if (primaryEndInput && endInput) return endInput;
+      if (!endDate) return '';
+      return endDate.format('MMDDYYYY');
     };
+
     this.changeFocus = () => {
-      const { disabled } = this.props;
+      const {
+        disabled
+      } = this.props;
+
       if (!disabled) {
-        this.setState(() => ({ focusedInput: "startDate" }));
+        this.setState(() => ({
+          focusedInput: 'startDate'
+        }));
       }
     };
-    this.handleChangeStart = (e) => {
-      const { onChangeStartInput, isDayBlocked, minimumNights } = this.props;
-      const { endDate } = this.state;
+
+    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()) {
+
+      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?.isValid() && momentValue?.isValid();
+      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 isStartAcceptableWithSelectedEnd = !endDate || areDatesValid && (canEndBeSameAsStart && momentValue.diff(endDate, 'days') <= 0 || !canEndBeSameAsStart && momentValue.diff(endDate, 'days') < 0);
       const invalidDate = !isStartDateAcceptable || !isStartAcceptableWithSelectedEnd;
-      if (startDateBlocked)
-        momentValue = null;
+      if (startDateBlocked) momentValue = null;
       onChangeStartInput(momentValue);
-      this.setState((prevState) => ({
+      this.setState(prevState => ({
         startDate: momentValue,
         startInput: startInputVal,
         primaryStartInput: true,
@@ -84,24 +128,38 @@ class DSDateRangePickerImpl extends React2.Component {
         endDateError: !isStartDateAcceptable || !prevState.endDateError ? prevState.endDateError : !isStartAcceptableWithSelectedEnd
       }));
     };
-    this.handleChangeEnd = (e) => {
-      const { onChangeEndInput, isDayBlocked, minimumNights } = this.props;
-      const { startDate } = this.state;
+
+    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()) {
+
+      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?.isValid() && momentValue?.isValid();
+      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 || areDatesValid && (canEndBeSameAsStart && momentValue.diff(startDate, "days") >= 0 || !canEndBeSameAsStart && momentValue.diff(startDate, "days") > 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;
+      if (endDateBlocked) momentValue = null;
       onChangeEndInput(momentValue);
-      this.setState((prevState) => ({
+      this.setState(prevState => ({
         endDate: momentValue,
         endInput: endInputValue,
         primaryEndInput: true,
@@ -109,7 +167,13 @@ class DSDateRangePickerImpl extends React2.Component {
         endDateError: invalidDate
       }));
     };
-    this.handleChangeDate = ({ startDate: _start, endDate }) => {
+
+    this.handleChangeDate = _ref3 => {
+      let {
+        startDate: _start,
+        endDate
+      } = _ref3;
+
       if (_start && endDate) {
         this.setState({
           startDate: moment(_start),
@@ -118,11 +182,18 @@ class DSDateRangePickerImpl extends React2.Component {
           primaryEndInput: false
         });
       } else if (_start) {
-        this.setState({ startDate: moment(_start), primaryStartInput: false });
+        this.setState({
+          startDate: moment(_start),
+          primaryStartInput: false
+        });
       } else if (endDate) {
-        this.setState({ endDate, primaryEndInput: false });
+        this.setState({
+          endDate,
+          primaryEndInput: false
+        });
       }
     };
+
     this.state = {
       startDate: props.startDate ? moment(props.startDate) : null,
       endDate: props.endDate ? moment(props.endDate) : null,
@@ -132,14 +203,24 @@ class DSDateRangePickerImpl extends React2.Component {
       endDateError: false
     };
   }
+
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown, false);
+    document.addEventListener('keydown', this.handleKeyDown, false);
   }
+
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown, false);
+    document.removeEventListener('keydown', this.handleKeyDown, false);
   }
+
   render() {
-    const { startDate, endDate, focusedInput, showPicker, startDateError, endDateError } = this.state;
+    const {
+      startDate,
+      endDate,
+      focusedInput,
+      showPicker,
+      startDateError,
+      endDateError
+    } = this.state;
     const {
       disabled,
       displayFormatDay,
@@ -159,106 +240,91 @@ class DSDateRangePickerImpl extends React2.Component {
       hasError,
       validationMessage
     } = this.props;
-    const inputClass = classNameBlock("inputs", "range-picker");
-    const inputClassModifier = "";
+    const inputClass = classNameBlock('inputs', 'range-picker');
+    const inputClassModifier = '';
     const safeStartInputValue = this.getSafeStartInputValue();
     const safeEndInputValue = this.getSafeEndInputValue();
-    return /* @__PURE__ */ React2.createElement("div", {
-      className: `${inputClass} ${inputClassModifier}`
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: classNameBlock("wrapper-input-date-range-picker-controller")
-    }, /* @__PURE__ */ React2.createElement(DSFormItemLayout, {
+    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 }),
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
       pipe: MASK_PIPES.AUTO_CORRECT_DATE,
       value: safeStartInputValue,
       required: startDateRequired,
       hasError: hasError || startDateError,
       placeholder: "MM/DD/YYYY"
-    }), /* @__PURE__ */ React2.createElement(DSFormItemLayout, {
+    }), /*#__PURE__*/_jsx(DSFormItemLayout, {
       floatingLabel: true,
       inputComponent: DSInputMask,
       labelText: labelTo,
       mask: MASK_TYPES.DATE,
       onChange: this.handleChangeEnd,
-      onFocus: () => this.setState({ showPicker: false }),
+      onFocus: () => this.setState({
+        showPicker: false
+      }),
       pipe: MASK_PIPES.AUTO_CORRECT_DATE,
       value: safeEndInputValue,
       required: endDateRequired,
       hasError: hasError || endDateError,
-      validationMessage,
+      validationMessage: validationMessage,
       placeholder: "MM/DD/YYYY"
-    })), /* @__PURE__ */ React2.createElement("div", {
-      className: classNameBlock("wrapper-button-date-range-picker-controller")
-    }, /* @__PURE__ */ React2.createElement(DSPopper, {
-      contentComponent: /* @__PURE__ */ React2.createElement("div", null, showPicker && /* @__PURE__ */ React2.createElement(DayPickerRangeController, {
-        enableOutsideDays,
-        isDayBlocked,
-        isDayHighlighted,
-        isOutsideRange,
-        displayFormatDay,
-        endDate,
-        focusedInput,
+    })), /*#__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: minimumNights,
         onDatesChange: this.onDatesChange,
         onFocusChange: this.onFocusChange,
-        onOutsideClick: (e) => {
+        onOutsideClick: e => {
           onOutsideClick(e);
-          this.setState({ showPicker: false });
+          this.setState({
+            showPicker: false
+          });
         },
-        onNextMonthClick,
-        onPrevMonthClick,
-        startDate,
-        renderMonthElement
+        onNextMonthClick: onNextMonthClick,
+        onPrevMonthClick: onPrevMonthClick,
+        startDate: startDate,
+        renderMonthElement: renderMonthElement
       })),
       isOpen: showPicker && !startDateError && !endDateError,
-      onClose,
+      onClose: onClose,
       placement: "bottom-end",
       showArrow: false,
-      triggerComponent: /* @__PURE__ */ React2.createElement("div", {
-        onFocus: () => this.setState({ showPicker: true })
-      }, /* @__PURE__ */ React2.createElement(DatePickerPicker, {
-        className: classNameElement("picker"),
-        disabled,
-        onClick: () => this.setState({ showPicker: true })
-      }), hasError && validationMessage && /* @__PURE__ */ React2.createElement("div", {
-        style: { height: 15 }
+      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
+        }
       }))
     })));
   }
+
 }
-DSDateRangePickerImpl.propTypes = {
-  startDate: PropTypes.instanceOf(Date, moment),
-  endDate: PropTypes.instanceOf(Date, moment),
-  onDatesChange: PropTypes.func,
-  onChangeStartInput: PropTypes.func,
-  onChangeEndInput: PropTypes.func,
-  onNextMonthClick: PropTypes.func,
-  onPrevMonthClick: PropTypes.func,
-  onClose: PropTypes.func,
-  onOutsideClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  displayFormatDay: PropTypes.string,
-  minimumNights: PropTypes.number,
-  labelTo: PropTypes.string,
-  labelFrom: PropTypes.string,
-  isDayBlocked: PropTypes.func,
-  isDayHighlighted: PropTypes.func,
-  isOutsideRange: PropTypes.func,
-  enableOutsideDays: PropTypes.bool,
-  startDateRequired: PropTypes.bool,
-  endDateRequired: PropTypes.bool,
-  hasError: PropTypes.bool,
-  validationMessage: PropTypes.string
-};
-export {
-  END_DATE,
-  START_DATE,
-  DSDateRangePickerImpl as default
-};
-//# sourceMappingURL=DSDateRangePickerImpl.js.map
+
+export { END_DATE, START_DATE, DSDateRangePickerImpl as default };

package/esm/components/DatePickerLabel/DatePickerLabel.js

@@ -1,10 +1,14 @@
-import * as React from "react";
-import React2 from "react";
-const Label = ({ className = "date-picker-label", label = "" }) => /* @__PURE__ */ React2.createElement("div", {
-  className
-}, /* @__PURE__ */ React2.createElement("span", null, label));
-var DatePickerLabel_default = Label;
-export {
-  DatePickerLabel_default as default
+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));
 };
-//# sourceMappingURL=DatePickerLabel.js.map
+
+export { Label as default };

package/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 };