xrutayisire / react-js-cron Goto Github PK

There is no option to restrict visitors to select only one value from the dropdown, i. e. If I would like to restrict visitors to select only one month, only one hour, day or minute I can't restrict.

It will be great if you can add a prop saying mode Single.

Describe / Is your feature request related to a problem? Please describe.
My request is regarding extending the Locale option to include German, similar to how French exists

I have both English and German in my i18n translations, and am keen to have this built into the dropdowns and built-in texts in German, similar to the implementation that exists for French.

Describe the bug
Day of week is 1-7 or SUN-SAT (https://docs.oracle.com/cd/E12058_01/doc/doc.1014/e12030/cron_expressions.htm)
But "dayOfWeek" of this module is 0-7 or SUN-SAT.

7 should be SAT.

https://github.com/xrutayisire/react-js-cron/blob/master/src/constants.ts#L75-L84

Versions (please complete the following information):

• react-js-cron version [e.g. 1.2.0] : 3.0.1
• Ant Design version: [e.g. 4.15.0] : 4.15.x
• React version: [e.g. 17.0.0] : 18

Description:

I am utilizing the react-js-cron to create weekly cron expressions. However, when attempting to edit a cron expression for all days of the week, the editor automatically switches to a daily mode. Specifically, when I input a weekly cron expression for every day of the week, such as '10 10 * * *,' the editor incorrectly converts it to a daily cron format.

Here are the steps to reproduce the issue, broken down point by point:

1. Select the "Weekly" cron option.
2. Leave the "Day of the Week" setting as "Every Day."
3. Choose specific "Hour" and "Minute" values.
4. The resulting cron expression will be "10 10 * * *."
5. After saving this cron expression, when you attempt to edit it,
6. The editor incorrectly converts the default "Weekly" dropdown option to "Daily."
7. The "Hour" and "Minute" values are retained from the previous input.

Versions (please complete the following information):

• react-js-cron version - 4.1.0
• React version: 18.2.0

I want to include timezone, it's possible to?

Is your feature request related to a problem? Please describe.
I'd love to use this in a React Native project.

Describe the solution you'd like
If we could get inbuilt support for React Native, that would be the preferred way.

Describe alternatives you've considered
There's a lot of logic in this library that could potentially be piggy-backed on in a React Native counterpart, even if the whole UI would need to be rebuilt.

Describe the bug
Strange behavior when clicking fast on hour picker

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo site: https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo
2. Click on hour picker
3. Select any value from the list
4. Click to unselect it and click fast to select it again (please see attached video)

Expected behavior
Only the selected hour is selected

Video recording

Describe the bug

error - ./node_modules/react-js-cron/dist/esm/styles.css
Error: ENOENT: no such file or directory, open '/Users/tmorrow/repo/iot/node_modules/react-js-cron/dist/esm/styles.css'

To Reproduce
Try to use this library in a nextjs project

Describe the bug
Cron seems to be using a deprecated antd property. This could be fixed, or better yet, if Cron could be decoupled from a particular CSS package like antd.

To Reproduce
Used the component per the docs.

The component logs this error to the console:
Warning: [antd: Select] dropdownMatchSelectWidth is deprecated. Please use popupMatchSelectWidth instead.

Expected behavior
No errors about Cron using deprecated properties.

Screenshots

Versions (please complete the following information):

• react-js-cron version [3.2.0]
• Ant Design version: [5.6.1]
• React version: [e.g. 18.2.0]
• OS: [Windows]
• Browser [Brave]

import { useState } from "react";
import { Divider, Input as AntdInput } from "antd";
import Cron, { CronError, CronProps } from "react-js-cron";
import "antd/dist/antd.css";
import { InfoCircleOutlined } from '@ant-design/icons';
import useCronReducer from 'react-js-cron';

export default function Demo() {

const defaultValue = '30 5 * * 1,6'

/**

• old use
• const defaultValue = '30 5 * * 1,6'
• const [values, dispatchValues] = useCronReducer(props) => error
• const [error, onError] = useState()
  */

let props : CronProps = {
value:defaultValue,
setValue:(defaultValue:string)=>{}
}

const [values, dispatchValues] = useCronReducer(props) //=>error
const [error, onError] = useState()

return (

  <Divider>OR</Divider>

  <Cron
    value={values.cronValue}
    setValue={(newValue: string) => {
      dispatchValues({
        type: 'set_values',
        value: newValue,
      })
    }}
    onError={onError}
  />

  <div>
    <InfoCircleOutlined style={{ marginRight: 5 }} />
    <span style={{ fontSize: 12 }}>
      Double click on a dropdown option to automatically select / unselect a
      periodicity
    </span>
  </div>

  <p style={{ marginTop: 20 }}>
    Error: {error ? error.description : 'undefined'}
  </p>
</div>

We're using your library and sometimes we want to disable selecting the "every minute" interval or set some kind of minimal interval.

Is your feature request related to a problem? Please describe.
I'm always frustrated when I need seconds Selector. (hahaha

Describe the solution you'd like
Add seconds Selector

Describe alternatives you've considered
Unless there's a better component or I write another component on top of yours

Additional context
I'll try to submit my code, maybe not right away, maybe just give up.

Describe the bug
Rendering this component inside another that has a MouseEvent handler causes that handler to fire when the antd Select component's dropdown items are clicked. For ancestors like modals, this causes the modal to close as most modals would have MouseEvent handlers for closing on click outside (see codesandbox).

I have created two separate PRs to address this.

1. #49 - provides full control to the user to specify select props for all field types
2. #50 - simply ensures that onMouseDown on antd Select components does not propagate the event

To Reproduce
Steps to reproduce the behavior:

1. Use Cron component inside a Modal (our issue is with Sanity modal component)
2. Select an element from any dropdown/select in the Cron component
3. The modal will close

Expected behavior
Clicking an item in a Select dropdown should not close the modal.

Screenshots
If applicable, add screenshots to help explain your problem.

CodeSandbox
https://codesandbox.io/s/nervous-james-uprzgq?file=/src/App.js

Versions (please complete the following information):

• react-js-cron version 3.0.1
• Ant Design version: 5.2.3
• React version: 18.2.0
• OS: -
• Browser chrome

Additional context
Add any other context about the problem here.

Describe the bug
In the latest antd version showArrow prop of Select component is deprecated.

To Reproduce

import { Cron } from 'react-js-cron';

import 'react-js-cron/dist/styles.css';

function Cronn() {
  const setValue = (val) => {
    console.log('Cron val', val);
  };
  return <Cron value="0 0 * * THU" setValue={setValue} />;
}

export default Cronn;

Screenshots

CodeSandbox
A CodeSandbox link with the bug.

Versions (please complete the following information):

• react-js-cron version [^4.1.0]
• Ant Design version: [^5.9.0]
• React version: [^18.2.0]
• OS: [e.g. iOS]
• Browser [chrome]

Describe the bug
When using the production mode from vite combined with react-i18next we get a weird issue where _typeof (babel) function is no longer defined properly.
If I comment either this component or react-i18next usage the build version works.
I've enabled the source maps to help out with the debug process but its a bit overwhelming for me to check the entire code of this codebase. I found that the LocaleProvider from antd might be the culprit.

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/codrin-iftimie/antd-vite-trial
2. npm i
3. npm run dev - (works)
4. npm run build && npx serve dist (no longer works)

Expected behavior
Definitely, it should not break the build when adding this library to an existing stack.

Versions (please complete the following information):
Latest versions of everything. Check the package.json

Let me know if there is more info I can provide and thanks for this wonderful component!
Later edit: Lowering the version of antd to 4.10.3 no longer breaks the build >.<

Describe the bug
Getting the following errors when upgrading to v5 of react-js-cron

Screenshots

*** App build ***

Unit tests

Versions (please complete the following information):

• react-js-cron version 3.0.0
• Ant Design version: 5.0.0 (also tried with 5.0.2)
• React version: 17.0.2

Describe the bug
Upon opening page containing Cron with antd and react installed in my project I get the error Uncaught ReferenceError: moment is not defined

To Reproduce
Install antd yarn add antd
Install react-js-cron yarn add react-js-cron

Serve project

I have added Cron for testing using

<Cron value='30 5 * * 1,6' setValue={(e: string) => { console.log(e); }} />

Without that Cron tag the page can load fine.

Describe the bug
When clicked on clear button in minutes or hours Select, the value inside don't get cleared.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Cron widget'
2. Click on 'minutes dropdown'
3. Add at least 5 items.
4. Close the dropdown
5. Click on clear/X button on the right.
6. See bug where the values don't get clear.

Expected behavior
Once clicked on clear, the values should get removed.

CodeSandbox
https://codesandbox.io/s/cron-antd-rcjv9

Versions (please complete the following information):

• react-js-cron version 1.3.0
• Ant Design version: 4.18.6
• React version: 17.0.2
• OS: macOS
• Browser Firefox

Additional context
The issue is not present when switching to antd version 4.17.2

Demo:
https://user-images.githubusercontent.com/74043614/153365290-5a82cb1a-d727-476c-8a9d-ded9a547e238.mov

Hello,

Our cron jobs run on a period of less than a minute. Is it possible to add seconds to this library?

Great job!

Describe the bug
When using react-js-cron in conjunction with the latest version of antd (4.6.3 as of writing this), the styling of popovers is broken (the entries aren't shown in a grid). The package.json only specifices >=4.1.0 as the version for this peer dependency. This problem doesn't arise when using antd 4.2.5.

To Reproduce
Codesandbox: https://codesandbox.io/s/reat-js-cron-5chdk

Steps to reproduce the behavior:
Click on any dropdown

Expected behavior
Items in the popover should be displayed in a grid.

Screenshots
With antd 4.6.3:

With antd 4.2.5:

Additional context
The layout breaks since there is an extraneous div inside the grid container instead of the grid-items. Somehow the way the items are rendered within the popover has changed between these two versions (seeing the additional rc-virtual-list classes that are present when using 4.6.3).

Is it possible to support quartz cron expression , or the widget support quartz cron expression as default value

Hello! Thanks for this great library, it's helped me a lot! But I faced a little problem.

I'd like to use locale prop with humanizeLabels and I can't override these labels.

Is there any way to use custom localisation for months and week-days constants alt values?
May be You can add this feature?

Discussed in #34

Describe the bug
antd change how the select component is displayed, and it broke the style of the select component used by the Cron picker.

To Reproduce

Install antd 4.10.0, and use the cron component.

CodeSandbox: https://codesandbox.io/s/magical-grass-37w0x

You can see that text inside selects is not vertically centered and placeholder have a huge left padding.

Expected behavior

Text inside selects is vertically centered and placeholder is perfectly displayed.

Screenshots

Before 4.10.0

After 4.10.0

Additional context

Seems to come from this PR: ant-design/ant-design#28520

I am getting this warning when I click on the dropdown.
warning.js:20 Warning: [antd: Select] dropdownClassNameis deprecated which will be removed in next major version. Please usepopupClassName instead.

Select can not work with mode='tags', become mode='multiple' when using with react-js-cron

playground: https://stackblitz.com/edit/react-mdwfya?file=index.js

I have a use case where we don't want the users to set the cron job to run at every hour.
I've added custom logic in the customSetValue function - see reproducible code here: https://codesandbox.io/s/funny-einstein-vjlfv?file=/src/App.js

and check if the value of cron is set to every hour (e.g. no value is selected for hour)- default it to 12am. I can see it flashes with 12am selected but then reverts back to 'every hour'

please see video here:

Any advise on how I can achieve this is much appreciated.

Describe the bug
The expand of this library is not getting a correct awnser.

To Reproduce
Steps to reproduce the behavior:
1.
On playground when you put "* 2-10,19-23/2 * * " , this should be equal to [2,3,4,5,6,7,8,9,10,19,21] but it appers as " 2-23/2 * * ".
2. The playground dont accept the following valid expression " 2-6/2,19-23/2" ( every 2 hours off work hours)

Describe the bug
The user can select a date that does not exist. When the user selects Every "year" in "February", or any other month, the days dropdown are loaded always with 31 days. This leads to creating a cron that might never run.

Expected behavior
If the user selects a month, only load the number of days that the month has. If February is chosen, only load 29.
If March is chosen first, load 31 days but disable all months that have 30 days.

Describe the bug
Cron component has broken style when used in antd 5. Hour and minute picker is unusable.

CodeSandbox
A CodeSandbox link with the bug.

Versions (please complete the following information):

• react-js-cron version [3.1.0]
• Ant Design version: [5.3.2]
• React version: [18.2.0]
• OS: [Windows]
• Browser [Firefox]

antd v5 is out! 🥳

It's a major new version, and it requires some little changes on this package:

• Remove any references to lib folder (deleted on antd side) - Thanks @chillyistkult #39
• New dropdown props - #35
• Fix tsc to build types crash - ant-design/cssinjs#55
• Update stories for antd v5
• Update README to explain how antd styles need to be handled (if required) - #37 (No override is needed with new antd v5)

Feel free to comment on this issue if you found any other things that need to be changed

Please add abbility to add custom styles to the button and select options through props.

Is there not supposed to be a convertor export?

Is your feature request related to a problem? Please describe.
This is the best cron generator I've found, but my project uses material UI. I think it'd be great if it can work without antd.

Describe the solution you'd like
We could modify it to pass in the Button component & the Select component. Or maybe, carve out the core logic so that one can use it even without using the default UI and by just passing in the required props.

I'd be happy to contribute once we figure out a plan.

Thank you so much for this library!

Describe the bug

Select values blank.

Screenshots

Desktop (please complete the following information):

• OS: OSX 11.4
• Browser : Brave (Version 1.25.70 Chromium: 91.0.4472.77 (Official Build) (x86_64))

Additional context

Looks like the z-index: -1 added in f1c6ad5 is causing the issue. Please see the screenshot, works fine if I uncheck z-index.

Is your feature request related to a problem? Please describe.
Antd looks required and the bundle is more than 56mb.

Describe the solution you'd like
Same great module without antd dependency, or only what is required i.e a lot more lightweight.

Describe alternatives you've considered
Custom dev. Fork. Migration to Material UI. Any other OSS project (we haven't found)?

Additional context
The component is quite appealing. We'd love to get feedback and possibly help.

Is your feature request related to a problem? Please describe.
It would be nice if there was support for the main special characters (a lot of backend cron library support those)

https://github.com/HangfireIO/Cronos#special-characters

Describe the solution you'd like
An optional selector for "Last", An extra value for weekday W

Describe the bug
Unconventional cron pasted in a text field does not throw an error but forcibly changing the select dropdown to its closest accepted value.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--track-error'
2. Type * * * * Sun#3 in the text input
3. Select input resets the cron value to the closest accepted value
4. No error shown

Expected behavior
An error should be thrown

Is your feature request related to a problem? Please describe.
It would be great to have the ability to restrict the cron schedule to only happen once when Every Month or Every Year is active. Currently when month or year is selected the schedule contains an AND <Day of the Week>. See screenshot of example page below.

Describe the solution you'd like
Ideally if its possible a new config or using the same mode='single' to hide that dropdown when month or year is selected.

My goal is to be able to read the following:
'Every month on 4 at 3:30'
'Every year in APR on 4 at 3:30'

Describe alternatives you've considered
I have tried to hide the dropdown using CSS through the className prop & overriding the schedule value in the setValue callback. I ran into issues with that route because when you flip from week to month or week to year the schedule is not changed. The value remains the same making it hard to know wether month or year is currently selected

Additional context