linkmore-design/lib/cron/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 = void 0;
var _react = _interopRequireWildcard(require("react"));
var _select = _interopRequireDefault(require("../select"));
var _timePicker = _interopRequireDefault(require("../time-picker"));
var _configProvider = _interopRequireDefault(require("../config-provider"));
var _utils = require("./utils");
var _CustomCron = _interopRequireDefault(require("./CustomCron"));
var _moment = _interopRequireDefault(require("moment"));
// import { Select, TimePicker, ConfigProvider } from 'linkmore-design';

const {
  Option
} = _select.default;
const format = 'HH:mm';
const defaultCron = '0 * * * * ?';
const space = ' ';
const timeTypes = [{
  key: 'everyDay',
  label: '每天'
}, {
  key: 'everyWeek',
  label: '每周'
}, {
  key: 'everyMonth',
  label: '每月'
}, {
  key: 'customize',
  label: '周期'
}];
const Cron = ({
  defaultType,
  value,
  onChange
}) => {
  const [defaultTimeType, setDefaultTimeType] = (0, _react.useState)(timeTypes[0].key);
  const [selectedValue, setSelectedValue] = (0, _react.useState)([]);
  const [selectTime, setSelectTime] = (0, _react.useState)(null);
  const [expression, setExpression] = (0, _react.useState)(defaultCron);
  (0, _react.useEffect)(() => {
    if (defaultType) {
      setDefaultTimeType(defaultType);
    }
  }, [defaultType]);

  /* eslint-disable */
  (0, _react.useEffect)(() => {
    if (!value || value === defaultCron) return;
    const currentCron = value.split(' ');
    const [seconds, minutes, hours, dayOfMonth,, dayOfWeek] = currentCron;
    if (defaultTimeType !== 'customize') {
      let selectTimeType = '';
      let defaultSelectValue = [];
      if (dayOfWeek === '?' && dayOfMonth === '*' && hours !== '*' && minutes !== '*') selectTimeType = 'everyDay';
      if (dayOfWeek !== '?' && (dayOfMonth === '*' || dayOfMonth === '?') && minutes !== '*' && hours !== '*') {
        selectTimeType = 'everyWeek';
        defaultSelectValue = dayOfWeek.split(',');
      }
      if (dayOfMonth !== '*' && dayOfMonth !== '?' && dayOfWeek === '?' && minutes !== '*' && hours !== '*' && seconds) {
        selectTimeType = 'everyMonth';
        defaultSelectValue = dayOfMonth.split(',');
      }
      setSelectTime((0, _moment.default)({
        hours,
        minutes
      }));
      setExpression(value);
      setSelectedValue(defaultSelectValue);
      setDefaultTimeType(selectTimeType);
    }
    if (minutes.indexOf(',') !== -1 || hours.indexOf(',') !== -1 || hours === '*' && minutes !== '*' || hours !== '*' && minutes === '*') {
      setDefaultTimeType('customize');
    }
  }, [value]);
  const handleTimeTypeChange = selectValue => {
    setDefaultTimeType(selectValue);
    setSelectTime(null);
    setSelectedValue([]);
    setExpression(defaultCron);
  };
  const handleSelectChange = data => {
    console.log('data', data);
    setSelectedValue(data);
    const selectValues = data.join(',');
    const currentCron = expression ? expression.split(' ') : [];
    const [seconds, minutes, hours, dayOfMonth, month1, dayOfWeek] = currentCron;
    let result = '';
    if (defaultTimeType === 'everyWeek') {
      result = seconds.concat(space).concat(minutes).concat(space).concat(hours).concat(space).concat(dayOfMonth).concat(space).concat(month1).concat(space).concat(selectValues);
    }
    if (defaultTimeType === 'everyMonth') {
      result = seconds.concat(space).concat(minutes).concat(space).concat(hours).concat(space).concat(data.length ? selectValues : '*').concat(space).concat(month1).concat(space).concat(dayOfWeek);
    }
    if (selectTime) onChange?.(result);
    setExpression(result);
  };
  const handleTimeChange = time => {
    setSelectTime(time);
    // if (!time) return;
    const currentCron = expression ? expression.split(' ') : [];
    const [seconds,,, dayOfMonth, month1, dayOfWeek] = currentCron;
    const minutes = (0, _moment.default)(time).minutes().toString();
    const hours = (0, _moment.default)(time).hours().toString();
    let result = null;
    if (!Number.isNaN(Number(hours)) && !Number.isNaN(Number(minutes))) {
      const minutesAndHour = seconds.concat(space).concat(minutes).concat(space).concat(hours).concat(space);
      if (defaultTimeType === 'everyDay') result = minutesAndHour.concat('* * ?');
      if (defaultTimeType !== 'everyDay') result = minutesAndHour.concat(dayOfMonth).concat(space).concat(month1).concat(space).concat(dayOfWeek);
    }
    onChange?.(result);
    setExpression(result);
  };
  const RenderSelect = ({
    placeholder,
    data = []
  }) => {
    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_select.default, {
      mode: "multiple",
      placeholder: placeholder,
      onChange: handleSelectChange,
      className: selectedValue.length ? `select-right select-auto-width` : `select-right select-fixed-width`,
      value: selectedValue
    }, data.map(item => /*#__PURE__*/_react.default.createElement(Option, {
      key: item.key,
      value: item.key
    }, item.label))), defaultTimeType !== 'everyHour' ? /*#__PURE__*/_react.default.createElement(_configProvider.default, null, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
      value: selectTime && (0, _moment.default)(selectTime, format),
      format: format,
      placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4",
      onChange: handleTimeChange
    })) : null);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: defaultTimeType !== 'customize' ? 'cron' : ''
  }, /*#__PURE__*/_react.default.createElement(_select.default, {
    role: "cron-type",
    style: {
      marginRight: '16px',
      width: 'auto'
    },
    placeholder: "\u8BF7\u9009\u62E9\u7C7B\u578B",
    onChange: val => handleTimeTypeChange(val),
    value: defaultTimeType
  }, timeTypes.map(item => /*#__PURE__*/_react.default.createElement(Option, {
    key: item.key,
    value: item.key
  }, item.label))), defaultTimeType === 'customize' && /*#__PURE__*/_react.default.createElement(_CustomCron.default, {
    onChange: onChange,
    value: value
  }), defaultTimeType === 'everyDay' && /*#__PURE__*/_react.default.createElement(_configProvider.default, null, /*#__PURE__*/_react.default.createElement(_timePicker.default, {
    value: selectTime && (0, _moment.default)(selectTime, format),
    format: format,
    placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4",
    onChange: handleTimeChange
  })), defaultTimeType === 'everyWeek' && /*#__PURE__*/_react.default.createElement(RenderSelect, {
    data: _utils.dayOfTheWeekData,
    placeholder: "\u8BF7\u9009\u62E9\u661F\u671F"
  }), defaultTimeType === 'everyMonth' && /*#__PURE__*/_react.default.createElement(RenderSelect, {
    data: _utils.dayOfTheMonthOption,
    placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F"
  }));
};
var _default = Cron;
exports.default = _default;