@iobroker/adapter-react/Components/Schedule.js

React classes to develop admin interfaces for ioBroker with react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var _Input = _interopRequireDefault(require("@material-ui/core/Input"));

var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));

var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));

var _FormGroup = _interopRequireDefault(require("@material-ui/core/FormGroup"));

var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));

var _reactTextMask = _interopRequireDefault(require("react-text-mask"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _Select = _interopRequireDefault(require("@material-ui/core/Select"));

var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));

var _i18n = _interopRequireDefault(require("../i18n"));

var _excluded = ["inputRef"],
    _excluded2 = ["inputRef"];

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["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 styles = function styles(theme) {
  return {
    hr: {
      border: 0,
      borderTop: '1px solid gray'
    },
    scrollWindow: {
      width: '100%',
      overflow: 'auto',
      height: 'calc(100% - 22px)'
    },
    rowDiv: {
      width: '100%'
    },
    modeDiv: {
      width: 200,
      display: 'inline-block',
      verticalAlign: 'top'
    },
    settingsDiv: {
      display: 'inline-block',
      verticalAlign: 'top'
    },
    inputTime: {
      width: 90,
      marginTop: 0,
      marginLeft: 5
    },
    inputDate: {
      width: 140,
      marginTop: 0,
      marginLeft: 5
    },
    inputEvery: {
      width: 40,
      marginLeft: 5,
      marginRight: 5
    },
    inputRadio: {
      padding: '4px 12px',
      verticalAlign: 'top'
    },
    inputGroup: {
      maxWidth: 400,
      display: 'inline-block'
    },
    inputGroupElement: {
      width: 120
    },
    inputDateDay: {
      width: 60
    },
    inputDateDayCheck: {
      padding: 4
    },
    inputSmallCheck: {
      padding: 0
    },
    rowOnce: {},
    rowDays: {
      background: theme.palette.type !== 'dark' ? '#ddeaff' : '#4b5057'
    },
    rowDows: {
      background: theme.palette.type !== 'dark' ? '#DDFFDD' : '#52646c'
    },
    rowDates: {
      background: theme.palette.type !== 'dark' ? '#DDDDFF' : '#747a86'
    },
    rowWeeks: {
      background: theme.palette.type !== 'dark' ? '#DDDDFF' : '#717680'
    },
    rowMonths: {
      background: theme.palette.type !== 'dark' ? '#DDFFFF' : '#1f5557'
    },
    rowMonthsDates: {
      background: theme.palette.type !== 'dark' ? '#EEFFFF' : '#3c5737',
      maxWidth: 600
    },
    rowYears: {
      background: theme.palette.type !== 'dark' ? '#fbffdd' : '#574b33'
    },
    rowDaysDows: {
      background: theme.palette.type !== 'dark' ? '#EEEAFF' : '#573544',
      paddingLeft: 10,
      paddingBottom: 10
    },
    rowDowsDows: {
      background: theme.palette.type !== 'dark' ? '#EEFFEE' : '#3d4c54',
      paddingLeft: 10,
      paddingBottom: 10
    }
  };
};

var WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var PERIODS = {
  'minutes': 'minutes',
  'hours': 'hours'
};
var ASTRO = ['sunrise', 'sunriseEnd', 'goldenHourEnd', 'solarNoon', 'goldenHour', 'sunsetStart', 'sunset', 'dusk', 'nauticalDusk', 'night', 'nightEnd', 'nauticalDawn', 'dawn', 'nadir'];

function padding(num) {
  if (num < 10) {
    return '0' + num;
  } else {
    return '' + num;
  }
}

function TextTime(props) {
  var inputRef = props.inputRef,
      other = (0, _objectWithoutProperties2["default"])(props, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], (0, _extends2["default"])({}, other, {
    ref: inputRef,
    mask: [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/],
    placeholderChar: props.placeholder || '00:00',
    showMask: true
  }));
}

TextTime.propTypes = {
  inputRef: _propTypes["default"].func.isRequired
};

