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

🌈 🚀lm组件库。🚀

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { Fragment, useEffect, useState } from 'react';
// import { Select } from 'linkmore-design';
import Select from "../../select";
import { CronBuilder } from 'cron-builder-ts';
import { convertResult, dayOfTheMonthOption, dayOfTheWeekOption, defaultCron, hourOption, minuteOption, monthOption } from "../utils";
var cronExp = new CronBuilder();
var EVERY = ['*'];
var Option = Select.Option;
export default function CustomCron(_ref) {
  var value = _ref.value,
    disabled = _ref.disabled,
    onChange = _ref.onChange;
  var _useState = useState({}),
    _useState2 = _slicedToArray(_useState, 2),
    expression = _useState2[0],
    setExpression = _useState2[1];
  // const [cronResult, setCronResult] = useState('');

  useEffect(function () {
    if (!value) return;
    var currentCron = value.split(' ');
    currentCron.shift();
    var _currentCron = _slicedToArray(currentCron, 5),
      minutes = _currentCron[0],
      hours = _currentCron[1],
      dayOfMonth = _currentCron[2],
      month1 = _currentCron[3],
      dayOfWeek = _currentCron[4];

    /* eslint-disable */
    function splitMultiple(value) {
      if (!value || value === '*' || value === '?') {
        return;
      }
      if (value.includes(',')) {
        return value.split(',');
      }
      return [value];
    }
    var 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) {
    var tmp = _objectSpread(_objectSpread({}, expression), obj);
    setExpression(tmp);
    onChange(generateExpression(tmp));
  }
  function generateExpression(expression) {
    var _expression$minute = expression.minute,
      minute = _expression$minute === void 0 ? [] : _expression$minute,
      _expression$hour = expression.hour,
      hour = _expression$hour === void 0 ? [] : _expression$hour,
      _expression$dayOfTheM = expression.dayOfTheMonth,
      dayOfTheMonth = _expression$dayOfTheM === void 0 ? [] : _expression$dayOfTheM,
      _expression$month = expression.month,
      month = _expression$month === void 0 ? [] : _expression$month,
      _expression$dayOfTheW = expression.dayOfTheWeek,
      dayOfTheWeek = _expression$dayOfTheW === void 0 ? [] : _expression$dayOfTheW;
    var 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);
    var expressionResult = cronExp.build();
    var result = expressionResult === defaultCron ? '' : expressionResult;
    // setCronResult(result);

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