@iobroker/adapter-react-v5 4.13.5 → 4.13.7

package/Components/ComplexCron.js

@@ -1,509 +1,424 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styles = require("@mui/styles");
-var _material = require("@mui/material");
-var _i18n = _interopRequireDefault(require("../i18n"));
-var _cronText = _interopRequireDefault(require("./SimpleCron/cronText"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var styles = function styles() {
-  return {
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/styles");
+const material_1 = require("@mui/material");
+const i18n_1 = __importDefault(require("../i18n"));
+const cronText_1 = __importDefault(require("./SimpleCron/cronText"));
+const styles = {
     mainDiv: {
-      width: '100%',
-      height: '100%'
+        width: '100%',
+        height: '100%',
     },
     periodSelect: {
-      // margin: '0 10px 60px 10px',
-      display: 'block',
-      width: 200
+        // margin: '0 10px 60px 10px',
+        display: 'block',
+        width: 200,
     },
     slider: {
-      marginTop: 20,
-      display: 'block',
-      width: '100%'
+        marginTop: 20,
+        display: 'block',
+        width: '100%',
     },
     tabContent: {
-      padding: 20,
-      height: 'calc(100% - 240px)',
-      overflow: 'auto'
+        padding: 20,
+        height: 'calc(100% - 240px)',
+        overflow: 'auto',
     },
     numberButton: {
-      padding: 4,
-      minWidth: 40,
-      margin: 5
+        padding: 4,
+        minWidth: 40,
+        margin: 5,
     },
     numberButtonBreak: {
-      display: 'block'
+        display: 'block',
     },
     appBar: {
-      color: 'white'
-    }
-  };
+        color: 'white',
+    },
 };
-var WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
-var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
+const WEEKDAYS = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+    'Sunday',
+];
+const MONTHS = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+];
 // 5-7,9-11 => [5,6,7,9,10,11]
 function convertMinusIntoArray(value, max) {
-  var result = [];
-  if (value === '*') {
-    if (max === 24 || max === 60 || max === 7) {
-      for (var i = 0; i < max; i++) {
-        result.push(i);
-      }
-    } else {
-      for (var _i = 1; _i <= max; _i++) {
-        result.push(_i);
-      }
-    }
-    return result; // array with entries max
-  }
-  var parts = (value || '').toString().split(',');
-  for (var p = 0; p < parts.length; p++) {
-    if (!parts[p].trim().length) {
-      continue;
+    let result = [];
+    if (value === '*') {
+        if (max === 24 || max === 60 || max === 7) {
+            for (let i = 0; i < max; i++) {
+                result.push(i);
+            }
+        }
+        else {
+            for (let i = 1; i <= max; i++) {
+                result.push(i);
+            }
+        }
+        return result; // array with entries max
     }
-    var items = parts[p].trim().split('-');
-    if (items.length > 1) {
-      var iMax = parseInt(items[1], 10);
-      for (var _i2 = parseInt(items[0], 10); _i2 <= iMax; _i2++) {
-        result.push(_i2);
-      }
-    } else {
-      result.push(parseInt(parts[p], 10));
+    const parts = (value || '').toString().split(',');
+    for (let p = 0; p < parts.length; p++) {
+        if (!parts[p].trim().length) {
+            continue;
+        }
+        const items = parts[p].trim().split('-');
+        if (items.length > 1) {
+            const iMax = parseInt(items[1], 10);
+            for (let i = parseInt(items[0], 10); i <= iMax; i++) {
+                result.push(i);
+            }
+        }
+        else {
+            result.push(parseInt(parts[p], 10));
+        }
     }
-  }
-  result = result.map(function (a) {
-    return parseInt(a, 10);
-  });
-  result.sort();
-
-  // remove double entries
-  for (var _p = result.length - 1; _p >= 0; _p--) {
-    if (result[_p] === result[_p + 1]) {
-      result.splice(_p + 1, 1);
+    result.sort();
+    // remove double entries
+    for (let p = result.length - 1; p >= 0; p--) {
+        if (result[p] === result[p + 1]) {
+            result.splice(p + 1, 1);
+        }
     }
-  }
-  return result;
+    return result;
 }
-
 // [5,6,7,9,10,11] => 5-7,9-11
 function convertArrayIntoMinus(value, max) {
-  if ((0, _typeof2["default"])(value) !== 'object') {
-    value = [value];
-  }
-  if (value.length === max) {
-    return '*';
-  }
-  var newParts = [];
-  if (!value.length) {
-    return '-';
-  }
-  value = value.map(function (a) {
-    return parseInt(a, 10);
-  });
-  value.sort(function (a, b) {
-    return a - b;
-  });
-  var start = value[0];
-  var end = value[0];
-  for (var p = 1; p < value.length; p++) {
-    if (value[p] - 1 !== parseInt(value[p - 1], 10)) {
-      if (start === end) {
-        newParts.push(start);
-      } else if (end - 1 === start) {
-        newParts.push("".concat(start, ",").concat(end));
-      } else {
-        newParts.push("".concat(start, "-").concat(end));
-      }
-      start = value[p];
-      end = value[p];
-    } else {
-      end = value[p];
+    if (typeof value !== 'object') {
+        value = [value];
     }
-  }
-  if (start === end) {
-    newParts.push(start);
-  } else if (end - 1 === start) {
-    newParts.push("".concat(start, ",").concat(end));
-  } else {
-    newParts.push("".concat(start, "-").concat(end));
-  }
-  return newParts.join(',');
-}
-var ComplexCron = /*#__PURE__*/function (_React$Component) {
-  function ComplexCron(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, ComplexCron);
-    _this = _callSuper(this, ComplexCron, [props]);
-    var cron = typeof _this.props.cronExpression === 'string' ? _this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '') : '';
-    if (cron[0] === '{') {
-      cron = '';
+    if (value.length === max) {
+        return '*';
+    }
+    const newParts = [];
+    if (!value.length) {
+        return '-';
+    }
+    value = value.map(a => parseInt(a, 10));
+    value.sort((a, b) => a - b);
+    let start = value[0];
+    let end = value[0];
+    for (let p = 1; p < value.length; p++) {
+        if (value[p] - 1 !== parseInt(value[p - 1], 10)) {
+            if (start === end) {
+                newParts.push(start);
+            }
+            else if (end - 1 === start) {
+                newParts.push(`${start},${end}`);
+            }
+            else {
+                newParts.push(`${start}-${end}`);
+            }
+            start = value[p];
+        }
+        end = value[p];
     }
-    var state = ComplexCron.cron2state(cron || '* * * * *');
-    _this.state = {
-      extended: false,
-      tab: state.seconds !== false ? 1 : 0,
-      cron: ComplexCron.state2cron(state),
-      modes: {
-        seconds: null,
-        minutes: null,
-        hours: null,
-        dates: null,
-        months: null,
-        dows: null
-      }
-    };
-    Object.assign(_this.state, state);
-    if (_this.state.cron !== _this.props.cronExpression) {
-      setTimeout(function () {
-        return _this.props.onChange && _this.props.onChange(_this.state.cron);
-      }, 100);
+    if (start === end) {
+        newParts.push(start);
     }
-    return _this;
-  }
-  (0, _inherits2["default"])(ComplexCron, _React$Component);
-  return (0, _createClass2["default"])(ComplexCron, [{
-    key: "recalcCron",
-    value: function recalcCron() {
-      var _this2 = this;
-      var cron = ComplexCron.state2cron(this.state);
-      if (cron !== this.state.cron) {
-        this.setState({
-          cron: cron
-        }, function () {
-          return _this2.props.onChange && _this2.props.onChange(_this2.state.cron);
-        });
-      }
+    else if (end - 1 === start) {
+        newParts.push(`${start},${end}`);
     }
-  }, {
-    key: "onChange",
-    value: function onChange(cron) {
-      if (cron !== this.state.cron) {
-        this.setState({
-          cron: cron
-        });
-        this.props.onChange && this.props.onChange(cron);
-      }
+    else {
+        newParts.push(`${start}-${end}`);
     }
-  }, {
-    key: "onToggle",
-    value: function onToggle(i, type, max) {
-      var _this3 = this;
-      if (i === true) {
-        this.setState((0, _defineProperty2["default"])({}, type, '*'), function () {
-          return _this3.recalcCron();
-        });
-      } else if (i === false) {
-        if (max === 60 || max === 24) {
-          this.setState((0, _defineProperty2["default"])({}, type, '0'), function () {
-            return _this3.recalcCron();
-          });
-        } else {
-          this.setState((0, _defineProperty2["default"])({}, type, '1'), function () {
-            return _this3.recalcCron();
-          });
+    return newParts.join(',');
+}
+class ComplexCron extends react_1.Component {
+    constructor(props) {
+        super(props);
+        let cron = typeof this.props.cronExpression === 'string' ?
+            this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '') : '';
+        if (cron[0] === '{') {
+            cron = '';
         }
-      } else {
-        var nums = convertMinusIntoArray(this.state[type], max);
-        var pos = nums.indexOf(i);
-        if (pos !== -1) {
-          nums.splice(pos, 1);
-        } else {
-          nums.push(i);
-          nums.sort();
+        const state = ComplexCron.cron2state(cron || '* * * * *');
+        this.state = {
+            extended: false,
+            tab: state.seconds !== false ? 1 : 0,
+            cron: ComplexCron.state2cron(state),
+            modes: {
+                seconds: null,
+                minutes: null,
+                hours: null,
+                dates: null,
+                months: null,
+                dows: null,
+            },
+        };
+        Object.assign(this.state, state);
+        if (this.state.cron !== this.props.cronExpression) {
+            setTimeout(() => this.props.onChange && this.props.onChange(this.state.cron), 100);
         }
-        this.setState((0, _defineProperty2["default"])({}, type, convertArrayIntoMinus(nums, max)), function () {
-          return _this3.recalcCron();
-        });
-      }
     }
-  }, {
-    key: "getDigitsSelector",
-    value: function getDigitsSelector(type, max) {
-      var _this4 = this;
-      var values = [];
-      if (max === 7) {
-        values = [1, 2, 3, 4, 5, 6, 0];
-      } else if (max === 60 || max === 24) {
-        for (var i = 0; i < max; i++) {
-          values.push(i);
+    static cron2state(cron) {
+        cron = cron.replace(/['"]/g, '').trim();
+        const cronParts = cron.split(' ').map(p => p.trim());
+        let options;
+        if (cronParts.length === 6) {
+            options = {
+                seconds: cronParts[0] || '*',
+                minutes: cronParts[1] || '*',
+                hours: cronParts[2] || '*',
+                dates: cronParts[3] || '*',
+                months: cronParts[4] || '*',
+                dows: cronParts[5] || '*',
+            };
         }
-      } else {
-        for (var _i3 = 1; _i3 <= max; _i3++) {
-          values.push(_i3);
+        else {
+            options = {
+                seconds: false,
+                minutes: cronParts[0] || '*',
+                hours: cronParts[1] || '*',
+                dates: cronParts[2] || '*',
+                months: cronParts[3] || '*',
+                dows: cronParts[4] || '*',
+            };
         }
-      }
-      var parts = convertMinusIntoArray(this.state[type], max);
-      return [/*#__PURE__*/_react["default"].createElement(_material.Button, {
-        key: "removeall",
-        variant: "outlined",
-        className: this.props.classes.numberButton
-        // style={{paddingBottom: 20}}
-        ,
-        color: "primary",
-        onClick: function onClick() {
-          return _this4.onToggle(false, type, max);
+        return options;
+    }
+    static state2cron(state) {
+        let text = `${state.minutes} ${state.hours} ${state.dates} ${state.months} ${state.dows}`;
+        if (state.seconds !== false) {
+            text = `${state.seconds} ${text}`;
         }
-      }, _i18n["default"].t('ra_Deselect all')), /*#__PURE__*/_react["default"].createElement(_material.Button, {
-        key: "addall",
-        variant: "contained"
-        // style={{paddingBottom: 20}}
-        ,
-        className: this.props.classes.numberButton,
-        color: "secondary",
-        onClick: function onClick() {
-          return _this4.onToggle(true, type, max);
+        return text;
+    }
+    recalcCron() {
+        const cron = ComplexCron.state2cron(this.state);
+        if (cron !== this.state.cron) {
+            this.setState({ cron }, () => this.props.onChange && this.props.onChange(this.state.cron));
+        }
+    }
+    onChange(cron) {
+        if (cron !== this.state.cron) {
+            this.setState({ cron });
+            this.props.onChange && this.props.onChange(cron);
         }
-      }, _i18n["default"].t('ra_Select all')), /*#__PURE__*/_react["default"].createElement("div", {
-        key: "all"
-      }, values.map(function (i) {
-        return [max === 7 && i === 4 || max === 12 && i === 7 || max === 31 && !((i - 1) % 10) || max === 60 && i && !(i % 10) || max === 24 && i && !(i % 6) ? /*#__PURE__*/_react["default"].createElement("div", {
-          key: "allInner".concat(i),
-          style: {
-            width: '100%'
-          }
-        }) : null, /*#__PURE__*/_react["default"].createElement(_material.Button, {
-          key: "_".concat(i),
-          variant: parts.indexOf(i) !== -1 ? 'contained' : 'outlined',
-          className: _this4.props.classes.numberButton,
-          color: parts.indexOf(i) !== -1 ? 'secondary' : 'primary',
-          onClick: function onClick() {
-            return _this4.onToggle(i, type, max);
-          }
-        }, max === 7 ? _i18n["default"].t(WEEKDAYS[i]) : max === 12 ? MONTHS[i - 1] : i)];
-      }))];
     }
-  }, {
-    key: "getPeriodsTab",
-    value: function getPeriodsTab(type, max) {
-      var _this5 = this;
-      var value = this.state[type];
-      var every = value === '*';
-      var everyN = value.toString().includes('/');
-      var select;
-      if (this.state.modes[type] === null) {
-        select = every ? 'every' : everyN ? 'everyN' : 'specific';
-        var modes = JSON.parse(JSON.stringify(this.state.modes));
-        modes[type] = select;
-        return setTimeout(function () {
-          return _this5.setState({
-            modes: modes
-          }, function () {
-            return _this5.recalcCron();
-          });
-        }, 100);
-      }
-      every = this.state.modes[type] === 'every';
-      everyN = this.state.modes[type] === 'everyN';
-      select = this.state.modes[type];
-      if (everyN) {
-        value = parseInt(value.replace('*/', ''), 10) || 1;
-      }
-      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_material.Select, {
-        variant: "standard",
-        className: this.props.classes.periodSelect,
-        style: {
-          verticalAlign: 'bottom'
-        },
-        value: select,
-        onChange: function onChange(e) {
-          var modes = JSON.parse(JSON.stringify(_this5.state.modes));
-          modes[type] = e.target.value;
-          if (e.target.value === 'every') {
-            _this5.setState((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, type, '*'), "modes", modes), function () {
-              return _this5.recalcCron();
-            });
-          } else if (e.target.value === 'everyN') {
-            var num = parseInt(_this5.state[type].toString().replace('*/', ''), 10) || 1;
-            _this5.setState((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, type, "*/".concat(num)), "modes", modes), function () {
-              return _this5.recalcCron();
-            });
-          } else if (e.target.value === 'specific') {
-            var _num = parseInt(_this5.state[type].split(',')[0], 10) || 0;
-            console.log(_num);
-            if (!_num && (type === 'months' || type === 'dates')) {
-              _num = 1;
+    onToggle(i, type, max) {
+        if (i === true) {
+            this.setCronAttr(type, '*');
+        }
+        else if (i === false) {
+            if (max === 60 || max === 24) {
+                this.setCronAttr(type, '0');
+            }
+            else {
+                this.setCronAttr(type, '1');
             }
-            _this5.setState((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, type, convertArrayIntoMinus(_num, max)), "modes", modes), function () {
-              return _this5.recalcCron();
-            });
-          }
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        key: "every",
-        value: "every"
-      }, _i18n["default"].t("sc_every_".concat(type))), /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        key: "everyN",
-        value: "everyN"
-      }, _i18n["default"].t("sc_everyN_".concat(type))), /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
-        key: "specific",
-        value: "specific"
-      }, _i18n["default"].t("sc_specific_".concat(type)))), everyN && false && /*#__PURE__*/_react["default"].createElement("span", null, value), everyN && /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        key: "interval",
-        label: _i18n["default"].t("sc_".concat(type)),
-        value: value,
-        min: 1,
-        max: max,
-        onChange: function onChange(e) {
-          _this5.setState((0, _defineProperty2["default"])({}, type, "*/".concat(e.target.value)), function () {
-            return _this5.recalcCron();
-          });
-        },
-        InputLabelProps: {
-          shrink: true
-        },
-        type: "number",
-        margin: "normal"
-      }), !every && !everyN && this.getDigitsSelector(type, max));
+        else {
+            const nums = convertMinusIntoArray(this.state[type], max);
+            const pos = nums.indexOf(i);
+            if (pos !== -1) {
+                nums.splice(pos, 1);
+            }
+            else {
+                nums.push(i);
+                nums.sort();
+            }
+            this.setCronAttr(type, convertArrayIntoMinus(nums, max));
+        }
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-      var tab = this.state.seconds !== false ? this.state.tab : this.state.tab + 1;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.mainDiv
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          paddingLeft: 8,
-          width: '100%'
+    getDigitsSelector(type, max) {
+        let values = [];
+        if (max === 7) {
+            values = [1, 2, 3, 4, 5, 6, 0];
+        }
+        else if (max === 60 || max === 24) {
+            for (let i = 0; i < max; i++) {
+                values.push(i);
+            }
         }
-      }, /*#__PURE__*/_react["default"].createElement(_material.TextField, {
-        variant: "standard",
-        style: {
-          width: '100%'
-        },
-        value: this.state.cron,
-        disabled: true
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        style: {
-          paddingLeft: 8,
-          width: '100%',
-          height: 60
+        else {
+            for (let i = 1; i <= max; i++) {
+                values.push(i);
+            }
+        }
+        const parts = convertMinusIntoArray(this.state[type], max);
+        return [
+            react_1.default.createElement(material_1.Button, { key: "removeall", variant: "outlined", className: this.props.classes.numberButton, 
+                // style={{paddingBottom: 20}}
+                color: "primary", onClick: () => this.onToggle(false, type, max) }, i18n_1.default.t('ra_Deselect all')),
+            react_1.default.createElement(material_1.Button, { key: "addall", variant: "contained", 
+                // style={{paddingBottom: 20}}
+                className: this.props.classes.numberButton, color: "secondary", onClick: () => this.onToggle(true, type, max) }, i18n_1.default.t('ra_Select all')),
+            react_1.default.createElement("div", { key: "all" }, values.map(i => [((max === 7 && i === 4) ||
+                    (max === 12 && i === 7) ||
+                    (max === 31 && !((i - 1) % 10)) ||
+                    (max === 60 && i && !(i % 10)) ||
+                    (max === 24 && i && !(i % 6))) ?
+                    react_1.default.createElement("div", { key: `allInner${i}`, style: { width: '100%' } }) : null, react_1.default.createElement(material_1.Button, { key: `_${i}`, variant: parts.indexOf(i) !== -1 ? 'contained' : 'outlined', className: this.props.classes.numberButton, color: parts.indexOf(i) !== -1 ? 'secondary' : 'primary', onClick: () => this.onToggle(i, type, max) }, max === 7 ? i18n_1.default.t(WEEKDAYS[i]) : (max === 12 ? MONTHS[i - 1] : i)),
+            ])),
+        ];
+    }
+    getPeriodsTab(type, max) {
+        let value = this.state[type];
+        let every = value === '*';
+        let everyN = value === undefined || value === null ? false : value.toString().includes('/');
+        let select;
+        if (this.state.modes[type] === null) {
+            select = every ? 'every' : (everyN ? 'everyN' : 'specific');
+            const modes = JSON.parse(JSON.stringify(this.state.modes));
+            modes[type] = select;
+            setTimeout(() => this.setState({ modes }, () => this.recalcCron()), 100);
+            return null;
         }
-      }, ComplexCron.convertCronToText(this.state.cron, this.props.language || 'en')), /*#__PURE__*/_react["default"].createElement(_material.FormControlLabel, {
-        control: /*#__PURE__*/_react["default"].createElement(_material.Checkbox, {
-          checked: this.state.seconds,
-          onChange: function onChange(e) {
-            return _this6.setState({
-              seconds: e.target.checked ? '*' : false
-            }, function () {
-              return _this6.recalcCron();
-            });
-          }
-        }),
-        label: _i18n["default"].t('ra_use seconds')
-      }), /*#__PURE__*/_react["default"].createElement(_material.AppBar, {
-        position: "static",
-        classes: {
-          root: this.props.classes.appBar
-        },
-        color: "secondary"
-      }, /*#__PURE__*/_react["default"].createElement(_material.Tabs, {
-        value: this.state.tab,
-        className: this.props.classes.appBar,
-        color: "secondary",
-        onChange: function onChange(active, _tab) {
-          return _this6.setState({
-            tab: _tab
-          });
+        every = this.state.modes[type] === 'every';
+        everyN = this.state.modes[type] === 'everyN';
+        select = this.state.modes[type];
+        let valueNumber = 1;
+        if (everyN && value) {
+            valueNumber = parseInt(value.replace('*/', ''), 10) || 1;
         }
-      }, this.state.seconds !== false && /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "sc_seconds",
-        label: _i18n["default"].t('sc_seconds')
-      }), /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "minutes",
-        label: _i18n["default"].t('sc_minutes')
-      }), /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "hours",
-        label: _i18n["default"].t('sc_hours')
-      }), /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "dates",
-        label: _i18n["default"].t('sc_dates')
-      }), /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "months",
-        label: _i18n["default"].t('sc_months')
-      }), /*#__PURE__*/_react["default"].createElement(_material.Tab, {
-        id: "dows",
-        label: _i18n["default"].t('sc_dows')
-      }))), tab === 0 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('seconds', 60)), tab === 1 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('minutes', 60)), tab === 2 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('hours', 24)), tab === 3 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('dates', 31)), tab === 4 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('months', 12)), tab === 5 && /*#__PURE__*/_react["default"].createElement("div", {
-        className: this.props.classes.tabContent
-      }, this.getPeriodsTab('dows', 7)));
+        return react_1.default.createElement("div", null,
+            react_1.default.createElement(material_1.Select, { variant: "standard", className: this.props.classes.periodSelect, style: { verticalAlign: 'bottom' }, value: select, onChange: e => {
+                    const modes = JSON.parse(JSON.stringify(this.state.modes));
+                    modes[type] = e.target.value;
+                    if (e.target.value === 'every') {
+                        this.setCronAttr(type, '*', modes);
+                    }
+                    else if (e.target.value === 'everyN') {
+                        const num = parseInt((this.state[type] || '').toString().replace('*/', ''), 10) || 1;
+                        this.setCronAttr(type, `*/${num}`, modes);
+                    }
+                    else if (e.target.value === 'specific') {
+                        let num = parseInt((this.state[type] || '').toString().split(',')[0], 10) || 0;
+                        if (!num && (type === 'months' || type === 'dates')) {
+                            num = 1;
+                        }
+                        this.setCronAttr(type, convertArrayIntoMinus(num, max), modes);
+                    }
+                } },
+                react_1.default.createElement(material_1.MenuItem, { key: "every", value: "every" }, i18n_1.default.t(`sc_every_${type}`)),
+                react_1.default.createElement(material_1.MenuItem, { key: "everyN", value: "everyN" }, i18n_1.default.t(`sc_everyN_${type}`)),
+                react_1.default.createElement(material_1.MenuItem, { key: "specific", value: "specific" }, i18n_1.default.t(`sc_specific_${type}`))),
+            everyN && false && react_1.default.createElement("span", null, value),
+            everyN && react_1.default.createElement(material_1.TextField, { variant: "standard", key: "interval", label: i18n_1.default.t(`sc_${type}`), value: valueNumber, inputProps: { min: 1, max: max }, onChange: e => {
+                    // @ts-expect-error is allowed
+                    this.setState({ [type]: `*/${e.target.value}` }, () => this.recalcCron());
+                }, InputLabelProps: { shrink: true }, type: "number", margin: "normal" }),
+            !every && !everyN && this.getDigitsSelector(type, max));
     }
