cron-hooks/dist/index.js

cron-hooks 定时表达式

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('antd/es/dropdown/style');
var _Dropdown = _interopDefault(require('antd/es/dropdown'));
require('antd/es/input/style');
var _Input = _interopDefault(require('antd/es/input'));
require('antd/es/col/style');
var _Col = _interopDefault(require('antd/es/col'));
require('antd/es/checkbox/style');
var _Checkbox = _interopDefault(require('antd/es/checkbox'));
require('antd/es/tabs/style');
var _Tabs = _interopDefault(require('antd/es/tabs'));
var React = require('react');
var React__default = _interopDefault(React);
require('antd/es/row/style');
var _Row = _interopDefault(require('antd/es/row'));
require('antd/es/input-number/style');
var _InputNumber = _interopDefault(require('antd/es/input-number'));
require('antd/es/select/style');
var _Select = _interopDefault(require('antd/es/select'));
require('antd/es/radio/style');
var _Radio = _interopDefault(require('antd/es/radio'));

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

/*
 * @Descripttion:
 * @Author: Bean
 * @Date: 2020-08-28 14:39:29
 * @LastEditors: Bean
 * @LastEditTime: 2020-08-31 16:02:43
 */
// CRON组件对应的默认数据
var second = {
  '1': '*',
  '2': '1-1',
  '3': '1/1',
  '4': '0'
};

var minute = _objectSpread2({}, second);

var hour = _objectSpread2({}, second);

var day = _objectSpread2(_objectSpread2({}, second), {}, {
  '4': '1',
  '5': '?'
});

var month = _objectSpread2(_objectSpread2({}, second), {}, {
  '4': '1'
});

var week = {
  '1': '*',
  '4': 'MON',
  '5': '?',
  '6': 'SUN-FRI',
  '7': 'SUN#1',
  '8': 'MONL'
};
var year = {
  '1': '*',
  '2': '1-1',
  '3': '1/1',
  '4': '1'
};
var localeMap = {
  second: '秒',
  minute: '分',
  hour: '时',
  day: '日',
  month: '月',
  week: '周',
  year: '年'
};
var defaultData = {
  second: second,
  minute: minute,
  hour: hour,
  day: day,
  month: month,
  week: week,
  year: year
};

var RadioGroup = _Radio.Group;
var CheckboxGroup = _Checkbox.Group;
var Option = _Select.Option;

