xrutayisire / react-js-cron Goto Github PK
View Code? Open in Web Editor NEWA React cron editor built with antd
Home Page: https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo
License: MIT License
A React cron editor built with antd
Home Page: https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo
License: MIT License
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)
Originally posted by abhijeet3112 September 3, 2022
Is there any functionality we have that supports setting the single dropdown selection for minutes dropdown while keeping other dropdowns with multi select option?
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.
onMouseDown
on antd Select components does not propagate the eventTo Reproduce
Steps to reproduce the behavior:
Cron
component inside a Modal (our issue is with Sanity modal component)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):
Additional context
Add any other context about the problem here.
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 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
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?
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
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:
clear/X
button on the right.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):
Additional context
The issue is not present when switching to antd version 4.17.2
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
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
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:
Expected behavior
An error should be thrown
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
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.
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:
git clone https://github.com/codrin-iftimie/antd-vite-trial
npm i
npm run dev
- (works)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 >.<
allowEmpty
not working properly
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
I want to restrict the user from setting the cron value to '*
' in a particular dropdown.
Current Behaviour:
If the user deselects all the values from the dropdown, it sets the value of that dropdown to '*
'
I don't want the value to become *
when user deselects all the values from the hour dropdown, instead set it to some default value (not *).
Here is what I tried to do:
export const CronForWeekly = () => {
const [value, setValue] = React.useState('0 12 * * 7');
const filterExpr = (value: string) => {
const exprArray = value.split(' ');
const hourIndex = 1;
if (exprArray[hourIndex] === '*') {
exprArray[hourIndex] = '12';
}
setValue(exprArray.join(' '));
};
return (
<div className='flex flex-col gap-4'>
<div></div>
<h3>Cron Value</h3>
<div>{value}</div>
<Cron
value={value}
setValue={filterExpr}
clearButton={false}
mode='single'
defaultPeriod='week'
allowedDropdowns={['hours', 'minutes', 'week-days']}
clockFormat='12-hour-clock'
allowClear={false}
allowEmpty='never'
/>
</div>
);
};
But is not working properly, here is the attached screen record:
When I click on the default value itself, the expression is fine, but the change dosen't reflect on the drop-down, it still shows every hour in the dropdown
Describe the bug
Strange behavior when clicking fast on hour picker
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Only the selected hour is selected
Video recording
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):
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):
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:
Versions (please complete the following information):
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
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;
CodeSandbox
A CodeSandbox link with the bug.
Versions (please complete the following information):
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.
Versions (please complete the following information):
Is there not supposed to be a convertor export?
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.
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!
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.
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
Select values blank.
Screenshots
Desktop (please complete the following information):
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.
Please add abbility to add custom styles to the button and select options through props.
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 use
popupClassName instead.
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.
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).
Describe the bug
Nextjs build taking too long or getting stuck suddenly
Since 6th May (we noticed the issue on this date), our nextjs project build is taking about 28 mins (before it was 8 mins)
No changes were made by our team, this happened out of nowhere. When I started debugging, I tried every possible thing:
Nothing worked!
Then I started to comment out the pages to see what the issue is. As I did this, I found out that the problem was in "Cron" imported from 'react-js-cron'. As I removed the component, the build worked like before.
I also went and searched for the issue on the internet and stumbled upon this stack overflow question.
Putting the link of a specific answer that involves Ant Design: https://stackoverflow.com/a/78431128
We are not using the app router in nextjs, but our nextjs version is 13.4.2.
The last fast build was on: April 23, 2024 at 1:08:38 PM GMT+5:30, this took 8 mins
After that we built our code on: May 6, 2024 at 11:06:26 AM GMT+5:30, this took 28 mins
To be extra sure, I created a new project with nextjs 13.5, and just installed this one package and used it.
Same output, the build is taking too long or getting stuck.
Just to compare, in my local when I build my own project, it takes - 100secs, and when we build it for the production it takes about 8 mins as other things are also running like installing the packages and all.
For a new project without react-cron-js, in my local, it takes 9 sec to build, and,
with react-cron-js, it takes 600 secs.
I am not able to figure out what happened. Was there any update in the library in this time period, in last 2 weeks?
Or has something changed in the ant design?
Any help would be appreciated!
To Reproduce
Steps to reproduce the behavior:
Attaching the repo of the new project that I created to test the build.
I used npm to install and build.
https://github.com/mathur619/nextjs-react-js-cron-issue
Expected behavior
Build should be faster or we can say, should not get stuck when using react-js-cron.
Screenshots
If applicable, add screenshots to help explain your problem.
These set of screenshots are for my production build:
These set of screenshots are for my local build with the brand new project:
CodeSandbox
Providing the github repo with react-js-cron installed in nextjs project.
https://github.com/mathur619/nextjs-react-js-cron-issue
Versions (please complete the following information):
Additional context
Add any other context about the problem here.
Is it possible to support quartz cron expression , or the widget support quartz cron expression as default value
I want to include timezone, it's possible to?
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.
Hello,
Our cron jobs run on a period of less than a minute. Is it possible to add seconds to this library?
Great job!
We're using your library and sometimes we want to disable selecting the "every minute" interval or set some kind of minimal interval.
Describe the bug
When I add the dropdownsConfig property to the Cron component, it starts to re-render and goes into an infinite loop.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
When I add the dropdownsConfig property to the Cron component, it shouldn't go into an infinite loop.
Screenshots
Versions (please complete the following information):
antd v5 is out! ๐ฅณ
It's a major new version, and it requires some little changes on this package:
Feel free to comment on this issue if you found any other things that need to be changed
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'
/**
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>
)
}
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.