linkmore-design/es/cron/index.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { Fragment, useEffect, useState } from 'react';
// import { Select, TimePicker, ConfigProvider } from 'linkmore-design';
import Select from "../select";
import TimePicker from "../time-picker";
import ConfigProvider from "../config-provider";
import { dayOfTheMonthOption, dayOfTheWeekData } from "./utils";
import CustomCron from "./CustomCron";
import moment from 'moment';
var Option = Select.Option;
var format = 'HH:mm';
var defaultCron = '0 * * * * ?';
var space = ' ';
var timeTypes = [{
  key: 'everyDay',
  label: '每天'
}, {
  key: 'everyWeek',
  label: '每周'
}, {
  key: 'everyMonth',
  label: '每月'
}, {
  key: 'customize',
  label: '周期'
}];
var Cron = function Cron(_ref) {
  var defaultType = _ref.defaultType,
    value = _ref.value,
    onChange = _ref.onChange;
  var _useState = useState(timeTypes[0].key),
    _useState2 = _slicedToArray(_useState, 2),
    defaultTimeType = _useState2[0],
    setDefaultTimeType = _useState2[1];
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    selectedValue = _useState4[0],
    setSelectedValue = _useState4[1];
  var _useState5 = useState(null),
    _useState6 = _slicedToArray(_useState5, 2),
    selectTime = _useState6[0],
    setSelectTime = _useState6[1];
  var _useState7 = useState(defaultCron),
    _useState8 = _slicedToArray(_useState7, 2),
    expression = _useState8[0],
    setExpression = _useState8[1];
  useEffect(function () {
    if (defaultType) {
      setDefaultTimeType(defaultType);
    }
  }, [defaultType]);

  /* eslint-disable */
  useEffect(function () {
    if (!value || value === defaultCron) return;
    var currentCron = value.split(' ');
    var _currentCron = _slicedToArray(currentCron, 6),
      seconds = _currentCron[0],
      minutes = _currentCron[1],
      hours = _currentCron[2],
      dayOfMonth = _currentCron[3],
      dayOfWeek = _currentCron[5];
    if (defaultTimeType !== 'customize') {
      var selectTimeType = '';
      var 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(moment({
        hours: hours,
        minutes: minutes
      }));
      setExpression(value);
      setSelectedValue(defaultSelectValue);
      setDefaultTimeType(selectTimeType);
    }
    if (minutes.indexOf(',') !== -1 || hours.indexOf(',') !== -1 || hours === '*' && minutes !== '*' || hours !== '*' && minutes === '*') {
      setDefaultTimeType('customize');
    }
  }, [value]);
  var handleTimeTypeChange = function handleTimeTypeChange(selectValue) {
    setDefaultTimeType(selectValue);
    setSelectTime(null);
    setSelectedValue([]);
    setExpression(defaultCron);
  };
  var handleSelectChange = function handleSelectChange(data) {
    console.log('data', data);
    setSelectedValue(data);
    var selectValues = data.join(',');
    var currentCron = expression ? expression.split(' ') : [];
    var _currentCron2 = _slicedToArray(currentCron, 6),
      seconds = _currentCron2[0],
      minutes = _currentCron2[1],
      hours = _currentCron2[2],
      dayOfMonth = _currentCron2[3],
      month1 = _currentCron2[4],
      dayOfWeek = _currentCron2[5];
    var 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 === null || onChange === void 0 ? void 0 : onChange(result);
    setExpression(result);
  };
  var handleTimeChange = function handleTimeChange(time) {
    setSelectTime(time);
    // if (!time) return;
    var currentCron = expression ? expression.split(' ') : [];
    var _currentCron3 = _slicedToArray(currentCron, 6),
      seconds = _currentCron3[0],
      dayOfMonth = _currentCron3[3],
      month1 = _currentCron3[4],
      dayOfWeek = _currentCron3[5];
    var minutes = moment(time).minutes().toString();
    var hours = moment(time).hours().toString();
    var result = null;
    if (!Number.isNaN(Number(hours)) && !Number.isNaN(Number(minutes))) {
      var 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 === null || onChange === void 0 ? void 0 : onChange(result);
    setExpression(result);
  };
  var RenderSelect = function RenderSelect(_ref2) {
    var placeholder = _ref2.placeholder,
      _ref2$data = _ref2.data,
      data = _ref2$data === void 0 ? [] : _ref2$data;
    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Select, {
      mode: "multiple",
      placeholder: placeholder,
      onChange: handleSelectChange,
      className: selectedValue.length ? "select-right select-auto-width" : "select-right select-fixed-width",
      value: selectedValue
    }, data.map(function (item) {
      return /*#__PURE__*/React.createElement(Option, {
        key: item.key,
        value: item.key
      }, item.label);
    })), defaultTimeType !== 'everyHour' ? /*#__PURE__*/React.createElement(ConfigProvider, null, /*#__PURE__*/React.createElement(TimePicker, {
      value: selectTime && moment(selectTime, format),
      format: format,
      placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4",
      onChange: handleTimeChange
    })) : null);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: defaultTimeType !== 'customize' ? 'cron' : ''
  }, /*#__PURE__*/React.createElement(Select, {
    role: "cron-type",
    style: {
      marginRight: '16px',
      width: 'auto'
    },
    placeholder: "\u8BF7\u9009\u62E9\u7C7B\u578B",
    onChange: function onChange(val) {
      return handleTimeTypeChange(val);
    },
    value: defaultTimeType
  }, timeTypes.map(function (item) {
    return /*#__PURE__*/React.createElement(Option, {
      key: item.key,
      value: item.key
    }, item.label);
  })), defaultTimeType === 'customize' && /*#__PURE__*/React.createElement(CustomCron, {
    onChange: onChange,
    value: value
  }), defaultTimeType === 'everyDay' && /*#__PURE__*/React.createElement(ConfigProvider, null, /*#__PURE__*/React.createElement(TimePicker, {
    value: selectTime && moment(selectTime, format),
    format: format,
    placeholder: "\u8BF7\u9009\u62E9\u65F6\u95F4",
    onChange: handleTimeChange
  })), defaultTimeType === 'everyWeek' && /*#__PURE__*/React.createElement(RenderSelect, {
    data: dayOfTheWeekData,
    placeholder: "\u8BF7\u9009\u62E9\u661F\u671F"
  }), defaultTimeType === 'everyMonth' && /*#__PURE__*/React.createElement(RenderSelect, {
    data: dayOfTheMonthOption,
    placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F"
  }));
};
export default Cron;