var CronPane = function CronPane(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? '0' : _props$value,
      _props$type = props.type,
      type = _props$type === void 0 ? 'second' : _props$type,
      _props$options = props.options,
      options = _props$options === void 0 ? [] : _props$options,
      onChange = props.onChange,
      createChecks = props.createChecks;
  var defaultSecond = defaultData[type];
  var defaultInputData = {
    cycles: ['1', '1'],
    ranges: ['1', '1'],
    checks: type === 'week' ? ['MON'] : [options[0]],
    weekRanges: ['SUN', 'FRI'],
    weekSeveral: ['SUN', '1'],
    weekl: 'MON'
  };
  var radiochecked = '1';

  if (value === '*') {
    radiochecked = '1';
  } else if (value === '?') {
    radiochecked = '5';
  } else if (value.indexOf('-') > -1) {
    var tempValue = value.split('-');

    if (type === 'week') {
      radiochecked = '6';
      defaultInputData.weekRanges = tempValue;
    } else {
      radiochecked = '2';
      defaultInputData.cycles = tempValue;
    }
  } else if (value.indexOf('/') > -1) {
    radiochecked = '3';
    defaultInputData.ranges = value.split('/');
  } else if (value.indexOf('#') > -1) {
    radiochecked = '7';
    defaultInputData.weekSeveral = value.split('#');
  } else if (value.indexOf('L') > -1) {
    radiochecked = '8';
    defaultInputData.weekl = value.slice(0, value.length - 1);
  } else {
    // 数组类型
    radiochecked = '4';
    defaultInputData.checks = value.split(',');
  } // radio更改，赋给默认的second对应数据，以重新渲染选中的radio


  var onRadioChange = function onRadioChange(e) {
    var secondRadio = e.target.value;
    onChange(type, defaultSecond[secondRadio]);
  }; // checkbox更改直接修改数据


  var onCheckboxChange = function onCheckboxChange(checkedValues) {
    var data = Array.from(new Set(checkedValues));
    onChange(type, data.join(','));
  };

  var inputChange = function inputChange(inputValue, option, index, connectLine) {
    var reportData = '';

    if (radiochecked !== '8') {
      defaultInputData[option][index] = "".concat(inputValue);
      reportData = defaultInputData[option].join(connectLine);
    } else {
      // 周 -- 本月的最后一个星期， 数据是末尾加 L 标识的字符串
      defaultInputData[option] = "".concat(inputValue, "L");
      reportData = defaultInputData[option];
    }

    onChange(type, reportData);
  };

  var radioStyle = {
    display: 'block',
    height: '30px',
    lineHeight: '30px'
  };
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RadioGroup, {
    name: "radiogroup",
    value: radiochecked,
    onChange: onRadioChange
  }, /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "1"
  }, "\u6BCF\u4E00", localeMap[type]), (type === 'day' || type === 'week') && /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "5"
  }, "\u4E0D\u6307\u5B9A"), type === 'week' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "6"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u6309\u5468\u671F \u5468\u671F\u4ECE \u661F\u671F"), /*#__PURE__*/React__default.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default.createElement(_Select, {
    disabled: radiochecked !== '6',
    value: defaultInputData.weekRanges[0] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'weekRanges', 0, '-');
    },
    style: {
      width: 100
    }
  }, options.map(function (item) {
    return /*#__PURE__*/React__default.createElement(Option, {
      value: item,
      key: item
    }, item);
  }))), /*#__PURE__*/React__default.createElement("span", {
    className: "divider"
  }), /*#__PURE__*/React__default.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default.createElement(_Select, {
    disabled: radiochecked !== '6',
    value: defaultInputData.weekRanges[1] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'weekRanges', 1, '-');
    },
    style: {
      width: 100
    }
  }, options.map(function (item) {
    return /*#__PURE__*/React__default.createElement(Option, {
      value: item,
      key: item
    }, item);
  })))), /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "7"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u672C\u6708\u7B2C"), /*#__PURE__*/React__default.createElement(_InputNumber, {
    disabled: radiochecked !== '7',
    min: 1,
    max: 5,
    value: defaultInputData.weekSeveral[1] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'weekSeveral', 1, '#');
    },
    style: {
      width: 100
    }
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "lr5"
  }, "\u5468 \u7684\u661F\u671F"), /*#__PURE__*/React__default.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default.createElement(_Select, {
    disabled: radiochecked !== '7',
    value: defaultInputData.weekSeveral[0] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'weekSeveral', 0, '#');
    },
    style: {
      width: 100
    }
  }, options.map(function (item) {
    return /*#__PURE__*/React__default.createElement(Option, {
      value: item,
      key: item
    }, item);
  })))), /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "8"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u672C\u6708\u7684\u6700\u540E\u4E00\u4E2A\u661F\u671F"), /*#__PURE__*/React__default.createElement("span", {
    onClick: function onClick(e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, /*#__PURE__*/React__default.createElement(_Select, {
    disabled: radiochecked !== '8',
    value: defaultInputData.weekl || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'weekl');
    },
    style: {
      width: 100
    }
  }, options.map(function (item) {
    return /*#__PURE__*/React__default.createElement(Option, {
      value: item,
      key: item
    }, item);
  }))))), type !== 'week' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "2"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u6309\u5468\u671F \u5468\u671F\u4ECE"), /*#__PURE__*/React__default.createElement(_InputNumber, {
    disabled: radiochecked !== '2',
    min: 0,
    max: 59,
    value: defaultInputData.cycles[0] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'cycles', 0, '-');
    },
    style: {
      width: 100
    }
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "divider"
  }), /*#__PURE__*/React__default.createElement(_InputNumber, {
    disabled: radiochecked !== '2',
    min: 0,
    max: 59,
    value: defaultInputData.cycles[1] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'cycles', 1, '-');
    },
    style: {
      width: 100
    }
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "left5"
  }, localeMap[type])), /*#__PURE__*/React__default.createElement(_Radio, {
    style: radioStyle,
    value: "3"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u5468\u671F\u4ECE"), /*#__PURE__*/React__default.createElement(_InputNumber, {
    disabled: radiochecked !== '3',
    min: 0,
    max: 59,
    value: defaultInputData.ranges[0] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'ranges', 0, '/');
    },
    style: {
      width: 100
    }
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "lr5"
  }, localeMap[type], "\u5F00\u59CB\uFF0C \u6BCF"), /*#__PURE__*/React__default.createElement(_InputNumber, {
    disabled: radiochecked !== '3',
    min: 0,
    max: 59,
    value: defaultInputData.ranges[1] || '',
    size: "small",
    onChange: function onChange(val) {
      return inputChange(val, 'ranges', 1, '/');
    },
    style: {
      width: 100
    }
  }), /*#__PURE__*/React__default.createElement("span", {
    className: "left5"
  }, localeMap[type], " \u6267\u884C\u4E00\u6B21"))), /*#__PURE__*/React__default.createElement(_Radio, {
    value: "4"
  }, /*#__PURE__*/React__default.createElement("span", {
    className: "right5"
  }, "\u6307\u5B9A"), /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement(CheckboxGroup, {
    defaultValue: defaultInputData.checks,
    style: {
      width: '100%'
    },
    onChange: onCheckboxChange
  }, /*#__PURE__*/React__default.createElement(_Row, null, " ", createChecks(type, radiochecked, '4'), " ")))));
};

var TabPane = _Tabs.TabPane;
var options = {
  second: [],
  hour: [],
  day: [],
  month: [],
  week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
}; // eslint-disable-next-line no-plusplus

for (var i = 0; i < 60; i++) {
  options.second.push("".concat(i));
  if (i < 24) options.hour.push("".concat(i));
  if (i > 0 && i < 32) options.day.push("".concat(i));
  if (i > 0 && i < 13) options.month.push("".concat(i));
}
/**
 * @name: cron表达式组件
 * @msg:
 * @param {type}
 * @return {type}
 */