-  }], [{
-    key: "cron2state",
-    value: function cron2state(cron) {
-      cron = cron.replace(/['"]/g, '').trim();
-      var cronParts = cron.split(' ').map(function (p) {
-        return p.trim();
-      });
-      var options = {};
-      if (cronParts.length === 6) {
-        options.seconds = cronParts[0] || '*';
-        options.minutes = cronParts[1] || '*';
-        options.hours = cronParts[2] || '*';
-        options.dates = cronParts[3] || '*';
-        options.months = cronParts[4] || '*';
-        options.dows = cronParts[5] || '*';
-      } else {
-        options.seconds = false;
-        options.minutes = cronParts[0] || '*';
-        options.hours = cronParts[1] || '*';
-        options.dates = cronParts[2] || '*';
-        options.months = cronParts[3] || '*';
-        options.dows = cronParts[4] || '*';
-      }
-      return options;
+    static convertCronToText(cron, lang) {
+        if (cron.split(' ').includes('-')) {
+            return i18n_1.default.t('ra_Invalid CRON');
+        }
+        return (0, cronText_1.default)(cron, lang);
     }
-  }, {
-    key: "state2cron",
-    value: function state2cron(state) {
-      var text = "".concat(state.minutes, " ").concat(state.hours, " ").concat(state.dates, " ").concat(state.months, " ").concat(state.dows);
-      if (state.seconds !== false) {
-        text = "".concat(state.seconds, " ").concat(text);
-      }
-      return text;
+    setCronAttr(attr, value, modes) {
+        if (modes) {
+            if (attr === 'seconds') {
+                this.setState({ seconds: value, modes }, () => this.recalcCron());
+            }
+            else if (attr === 'minutes') {
+                this.setState({ minutes: value, modes }, () => this.recalcCron());
+            }
+            else if (attr === 'hours') {
+                this.setState({ hours: value, modes }, () => this.recalcCron());
+            }
+            else if (attr === 'dates') {
+                this.setState({ hours: value, modes }, () => this.recalcCron());
+            }
+            else if (attr === 'months') {
+                this.setState({ months: value, modes }, () => this.recalcCron());
+            }
+            else if (attr === 'dows') {
+                this.setState({ dows: value, modes }, () => this.recalcCron());
+            }
+            else {
+                this.setState({ modes }, () => this.recalcCron());
+            }
+        }
+        else {
+            if (attr === 'seconds') {
+                this.setState({ seconds: value }, () => this.recalcCron());
+            }
+            else if (attr === 'minutes') {
+                this.setState({ minutes: value }, () => this.recalcCron());
+            }
+            else if (attr === 'hours') {
+                this.setState({ hours: value }, () => this.recalcCron());
+            }
+            else if (attr === 'dates') {
+                this.setState({ hours: value }, () => this.recalcCron());
+            }
+            else if (attr === 'months') {
+                this.setState({ months: value }, () => this.recalcCron());
+            }
+            else if (attr === 'dows') {
+                this.setState({ dows: value }, () => this.recalcCron());
+            }
+        }
     }
-  }, {
-    key: "convertCronToText",
-    value: function convertCronToText(cron, lang) {
-      if (cron.split(' ').includes('-')) {
-        return _i18n["default"].t('ra_Invalid CRON');
-      }
-      return (0, _cronText["default"])(cron, lang);
+    render() {
+        const tab = this.state.seconds !== false ? this.state.tab : this.state.tab + 1;
+        return react_1.default.createElement("div", { className: this.props.classes.mainDiv },
+            react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%' } },
+                react_1.default.createElement(material_1.TextField, { variant: "standard", style: { width: '100%' }, value: this.state.cron, disabled: true })),
+            react_1.default.createElement("div", { style: { paddingLeft: 8, width: '100%', height: 60 } }, ComplexCron.convertCronToText(this.state.cron, this.props.language || 'en')),
+            react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: !!this.state.seconds, onChange: e => this.setState({ seconds: e.target.checked ? '*' : false }, () => this.recalcCron()) }), label: i18n_1.default.t('ra_use seconds') }),
+            react_1.default.createElement(material_1.AppBar, { position: "static", classes: { root: this.props.classes.appBar }, color: "secondary" },
+                react_1.default.createElement(material_1.Tabs, { value: this.state.tab, className: this.props.classes.appBar, color: "secondary", onChange: (active, _tab) => this.setState({ tab: _tab }) },
+                    this.state.seconds !== false && react_1.default.createElement(material_1.Tab, { id: "sc_seconds", label: i18n_1.default.t('sc_seconds') }),
+                    react_1.default.createElement(material_1.Tab, { id: "minutes", label: i18n_1.default.t('sc_minutes') }),
+                    react_1.default.createElement(material_1.Tab, { id: "hours", label: i18n_1.default.t('sc_hours') }),
+                    react_1.default.createElement(material_1.Tab, { id: "dates", label: i18n_1.default.t('sc_dates') }),
+                    react_1.default.createElement(material_1.Tab, { id: "months", label: i18n_1.default.t('sc_months') }),
+                    react_1.default.createElement(material_1.Tab, { id: "dows", label: i18n_1.default.t('sc_dows') }))),
+            tab === 0 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('seconds', 60)),
+            tab === 1 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('minutes', 60)),
+            tab === 2 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('hours', 24)),
+            tab === 3 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('dates', 31)),
+            tab === 4 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('months', 12)),
+            tab === 5 && react_1.default.createElement("div", { className: this.props.classes.tabContent }, this.getPeriodsTab('dows', 7)));
     }
-  }]);
-}(_react["default"].Component);
-ComplexCron.propTypes = {
-  cronExpression: _propTypes["default"].string,
-  onChange: _propTypes["default"].func.isRequired,
-  language: _propTypes["default"].string
-};
-var _default = exports["default"] = (0, _styles.withStyles)(styles)(ComplexCron);
-//# sourceMappingURL=ComplexCron.js.map
+}
+exports.default = (0, styles_1.withStyles)(styles)(ComplexCron);