@elliemae/ds-date-time-recurrence-picker 1.61.0 → 2.0.0-alpha.12

package/esm/components/DateTimeRangeModalImpl/DateTimeRangeModalImpl.js

@@ -1,11 +1,12 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
-import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
-import React, { Component } from 'react';
+import 'core-js/modules/es.string.replace.js';
+import { Component } from 'react';
 import moment from 'moment';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
 import DSModal from '@elliemae/ds-modal';
@@ -19,81 +20,59 @@ import DaysOfMonthPicker from '../DayOfMonthPicker/DayOfMonthPicker.js';
 import DaysOfMonthPicker$1 from '../DayOfYearPicker/DayOfYearPicker.js';
 import TimeZonePicker from '../TimeZonePicker/TimeZonePicker.js';
 import ValidationMessage from '../ValidationMessage/ValidationMessage.js';
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-form';
-import '../Forms/FormGroup.js';
-import '../Forms/FormLabel.js';
-import '../Forms/FormFieldGroup.js';
-import '../Forms/FormField.js';
-import '../../options/dropdownDayOfWeekOptions.js';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-time-picker';
-import '../../options/endTypesOptions.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '../helpers/nthday.js';
-import '../../options/dropdownDayOfMonthOptions.js';
-import '../FieldWrapper/FieldWrapper.js';
-import '../LabelWrapper/LabelWrapper.js';
+
+var _hr, _p;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var _convertPropToCssClas = convertPropToCssClassName('date-time-predefined-range-selector'),
-    cssClassName = _convertPropToCssClas.cssClassName;
-
-var DateTimePredefinedRangeSelectorImpl = /*#__PURE__*/function (_Component) {
-  _inherits(DateTimePredefinedRangeSelectorImpl, _Component);
-
-  var _super = _createSuper(DateTimePredefinedRangeSelectorImpl);
-
-  function DateTimePredefinedRangeSelectorImpl(props) {
-    var _this;
-
-    _classCallCheck(this, DateTimePredefinedRangeSelectorImpl);
-
-    _this = _super.call(this, props);
-
-    _this.onChange = function () {
-      var onCustomDateTimeRange = _this.props.onCustomDateTimeRange;
-      onCustomDateTimeRange(_this.state);
+const {
+  cssClassName
+} = convertPropToCssClassName('date-time-predefined-range-selector');
+
+class DateTimePredefinedRangeSelectorImpl extends Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = () => {
+      const {
+        onCustomDateTimeRange
+      } = this.props;
+      onCustomDateTimeRange(this.state);
     };
 
-    _this.onQtyRepeatPickerInput = function (value) {
-      _this.setState({
+    this.onQtyRepeatPickerInput = value => {
+      this.setState({
         qtyRepeatPickerInput: value.replace(/[^0-9]/g, '')
-      }, function () {
-        _this.onChange();
+      }, () => {
+        this.onChange();
       });
     };
 
-    var dropdownDayOfMonthOptions = props.dropdownDayOfMonthOptions,
-        dropdownDayOfWeekOptions = props.dropdownDayOfWeekOptions,
-        dropdownDayOfYearOptions = props.dropdownDayOfYearOptions,
-        dropdownRepeatOptions = props.dropdownRepeatOptions,
-        dayOfMonthOptionsEnable = props.dayOfMonthOptionsEnable,
-        dayOfWeekOptionsEnable = props.dayOfWeekOptionsEnable,
-        dayOfYearOptionsEnable = props.dayOfYearOptionsEnable,
-        useTimezoneSelector = props.useTimezoneSelector,
-        _props$rangeValue = props.rangeValue,
-        startDateInput = _props$rangeValue.startDateInput,
-        startTimeInput = _props$rangeValue.startTimeInput,
-        qtyRepeatPickerInput = _props$rangeValue.qtyRepeatPickerInput,
-        typeRepeatPickerInput = _props$rangeValue.typeRepeatPickerInput,
-        dayWeekRepeatPickerInput = _props$rangeValue.dayWeekRepeatPickerInput,
-        endDateInput = _props$rangeValue.endDateInput,
-        endTypeInput = _props$rangeValue.endTypeInput,
-        endTimesInput = _props$rangeValue.endTimesInput,
-        dayOfMonthRepeatPickerInput = _props$rangeValue.dayOfMonthRepeatPickerInput,
-        dayOfYearRepeatPickerInput = _props$rangeValue.dayOfYearRepeatPickerInput,
-        timezonePickerInput = _props$rangeValue.timezonePickerInput;
-    _this.state = {
+    const {
+      dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions,
+      dropdownRepeatOptions,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      useTimezoneSelector,
+      rangeValue: {
+        startDateInput,
+        startTimeInput,
+        qtyRepeatPickerInput,
+        typeRepeatPickerInput,
+        dayWeekRepeatPickerInput,
+        endDateInput,
+        endTypeInput,
+        endTimesInput,
+        dayOfMonthRepeatPickerInput,
+        dayOfYearRepeatPickerInput,
+        timezonePickerInput
+      }
+    } = props;
+    this.state = {
       alertReplace: '',
       alertModal: false,
       startDateInput: startDateInput || moment(),
@@ -108,262 +87,220 @@ var DateTimePredefinedRangeSelectorImpl = /*#__PURE__*/function (_Component) {
       dayOfYearRepeatPickerInput: !dayOfYearOptionsEnable ? null : dayOfYearRepeatPickerInput || dropdownDayOfYearOptions[0].value,
       timezonePickerInput: !useTimezoneSelector ? null : timezonePickerInput || dropdownTimeZoneOptions[0].value
     };
-
-    _this.onChange();
-
-    _this.onStartDateChangeInput = _this.onStartDateChangeInput.bind(_assertThisInitialized(_this));
-    _this.onStartTimeChangeInput = _this.onStartTimeChangeInput.bind(_assertThisInitialized(_this));
-    _this.onTimeZonePickerInput = _this.onTimeZonePickerInput.bind(_assertThisInitialized(_this));
-    _this.onTypeRepeatPickerInput = _this.onTypeRepeatPickerInput.bind(_assertThisInitialized(_this));
-    _this.onDayOfWeekRepeatPickerInput = _this.onDayOfWeekRepeatPickerInput.bind(_assertThisInitialized(_this));
-    _this.onDayOfMonthRepeatChangeInput = _this.onDayOfMonthRepeatChangeInput.bind(_assertThisInitialized(_this));
-    _this.onDayOfYearRepeatChangeInput = _this.onDayOfYearRepeatChangeInput.bind(_assertThisInitialized(_this));
-    _this.onEndDateChangeInput = _this.onEndDateChangeInput.bind(_assertThisInitialized(_this));
-    _this.onEndTimesChangeInput = _this.onEndTimesChangeInput.bind(_assertThisInitialized(_this));
-    _this.onEndTypeChangeInput = _this.onEndTypeChangeInput.bind(_assertThisInitialized(_this));
-    return _this;
+    this.onChange();
+    this.onStartDateChangeInput = this.onStartDateChangeInput.bind(this);
+    this.onStartTimeChangeInput = this.onStartTimeChangeInput.bind(this);
+    this.onTimeZonePickerInput = this.onTimeZonePickerInput.bind(this);
+    this.onTypeRepeatPickerInput = this.onTypeRepeatPickerInput.bind(this);
+    this.onDayOfWeekRepeatPickerInput = this.onDayOfWeekRepeatPickerInput.bind(this);
+    this.onDayOfMonthRepeatChangeInput = this.onDayOfMonthRepeatChangeInput.bind(this);
+    this.onDayOfYearRepeatChangeInput = this.onDayOfYearRepeatChangeInput.bind(this);
+    this.onEndDateChangeInput = this.onEndDateChangeInput.bind(this);
+    this.onEndTimesChangeInput = this.onEndTimesChangeInput.bind(this);
+    this.onEndTypeChangeInput = this.onEndTypeChangeInput.bind(this);
   }
 
-  _createClass(DateTimePredefinedRangeSelectorImpl, [{
-    key: "onTypeRepeatPickerInput",
-    value: function onTypeRepeatPickerInput(value) {
-      var _this2 = this;
-
-      var update = {
-        typeRepeatPickerInput: value
-      };
-
-      if (value !== DropdownRepeatOptionsTypes.MONTH) {
-        update.dayOfMonthRepeatPickerInput = undefined;
-        update.dayOfMonthRepeatPickerKey = undefined;
-      }
-
-      if (value !== DropdownRepeatOptionsTypes.YEAR) {
-        update.dayOfYearRepeatPickerInput = undefined;
-        update.dayOfYearRepeatPickerKey = undefined;
-      }
+  onTypeRepeatPickerInput(value) {
+    const update = {
+      typeRepeatPickerInput: value
+    };
 
-      this.setState(_objectSpread({}, update), function () {
-        _this2.onChange();
-      });
+    if (value !== DropdownRepeatOptionsTypes.MONTH) {
+      update.dayOfMonthRepeatPickerInput = undefined;
+      update.dayOfMonthRepeatPickerKey = undefined;
     }
-  }, {
-    key: "onDayOfWeekRepeatPickerInput",
-    value: function onDayOfWeekRepeatPickerInput(value) {
-      var _this3 = this;
 
-      this.setState({
-        dayWeekRepeatPickerInput: value
-      }, function () {
-        _this3.onChange();
-      });
+    if (value !== DropdownRepeatOptionsTypes.YEAR) {
+      update.dayOfYearRepeatPickerInput = undefined;
+      update.dayOfYearRepeatPickerKey = undefined;
     }
-  }, {
-    key: "onEndTypeChangeInput",
-    value: function onEndTypeChangeInput(value) {
-      var _this4 = this;
 
-      this.setState({
-        endTypeInput: value
-      }, function () {
-        _this4.onChange();
-      });
-    }
-  }, {
-    key: "onEndTimesChangeInput",
-    value: function onEndTimesChangeInput(value) {
-      var _this5 = this;
+    this.setState(_objectSpread({}, update), () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        endTimesInput: value
-      }, function () {
-        _this5.onChange();
-      });
-    }
-  }, {
-    key: "onEndDateChangeInput",
-    value: function onEndDateChangeInput(value) {
-      var _this6 = this;
+  onDayOfWeekRepeatPickerInput(value) {
+    this.setState({
+      dayWeekRepeatPickerInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        endDateInput: value
-      }, function () {
-        _this6.onChange();
-      });
-    }
-  }, {
-    key: "onStartDateChangeInput",
-    value: function onStartDateChangeInput(value) {
-      var _this7 = this;
+  onEndTypeChangeInput(value) {
+    this.setState({
+      endTypeInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        startDateInput: value
-      }, function () {
-        _this7.onChange();
-      });
-    }
-  }, {
-    key: "onStartTimeChangeInput",
-    value: function onStartTimeChangeInput(value) {
-      var _this8 = this;
+  onEndTimesChangeInput(value) {
+    this.setState({
+      endTimesInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        startTimeInput: value
-      }, function () {
-        _this8.onChange();
-      });
-    }
-  }, {
-    key: "onDayOfMonthRepeatChangeInput",
-    value: function onDayOfMonthRepeatChangeInput(value, option) {
-      var _this9 = this;
+  onEndDateChangeInput(value) {
+    this.setState({
+      endDateInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        dayOfMonthRepeatPickerInput: value,
-        dayOfMonthRepeatPickerKey: option.dayOfMonthRepeatPickerKey,
-        alertModal: option.number > 28 || (option.numberLabel || '').includes('Fifth'),
-        alertReplace: option.number || "".concat(option.numberLabel, " ")
-      }, function () {
-        _this9.onChange();
-      });
-    }
-  }, {
-    key: "onDayOfYearRepeatChangeInput",
-    value: function onDayOfYearRepeatChangeInput(value, option) {
-      var _this10 = this;
+  onStartDateChangeInput(value) {
+    this.setState({
+      startDateInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        dayOfYearRepeatPickerInput: value,
-        dayOfYearRepeatPickerKey: option.dayOfYearRepeatPickerKey
-      }, function () {
-        _this10.onChange();
-      });
-    }
-  }, {
-    key: "onTimeZonePickerInput",
-    value: function onTimeZonePickerInput(value) {
-      var _this11 = this;
+  onStartTimeChangeInput(value) {
+    this.setState({
+      startTimeInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      this.setState({
-        timezonePickerInput: value
-      }, function () {
-        _this11.onChange();
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this12 = this;
+  onDayOfMonthRepeatChangeInput(value, option) {
+    this.setState({
+      dayOfMonthRepeatPickerInput: value,
+      dayOfMonthRepeatPickerKey: option.dayOfMonthRepeatPickerKey,
+      alertModal: option.number > 28 || (option.numberLabel || '').includes('Fifth'),
+      alertReplace: option.number || "".concat(option.numberLabel, " ")
+    }, () => {
+      this.onChange();
+    });
+  }
 
-      var _this$state = this.state,
-          alertModal = _this$state.alertModal,
-          alertReplace = _this$state.alertReplace,
-          qtyRepeatPickerInput = _this$state.qtyRepeatPickerInput,
-          typeRepeatPickerInput = _this$state.typeRepeatPickerInput,
-          dayWeekRepeatPickerInput = _this$state.dayWeekRepeatPickerInput,
-          endDateInput = _this$state.endDateInput,
-          endTypeInput = _this$state.endTypeInput,
-          endTimesInput = _this$state.endTimesInput,
-          startDateInput = _this$state.startDateInput,
-          startTimeInput = _this$state.startTimeInput,
-          dayOfMonthRepeatPickerInput = _this$state.dayOfMonthRepeatPickerInput,
-          dayOfYearRepeatPickerInput = _this$state.dayOfYearRepeatPickerInput,
-          timezonePickerInput = _this$state.timezonePickerInput;
-      var _this$props = this.props,
-          displayCurrentMonthYear = _this$props.displayCurrentMonthYear,
-          dropdownDayOfMonthOptions = _this$props.dropdownDayOfMonthOptions,
-          dropdownDayOfWeekOptions = _this$props.dropdownDayOfWeekOptions,
-          dropdownDayOfYearOptions = _this$props.dropdownDayOfYearOptions,
-          dropdownRepeatOptions = _this$props.dropdownRepeatOptions,
-          dayOfMonthOptionsEnable = _this$props.dayOfMonthOptionsEnable,
-          dayOfWeekOptionsEnable = _this$props.dayOfWeekOptionsEnable,
-          dayOfYearOptionsEnable = _this$props.dayOfYearOptionsEnable,
-          timeZoneOptions = _this$props.timeZoneOptions,
-          useTimezoneSelector = _this$props.useTimezoneSelector,
-          allowMultipleDaysOfWeek = _this$props.allowMultipleDaysOfWeek,
-          endTimesOptions = _this$props.endTimesOptions,
-          endTypesOptions = _this$props.endTypesOptions,
-          dayOfMonthAsCurrentDateOptions = _this$props.dayOfMonthAsCurrentDateOptions,
-          dayOfYearAsCurrentDateOptions = _this$props.dayOfYearAsCurrentDateOptions,
-          validationMessage = _this$props.validationMessage,
-          endDayBlocked = _this$props.endDayBlocked,
-          startDayBlocked = _this$props.startDayBlocked,
-          repeatFrecuencyCustomProps = _this$props.repeatFrecuencyCustomProps,
-          displayMonthCustomOption = _this$props.displayMonthCustomOption,
-          displayYearCustomOption = _this$props.displayYearCustomOption;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(cssClassName)
-      }, /*#__PURE__*/React.createElement(StartDateTime, {
-        onStartDateChange: this.onStartDateChangeInput,
-        onStartTimeChange: this.onStartTimeChangeInput,
-        startDateValue: startDateInput,
-        startDayBlocked: startDayBlocked,
-        startTimeValue: startTimeInput
-      }), useTimezoneSelector && /*#__PURE__*/React.createElement(TimeZonePicker, {
-        onTimezoneChange: this.onTimeZonePickerInput,
-        timezoneOptions: timeZoneOptions,
-        timezoneValue: timezonePickerInput
-      }), /*#__PURE__*/React.createElement(RepeatPickerInput, {
-        onQtyChange: this.onQtyRepeatPickerInput,
-        onTypeChange: this.onTypeRepeatPickerInput,
-        qtyValue: qtyRepeatPickerInput,
-        repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
-        repeatOptions: dropdownRepeatOptions,
-        repeatOptionsValue: typeRepeatPickerInput
-      }), dayOfWeekOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/React.createElement(DaysOfWeekPicker, {
-        active: dayWeekRepeatPickerInput,
-        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
-        onDayChange: this.onDayOfWeekRepeatPickerInput,
-        options: dropdownDayOfWeekOptions
-      }), dayOfMonthOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/React.createElement(DaysOfMonthPicker, {
-        currentDate: startDateInput,
-        dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
-        dayOfMonthOptions: dropdownDayOfMonthOptions,
-        dayOfMonthValue: dayOfMonthRepeatPickerInput,
-        displayMonthCustomOption: displayMonthCustomOption,
-        displayOptionsAsCurrentDate: displayCurrentMonthYear,
-        onDayChange: this.onDayOfMonthRepeatChangeInput
-      }), dayOfYearOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/React.createElement(DaysOfMonthPicker$1, {
-        currentDate: startDateInput,
-        dayOfMonthOptions: dropdownDayOfYearOptions,
-        dayOfMonthValue: dayOfYearRepeatPickerInput,
-        dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
-        displayOptionsAsCurrentDate: displayCurrentMonthYear,
-        displayYearCustomOption: displayYearCustomOption,
-        onDayChange: this.onDayOfYearRepeatChangeInput
-      }), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement(EndDate, {
-        endDateValue: endDateInput,
-        endDayBlocked: endDayBlocked,
-        endTimesOptions: endTimesOptions,
-        endTimesValue: endTimesInput,
-        endTypesOptions: endTypesOptions,
-        endTypeValue: endTypeInput,
-        onEndDateChange: this.onEndDateChangeInput,
-        onEndTimesChange: this.onEndTimesChangeInput,
-        onEndTypeChange: this.onEndTypeChangeInput
-      }), /*#__PURE__*/React.createElement(DSModal, {
-        className: "datetime-alert-modal",
-        isOpen: alertModal,
-        modalTitle: "Some months have fewer  than ".concat(alertReplace, " days") // modalType={modalType}
-        ,
-        onClose: function onClose() {
-          return _this12.setState({
-            alertModal: false
-          });
-        },
-        onConfirm: function onConfirm() {
-          return _this12.setState({
-            alertModal: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement("p", null, "For these months, the occurrence will fall on the last day of the month.")), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, {
-        validationMessage: validationMessage
-      }));
-    }
-  }]);
+  onDayOfYearRepeatChangeInput(value, option) {
+    this.setState({
+      dayOfYearRepeatPickerInput: value,
+      dayOfYearRepeatPickerKey: option.dayOfYearRepeatPickerKey
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  onTimeZonePickerInput(value) {
+    this.setState({
+      timezonePickerInput: value
+    }, () => {
+      this.onChange();
+    });
+  }
+
+  render() {
+    const {
+      alertModal,
+      alertReplace,
+      qtyRepeatPickerInput,
+      typeRepeatPickerInput,
+      dayWeekRepeatPickerInput,
+      endDateInput,
+      endTypeInput,
+      endTimesInput,
+      startDateInput,
+      startTimeInput,
+      dayOfMonthRepeatPickerInput,
+      dayOfYearRepeatPickerInput,
+      timezonePickerInput
+    } = this.state;
+    const {
+      displayCurrentMonthYear,
+      dropdownDayOfMonthOptions,
+      dropdownDayOfWeekOptions,
+      dropdownDayOfYearOptions,
+      dropdownRepeatOptions,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      timeZoneOptions,
+      useTimezoneSelector,
+      allowMultipleDaysOfWeek,
+      endTimesOptions,
+      endTypesOptions,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      validationMessage,
+      endDayBlocked,
+      startDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption
+    } = this.props;
+    return /*#__PURE__*/_jsx("div", {
+      className: "".concat(cssClassName)
+    }, void 0, /*#__PURE__*/_jsx(StartDateTime, {
+      onStartDateChange: this.onStartDateChangeInput,
+      onStartTimeChange: this.onStartTimeChangeInput,
+      startDateValue: startDateInput,
+      startDayBlocked: startDayBlocked,
+      startTimeValue: startTimeInput
+    }), useTimezoneSelector && /*#__PURE__*/_jsx(TimeZonePicker, {
+      onTimezoneChange: this.onTimeZonePickerInput,
+      timezoneOptions: timeZoneOptions,
+      timezoneValue: timezonePickerInput
+    }), /*#__PURE__*/_jsx(RepeatPickerInput, {
+      onQtyChange: this.onQtyRepeatPickerInput,
+      onTypeChange: this.onTypeRepeatPickerInput,
+      qtyValue: qtyRepeatPickerInput,
+      repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+      repeatOptions: dropdownRepeatOptions,
+      repeatOptionsValue: typeRepeatPickerInput
+    }), dayOfWeekOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/_jsx(DaysOfWeekPicker, {
+      active: dayWeekRepeatPickerInput,
+      allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+      onDayChange: this.onDayOfWeekRepeatPickerInput,
+      options: dropdownDayOfWeekOptions
+    }), dayOfMonthOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/_jsx(DaysOfMonthPicker, {
+      currentDate: startDateInput,
+      dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+      dayOfMonthOptions: dropdownDayOfMonthOptions,
+      dayOfMonthValue: dayOfMonthRepeatPickerInput,
+      displayMonthCustomOption: displayMonthCustomOption,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      onDayChange: this.onDayOfMonthRepeatChangeInput
+    }), dayOfYearOptionsEnable && typeRepeatPickerInput === DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/_jsx(DaysOfMonthPicker$1, {
+      currentDate: startDateInput,
+      dayOfMonthOptions: dropdownDayOfYearOptions,
+      dayOfMonthValue: dayOfYearRepeatPickerInput,
+      dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      displayYearCustomOption: displayYearCustomOption,
+      onDayChange: this.onDayOfYearRepeatChangeInput
+    }), _hr || (_hr = /*#__PURE__*/_jsx("hr", {})), /*#__PURE__*/_jsx(EndDate, {
+      endDateValue: endDateInput,
+      endDayBlocked: endDayBlocked,
+      endTimesOptions: endTimesOptions,
+      endTimesValue: endTimesInput,
+      endTypesOptions: endTypesOptions,
+      endTypeValue: endTypeInput,
+      onEndDateChange: this.onEndDateChangeInput,
+      onEndTimesChange: this.onEndTimesChangeInput,
+      onEndTypeChange: this.onEndTypeChangeInput
+    }), /*#__PURE__*/_jsx(DSModal, {
+      className: "datetime-alert-modal",
+      isOpen: alertModal,
+      modalTitle: "Some months have fewer  than ".concat(alertReplace, " days") // modalType={modalType}
+      ,
+      onClose: () => this.setState({
+        alertModal: false
+      }),
+      onConfirm: () => this.setState({
+        alertModal: false
+      })
+    }, void 0, _p || (_p = /*#__PURE__*/_jsx("p", {}, void 0, "For these months, the occurrence will fall on the last day of the month."))), validationMessage && /*#__PURE__*/_jsx(ValidationMessage, {
+      validationMessage: validationMessage
+    }));
+  }
 
-  return DateTimePredefinedRangeSelectorImpl;
-}(Component);
+}
 
 export { DateTimePredefinedRangeSelectorImpl as default };
-//# sourceMappingURL=DateTimeRangeModalImpl.js.map