react-cron-ui

react-cron-ui 是一个用于方便输入和编辑 cron 表达式的 React 组件。它提供了直观的用户界面，使用户能够轻松创建和修改 cron 表达式。

特性

• 简单易用的 cron 表达式输入界面
• 支持自定义人类可读的 cron 表达式解析
• 可选显示最近 5 次执行时间
• 兼容 React 16+ 和 Ant Design 4
• 支持周的开始索引 sunStartIndex，周可以从 1 开始也可以从 0 开始

安装

npm install react-cron-ui

使用方法

import React, { useState } from "react";
import { Cron } from "react-cron-ui";
import "react-cron-ui/dist/esm/index.css";

function App() {
  const [express, setExpress] = useState("* * * * * *");

  return (
    <Cron
      value={express}
      onChange={(value) => {
        setExpress(value);
      }}
    ></Cron>
  );
}

export default App;

API

Cron 组件属性 (CronProps)

| 属性 | 类型 | 默认值 | 描述 | | :-----------------: | :-----------------------------: | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | | showResult | boolean | true | 是否显示最近 5 次执行时间的按钮,需要注意的是，这里的结果只在 SunStartIndex.Zero 下有效，因此 SunStartIndex.One 的情况下需要关闭这个功能 | | humanReadableParser | (cronExpress: string) => string | - | 自定义 cron 表达式的人类可读解析函数 | | defaultValue | string | - | 默认的 cron 表达式值 | | value | string | - | 当前的 cron 表达式值（受控模式） | | onChange | (value: string) => void | - | cron 表达式变化时的回调函数 | | sunStartIndex | SunStartIndex | SunStartIndex.Zero | 设置周的开始索引，SunStartIndex 可从组件导出，默认周从 0 开始，也就是 SunStartIndex.Zero |

其他导出

• validCronExpress: 使用 cron-parser 对 cron 表达式进行校验的函数
• CronProps: Cron 组件属性的 TypeScript 接口

兼容性

• React 16+
• Ant Design 4

许可证

MIT License

贡献

欢迎提交 issues 和 pull requests 来帮助改进这个项目。