{"_id":"@belym.a.2105/react-js-cron","name":"@belym.a.2105/react-js-cron","dist-tags":{"latest":"5.0.1"},"versions":{"5.0.1":{"name":"@belym.a.2105/react-js-cron","version":"5.0.1","description":"A React cron editor with antd inspired by jqCron","author":{"name":"Xavier Rutayisire","email":"xavier.rutayisire@gmail.com","url":"https://github.com/xrutayisire/"},"license":"MIT","keywords":["react","reactjs","js","cron","crontab","editor","widget","generator","antd","ant-design","cronjob","schedule","parser"],"homepage":"https://github.com/xrutayisire/react-js-cron#readme","repository":{"type":"git","url":"git+https://github.com/xrutayisire/react-js-cron.git"},"bugs":{"url":"https://github.com/xrutayisire/react-js-cron/issues"},"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","packageManager":"yarn@3.3.0","scripts":{"build":"run-s build:del build:rollup","build:rollup":"rollup -c","build:del":"del dist","dev":"rollup -c -w","storybook":"start-storybook -p 9009","build-storybook":"build-storybook -o docs","lint":"eslint 'src/**/*.ts?(x)'","lint:fix":"yarn lint --fix","prettier":"prettier --check 'src/**/*.{ts?(x),css}'","prettier:fix":"yarn prettier --write","format":"run-s lint prettier","format:fix":"run-s lint:fix prettier:fix","test":"react-scripts test","test:coverage":"yarn test --coverage --watchAll"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"resolutions":{"@ant-design/cssinjs":"1.0.2","enhanced-resolve":"5.10.0"},"peerDependencies":{"antd":">=5.8.0","react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@ant-design/icons":"4.8.0","@babel/core":"7.20.5","@rollup/plugin-commonjs":"23.0.3","@rollup/plugin-node-resolve":"15.0.1","@rollup/plugin-terser":"0.1.0","@rollup/plugin-typescript":"10.0.1","@storybook/addon-actions":"6.5.13","@storybook/addon-docs":"6.5.13","@storybook/addon-essentials":"6.5.13","@storybook/addon-interactions":"6.5.13","@storybook/addon-links":"6.5.13","@storybook/builder-webpack5":"6.5.13","@storybook/manager-webpack5":"6.5.13","@storybook/react":"6.5.13","@storybook/testing-library":"0.0.13","@testing-library/jest-dom":"5.16.5","@testing-library/react":"13.4.0","@testing-library/react-hooks":"8.0.1","@testing-library/user-event":"14.4.3","@trivago/prettier-plugin-sort-imports":"3.4.0","@types/node":"18.11.9","@types/react":"18.0.25","@types/react-dom":"18.0.9","@typescript-eslint/eslint-plugin":"5.44.0","@typescript-eslint/parser":"5.44.0","antd":"5.9.4","babel-loader":"8.3.0","cz-conventional-changelog":"3.3.0","del-cli":"5.0.0","eslint":"8.28.0","eslint-config-prettier":"8.5.0","eslint-plugin-file-progress":"1.3.0","eslint-plugin-react":"7.31.11","eslint-plugin-react-hooks":"4.6.0","npm-run-all":"4.1.5","prettier":"2.8.0","react":"18.2.0","react-dom":"18.2.0","react-scripts":"5.0.1","rollup":"3.5.0","rollup-plugin-copy":"3.4.0","rollup-plugin-dts":"5.0.0","rollup-plugin-peer-deps-external":"2.2.4","typescript":"4.9.3"},"jest":{"collectCoverageFrom":["src/**","!src/types.ts","!src/index.ts","!src/stories/**"],"coverageReporters":["lcov","json-summary"]},"_id":"@belym.a.2105/react-js-cron@5.0.1","gitHead":"3666e663b5f2b5a37d2907d672493f6a601808dd","_nodeVersion":"20.14.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-a8BqcKWb0pxTRIpZqy0bbNTSqIAF/BjHThmWgqqD9xyXeMx7HzT/jEj4mMqE27anCQTpIK0RL4m2GqYBIgBZTA==","shasum":"398683cc2016ebe6aaf0c2f6f0fb4c62f63ed25a","tarball":"https://registry.npmjs.org/@belym.a.2105/react-js-cron/-/react-js-cron-5.0.1.tgz","fileCount":35,"unpackedSize":103796,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYs9yHW8aYy2+wQMuwqW9IoMtQO+ecoLOC0hemoaVy8AiEAmPdhC7jdGjGfvnHMMckKJBCPaZaEm7I52fTi8oSPqSo="}]},"_npmUser":{"name":"belym.a.2105","email":"belym.a.2105@gmail.com"},"directories":{},"maintainers":[{"name":"belym.a.2105","email":"belym.a.2105@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-js-cron_5.0.1_1722942154000_0.13475816373057414"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-06T11:02:33.896Z","5.0.1":"2024-08-06T11:02:34.383Z","modified":"2024-08-06T11:02:34.717Z"},"maintainers":[{"name":"belym.a.2105","email":"belym.a.2105@gmail.com"}],"description":"A React cron editor with antd inspired by jqCron","homepage":"https://github.com/xrutayisire/react-js-cron#readme","keywords":["react","reactjs","js","cron","crontab","editor","widget","generator","antd","ant-design","cronjob","schedule","parser"],"repository":{"type":"git","url":"git+https://github.com/xrutayisire/react-js-cron.git"},"author":{"name":"Xavier Rutayisire","email":"xavier.rutayisire@gmail.com","url":"https://github.com/xrutayisire/"},"bugs":{"url":"https://github.com/xrutayisire/react-js-cron/issues"},"license":"MIT","readme":"## ReactJS Cron\r\n\r\n> A React cron editor built with [antd](https://github.com/ant-design/ant-design)\r\n\r\n[![npm package](https://img.shields.io/npm/v/react-js-cron/latest.svg)](https://www.npmjs.com/package/react-js-cron)\r\n[![MIT License Badge](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xrutayisire/react-js-cron/blob/master/LICENSE.md)\r\n\r\n[![Build](https://github.com/xrutayisire/react-js-cron/actions/workflows/build.yml/badge.svg)](https://github.com/xrutayisire/react-js-cron/actions/workflows/build.yml)\r\n[![Lint](https://github.com/xrutayisire/react-js-cron/actions/workflows/lint.yml/badge.svg)](https://github.com/xrutayisire/react-js-cron/actions/workflows/lint.yml)\r\n[![Unit tests](https://github.com/xrutayisire/react-js-cron/actions/workflows/test.yml/badge.svg)](https://github.com/xrutayisire/react-js-cron/actions/workflows/test.yml)\r\n[![codecov](https://codecov.io/gh/xrutayisire/react-js-cron/branch/master/graph/badge.svg?token=H4I8REN489)](https://codecov.io/gh/xrutayisire/react-js-cron)\r\n\r\nLive **demo** and **usage** at [https://xrutayisire.github.io/react-js-cron/](https://xrutayisire.github.io/react-js-cron/?path=/docs/reactjs-cron--demo)\r\n\r\n![react-js-cron example](https://raw.githubusercontent.com/xrutayisire/react-js-cron/master/react-js-cron-example.png)\r\n\r\n## Features\r\n\r\n- Zero dependencies except React and antd\r\n- Supports all standard cron expressions\r\n- Supports cron names for months and week days\r\n- Supports cron shortcuts\r\n- Supports \"7\" for Sunday\r\n- Supports two-way sync binding with input\r\n- Supports locale customization\r\n- Supports multiple selection by double-clicking on an option\r\n- And many more (disabled, read-only, 12-hour clock...)\r\n\r\n## Inspired by\r\n\r\n- [jqCron](https://github.com/arnapou/jqcron)\r\n- [cron-converter](https://github.com/roccivic/cron-converter)\r\n\r\n## TypeScript\r\n\r\nreact-js-cron is written in TypeScript with complete definitions\r\n\r\n## Installation\r\n\r\nBe sure that you have these dependencies on your project:\r\n\r\n- react (>=17.0.0)\r\n- antd (>=5.8.0)\r\n\r\n```bash\r\n# NPM\r\nnpm install react-js-cron\r\n\r\n# Yarn\r\nyarn add react-js-cron\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport { Cron } from 'react-js-cron'\r\nimport 'react-js-cron/dist/styles.css'\r\n\r\nexport function App() {\r\n  const [value, setValue] = useState('30 5 * * 1,6')\r\n\r\n  return <Cron value={value} setValue={setValue} />\r\n}\r\n```\r\n\r\nDon't forget to import styles manually:\r\n\r\n```jsx\r\nimport 'react-js-cron/dist/styles.css'\r\n```\r\n\r\n## Converter\r\n\r\nIf you want to use the converter used internally you can import it in your project:\r\n\r\n```jsx\r\nimport { converter } from 'react-js-cron'\r\n\r\nconst cronString = converter.getCronStringFromValues(\r\n  'day', // period: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'reboot'\r\n  [], // months: number[] | undefined\r\n  [],  // monthDays: number[] | undefined\r\n  [], // weekDays: number[] | undefined\r\n  [2], // hours: number[] | undefined\r\n  [1], // minutes: number[] | undefined\r\n  false // humanizeValue?: boolean\r\n)\r\n\r\nconsole.log('cron string:', converted)\r\n```\r\n\r\n```\r\ncron string: '1 2 * * *'\r\n```\r\n\r\n## Examples\r\n\r\nLearn more with [dynamic settings](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--dynamic-settings).\r\n\r\n- [Two-way sync binding with input](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--input)\r\n- [Default value](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--default-value)\r\n- [Default period](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--default-period)\r\n- [Disabled mode](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--disabled)\r\n- [Read-Only mode](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--read-only)\r\n- [Humanized labels](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--humanize-labels)\r\n- [Humanized value](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--humanize-value)\r\n- [Leading zero for numbers](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--leading-zero)\r\n- [Error management with text and style](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--track-error)\r\n- [\"Clear button\" removal](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--no-clear-button)\r\n- [\"Clear button\" action](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--clear-button-empty-value)\r\n- [Empty value management](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--empty-never-allowed)\r\n- [Cron shortcuts](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--shortcuts)\r\n- [12-hour clock](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--twelve-hour-clock)\r\n- [24-hour clock](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--twenty-four-hour-clock)\r\n- [Locale customization](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--french-locale)\r\n- [Prefix and suffix removal](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--no-prefix-and-suffix)\r\n- [Style customization](https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--custom-style)\r\n- And many more...\r\n\r\n## API\r\n\r\n```\r\nCronProps {\r\n  /**\r\n   * Cron value, the component is by design a controlled component.\r\n   * The first value will be the default value.\r\n   *\r\n   * required\r\n   */\r\n  value: string\r\n\r\n  /**\r\n   * Set the cron value, similar to onChange.\r\n   * The naming tells you that you have to set the value by yourself.\r\n   *\r\n   * required\r\n   */\r\n  setValue:\r\n    | (value: string, extra: { selectedPeriod }) => void\r\n    | Dispatch<SetStateAction<string>>\r\n\r\n  /**\r\n   * Set the container className and used as a prefix for other selectors.\r\n   * Available selectors: https://xrutayisire.github.io/react-js-cron/?path=/story/reactjs-cron--custom-style\r\n   */\r\n  className?: string\r\n\r\n  /**\r\n   * Humanize the labels in the cron component, SUN-SAT and JAN-DEC.\r\n   *\r\n   * Default: true\r\n   */\r\n  humanizeLabels?: boolean\r\n\r\n  /**\r\n   * Humanize the value, SUN-SAT and JAN-DEC.\r\n   *\r\n   * Default: false\r\n   */\r\n  humanizeValue?: boolean\r\n\r\n  /**\r\n   * Add a \"0\" before numbers lower than 10.\r\n   *\r\n   * Default: false\r\n   */\r\n  leadingZero?: boolean | ['month-days', 'hours', 'minutes']\r\n\r\n  /**\r\n   * Define the default period when the default value is empty.\r\n   *\r\n   * Default: 'day'\r\n   */\r\n  defaultPeriod?: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'reboot'\r\n\r\n  /**\r\n   * Disable the cron component.\r\n   *\r\n   * Default: false\r\n   */\r\n  disabled?: boolean\r\n\r\n  /**\r\n   * Make the cron component read-only.\r\n   *\r\n   * Default: false\r\n   */\r\n  readOnly?: boolean\r\n\r\n  /**\r\n   * Show clear button for each dropdown.\r\n   *\r\n   * Default: true\r\n   */\r\n  allowClear?: boolean\r\n\r\n  /**\r\n   * Define if empty should trigger an error.\r\n   *\r\n   * Default: 'for-default-value'\r\n   */\r\n  allowEmpty?: 'always' | 'never' | 'for-default-value'\r\n\r\n  /**\r\n   * Support cron shortcuts.\r\n   *\r\n   * Default: ['@yearly', '@annually', '@monthly', '@weekly', '@daily', '@midnight', '@hourly']\r\n   */\r\n  shortcuts?: boolean | ['@yearly', '@annually', '@monthly', '@weekly', '@daily', '@midnight', '@hourly', '@reboot']\r\n\r\n  /**\r\n   * Define the clock format.\r\n   *\r\n   * Default: undefined\r\n   */\r\n  clockFormat?: '12-hour-clock' | '24-hour-clock'\r\n\r\n  /**\r\n   * Display the clear button.\r\n   *\r\n   * Default: true\r\n   */\r\n  clearButton?: boolean\r\n\r\n  /**\r\n   * antd button props to customize the clear button.\r\n   */\r\n  clearButtonProps?: ButtonProps\r\n\r\n  /**\r\n   * Define the clear button action.\r\n   *\r\n   * Default: 'fill-with-every'\r\n   */\r\n  clearButtonAction?: 'empty' | 'fill-with-every'\r\n\r\n  /**\r\n   * Display error style (red border and background).\r\n   *\r\n   * Display: true\r\n   */\r\n  displayError?: boolean\r\n\r\n  /**\r\n   * Triggered when the cron component detects an error with the value.\r\n   */\r\n  onError?:\r\n    | (error: {\r\n      type: 'invalid_cron'\r\n      description: string\r\n    }) => void\r\n    | Dispatch<SetStateAction<{\r\n      type: 'invalid_cron'\r\n      description: string\r\n    }>>\r\n    | undefined\r\n\r\n  /**\r\n   * Define if a double click on a dropdown option should automatically\r\n   * select / unselect a periodicity.\r\n   *\r\n   * Default: true\r\n   */\r\n  periodicityOnDoubleClick?: boolean\r\n\r\n  /**\r\n   * Define if it's possible to select only one or multiple values for each dropdown.\r\n   *\r\n   * Even in single mode, if you want to disable the double click on a dropdown option that\r\n   * automatically select / unselect a periodicity, set 'periodicityOnDoubleClick'\r\n   * prop at false.\r\n   *\r\n   * When single mode is active and 'periodicityOnDoubleClick' is false,\r\n   * each dropdown will automatically close after selecting a value\r\n   *\r\n   * Default: 'multiple'\r\n   */\r\n  mode?: 'multiple' | 'single'\r\n\r\n  /**\r\n   * Define which dropdowns need to be displayed.\r\n   *\r\n   * Default: ['period', 'months', 'month-days', 'week-days', 'hours', 'minutes']\r\n   */\r\n  allowedDropdowns?: [\r\n    'period',\r\n    'months',\r\n    'month-days',\r\n    'week-days',\r\n    'hours',\r\n    'minutes'\r\n  ]\r\n\r\n  /**\r\n   * Define the list of periods available.\r\n   *\r\n   * Default: ['year', 'month', 'week', 'day', 'hour', 'minute', 'reboot']\r\n   */\r\n  allowedPeriods?: ['year', 'month', 'week', 'day', 'hour', 'minute', 'reboot']\r\n\r\n  /**\r\n   * Define a configuration that is used for each dropdown specifically.\r\n   * Configuring a dropdown will override any global configuration for the same property.\r\n   *\r\n   * Configurations available:\r\n   *\r\n   * // See global configuration\r\n   * // For 'months' and 'week-days'\r\n   * humanizeLabels?: boolean\r\n   *\r\n   * // See global configuration\r\n   * // For 'months' and 'week-days'\r\n   * humanizeValue?: boolean\r\n   *\r\n   * // See global configuration\r\n   * // For 'month-days', 'hours' and 'minutes'\r\n   * leadingZero?: boolean\r\n   *\r\n   * // See global configuration\r\n   * For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * disabled?: boolean\r\n   *\r\n   * // See global configuration\r\n   * For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * readOnly?: boolean\r\n   *\r\n   * // See global configuration\r\n   * // For 'period', 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * allowClear?: boolean\r\n   *\r\n   * // See global configuration\r\n   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * periodicityOnDoubleClick?: boolean\r\n   *\r\n   * // See global configuration\r\n   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * mode?: Mode\r\n   *\r\n   * // The function will receive one argument, an object with value and label.\r\n   * // If the function returns true, the option will be included in the filtered set.\r\n   * // Otherwise, it will be excluded.\r\n   * // For 'months', 'month-days', 'week-days', 'hours' and 'minutes'\r\n   * filterOption?: FilterOption\r\n   *\r\n   * Default: undefined\r\n   */\r\n  dropdownsConfig?: {\r\n    'period'?: {\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n    }\r\n    'months'?: {\r\n      humanizeLabels?: boolean\r\n      humanizeValue?: boolean\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n      periodicityOnDoubleClick?: boolean\r\n      mode?: 'multiple' | 'single'\r\n      filterOption?: ({\r\n          value,\r\n          label,\r\n        }: {\r\n          value: string\r\n          label: string\r\n        }) => boolean\r\n    }\r\n    'month-days'?: {\r\n      leadingZero?: boolean\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n      periodicityOnDoubleClick?: boolean\r\n      mode?: 'multiple' | 'single'\r\n      filterOption?: ({\r\n          value,\r\n          label,\r\n        }: {\r\n          value: string\r\n          label: string\r\n        }) => boolean\r\n    }\r\n    'week-days'?: {\r\n      humanizeLabels?: boolean\r\n      humanizeValue?: boolean\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n      periodicityOnDoubleClick?: boolean\r\n      mode?: 'multiple' | 'single'\r\n      filterOption?: ({\r\n          value,\r\n          label,\r\n        }: {\r\n          value: string\r\n          label: string\r\n        }) => boolean\r\n    }\r\n    'hours'?: {\r\n      leadingZero?: boolean\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n      periodicityOnDoubleClick?: boolean\r\n      mode?: 'multiple' | 'single'\r\n      filterOption?: ({\r\n          value,\r\n          label,\r\n        }: {\r\n          value: string\r\n          label: string\r\n        }) => boolean\r\n    }\r\n    'minutes'?: {\r\n      leadingZero?: boolean\r\n      disabled?: boolean\r\n      readOnly?: boolean\r\n      allowClear?: boolean\r\n      periodicityOnDoubleClick?: boolean\r\n      mode?: 'multiple' | 'single'\r\n      filterOption?: ({\r\n          value,\r\n          label,\r\n        }: {\r\n          value: string\r\n          label: string\r\n        }) => boolean\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Change the component language.\r\n   * Can also be used to remove prefix and suffix.\r\n   *\r\n   * When setting 'humanizeLabels' you can change the language of the\r\n   * alternative labels with 'altWeekDays' and 'altMonths'.\r\n   *\r\n   * The order of the 'locale' properties 'weekDays', 'months', 'altMonths'\r\n   * and 'altWeekDays' is important! The index will be used as value.\r\n   *\r\n   * Default './src/locale.ts'\r\n   */\r\n  locale?: {\r\n    everyText?: string\r\n    emptyMonths?: string\r\n    emptyMonthDays?: string\r\n    emptyMonthDaysShort?: string\r\n    emptyWeekDays?: string\r\n    emptyWeekDaysShort?: string\r\n    emptyHours?: string\r\n    emptyMinutes?: string\r\n    emptyMinutesForHourPeriod?: string\r\n    yearOption?: string\r\n    monthOption?: string\r\n    weekOption?: string\r\n    dayOption?: string\r\n    hourOption?: string\r\n    minuteOption?: string\r\n    rebootOption?: string\r\n    prefixPeriod?: string\r\n    prefixMonths?: string\r\n    prefixMonthDays?: string\r\n    prefixWeekDays?: string\r\n    prefixWeekDaysForMonthAndYearPeriod?: string\r\n    prefixHours?: string\r\n    prefixMinutes?: string\r\n    prefixMinutesForHourPeriod?: string\r\n    suffixMinutesForHourPeriod?: string\r\n    errorInvalidCron?: string\r\n    weekDays?: string[]\r\n    months?: string[]\r\n    altWeekDays?: string[]\r\n    altMonths?: string[]\r\n  }\r\n}\r\n```\r\n\r\n## License\r\n\r\nMIT © [xrutayisire](https://github.com/xrutayisire)\r\n","readmeFilename":"README.md"}