# qnn-react-cron

> > 使用中遇到问题欢迎提 issues

Latest version **2.0.1** (published 2024-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install qnn-react-cron
pnpm add qnn-react-cron
yarn add qnn-react-cron
bun add qnn-react-cron
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2024-04-24 |
| First published | 2020-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 14 |
| Unpacked size | 98.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Author | wangzongming |
| Maintainers | wangxiongxiong |

## Links

- npm: https://www.npmjs.com/package/qnn-react-cron
- Repository: https://github.com/wangzongming/qnn-react-cron
- Homepage: https://github.com/wangzongming/qnn-react-cron#readme
- Issues: https://github.com/wangzongming/qnn-react-cron/issues
- npm.io page: https://npm.io/package/qnn-react-cron

## Dependencies (14)

- [antd](https://npm.io/package/antd.md) ^5.16.4
- [less](https://npm.io/package/less.md) 3.10.3
- [core-js](https://npm.io/package/core-js.md) 2.6.10
- [jest-worker](https://npm.io/package/jest-worker.md) ^29.7.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.24.4
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^9.5.9
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.24.1
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.8
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.24.1
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [babel-plugin-transform-object-assign](https://npm.io/package/babel-plugin-transform-object-assign.md) ^6.22.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.18.6
- [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.21.0
- [@babel/plugin-proposal-object-rest-spread](https://npm.io/package/@babel/plugin-proposal-object-rest-spread.md) ^7.20.7

## Recent versions

- 2.0.1 (latest) — 2024-04-24
- 2.0.0 — 2024-04-23
- 1.2.6 — 2024-01-14
- 1.0.6 — 2023-12-22
- 1.0.5 — 2023-06-08
- 1.0.4 — 2023-03-02
- 1.0.3 — 2022-09-01
- 1.0.2 — 2022-08-31
- 1.0.0 — 2022-06-15
- 0.8.6 — 2022-04-15
- 0.8.5 — 2022-02-22
- 0.8.4 — 2022-01-21
- 0.8.3 — 2022-01-07
- 0.5.3 — 2021-11-09
- 0.4.3 — 2021-11-08
- … 4 more at https://npm.io/package/qnn-react-cron/versions

## README

# qnn-react-cron [![npm](https://img.shields.io/npm/v/qnn-react-cron.svg)](https://www.npmjs.com/package/qnn-react-cron)  [![npm](https://img.shields.io/npm/dm/qnn-react-cron.svg?style=flat)](https://www.npmjs.com/package/qnn-react-cron)

> 使用中遇到问题欢迎提 issues

> 如果组件对你有帮助的话，请使用你那个发财的小手帮我点个星星吧！

<div align="center"> 
    <div>基于React及Antd的cron时间表达式生成器</div>
    <br/>
    <img width=700 src="./preview2.png" alt="效果图" />
    <img width=700 src="./preview.png" alt="效果图" />
</div>


### 声明

该组件改编自
<a href="https://github.com/zhengxiangqi/react-cron-antd">react-cron-antd</a>
<br />改编原因：作者长时间未更新组件 导致组件无法正常引用，除了修复了不能组件不能使用的问题外，<br />
在原基础增加：getCronFns、footer、国际化等功能使组件更加灵活强大，修改 value 值传入后或者更新后自动重新渲染

### 特性

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


### 安装

    // yarn 安装
    yarn add qnn-react-cron 
    
    // npm 安装
    npm i qnn-react-cron



### 对 antd 版本的支持
请自行根据自己项目中使用的的 antd 版本安装对应的 qnn-react-cron 版本

    qnn-react-cron 1.x 版本使用 antd 4.x
    qnn-react-cron 2.x 版本使用 antd 5.x

### 预览地址

<a href="https://codesandbox.io/s/qnn-react-cron-fxvbp">codesandbox 点击直达</a>

### 使用

```jsx
import React from "react";
import Cron from "qnn-react-cron";

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

export default ()=>{

    const cronFnsRef = useRef();

  // 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,
      }}

      // 默认显示哪个面板, 默认为有值且未隐藏的第一个面板 或者 第一个未被隐藏的面板， 设置后将不会自动跳转到有值的面板，而是定死默认显示某个面板
      // Which panel is displayed by default. The default is the first panel that has a value and is not hidden or the first panel that is not hidden. After setting this parameter, the system does not automatically jump to the panel that has a value
      defaultTab={"second"}

      // 未自定义底部按钮时，用户点击确认按钮后的回调
      // The bottom button is not customized when the user clicks the confirm button after the callback
      onOk={(value) => {
        console.log("cron:", value);
      }}

      // 相当于 ref
      // equivalent to ref
      getCronFns={(fns) => {
        // 获取值方法
        // fns.getValue: () => string

        // 解析Cron表达式到UI 调用该方法才可以重新渲染 【一般不使用】(value值改变后组件会自动更新渲染)
        // fns.onParse: () => Promise().then(()=>void).catch(()=>()=>void),
        cronFnsRef.current = fns;
      }}

      // 自定义底部按钮后需要自行调用方法来或者值
      // After customizing the bottom button, you need to call the method or value
      footer={[
        //默认值
        <Button key="1" style={{ marginRight: 10 }} onClick={() => cronFnsRef.current.onParse("* * * * * ? *")}>
          解析到UI
        </Button>,
        <Button key="2" type="primary" onClick={() => console.log(cronFnsRef.current.getValue())}>
          生成
        </Button>
      ]}

      // onChange 事件，当值改变时触发 
      // onChange event, triggered when the value changes 
      // @param type = "second" | "minute" | "hour" | "day" | "month" | "week" | "year"
      // @param value = string
      onChange={({ type, value }) => {
        console.log(type, value)
      }}
    />
  </Cron.Provider>
}
```

### TypeScript 描述

    // CronProps 组件接受的 props
    // CronFns 实际上是组件的 ref
    import { CronProps, CronFns } from "qnn-react-cron"

    // ts 中引用的方式
    import * as QnnCron from "qnn-react-cron"

### TypeScript 项目中使用

##### 方式一

用 * as 引入，这种方式和在ts项目中使用react一样，可能还需要修改 tsconfig.json，自行百度即可。

    import * as QnnCron from "qnn-react-cron"

##### 方式二

在项目的 src 中新增一个 custom.d.ts 然后写入下面内容。 

    declare module "qnn-react-cron" {
        const content: any;
        export default content;
    }

然后在项目中直接引用
    
    import QnnCron from "qnn-react-cron"

    ...

### 为什么没有 antd 组件的样式？

    在 0.5.3 版本后，为了避免打包后的样式影响定制的样式，样式使用按需加载。不再打包进组件代码中。
    解决方式1：
    在 babel 配置中加入以下代码：

    plugins:[
        [
            "import",
            {
                libraryName: "antd",
                libraryDirectory: "es",
                style: "css",
            },
            "ant",
        ]
    ]


    解决方式2：
    或者直接在项目中引入 antd 样式，如下

    import "antd/dist/antd.min.css"

### 一些参考

1、[配合 antd Form 组件使用，打造一个可控的输入组件](https://github.com/wangzongming/qnn-react-cron/issues/21#issuecomment-1480692706)
 

### LICENSE

MIT

---
_Source: https://npm.io/package/qnn-react-cron · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._