var CronHooks = function CronHooks(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? '0 0 0 * * ?' : _props$value,
      _props$type = props.type,
      type = _props$type === void 0 ? ['second', 'minute', 'hour', 'day', 'month', 'week'] : _props$type,
      _props$style = props.style,
      style = _props$style === void 0 ? {
    width: 540
  } : _props$style,
      onChange = props.onChange;
  var cronArr = value.split(' ');

  var _useState = React.useState(type[0]),
      _useState2 = _slicedToArray(_useState, 2),
      activeKey = _useState2[0],
      setActiveKey = _useState2[1];

  var _useState3 = React.useState({
    second: cronArr[0] || '0',
    minute: cronArr[1] || '0',
    hour: cronArr[2] || '0',
    day: cronArr[3] || '*',
    month: cronArr[4] || '*',
    week: cronArr[5] || '?',
    year: cronArr[6]
  }),
      _useState4 = _slicedToArray(_useState3, 2),
      cronData = _useState4[0],
      setCronData = _useState4[1]; // type类型做映射，确定TabPane是否显示


  var typeMap = {};
  type.map(function (tp) {
    typeMap[tp] = true;
  }); // 获取最后的 cron表达式，在表单中使用时，通过onChange上报

  var getValue = function getValue(data) {
    var second = data.second,
        minute = data.minute,
        hour = data.hour,
        day = data.day,
        month = data.month,
        week = data.week,
        year = data.year;
    var tempArr = [second, minute, hour, day, month, week, year];
    var val = tempArr.filter(function (cron) {
      return !!cron;
    }).join(' ');
    return val;
  };

  var tabsChange = function tabsChange(active) {
    setActiveKey(active);
  };

  var createChecks = function createChecks(option, radiochecked, radio) {
    var flag = option === 'minute' ? 'second' : option;
    var optionList = options[flag] || [];
    return optionList.map(function (index) {
      return /*#__PURE__*/React__default.createElement(_Col, {
        key: index,
        span: optionList.length === 7 ? 3 : 4,
        style: {
          marginRight: optionList.length === 7 ? 5 : 0
        }
      }, /*#__PURE__*/React__default.createElement(_Checkbox, {
        disabled: radiochecked !== radio,
        value: index.toString()
      }, index));
    });
  }; // 表达式监听事件


  var expressionChange = function expressionChange(option, val) {
    var tempCron = _objectSpread2({}, cronData);

    tempCron[option] = val;
    setCronData(_objectSpread2(_objectSpread2({}, cronData), {}, _defineProperty({}, option, val)));

    if (onChange) {
      var inputValue = getValue(tempCron);
      onChange(inputValue);
    }
  };

  return /*#__PURE__*/React__default.createElement("div", {
    className: "cron-wrap",
    style: style
  }, /*#__PURE__*/React__default.createElement(_Tabs, {
    activeKey: activeKey,
    onChange: tabsChange
  }, typeMap.second && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u79D2",
    key: "second"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "second",
    value: cronData.second,
    options: options.second,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.minute && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u5206",
    key: "minute"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "minute",
    value: cronData.minute,
    options: options.second,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.hour && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u65F6",
    key: "hour"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "hour",
    value: cronData.hour,
    options: options.hour,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.day && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u65E5",
    key: "day"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "day",
    value: cronData.day,
    options: options.day,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.month && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u6708",
    key: "month"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "month",
    value: cronData.month,
    options: options.month,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.week && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u5468",
    key: "week"
  }, /*#__PURE__*/React__default.createElement(CronPane, {
    type: "week",
    value: cronData.week,
    options: options.week,
    onChange: expressionChange,
    createChecks: createChecks
  })), typeMap.year && /*#__PURE__*/React__default.createElement(TabPane, {
    tab: "\u5E74",
    key: "year"
  }, "year")));
};

var InputCron = function InputCron(props) {
  var value = props.value,
      style = props.style,
      lang = props.lang,
      type = props.type,
      width = props.width,
      onChange = props.onChange;

  var _useState5 = React.useState({
    value: value || '',
    dateVisible: false
  }),
      _useState6 = _slicedToArray(_useState5, 2),
      state = _useState6[0],
      setState = _useState6[1];

  var handleChange = function handleChange(val) {
    setState(_objectSpread2(_objectSpread2({}, state), {}, {
      value: val
    }));

    if (onChange) {
      onChange(val);
    }
  };

  return /*#__PURE__*/React__default.createElement(_Dropdown, {
    trigger: ['click'],
    placement: "bottomLeft",
    visible: state.dateVisible,
    onVisibleChange: function onVisibleChange(visible) {
      return setState(_objectSpread2(_objectSpread2({}, state), {}, {
        dateVisible: visible
      }));
    },
    overlay: /*#__PURE__*/React__default.createElement(CronHooks, {
      onChange: handleChange,
      value: value,
      style: style,
      type: type
    })
  }, /*#__PURE__*/React__default.createElement(_Input, {
    readOnly: true,
    value: value,
    style: {
      width: width
    }
  }));
};

exports.InputCron = InputCron;
exports.default = CronHooks;