function TextDate(props) {
  var inputRef = props.inputRef,
      other = (0, _objectWithoutProperties2["default"])(props, _excluded2);
  return /*#__PURE__*/_react["default"].createElement(_reactTextMask["default"], (0, _extends2["default"])({}, other, {
    ref: inputRef,
    mask: [/[0-3]/, /[0-9]/, '.', /[0-1]/, /[0-9]/, '.', '2', '0', /[0-9]/, /[0-9]/],
    placeholderChar: props.placeholder || '01.01.2020',
    showMask: true
  }));
}

TextDate.propTypes = {
  inputRef: _propTypes["default"].func.isRequired
};
var DEFAULT = {
  time: {
    exactTime: false,
    start: '00:00',
    end: '23:59',
    mode: 'hours',
    interval: 1
  },
  period: {
    once: '',
    days: 1,
    dows: '',
    dates: '',
    weeks: 0,
    months: '',
    years: 0,
    yearMonth: 0,
    yearDate: 0
  },
  valid: {
    from: '',
    to: ''
  }
};

function string2USdate(date) {
  var parts = date.split('.');

  if (parts.length === 3) {
    return parts[2] + '-' + parts[1] + '-' + parts[0];
  }
}

var Schedule = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Schedule, _React$Component);

  var _super = _createSuper(Schedule);

  function Schedule(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Schedule);
    _this = _super.call(this, props);
    var schedule;

    if (_this.props.schedule && typeof _this.props.schedule === 'string' && _this.props.schedule[0] === '{') {
      try {
        schedule = JSON.parse(_this.props.schedule);
      } catch (e) {}
    }

    if ((!schedule || !Object.keys(schedule).length) && _this.props.onChange) {
      setTimeout(function () {
        return _this.onChange(_this.state.schedule, true);
      }, 200);
    }

    schedule = schedule || {};
    schedule = Object.assign({}, DEFAULT, schedule);
    schedule.valid.from = schedule.valid.from || Schedule.now2string();
    _this.refFrom = /*#__PURE__*/_react["default"].createRef();
    _this.refTo = /*#__PURE__*/_react["default"].createRef();
    _this.refOnce = /*#__PURE__*/_react["default"].createRef();
    _this.state = {
      schedule: schedule,
      desc: Schedule.state2text(schedule)
    };

    if (JSON.stringify(schedule) !== _this.props.schedule) {
      setTimeout(function () {
        return _this.props.onChange && _this.props.onChange(JSON.stringify(schedule));
      }, 100);
    }

    return _this;
  }

  (0, _createClass2["default"])(Schedule, [{
    key: "onChange",
    value: function onChange(schedule, force) {
      var isDiff = JSON.stringify(schedule) !== JSON.stringify(this.state.schedule);

      if (force || isDiff) {
        isDiff && this.setState({
          schedule: schedule,
          desc: Schedule.state2text(schedule)
        });
        var copy = JSON.parse(JSON.stringify(schedule));

        if (copy.period.once) {
          var once = copy.period.once;
          delete copy.period;
          copy.period = {
            once: once
          };
          delete copy.valid;
        } else if (copy.period.days) {
          var days = copy.period.days;
          var dows = copy.period.dows;
          delete copy.period;
          copy.period = {
            days: days
          };

          if (dows && dows !== '[]') {
            copy.period.dows = dows;
          }
        } else if (copy.period.weeks) {
          var weeks = copy.period.weeks;
          var _dows = copy.period.dows;
          delete copy.period;
          copy.period = {
            weeks: weeks
          };

          if (_dows && _dows !== '[]') {
            copy.period.dows = _dows;
          }
        } else if (copy.period.months) {
          var months = copy.period.months;
          var dates = copy.period.dates;
          delete copy.period;
          copy.period = {
            months: months
          };

          if (dates && dates !== '[]') {
            copy.period.dates = dates;
          }
        } else if (copy.period.years) {
          var years = copy.period.years;
          var yearMonth = copy.period.yearMonth;
          var yearDate = copy.period.yearDate;
          delete copy.period;
          copy.period = {
            years: years,
            yearDate: yearDate
          };

          if (yearMonth) {
            copy.period.yearMonth = yearMonth;
          }
        }

        if (copy.time.exactTime) {
          delete copy.time.end;
          delete copy.time.mode;
          delete copy.time.interval;
        } else {
          delete copy.time.exactTime;
        }

        if (copy.valid) {
          if (!copy.valid.to) {
            delete copy.valid.to;
          }

          if (copy.period.days === 1 || copy.period.weeks === 1 || copy.period.months === 1 || copy.period.years === 1) {
            var from = Schedule.string2date(copy.valid.from);
            var today = new Date();
            today.setHours(0);
            today.setMinutes(0);
            today.setSeconds(0);
            today.setMilliseconds(0);

            if (from <= today) {
              delete copy.valid.from;
            }
          }

          if (!copy.valid.from && !copy.valid.to) {
            delete copy.valid;
          }
        }

        this.props.onChange && this.props.onChange(JSON.stringify(copy), Schedule.state2text(schedule));
      }
    }
  }, {
    key: "getTimePeriodElements",
    value: function getTimePeriodElements() {
      var _this2 = this;

      var schedule = this.state.schedule;
      var wholeDay = false;
      var day = false;
      var night = false;
      var fromTo = true;

      if (schedule.time.start === '00:00' && schedule.time.end === '24:00') {
        wholeDay = true;
        fromTo = false;
      } else if (schedule.time.start === 'sunrise') {
        day = true;
        fromTo = false;
      } else if (schedule.time.start === 'sunset') {
        night = true;
        fromTo = false;
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        key: "timePeriod",
        className: this.props.classes.rowDiv
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !schedule.time.exactTime,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

            _schedule.time.exactTime = false;

            _this2.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_intervalTime')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!fromTo,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

            _schedule.time.start = '00:00';
            _schedule.time.end = '23:59';

            _this2.onChange(_schedule);
          }
        }),
        label: !fromTo ? _i18n["default"].t('sch_fromTo') : ''
      }), fromTo && [/*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        className: this.props.classes.inputTime,
        style: {
          marginRight: 10
        },
        key: "exactTimeFrom",
        type: "time",
        value: this.state.schedule.time.start //InputProps={{inputComponent: TextTime}}
        ,
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

          _schedule.time.start = e.target.value;

          _this2.onChange(_schedule);
        },
        InputLabelProps: {
          shrink: true
        },
        label: _i18n["default"].t('sch_from'),
        margin: "normal"
      }), /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        className: this.props.classes.inputTime,
        key: "exactTimeTo",
        type: "time",
        value: this.state.schedule.time.end //InputProps={{inputComponent: TextTime}}
        ,
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

          _schedule.time.end = e.target.value;

          _this2.onChange(_schedule);
        },
        InputLabelProps: {
          shrink: true
        },
        label: _i18n["default"].t('sch_to'),
        margin: "normal"
      })])), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!wholeDay,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

            _schedule.time.start = '00:00';
            _schedule.time.end = '24:00';

            _this2.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_wholeDay')
      })), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!day,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

            _schedule.time.start = 'sunrise';
            _schedule.time.end = 'sunset';

            _this2.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_astroDay')
      })), !schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!night,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this2.state.schedule));

            _schedule.time.start = 'sunset';
            _schedule.time.end = 'sunrise';

            _this2.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_astroNight')
      }))), !schedule.time.exactTime && this.getPeriodSettingsMinutes()));
    }
  }, {
    key: "getTimeExactElements",
    value: function getTimeExactElements() {
      var _this3 = this;

      var isAstro = ASTRO.indexOf(this.state.schedule.time.start) !== -1;
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: "timeExact",
        className: this.props.classes.rowDiv
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!this.state.schedule.time.exactTime,
          onClick: function onClick() {
            var schedule = JSON.parse(JSON.stringify(_this3.state.schedule));
            schedule.time.exactTime = true;

            _this3.onChange(schedule);
          }
        }),
        label: _i18n["default"].t('sch_exactTime')
      })), this.state.schedule.time.exactTime && /*#__PURE__*/_react["default"].createElement(_Select["default"], {
        value: isAstro ? this.state.schedule.time.start : '00:00',
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this3.state.schedule));

          _schedule.time.start = e.target.value;

          _this3.onChange(_schedule);
        }
      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
        key: "specific",
        value: '00:00'
      }, _i18n["default"].t('sch_specificTime')), ASTRO.map(function (event) {
        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
          key: event,
          value: event
        }, _i18n["default"].t('sch_astro_' + event));
      })), this.state.schedule.time.exactTime && !isAstro && /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        className: this.props.classes.inputTime,
        key: "exactTimeValue",
        value: this.state.schedule.time.start,
        type: "time" // inputComponent={TextTime}
        ,
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this3.state.schedule));

          _schedule.time.start = e.target.value;

          _this3.onChange(_schedule);
        },
        InputLabelProps: {
          shrink: true
        },
        margin: "normal"
      })));
    }
  }, {
    key: "getDivider",
    value: function getDivider() {
      return /*#__PURE__*/_react["default"].createElement("hr", {
        className: this.props.classes.hr
      });
    }
  }, {
    key: "getPeriodModes",
    value: function getPeriodModes() {
      var _this4 = this;

      var schedule = this.state.schedule;
      var isOnce = !schedule.period.dows && !schedule.period.months && !schedule.period.dates && !schedule.period.years && !schedule.period.days && !schedule.period.weeks;

      if (isOnce && !schedule.period.once) {
        schedule.period.once = Schedule.now2string(true);
      }

      return [
      /*#__PURE__*/
      // ----- once ---
      _react["default"].createElement("div", {
        key: "once",
        className: this.props.classes.rowDiv + ' ' + this.props.classes.rowOnce
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!isOnce,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.once = _schedule.period.once || Schedule.now2string(true);
            _schedule.period.dows = '';
            _schedule.period.months = '';
            _schedule.period.dates = '';
            _schedule.period.years = 0;
            _schedule.period.yearDate = 0;
            _schedule.period.yearMonth = 0;
            _schedule.period.weeks = 0;
            _schedule.period.days = 0;

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodOnce')
      })), isOnce && /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
        className: this.props.classes.inputDate,
        type: "date",
        ref: this.refOnce,
        key: "exactDateAt",
        defaultValue: string2USdate(schedule.period.once) //InputProps={{inputComponent: TextTime}}
        ,
        onChange: function onChange(e) {
          _this4.timerOnce && clearTimeout(_this4.timerOnce);
          _this4.refOnce.current.style.background = '#ff000030';
          _this4.timerOnce = setTimeout(function (value) {
            _this4.timerOnce = null;
            _this4.refOnce.current.style.background = '';

            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            var date = Schedule.string2date(value);

            if (date.toString() !== 'Invalid Date') {
              _schedule.period.once = padding(date.getDate()) + '.' + padding(date.getMonth() + 1) + '.' + date.getFullYear();

              _this4.onChange(_schedule);
            }
          }, 1500, e.target.value);
        },
        InputLabelProps: {
          shrink: true
        },
        label: _i18n["default"].t('sch_at'),
        margin: "normal"
      }))),
      /*#__PURE__*/
      // ----- days ---
      _react["default"].createElement("div", {
        key: "days",
        className: this.props.classes.rowDiv + ' ' + this.props.classes.rowDays
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!schedule.period.days,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.days = 1;
            _schedule.period.dows = '';
            _schedule.period.months = '';
            _schedule.period.dates = '';
            _schedule.period.years = 0;
            _schedule.period.yearDate = 0;
            _schedule.period.yearMonth = 0;
            _schedule.period.weeks = 0;
            _schedule.period.once = '';

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodDaily')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, this.getPeriodSettingsDaily(), schedule.period.days ? this.getPeriodSettingsWeekdays() : null)),
      /*#__PURE__*/
      // ----- days of weeks ---

      /*!schedule.period.days && (
          <div key="dows" className={this.props.classes.rowDiv + ' ' + this.props.classes.rowDows}>
              <div className={this.props.classes.modeDiv}>
                  <FormControlLabel control={<Radio className={this.props.classes.inputRadio} checked={!!schedule.period.dows} onClick={() => {
                      const schedule = JSON.parse(JSON.stringify(this.state.schedule));
                      schedule.period.dows = schedule.period.dows ? '' : '[0,1,2,3,4,5,6]';
                      this.onChange(schedule);
                  }}/>}
                  label={I18n.t('sch_periodWeekdays')} />
              </div>
              <div className={this.props.classes.settingsDiv}>
                  {this.getPeriodSettingsWeekdays()}
              </div>
          </div>,
      */
      // ----- weeks ---
      _react["default"].createElement("div", {
        key: "weeks",
        className: this.props.classes.rowDiv + ' ' + this.props.classes.rowDows
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!schedule.period.weeks,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.weeks = schedule.period.weeks ? 0 : 1;
            _schedule.period.dows = schedule.period.dows || '[0]';
            _schedule.period.months = '';
            _schedule.period.dates = '';
            _schedule.period.years = 0;
            _schedule.period.yearDate = 0;
            _schedule.period.yearMonth = 0;
            _schedule.period.days = 0;
            _schedule.period.once = '';

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodWeekly')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, this.getPeriodSettingsWeekly()), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv + ' ' + this.props.classes.rowDowsDows
      }, this.state.schedule.period.weeks ? this.getPeriodSettingsWeekdays() : null))),
      /*#__PURE__*/
      // ----- months ---
      _react["default"].createElement("div", {
        key: "months",
        className: this.props.classes.rowDiv + ' ' + this.props.classes.rowMonths
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!schedule.period.months,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.months = 1;
            _schedule.period.dows = '';
            _schedule.period.dates = '';
            _schedule.period.years = 0;
            _schedule.period.yearDate = 0;
            _schedule.period.yearMonth = 0;
            _schedule.period.weeks = 0;
            _schedule.period.days = 0;
            _schedule.period.once = '';

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodMonthly')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, this.getPeriodSettingsMonthly(), schedule.period.months ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv + ' ' + this.props.classes.rowMonthsDates
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
          className: this.props.classes.inputRadio,
          checked: !!schedule.period.dates,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.months = _schedule.period.months || 1;
            var dates = [];

            for (var i = 1; i <= 31; i++) {
              dates.push(i);
            }

            _schedule.period.dates = _schedule.period.dates || JSON.stringify(dates);
            _schedule.period.dows = '';
            _schedule.period.years = 0;
            _schedule.period.yearDate = 0;
            _schedule.period.yearMonth = 0;
            _schedule.period.weeks = 0;
            _schedule.period.days = 0;
            _schedule.period.once = '';

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodDates')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv + ' ' + this.props.classes.rowMonthsDates
      }, this.getPeriodSettingsDates())) : null)),
      /*#__PURE__*/
      // ----- years ---
      _react["default"].createElement("div", {
        key: "years",
        className: this.props.classes.rowDiv + ' ' + this.props.classes.rowYears
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.modeDiv
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!schedule.period.years,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

            _schedule.period.years = 1;
            _schedule.period.yearDate = 1;
            _schedule.period.yearMonth = 1;
            _schedule.period.dows = '';
            _schedule.period.months = 0;
            _schedule.period.dates = '';
            _schedule.period.weeks = 0;
            _schedule.period.days = 0;
            _schedule.period.once = '';

            _this4.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodYearly')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, this.getPeriodSettingsYearly()), !!schedule.period.years && /*#__PURE__*/_react["default"].createElement("div", {
        className: this.props.classes.settingsDiv
      }, /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].t('sch_on')), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
        key: "input",
        value: this.state.schedule.period.yearDate,
        className: this.props.classes.inputEvery,
        type: "number",
        min: "1",
        max: "31",
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

          _schedule.period.yearDate = parseInt(e.target.value, 10);
          if (_schedule.period.yearDate < 1) _schedule.period.yearDate = 31;
          if (_schedule.period.yearDate > 31) _schedule.period.yearDate = 1;

          _this4.onChange(_schedule);
        }
      }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
        value: schedule.period.yearMonth,
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this4.state.schedule));

          _schedule.period.yearMonth = e.target.value;

          _this4.onChange(_schedule);
        }
      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
        key: "every",
        value: 0
      }, _i18n["default"].t('sch_yearEveryMonth')), MONTHS.map(function (month, i) {
        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
          key: month,
          value: i + 1
        }, _i18n["default"].t(month));
      })))))];
    }
  }, {
    key: "getPeriodSettingsMinutes",
    value: function getPeriodSettingsMinutes() {
      var _this5 = this;

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          display: 'inline-block'
        }
      }, /*#__PURE__*/_react["default"].createElement("label", null, _i18n["default"].t('sch_every')), /*#__PURE__*/_react["default"].createElement(_Input["default"], {
        value: this.state.schedule.time.interval,
        style: {
          verticalAlign: 'bottom'
        },
        className: this.props.classes.inputEvery,
        type: "number",
        min: "1",
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this5.state.schedule));

          _schedule.time.interval = parseInt(e.target.value, 10);

          _this5.onChange(_schedule);
        }
      }), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
        value: this.state.schedule.time.mode,
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this5.state.schedule));

          _schedule.time.mode = e.target.value;

          _this5.onChange(_schedule);
        }
      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
        value: PERIODS.minutes
      }, _i18n["default"].t('sch_periodMinutes')), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
        value: PERIODS.hours
      }, _i18n["default"].t('sch_periodHours'))));
    }
  }, {
    key: "getPeriodSettingsWeekdays",
    value: function getPeriodSettingsWeekdays() {
      var _this6 = this;

      // || this.state.schedule.period.dows === '[1, 2, 3, 4, 5]' || this.state.schedule.period.dows === '[0, 6]'
      var schedule = this.state.schedule;
      var isSpecific = schedule.period.dows && schedule.period.dows !== '[1, 2, 3, 4, 5]' && schedule.period.dows !== '[0, 6]';
      return [/*#__PURE__*/_react["default"].createElement("div", {
        key: "workdays"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.dows === '[1, 2, 3, 4, 5]',
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));

            _schedule.period.dows = '[1, 2, 3, 4, 5]';

            if (_schedule.period.days) {
              _schedule.period.days = 1;
            }

            _this6.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodWorkdays')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        key: "weekend"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.dows === '[0, 6]',
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));

            _schedule.period.dows = '[0, 6]';

            if (_schedule.period.days) {
              _schedule.period.days = 1;
            }

            _this6.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodWeekend')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        key: "specific",
        style: {
          verticalAlign: 'top'
        }
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        style: {
          verticalAlign: 'top'
        },
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: !!isSpecific,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));

            _schedule.period.dows = '[0,1,2,3,4,5,6]';

            if (_schedule.period.days) {
              _schedule.period.days = 1;
            }

            _this6.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodWeekdays')
      }), isSpecific && (schedule.period.days === 1 || schedule.period.weeks) && /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
        row: true,
        className: this.props.classes.inputGroup,
        style: {
          width: 150
        }
      }, [1, 2, 3, 4, 5, 6, 0].map(function (i) {
        return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
          key: 'specific_' + i,
          className: _this6.props.classes.inputGroupElement,
          control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
            className: _this6.props.classes.inputSmallCheck,
            checked: schedule.period.dows.includes('' + i),
            onChange: function onChange(e) {
              var _schedule = JSON.parse(JSON.stringify(_this6.state.schedule));

              var dows;

              try {
                dows = JSON.parse(_schedule.period.dows);
              } catch (e) {
                dows = [];
              }

              if (e.target.checked && !dows.includes(i)) {
                dows.push(i);
              } else if (!e.target.checked && dows.includes(i)) {
                dows.splice(dows.indexOf(i), 1);
              }

              dows.sort(function (a, b) {
                return a - b;
              });
              _schedule.period.dows = JSON.stringify(dows);

              if (_schedule.period.days) {
                _schedule.period.days = 1;
              }

              _this6.onChange(_schedule);
            }
          }),
          label: _i18n["default"].t(WEEKDAYS[i])
        });
      })))];
    }
  }, {
    key: "getPeriodSettingsDaily",
    value: function getPeriodSettingsDaily() {
      var _this7 = this;

      if (!this.state.schedule.period.days) {
        return;
      }

      var schedule = this.state.schedule;
      return [/*#__PURE__*/_react["default"].createElement("div", {
        key: "every_day"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.days === 1 && !schedule.period.dows,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));

            _schedule.period.days = 1;
            _schedule.period.dows = '';

            _this7.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEveryDay')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        key: "everyN_day"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.days > 1,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));

            _schedule.period.days = 2;
            _schedule.period.dows = '';

            _this7.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEvery')
      }), schedule.period.days > 1 && [/*#__PURE__*/_react["default"].createElement(_Input["default"], {
        key: "input",
        value: this.state.schedule.period.days,
        className: this.props.classes.inputEvery,
        type: "number",
        min: "2",
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this7.state.schedule));

          _schedule.period.days = parseInt(e.target.value, 10);
          _schedule.period.dows = '';

          _this7.onChange(_schedule);
        }
      }), /*#__PURE__*/_react["default"].createElement("span", {
        key: "span",
        style: {
          paddingRight: 10
        }
      }, _i18n["default"].t('sch_periodDay'))])];
    }
  }, {
    key: "getPeriodSettingsWeekly",
    value: function getPeriodSettingsWeekly() {
      var _this8 = this;

      if (!this.state.schedule.period.weeks) {
        return;
      }

      var schedule = this.state.schedule;
      return [/*#__PURE__*/_react["default"].createElement("div", {
        key: "radios",
        style: {
          display: 'inline-block',
          verticalAlign: 'top'
        }
      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.weeks === 1,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));

            _schedule.period.weeks = 1;

            _this8.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEveryWeek')
      })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: schedule.period.weeks > 1,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));

            _schedule.period.weeks = 2;

            _this8.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEvery')
      }), schedule.period.weeks > 1 && [/*#__PURE__*/_react["default"].createElement(_Input["default"], {
        value: this.state.schedule.period.weeks,
        className: this.props.classes.inputEvery,
        type: "number",
        min: "2",
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this8.state.schedule));

          _schedule.period.weeks = parseInt(e.target.value, 10);

          _this8.onChange(_schedule);
        }
      }), /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].t('sch_periodWeek'))]))];
    }
  }, {
    key: "getPeriodSettingsDates",
    value: function getPeriodSettingsDates() {
      var _this9 = this;

      if (!this.state.schedule.period.dates) {
        return;
      }

      var schedule = this.state.schedule;
      var dates = [];

      for (var i = 1; i <= 31; i++) {
        dates.push(i);
      }

      var parsedDates = JSON.parse(schedule.period.dates);
      return /*#__PURE__*/_react["default"].createElement(_FormGroup["default"], {
        row: true,
        className: this.props.classes.inputGroup,
        style: {
          maxWidth: 620
        }
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        className: this.props.classes.inputDateDay,
        control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
          className: this.props.classes.inputDateDayCheck,
          checked: parsedDates.length === 31,
          onChange: function onChange(e) {
            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));

            var dates = [];

            for (var _i = 1; _i <= 31; _i++) {
              dates.push(_i);
            }

            _schedule.period.dates = JSON.stringify(dates);

            _this9.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_all')
      }), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        className: this.props.classes.inputDateDay,
        control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
          className: this.props.classes.inputDateDayCheck,
          checked: !parsedDates.length,
          onChange: function onChange(e) {
            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));

            _schedule.period.dates = '[]';

            _this9.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_no_one')
      }), parsedDates.length !== 31 && !!parsedDates.length && /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        className: this.props.classes.inputDateDay,
        control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
          className: this.props.classes.inputDateDayCheck,
          checked: false,
          onChange: function onChange(e) {
            var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));

            var result = [];
            var parsedDates = JSON.parse(_schedule.period.dates);

            for (var _i2 = 1; _i2 <= 31; _i2++) {
              if (parsedDates.indexOf(_i2) === -1) {
                result.push(_i2);
              }
            }

            result.sort(function (a, b) {
              return a - b;
            });
            _schedule.period.dates = JSON.stringify(result);

            _this9.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_invert')
      }), /*#__PURE__*/_react["default"].createElement("div", null), dates.map(function (i) {
        return /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
          key: 'date_' + i,
          className: _this9.props.classes.inputDateDay,
          style: !i ? {
            opacity: 0,
            cursor: 'default',
            userSelect: 'none',
            pointerEvents: 'none'
          } : {},
          control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
            className: _this9.props.classes.inputDateDayCheck,
            checked: JSON.parse(schedule.period.dates).includes(i),
            onChange: function onChange(e) {
              var _schedule = JSON.parse(JSON.stringify(_this9.state.schedule));

              var dates;

              try {
                dates = JSON.parse(_schedule.period.dates);
              } catch (e) {
                dates = [];
              }

              if (e.target.checked && dates.indexOf(i) === -1) {
                dates.push(i);
              } else if (!e.target.checked && dates.indexOf(i) !== -1) {
                dates.splice(dates.indexOf(i), 1);
              }

              dates.sort(function (a, b) {
                return a - b;
              });
              _schedule.period.dates = JSON.stringify(dates);

              _this9.onChange(_schedule);
            }
          }),
          label: i < 10 ? [/*#__PURE__*/_react["default"].createElement("span", {
            key: "0",
            style: {
              opacity: 0
            }
          }, "0"), /*#__PURE__*/_react["default"].createElement("span", {
            key: "num"
          }, i)] : i
        });
      }));
    }
  }, {
    key: "getPeriodSettingsMonthly",
    value: function getPeriodSettingsMonthly() {
      var _this10 = this;

      if (!this.state.schedule.period.months) {
        return;
      }

      var schedule = this.state.schedule;
      var parsedMonths = typeof schedule.period.months === 'string' ? JSON.parse(schedule.period.months) : [];
      return [/*#__PURE__*/_react["default"].createElement("div", {
        key: "every"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: typeof schedule.period.months === 'number' && schedule.period.months === 1,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));

            _schedule.period.months = 1;

            _this10.onChange(schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEveryMonth')
      })), /*#__PURE__*/_react["default"].createElement("div", {
        key: "everyN"
      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
        control: /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
          className: this.props.classes.inputRadio,
          checked: typeof schedule.period.months === 'number' && schedule.period.months > 1,
          onClick: function onClick() {
            var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));

            _schedule.period.months = 2;

            _this10.onChange(_schedule);
          }
        }),
        label: _i18n["default"].t('sch_periodEvery')
      }), typeof schedule.period.months === 'number' && schedule.period.months > 1 && [/*#__PURE__*/_react["default"].createElement(_Input["default"], {
        value: schedule.period.months,
        className: this.props.classes.inputEvery,
        type: "number",
        min: "2",
        onChange: function onChange(e) {
          var _schedule = JSON.parse(JSON.stringify(_this10.state.schedule));

          _schedule.period.months = parseInt(e.target.value, 10);
          if (_schedule.period.months < 1) _schedule.period.months = 1;

          _this10.onChange(_schedule);
        }
      }), /*#__PURE__*/_react["default"].createElement("span", null, _i18n["default"].t('sch_periodMonth'))]), /*#__PURE__*/_re