cron表达式插件 qnn-react-cron

/* eslint-disable react/no-unstable-nested-components */
import React from 'react'
import Cron from 'qnn-react-cron'
import { Button } from 'antd'

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

export default function (props) {
    const { value = '* * * * * ? *', onCancel, onOk } = props
    let CronRef
    // 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>
    //         ),
    //     },
    // }
    // const localData = useMemo(
    //     () => ({
    //         // Minimum optional year    最小可选择的年份
    //         minYear: new Date().getFullYear(),
    //         // Maximum optional year   最大可选择的年份
    //         maxYear: new Date().getFullYear() + 60,
    //         // language   国际化语言配置
    //         language,
    //     }),
    //     [],
    // )

    const getValue = () => {
        const cronStr = CronRef.getValue()
        onOk(cronStr)
    }
    return (
        // <Cron.Provider value={{language}}>
        <Cron
            value={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"
            // 未自定义底部按钮时，用户点击确认按钮后的回调
            // The bottom button is not customized when the user clicks the confirm button after the callback
            // onOk={e => {
            //     console.log('cron:', e)
            // }}
            // ref={CronRef}
            // 相当于 ref
            // equivalent to ref
            getCronFns={fns => {
                // 获取值方法
                // fns.getValue: () => string

                // 解析Cron表达式到UI 调用该方法才可以重新渲染 【一般不使用】(value值改变后组件会自动更新渲染)
                // fns.onParse: () => Promise().then(()=>void).catch(()=>()=>void),
                CronRef = fns
            }}
            // 自定义底部按钮后需要自行调用方法来或者值
            // After customizing the bottom button, you need to call the method or value
            footer={[
                <>
                    {/* 默认值 */}
                    <Button style={{ marginRight: 10 }} onClick={onCancel}>
                        重置
                    </Button>
                    <Button type="primary" onClick={getValue}>
                        生成
                    </Button>
                </>,
            ]}
        />
        //  </Cron.Provider>
    )
}

结合Antd 使用

  <Popover
                                               // visible={cronVisible}
                                                placement="bottomRight"
                                                overlayClassName={styles['cron-pop']}
                                                trigger="click"
                                                // onClick={onPopClick}
                                                content={<Cron value="* * * * * ? *" onOk={okCron} onCancel={cancelCron} />}
                                            >
                                                <Button icon={<SettingOutlined />} />
                                            </Popover>