react + antd cron表达式组件封装（qnn-react-cron）

Github地址：https://github.com/wangzongming/qnn-react-cron

实现出来的效果：

我们的项目中要求不展示秒，实际组件里面是有的，接下来就讲解一下如何实现Cron表达式哦！

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

第一步：安装 qnn-react-cron 插件

   npm i qnn-react-cron
   yarn add qnn-react-cron

第二步：代码中引入import QnnReactCron from ‘qnn-react-cron’;

QnnReactCron是我自己命名的组件名称，接下来上代码

import QnnReactCron from 'qnn-react-cron';
import { Button } from 'antd';
import { useEffect, useState } from 'react';

interface IPops {
  // 点击取消或者关闭按钮操作
  onClose:Function;
  // 点击确定按钮的成功回调
  onOk:Function;
  // 默认值，编辑时需要回显
  cronValue:string;
  // 默认值的函数
  setCronValue:Function;
}

function QnnCron(props: IPops) {
  const { onClose, onOk, cronValue, setCronValue } = props;

  let cronFns: any;
  const [value, setValue] = useState('');

  // 处理编辑时的回显问题，因为我们项目中没用秒，所以我需要手动拼接
  // 如果你们用到了秒，可以直接 setValue（cronValue）
  useEffect(() => {
    if (cronValue) {
      setValue(`* ${cronValue} *`);
    } else {
      setValue('');
    }
  }, []);

  // 点击提交
  const handleClick = () => {
    onClose();
    setValue(cronFns.getValue());
    //截取秒(* )和年( *),只传入分时日月周，如果后续要打开秒和时的展示，这里的逻辑需要修改
    let beforeCron = cronFns.getValue()?.slice(2);
    let afterCron = beforeCron?.substr(0, beforeCron.length - 2);
    setCronValue(afterCron);
    onOk(afterCron);
  };

  return (
    <>
      <QnnReactCron
        value={value}
        // 配置面板的隐藏, false 即隐藏
        panesShow={{
          second: false, // 该项目不展示秒
          minute: true,
          hour: true,
          day: true,
          month: true,
          week: true,
          year: false, // 该项目不展示年
        }}
        // 默认显示哪个面板, 默认为 second， 如果隐藏了 second 需要自行设置
        defaultTab={'minute'}
        // 未自定义底部按钮时，用户点击确认按钮后的回调
        // 因为我们自己定义了，所以这里的函数不做处理
        onOk={(value: string) => {}}
        // 保存用户选择的表达式
        getCronFns={(_cronFns: any) => {
          cronFns = _cronFns;
        }}
        footer={[
          <Button
            key="getValue"
            type="primary"
            style={{ marginRight: 10 }}
            onClick={handleClick}
          >
            确定
          </Button>,
          <Button
            key="cencel"
            style={{ marginRight: 10 }}
            onClick={() => {
              setValue('');
              setCronValue('');
              cronFns = null;
            }}
          >
            重置
          </Button>,
        ]}
      />
    </>
  );
}

export default QnnCron;

希望可以帮助到大家