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

package/cjs/components/DateTimeRangeModalImpl/DateTimeRangeModalImpl.js

@@ -1,384 +1,315 @@
 'use strict';
 
+var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitialized');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var moment = require('moment');
 var dsClassnames = require('@elliemae/ds-classnames');
 var DSModal = require('@elliemae/ds-modal');
-var options_dropdownRepeatOptions = require('../../options/dropdownRepeatOptions.js');
-var options_dropdownTimeZoneOptions = require('../../options/dropdownTimeZoneOptions.js');
-var components_RepeatPickerInput_RepeatPickerInput = require('../RepeatPickerInput/RepeatPickerInput.js');
-var components_DaysOfWeekPicker_DaysOfWeekPicker = require('../DaysOfWeekPicker/DaysOfWeekPicker.js');
-var components_StartDateTime_StartDateTime = require('../StartDateTime/StartDateTime.js');
-var components_EndDate_EndDate = require('../EndDate/EndDate.js');
-var components_DayOfMonthPicker_DayOfMonthPicker = require('../DayOfMonthPicker/DayOfMonthPicker.js');
-var components_DayOfYearPicker_DayOfYearPicker = require('../DayOfYearPicker/DayOfYearPicker.js');
-var components_TimeZonePicker_TimeZonePicker = require('../TimeZonePicker/TimeZonePicker.js');
-var components_ValidationMessage_ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-form');
-require('../Forms/FormGroup.js');
-require('../Forms/FormLabel.js');
-require('../Forms/FormFieldGroup.js');
-require('../Forms/FormField.js');
-require('../../options/dropdownDayOfWeekOptions.js');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-time-picker');
-require('../../options/endTypesOptions.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('../helpers/nthday.js');
-require('../../options/dropdownDayOfMonthOptions.js');
-require('../FieldWrapper/FieldWrapper.js');
-require('../LabelWrapper/LabelWrapper.js');
+var dropdownRepeatOptions = require('../../options/dropdownRepeatOptions.js');
+var dropdownTimeZoneOptions = require('../../options/dropdownTimeZoneOptions.js');
+var RepeatPickerInput = require('../RepeatPickerInput/RepeatPickerInput.js');
+var DaysOfWeekPicker = require('../DaysOfWeekPicker/DaysOfWeekPicker.js');
+var StartDateTime = require('../StartDateTime/StartDateTime.js');
+var EndDate = require('../EndDate/EndDate.js');
+var DayOfMonthPicker = require('../DayOfMonthPicker/DayOfMonthPicker.js');
+var DayOfYearPicker = require('../DayOfYearPicker/DayOfYearPicker.js');
+var TimeZonePicker = require('../TimeZonePicker/TimeZonePicker.js');
+var ValidationMessage = require('../ValidationMessage/ValidationMessage.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assertThisInitialized);
-var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
-var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
-var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
 
-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__default['default'](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__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](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 _hr, _p;
 
-var _convertPropToCssClas = dsClassnames.convertPropToCssClassName('date-time-predefined-range-selector'),
-    cssClassName = _convertPropToCssClas.cssClassName;
-
-var DateTimePredefinedRangeSelectorImpl = /*#__PURE__*/function (_Component) {
-  _inherits__default['default'](DateTimePredefinedRangeSelectorImpl, _Component);
-
-  var _super = _createSuper(DateTimePredefinedRangeSelectorImpl);
-
-  function DateTimePredefinedRangeSelectorImpl(props) {
-    var _this;
+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; }
 
-    _classCallCheck__default['default'](this, DateTimePredefinedRangeSelectorImpl);
+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__default["default"](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; }
+const {
+  cssClassName
+} = dsClassnames.convertPropToCssClassName('date-time-predefined-range-selector');
 
-    _this = _super.call(this, props);
+class DateTimePredefinedRangeSelectorImpl extends React.Component {
+  constructor(props) {
+    super(props);
 
-    _this.onChange = function () {
-      var onCustomDateTimeRange = _this.props.onCustomDateTimeRange;
-      onCustomDateTimeRange(_this.state);
+    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__default['default'](),
-      startTimeInput: startTimeInput || moment__default['default'](),
+      startDateInput: startDateInput || moment__default["default"](),
+      startTimeInput: startTimeInput || moment__default["default"](),
       qtyRepeatPickerInput: qtyRepeatPickerInput || 1,
       typeRepeatPickerInput: typeRepeatPickerInput || dropdownRepeatOptions[0].value,
       dayWeekRepeatPickerInput: !dayOfWeekOptionsEnable ? null : dayWeekRepeatPickerInput || dropdownDayOfWeekOptions[0].value,
-      endDateInput: endDateInput || moment__default['default'](),
+      endDateInput: endDateInput || moment__default["default"](),
       endTypeInput: endTypeInput || props.endTypesOptions[0].value,
       endTimesInput: endTimesInput || props.endTimesOptions[0].value,
       dayOfMonthRepeatPickerInput: !dayOfMonthOptionsEnable ? null : dayOfMonthRepeatPickerInput || dropdownDayOfMonthOptions[0].value,
       dayOfYearRepeatPickerInput: !dayOfYearOptionsEnable ? null : dayOfYearRepeatPickerInput || dropdownDayOfYearOptions[0].value,
-      timezonePickerInput: !useTimezoneSelector ? null : timezonePickerInput || options_dropdownTimeZoneOptions.dropdownTimeZoneOptions[0].value
+      timezonePickerInput: !useTimezoneSelector ? null : timezonePickerInput || dropdownTimeZoneOptions.dropdownTimeZoneOptions[0].value
     };
-
-    _this.onChange();
-
-    _this.onStartDateChangeInput = _this.onStartDateChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onStartTimeChangeInput = _this.onStartTimeChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onTimeZonePickerInput = _this.onTimeZonePickerInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onTypeRepeatPickerInput = _this.onTypeRepeatPickerInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onDayOfWeekRepeatPickerInput = _this.onDayOfWeekRepeatPickerInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onDayOfMonthRepeatChangeInput = _this.onDayOfMonthRepeatChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onDayOfYearRepeatChangeInput = _this.onDayOfYearRepeatChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onEndDateChangeInput = _this.onEndDateChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onEndTimesChangeInput = _this.onEndTimesChangeInput.bind(_assertThisInitialized__default['default'](_this));
-    _this.onEndTypeChangeInput = _this.onEndTypeChangeInput.bind(_assertThisInitialized__default['default'](_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__default['default'](DateTimePredefinedRangeSelectorImpl, [{
-    key: "onTypeRepeatPickerInput",
-    value: function onTypeRepeatPickerInput(value) {
-      var _this2 = this;
-
-      var update = {
-        typeRepeatPickerInput: value
-      };
-
-      if (value !== options_dropdownRepeatOptions.DropdownRepeatOptionsTypes.MONTH) {
-        update.dayOfMonthRepeatPickerInput = undefined;
-        update.dayOfMonthRepeatPickerKey = undefined;
-      }
-
-      if (value !== options_dropdownRepeatOptions.DropdownRepeatOptionsTypes.YEAR) {
-        update.dayOfYearRepeatPickerInput = undefined;
-        update.dayOfYearRepeatPickerKey = undefined;
-      }
+  onTypeRepeatPickerInput(value) {
+    const update = {
+      typeRepeatPickerInput: value
+    };
 
-      this.setState(_objectSpread({}, update), function () {
-        _this2.onChange();
-      });
+    if (value !== dropdownRepeatOptions.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 !== dropdownRepeatOptions.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__default['default'].createElement("div", {
-        className: "".concat(cssClassName)
-      }, /*#__PURE__*/React__default['default'].createElement(components_StartDateTime_StartDateTime, {
-        onStartDateChange: this.onStartDateChangeInput,
-        onStartTimeChange: this.onStartTimeChangeInput,
-        startDateValue: startDateInput,
-        startDayBlocked: startDayBlocked,
-        startTimeValue: startTimeInput
-      }), useTimezoneSelector && /*#__PURE__*/React__default['default'].createElement(components_TimeZonePicker_TimeZonePicker, {
-        onTimezoneChange: this.onTimeZonePickerInput,
-        timezoneOptions: timeZoneOptions,
-        timezoneValue: timezonePickerInput
-      }), /*#__PURE__*/React__default['default'].createElement(components_RepeatPickerInput_RepeatPickerInput, {
-        onQtyChange: this.onQtyRepeatPickerInput,
-        onTypeChange: this.onTypeRepeatPickerInput,
-        qtyValue: qtyRepeatPickerInput,
-        repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
-        repeatOptions: dropdownRepeatOptions,
-        repeatOptionsValue: typeRepeatPickerInput
-      }), dayOfWeekOptionsEnable && typeRepeatPickerInput === options_dropdownRepeatOptions.DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/React__default['default'].createElement(components_DaysOfWeekPicker_DaysOfWeekPicker, {
-        active: dayWeekRepeatPickerInput,
-        allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
-        onDayChange: this.onDayOfWeekRepeatPickerInput,
-        options: dropdownDayOfWeekOptions
-      }), dayOfMonthOptionsEnable && typeRepeatPickerInput === options_dropdownRepeatOptions.DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/React__default['default'].createElement(components_DayOfMonthPicker_DayOfMonthPicker, {
-        currentDate: startDateInput,
-        dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
-        dayOfMonthOptions: dropdownDayOfMonthOptions,
-        dayOfMonthValue: dayOfMonthRepeatPickerInput,
-        displayMonthCustomOption: displayMonthCustomOption,
-        displayOptionsAsCurrentDate: displayCurrentMonthYear,
-        onDayChange: this.onDayOfMonthRepeatChangeInput
-      }), dayOfYearOptionsEnable && typeRepeatPickerInput === options_dropdownRepeatOptions.DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/React__default['default'].createElement(components_DayOfYearPicker_DayOfYearPicker, {
-        currentDate: startDateInput,
-        dayOfMonthOptions: dropdownDayOfYearOptions,
-        dayOfMonthValue: dayOfYearRepeatPickerInput,
-        dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
-        displayOptionsAsCurrentDate: displayCurrentMonthYear,
-        displayYearCustomOption: displayYearCustomOption,
-        onDayChange: this.onDayOfYearRepeatChangeInput
-      }), /*#__PURE__*/React__default['default'].createElement("hr", null), /*#__PURE__*/React__default['default'].createElement(components_EndDate_EndDate, {
-        endDateValue: endDateInput,
-        endDayBlocked: endDayBlocked,
-        endTimesOptions: endTimesOptions,
-        endTimesValue: endTimesInput,
-        endTypesOptions: endTypesOptions,
-        endTypeValue: endTypeInput,
-        onEndDateChange: this.onEndDateChangeInput,
-        onEndTimesChange: this.onEndTimesChangeInput,
-        onEndTypeChange: this.onEndTypeChangeInput
-      }), /*#__PURE__*/React__default['default'].createElement(DSModal__default['default'], {
-        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__default['default'].createElement("p", null, "For these months, the occurrence will fall on the last day of the month.")), validationMessage && /*#__PURE__*/React__default['default'].createElement(components_ValidationMessage_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: dropdownRepeatOptions$1,
+      dayOfMonthOptionsEnable,
+      dayOfWeekOptionsEnable,
+      dayOfYearOptionsEnable,
+      timeZoneOptions,
+      useTimezoneSelector,
+      allowMultipleDaysOfWeek,
+      endTimesOptions,
+      endTypesOptions,
+      dayOfMonthAsCurrentDateOptions,
+      dayOfYearAsCurrentDateOptions,
+      validationMessage,
+      endDayBlocked,
+      startDayBlocked,
+      repeatFrecuencyCustomProps,
+      displayMonthCustomOption,
+      displayYearCustomOption
+    } = this.props;
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      className: "".concat(cssClassName)
+    }, void 0, /*#__PURE__*/_jsx__default["default"](StartDateTime, {
+      onStartDateChange: this.onStartDateChangeInput,
+      onStartTimeChange: this.onStartTimeChangeInput,
+      startDateValue: startDateInput,
+      startDayBlocked: startDayBlocked,
+      startTimeValue: startTimeInput
+    }), useTimezoneSelector && /*#__PURE__*/_jsx__default["default"](TimeZonePicker, {
+      onTimezoneChange: this.onTimeZonePickerInput,
+      timezoneOptions: timeZoneOptions,
+      timezoneValue: timezonePickerInput
+    }), /*#__PURE__*/_jsx__default["default"](RepeatPickerInput, {
+      onQtyChange: this.onQtyRepeatPickerInput,
+      onTypeChange: this.onTypeRepeatPickerInput,
+      qtyValue: qtyRepeatPickerInput,
+      repeatFrecuencyCustomProps: repeatFrecuencyCustomProps,
+      repeatOptions: dropdownRepeatOptions$1,
+      repeatOptionsValue: typeRepeatPickerInput
+    }), dayOfWeekOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.WEEK && /*#__PURE__*/_jsx__default["default"](DaysOfWeekPicker, {
+      active: dayWeekRepeatPickerInput,
+      allowMultipleDaysOfWeek: allowMultipleDaysOfWeek,
+      onDayChange: this.onDayOfWeekRepeatPickerInput,
+      options: dropdownDayOfWeekOptions
+    }), dayOfMonthOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.MONTH && /*#__PURE__*/_jsx__default["default"](DayOfMonthPicker, {
+      currentDate: startDateInput,
+      dayOfMonthAsCurrentDateOptions: dayOfMonthAsCurrentDateOptions,
+      dayOfMonthOptions: dropdownDayOfMonthOptions,
+      dayOfMonthValue: dayOfMonthRepeatPickerInput,
+      displayMonthCustomOption: displayMonthCustomOption,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      onDayChange: this.onDayOfMonthRepeatChangeInput
+    }), dayOfYearOptionsEnable && typeRepeatPickerInput === dropdownRepeatOptions.DropdownRepeatOptionsTypes.YEAR && /*#__PURE__*/_jsx__default["default"](DayOfYearPicker, {
+      currentDate: startDateInput,
+      dayOfMonthOptions: dropdownDayOfYearOptions,
+      dayOfMonthValue: dayOfYearRepeatPickerInput,
+      dayOfYearAsCurrentDateOptions: dayOfYearAsCurrentDateOptions,
+      displayOptionsAsCurrentDate: displayCurrentMonthYear,
+      displayYearCustomOption: displayYearCustomOption,
+      onDayChange: this.onDayOfYearRepeatChangeInput
+    }), _hr || (_hr = /*#__PURE__*/_jsx__default["default"]("hr", {})), /*#__PURE__*/_jsx__default["default"](EndDate, {
+      endDateValue: endDateInput,
+      endDayBlocked: endDayBlocked,
+      endTimesOptions: endTimesOptions,
+      endTimesValue: endTimesInput,
+      endTypesOptions: endTypesOptions,
+      endTypeValue: endTypeInput,
+      onEndDateChange: this.onEndDateChangeInput,
+      onEndTimesChange: this.onEndTimesChangeInput,
+      onEndTypeChange: this.onEndTypeChangeInput
+    }), /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
+      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__default["default"]("p", {}, void 0, "For these months, the occurrence will fall on the last day of the month."))), validationMessage && /*#__PURE__*/_jsx__default["default"](ValidationMessage, {
+      validationMessage: validationMessage
+    }));
+  }
 
-  return DateTimePredefinedRangeSelectorImpl;
-}(React.Component);
+}
 
 module.exports = DateTimePredefinedRangeSelectorImpl;
-//# sourceMappingURL=DateTimeRangeModalImpl.js.map