声明

• 该组件改编自 qnn-react-cron
• 改编原因：作者长时间未更新组件 导致组件无法正常使用，并在此基础上让功能更符合cron规范

特性

• 🎉 全面支持 cron：秒、分、时、日、月、周、年
• 🎉 日及周条件互斥，自动改变响应值
• 🎉 支持反解析 cron 表达式到 UI
• 🎉 可结合此组件与 Antd 的下拉及输入组件封装成下拉输入框
• 🎉 国际化支持
• 🎉 TypeScript 支持

安装

pnpm i react-cron-panel

使用

import React from 'react';
import Cron from 'react-cron-panel';
import 'react-cron-panel/lib/index.css';

// 可使用 Cron.Provider 配置国际化语言
// 无需配置语言时，可不使用  Cron.Provider
// Cron.Provider 应该包裹于入口组件以实现全部路由下的组件内部语言都被自定义

export default () => {
  // language 为可选参数， 具体配置如下
  const language = {
    // 面板标题,
    // panel title,
    paneTitle: {
      second: '秒',
      minute: '分',
      hour: '时',
      day: '日',
      month: '月',
      week: '周',
      year: '年',
    },

    // assign  指定
    assign: '指定',
    // Don't assign  不指定
    donTAssign: '不指定',

    // Every minute ...   每一秒钟、每一分钟
    everyTime: {
      second: '每一秒钟',
      minute: '每一分钟',
      hour: '每一小时',
      day: '每一日',
      month: '每一月',
      week: '每一周',
      year: '每年',
    },

    // weel option  周选项
    week: {
      sun: '星期日',
      mon: '星期一',
      tue: '星期二',
      wed: '星期三',
      thu: '星期四',
      fri: '星期五',
      sat: '星期六',
    },

    // from [a] to [b] [unit], executed once [unit]    a 到 b 每一个时间单位执行一次
    aTob: {
      second: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}秒，每秒执行一次
        </span>
      ),
      minute: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}分，每分钟执行一次
        </span>
      ),
      hour: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}时，每小时执行一次
        </span>
      ),
      day: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}日，每日执行一次
        </span>
      ),
      month: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}月，每月执行一次
        </span>
      ),
      week: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}，每星期执行一次
        </span>
      ),
      year: (AInput, BInput) => (
        <span>
          从{AInput}-{BInput}年，每年执行一次
        </span>
      ),
    },

    // from [a] [unit] start, every [b] Execute once [unit]   从 a 开始, 每一个时间单位执行一次
    aStartTob: {
      second: (AInput, BInput) => (
        <span>
          从{AInput}秒开始，每{BInput}秒执行一次
        </span>
      ),
      minute: (AInput, BInput) => (
        <span>
          从{AInput}分开始，每{BInput}分执行一次
        </span>
      ),
      hour: (AInput, BInput) => (
        <span>
          从{AInput}时开始，每{BInput}小时执行一次
        </span>
      ),
      day: (AInput, BInput) => (
        <span>
          从{AInput}日开始，每{BInput}日执行一次
        </span>
      ),
      month: (AInput, BInput) => (
        <span>
          从{AInput}月开始，每{BInput}月执行一次
        </span>
      ),

      // [n] in the NTH week of this month    本月第 n 周的 星期[n] 执行一次
      week: (AInput, BInput) => (
        <span>
          本月第{AInput}周的{BInput}执行一次
        </span>
      ),

      // 本月的最后一个 星期[n] 执行一次
      week2: AInput => <span>月的最后一个{AInput}执行一次</span>,

      year: (AInput, BInput) => (
        <span>
          从{AInput}年开始，每{BInput}年执行一次
        </span>
      ),
    },
  };

  return (
    <Cron.Provider
      value={{
        // Minimum optional year    最小可选择的年份
        minYear: new Date().getFullYear(),
        // Maximum optional year   最大可选择的年份
        maxYear: new Date().getFullYear() + 60,
        // language   国际化语言配置
        language,
      }}
    >
      <Cron
        value="* * * * * ?"
        // 配置面板的隐藏, false 即隐藏
        // Configuration panel hiding
        panesShow={{
          second: true,
          minute: true,
          hour: true,
          day: true,
          month: true,
          week: true,
          year: true,
        }}
        // 默认显示哪个面板, 默认为 second， 如果隐藏了 second 需要自行设置
        // The default is second. If second is hidden, you need to set it by yourself
        defaultTab={'second'}
        // 修改值的回调
        onChange={value => {
          console.log('cron:', value);
        }}
      />
    </Cron.Provider>
  );
};