linkmore-design/lib/cron/CustomCron/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CustomCron;
var _react = _interopRequireWildcard(require("react"));
var _select = _interopRequireDefault(require("../../select"));
var _cronBuilderTs = require("cron-builder-ts");
var _utils = require("../utils");
// import { Select } from 'linkmore-design';

const cronExp = new _cronBuilderTs.CronBuilder();
const EVERY = ['*'];
const {
  Option
} = _select.default;
function CustomCron({
  value,
  disabled,
  onChange
}) {
  const [expression, setExpression] = (0, _react.useState)({});
  // const [cronResult, setCronResult] = useState('');

  (0, _react.useEffect)(() => {
    if (!value) return;
    const currentCron = value.split(' ');
    currentCron.shift();
    const [minutes, hours, dayOfMonth, month1, dayOfWeek] = currentCron;

    /* eslint-disable */
    function splitMultiple(value) {
      if (!value || value === '*' || value === '?') {
        return;
      }
      if (value.includes(',')) {
        return value.split(',');
      }
      return [value];
    }
    const expre = {
      minute: splitMultiple(minutes) || [],
      hour: splitMultiple(hours) || [],
      dayOfTheMonth: splitMultiple(dayOfMonth !== '0' ? dayOfMonth : '0'),
      dayOfTheWeek: splitMultiple(dayOfWeek) || [],
      month: splitMultiple(month1) || []
    };
    setExpression(expre);
    // setCronResult(convertCron(value));
  }, [value]);
  function handleChange(obj) {
    const tmp = {
      ...expression,
      ...obj
    };
    setExpression(tmp);
    onChange(generateExpression(tmp));
  }
  function generateExpression(expression) {
    const {
      minute = [],
      hour = [],
      dayOfTheMonth = [],
      month = [],
      dayOfTheWeek = []
    } = expression;
    const exp = cronExp.getAll();
    exp.minute = minute.length > 0 ? minute : EVERY;
    exp.hour = hour.length > 0 ? hour : EVERY;
    exp.dayOfTheMonth = dayOfTheMonth && dayOfTheMonth.length > 0 && dayOfTheMonth[0] !== '0' ? dayOfTheMonth : EVERY;
    exp.month = month.length > 0 ? month : EVERY;
    exp.dayOfTheWeek = dayOfTheWeek.length > 0 ? dayOfTheWeek : EVERY;
    cronExp.setAll(exp);
    const expressionResult = cronExp.build();
    const result = expressionResult === _utils.defaultCron ? '' : expressionResult;
    // setCronResult(result);

    return (0, _utils.convertResult)(result);
  }
  function renderSelect(label, placeholder, key, value, data = []) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "cron-box"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "cron-label"
    }, label, ":"), /*#__PURE__*/_react.default.createElement("div", {
      className: "cron-select"
    }, /*#__PURE__*/_react.default.createElement(_select.default, {
      mode: "multiple",
      placeholder: placeholder,
      value: value,
      disabled: disabled,
      onChange: val => handleChange({
        [key]: val
      }),
      style: {
        minWidth: 200
      }
    }, data.map(item => /*#__PURE__*/_react.default.createElement(Option, {
      key: item.key,
      value: item.key
    }, item.label)))));
  }
  const {
    minute,
    hour,
    dayOfTheMonth,
    dayOfTheWeek,
    month
  } = expression;
  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, renderSelect('月份', '每月', 'month', month, _utils.monthOption), renderSelect('星期', '每周', 'dayOfTheWeek', dayOfTheWeek, _utils.dayOfTheWeekOption), renderSelect('日', '每天', 'dayOfTheMonth', dayOfTheMonth, _utils.dayOfTheMonthOption), renderSelect('小时', '每小时', 'hour', hour, _utils.hourOption), renderSelect('分钟', '每分钟', 'minute', minute, _utils.minuteOption))
  // <div>{cronResult}</div>
  ;
}