@elliemae/ds-date-time-recurrence-picker 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/components/DateTimeRecurenceSelectorImpl.js

@@ -1,38 +1,76 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { isEqual } from "lodash";
-import "react-dates/initialize";
-import { components } from "react-select";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { DSComboBox } from "@elliemae/ds-form";
-import DateTimeRangeModal from "./DateTimeRangeModal/DateTimeRangeModal";
-const { cssClassName, classNameElement, classNameBlock } = convertPropToCssClassName("date-time-predefined-range-selector");
+import 'core-js/modules/esnext.async-iterator.filter.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { Component } from 'react';
+import { isEqual } from 'lodash';
+import 'react-dates/initialize';
+import { components } from 'react-select';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { DSComboBox } from '@elliemae/ds-form';
+import DateTimeRangeModal from './DateTimeRangeModal/DateTimeRangeModal.js';
+import { jsxs, 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 {
+  cssClassName,
+  classNameElement,
+  classNameBlock
+} = convertPropToCssClassName('date-time-predefined-range-selector');
+
 class DateTimeRecurenceSelectorImpl extends Component {
   constructor(props) {
     super(props);
+
     this.onChange = () => {
-      const { onChange } = this.props;
-      const { customRange, selected } = this.state;
+      const {
+        onChange
+      } = this.props;
+      const {
+        customRange,
+        selected
+      } = this.state;
       onChange(selected, customRange);
     };
-    this.onCustomDateTimeRange = (customRange) => {
-      this.setState({ customRange });
+
+    this.onCustomDateTimeRange = customRange => {
+      this.setState({
+        customRange
+      });
     };
-    this.onChangeDropdown = (value) => {
-      const { dropdownPreselectedOptions } = this.props;
-      const selected = dropdownPreselectedOptions.find((op) => op.value === value);
-      const { onChange } = this.props;
+
+    this.onChangeDropdown = value => {
+      const {
+        dropdownPreselectedOptions
+      } = this.props;
+      const selected = dropdownPreselectedOptions.find(op => op.value === value);
+      const {
+        onChange
+      } = this.props;
+
       if (!selected) {
-        this.setState((previousState) => ({
+        this.setState(previousState => ({
           selected: value,
           previousSelection: previousState.selected
         }));
         this.handleOpenModal();
       } else if (selected) {
         onChange(value);
-        this.setState({ selected: value, openModal: false });
+        this.setState({
+          selected: value,
+          openModal: false
+        });
       }
     };
+
     this.handleConfirm = () => {
       const {
         onConfirmField,
@@ -43,48 +81,60 @@ class DateTimeRecurenceSelectorImpl extends Component {
         useTimezoneSelector,
         allowMultipleDaysOfWeek
       } = this.props;
-      const { customRange } = this.state;
-      this.props.advanceOption.label = /* @__PURE__ */ React2.createElement(CustomOptionRender, {
-        allowMultipleDaysOfWeek,
-        customRange,
-        dayOfMonthOptionsEnable,
-        dayOfWeekOptionsEnable,
-        dayOfYearOptionsEnable,
-        useTimezoneSelector
+      const {
+        customRange
+      } = this.state;
+      this.props.advanceOption.label = /*#__PURE__*/_jsx(CustomOptionRender, {
+        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+        customRange: customRange,
+        dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+        dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+        useTimezoneSelector: useTimezoneSelector
       });
       this.onChange();
       this.handleCloseModal();
       onConfirmField();
     };
+
     this.handleReject = () => {
-      const { onRejectField } = this.props;
+      const {
+        onRejectField
+      } = this.props;
       this.handleActionClose();
       onRejectField();
     };
+
     this.handleActionClose = () => {
-      this.setState((previousState) => ({
+      this.setState(previousState => ({
         selected: previousState.previousSelection
       }));
       this.handleCloseModal();
     };
-    this.handleOpenModal = () => this.setState({ openModal: true });
+
+    this.handleOpenModal = () => this.setState({
+      openModal: true
+    });
+
     this.handleCloseModal = () => {
-      this.setState({ openModal: false });
-      setTimeout(() => document.activeElement.blur(), 0);
+      this.setState({
+        openModal: false
+      });
+      setTimeout(() => document.activeElement.blur(), 0); // https://github.com/reactjs/react-modal/issues/680
     };
+
     this.initCustomRange = props.customRange;
     this.state = {
-      previousCustomRange: {
-        ...props.customRange
-      },
+      // eslint-disable-next-line react/no-unused-state
+      previousCustomRange: _objectSpread({}, props.customRange),
       openModal: props.openModal || false,
       selected: props.value,
-      customRange: {
-        ...props.customRange
-      }
+      customRange: _objectSpread({}, props.customRange)
     };
+
     if (props.value === props.advanceOption.value) {
-      props.advanceOption.label = /* @__PURE__ */ React2.createElement(props.customOptionRender, {
+      // eslint-disable-next-line no-param-reassign
+      props.advanceOption.label = /*#__PURE__*/_jsx(props.customOptionRender, {
         allowMultipleDaysOfWeek: props.allowMultipleDaysOfWeek,
         customRange: props.customRange,
         dayOfMonthOptionsEnable: props.dayOfMonthOptionsEnable,
@@ -94,10 +144,12 @@ class DateTimeRecurenceSelectorImpl extends Component {
       });
     }
   }
+
   static getDerivedStateFromProps(props, state) {
     if (props.customRange && !isEqual(props.customRange, state.previousCustomRange)) {
       if (props.value === props.advanceOption.value) {
-        props.advanceOption.label = /* @__PURE__ */ React2.createElement(props.customOptionRender, {
+        // eslint-disable-next-line no-param-reassign
+        props.advanceOption.label = /*#__PURE__*/_jsx(props.customOptionRender, {
           allowMultipleDaysOfWeek: props.allowMultipleDaysOfWeek,
           customRange: props.customRange,
           dayOfMonthOptionsEnable: props.dayOfMonthOptionsEnable,
@@ -106,18 +158,17 @@ class DateTimeRecurenceSelectorImpl extends Component {
           useTimezoneSelector: props.useTimezoneSelector
         });
       }
+
       return {
-        previousCustomRange: {
-          ...props.customRange
-        },
-        customRange: {
-          ...props.customRange
-        },
+        previousCustomRange: _objectSpread({}, props.customRange),
+        customRange: _objectSpread({}, props.customRange),
         selected: props.value
       };
     }
+
     return null;
   }
+
   render() {
     const {
       placeholder,
@@ -154,72 +205,73 @@ class DateTimeRecurenceSelectorImpl extends Component {
       displayYearCustomOption,
       containerProps
     } = this.props;
-    const { selected, openModal, customRange } = this.state;
+    const {
+      selected,
+      openModal,
+      customRange
+    } = this.state;
     const options = [...dropdownPreselectedOptions, advanceOption];
-    return /* @__PURE__ */ React2.createElement("div", {
-      ...containerProps,
-      className: `${cssClassName} ${className}`
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: `${classNameBlock("container-selector")}`
-    }, /* @__PURE__ */ React2.createElement(DSComboBox, {
-      className: `${classNameElement("dropdown-field-selector")}`,
-      components: {
-        Option: (props) => /* @__PURE__ */ React2.createElement(components.Option, {
-          ...props,
-          allowMultipleDaysOfWeek,
-          dayOfMonthOptionsEnable,
-          dayOfWeekOptionsEnable,
-          dayOfYearOptionsEnable,
-          useTimezoneSelector
-        }),
-        IndicatorSeparator: () => null
-      },
-      onChange: this.onChangeDropdown,
-      onKeyDown: this.onKeyDown,
-      options,
-      placeholder,
-      value: selected
-    })), /* @__PURE__ */ React2.createElement(DateTimeRangeModal, {
-      allowMultipleDaysOfWeek,
-      appElement,
-      confirmLabel,
-      dayOfMonthAsCurrentDateOptions,
-      dayOfMonthOptionsEnable,
-      dayOfWeekOptionsEnable,
-      dayOfYearAsCurrentDateOptions,
-      dayOfYearOptionsEnable,
-      displayCurrentMonthYear,
-      displayMonthCustomOption,
-      displayYearCustomOption,
-      dropdownDayOfMonthOptions,
-      dropdownDayOfWeekOptions,
-      dropdownDayOfYearOptions,
-      dropdownRepeatOptions,
-      endDayBlocked,
-      endTimesOptions,
-      endTypesOptions,
-      isOpen: openModal,
-      isValidRecurrence,
-      modalSize,
-      modalTitle,
-      modalType,
-      onClose: this.handleActionClose,
-      onConfirmField: this.handleConfirm,
-      onCustomDateTimeRange: this.onCustomDateTimeRange,
-      onRejectField: this.handleReject,
-      placeholder,
-      rangeValue: customRange,
-      rejectLabel,
-      repeatFrecuencyCustomProps,
-      startDayBlocked,
-      timeZoneOptions,
-      useTimezoneSelector,
-      validationMessage
+    return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "".concat(classNameBlock('container-selector'))
+      }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+        className: "".concat(classNameElement('dropdown-field-selector')),
+        components: {
+          Option: props => /*#__PURE__*/jsx(components.Option, _objectSpread(_objectSpread({}, props), {}, {
+            allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+            dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+            dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+            dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+            useTimezoneSelector: useTimezoneSelector
+          })),
+          IndicatorSeparator: () => null
+        },
+        onChange: this.onChangeDropdown,
+        onKeyDown: this.onKeyDown,
+        options: options,
+        placeholder: placeholder,
+        value: selected
+      })), /*#__PURE__*/_jsx(DateTimeRangeModal, {
+        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+        appElement: appElement,
+        confirmLabel: confirmLabel,
+        dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+        dayOfMonthOptionsEnable: dayOfMonthOptionsEnable,
+        dayOfWeekOptionsEnable: dayOfWeekOptionsEnable,
+        dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+        dayOfYearOptionsEnable: dayOfYearOptionsEnable,
+        displayCurrentMonthYear: displayCurrentMonthYear,
+        displayMonthCustomOption: displayMonthCustomOption,
+        displayYearCustomOption: displayYearCustomOption,
+        dropdownDayOfMonthOptions: dropdownDayOfMonthOptions,
+        dropdownDayOfWeekOptions: dropdownDayOfWeekOptions,
+        dropdownDayOfYearOptions: dropdownDayOfYearOptions,
+        dropdownRepeatOptions: dropdownRepeatOptions,
+        endDayBlocked: endDayBlocked,
+        endTimesOptions: endTimesOptions,
+        endTypesOptions: endTypesOptions,
+        isOpen: openModal,
+        isValidRecurrence: isValidRecurrence,
+        modalSize: modalSize,
+        modalTitle: modalTitle,
+        modalType: modalType,
+        onClose: this.handleActionClose,
+        onConfirmField: this.handleConfirm,
+        onCustomDateTimeRange: this.onCustomDateTimeRange,
+        onRejectField: this.handleReject,
+        placeholder: placeholder,
+        rangeValue: customRange,
+        rejectLabel: rejectLabel,
+        repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+        startDayBlocked: startDayBlocked,
+        timeZoneOptions: timeZoneOptions,
+        useTimezoneSelector: useTimezoneSelector,
+        validationMessage: validationMessage
+      })]
     }));
   }
+
 }
-var DateTimeRecurenceSelectorImpl_default = DateTimeRecurenceSelectorImpl;
-export {
-  DateTimeRecurenceSelectorImpl_default as default
-};
-//# sourceMappingURL=DateTimeRecurenceSelectorImpl.js.map
+
+export { DateTimeRecurenceSelectorImpl as default };

package/esm/components/DayOfMonthPicker/DayOfMonthPicker.js

@@ -1,58 +1,68 @@
-import * as React from "react";
-import React2 from "react";
-import { DSComboBox } from "@elliemae/ds-form";
-import { nthDay } from "../helpers/nthday";
-import { dropdownDayOfMonthOptions } from "../../options/dropdownDayOfMonthOptions";
-import FormLabel from "../Forms/FormLabel";
-import FormFieldGroup from "../Forms/FormFieldGroup";
-import FormGroup from "../Forms/FormGroup";
-const DaysOfMonthPicker = ({
-  onDayChange = () => null,
-  dayOfMonthValue = dropdownDayOfMonthOptions[0].value,
-  dayOfMonthOptions = dropdownDayOfMonthOptions,
-  displayOptionsAsCurrentDate = true,
-  currentDate = null,
-  inputLabel = "On",
-  dayOfMonthAsCurrentDateOptions,
-  displayMonthCustomOption
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'react';
+import { DSComboBox } from '@elliemae/ds-form';
+import { nthDay } from '../helpers/nthday.js';
+import { dropdownDayOfMonthOptions } from '../../options/dropdownDayOfMonthOptions.js';
+import FormLabel from '../Forms/FormLabel.js';
+import FormFieldGroup from '../Forms/FormFieldGroup.js';
+import FormGroup from '../Forms/FormGroup.js';
+
+const DaysOfMonthPicker = _ref => {
+  let {
+    onDayChange = () => null,
+    dayOfMonthValue = dropdownDayOfMonthOptions[0].value,
+    dayOfMonthOptions = dropdownDayOfMonthOptions,
+    displayOptionsAsCurrentDate = true,
+    currentDate = null,
+    inputLabel = 'On',
+    dayOfMonthAsCurrentDateOptions,
+    displayMonthCustomOption
+  } = _ref;
   let options = dayOfMonthOptions;
+
   if (displayOptionsAsCurrentDate) {
-    const numberoption = `on the ${currentDate.format("Do")} of the month`;
-    const nthoption = `on the ${nthDay(currentDate.toDate())} ${currentDate.format("dddd")} of the month`;
+    const numberoption = "on the ".concat(currentDate.format('Do'), " of the month");
+    const nthoption = "on the ".concat(nthDay(currentDate.toDate()), " ").concat(currentDate.format('dddd'), " of the month");
     options = [];
-    if (dayOfMonthAsCurrentDateOptions.indexOf("numberOfMonth") > -1) {
+
+    if (dayOfMonthAsCurrentDateOptions.indexOf('numberOfMonth') > -1) {
       options.push({
-        number: currentDate.format("DD"),
+        number: currentDate.format('DD'),
         label: numberoption,
         value: numberoption,
-        dayOfMonthRepeatPickerKey: "numberOfMonth"
+        dayOfMonthRepeatPickerKey: 'numberOfMonth'
       });
     }
-    if (dayOfMonthAsCurrentDateOptions.indexOf("dayOfTheWeekOfMonth") > -1) {
+
+    if (dayOfMonthAsCurrentDateOptions.indexOf('dayOfTheWeekOfMonth') > -1) {
       options.push({
-        numberLabel: `${nthDay(currentDate.toDate())} ${currentDate.format("dddd")}`,
+        numberLabel: "".concat(nthDay(currentDate.toDate()), " ").concat(currentDate.format('dddd')),
         label: nthoption,
         value: nthoption,
-        dayOfMonthRepeatPickerKey: "dayOfTheWeekOfMonth"
+        dayOfMonthRepeatPickerKey: 'dayOfTheWeekOfMonth'
       });
     }
+
     if (displayMonthCustomOption) {
       options = [...options, ...dayOfMonthOptions];
     }
   }
-  const selected = options.find((option) => option.value === dayOfMonthValue) ? dayOfMonthValue : null;
+
+  const selected = options.find(option => option.value === dayOfMonthValue) ? dayOfMonthValue : null;
+
   if (!selected) {
     onDayChange(options[0].value, options[0]);
   }
-  return /* @__PURE__ */ React2.createElement(FormGroup, null, /* @__PURE__ */ React2.createElement(FormLabel, null, inputLabel), /* @__PURE__ */ React2.createElement(FormFieldGroup, null, /* @__PURE__ */ React2.createElement(DSComboBox, {
-    onChange: (value) => onDayChange(value, options.find((o) => o.value === value)),
-    options,
+
+  return /*#__PURE__*/_jsx(FormGroup, {}, void 0, /*#__PURE__*/_jsx(FormLabel, {}, void 0, inputLabel), /*#__PURE__*/_jsx(FormFieldGroup, {}, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+    onChange: value => onDayChange(value, options.find(o => o.value === value)),
+    options: options,
     value: selected
   })));
 };
-var DayOfMonthPicker_default = DaysOfMonthPicker;
-export {
-  DayOfMonthPicker_default as default
-};
-//# sourceMappingURL=DayOfMonthPicker.js.map
+
+export { DaysOfMonthPicker as default };

package/esm/components/DayOfYearPicker/DayOfYearPicker.js

@@ -1,54 +1,62 @@
-import * as React from "react";
-import React2 from "react";
-import { DSComboBox } from "@elliemae/ds-form";
-import { nthDay } from "../helpers/nthday";
-import { dropdownDayOfMonthOptions } from "../../options/dropdownDayOfMonthOptions";
-import FormGroup from "../Forms/FormGroup";
-import FormLabel from "../Forms/FormLabel";
-import FormFieldGroup from "../Forms/FormFieldGroup";
-const DaysOfMonthPicker = ({
-  onDayChange = () => null,
-  dayOfMonthValue = dropdownDayOfMonthOptions[0].value,
-  dayOfMonthOptions = dropdownDayOfMonthOptions,
-  displayOptionsAsCurrentDate = true,
-  currentDate = null,
-  inputLabel = "On",
-  dayOfYearAsCurrentDateOptions,
-  displayYearCustomOption
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'react';
+import { DSComboBox } from '@elliemae/ds-form';
+import { nthDay } from '../helpers/nthday.js';
+import { dropdownDayOfMonthOptions } from '../../options/dropdownDayOfMonthOptions.js';
+import FormGroup from '../Forms/FormGroup.js';
+import FormLabel from '../Forms/FormLabel.js';
+import FormFieldGroup from '../Forms/FormFieldGroup.js';
+
+const DaysOfMonthPicker = _ref => {
+  let {
+    onDayChange = () => null,
+    dayOfMonthValue = dropdownDayOfMonthOptions[0].value,
+    dayOfMonthOptions = dropdownDayOfMonthOptions,
+    displayOptionsAsCurrentDate = true,
+    currentDate = null,
+    inputLabel = 'On',
+    dayOfYearAsCurrentDateOptions,
+    displayYearCustomOption
+  } = _ref;
   let options = dayOfMonthOptions;
+
   if (displayOptionsAsCurrentDate) {
-    const numberoption = `on the ${currentDate.format("Do")} of ${currentDate.format("MMMM")}`;
-    const nthoption = `on the ${nthDay(currentDate.toDate())} ${currentDate.format("dddd")} of ${currentDate.format("MMMM")}`;
+    const numberoption = "on the ".concat(currentDate.format('Do'), " of ").concat(currentDate.format('MMMM'));
+    const nthoption = "on the ".concat(nthDay(currentDate.toDate()), " ").concat(currentDate.format('dddd'), " of ").concat(currentDate.format('MMMM'));
     options = [];
-    if (dayOfYearAsCurrentDateOptions.indexOf("numberOfYear") > -1) {
+
+    if (dayOfYearAsCurrentDateOptions.indexOf('numberOfYear') > -1) {
       options.push({
         label: numberoption,
         value: numberoption,
-        dayOfYearRepeatPickerKey: "numberOfYear"
+        dayOfYearRepeatPickerKey: 'numberOfYear'
       });
     }
-    if (dayOfYearAsCurrentDateOptions.indexOf("dayOfTheMonthOfYear") > -1) {
+
+    if (dayOfYearAsCurrentDateOptions.indexOf('dayOfTheMonthOfYear') > -1) {
       options.push({
         label: nthoption,
         value: nthoption,
-        dayOfYearRepeatPickerKey: "dayOfTheMonthOfYear"
+        dayOfYearRepeatPickerKey: 'dayOfTheMonthOfYear'
       });
     }
+
     if (displayYearCustomOption) {
       options = [...options, ...dayOfMonthOptions];
     }
   }
-  return /* @__PURE__ */ React2.createElement(FormGroup, null, /* @__PURE__ */ React2.createElement(FormLabel, null, inputLabel), /* @__PURE__ */ React2.createElement(FormFieldGroup, null, /* @__PURE__ */ React2.createElement(DSComboBox, {
-    onChange: (value) => {
-      onDayChange(value, options.find((o) => o.value === value));
+
+  return /*#__PURE__*/_jsx(FormGroup, {}, void 0, /*#__PURE__*/_jsx(FormLabel, {}, void 0, inputLabel), /*#__PURE__*/_jsx(FormFieldGroup, {}, void 0, /*#__PURE__*/_jsx(DSComboBox, {
+    onChange: value => {
+      onDayChange(value, options.find(o => o.value === value));
     },
-    options,
+    options: options,
     value: dayOfMonthValue
   })));
 };
-var DayOfYearPicker_default = DaysOfMonthPicker;
-export {
-  DayOfYearPicker_default as default
-};
-//# sourceMappingURL=DayOfYearPicker.js.map
+
+export { DaysOfMonthPicker as default };