alps-react-cron
Version:
基于React+Antd的Cron编辑器插件
115 lines (114 loc) • 8.65 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var jsx_runtime_1 = require("react/jsx-runtime");
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var react_1 = require("react");
var TimeSelect_1 = __importDefault(require("./TimeSelect"));
var DayCron_1 = __importDefault(require("./DayCron"));
var Language_1 = __importDefault(require("./Language"));
require("./index.css");
var Cron = function (_a) {
var value = _a.value, height = _a.height, closeClearEditData = _a.closeClearEditData, _b = _a.language, language = _b === void 0 ? 'cn' : _b, _c = _a.showTypes, showTypes = _c === void 0 ? ['second', 'minute', 'hour', 'day', 'month', 'week', 'year'] : _c, handleLanguage = _a.handleLanguage, onChange = _a.onChange;
return ((0, jsx_runtime_1.jsx)(CronContent, { value: value || '* * * * * ? *', height: height, onChange: function (value) { return onChange && onChange(value); }, language: language, handleLanguage: handleLanguage, closeClearEditData: closeClearEditData, showTypes: showTypes }));
};
var getTab = function (title) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(icons_1.InsertRowAboveOutlined, {}), title] }));
};
var secondReg = /^\*$|(^([0-9]|[1-5][0-9])-([0-9]|[1-5][0-9])$)|(^([0-9]|[1-5][0-9])\/\d+$)|(^(([0-9]|[1-5][0-9]),)*([0-9]|[1-5][0-9])$)/;
var minuteReg = /^\*$|(^([0-9]|[1-5][0-9])-([0-9]|[1-5][0-9])$)|(^([0-9]|[1-5][0-9])\/\d+$)|(^(([0-9]|[1-5][0-9]),)*([0-9]|[1-5][0-9])$)/;
var hourReg = /(^\*$)|(^([0-9]|(1[0-9])|(2[0-3]))-([0-9]|(1[0-9])|(2[0-3]))$)|(^([0-9]|(1[0-9])|(2[0-3]))\/\d+$)|(^(([0-9]|(1[0-9])|(2[0-3])),)*([0-9]|(1[0-9])|(2[0-3]))$)/;
var dayReg = /^\*$|^\?$|(^([1-9]|[1-2][0-9]|3[0-1])-([1-9]|[1-2][0-9]|3[0-1])$)|(^([1-9]|[1-2][0-9]|3[0-1])\/\d+$)|(^(([1-9]|[1-2][0-9]|3[0-1]),)*([1-9]|[1-2][0-9]|3[0-1])$)/;
var monthReg = /^\*$|(^([1-9]|1[0-2])-([1-9]|1[0-2])$)|(^([1-9]|1[0-2])\/\d+$)|(^(([1-9]|1[0-2]),)*([1-9]|1[0-2])$)/;
var weekReg = /^\*$|^\?$|(^(SUN|MON|TUE|WED|THU|FRI|SAT)-(SUN|MON|TUE|WED|THU|FRI|SAT)$)|(^(SUN|MON|TUE|WED|THU|FRI|SAT)#\d+$)|(^(SUN|MON|TUE|WED|THU|FRI|SAT)L$)|(^((SUN|MON|TUE|WED|THU|FRI|SAT),)*(SUN|MON|TUE|WED|THU|FRI|SAT)$)/;
var yearReg = /^\*$|^\?$|(^(2019|20[2-5][0-9]|206[0-6])-(2019|20[2-5][0-9]|206[0-6])$)|(^(2019|20[2-5][0-9]|206[0-6])\/\d+$)|(^((2019|20[2-5][0-9]|206[0-6]),)*(2019|20[2-5][0-9]|206[0-6])$)/;
var CronContent = function (_a) {
var value = _a.value, height = _a.height, onChange = _a.onChange, language = _a.language, handleLanguage = _a.handleLanguage, showTypes = _a.showTypes;
var _b = (0, react_1.useState)(showTypes[0]), active = _b[0], setActive = _b[1];
var _c = (0, react_1.useState)(''), cronText = _c[0], setCronText = _c[1];
var _d = (0, react_1.useState)('*'), second = _d[0], setSecond = _d[1];
var _e = (0, react_1.useState)('*'), minute = _e[0], setMinute = _e[1];
var _f = (0, react_1.useState)('*'), hour = _f[0], setHour = _f[1];
var _g = (0, react_1.useState)('*'), day = _g[0], setDay = _g[1];
var _h = (0, react_1.useState)('*'), month = _h[0], setMonth = _h[1];
var _j = (0, react_1.useState)('*'), week = _j[0], setWeek = _j[1];
var _k = (0, react_1.useState)('*'), year = _k[0], setYear = _k[1];
var Language = (0, Language_1.default)(language);
(0, react_1.useEffect)(function () {
initData();
}, [value]);
var initData = function () {
var _a = value.split(' '), second = _a[0], minute = _a[1], hour = _a[2], day = _a[3], month = _a[4], week = _a[5], year = _a[6];
setSecond(secondReg.test(second) ? second : '*');
setMinute(minuteReg.test(minute) ? minute : '*');
setHour(hourReg.test(hour) ? hour : '*');
setDay(dayReg.test(day) ? day : '*');
setMonth(monthReg.test(month) ? month : '*');
setWeek(weekReg.test(week) ? week : '?');
setYear(yearReg.test(year) ? year : '*');
setCronText("".concat(second, " ").concat(minute, " ").concat(hour, " ").concat(day, " ").concat(month, " ").concat(week, " ").concat(year));
};
(0, react_1.useEffect)(function () {
setCronText("".concat(second, " ").concat(minute, " ").concat(hour, " ").concat(day, " ").concat(month, " ").concat(week, " ").concat(year));
}, [second, minute, hour, day, month, week, year]);
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(antd_1.Card, __assign({ bodyStyle: {
padding: 0,
width: language === 'cn' ? 480 : 645,
maxHeight: height,
}, rootClassName: 'react-cron-bh-card', bordered: true }, { children: (0, jsx_runtime_1.jsx)(antd_1.Tabs, { className: 'react-cron-bh-tabs', activeKey: active, type: 'card', onChange: setActive, items: [
{
key: 'second',
label: getTab(Language.second.name),
children: ((0, jsx_runtime_1.jsx)(TimeSelect_1.default, { value: second, onChange: setSecond, type: 'second', language: language })),
className: 'react-cron-bh-tab',
},
{
key: 'minute',
label: getTab(Language.minute.name),
children: ((0, jsx_runtime_1.jsx)(TimeSelect_1.default, { value: minute, onChange: setMinute, type: 'minute', language: language })),
className: 'react-cron-bh-tab',
},
{
key: 'hour',
label: getTab(Language.hour.name),
children: ((0, jsx_runtime_1.jsx)(TimeSelect_1.default, { value: hour, onChange: setHour, type: 'hour', language: language })),
className: 'react-cron-bh-tab',
},
{
key: 'day',
label: getTab(Language.day.name),
children: ((0, jsx_runtime_1.jsx)(DayCron_1.default, { day: day, week: week, setDay: setDay, setWeek: setWeek, language: language })),
className: 'react-cron-bh-tab',
},
{
key: 'month',
label: getTab(Language.month.name),
children: ((0, jsx_runtime_1.jsx)(TimeSelect_1.default, { value: month, onChange: setMonth, type: 'month', language: language })),
className: 'react-cron-bh-tab',
},
{
key: 'year',
label: getTab(Language.year.name),
children: ((0, jsx_runtime_1.jsx)(TimeSelect_1.default, { value: year, onChange: setYear, type: 'year', language: language })),
className: 'react-cron-bh-tab',
},
].filter(function (i) { return showTypes.includes(i.key); }) }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: 'react-cron-bh-bottom' }, { children: [handleLanguage ? ((0, jsx_runtime_1.jsx)(antd_1.Radio.Group, { options: Language.language, onChange: function (_a) {
var value = _a.target.value;
return handleLanguage === null || handleLanguage === void 0 ? void 0 : handleLanguage(value);
}, value: language, optionType: 'button', buttonStyle: 'solid' })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsx)(antd_1.Tooltip, __assign({ title: cronText }, { children: (0, jsx_runtime_1.jsx)("span", __assign({ className: 'react-cron-bh-bottom-cron' }, { children: cronText })) })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(antd_1.Button, __assign({ style: { marginRight: 8 }, onClick: function () { return onChange(''); } }, { children: Language.close })) })] }))] }));
};
exports.default = Cron;