sojinantony01 / react-cron-generator Goto Github PK
View Code? Open in Web Editor NEWSimple react component to generate cron expressions
License: MIT License
Simple react component to generate cron expressions
License: MIT License
Intended behavior:
When '* * * * * * ' is entered, the custom header should be selected, and ' * * * * * *' should be filled in.
However, an error message saying "An error occured when generating the expression description. Check the cron expression syntax." appears.
or
When the time tab is selected, it automatically converts to '0 0 00 1/1 * ? *'.
const [result, setResult] = useState('* * * * * * *');
<Cron
onChange={(e) => {
setResult(e);
}}
value={result}
showResultText
showResultCron={false}
/>
Hi, when using less than the default number of headers, an error occurs when setting an initial Cron value:
Error
Value does not match any available headers.
import React from "react";
import Cron from "react-cron-generator";
import "react-cron-generator/dist/cron-builder.css";
import { HEADER } from "react-cron-generator";
export default function App() {
const [val, setVal] = React.useState("0 0 00 ? * TUE,THU,SAT *");
const options = { headers: [HEADER.DAILY, HEADER.WEEKLY, HEADER.MONTHLY] };
return (
<div>
<Cron
onChange={setVal}
value={val}
showResultText={true}
showResultCron={true}
options={options}
/>
</div>
);
}
In the latest version I'm getting this error.
SyntaxError:/node_modules/react-cron-generator/build/index.js: Unexpected token (7490:8)
7488 | throw new Error('translateFn expects a string translation');
7489 | }
> 7490 | }
| ^
7491 | return translatedText;
7492 | };
7493 | return (jsxRuntime.jsxs("div", Object.assign({ className: 'cron_builder' }, { children: [jsxRuntime.jsx("ul", Object.assign({ className: "nav nav-tabs" }, { children: getHeaders() })), jsxRuntime.jsx("div", Object.assign({ className: "cron_builder_bordering" }, { children: state.selectedTab ? getComponent(state.selectedTab) : "Select a header" })), props.showResultText && jsxRuntime.jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: getVal() })), props.showResultCron && jsxRuntime.jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: state.value.toString().replace(/,/g, ' ').replace(/!/g, ',') }))] })));
WARNING in ./node_modules/react-cron-generator/build/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'index.js.map': SyntaxError: Unexpected token C in JSON at position 504225
ERROR in ./node_modules/react-cron-generator/build/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError:/node_modules/react-cron-generator/build/index.js: Unexpected token (7490:8)
7488 | throw new Error('translateFn expects a string translation');
7489 | }
> 7490 | }
| ^
7491 | return translatedText;
7492 | };
7493 | return (jsxRuntime.jsxs("div", Object.assign({ className: 'cron_builder' }, { children: [jsxRuntime.jsx("ul", Object.assign({ className: "nav nav-tabs" }, { children: getHeaders() })), jsxRuntime.jsx("div", Object.assign({ className: "cron_builder_bordering" }, { children: state.selectedTab ? getComponent(state.selectedTab) : "Select a header" })), props.showResultText && jsxRuntime.jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: getVal() })), props.showResultCron && jsxRuntime.jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: state.value.toString().replace(/,/g, ' ').replace(/!/g, ',') }))] })));
at instantiate (node_modules/@babel/parser/lib/index.js:72:32)
at constructor (node_modules/@babel/parser/lib/index.js:358:12)
at Parser.raise (node_modules/@babel/parser/lib/index.js:3336:19)
at Parser.unexpected (node_modules/@babel/parser/lib/index.js:3374:16)
at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:13120:22)
at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:12645:23)
at Parser.parseUpdate (node_modules/@babel/parser/lib/index.js:12624:21)
at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:12595:23)
at Parser.parseMaybeUnaryOrPrivate (node_modules/@babel/parser/lib/index.js:12389:61)
at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:12396:23)
react-cron-generator is using Cronstrue 1.92 instead of the latest version, 2.11.
The demo page here: https://sojinantony01.github.io/react-cron-generator/
is running v1.3.6 while the widget itself is at 1.3.9
Hi,
I pass to options prop what header is not including MINITES, so it is defaultTabs index 0. My header options index 0 is Hourly. defaultValue function return metada index and metadata index 0 is always MINUTES but my header options index 0 is Hourly.
When i change tab to HOURLY, i receive MINUTES data because HOURLY index is 0 in my array but metadata index 0 is MINUTES.
Recently I've upgraded to react-cron-generator version 2.0.11.
I've noticed it overrides my styles in the app, especially the fonts.
While searching for a solution, I found someone who had encountered the issue before, but there were no solutions provided.
https://stackoverflow.com/questions/77670691/reactjs-imported-component-cron-overrides-styles
So, I fixed the problem and opened a pull request. @sojinantony01 Can you make another release with this change?
#61
Hello!
When we enter in the Hourly tab the hour value is 0 and the result expression is "0 0 0/1 1/1 * ? *".
If we change the hour time e trying go back to 0 is not possible, the input only allow an empty value but the expression value is "0 0/1 1/1 * ? *".
As we can see they are different:
"0 0 0/1 1/1 * ? *"
"0 0/1 1/1 * ? *"
Best Regards, David
Great tool, thanks for making it.
Unfortunately, it lacks any means to localize the component, as all the text is hard-coded.
So this is a feature request: to add a way to customize the text in the UI for non-english projects to be able to use it as well.
Hi :) Will this be updated to support typescript also? Getting this message
Could not find a declaration file for module 'react-cron-generator'. 'xxx/node_modules/react-cron-generator/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-cron-generator` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-cron-generator';
Had to solve it temporary by adding "noImplicitAny": false
in my tsconfig.json file
First of all, I would like to thank you for the awesome plugin.
I am facing an issue with the plugin. Here are the details of the issue,
I tried to pass headers options with Monthly, Weekly, and Daily options, but it is always showing tab contents of the Hourly tab. It is working fine with options only if I pass options sequentially [HEADER.MINUTES, HEADER.HOURLY, HEADER.DAILY]
Here is my code sample,
const cronHeaderOptions = {
headers: [HEADER.MONTHLY, HEADER.WEEKLY, HEADER.DAILY]
};
//-----
<Cron
onChange={ (value)=> { setFieldValue('trigger_period', value) } }
value={values.trigger_period}
name="trigger_period"
showResultText={true}
options={cronHeaderOptions}
/>
Please let me know if there is any configuration I am missing.
Thank you.
In order to reproduce this:
Result: Only the first weekday selected at step 3 remains selected.
Hi, I imported the css file from the package, but the component still shows no styles. Here is a live example. Thank you
codesandbox
Hello,
I am using bootstrap 4.6.0 version and component css does not work with it? I saw a post that you will upgrade bootstrap version 3 to 4? Is there any progress on that?
Thanks
Erkan
Cron generator Tabs are not retaining when we assigning the value in in our application (edit mode)
Cron expression output is basically a quartz style format having 7 no of fields. Is there any way to get it in a UNIX based style ( 5 or 6 no of field)
Looks great. What is the license?
Dear team
Would like to check with you if there is any plan to interpret ranges using '-' in react-cron-generator
E.g. when selecting Monday,Tuesday,Wednesday,Thursday then it ideally would translate into MON-THU rather than MON,TUE,WED,THU - please let me know if this is something in plans.
And similarly for other continuous selections.
Thank you and regards, Mike.
Hi there, is it possible to access ResultText outside the component? I'm working with a functional component :)
https://codesandbox.io/s/reaact-cron-generator-01f4d?file=/src/CronGenerator.jsx
Hello, while I was using the component (great stuff by the way), everything was fine in dev, and when I built the app for production, I got the following error:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-KpHv3zgivMSB4dPnfYfqMt2lBibsYvM36EdoBBAsfbM='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
I didn't get to any meaningfull answer so if you can lend me a hand in solving this I would appriciate it, I will post any code you need.
Hi, I am using your package, it's cool your code. But, I can not see yearly.js implemented. Please your help.
./node_modules/react-cron-generator/build/index.js
Module not found: Can't resolve 'react/jsx-runtime' in '..\node_modules\react-cron-generator\build'
current react version is : 16.13.1
how cant I fix this bug ?
How to produce
React version: "react": "^16.13.1"
package version: "react-cron-generator": "^1.2.5"
Hello,
I am using your react-cron-generator library and I appreciate your work on this project. Currently, the library generates a 7-field cron expression, including the seconds field. However, I need to generate a 6-field cron expression without the seconds field.
Is there an option or configuration in your library that allows generating 6-field cron expressions? If not, could you guide me on how to modify the code to achieve this?
Thank you for your assistance.
Best regards,
The console logs two warnings for the usages of "componentWillMount" and "componentWillReceiveProps"
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
- Move code with side effects to componentDidMount, and set initial state in the constructor.
- Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: Cron, HourlyCron
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
- Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: Cron
I'm using the instance here: https://sojinantony01.github.io/react-cron-generator/
I merely want to say "run it at 5 minutes past the hour, every hour". The expression
should be "5 * * * *"
However, I cannot obtain this expression using the UI (other than pasting it into the "Custom" tab).
Under the hours tab, it should say "Every [ ] hour(s)" .
Instead, it says "Every [ ] hour"
Thanks for the nice tool. Here is an issue I found:
For example:
If my initial cron value is "every 5 minute(s)", and
I change tab from "Minutes" to "Hourly" and then back to "Minutes".
The cron value is now "Every 1 minute(s)".
Expected result:
The cron value should not change just because I changed tab
Firstly, thanks for creating this package, I love it.
I am having trouble initializing the cronExpression value - even when I provide it a value that it previously provided, the Component always displays "An error occured when generating the expression description. Check the cron expression syntax."
Below is a sample of what I am trying to do:
import React, { useState } from 'react';
import Cron from 'react-cron-generator';
export default function TestPage() {
const [cronExpression, setCronExpression] = useState(null);
const [cronExpressionText, setCronExpressionText] = useState('');
return (<>
<button onClick={()=>{
setCronExpression(null);
}}>Set Null</button>
<input type="text" value={cronExpressionText} onChange={(e)=>setCronExpressionText(e.target.value)} />
<button onClick={()=>{
setCronExpression(cronExpressionText);
}}>Set Value</button>
{cronExpression &&
<Cron
onChange={(e)=> {
console.log(`changed to "${e}"`);
setCronExpression(e);
}}
value={cronExpression}
showResultText={true}
showResultCron={true}
/>
}
</>
);
}
Using the above example, if I type into the text field:
0 0 00 1/1 * ? *
and click set value, the Cron component appears but it displays the error, even though this value was a value provided by the Component.
Any idea how I can get this to work?
Hi,
I'm playing with a backend/frontend tool (full stack) that involves cron expressions and AWS.
For the frontend part of the app I find this package a must have.
Right now I can work with unix cron expressions, but, is there any option to have support for AWS EventBridge cron expressions? (are similar to unix expressions, but not compatible).
For the backend part I found a solution here time ago (in case you can find it useful for more context)
kaka2507/cron-validator#10
Many thanks.
I miss yearly option for this component
Hey you forgot to change line 54:
prevState.selectedTab = prevState.headers[1];
Thanks for the fix, I appreciate it!
Hi, I love your product so far, and have a feature request! Currently I am working on a project that includes mutating cron schedules on a specific weekly/hourly basis, is there any way you would be able to have a feature that combines multiple options into one for more customization or show me how? For example (7 0-4,7-23 ? * MON-THU *) Monday-thursday everyday at the 7th min past the hour, except 5 and 6.
It shows following error on compile
Module not found: Can't resolve '@babel/runtime/helpers/esm/extends'
the project is created with create-react-app and is not ejected.
It uses babel 7.9.0.
Looks like react-cron-generator is build with older version of babel which causes this problem
Getting:
node_modules\react-cron-generator\dist\monthly.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
SyntaxError: Unexpected identifier
I think you should rename the .babelrc file to babel.config.js which will export .babelrc object.
What format does this use? It doesn't seem to be valid cron that I am aware of. For instance if I did a cron task for every 6 hours it generates this string: 0 0 0/6 1/1 * ? *
when the cron I am familiar with would look like 0 */6 * * *
I have to use react-cron-generator
to display cron options. When I add them its fails my test cases.
I created react app using create-react-app
package.
npx create-react-app cron-test
Then I added eslint
and other needed package. after that my package.json
is as below.
{
"name": "cron-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@typescript-eslint/parser": "^4.7.0",
"cross-env": "^7.0.2",
"eslint": "^7.13.0",
"react": "^17.0.1",
"react-cron-generator": "^1.2.6",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"run-scripts": "^0.4.0",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "run-scripts test:unit test:lint test:build",
"test:build": "run-scripts build",
"test:lint": "eslint ./src",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Then I run my yarn test
it works fine.
AAFFVVSS:cron-test myuser$ yarn test
yarn run v1.22.5
$ run-scripts test:unit test:lint test:build
> [email protected] test:unit /Users/myuser/react/cron-test
> cross-env CI=1 react-scripts test --env=jsdom
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
PASS src/App.test.js
✓ renders learn react link (36 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 1.986 s, estimated 2 s
Ran all test suites.
> [email protected] test:lint /Users/myuser/react/cron-test
> eslint ./src
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> [email protected] test:build /Users/myuser/react/cron-test
> run-scripts build
> [email protected] build /Users/myuser/react/cron-test
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.2 KB build/static/js/2.9edf6727.chunk.js
1.39 KB build/static/js/3.71dde3ee.chunk.js
1.17 KB build/static/js/runtime-main.66726b93.js
592 B build/static/js/main.f42a7f12.chunk.js
546 B build/static/css/main.ab7136cd.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020623793-0.8495721275316386/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
Browserslist: caniuse-lite is outdated. Please run the following command: `npx browserslist --update-db`
✨ Done in 13.14s.
But when I try to include react-cron-generator
it start failing, I just added import Cron from 'react-cron-generator'
.
$ cat src/App.js
import logo from './logo.svg';
import './App.css';
import Cron from 'react-cron-generator'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
If filed on import
AAFFBB:cron-test myuser$ yarn test
yarn run v1.22.5
$ run-scripts test:unit test:lint test:build
> [email protected] test:unit /Users/myuser/react/cron-test
> cross-env CI=1 react-scripts test --env=jsdom
npm WARN lifecycle The node binary used for scripts is /var/folders/rt/7_nbtrwx0q305tx_z9tk1l9538x_ng/T/yarn--1605020858015-0.9897713366854908/node but npm is using /usr/local/Cellar/node/14.5.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/Users/myuser/react/cron-test/node_modules/react-cron-generator/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Cron from './cron';
^^^^^^
SyntaxError: Cannot use import statement outside a module
2 | import './App.css';
3 |
> 4 | import Cron from 'react-cron-generator'
| ^
5 |
6 | function App() {
7 | return (
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/App.js:4:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.03 s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `cross-env CI=1 react-scripts test --env=jsdom`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myuser/.npm/_logs/2020-11-10T15_07_41_722Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Seems like issue is at https://github.com/sojinantony01/react-cron-generator/blob/master/src/lib/index.js#L1, but is there any way to ignore it ?
From what I can tell, only 7 character cron strings are supported as of this time. If I set the value to a 6 character cron string, the tool seems to default to the picture below
It also changes the cron string to an "every one minute" 7-character representation (0 0 00 1 1/1 ? *).
An example of a 6 character cron string that I am using: 0 15 1 ? * *
I am using nextjs. On implementing cron, I am getting the error
./node_modules/react-cron-generator/dist/cron-builder.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-cron-generator/dist/cron.js
If I change the value of the cron from outside the component, the component does not update its value. This is because it reads the value from props into state from within ComponentWillMount
, and that function is only called once on the first render.
It should update the state with the new value every time it changes externally.
It could either implement static getDerivedStateFromProps(props, state)
to update the state when the props value changes or just use the value directly from the props and skip the state. Looking at the code, you don't really need the value stored in the state. You could add a function to compute the value from the props and call it where you need it instead of storing it in the state.
An example use case here, is that I have a list of schedules with edit buttons, and one CronGenerator component. When I click on a schedule to edit it, I need to update the CronGenerator with this schedule's cron. This does not work because the CronGenerator only checks my value prop in ComponentWillMount
.
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.