@iobroker/adapter-react
Version:
React classes to develop admin interfaces for ioBroker with react.
596 lines (511 loc) • 20.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("@material-ui/core/styles");
var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));
var _Tabs = _interopRequireDefault(require("@material-ui/core/Tabs"));
var _Tab = _interopRequireDefault(require("@material-ui/core/Tab"));
var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
var _i18n = _interopRequireDefault(require("../i18n"));
var _cronText = _interopRequireDefault(require("./SimpleCron/cronText"));
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 {
mainDiv: {
width: '100%',
height: '100%'
},
periodSelect: {
//margin: '0 10px 60px 10px',
display: 'block',
width: 200
},
slider: {
marginTop: 20,
display: 'block',
width: '100%'
},
tabContent: {
padding: 20,
height: 'calc(100% - 240px)',
overflow: 'auto'
},
numberButton: {
padding: 4,
minWidth: 40,
margin: 5
},
numberButtonBreak: {
display: 'block'
},
appBar: {
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']; // 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;
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));
}
}
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);
}
}
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(start + ',' + end);
} else {
newParts.push(start + '-' + end);
}
start = value[p];
end = value[p];
} else {
end = value[p];
}
}
if (start === end) {
newParts.push(start);
} else if (end - 1 === start) {
newParts.push(start + ',' + end);
} else {
newParts.push(start + '-' + end);
}
return newParts.join(',');
}
var ComplexCron = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(ComplexCron, _React$Component);
var _super = _createSuper(ComplexCron);
function ComplexCron(props) {
var _this;
(0, _classCallCheck2["default"])(this, ComplexCron);
_this = _super.call(this, props);
var cron = typeof _this.props.cronExpression === 'string' ? _this.props.cronExpression.replace(/^["']/, '').replace(/["']\n?$/, '') : '';
if (cron[0] === '{') {
cron = '';
}
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);
}
return _this;
}
(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 () {
_this2.props.onChange && _this2.props.onChange(_this2.state.cron);
});
}
}
}, {
key: "onChange",
value: function onChange(cron) {
if (cron !== this.state.cron) {
this.setState({
cron: cron
});
this.props.onChange && this.props.onChange(cron);
}
}
}, {
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();
});
}
} 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();
}
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);
}
} else {
for (var _i3 = 1; _i3 <= max; _i3++) {
values.push(_i3);
}
}
var parts = convertMinusIntoArray(this.state[type], max);
return [/*#__PURE__*/_react["default"].createElement(_Button["default"], {
key: "removeall",
variant: 'outlined',
className: this.props.classes.numberButton //style={{paddingBottom: 20}}
,
color: 'primary',
onClick: function onClick() {
return _this4.onToggle(false, type, max);
}
}, _i18n["default"].t('ra_Deselect all')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
key: "addall",
variant: 'contained' //style={{paddingBottom: 20}}
,
className: this.props.classes.numberButton,
color: 'secondary',
onClick: function onClick() {
return _this4.onToggle(true, type, max);
}
}, _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' + i,
style: {
width: '100%'
}
}) : null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
key: '_' + 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().indexOf('/') !== -1;
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);
} else {
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(_Select["default"], {
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') {
var _this5$setState;
_this5.setState((_this5$setState = {}, (0, _defineProperty2["default"])(_this5$setState, type, '*'), (0, _defineProperty2["default"])(_this5$setState, "modes", modes), _this5$setState), function () {
return _this5.recalcCron();
});
} else if (e.target.value === 'everyN') {
var _this5$setState2;
var num = parseInt(_this5.state[type].toString().replace('*/', ''), 10) || 1;
_this5.setState((_this5$setState2 = {}, (0, _defineProperty2["default"])(_this5$setState2, type, '*/' + num), (0, _defineProperty2["default"])(_this5$setState2, "modes", modes), _this5$setState2), function () {
return _this5.recalcCron();
});
} else if (e.target.value === 'specific') {
var _this5$setState3;
var _num = parseInt(_this5.state[type].split(',')[0], 10) || 0;
console.log(_num);
if (!_num && (type === 'months' || type === 'dates')) {
_num = 1;
}
_this5.setState((_this5$setState3 = {}, (0, _defineProperty2["default"])(_this5$setState3, type, convertArrayIntoMinus(_num, max)), (0, _defineProperty2["default"])(_this5$setState3, "modes", modes), _this5$setState3), function () {
return _this5.recalcCron();
});
}
}
}, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
key: "every",
value: "every"
}, _i18n["default"].t('sc_every_' + type)), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
key: "everyN",
value: "everyN"
}, _i18n["default"].t('sc_everyN_' + type)), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
key: "specific",
value: "specific"
}, _i18n["default"].t('sc_specific_' + type))), everyN && false && /*#__PURE__*/_react["default"].createElement("span", null, value), everyN && /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
key: "interval",
label: _i18n["default"].t('sc_' + type),
value: value,
min: 1,
max: max,
onChange: function onChange(e) {
_this5.setState((0, _defineProperty2["default"])({}, type, '*/' + e.target.value), function () {
return _this5.recalcCron();
});
},
InputLabelProps: {
shrink: true
},
type: "number",
margin: "normal"
}), !every && !everyN && this.getDigitsSelector(type, max));
}
}, {
key: "convertCronToText",
value: function convertCronToText(cron, lang) {
if (cron.split(' ').indexOf('-') !== -1) {
return _i18n["default"].t('ra_Invalid CRON');
} else {
return (0, _cronText["default"])(cron, lang);
}
}
}, {
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%'
}
}, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
style: {
width: '100%'
},
value: this.state.cron,
disabled: true
})), /*#__PURE__*/_react["default"].createElement("div", {
style: {
paddingLeft: 8,
width: '100%',
height: 60
}
}, this.convertCronToText(this.state.cron, this.props.language || 'en')), /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
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(_AppBar["default"], {
position: "static",
classes: {
root: this.props.classes.appBar
},
color: "secondary"
}, /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
value: this.state.tab,
className: this.props.classes.appBar,
color: "secondary",
onChange: function onChange(active, tab) {
return _this6.setState({
tab: tab
});
}
}, this.state.seconds !== false && /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
id: "sc_seconds",
label: _i18n["default"].t('sc_seconds')
}), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
id: "minutes",
label: _i18n["default"].t('sc_minutes')
}), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
id: "hours",
label: _i18n["default"].t('sc_hours')
}), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
id: "dates",
label: _i18n["default"].t('sc_dates')
}), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
id: "months",
label: _i18n["default"].t('sc_months')
}), /*#__PURE__*/_react["default"].createElement(_Tab["default"], {
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)));
}
}], [{
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;
}
}, {
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 = state.seconds + ' ' + text;
}
return text;
}
}]);
return ComplexCron;
}(_react["default"].Component);
ComplexCron.propTypes = {
cronExpression: _propTypes["default"].string,
onChange: _propTypes["default"].func.isRequired,
language: _propTypes["default"].string
};
var _default = (0, _styles.withStyles)(styles)(ComplexCron);
exports["default"] = _default;
//# sourceMappingURL=ComplexCron.js.map