├── .editorconfig
├── .eslintrc
├── .github
    └── workflows
    │   ├── alpha.yml
    │   └── release.yml
├── .gitignore
├── .storybook
    ├── main.js
    └── preview.js
├── .vscode
    └── extensions.json
├── README.MD
├── browserslist
├── cypress.config.ts
├── cypress
    ├── component
    │   ├── app.tsx
    │   ├── container.tsx
    │   ├── localization.ts
    │   └── test.cy.tsx
    ├── fixtures
    │   └── example.json
    └── support
    │   ├── commands.ts
    │   ├── component-index.html
    │   └── component.ts
├── package-lock.json
├── package.json
├── prepare-package.mjs
├── src
    ├── lib
    │   ├── cron-base-props.type.ts
    │   ├── cron-base-tab-props.type.ts
    │   ├── cron-localization.ts
    │   ├── cron-props.type.ts
    │   ├── cron.ts
    │   ├── helpers.ts
    │   ├── index.ts
    │   ├── quartz
    │   │   ├── index.ts
    │   │   ├── quartz.tsx
    │   │   └── tabs
    │   │   │   ├── day
    │   │   │       └── day.tsx
    │   │   │   ├── hour
    │   │   │       └── hour.tsx
    │   │   │   ├── index.ts
    │   │   │   ├── minute
    │   │   │       └── minute.tsx
    │   │   │   ├── month
    │   │   │       └── month.tsx
    │   │   │   ├── second
    │   │   │       └── second.tsx
    │   │   │   ├── shared
    │   │   │       ├── increment.tsx
    │   │   │       ├── index.ts
    │   │   │       └── tab-props.type.ts
    │   │   │   └── year
    │   │   │       └── year.tsx
    │   ├── shared
    │   │   ├── and.tsx
    │   │   ├── every.tsx
    │   │   ├── index.ts
    │   │   ├── props.type.ts
    │   │   └── range.tsx
    │   └── unix
    │   │   ├── index.ts
    │   │   ├── tabs
    │   │       ├── day
    │   │       │   └── day.tsx
    │   │       ├── hour
    │   │       │   └── hour.tsx
    │   │       ├── index.ts
    │   │       ├── minute
    │   │       │   └── minute.tsx
    │   │       ├── month
    │   │       │   └── month.tsx
    │   │       └── shared
    │   │       │   ├── increment.tsx
    │   │       │   ├── index.ts
    │   │       │   └── tab-props.type.ts
    │   │   └── unix.tsx
    └── stories
    │   ├── Introduction.stories.mdx
    │   ├── assets
    │       ├── code-brackets.svg
    │       ├── colors.svg
    │       ├── comments.svg
    │       ├── direction.svg
    │       ├── flow.svg
    │       ├── plugin.svg
    │       ├── repo.svg
    │       └── stackalt.svg
    │   ├── quartz-cron.stories.tsx
    │   └── unix-cron.stories.tsx
├── tsconfig.base.json
└── tsconfig.json


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "parser": "@typescript-eslint/parser",
 4 |   "plugins": [
 5 |     "@typescript-eslint"
 6 |   ],
 7 |   "extends": [
 8 |     "eslint:recommended",
 9 |     "plugin:@typescript-eslint/eslint-recommended",
10 |     "plugin:@typescript-eslint/recommended"
11 |   ],
12 |   "rules": {
13 |     "indent": ["error", 2]
14 |   },
15 |   "ignorePatterns": [
16 |     "dist",
17 |     "coverage",
18 |     "node_modules"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/.github/workflows/alpha.yml:
--------------------------------------------------------------------------------
 1 | name: Alpha
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - 'feature/**'
 7 | 
 8 | jobs:
 9 |   build:
10 | 
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         node-version: [16.16.0]
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v3
19 |     - name: Use Node.js ${{ matrix.node-version }}
20 |       uses: actions/setup-node@v3
21 |       with:
22 |         node-version: ${{ matrix.node-version }}
23 |     - name: Get npm cache directory
24 |       id: npm-cache-dir
25 |       run: |
26 |         echo "::set-output name=dir::$(npm config get cache)"
27 |     - name: Cache node modules
28 |       uses: actions/cache@v3
29 |       id: npm-cache
30 |       with:
31 |         path: ${{ steps.npm-cache-dir.outputs.dir }}
32 |         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
33 |         restore-keys: |
34 |           ${{ runner.os }}-node-
35 |     - name: Install Dependencies
36 |       run: npm ci
37 |       env:
38 |         CI: true
39 |     - name: Linting
40 |       run: npm run lint
41 |       env:
42 |         CI: true
43 |     - name: Units Testing
44 |       run: npm run e2e-run
45 |       env:
46 |         CI: true
47 |     - name: Publish Test Report
48 |       uses: mikepenz/action-junit-report@v3
49 |       if: always() # always run even if the previous step fails
50 |       with:
51 |         report_paths: 'e2e-results/**/*.xml'
52 |     - name: Build Dist
53 |       run: npm run build-alpha
54 |       env:
55 |         CI: true
56 |     - name: Npm Configuration
57 |       run: npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
58 |       env:
59 |         CI: true
60 |         NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
61 |     - name: Publish Cron Core
62 |       run: npm run publish-alpha
63 |       env:
64 |         CI: true
65 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       main
 7 | 
 8 | jobs:
 9 |   build:
10 | 
11 |     runs-on: ubuntu-latest
12 | 
13 |     strategy:
14 |       matrix:
15 |         node-version: [16.16.0]
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v3
19 |     - name: Use Node.js ${{ matrix.node-version }}
20 |       uses: actions/setup-node@v3
21 |       with:
22 |         node-version: ${{ matrix.node-version }}
23 |     - name: Get npm cache directory
24 |       id: npm-cache-dir
25 |       run: |
26 |         echo "::set-output name=dir::$(npm config get cache)"
27 |     - name: Cache node modules
28 |       uses: actions/cache@v3
29 |       id: npm-cache
30 |       with:
31 |         path: ${{ steps.npm-cache-dir.outputs.dir }}
32 |         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
33 |         restore-keys: |
34 |           ${{ runner.os }}-node-
35 |     - name: Install Dependencies
36 |       run: npm ci
37 |       env:
38 |         CI: true
39 |     - name: Linting
40 |       run: npm run lint
41 |       env:
42 |         CI: true
43 |     - name: Units Testing
44 |       run: npm run e2e-run
45 |       env:
46 |         CI: true
47 |     - name: Publish Test Report
48 |       uses: mikepenz/action-junit-report@v3
49 |       if: always() # always run even if the previous step fails
50 |       with:
51 |         report_paths: 'e2e-results/**/*.xml'
52 |     - name: Build Dist
53 |       run: npm run build
54 |       env:
55 |         CI: true
56 |     - name: Npm Configuration
57 |       run: npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
58 |       env:
59 |         CI: true
60 |         NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
61 |     - name: Publish Cron Core
62 |       run: npm run publish
63 |       env:
64 |         CI: true
65 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | storybook-static
4 | e2e-results
5 | cypress/videos
6 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   core: {
 3 |     builder: 'webpack5',
 4 |   },
 5 |   "stories": [
 6 |     "../src/stories/**/*.stories.mdx",
 7 |     "../src/stories/**/*.stories.@(js|jsx|ts|tsx)"
 8 |   ],
 9 |   "addons": [
10 |     "@storybook/addon-links",
11 |     "@storybook/addon-essentials",
12 |     "@storybook/addon-interactions",
13 |     {
14 |       "name": "storybook-addon-sass-postcss",
15 |       "options": {
16 |         sassLoaderOptions: {
17 |           implementation: require('sass'),
18 |         }
19 |       }
20 |     }
21 |   ],
22 |   "framework": "@storybook/react"
23 | }
24 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
 1 | import '!style-loader!css-loader!sass-loader!bootstrap/scss/bootstrap.scss'
 2 | 
 3 | export const parameters = {
 4 |   actions: { argTypesRegex: "^on[A-Z].*" },
 5 |   controls: {
 6 |     matchers: {
 7 |       color: /(background|color)$/i,
 8 |       date: /Date$/,
 9 |     },
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "nrwl.angular-console",
4 |     "esbenp.prettier-vscode",
5 |     "firsttris.vscode-jest-runner",
6 |     "dbaeumer.vscode-eslint"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/README.MD:
--------------------------------------------------------------------------------
 1 | [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct-single.svg)](https://vshymanskyy.github.io/StandWithUkraine)
 2 | 
 3 | # Quartz/Unix Cron Component - React
 4 | 
 5 | [React](https://reactjs.org/) cron widget built from the ground up using only [Bootstrap 4](https://getbootstrap.com/) CSS.
 6 | 
 7 | Please check our [demo & documentation](https://recron.emptyui.com) and the list of
 8 | [issues](https://github.com/ua-cron/react/issues) to see all the things we are working on. Feel free to make comments there.
 9 | 
10 | <p align="center">
11 | 	<a href="https://recron.emptyui.com">
12 | 		<img
13 | 			width="200"
14 | 			src="https://res.cloudinary.com/dwkakr4wt/image/upload/v1661086527/cron/recron.png"
15 | 			alt="Quartz/Unix Cron Component - React">
16 | 	</a>
17 | </p>
18 | 
19 | <p align="center">
20 | 	<a href="https://badge.fury.io/js/%40sbzen%2Fre-cron">
21 | 		<img
22 | 			src="https://badge.fury.io/js/%40sbzen%2Fre-cron.svg"
23 | 			alt="npm version">
24 | 	</a>
25 | 	<a href="https://npmjs.org/%40sbzen%2Fre-cron">
26 | 		<img
27 | 			src="https://img.shields.io/npm/dm/%40sbzen%2Fre-cron.svg"
28 | 			alt="npm downloads">
29 | 	</a>
30 | </p>
31 | 
32 | ## Getting Started
33 | 
34 | This is an open source project that builds a cron builder component for React applications.
35 | It supports Quartz/Unix cron string formats for both input and output.
36 | Inspired by this [non-react](https://www.freeformatter.com/cron-expression-generator-quartz.html) implementation.
37 | 
38 | ## Installation
39 | You can use either the npm or yarn command-line tool to install packages.
40 | ```
41 | npm install --save @sbzen/re-cron
42 | ```
43 | 
44 | ## Display the cron component
45 | Import and add the cron component into your jsx/tsx.
46 | 
47 | ```tsx
48 | import React, { useState } from 'react';
49 | import { ReQuartzCron } from '@sbzen/re-cron';
50 | 
51 | const App = () => {
52 |   const [value, setValue] = useState('2,0,4,3,1 0/1 3/2 ? * 4/5 *');
53 | 
54 |   return (
55 |     <ReQuartzCron
56 |       value={value}
57 |       onChange={setValue}/>
58 |   );
59 | };
60 | export default App;
61 | ```
62 | 
63 | ## Usage & Demo
64 | Main source of API documentation and usage scenarios available here: https://recron.emptyui.com.
65 | 
66 | 
67 | ## Compatibility
68 | The only two required dependencies are React and cron-core.
69 | The Bootstrap CSS is optional as you can use this component with your own styling.
70 | Here is the versions compatibility list:
71 | 
72 | | Re Cron          |    React    |  Bootstrap CSS |
73 | | -------------    | ------------- | -------------- |
74 | | 0.0.1            | 16.x.x         | 4.x.x          |
75 | | 2.0.0            | 17.x.x         | 4.x.x          |
76 | 


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | 
 5 | # You can see what browsers were selected by your queries by running:
 6 | #   npx browserslist
 7 | 
 8 | > 0.5%
 9 | last 2 versions
10 | Firefox ESR
11 | not dead
12 | not IE 9-11 # For IE 9-11 support, remove 'not'.
13 | 


--------------------------------------------------------------------------------
/cypress.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "cypress";
 2 | 
 3 | export default defineConfig({
 4 |   fileServerFolder: './',
 5 |   component: {
 6 |     numTestsKeptInMemory: 0,
 7 |     devServer: {
 8 |       framework: "create-react-app",
 9 |       bundler: "webpack",
10 |     },
11 |     reporter: 'junit',
12 |     reporterOptions: {
13 |       mochaFile: 'e2e-results/test-result-[hash].xml',
14 |       includePending: true,
15 |       attachments: true,
16 |       outputs: true
17 |     }
18 |   }
19 | });
20 | 


--------------------------------------------------------------------------------
/cypress/component/app.tsx:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { ReUnixCron, ReQuartzCron, Tab } from '@sbzen/re-cron';
 3 | 
 4 | import { TestContainer } from './container';
 5 | 
 6 | export const App = () => {
 7 |   return (
 8 |     <Fragment>
 9 |       <TestContainer
10 |         type="UnixCron"
11 |         initialValue="0,5,12 4 8-14 * *"
12 |         initialTabs={[Tab.MINUTES, Tab.HOURS, Tab.DAY, Tab.MONTH]}
13 |         render={props => <ReUnixCron {...props}/>}/>
14 | 
15 |       <TestContainer
16 |         type="QuartzCron"
17 |         initialValue="0,1,2 2/4 6/2 ? 2-7 SUN,MON 2019/1"
18 |         render={props => <ReQuartzCron {...props}/>}/>
19 |     </Fragment>
20 |   );
21 | };
22 | 
23 | export default App;
24 | 


--------------------------------------------------------------------------------
/cypress/component/container.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { Tab, CronLocalization } from '@sbzen/re-cron';
  3 | 
  4 | import { getLocalizationPathes, getLocalization } from './localization';
  5 | 
  6 | export const TestContainer = ({
  7 |   type = '',
  8 |   render,
  9 |   initialValue,
 10 |   initialTabs = [Tab.SECONDS, Tab.MINUTES, Tab.HOURS, Tab.DAY, Tab.MONTH, Tab.YEAR]
 11 | }) => {
 12 |   const [value, setValue] = useState(initialValue);
 13 |   const [disabled, setDisabled] = useState(false);
 14 |   const [hideTabs, setHideTabs] = useState(false);
 15 |   const [cssClassPrefix, setCssClassPrefix] = useState<string|undefined>(undefined);
 16 |   const [activeTab, setActiveTab] = useState<Tab|undefined>(undefined);
 17 |   const [localization, setLocalization] = useState<CronLocalization|undefined>(undefined);
 18 |   const [tabs, setTabs] = useState<Tab[]|undefined>(undefined);
 19 | 
 20 |   const getLocalizationValue = (path: string, loc = getLocalization()) => {
 21 |     const paths = path.split('.');
 22 |     const lastProp = paths[paths.length - 1];
 23 |     const store = paths.slice(0, paths.length - 1).reduce((acc, prop) => acc[prop], loc);
 24 |     return store[lastProp];
 25 |   }
 26 | 
 27 |   const updateLocalizationField = (path: string, localizationValue: string) => {
 28 |     if (!localization) {
 29 |       return;
 30 |     }
 31 |     const paths = path.split('.');
 32 |     const lastProp = paths[paths.length - 1];
 33 |     const store = paths.slice(0, paths.length - 1).reduce((acc, prop) => acc[prop], localization);
 34 |     store[lastProp] = localizationValue;
 35 |     setLocalization({ ...localization });
 36 |   };
 37 | 
 38 |   const addedTab = (tab: Tab) => (tabs || []).includes(tab);
 39 | 
 40 |   const toggleTab = (tab: Tab) => {
 41 |     const tabsToUse = tabs || [];
 42 |     if (addedTab(tab)) {
 43 |       setTabs(tabsToUse.filter(t => t !== tab));
 44 |       return;
 45 |     }
 46 |     setTabs([
 47 |       ...tabsToUse,
 48 |       tab
 49 |     ]);
 50 |   };
 51 | 
 52 |   return (
 53 |     <div
 54 |       className="re-cron-test"
 55 |       data-cron-type={type}>
 56 | 
 57 |       <h1>{type}</h1>
 58 | 
 59 |       <input
 60 |         data-cron="value"
 61 |         value={value}
 62 |         onChange={e => setValue(e.target.value)}/>
 63 | 
 64 |       <button
 65 |         data-cron-action="localization-reset"
 66 |         className="ml-1"
 67 |         onClick={() => setLocalization(undefined)}>
 68 |         Reset Localization
 69 |       </button>
 70 |       <button
 71 |         data-cron-action="localization-use"
 72 |         className="ml-1"
 73 |         onClick={() => setLocalization(localization || getLocalization())}>
 74 |         Use Localization
 75 |       </button>
 76 |       <button
 77 |         data-cron-action="disable"
 78 |         className="ml-1"
 79 |         onClick={() => setDisabled(!disabled)}>
 80 |         Disable
 81 |       </button>
 82 |       <button
 83 |         data-cron-action="hide-tabs"
 84 |         className="ml-1"
 85 |         onClick={() => setHideTabs(true)}>
 86 |         Hide tabs
 87 |       </button>
 88 |       <button
 89 |         data-cron-action="show-tabs"
 90 |         className="ml-1"
 91 |         onClick={() => setHideTabs(false)}>
 92 |         Show tabs
 93 |       </button>
 94 |       <button
 95 |         data-cron-action="add-css-class-prefix"
 96 |         className="ml-1"
 97 |         onClick={() => setCssClassPrefix('my-')}>
 98 |         Add "my-" css prefix
 99 |       </button>
100 |       <button
101 |         data-cron-action="remove-css-class-prefix"
102 |         className="ml-1"
103 |         onClick={() => setCssClassPrefix(undefined)}>
104 |         Remove "my-" css prefix
105 |       </button>
106 | 
107 |       <div className="mt-1">
108 |         {getLocalizationPathes().map((path, i) => (
109 |           <input
110 |             data-cron-action="localization-field"
111 |             data-cron-action-value={path}
112 |             className="mr-1 mw-fixed-70"
113 |             key={i}
114 |             disabled={!localization}
115 |             placeholder={path}
116 |             value={getLocalizationValue(path, localization)}
117 |             onChange={e => updateLocalizationField(path, e.target.value)}/>
118 |         ))}
119 |       </div>
120 | 
121 |       <div className="mt-1">
122 |         <button
123 |           className="mr-1"
124 |           data-cron-action="reset-tab"
125 |           onClick={() => setTabs(undefined)}>
126 |           Reset Tabs
127 |         </button>
128 |         <button
129 |           className="mr-1"
130 |           data-cron-action="hide-tab"
131 |           onClick={() => setTabs([])}>
132 |           Remove Tabs
133 |         </button>
134 |         {initialTabs.map((tab, i) => (
135 |           <button
136 |             className="mr-1"
137 |             data-cron-action="toggle-tab"
138 |             data-cron-action-value={tab}
139 |             key={i}
140 |             onClick={() => toggleTab(tab)}>
141 |             {tab}
142 |             {addedTab(tab) ? '-' : '+'}
143 |           </button>
144 |         ))}
145 |       </div>
146 | 
147 |       <div className="mt-1">
148 |         {initialTabs.map((tab, i) => (
149 |           <button
150 |             className="mr-1"
151 |             data-cron-action="change-tab"
152 |             data-cron-action-value={tab}
153 |             key={i}
154 |             onClick={() => setActiveTab(tab)}>
155 |             {tab}
156 |           </button>
157 |         ))}
158 |       </div>
159 | 
160 |       <div data-cron-active-tab={activeTab}>
161 |         {activeTab}
162 |       </div>
163 | 
164 |       <div data-cron-host>
165 |         {render({
166 |           value,
167 |           cssClassPrefix,
168 |           localization,
169 |           activeTab,
170 |           tabs,
171 |           onChange: setValue,
172 |           hideTabs,
173 |           onTabChange: setActiveTab,
174 |           disabled
175 |         })}
176 |       </div>
177 |     </div>
178 |   );
179 | };
180 | 


--------------------------------------------------------------------------------
/cypress/component/localization.ts:
--------------------------------------------------------------------------------
  1 | import { CronLocalization } from '@sbzen/re-cron';
  2 | 
  3 | export const getLocalizationPathes = (obj: CronLocalization = getLocalization(), parentProp = '') => {
  4 |   return Object.keys(obj).reduce((acc, prop) => {
  5 |     const propsLine = [parentProp, prop].filter(a => !!a).join('.');
  6 | 
  7 |     const value = obj[prop];
  8 |     let values: string[] = [];
  9 | 
 10 |     if (typeof value !== 'string') {
 11 |       values = getLocalizationPathes(value, propsLine);
 12 |     } else {
 13 |       values = [propsLine];
 14 |     }
 15 | 
 16 |     return [
 17 |       ...acc,
 18 |       ...values
 19 |     ];
 20 |   }, [] as string[]);
 21 | };
 22 | 
 23 | export const getLocalization = (): CronLocalization => ({
 24 |   common: {
 25 |     month: {
 26 |       january: 'January',
 27 |       february: 'February',
 28 |       march: 'March',
 29 |       april: 'April',
 30 |       may: 'May',
 31 |       june: 'June',
 32 |       july: 'July',
 33 |       august: 'August',
 34 |       september: 'September',
 35 |       october: 'October',
 36 |       november: 'November',
 37 |       december: 'December'
 38 |     },
 39 |     dayOfWeek: {
 40 |       sunday: 'Sunday',
 41 |       monday: 'Monday',
 42 |       tuesday: 'Tuesday',
 43 |       wednesday: 'Wednesday',
 44 |       thursday: 'Thursday',
 45 |       friday: 'Friday',
 46 |       saturday: 'Saturday'
 47 |     },
 48 |     dayOfMonth: {
 49 |       '1st': '1st',
 50 |       '2nd': '2nd',
 51 |       '3rd': '3rd',
 52 |       '4th': '4th',
 53 |       '5th': '5th',
 54 |       '6th': '6th',
 55 |       '7th': '7th',
 56 |       '8th': '8th',
 57 |       '9th': '9th',
 58 |       '10th': '10th',
 59 |       '11th': '11th',
 60 |       '12th': '12th',
 61 |       '13th': '13th',
 62 |       '14th': '14th',
 63 |       '15th': '15th',
 64 |       '16th': '16th',
 65 |       '17th': '17th',
 66 |       '18th': '18th',
 67 |       '19th': '19th',
 68 |       '20th': '20th',
 69 |       '21st': '21st',
 70 |       '22nd': '22nd',
 71 |       '23rd': '23rd',
 72 |       '24th': '24th',
 73 |       '25th': '25th',
 74 |       '26th': '26th',
 75 |       '27th': '27th',
 76 |       '28th': '28th',
 77 |       '29th': '29th',
 78 |       '30th': '30th',
 79 |       '31st': '31st'
 80 |     }
 81 |   },
 82 |   tabs: {
 83 |     seconds: 'Seconds',
 84 |     minutes: 'Minutes',
 85 |     hours: 'Hours',
 86 |     day: 'Day',
 87 |     month: 'Month',
 88 |     year: 'Year'
 89 |   },
 90 |   quartz: {
 91 |     day: {
 92 |       every: {
 93 |         label: 'Every day'
 94 |       },
 95 |       dayOfWeekIncrement: {
 96 |         label1: 'Every',
 97 |         label2: 'day(s) starting on'
 98 |       },
 99 |       dayOfMonthIncrement: {
100 |         label1: 'Every',
101 |         label2: 'day(s) starting on the',
102 |         label3: 'of the month'
103 |       },
104 |       dayOfWeekAnd: {
105 |         label: 'Specific day of week (choose one or many)'
106 |       },
107 |       dayOfWeekRange: {
108 |         label1: 'Every day between',
109 |         label2: 'and'
110 |       },
111 |       dayOfMonthAnd: {
112 |         label: 'Specific day of month (choose one or many)'
113 |       },
114 |       dayOfMonthLastDay: {
115 |         label: 'On the last day of the month'
116 |       },
117 |       dayOfMonthLastDayWeek: {
118 |         label: 'On the last weekday of the month'
119 |       },
120 |       dayOfWeekLastNTHDayWeek: {
121 |         label1: 'On the last',
122 |         label2: 'of the month'
123 |       },
124 |       dayOfMonthDaysBeforeEndMonth: {
125 |         label: 'day(s) before the end of the month'
126 |       },
127 |       dayOfMonthNearestWeekDayOfMonth: {
128 |         label1: 'Nearest weekday (Monday to Friday) to the',
129 |         label2: 'of the month'
130 |       },
131 |       dayOfWeekNTHWeekDayOfMonth: {
132 |         label1: 'On the',
133 |         label2: 'of the month'
134 |       }
135 |     },
136 |     month: {
137 |       every: {
138 |         label: 'Every month'
139 |       },
140 |       increment: {
141 |         label1: 'Every',
142 |         label2: 'month(s) starting at month',
143 |       },
144 |       and: {
145 |         label: 'Specific month (choose one or many)'
146 |       },
147 |       range: {
148 |         label1: 'Every month between month',
149 |         label2: 'and month'
150 |       }
151 |     },
152 |     second: {
153 |       every: {
154 |         label: 'Every second'
155 |       },
156 |       increment: {
157 |         label1: 'Every',
158 |         label2: 'second(s) starting at second',
159 |       },
160 |       and: {
161 |         label: 'Specific second (choose one or many)'
162 |       },
163 |       range: {
164 |         label1: 'Every second between second',
165 |         label2: 'and second'
166 |       }
167 |     },
168 |     minute: {
169 |       every: {
170 |         label: 'Every minute'
171 |       },
172 |       increment: {
173 |         label1: 'Every',
174 |         label2: 'minute(s) starting at minute',
175 |       },
176 |       and: {
177 |         label: 'Specific minute (choose one or many)'
178 |       },
179 |       range: {
180 |         label1: 'Every minute between minute',
181 |         label2: 'and minute'
182 |       }
183 |     },
184 |     hour: {
185 |       every: {
186 |         label: 'Every hour'
187 |       },
188 |       increment: {
189 |         label1: 'Every',
190 |         label2: 'hour(s) starting at hour',
191 |       },
192 |       and: {
193 |         label: 'Specific hour (choose one or many)'
194 |       },
195 |       range: {
196 |         label1: 'Every hour between hour',
197 |         label2: 'and hour'
198 |       }
199 |     },
200 |     year: {
201 |       every: {
202 |         label: 'Any year'
203 |       },
204 |       increment: {
205 |         label1: 'Every',
206 |         label2: 'year(s) starting at year',
207 |       },
208 |       and: {
209 |         label: 'Specific year (choose one or many)'
210 |       },
211 |       range: {
212 |         label1: 'Every year between year',
213 |         label2: 'and year'
214 |       }
215 |     }
216 |   },
217 |   unix: {
218 |     day: {
219 |       every: {
220 |         label: 'Every day'
221 |       },
222 |       dayOfWeekIncrement: {
223 |         label1: 'Every',
224 |         label2: 'day(s) of week'
225 |       },
226 |       dayOfMonthIncrement: {
227 |         label1: 'Every',
228 |         label2: 'day(s) of month'
229 |       },
230 |       dayOfWeekAnd: {
231 |         label: 'Specific day of week (choose one or many)'
232 |       },
233 |       dayOfMonthAnd: {
234 |         label: 'Specific day of month (choose one or many)'
235 |       }
236 |     },
237 |     month: {
238 |       every: {
239 |         label: 'Every month'
240 |       },
241 |       increment: {
242 |         label1: 'Every',
243 |         label2: 'month(s)',
244 |       },
245 |       and: {
246 |         label: 'Specific month (choose one or many)'
247 |       },
248 |       range: {
249 |         label1: 'Every month between month',
250 |         label2: 'and month'
251 |       }
252 |     },
253 |     minute: {
254 |       every: {
255 |         label: 'Every minute'
256 |       },
257 |       increment: {
258 |         label1: 'Every',
259 |         label2: 'minute(s)',
260 |       },
261 |       and: {
262 |         label: 'Specific minute (choose one or many)'
263 |       },
264 |       range: {
265 |         label1: 'Every minute between minute',
266 |         label2: 'and minute'
267 |       }
268 |     },
269 |     hour: {
270 |       every: {
271 |         label: 'Every hour'
272 |       },
273 |       increment: {
274 |         label1: 'Every',
275 |         label2: 'hour(s)',
276 |       },
277 |       and: {
278 |         label: 'Specific hour (choose one or many)'
279 |       },
280 |       range: {
281 |         label1: 'Every hour between hour',
282 |         label2: 'and hour'
283 |       }
284 |     }
285 |   }
286 | });
287 | 


--------------------------------------------------------------------------------
/cypress/component/test.cy.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { mount } from '@cypress/react'
 3 | 
 4 | import { activeTab, cssClasses, localization, disabled, tabChange, tabs, hideTabs, values } from '@sbzen/e2e';
 5 | 
 6 | import { App } from './app';
 7 | 
 8 | const beforeEachCb = () => beforeEach(() => mount(<App/>));
 9 | 
10 | activeTab(beforeEachCb);
11 | cssClasses(beforeEachCb, false);
12 | localization(beforeEachCb);
13 | disabled(beforeEachCb);
14 | tabChange(beforeEachCb);
15 | tabs(beforeEachCb);
16 | hideTabs(beforeEachCb);
17 | values(beforeEachCb);
18 | 


--------------------------------------------------------------------------------
/cypress/fixtures/example.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Using fixtures to represent data",
3 |   "email": "hello@cypress.io",
4 |   "body": "Fixtures are a great way to mock data for responses to routes"
5 | }
6 | 


--------------------------------------------------------------------------------
/cypress/support/commands.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="cypress" />
 2 | // ***********************************************
 3 | // This example commands.ts shows you how to
 4 | // create various custom commands and overwrite
 5 | // existing commands.
 6 | //
 7 | // For more comprehensive examples of custom
 8 | // commands please read more here:
 9 | // https://on.cypress.io/custom-commands
10 | // ***********************************************
11 | //
12 | //
13 | // -- This is a parent command --
14 | // Cypress.Commands.add('login', (email, password) => { ... })
15 | //
16 | //
17 | // -- This is a child command --
18 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
19 | //
20 | //
21 | // -- This is a dual command --
22 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
23 | //
24 | //
25 | // -- This will overwrite an existing command --
26 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
27 | //
28 | // declare global {
29 | //   namespace Cypress {
30 | //     interface Chainable {
31 | //       login(email: string, password: string): Chainable<void>
32 | //       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
33 | //       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
34 | //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
35 | //     }
36 | //   }
37 | // }


--------------------------------------------------------------------------------
/cypress/support/component-index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <title>Components App</title>
 8 |   </head>
 9 |   <body>
10 |     <div data-cy-root></div>
11 |   </body>
12 | </html>


--------------------------------------------------------------------------------
/cypress/support/component.ts:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/component.ts is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 
22 | import { mount } from 'cypress/react'
23 | 
24 | // Augment the Cypress namespace to include type definitions for
25 | // your custom command.
26 | // Alternatively, can be defined in cypress/support/component.d.ts
27 | // with a <reference path="./component" /> at the top of your spec.
28 | declare global {
29 |   // eslint-disable-next-line
30 |   namespace Cypress {
31 |     interface Chainable {
32 |       mount: typeof mount
33 |     }
34 |   }
35 | }
36 | 
37 | Cypress.Commands.add('mount', mount)
38 | 
39 | // Example use:
40 | // cy.mount(<MyComponent />)
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@sbzen/re-cron",
 3 |   "version": "2.0.7",
 4 |   "description": "Quartz Cron Component - React",
 5 |   "author": "Serhii Bzenko <bzenkosergey@gmail.com>",
 6 |   "license": "MIT",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "git+ssh://git@github.com/ua-cron/react.git"
10 |   },
11 |   "keywords": [
12 |     "react",
13 |     "bootstap",
14 |     "cron",
15 |     "quartz",
16 |     "cron builder",
17 |     "cron generator",
18 |     "quartz cron"
19 |   ],
20 |   "homepage": "https://recron.emptyui.com",
21 |   "sideEffects": false,
22 |   "bugs": {
23 |     "url": "https://github.com/ua-cron/react/issues"
24 |   },
25 |   "scripts": {
26 |     "copy-rm": "cp README.MD dist/README.MD",
27 |     "build": "npm run clean && tsc && node prepare-package.mjs && npm run copy-rm",
28 |     "build-alpha": "ALPHA=1 npm run build",
29 |     "clean": "rm -rf dist",
30 |     "test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
31 |     "test": "jest",
32 |     "lint": "eslint . --ext .ts --ext .tsx",
33 |     "storybook": "start-storybook -p 6006",
34 |     "build-storybook": "build-storybook",
35 |     "e2e-inject": "npm install ./dist --force",
36 |     "e2e": "npm run build && npm run e2e-inject && npx cypress open --component",
37 |     "e2e-run": "npm run build && npm run e2e-inject && npx cypress run --component",
38 |     "publish-alpha": "npm publish ./dist --tag alpha --access=public",
39 |     "publish": "npm publish ./dist"
40 |   },
41 |   "dependencies": {
42 |     "@sbzen/cron-core": "2.0.3"
43 |   },
44 |   "peerDependencies": {
45 |     "react": "*",
46 |     "react-dom": "*"
47 |   },
48 |   "devDependencies": {
49 |     "@babel/core": "^7.18.6",
50 |     "@babel/preset-typescript": "^7.18.6",
51 |     "@cypress/react": "^6.1.0",
52 |     "@sbzen/e2e": "https://github.com/ua-cron/e2e/releases/download/20240602212421/dist.tar.gz",
53 |     "@storybook/addon-actions": "^6.5.10",
54 |     "@storybook/addon-essentials": "^6.5.10",
55 |     "@storybook/addon-interactions": "^6.5.10",
56 |     "@storybook/addon-links": "^6.5.10",
57 |     "@storybook/builder-webpack5": "^6.5.10",
58 |     "@storybook/manager-webpack5": "^6.5.10",
59 |     "@storybook/react": "^6.5.10",
60 |     "@storybook/testing-library": "0.0.13",
61 |     "@types/jest": "^27.5.1",
62 |     "@types/lodash": "^4.14.182",
63 |     "@types/node": "^17.0.35",
64 |     "@types/react": "^17.0.2",
65 |     "@typescript-eslint/eslint-plugin": "^5.30.0",
66 |     "@typescript-eslint/parser": "^5.30.0",
67 |     "babel-loader": "^8.2.5",
68 |     "bootstrap": "^4.6.1",
69 |     "eslint": "^8.18.0",
70 |     "jest": "^28.1.0",
71 |     "lodash": "^4.17.21",
72 |     "react-scripts": "^5.0.1",
73 |     "sass": "^1.53.0",
74 |     "storybook-addon-sass-postcss": "^0.1.3",
75 |     "ts-jest": "^28.0.2",
76 |     "ts-node": "^10.8.0",
77 |     "typescript": "4.6.4"
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/prepare-package.mjs:
--------------------------------------------------------------------------------
 1 | import { readFileSync, writeFileSync } from 'fs';
 2 | import { resolve, dirname } from 'path';
 3 | import { fileURLToPath } from 'url';
 4 | import { env } from 'node:process';
 5 | 
 6 | const isAlpha = env.ALPHA;
 7 | const __dirname = dirname(fileURLToPath(import.meta.url));
 8 | const distLibPath = resolve(__dirname, './dist');
 9 | const packagePath = resolve(__dirname, './package.json');
10 | 
11 | const packageString = readFileSync(packagePath);
12 | const {
13 |   name,
14 |   version,
15 |   author,
16 |   homepage,
17 |   keywords,
18 |   license,
19 |   repository,
20 |   sideEffects,
21 |   dependencies,
22 |   peerDependencies,
23 |   bugs
24 | } = JSON.parse(packageString);
25 | 
26 | const nextVersion = isAlpha ? `${version}-alpha.${Date.now()}` : version;
27 | const nextDependencies = Object.keys(dependencies).reduce((acc, prop) => {
28 |   if (prop === name) {
29 |     return acc;
30 |   }
31 |   return {
32 |     ...acc,
33 |     [prop]: dependencies[prop]
34 |   }
35 | }, {});
36 | 
37 | const libPackage = JSON.stringify({
38 |   name,
39 |   version: nextVersion,
40 |   author,
41 |   license,
42 |   keywords,
43 |   repository,
44 |   homepage,
45 |   dependencies: nextDependencies,
46 |   peerDependencies,
47 |   sideEffects,
48 |   bugs,
49 |   main: 'index.js',
50 |   types: 'index.d.ts'
51 | }, null, '  ');
52 | 
53 | writeFileSync(resolve(distLibPath, './package.json'), libPackage);
54 | 


--------------------------------------------------------------------------------
/src/lib/cron-base-props.type.ts:
--------------------------------------------------------------------------------
1 | export type CronBaseProps = {
2 |   cssClassPrefix?: string
3 | };
4 | 


--------------------------------------------------------------------------------
/src/lib/cron-base-tab-props.type.ts:
--------------------------------------------------------------------------------
 1 | import { CronUnixUIService, CronQuartzUIService } from '@sbzen/cron-core';
 2 | 
 3 | import { CronBaseProps } from './cron-base-props.type';
 4 | import { localization } from './cron-localization';
 5 | 
 6 | export type CronBaseTabProps<T extends CronUnixUIService|CronQuartzUIService> = {
 7 |   localization: typeof localization,
 8 |   session: string,
 9 |   service: T
10 | } & CronBaseProps;
11 | 


--------------------------------------------------------------------------------
/src/lib/cron-localization.ts:
--------------------------------------------------------------------------------
  1 | export const localization = {
  2 |   common: {
  3 |     month: {
  4 |       january: 'January',
  5 |       february: 'February',
  6 |       march: 'March',
  7 |       april: 'April',
  8 |       may: 'May',
  9 |       june: 'June',
 10 |       july: 'July',
 11 |       august: 'August',
 12 |       september: 'September',
 13 |       october: 'October',
 14 |       november: 'November',
 15 |       december: 'December'
 16 |     },
 17 |     dayOfWeek: {
 18 |       sunday: 'Sunday',
 19 |       monday: 'Monday',
 20 |       tuesday: 'Tuesday',
 21 |       wednesday: 'Wednesday',
 22 |       thursday: 'Thursday',
 23 |       friday: 'Friday',
 24 |       saturday: 'Saturday'
 25 |     },
 26 |     dayOfMonth: {
 27 |       '1st': '1st',
 28 |       '2nd': '2nd',
 29 |       '3rd': '3rd',
 30 |       '4th': '4th',
 31 |       '5th': '5th',
 32 |       '6th': '6th',
 33 |       '7th': '7th',
 34 |       '8th': '8th',
 35 |       '9th': '9th',
 36 |       '10th': '10th',
 37 |       '11th': '11th',
 38 |       '12th': '12th',
 39 |       '13th': '13th',
 40 |       '14th': '14th',
 41 |       '15th': '15th',
 42 |       '16th': '16th',
 43 |       '17th': '17th',
 44 |       '18th': '18th',
 45 |       '19th': '19th',
 46 |       '20th': '20th',
 47 |       '21st': '21st',
 48 |       '22nd': '22nd',
 49 |       '23rd': '23rd',
 50 |       '24th': '24th',
 51 |       '25th': '25th',
 52 |       '26th': '26th',
 53 |       '27th': '27th',
 54 |       '28th': '28th',
 55 |       '29th': '29th',
 56 |       '30th': '30th',
 57 |       '31st': '31st'
 58 |     }
 59 |   },
 60 |   tabs: {
 61 |     seconds: 'Seconds',
 62 |     minutes: 'Minutes',
 63 |     hours: 'Hours',
 64 |     day: 'Day',
 65 |     month: 'Month',
 66 |     year: 'Year'
 67 |   },
 68 |   quartz: {
 69 |     day: {
 70 |       every: {
 71 |         label: 'Every day'
 72 |       },
 73 |       dayOfWeekIncrement: {
 74 |         label1: 'Every',
 75 |         label2: 'day(s) starting on'
 76 |       },
 77 |       dayOfMonthIncrement: {
 78 |         label1: 'Every',
 79 |         label2: 'day(s) starting on the',
 80 |         label3: 'of the month'
 81 |       },
 82 |       dayOfWeekAnd: {
 83 |         label: 'Specific day of week (choose one or many)'
 84 |       },
 85 |       dayOfWeekRange: {
 86 |         label1: 'Every day between',
 87 |         label2: 'and'
 88 |       },
 89 |       dayOfMonthAnd: {
 90 |         label: 'Specific day of month (choose one or many)'
 91 |       },
 92 |       dayOfMonthLastDay: {
 93 |         label: 'On the last day of the month'
 94 |       },
 95 |       dayOfMonthLastDayWeek: {
 96 |         label: 'On the last weekday of the month'
 97 |       },
 98 |       dayOfWeekLastNTHDayWeek: {
 99 |         label1: 'On the last',
100 |         label2: 'of the month'
101 |       },
102 |       dayOfMonthDaysBeforeEndMonth: {
103 |         label: 'day(s) before the end of the month'
104 |       },
105 |       dayOfMonthNearestWeekDayOfMonth: {
106 |         label1: 'Nearest weekday (Monday to Friday) to the',
107 |         label2: 'of the month'
108 |       },
109 |       dayOfWeekNTHWeekDayOfMonth: {
110 |         label1: 'On the',
111 |         label2: 'of the month'
112 |       }
113 |     },
114 |     month: {
115 |       every: {
116 |         label: 'Every month'
117 |       },
118 |       increment: {
119 |         label1: 'Every',
120 |         label2: 'month(s) starting at month',
121 |       },
122 |       and: {
123 |         label: 'Specific month (choose one or many)'
124 |       },
125 |       range: {
126 |         label1: 'Every month between month',
127 |         label2: 'and month'
128 |       }
129 |     },
130 |     second: {
131 |       every: {
132 |         label: 'Every second'
133 |       },
134 |       increment: {
135 |         label1: 'Every',
136 |         label2: 'second(s) starting at second',
137 |       },
138 |       and: {
139 |         label: 'Specific second (choose one or many)'
140 |       },
141 |       range: {
142 |         label1: 'Every second between second',
143 |         label2: 'and second'
144 |       }
145 |     },
146 |     minute: {
147 |       every: {
148 |         label: 'Every minute'
149 |       },
150 |       increment: {
151 |         label1: 'Every',
152 |         label2: 'minute(s) starting at minute',
153 |       },
154 |       and: {
155 |         label: 'Specific minute (choose one or many)'
156 |       },
157 |       range: {
158 |         label1: 'Every minute between minute',
159 |         label2: 'and minute'
160 |       }
161 |     },
162 |     hour: {
163 |       every: {
164 |         label: 'Every hour'
165 |       },
166 |       increment: {
167 |         label1: 'Every',
168 |         label2: 'hour(s) starting at hour',
169 |       },
170 |       and: {
171 |         label: 'Specific hour (choose one or many)'
172 |       },
173 |       range: {
174 |         label1: 'Every hour between hour',
175 |         label2: 'and hour'
176 |       }
177 |     },
178 |     year: {
179 |       every: {
180 |         label: 'Any year'
181 |       },
182 |       increment: {
183 |         label1: 'Every',
184 |         label2: 'year(s) starting at year',
185 |       },
186 |       and: {
187 |         label: 'Specific year (choose one or many)'
188 |       },
189 |       range: {
190 |         label1: 'Every year between year',
191 |         label2: 'and year'
192 |       }
193 |     }
194 |   },
195 |   unix: {
196 |     day: {
197 |       every: {
198 |         label: 'Every day'
199 |       },
200 |       dayOfWeekIncrement: {
201 |         label1: 'Every',
202 |         label2: 'day(s) of week'
203 |       },
204 |       dayOfMonthIncrement: {
205 |         label1: 'Every',
206 |         label2: 'day(s) of month'
207 |       },
208 |       dayOfWeekAnd: {
209 |         label: 'Specific day of week (choose one or many)'
210 |       },
211 |       dayOfMonthAnd: {
212 |         label: 'Specific day of month (choose one or many)'
213 |       }
214 |     },
215 |     month: {
216 |       every: {
217 |         label: 'Every month'
218 |       },
219 |       increment: {
220 |         label1: 'Every',
221 |         label2: 'month(s)',
222 |       },
223 |       and: {
224 |         label: 'Specific month (choose one or many)'
225 |       },
226 |       range: {
227 |         label1: 'Every month between month',
228 |         label2: 'and month'
229 |       }
230 |     },
231 |     minute: {
232 |       every: {
233 |         label: 'Every minute'
234 |       },
235 |       increment: {
236 |         label1: 'Every',
237 |         label2: 'minute(s)',
238 |       },
239 |       and: {
240 |         label: 'Specific minute (choose one or many)'
241 |       },
242 |       range: {
243 |         label1: 'Every minute between minute',
244 |         label2: 'and minute'
245 |       }
246 |     },
247 |     hour: {
248 |       every: {
249 |         label: 'Every hour'
250 |       },
251 |       increment: {
252 |         label1: 'Every',
253 |         label2: 'hour(s)',
254 |       },
255 |       and: {
256 |         label: 'Specific hour (choose one or many)'
257 |       },
258 |       range: {
259 |         label1: 'Every hour between hour',
260 |         label2: 'and hour'
261 |       }
262 |     }
263 |   }
264 | };
265 | 
266 | export type DeepPartial<T> = {
267 |   [P in keyof T]?: DeepPartial<T[P]>;
268 | };
269 | 
270 | export type CronLocalization = DeepPartial<typeof localization>;
271 | 


--------------------------------------------------------------------------------
/src/lib/cron-props.type.ts:
--------------------------------------------------------------------------------
 1 | import { Type } from '@sbzen/cron-core';
 2 | 
 3 | import { CronBaseProps } from './cron-base-props.type';
 4 | import { CronLocalization } from './cron-localization';
 5 | 
 6 | export type CronHostProps<T extends Type> = {
 7 |   localization?: CronLocalization,
 8 |   hideTabs?: boolean,
 9 |   value?: string,
10 |   activeTab?: T,
11 |   tabs?: T[],
12 |   disabled?: boolean,
13 |   renderYearsFrom?: number,
14 |   renderYearsTo?: number,
15 |   onChange?: (cronValue: string) => void,
16 |   onTabChange?: (tab: T) => void
17 | } & CronBaseProps;
18 | 


--------------------------------------------------------------------------------
/src/lib/cron.ts:
--------------------------------------------------------------------------------
1 | export { ReQuartzCron as ReCron } from './quartz';
2 | 


--------------------------------------------------------------------------------
/src/lib/helpers.ts:
--------------------------------------------------------------------------------
 1 | import { Mode } from '@sbzen/cron-core';
 2 | 
 3 | import { DeepPartial, localization, CronLocalization } from './cron-localization';
 4 | 
 5 | export const genSessionId = () => `${Date.now()}_${Math.random()}`;
 6 | 
 7 | export const genClassName = (cssClassPrefix = '', classes: string[], noPrefixClasses: string[] = []) => {
 8 |   const prefixed = classes.filter(c => !!c).map(c => cssClassPrefix + c);
 9 |   return prefixed.concat(noPrefixClasses).join(' ');
10 | };
11 | 
12 | export const genId = (mode: Mode, session: string, extra?: string) => {
13 |   return `${mode}-${extra || ''}${session}`;
14 | };
15 | 
16 | export const getCssClassPrefix = (cssClassPrefix?: string) => cssClassPrefix || '';
17 | 
18 | export const localizeList = (list: { value: string, label: string }[], localizationStore: { [key: string]: string }) => {
19 |   return list.map(v => ({
20 |     ...v,
21 |     label: localizeLabel(v.label, localizationStore)
22 |   }));
23 | }
24 | 
25 | export const localizeLabel = (label: string, localizationStore: { [key: string]: string }) => {
26 |   return localizationStore[label.toLowerCase()]
27 | }
28 | 
29 | export const getLocalization = (input?: CronLocalization) => {
30 |   const args: RawObject[] = [localization];
31 |   if (input) {
32 |     args.push(input);
33 |   }
34 |   return mergeDeep<typeof localization>(...args);
35 | }
36 | 
37 | type RawObject = DeepPartial<{
38 |   [key: string]: string|RawObject;
39 | }>;
40 | const mergeDeep = <T extends RawObject>(...objects: RawObject[]) => {
41 |   return objects.reduce((prev, obj) => {
42 |     Object.keys(obj).forEach(key => {
43 |       const pVal = prev[key];
44 |       const oVal = obj[key];
45 | 
46 |       if (pVal && typeof pVal === 'object' && oVal && typeof oVal === 'object') {
47 |         prev[key] = mergeDeep(pVal, oVal);
48 |       } else {
49 |         prev[key] = oVal;
50 |       }
51 |     });
52 | 
53 |     return prev;
54 |   }, {}) as T;
55 | }
56 | 


--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { Type as Tab } from '@sbzen/cron-core';
2 | export { CronLocalization } from './cron-localization';
3 | export * from './cron';
4 | export * from './unix';
5 | export * from './quartz';
6 | 


--------------------------------------------------------------------------------
/src/lib/quartz/index.ts:
--------------------------------------------------------------------------------
1 | export * from './quartz';


--------------------------------------------------------------------------------
/src/lib/quartz/quartz.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import {
  3 |   CronQuartzUIService,
  4 |   QuartzType,
  5 |   Type,
  6 |   getSegmentsList,
  7 |   getTypeSegments,
  8 |   getQuartzTypes
  9 | } from '@sbzen/cron-core';
 10 | 
 11 | import { getLocalization, genSessionId, genClassName } from './../helpers';
 12 | import { CronHostProps } from './../cron-props.type';
 13 | import {
 14 |   QuartzCronSecond,
 15 |   QuartzCronMinute,
 16 |   QuartzCronHour,
 17 |   QuartzCronMonth,
 18 |   QuartzCronYear,
 19 |   QuartzCronDay
 20 | } from './tabs';
 21 | 
 22 | export type ReQuartzCronProps = CronHostProps<QuartzType>;
 23 | export const ReQuartzCron = ({
 24 |   localization: propLocalization,
 25 |   hideTabs: propHideTabs,
 26 |   value = '',
 27 |   activeTab,
 28 |   tabs = getQuartzTypes(),
 29 |   renderYearsFrom,
 30 |   renderYearsTo,
 31 |   cssClassPrefix,
 32 |   disabled,
 33 |   onTabChange,
 34 |   onChange
 35 | }: ReQuartzCronProps) => {
 36 |   const [tab, setTab] = useState(activeTab || tabs[0]);
 37 |   const [service] = useState(new CronQuartzUIService(renderYearsFrom));
 38 |   const [renderCount, setRenderCount] = useState(0);
 39 |   const [session] = useState(genSessionId());
 40 |   const localization = getLocalization(propLocalization);
 41 |   const hasTabs = !propHideTabs && !!tabs.length;
 42 |   const tabProps = {
 43 |     cssClassPrefix,
 44 |     localization,
 45 |     session,
 46 |     service
 47 |   };
 48 |   const yearTabProps = {
 49 |     ...tabProps,
 50 |     renderYearsFrom,
 51 |     renderYearsTo
 52 |   };
 53 | 
 54 |   useEffect(() => {
 55 |     const shouldUpdate = !!activeTab && activeTab !== tab;
 56 |     shouldUpdate && setTab(activeTab);
 57 |   }, [activeTab]);
 58 |   useEffect(() => () => service.destroy(), [service]);
 59 |   useEffect(() => listenChangas());
 60 |   useEffect(() => service.fillFromExpression(value), [value]);
 61 |   useEffect(() => service.setDisabled(disabled), [disabled]);
 62 | 
 63 |   const listenChangas = () => {
 64 |     const segments = getSegmentsList();
 65 |     return service.listen(segments, (_, segment) => {
 66 |       const shouldApply = getTypeSegments(tab).includes(segment);
 67 |       if (shouldApply) {
 68 |         applyChanges();
 69 |       }
 70 |     });
 71 |   };
 72 | 
 73 |   const genContent = () => {
 74 |     if (tab === Type.SECONDS) {
 75 |       return <QuartzCronSecond {...tabProps}/>;
 76 |     } else if (tab === Type.MINUTES) {
 77 |       return <QuartzCronMinute {...tabProps}/>;
 78 |     } else if (tab === Type.HOURS) {
 79 |       return <QuartzCronHour {...tabProps}/>;
 80 |     } else if (tab === Type.MONTH) {
 81 |       return <QuartzCronMonth {...tabProps}/>;
 82 |     } else if (tab === Type.YEAR) {
 83 |       return <QuartzCronYear {...yearTabProps}/>;
 84 |     } else {
 85 |       return <QuartzCronDay {...tabProps}/>;
 86 |     }
 87 |   };
 88 | 
 89 |   const genTabs = (activeTab: QuartzType) => {
 90 |     const className = genClassName(cssClassPrefix, ['nav', 'nav-tabs', 'mb-2'], ['c-tabs']);
 91 |     return (
 92 |       <ul
 93 |         className={className}
 94 |         role="tablist"
 95 |         aria-label="Cron Generator Tabs">
 96 | 
 97 |         {tabs.map(t => genTab(t, activeTab))}
 98 |       </ul>
 99 |     );
100 |   };
101 | 
102 |   const genTab = (tab: QuartzType, activeTab: QuartzType) => {
103 |     const { tabs: tabsLocalization } = localization;
104 |     const isActive = activeTab === tab;
105 |     const className = genClassName(cssClassPrefix, ['nav-link', isActive ? 'active': ''], [tab, 'c-tab']);
106 |     const tabKey = tab.toLowerCase() as keyof typeof tabsLocalization;
107 | 
108 |     return (
109 |       <li
110 |         key={tab}
111 |         className={genClassName(cssClassPrefix, ['nav-item'], ['c-tab-item'])}>
112 | 
113 |         <button
114 |           role="tab"
115 |           type="button"
116 |           className={className}
117 |           aria-selected={isActive}
118 |           tabIndex={isActive ? 0 : -1}
119 |           onClick={() => changeTab(tab)}>
120 | 
121 |           {tabsLocalization[tabKey]}
122 |         </button>
123 |       </li>
124 |     );
125 |   };
126 | 
127 |   const changeTab = (tab: QuartzType) => {
128 |     setTab(tab);
129 |     if (onTabChange) {
130 |       onTabChange(tab);
131 |     }
132 |   };
133 | 
134 |   const applyChanges = () => {
135 |     const str = service.toString();
136 |     if (str !== value && onChange) {
137 |       onChange(str);
138 |     }
139 |     setRenderCount(renderCount + 1);
140 |   };
141 | 
142 |   return (
143 |     <div className={'c-host c-quartz'}>
144 |       {hasTabs && genTabs(tab)}
145 | 
146 |       <div
147 |         className="c-tab-content"
148 |         style={{ outline: 'none' }}
149 |         role="tabpanel"
150 |         tabIndex={0}
151 |         tab-name={tab}>
152 |         {genContent()}
153 |       </div>
154 |     </div>
155 |   );
156 | };
157 | 
158 | export default ReQuartzCron;
159 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/day/day.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Segment, Mode, Type, getDaysOfWeekCodes, getList } from '@sbzen/cron-core';
  3 | 
  4 | import { genId, getCssClassPrefix, localizeLabel, genClassName, localizeList } from './../../../helpers';
  5 | import { SimpleRange } from './../../../shared';
  6 | import { CronQuartzTabProps } from './../shared';
  7 | 
  8 | export const QuartzCronDay = ({
  9 |   service,
 10 |   session,
 11 |   localization,
 12 |   cssClassPrefix
 13 | }: CronQuartzTabProps) => {
 14 |   const { common, quartz } = localization;
 15 |   const {
 16 |     every,
 17 |     dayOfWeekIncrement,
 18 |     dayOfMonthLastDay,
 19 |     dayOfWeekNTHWeekDayOfMonth,
 20 |     dayOfMonthNearestWeekDayOfMonth,
 21 |     dayOfMonthDaysBeforeEndMonth,
 22 |     dayOfWeekLastNTHDayWeek,
 23 |     dayOfMonthLastDayWeek,
 24 |     dayOfMonthIncrement,
 25 |     dayOfWeekAnd,
 26 |     dayOfWeekRange,
 27 |     dayOfMonthAnd
 28 |   } = quartz.day;
 29 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
 30 |   const api = service.getApi(Type.DAY);
 31 |   const daysOfWeekEvery = getList(Segment.dayOfWeek, true);
 32 |   const daysOfWeek = getList(Segment.dayOfWeek);
 33 |   const daysOfWeekCodes = getDaysOfWeekCodes();
 34 |   const daysOfMonthEvery = getList(Segment.dayOfMonth, true);
 35 |   const daysOfMonth = getList(Segment.dayOfMonth);
 36 |   const limitedDaysOfMonth = daysOfMonthEvery.slice(0, 5);
 37 | 
 38 |   const genEvery = () => (
 39 |     <div className={genClassName(classPrefix, ['form-group'], ['c-every-weekday', 'c-segment'])}>
 40 |       <div className={genClassName(classPrefix, ['form-check'], ['c-every-weekday-check'])}>
 41 |         <input
 42 |           className={genClassName(classPrefix, ['form-check-input'], ['c-every-weekday-option'])}
 43 |           type="radio"
 44 |           id={genId(Mode.EVERY, session, Segment.dayOfWeek)}
 45 |           value={Mode.EVERY}
 46 |           checked={api.isEverySelected()}
 47 |           disabled={service.isDisabled()}
 48 |           onChange={() => api.selectEvery()} />
 49 | 
 50 |         <label
 51 |           className={genClassName(classPrefix, ['form-check-label'], ['c-every-weekday-option-label'])}
 52 |           htmlFor={genId(Mode.EVERY, session, Segment.dayOfWeek)}>
 53 | 
 54 |           {every.label}
 55 |         </label>
 56 |       </div>
 57 |     </div>
 58 |   );
 59 | 
 60 |   const genDayOfWeekIncrement = () => (
 61 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-increment-weekday', 'c-segment'])}>
 62 |       <div className={genClassName(classPrefix, ['form-check'], ['c-increment-weekday-check'])}>
 63 |         <input
 64 |           className={genClassName(classPrefix, ['form-check-input'], ['c-increment-weekday-option'])}
 65 |           type="radio"
 66 |           id={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}
 67 |           value={Mode.INCREMENT}
 68 |           checked={api.isDayOfWeekIncrementSelected()}
 69 |           disabled={service.isDisabled()}
 70 |           onChange={() => api.selectDayOfWeekIncrement()} />
 71 | 
 72 |         <label
 73 |           className={genClassName(classPrefix, ['form-check-label'], ['c-increment-weekday-option-label'])}
 74 |           htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}>
 75 | 
 76 |           {dayOfWeekIncrement.label1}
 77 |         </label>
 78 |       </div>
 79 | 
 80 |       <select
 81 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-weekday-every'])}
 82 |         disabled={api.isDayOfWeekIncrementControlsDisabled()}
 83 |         value={api.getDayOfWeekIncrementPrimary()}
 84 |         onChange={(e) => api.setDayOfWeekIncrementPrimary(e.target.value)}>
 85 | 
 86 |         {daysOfWeekEvery.map(item => {
 87 |           return (
 88 |             <option
 89 |               value={item.value}
 90 |               key={item.value}>
 91 |               {item.value}
 92 |             </option>
 93 |           );
 94 |         })}
 95 |       </select>
 96 | 
 97 |       <label
 98 |         className="c-increment-weekday-option-label2"
 99 |         htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}>
100 |         {dayOfWeekIncrement.label2}
101 |       </label>
102 | 
103 |       <select
104 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-weekday-from'])}
105 |         disabled={api.isDayOfWeekIncrementControlsDisabled()}
106 |         value={api.getDayOfWeekIncrementSecondary()}
107 |         onChange={(e) => api.setDayOfWeekIncrementSecondary(e.target.value)}>
108 | 
109 |         {daysOfWeek.map(item => {
110 |           return (
111 |             <option
112 |               key={item.value}
113 |               value={item.value}>
114 |               {localizeLabel(item.label, common.dayOfWeek)}
115 |             </option>
116 |           );
117 |         })}
118 |       </select>
119 |     </div>
120 |   );
121 | 
122 |   const genDayOfMonthIncrement = () => (
123 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-increment-monthday', 'c-segment'])}>
124 |       <div className={genClassName(classPrefix, ['form-check'], ['c-increment-monthday-check'])}>
125 |         <input
126 |           className={genClassName(classPrefix, ['form-check-input'], ['c-increment-monthday-option'])}
127 |           type="radio"
128 |           id={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}
129 |           value={Mode.INCREMENT}
130 |           checked={api.isDayOfMonthIncrementSelected()}
131 |           disabled={service.isDisabled()}
132 |           onChange={() => api.selectDayOfMonthIncrement()} />
133 | 
134 |         <label
135 |           className={genClassName(classPrefix, ['form-check-label'], ['c-increment-monthday-option-label'])}
136 |           htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}>
137 |           {dayOfMonthIncrement.label1}
138 |         </label>
139 |       </div>
140 | 
141 |       <select
142 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-monthday-every'])}
143 |         disabled={api.isDayOfMonthIncrementControlsDisabled()}
144 |         value={api.getDayOfMonthIncrementPrimary()}
145 |         onChange={(e) => api.setDayOfMonthIncrementPrimary(e.target.value)}>
146 | 
147 |         {daysOfMonth.map(item => {
148 |           return (
149 |             <option
150 |               key={item.value}
151 |               value={item.value}>
152 |               {item.value}
153 |             </option>
154 |           );
155 |         })}
156 |       </select>
157 | 
158 |       <label
159 |         className="c-increment-monthday-option-label2"
160 |         htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}>
161 |         {dayOfMonthIncrement.label2}
162 |       </label>
163 | 
164 |       <select
165 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-monthday-from'])}
166 |         disabled={api.isDayOfMonthIncrementControlsDisabled()}
167 |         value={api.getDayOfMonthIncrementSecondary()}
168 |         onChange={(e) => api.setDayOfMonthIncrementSecondary(e.target.value)}>
169 | 
170 |         {daysOfMonthEvery.map(item => {
171 |           return (
172 |             <option
173 |               key={item.value}
174 |               value={item.value}>
175 |               {localizeLabel(item.label, common.dayOfMonth)}
176 |             </option>
177 |           );
178 |         })}
179 |       </select>
180 | 
181 |       <label
182 |         className="c-increment-monthday-option-label3"
183 |         htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}>
184 |         {dayOfMonthIncrement.label3}
185 |       </label>
186 |     </div>
187 |   );
188 | 
189 |   const genDayOfWeekAnd = () => (
190 |     <div className={genClassName(classPrefix, ['form-group'], ['c-and-weekday', 'c-segment'])}>
191 |       <div className={genClassName(classPrefix, ['form-check'], ['c-and-weekday-check'])}>
192 |         <input
193 |           className={genClassName(classPrefix, ['form-check-input'], ['c-and-weekday-option'])}
194 |           type="radio"
195 |           id={genId(Mode.AND, session, Segment.dayOfWeek)}
196 |           value={Mode.INCREMENT}
197 |           checked={api.isDayOfWeekAndSelected()}
198 |           disabled={service.isDisabled()}
199 |           onChange={() => api.selectDayOfWeekAnd()} />
200 | 
201 |         <label
202 |           className={genClassName(classPrefix, ['form-check-label'], ['c-and-weekday-option-label'])}
203 |           htmlFor={genId(Mode.AND, session, Segment.dayOfWeek)}>
204 |           {dayOfWeekAnd.label}
205 |         </label>
206 |       </div>
207 | 
208 |       <div className={genClassName(classPrefix, ['row', 'pl-3', 'pt-1'], ['c-and-weekday-list'])}>
209 |         {daysOfWeekCodes.map(item => {
210 |           return (
211 |             <div
212 |               className={genClassName(classPrefix, ['col-3', 'col-md-2'], ['c-and-weekday-item'])}
213 |               item-value={item.value}
214 |               key={item.value}>
215 | 
216 |               <div className={genClassName(classPrefix, ['form-check'], ['c-and-weekday-item-check'])}>
217 |                 <input
218 |                   className={genClassName(classPrefix, ['form-check-input'], ['c-and-weekday-item-field'])}
219 |                   type="checkbox"
220 |                   id={genId(Mode.AND, session, Segment.dayOfWeek + item.value)}
221 |                   value={item.value}
222 |                   disabled={api.isDayOfWeekAndControlsDisabled()}
223 |                   checked={api.isSelectedDayOfWeekAndValue(item.value)}
224 |                   onChange={() => api.selectDayOfWeekAndValue(item.value)} />
225 | 
226 |                 <label
227 |                   className={genClassName(classPrefix, ['form-check-label'], ['c-and-weekday-item-label'])}
228 |                   htmlFor={genId(Mode.AND, session, Segment.dayOfWeek + item.value)}>
229 |                   {localizeLabel(item.label, common.dayOfWeek)}
230 |                 </label>
231 |               </div>
232 |             </div>
233 |           );
234 |         })}
235 |       </div>
236 |     </div>
237 |   );
238 | 
239 |   const getDayOfWeekRange = () => (
240 |     <SimpleRange
241 |       cssClassPrefix={classPrefix}
242 |       segmentId={genId(Mode.RANGE, session)}
243 |       checked={api.isDayOfWeekRangeSelected()}
244 |       disabled={service.isDisabled()}
245 |       onSelect={() => api.selectDayOfWeekRange()}
246 |       disabledControls={api.isDayOfWeekRangeControlsDisabled()}
247 |       label1={dayOfWeekRange.label1}
248 |       label2={dayOfWeekRange.label2}
249 |       primaryOptions={localizeList(daysOfWeekCodes, common.dayOfWeek)}
250 |       primaryValue={api.getDayOfWeekRangePrimary()}
251 |       onPrimaryValueChange={api.setDayOfWeekRangePrimary}
252 |       secondaryOptions={localizeList(daysOfWeekCodes, common.dayOfWeek)}
253 |       secondaryValue={api.getDayOfWeekRangeSecondary()}
254 |       onSecondaryValueChange={api.setDayOfWeekRangeSecondary}/>
255 |   );
256 | 
257 |   const genDayOfMonthAnd = () => (
258 |     <div className={genClassName(classPrefix, ['form-group'], ['c-and-monthday', 'c-segment'])}>
259 |       <div className={genClassName(classPrefix, ['form-check'], ['c-and-monthday-check'])}>
260 |         <input
261 |           className={genClassName(classPrefix, ['form-check-input'], ['c-and-monthday-option'])}
262 |           type="radio"
263 |           id={genId(Mode.AND, session, Segment.dayOfMonth)}
264 |           value={Mode.INCREMENT}
265 |           checked={api.isDayOfMonthAndSelected()}
266 |           disabled={service.isDisabled()}
267 |           onChange={() => api.selectDayOfMonthAnd()} />
268 | 
269 |         <label
270 |           className={genClassName(classPrefix, ['form-check-label'], ['c-and-monthday-option-label'])}
271 |           htmlFor={genId(Mode.AND, session, Segment.dayOfMonth)}>
272 |           {dayOfMonthAnd.label}
273 |         </label>
274 |       </div>
275 | 
276 |       <div className={genClassName(classPrefix, ['row', 'pl-3', 'pt-1'], ['c-and-monthday-list'])}>
277 |         {daysOfMonth.map(item => {
278 |           return (
279 |             <div
280 |               className={genClassName(classPrefix, ['col-2', 'col-md-1'], ['c-and-monthday-item'])}
281 |               item-value={item.value}
282 |               key={item.value}>
283 | 
284 |               <div className={genClassName(classPrefix, ['form-check'], ['c-and-monthday-item-check'])}>
285 |                 <input
286 |                   className={genClassName(classPrefix, ['form-check-input'], ['c-and-monthday-item-field'])}
287 |                   type="checkbox"
288 |                   id={genId(Mode.AND, session, Segment.dayOfMonth + item.value)}
289 |                   value={item.value}
290 |                   disabled={api.isDayOfMonthAndControlsDisabled()}
291 |                   checked={api.isSelectedDayOfMonthAndValue(item.value)}
292 |                   onChange={() => api.selectDayOfMonthAndValue(item.value)} />
293 | 
294 |                 <label
295 |                   className={genClassName(classPrefix, ['form-check-label'], ['c-and-monthday-item-label'])}
296 |                   htmlFor={genId(Mode.AND, session, Segment.dayOfMonth + item.value)}>
297 |                   {item.label}
298 |                 </label>
299 |               </div>
300 |             </div>
301 |           );
302 |         })}
303 |       </div>
304 |     </div>
305 |   );
306 | 
307 |   const genDayOfMonthLastDay = () => (
308 |     <div className={genClassName(classPrefix, ['form-group'], ['c-last-monthday', 'c-segment'])}>
309 |       <div className={genClassName(classPrefix, ['form-check'], ['c-last-monthday-check'])}>
310 |         <input
311 |           className={genClassName(classPrefix, ['form-check-input'], ['c-last-monthday-option'])}
312 |           type="radio"
313 |           id={genId(Mode.LAST_DAY, session, Segment.dayOfMonth)}
314 |           value={Mode.LAST_DAY}
315 |           checked={api.isDayOfMonthLastDaySelected()}
316 |           disabled={service.isDisabled()}
317 |           onChange={() => api.selectDayOfMonthLastDay()} />
318 | 
319 |         <label
320 |           className={genClassName(classPrefix, ['form-check-label'], ['c-last-monthday-option-label'])}
321 |           htmlFor={genId(Mode.LAST_DAY, session, Segment.dayOfMonth)}>
322 |           {dayOfMonthLastDay.label}
323 |         </label>
324 |       </div>
325 |     </div>
326 |   );
327 | 
328 |   const genDayOfMonthLastDayWeek = () => (
329 |     <div className={genClassName(classPrefix, ['form-group'], ['c-last-weekday', 'c-segment'])}>
330 |       <div className={genClassName(classPrefix, ['form-check'], ['c-last-weekday-check'])}>
331 |         <input
332 |           className={genClassName(classPrefix, ['form-check-input'], ['c-last-weekday-option'])}
333 |           type="radio"
334 |           id={genId(Mode.LAST_DAY_WEEK, session, Segment.dayOfMonth)}
335 |           value={Mode.LAST_DAY_WEEK}
336 |           checked={api.isDayOfMonthLastDayWeekSelected()}
337 |           disabled={service.isDisabled()}
338 |           onChange={() => api.selectDayOfMonthLastDayWeek()} />
339 | 
340 |         <label
341 |           className={genClassName(classPrefix, ['form-check-label'], ['c-last-weekday-option-label'])}
342 |           htmlFor={genId(Mode.LAST_DAY_WEEK, session, Segment.dayOfMonth)}>
343 |           {dayOfMonthLastDayWeek.label}
344 |         </label>
345 |       </div>
346 |     </div>
347 |   );
348 | 
349 |   const genDayOfWeekLastNTHDayWeek = () => (
350 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-last-nth', 'c-segment'])}>
351 |       <div className={genClassName(classPrefix, ['form-check'], ['c-last-nth-check'])}>
352 |         <input
353 |           className={genClassName(classPrefix, ['form-check-input'], ['c-last-nth-option'])}
354 |           type="radio"
355 |           id={genId(Mode.LAST_NTH_DAY_WEEK, session, Segment.dayOfWeek)}
356 |           value={Mode.LAST_NTH_DAY_WEEK}
357 |           checked={api.isDayOfWeekLastNTHDayWeekSelected()}
358 |           disabled={service.isDisabled()}
359 |           onChange={() => api.selectDayOfWeekLastNTHDayWeek()} />
360 | 
361 |         <label
362 |           className={genClassName(classPrefix, ['form-check-label'], ['c-last-nth-option-label'])}
363 |           htmlFor={genId(Mode.LAST_NTH_DAY_WEEK, session, Segment.dayOfWeek)}>
364 | 
365 |           {dayOfWeekLastNTHDayWeek.label1}
366 |         </label>
367 |       </div>
368 | 
369 |       <select
370 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-last-nth-weekday'])}
371 |         disabled={api.isDayOfWeekLastNTHDayWeekControlsDisabled()}
372 |         value={api.getDayOfWeekLastNTHDayWeekValue()}
373 |         onChange={(e) => api.setDayOfWeekLastNTHDayWeekValue(e.target.value)}>
374 | 
375 |         {daysOfWeek.map(item => {
376 |           return (
377 |             <option
378 |               value={item.value + 'L'}
379 |               key={item.value + 'L'}>
380 |               {localizeLabel(item.label, common.dayOfWeek)}
381 |             </option>
382 |           );
383 |         })}
384 |       </select>
385 | 
386 |       <label
387 |         className="c-last-nth-option-label2"
388 |         htmlFor={genId(Mode.LAST_NTH_DAY_WEEK, session, Segment.dayOfWeek)}>
389 |         {dayOfWeekLastNTHDayWeek.label2}
390 |       </label>
391 |     </div>
392 |   );
393 | 
394 |   const genDayOfMonthDaysBeforeEndMonth = () => (
395 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-day-before-end', 'c-segment'])}>
396 |       <div className={genClassName(classPrefix, ['form-check'], ['c-day-before-end-check'])}>
397 |         <input
398 |           className={genClassName(classPrefix, ['form-check-input'], ['c-day-before-end-option'])}
399 |           type="radio"
400 |           id={genId(Mode.DAYS_BEFORE_END_MONTH, session, Segment.dayOfMonth)}
401 |           value={Mode.DAYS_BEFORE_END_MONTH}
402 |           checked={api.isDayOfMonthDaysBeforeEndMonthSelected()}
403 |           disabled={service.isDisabled()}
404 |           onChange={() => api.selectDayOfMonthDaysBeforeEndMonth()} />
405 |       </div>
406 | 
407 |       <select
408 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-day-before-end-monthday'])}
409 |         disabled={api.isDayOfMonthDaysBeforeEndMonthControlsDisabled()}
410 |         value={api.getDayOfMonthDaysBeforeEndMonthValue()}
411 |         onChange={(e) => api.setDayOfMonthDaysBeforeEndMonthValue(e.target.value)}>
412 | 
413 |         {daysOfMonth.map(item => {
414 |           return (
415 |             <option
416 |               value={'L-' + item.value}
417 |               key={'L-' + item.value}>
418 |               {item.label}
419 |             </option>
420 |           );
421 |         })}
422 |       </select>
423 | 
424 |       <label
425 |         className="c-day-before-end-option-label"
426 |         htmlFor={genId(Mode.DAYS_BEFORE_END_MONTH, session, Segment.dayOfMonth)}>
427 |         {dayOfMonthDaysBeforeEndMonth.label}
428 |       </label>
429 |     </div>
430 |   );
431 | 
432 |   const genDayOfMonthNearestWeekDayOfMonth = () => (
433 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-nearest', 'c-segment'])}>
434 |       <div className={genClassName(classPrefix, ['form-check'], ['c-nearest-check'])}>
435 |         <input
436 |           className={genClassName(classPrefix, ['form-check-input'], ['c-nearest-option'])}
437 |           type="radio"
438 |           id={genId(Mode.NEAREST_WEEKDAY_OF_MONTH, session, Segment.dayOfMonth)}
439 |           value={Mode.NEAREST_WEEKDAY_OF_MONTH}
440 |           checked={api.isDayOfMonthNearestWeekDayOfMonthSelected()}
441 |           disabled={service.isDisabled()}
442 |           onChange={() => api.selectDayOfMonthNearestWeekDayOfMonth()} />
443 | 
444 |         <label
445 |           className={genClassName(classPrefix, ['form-check-label'], ['c-nearest-option-label'])}
446 |           htmlFor={genId(Mode.NEAREST_WEEKDAY_OF_MONTH, session, Segment.dayOfMonth)}>
447 |           {dayOfMonthNearestWeekDayOfMonth.label1}
448 |         </label>
449 |       </div>
450 | 
451 |       <select
452 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-nearest-monthday'])}
453 |         disabled={api.isDayOfMonthNearestWeekDayOfMonthControlsDisabled()}
454 |         value={api.getDayOfMonthNearestWeekDayOfMonthValue()}
455 |         onChange={(e) => api.setDayOfMonthNearestWeekDayOfMonthValue(e.target.value)}>
456 | 
457 |         {daysOfMonthEvery.map(item => {
458 |           return (
459 |             <option
460 |               key={item.value + 'W'}
461 |               value={item.value + 'W'}>
462 |               {localizeLabel(item.label, common.dayOfMonth)}
463 |             </option>
464 |           );
465 |         })}
466 |       </select>
467 | 
468 |       <label
469 |         className="c-nearest-option-label2"
470 |         htmlFor={genId(Mode.NEAREST_WEEKDAY_OF_MONTH, session, Segment.dayOfMonth)}>
471 |         {dayOfMonthNearestWeekDayOfMonth.label2}
472 |       </label>
473 |     </div>
474 |   );
475 | 
476 |   const genDayOfWeekNTHWeekDayOfMonth = () => (
477 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-nth', 'c-segment'])}>
478 |       <div className={genClassName(classPrefix, ['form-check'], ['c-nth-check'])}>
479 |         <input
480 |           className={genClassName(classPrefix, ['form-check-input'], ['c-nth-option'])}
481 |           type="radio"
482 |           id={genId(Mode.NTH_WEEKDAY_OF_MONTH, session, Segment.dayOfWeek)}
483 |           value={Mode.NTH_WEEKDAY_OF_MONTH}
484 |           checked={api.isDayOfWeekNTHWeekDayOfMonthSelected()}
485 |           disabled={service.isDisabled()}
486 |           onChange={() => api.selectDayOfWeekNTHWeekDayOfMonth()} />
487 | 
488 |         <label
489 |           className={genClassName(classPrefix, ['form-check-label'], ['c-nth-option-label'])}
490 |           htmlFor={genId(Mode.NTH_WEEKDAY_OF_MONTH, session, Segment.dayOfWeek)}>
491 |           {dayOfWeekNTHWeekDayOfMonth.label1}
492 |         </label>
493 |       </div>
494 | 
495 |       <select
496 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-nth-every'])}
497 |         disabled={api.isDayOfWeekNTHWeekDayOfMonthControlsDisabled()}
498 |         value={api.getDayOfWeekNTHWeekDayOfMonthPrimaryValue()}
499 |         onChange={(e) => api.setDayOfWeekNTHWeekDayOfMonthPrimaryValue(e.target.value)}>
500 | 
501 |         {limitedDaysOfMonth.map(item => {
502 |           return (
503 |             <option
504 |               value={item.value}
505 |               key={item.value}>
506 |               {localizeLabel(item.label, common.dayOfMonth)}
507 |             </option>
508 |           );
509 |         })}
510 |       </select>
511 | 
512 |       <select
513 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-nth-every-weekday'])}
514 |         disabled={api.isDayOfWeekNTHWeekDayOfMonthControlsDisabled()}
515 |         value={api.getDayOfWeekNTHWeekDayOfMonthSecondaryValue()}
516 |         onChange={(e) => api.setDayOfWeekNTHWeekDayOfMonthSecondaryValue(e.target.value)}>
517 | 
518 |         {daysOfWeek.map(item => {
519 |           return (
520 |             <option
521 |               key={item.value}
522 |               value={item.value}>
523 |               {localizeLabel(item.label, common.dayOfWeek)}
524 |             </option>
525 |           );
526 |         })}
527 |       </select>
528 | 
529 |       <label
530 |         className="c-nth-option-label2"
531 |         htmlFor={genId(Mode.NTH_WEEKDAY_OF_MONTH, session, Segment.dayOfWeek)}>
532 |         {dayOfWeekNTHWeekDayOfMonth.label2}
533 |       </label>
534 |     </div>
535 |   );
536 | 
537 |   return (
538 |     <div>
539 |       {genEvery()}
540 |       {genDayOfWeekIncrement()}
541 |       {genDayOfMonthIncrement()}
542 |       {genDayOfWeekAnd()}
543 |       {getDayOfWeekRange()}
544 |       {genDayOfMonthAnd()}
545 |       {genDayOfMonthLastDay()}
546 |       {genDayOfMonthLastDayWeek()}
547 |       {genDayOfWeekLastNTHDayWeek()}
548 |       {genDayOfMonthDaysBeforeEndMonth()}
549 |       {genDayOfMonthNearestWeekDayOfMonth()}
550 |       {genDayOfWeekNTHWeekDayOfMonth()}
551 |     </div>
552 |   );
553 | }
554 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/hour/hour.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronQuartzTabProps } from './../shared';
 7 | 
 8 | export const QuartzCronHour = ({
 9 |   service,
10 |   session,
11 |   localization,
12 |   cssClassPrefix
13 | }: CronQuartzTabProps) => {
14 |   const { every, increment, and, range } = localization.quartz.hour;
15 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
16 |   const api = service.getApi(Type.HOURS);
17 |   const hourCodes = getList(Segment.hours, true);
18 |   const hoursList = getList(Segment.hours);
19 | 
20 |   const genEvery = () => (
21 |     <SimpleEvery
22 |       cssClassPrefix={classPrefix}
23 |       segmentId={genId(Mode.EVERY, session)}
24 |       checked={api.isEverySelected()}
25 |       disabled={service.isDisabled()}
26 |       onSelect={() => api.selectEvery()}
27 |       label={every.label}/>
28 |   );
29 | 
30 |   const genIncrement = () => (
31 |     <SimpleIncrement
32 |       cssClassPrefix={classPrefix}
33 |       segmentId={genId(Mode.INCREMENT, session)}
34 |       checked={api.isIncrementSelected()}
35 |       disabled={service.isDisabled()}
36 |       disabledControls={api.isIncrementControlsDisabled()}
37 |       onSelect={() => api.selectIncrement()}
38 |       label1={increment.label1}
39 |       label2={increment.label2}
40 |       primaryOptions={hourCodes}
41 |       primaryValue={api.getIncrementPrimaryValue()}
42 |       onPrimaryValueChange={api.setIncrementPrimaryValue}
43 |       secondaryOptions={hoursList}
44 |       secondaryValue={api.getIncrementSecondaryValue()}
45 |       onSecondaryValueChange={api.setIncrementSecondaryValue}/>
46 |   );
47 | 
48 |   const genAnd = () => (
49 |     <SimpleAnd
50 |       cssClassPrefix={classPrefix}
51 |       segmentId={genId(Mode.AND, session)}
52 |       checked={api.isAndSelected()}
53 |       disabled={service.isDisabled()}
54 |       disabledControls={api.isAndControlsDisabled()}
55 |       onSelect={() => api.selectAnd()}
56 |       label={and.label}
57 |       onValueChange={api.selectAndValue}
58 |       isValueSelected={value => api.isSelectedAndValue(value)}
59 |       options={hoursList}/>
60 |   );
61 | 
62 |   const genRange = () => (
63 |     <SimpleRange
64 |       cssClassPrefix={classPrefix}
65 |       segmentId={genId(Mode.RANGE, session)}
66 |       checked={api.isRangeSelected()}
67 |       disabled={service.isDisabled()}
68 |       onSelect={() => api.selectRange()}
69 |       disabledControls={api.isRangeControlsDisabled()}
70 |       label1={range.label1}
71 |       label2={range.label2}
72 |       primaryOptions={hoursList}
73 |       primaryValue={api.getRangePrimaryValue()}
74 |       onPrimaryValueChange={api.setRangePrimaryValue}
75 |       secondaryOptions={hoursList}
76 |       secondaryValue={api.getRangeSecondaryValue()}
77 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
78 |   );
79 | 
80 |   return (
81 |     <div>
82 |       {genEvery()}
83 |       {genIncrement()}
84 |       {genAnd()}
85 |       {genRange()}
86 |     </div>
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './day/day';
2 | export * from './hour/hour';
3 | export * from './minute/minute';
4 | export * from './month/month';
5 | export * from './second/second';
6 | export * from './year/year';


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/minute/minute.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronQuartzTabProps } from './../shared';
 7 | 
 8 | export const QuartzCronMinute = ({
 9 |   service,
10 |   session,
11 |   localization,
12 |   cssClassPrefix
13 | }: CronQuartzTabProps) => {
14 |   const { every, increment, and, range } = localization.quartz.minute;
15 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
16 |   const api = service.getApi(Type.MINUTES);
17 |   const minutesList = getList(Segment.minutes);
18 |   const minuteCodes = getList(Segment.minutes, true);
19 | 
20 |   const genEvery = () => (
21 |     <SimpleEvery
22 |       cssClassPrefix={classPrefix}
23 |       checked={api.isEverySelected()}
24 |       disabled={service.isDisabled()}
25 |       segmentId={genId(Mode.EVERY, session)}
26 |       onSelect={() => api.selectEvery()}
27 |       label={every.label}/>
28 |   );
29 | 
30 |   const genIncrement = () => (
31 |     <SimpleIncrement
32 |       cssClassPrefix={classPrefix}
33 |       segmentId={genId(Mode.INCREMENT, session)}
34 |       checked={api.isIncrementSelected()}
35 |       disabled={service.isDisabled()}
36 |       disabledControls={api.isIncrementControlsDisabled()}
37 |       onSelect={() => api.selectIncrement()}
38 |       label1={increment.label1}
39 |       label2={increment.label2}
40 |       primaryOptions={minuteCodes}
41 |       primaryValue={api.getIncrementPrimaryValue()}
42 |       onPrimaryValueChange={api.setIncrementPrimaryValue}
43 |       secondaryOptions={minutesList}
44 |       secondaryValue={api.getIncrementSecondaryValue()}
45 |       onSecondaryValueChange={api.setIncrementSecondaryValue}/>
46 |   );
47 | 
48 |   const genAnd = () => (
49 |     <SimpleAnd
50 |       cssClassPrefix={classPrefix}
51 |       segmentId={genId(Mode.AND, session)}
52 |       checked={api.isAndSelected()}
53 |       disabled={service.isDisabled()}
54 |       disabledControls={api.isAndControlsDisabled()}
55 |       onSelect={() => api.selectAnd()}
56 |       label={and.label}
57 |       onValueChange={api.selectAndValue}
58 |       isValueSelected={value => api.isSelectedAndValue(value)}
59 |       options={minutesList}/>
60 |   );
61 | 
62 |   const genRange = () => (
63 |     <SimpleRange
64 |       cssClassPrefix={classPrefix}
65 |       segmentId={genId(Mode.RANGE, session)}
66 |       checked={api.isRangeSelected()}
67 |       disabled={service.isDisabled()}
68 |       onSelect={() => api.selectRange()}
69 |       disabledControls={api.isRangeControlsDisabled()}
70 |       label1={range.label1}
71 |       label2={range.label2}
72 |       primaryOptions={minutesList}
73 |       primaryValue={api.getRangePrimaryValue()}
74 |       onPrimaryValueChange={api.setRangePrimaryValue}
75 |       secondaryOptions={minutesList}
76 |       secondaryValue={api.getRangeSecondaryValue()}
77 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
78 |   );
79 | 
80 |   return (
81 |     <div>
82 |       {genEvery()}
83 |       {genIncrement()}
84 |       {genAnd()}
85 |       {genRange()}
86 |     </div>
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/month/month.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getMonthCodes, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { genId, getCssClassPrefix, localizeList } from './../../../helpers';
 5 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 6 | import { SimpleIncrement, CronQuartzTabProps } from './../shared';
 7 | 
 8 | export const QuartzCronMonth = ({
 9 |   service,
10 |   localization,
11 |   session,
12 |   cssClassPrefix
13 | }: CronQuartzTabProps) => {
14 |   const { common, quartz } = localization;
15 |   const { every, increment, and, range } = quartz.month;
16 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
17 |   const api = service.getApi(Type.MONTH);
18 |   const monthCodes = getMonthCodes();
19 |   const monthes = getList(Segment.month);
20 | 
21 |   const genEvery = () => (
22 |     <SimpleEvery
23 |       cssClassPrefix={classPrefix}
24 |       checked={api.isEverySelected()}
25 |       disabled={service.isDisabled()}
26 |       segmentId={genId(Mode.EVERY, session)}
27 |       onSelect={() => api.selectEvery()}
28 |       label={every.label}/>
29 |   );
30 | 
31 |   const genIncrement = () => (
32 |     <SimpleIncrement
33 |       cssClassPrefix={classPrefix}
34 |       segmentId={genId(Mode.INCREMENT, session)}
35 |       checked={api.isIncrementSelected()}
36 |       disabled={service.isDisabled()}
37 |       disabledControls={api.isIncrementControlsDisabled()}
38 |       onSelect={() => api.selectIncrement()}
39 |       label1={increment.label1}
40 |       label2={increment.label2}
41 |       primaryOptions={monthes.map(({ value }, i) => ({ value, label: i + 1 }))}
42 |       primaryValue={api.getIncrementPrimaryValue()}
43 |       onPrimaryValueChange={api.setIncrementPrimaryValue}
44 |       secondaryOptions={localizeList(monthes, common.month)}
45 |       secondaryValue={api.getIncrementSecondaryValue()}
46 |       onSecondaryValueChange={api.setIncrementSecondaryValue}/>
47 |   );
48 | 
49 |   const genAnd = () => (
50 |     <SimpleAnd
51 |       cssClassPrefix={classPrefix}
52 |       gridSize={['col-3', 'col-md-2']}
53 |       segmentId={genId(Mode.AND, session)}
54 |       checked={api.isAndSelected()}
55 |       disabled={service.isDisabled()}
56 |       disabledControls={api.isAndControlsDisabled()}
57 |       onSelect={() => api.selectAnd()}
58 |       label={and.label}
59 |       onValueChange={api.selectAndValue}
60 |       isValueSelected={value => api.isSelectedAndValue(value)}
61 |       options={localizeList(monthCodes, common.month)}/>
62 |   );
63 | 
64 |   const genRange = () => (
65 |     <SimpleRange
66 |       cssClassPrefix={classPrefix}
67 |       segmentId={genId(Mode.RANGE, session)}
68 |       checked={api.isRangeSelected()}
69 |       disabled={service.isDisabled()}
70 |       onSelect={() => api.selectRange()}
71 |       disabledControls={api.isRangeControlsDisabled()}
72 |       label1={range.label1}
73 |       label2={range.label2}
74 |       primaryOptions={localizeList(monthes, common.month)}
75 |       primaryValue={api.getRangePrimaryValue()}
76 |       onPrimaryValueChange={api.setRangePrimaryValue}
77 |       secondaryOptions={localizeList(monthes, common.month)}
78 |       secondaryValue={api.getRangeSecondaryValue()}
79 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
80 |   );
81 | 
82 |   return (
83 |     <div>
84 |       {genEvery()}
85 |       {genIncrement()}
86 |       {genAnd()}
87 |       {genRange()}
88 |     </div>
89 |   );
90 | }
91 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/second/second.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronQuartzTabProps } from './../shared';
 7 | 
 8 | export const QuartzCronSecond = (props: CronQuartzTabProps) => {
 9 |   const { service, localization, session, cssClassPrefix } = props;
10 |   const { every, increment, and, range } = localization.quartz.second;
11 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
12 |   const api = service.getApi(Type.SECONDS);
13 |   const secondCodes = getList(Segment.seconds, true);
14 |   const secondsList = getList(Segment.seconds);
15 | 
16 |   const genEvery = () => (
17 |     <SimpleEvery
18 |       cssClassPrefix={classPrefix}
19 |       segmentId={genId(Mode.EVERY, session)}
20 |       checked={api.isEverySelected()}
21 |       disabled={service.isDisabled()}
22 |       onSelect={() => api.selectEvery()}
23 |       label={every.label}/>
24 |   );
25 | 
26 |   const genIncrement = () => (
27 |     <SimpleIncrement
28 |       cssClassPrefix={classPrefix}
29 |       segmentId={genId(Mode.INCREMENT, session)}
30 |       checked={api.isIncrementSelected()}
31 |       disabled={service.isDisabled()}
32 |       disabledControls={api.isIncrementControlsDisabled()}
33 |       onSelect={() => api.selectIncrement()}
34 |       label1={increment.label1}
35 |       label2={increment.label2}
36 |       primaryOptions={secondCodes}
37 |       primaryValue={api.getIncrementPrimaryValue()}
38 |       onPrimaryValueChange={api.setIncrementPrimaryValue}
39 |       secondaryOptions={secondsList}
40 |       secondaryValue={api.getIncrementSecondaryValue()}
41 |       onSecondaryValueChange={api.setIncrementSecondaryValue}/>
42 |   );
43 | 
44 |   const genAnd = () => (
45 |     <SimpleAnd
46 |       cssClassPrefix={classPrefix}
47 |       segmentId={genId(Mode.AND, session)}
48 |       checked={api.isAndSelected()}
49 |       disabled={service.isDisabled()}
50 |       disabledControls={api.isAndControlsDisabled()}
51 |       onSelect={() => api.selectAnd()}
52 |       label={and.label}
53 |       onValueChange={api.selectAndValue}
54 |       isValueSelected={value => api.isSelectedAndValue(value)}
55 |       options={secondsList}/>
56 |   );
57 | 
58 |   const genRange = () => (
59 |     <SimpleRange
60 |       cssClassPrefix={classPrefix}
61 |       segmentId={genId(Mode.RANGE, session)}
62 |       checked={api.isRangeSelected()}
63 |       disabled={service.isDisabled()}
64 |       onSelect={() => api.selectRange()}
65 |       disabledControls={api.isRangeControlsDisabled()}
66 |       label1={range.label1}
67 |       label2={range.label2}
68 |       primaryOptions={secondsList}
69 |       primaryValue={api.getRangePrimaryValue()}
70 |       onPrimaryValueChange={api.setRangePrimaryValue}
71 |       secondaryOptions={secondsList}
72 |       secondaryValue={api.getRangeSecondaryValue()}
73 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
74 |   );
75 | 
76 |   return (
77 |     <div>
78 |       {genEvery()}
79 |       {genIncrement()}
80 |       {genAnd()}
81 |       {genRange()}
82 |     </div>
83 |   );
84 | }
85 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/shared/increment.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Mode } from '@sbzen/cron-core';
  3 | 
  4 | import { CronBaseProps } from './../../../cron-base-props.type';
  5 | import { genClassName } from '../../../helpers';
  6 | 
  7 | type Props = {
  8 |   checked?: boolean,
  9 |   disabled?: boolean,
 10 |   disabledControls?: boolean,
 11 |   onSelect: () => void,
 12 |   primaryOptions: {
 13 |     label: string|number,
 14 |     value: string
 15 |   }[];
 16 |   primaryValue: string,
 17 |   onPrimaryValueChange: (value: string) => void,
 18 |   secondaryOptions: {
 19 |     label: string|number,
 20 |     value: string
 21 |   }[],
 22 |   secondaryValue: string,
 23 |   onSecondaryValueChange: (value: string) => void,
 24 |   label1: string,
 25 |   label2: string,
 26 |   segmentId: string
 27 | } & CronBaseProps;
 28 | 
 29 | export const SimpleIncrement = ({
 30 |   cssClassPrefix = '',
 31 |   checked = false,
 32 |   disabled = false,
 33 |   disabledControls = false,
 34 |   label1,
 35 |   label2,
 36 |   onSelect,
 37 |   primaryOptions,
 38 |   primaryValue,
 39 |   onPrimaryValueChange,
 40 |   secondaryOptions,
 41 |   secondaryValue,
 42 |   onSecondaryValueChange,
 43 |   segmentId
 44 | }: Props) => (
 45 |   <div className={genClassName(cssClassPrefix, ['form-group', 'form-inline'], ['c-increment', 'c-segment'])}>
 46 |     <div className={genClassName(cssClassPrefix, ['form-check'], ['c-increment-check'])}>
 47 |       <input
 48 |         className={genClassName(cssClassPrefix, ['form-check-input'], ['c-increment-option'])}
 49 |         type="radio"
 50 |         id={segmentId}
 51 |         value={Mode.INCREMENT}
 52 |         checked={checked}
 53 |         disabled={disabled}
 54 |         onChange={onSelect} />
 55 | 
 56 |       <label
 57 |         className={genClassName(cssClassPrefix, ['form-check-label'], ['c-increment-option-label'])}
 58 |         htmlFor={segmentId}>
 59 |         {label1}
 60 |       </label>
 61 |     </div>
 62 | 
 63 |     <select
 64 |       className={genClassName(cssClassPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-every'])}
 65 |       disabled={disabledControls}
 66 |       value={primaryValue}
 67 |       onChange={(e) => onPrimaryValueChange(e.target.value)}>
 68 | 
 69 |       {primaryOptions.map(item => {
 70 |         return (
 71 |           <option
 72 |             key={item.value}
 73 |             value={item.value}>
 74 |             {item.label}
 75 |           </option>
 76 |         );
 77 |       })}
 78 |     </select>
 79 | 
 80 |     <label
 81 |       className="c-increment-option-label2"
 82 |       htmlFor={segmentId}>
 83 |       {label2}
 84 |     </label>
 85 | 
 86 |     <select
 87 |       className={genClassName(cssClassPrefix, ['form-control', 'form-control-sm', 'ml-1'], ['c-increment-from'])}
 88 |       disabled={disabledControls}
 89 |       value={secondaryValue}
 90 |       onChange={(e) => onSecondaryValueChange(e.target.value)}>
 91 | 
 92 |       {secondaryOptions.map(item => {
 93 |         return (
 94 |           <option
 95 |             key={item.value}
 96 |             value={item.value}>
 97 |             {item.label}
 98 |           </option>
 99 |         );
100 |       })}
101 |     </select>
102 |   </div>
103 | );
104 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from './increment';
2 | export * from './tab-props.type';
3 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/shared/tab-props.type.ts:
--------------------------------------------------------------------------------
1 | import { CronQuartzUIService } from '@sbzen/cron-core';
2 | 
3 | import { CronBaseTabProps } from './../../../cron-base-tab-props.type';
4 | 
5 | export type CronQuartzTabProps = CronBaseTabProps<CronQuartzUIService>;
6 | 


--------------------------------------------------------------------------------
/src/lib/quartz/tabs/year/year.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronQuartzTabProps } from './../shared';
 7 | 
 8 | export type CronTabYearProps = {
 9 |   renderYearsFrom?: number,
10 |   renderYearsTo?: number
11 | } & CronQuartzTabProps;
12 | 
13 | export const QuartzCronYear = (props: CronTabYearProps) => {
14 |   const { service, localization, session, cssClassPrefix, renderYearsFrom, renderYearsTo } = props;
15 |   const { every, increment, and, range } = localization.quartz.year;
16 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
17 |   const api = service.getApi(Type.YEAR);
18 |   const yearCodes = getList(Segment.year, true);
19 |   const years = getList(Segment.year, false, renderYearsFrom, renderYearsTo);
20 | 
21 |   const genEvery = () => (
22 |     <SimpleEvery
23 |       cssClassPrefix={classPrefix}
24 |       segmentId={genId(Mode.EVERY, session)}
25 |       checked={api.isEverySelected()}
26 |       disabled={service.isDisabled()}
27 |       onSelect={() => api.selectEvery()}
28 |       label={every.label}/>
29 |   );
30 | 
31 |   const genIncrement = () => (
32 |     <SimpleIncrement
33 |       cssClassPrefix={classPrefix}
34 |       segmentId={genId(Mode.INCREMENT, session)}
35 |       checked={api.isIncrementSelected()}
36 |       disabled={service.isDisabled()}
37 |       disabledControls={api.isIncrementControlsDisabled()}
38 |       onSelect={() => api.selectIncrement()}
39 |       label1={increment.label1}
40 |       label2={increment.label2}
41 |       primaryOptions={yearCodes}
42 |       primaryValue={api.getIncrementPrimaryValue()}
43 |       onPrimaryValueChange={api.setIncrementPrimaryValue}
44 |       secondaryOptions={years}
45 |       secondaryValue={api.getIncrementSecondaryValue()}
46 |       onSecondaryValueChange={api.setIncrementSecondaryValue}/>
47 |   );
48 | 
49 |   const genAnd = () => (
50 |     <SimpleAnd
51 |       cssClassPrefix={classPrefix}
52 |       segmentId={genId(Mode.AND, session)}
53 |       checked={api.isAndSelected()}
54 |       disabled={service.isDisabled()}
55 |       disabledControls={api.isAndControlsDisabled()}
56 |       onSelect={() => api.selectAnd()}
57 |       label={and.label}
58 |       onValueChange={api.selectAndValue}
59 |       isValueSelected={value => api.isSelectedAndValue(value)}
60 |       options={years}/>
61 |   );
62 | 
63 |   const genRange = () => (
64 |     <SimpleRange
65 |       cssClassPrefix={classPrefix}
66 |       segmentId={genId(Mode.RANGE, session)}
67 |       checked={api.isRangeSelected()}
68 |       disabled={service.isDisabled()}
69 |       onSelect={() => api.selectRange()}
70 |       disabledControls={api.isRangeControlsDisabled()}
71 |       label1={range.label1}
72 |       label2={range.label2}
73 |       primaryOptions={years}
74 |       primaryValue={api.getRangePrimaryValue()}
75 |       onPrimaryValueChange={api.setRangePrimaryValue}
76 |       secondaryOptions={years}
77 |       secondaryValue={api.getRangeSecondaryValue()}
78 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
79 |   );
80 | 
81 |   return (
82 |     <div>
83 |       {genEvery()}
84 |       {genIncrement()}
85 |       {genAnd()}
86 |       {genRange()}
87 |     </div>
88 |   );
89 | }
90 | 


--------------------------------------------------------------------------------
/src/lib/shared/and.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Mode } from '@sbzen/cron-core';
 3 | 
 4 | import { genClassName } from './../helpers';
 5 | import { SharedProps } from './props.type';
 6 | 
 7 | type Props = {
 8 |   disabledControls?: boolean;
 9 |   onValueChange: (value: string) => void;
10 |   isValueSelected: (value: string) => boolean;
11 |   options: {
12 |     label: string,
13 |     value: string
14 |   }[],
15 |   label: string;
16 |   gridSize?: string[];
17 | } & SharedProps;
18 | 
19 | export const SimpleAnd = ({
20 |   cssClassPrefix = '',
21 |   checked = false,
22 |   disabled = false,
23 |   disabledControls = false,
24 |   label,
25 |   options,
26 |   onSelect,
27 |   onValueChange,
28 |   isValueSelected,
29 |   gridSize = ['col-2', 'col-md-1'],
30 |   segmentId
31 | }: Props) => (
32 |   <div className={genClassName(cssClassPrefix, ['form-group'], ['c-and', 'c-segment'])}>
33 |     <div className={genClassName(cssClassPrefix, ['form-check'], ['c-and-check'])}>
34 |       <input
35 |         className={genClassName(cssClassPrefix, ['form-check-input'], ['c-and-option'])}
36 |         type="radio"
37 |         id={segmentId}
38 |         value={Mode.AND}
39 |         checked={checked}
40 |         disabled={disabled}
41 |         onChange={onSelect} />
42 | 
43 |       <label
44 |         className={genClassName(cssClassPrefix, ['form-check-label'], ['c-and-option-label'])}
45 |         htmlFor={segmentId}>
46 |         {label}
47 |       </label>
48 |     </div>
49 | 
50 |     <div className={genClassName(cssClassPrefix, ['row', 'pl-3', 'pt-1'], ['c-and-list'])}>
51 |       {options.map(item => {
52 |         return (
53 |           <div
54 |             className={genClassName(cssClassPrefix, gridSize, ['c-and-item'])}
55 |             item-value={item.value}
56 |             key={item.value}>
57 | 
58 |             <div className={genClassName(cssClassPrefix, ['form-check'], ['c-and-item-check'])}>
59 |               <input
60 |                 className={genClassName(cssClassPrefix, ['form-check-input'], ['c-and-item-field'])}
61 |                 type="checkbox"
62 |                 id={`${segmentId}_${item.value}`}
63 |                 value={item.value}
64 |                 disabled={disabledControls}
65 |                 checked={isValueSelected(item.value)}
66 |                 onChange={() => onValueChange(item.value)} />
67 | 
68 |               <label
69 |                 className={genClassName(cssClassPrefix, ['form-check-label'], ['c-and-item-label'])}
70 |                 htmlFor={`${segmentId}_${item.value}`}>
71 |                 {item.label}
72 |               </label>
73 |             </div>
74 |           </div>
75 |         );
76 |       })}
77 |     </div>
78 |   </div>
79 | );
80 | 


--------------------------------------------------------------------------------
/src/lib/shared/every.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Mode } from '@sbzen/cron-core';
 3 | 
 4 | import { genClassName } from './../helpers';
 5 | import { SharedProps } from './props.type';
 6 | 
 7 | type Props = {
 8 |   label: string;
 9 | } & SharedProps;
10 | 
11 | export const SimpleEvery = ({
12 |   cssClassPrefix = '',
13 |   checked = false,
14 |   disabled = false,
15 |   label,
16 |   onSelect,
17 |   segmentId
18 | }: Props) => (
19 |   <div className={genClassName(cssClassPrefix, ['form-group'], ['c-every', 'c-segment'])}>
20 |     <div className={genClassName(cssClassPrefix, ['form-check'], ['c-every-check'])}>
21 |       <input
22 |         className={genClassName(cssClassPrefix, ['form-check-input'], ['c-every-option'])}
23 |         type="radio"
24 |         id={segmentId}
25 |         value={Mode.EVERY}
26 |         checked={checked}
27 |         disabled={disabled}
28 |         onChange={onSelect} />
29 | 
30 |       <label
31 |         className={genClassName(cssClassPrefix, ['form-check-label'], ['c-every-option-label'])}
32 |         htmlFor={segmentId}>
33 |         {label}
34 |       </label>
35 |     </div>
36 |   </div>
37 | );
38 | 


--------------------------------------------------------------------------------
/src/lib/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from './and';
2 | export * from './every';
3 | export * from './range';


--------------------------------------------------------------------------------
/src/lib/shared/props.type.ts:
--------------------------------------------------------------------------------
1 | import { CronBaseProps } from './../cron-base-props.type';
2 | 
3 | export type SharedProps = {
4 |   segmentId: string,
5 |   disabled?: boolean,
6 |   checked?: boolean,
7 |   onSelect: () => void
8 | } & CronBaseProps;
9 | 


--------------------------------------------------------------------------------
/src/lib/shared/range.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Mode } from '@sbzen/cron-core';
  3 | 
  4 | import { genClassName } from './../helpers';
  5 | import { SharedProps } from './props.type';
  6 | 
  7 | type Props = {
  8 |   disabledControls?: boolean;
  9 |   primaryOptions: {
 10 |     label: string,
 11 |     value: string
 12 |   }[];
 13 |   primaryValue: string;
 14 |   onPrimaryValueChange: (value: string) => void;
 15 |   secondaryOptions: {
 16 |     label: string,
 17 |     value: string
 18 |   }[];
 19 |   secondaryValue: string;
 20 |   onSecondaryValueChange: (value: string) => void;
 21 |   label1: string;
 22 |   label2: string;
 23 | } & SharedProps;
 24 | 
 25 | export const SimpleRange = ({
 26 |   cssClassPrefix = '',
 27 |   checked = false,
 28 |   disabled = false,
 29 |   disabledControls = false,
 30 |   label1,
 31 |   label2,
 32 |   onSelect,
 33 |   primaryOptions,
 34 |   primaryValue,
 35 |   onPrimaryValueChange,
 36 |   secondaryOptions,
 37 |   secondaryValue,
 38 |   onSecondaryValueChange,
 39 |   segmentId
 40 | }: Props) => (
 41 |   <div className={genClassName(cssClassPrefix, ['form-group', 'form-inline'], ['c-range', 'c-segment'])}>
 42 |     <div className={genClassName(cssClassPrefix, ['form-check'], ['c-range-check'])}>
 43 | 
 44 |       <input
 45 |         className={genClassName(cssClassPrefix, ['form-check-input'], ['c-range-option'])}
 46 |         type="radio"
 47 |         id={segmentId}
 48 |         value={Mode.RANGE}
 49 |         checked={checked}
 50 |         disabled={disabled}
 51 |         onChange={onSelect}/>
 52 | 
 53 |       <label
 54 |         className={genClassName(cssClassPrefix, ['form-check-label'], ['c-range-option-label'])}
 55 |         htmlFor={segmentId}>
 56 |         {label1}
 57 |       </label>
 58 |     </div>
 59 | 
 60 |     <select
 61 |       className={genClassName(cssClassPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-range-from'])}
 62 |       disabled={disabledControls}
 63 |       value={primaryValue}
 64 |       onChange={(e) => onPrimaryValueChange(e.target.value)}>
 65 | 
 66 |       {primaryOptions.map(item => {
 67 |         return (
 68 |           <option
 69 |             key={item.value}
 70 |             value={item.value}>
 71 |             {item.label}
 72 |           </option>
 73 |         );
 74 |       })}
 75 |     </select>
 76 | 
 77 |     <label
 78 |       className="c-range-option-label2"
 79 |       htmlFor={segmentId}>
 80 |       {label2}
 81 |     </label>
 82 | 
 83 |     <select
 84 |       className={genClassName(cssClassPrefix, ['form-control', 'form-control-sm', 'ml-1'], ['c-range-to'])}
 85 |       disabled={disabledControls}
 86 |       value={secondaryValue}
 87 |       onChange={(e) => onSecondaryValueChange(e.target.value)}>
 88 | 
 89 |       {secondaryOptions.map(item => {
 90 |         return (
 91 |           <option
 92 |             key={item.value}
 93 |             value={item.value}>
 94 |             {item.label}
 95 |           </option>
 96 |         );
 97 |       })}
 98 |     </select>
 99 |   </div>
100 | );
101 | 


--------------------------------------------------------------------------------
/src/lib/unix/index.ts:
--------------------------------------------------------------------------------
1 | export * from './unix';


--------------------------------------------------------------------------------
/src/lib/unix/tabs/day/day.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Segment, getList, getDaysOfWeekCodes, Type, Mode } from '@sbzen/cron-core';
  3 | 
  4 | import { genId, getCssClassPrefix, localizeLabel, genClassName } from './../../../helpers';
  5 | import { CronUnixTabProps } from './../shared';
  6 | 
  7 | export const UnixCronDay = ({
  8 |   service,
  9 |   session,
 10 |   localization,
 11 |   cssClassPrefix
 12 | }: CronUnixTabProps) => {
 13 |   const { common, unix } = localization;
 14 |   const {
 15 |     every,
 16 |     dayOfWeekAnd,
 17 |     dayOfMonthAnd,
 18 |     dayOfWeekIncrement,
 19 |     dayOfMonthIncrement
 20 |   } = unix.day;
 21 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
 22 |   const api = service.getApi<Type.DAY>(Type.DAY);
 23 |   const daysOfWeekEvery = getList(Segment.dayOfWeek, true);
 24 |   const daysOfWeekCodes = getDaysOfWeekCodes();
 25 |   const daysOfMonth = getList(Segment.dayOfMonth);
 26 | 
 27 |   const genEvery = () => (
 28 |     <div className={genClassName(cssClassPrefix, ['form-group'], ['c-every-weekday', 'c-segment'])}>
 29 |       <div className={genClassName(classPrefix, ['form-check'], ['c-every-weekday-check'])}>
 30 |         <input
 31 |           className={genClassName(classPrefix, ['form-check-input'], ['c-every-weekday-option'])}
 32 |           type="radio"
 33 |           id={genId(Mode.EVERY, session, Segment.dayOfWeek)}
 34 |           value={Mode.EVERY}
 35 |           checked={api.isEverySelected()}
 36 |           disabled={service.isDisabled()}
 37 |           onChange={() => api.selectEvery()} />
 38 | 
 39 |         <label
 40 |           className={genClassName(classPrefix, ['form-check-label'], ['c-every-weekday-option-label'])}
 41 |           htmlFor={genId(Mode.EVERY, session, Segment.dayOfWeek)}>
 42 | 
 43 |           {every.label}
 44 |         </label>
 45 |       </div>
 46 |     </div>
 47 |   );
 48 | 
 49 |   const genDayOfWeekIncrement = () => (
 50 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-increment-weekday', 'c-segment'])}>
 51 |       <div className={genClassName(classPrefix, ['form-check'], ['c-increment-weekday-check'])}>
 52 |         <input
 53 |           className={genClassName(classPrefix, ['form-check-input'], ['c-increment-weekday-option'])}
 54 |           type="radio"
 55 |           id={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}
 56 |           value={Mode.INCREMENT}
 57 |           checked={api.isDayOfWeekIncrementSelected()}
 58 |           disabled={service.isDisabled()}
 59 |           onChange={() => api.selectDayOfWeekIncrement()} />
 60 | 
 61 |         <label
 62 |           className={genClassName(classPrefix, ['form-check-label'], ['c-increment-weekday-option-label'])}
 63 |           htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}>
 64 | 
 65 |           {dayOfWeekIncrement.label1}
 66 |         </label>
 67 |       </div>
 68 | 
 69 |       <select
 70 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-weekday-every'])}
 71 |         disabled={api.isDayOfWeekIncrementControlsDisabled()}
 72 |         value={api.getDayOfWeekIncrementPrimary()}
 73 |         onChange={(e) => api.setDayOfWeekIncrementPrimary(e.target.value)}>
 74 | 
 75 |         {daysOfWeekEvery.map(item => {
 76 |           return (
 77 |             <option
 78 |               value={item.value}
 79 |               key={item.value}>
 80 |               {item.value}
 81 |             </option>
 82 |           );
 83 |         })}
 84 |       </select>
 85 | 
 86 |       <label
 87 |         className="c-increment-weekday-option-label2"
 88 |         htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfWeek)}>
 89 |         {dayOfWeekIncrement.label2}
 90 |       </label>
 91 |     </div>
 92 |   );
 93 | 
 94 |   const genDayOfMonthIncrement = () => (
 95 |     <div className={genClassName(classPrefix, ['form-group', 'form-inline'], ['c-increment-monthday', 'c-segment'])}>
 96 |       <div className={genClassName(classPrefix, ['form-check'], ['c-increment-monthday-check'])}>
 97 |         <input
 98 |           className={genClassName(classPrefix, ['form-check-input'], ['c-increment-monthday-option'])}
 99 |           type="radio"
100 |           id={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}
101 |           value={Mode.INCREMENT}
102 |           checked={api.isDayOfMonthIncrementSelected()}
103 |           disabled={service.isDisabled()}
104 |           onChange={() => api.selectDayOfMonthIncrement()} />
105 | 
106 |         <label
107 |           className={genClassName(classPrefix, ['form-check-label'], ['c-increment-monthday-option-label'])}
108 |           htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}>
109 |           {dayOfMonthIncrement.label1}
110 |         </label>
111 |       </div>
112 | 
113 |       <select
114 |         className={genClassName(classPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-monthday-every'])}
115 |         disabled={api.isDayOfMonthIncrementControlsDisabled()}
116 |         value={api.getDayOfMonthIncrementPrimary()}
117 |         onChange={(e) => api.setDayOfMonthIncrementPrimary(e.target.value)}>
118 | 
119 |         {daysOfMonth.map(item => {
120 |           return (
121 |             <option
122 |               key={item.value}
123 |               value={item.value}>
124 |               {item.value}
125 |             </option>
126 |           );
127 |         })}
128 |       </select>
129 | 
130 |       <label
131 |         className="c-increment-monthday-option-label2"
132 |         htmlFor={genId(Mode.INCREMENT, session, Segment.dayOfMonth)}>
133 |         {dayOfMonthIncrement.label2}
134 |       </label>
135 |     </div>
136 |   );
137 | 
138 |   const genDayOfWeekAnd = () => (
139 |     <div className={genClassName(classPrefix, ['form-group'], ['c-and-weekday', 'c-segment'])}>
140 |       <div className={genClassName(classPrefix, ['form-check'], ['c-and-weekday-check'])}>
141 |         <input
142 |           className={genClassName(classPrefix, ['form-check-input'], ['c-and-weekday-option'])}
143 |           type="radio"
144 |           id={genId(Mode.AND, session, Segment.dayOfWeek)}
145 |           value={Mode.INCREMENT}
146 |           checked={api.isDayOfWeekAndSelected()}
147 |           disabled={service.isDisabled()}
148 |           onChange={() => api.selectDayOfWeekAnd()} />
149 | 
150 |         <label
151 |           className={genClassName(classPrefix, ['form-check-label'], ['c-and-weekday-option-label'])}
152 |           htmlFor={genId(Mode.AND, session, Segment.dayOfWeek)}>
153 |           {dayOfWeekAnd.label}
154 |         </label>
155 |       </div>
156 | 
157 |       <div className={genClassName(classPrefix, ['row', 'pl-3', 'pt-1'], ['c-and-weekday-list'])}>
158 |         {daysOfWeekCodes.map(item => {
159 |           return (
160 |             <div
161 |               className={genClassName(classPrefix, ['col-3', 'col-md-2'], ['c-and-weekday-item'])}
162 |               item-value={item.value}
163 |               key={item.value}>
164 | 
165 |               <div className={genClassName(classPrefix, ['form-check'], ['c-and-weekday-item-check'])}>
166 |                 <input
167 |                   className={genClassName(classPrefix, ['form-check-input'], ['c-and-weekday-item-field'])}
168 |                   type="checkbox"
169 |                   id={genId(Mode.AND, session, Segment.dayOfWeek + item.value)}
170 |                   value={item.value}
171 |                   disabled={api.isDayOfWeekAndControlsDisabled()}
172 |                   checked={api.isSelectedDayOfWeekAndValue(item.value)}
173 |                   onChange={() => api.selectDayOfWeekAndValue(item.value)} />
174 | 
175 |                 <label
176 |                   className={genClassName(classPrefix, ['form-check-label'], ['c-and-weekday-item-label'])}
177 |                   htmlFor={genId(Mode.AND, session, Segment.dayOfWeek + item.value)}>
178 |                   {localizeLabel(item.label, common.dayOfWeek)}
179 |                 </label>
180 |               </div>
181 |             </div>
182 |           );
183 |         })}
184 |       </div>
185 |     </div>
186 |   );
187 | 
188 |   const genDayOfMonthAnd = () => (
189 |     <div className={genClassName(classPrefix, ['form-group'], ['c-and-monthday', 'c-segment'])}>
190 |       <div className={genClassName(classPrefix, ['form-check'], ['c-and-monthday-check'])}>
191 |         <input
192 |           className={genClassName(classPrefix, ['form-check-input'], ['c-and-monthday-option'])}
193 |           type="radio"
194 |           id={genId(Mode.AND, session, Segment.dayOfMonth)}
195 |           value={Mode.INCREMENT}
196 |           checked={api.isDayOfMonthAndSelected()}
197 |           disabled={service.isDisabled()}
198 |           onChange={() => api.selectDayOfMonthAnd()} />
199 | 
200 |         <label
201 |           className={genClassName(classPrefix, ['form-check-label'], ['c-and-monthday-option-label'])}
202 |           htmlFor={genId(Mode.AND, session, Segment.dayOfMonth)}>
203 |           {dayOfMonthAnd.label}
204 |         </label>
205 |       </div>
206 | 
207 |       <div className={genClassName(classPrefix, ['row', 'pl-3', 'pt-1'], ['c-and-monthday-list'])}>
208 |         {daysOfMonth.map(item => {
209 |           return (
210 |             <div
211 |               className={genClassName(classPrefix, ['col-2', 'col-md-1'], ['c-and-monthday-item'])}
212 |               item-value={item.value}
213 |               key={item.value}>
214 | 
215 |               <div className={genClassName(classPrefix, ['form-check'], ['c-and-monthday-item-check'])}>
216 |                 <input
217 |                   className={genClassName(classPrefix, ['form-check-input'], ['c-and-monthday-item-field'])}
218 |                   type="checkbox"
219 |                   id={genId(Mode.AND, session, Segment.dayOfMonth + item.value)}
220 |                   value={item.value}
221 |                   disabled={api.isDayOfMonthAndControlsDisabled()}
222 |                   checked={api.isSelectedDayOfMonthAndValue(item.value)}
223 |                   onChange={() => api.selectDayOfMonthAndValue(item.value)} />
224 | 
225 |                 <label
226 |                   className={genClassName(classPrefix, ['form-check-label'], ['c-and-monthday-item-label'])}
227 |                   htmlFor={genId(Mode.AND, session, Segment.dayOfMonth + item.value)}>
228 |                   {item.label}
229 |                 </label>
230 |               </div>
231 |             </div>
232 |           );
233 |         })}
234 |       </div>
235 |     </div>
236 |   );
237 | 
238 |   return (
239 |     <div>
240 |       {genEvery()}
241 |       {genDayOfWeekIncrement()}
242 |       {genDayOfMonthIncrement()}
243 |       {genDayOfWeekAnd()}
244 |       {genDayOfMonthAnd()}
245 |     </div>
246 |   );
247 | };
248 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/hour/hour.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, getList, Mode, Type } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronUnixTabProps } from './../shared';
 7 | 
 8 | export const UnixCronHour = ({
 9 |   service,
10 |   session,
11 |   localization,
12 |   cssClassPrefix
13 | }: CronUnixTabProps) => {
14 |   const { every, increment, and, range } = localization.unix.hour;
15 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
16 |   const api = service.getApi<Type.HOURS>(Type.HOURS);
17 |   const hourCodes = getList(Segment.hours, true);
18 |   const hoursList = getList(Segment.hours);
19 | 
20 |   const genEvery = () => (
21 |     <SimpleEvery
22 |       cssClassPrefix={classPrefix}
23 |       checked={api.isEverySelected()}
24 |       disabled={service.isDisabled()}
25 |       segmentId={genId(Mode.EVERY, session)}
26 |       onSelect={() => api.selectEvery()}
27 |       label={every.label}/>
28 |   );
29 | 
30 |   const genIncrement = () => (
31 |     <SimpleIncrement
32 |       cssClassPrefix={classPrefix}
33 |       segmentId={genId(Mode.INCREMENT, session)}
34 |       checked={api.isIncrementSelected()}
35 |       disabled={service.isDisabled()}
36 |       disabledControls={api.isIncrementControlsDisabled()}
37 |       onSelect={() => api.selectIncrement()}
38 |       label1={increment.label1}
39 |       label2={increment.label2}
40 |       primaryOptions={hourCodes}
41 |       primaryValue={api.getIncrementPrimaryValue()}
42 |       onPrimaryValueChange={api.setIncrementPrimaryValue}/>
43 |   );
44 | 
45 |   const genAnd = () => (
46 |     <SimpleAnd
47 |       cssClassPrefix={classPrefix}
48 |       segmentId={genId(Mode.AND, session)}
49 |       checked={api.isAndSelected()}
50 |       disabled={service.isDisabled()}
51 |       disabledControls={api.isAndControlsDisabled()}
52 |       onSelect={() => api.selectAnd()}
53 |       label={and.label}
54 |       onValueChange={api.selectAndValue}
55 |       isValueSelected={value => api.isSelectedAndValue(value)}
56 |       options={hoursList}/>
57 |   );
58 | 
59 |   const genRange = () => (
60 |     <SimpleRange
61 |       cssClassPrefix={classPrefix}
62 |       segmentId={genId(Mode.RANGE, session)}
63 |       checked={api.isRangeSelected()}
64 |       disabled={service.isDisabled()}
65 |       onSelect={() => api.selectRange()}
66 |       disabledControls={api.isRangeControlsDisabled()}
67 |       label1={range.label1}
68 |       label2={range.label2}
69 |       primaryOptions={hoursList}
70 |       primaryValue={api.getRangePrimaryValue()}
71 |       onPrimaryValueChange={api.setRangePrimaryValue}
72 |       secondaryOptions={hoursList}
73 |       secondaryValue={api.getRangeSecondaryValue()}
74 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
75 |   );
76 | 
77 |   return (
78 |     <div>
79 |       {genEvery()}
80 |       {genIncrement()}
81 |       {genAnd()}
82 |       {genRange()}
83 |     </div>
84 |   );
85 | };
86 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/index.ts:
--------------------------------------------------------------------------------
1 | export * from './day/day';
2 | export * from './hour/hour';
3 | export * from './minute/minute';
4 | export * from './month/month';


--------------------------------------------------------------------------------
/src/lib/unix/tabs/minute/minute.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 5 | import { genId, getCssClassPrefix } from './../../../helpers';
 6 | import { SimpleIncrement, CronUnixTabProps } from './../shared';
 7 | 
 8 | export const UnixCronMinute = ({
 9 |   service,
10 |   session,
11 |   localization,
12 |   cssClassPrefix
13 | }: CronUnixTabProps) => {
14 |   const { every, increment, and, range } = localization.unix.minute;
15 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
16 |   const api = service.getApi<Type.MINUTES>(Type.MINUTES);
17 |   const minuteCodes = getList(Segment.minutes, true);
18 |   const minutesList = getList(Segment.minutes);
19 | 
20 |   const genEvery = () => (
21 |     <SimpleEvery
22 |       cssClassPrefix={classPrefix}
23 |       checked={api.isEverySelected()}
24 |       disabled={service.isDisabled()}
25 |       segmentId={genId(Mode.EVERY, session)}
26 |       onSelect={() => api.selectEvery()}
27 |       label={every.label}/>
28 |   );
29 | 
30 |   const genIncrement = () => (
31 |     <SimpleIncrement
32 |       cssClassPrefix={classPrefix}
33 |       segmentId={genId(Mode.INCREMENT, session)}
34 |       checked={api.isIncrementSelected()}
35 |       disabled={service.isDisabled()}
36 |       disabledControls={api.isIncrementControlsDisabled()}
37 |       onSelect={() => api.selectIncrement()}
38 |       label1={increment.label1}
39 |       label2={increment.label2}
40 |       primaryOptions={minuteCodes}
41 |       primaryValue={api.getIncrementPrimaryValue()}
42 |       onPrimaryValueChange={api.setIncrementPrimaryValue}/>
43 |   );
44 | 
45 |   const genAnd = () => (
46 |     <SimpleAnd
47 |       cssClassPrefix={classPrefix}
48 |       segmentId={genId(Mode.AND, session)}
49 |       checked={api.isAndSelected()}
50 |       disabled={service.isDisabled()}
51 |       disabledControls={api.isAndControlsDisabled()}
52 |       onSelect={() => api.selectAnd()}
53 |       label={and.label}
54 |       onValueChange={api.selectAndValue}
55 |       isValueSelected={value => api.isSelectedAndValue(value)}
56 |       options={minutesList}/>
57 |   );
58 | 
59 |   const genRange = () => (
60 |     <SimpleRange
61 |       cssClassPrefix={classPrefix}
62 |       segmentId={genId(Mode.RANGE, session)}
63 |       checked={api.isRangeSelected()}
64 |       disabled={service.isDisabled()}
65 |       onSelect={() => api.selectRange()}
66 |       disabledControls={api.isRangeControlsDisabled()}
67 |       label1={range.label1}
68 |       label2={range.label2}
69 |       primaryOptions={minutesList}
70 |       primaryValue={api.getRangePrimaryValue()}
71 |       onPrimaryValueChange={api.setRangePrimaryValue}
72 |       secondaryOptions={minutesList}
73 |       secondaryValue={api.getRangeSecondaryValue()}
74 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
75 |   );
76 | 
77 |   return (
78 |     <div>
79 |       {genEvery()}
80 |       {genIncrement()}
81 |       {genAnd()}
82 |       {genRange()}
83 |     </div>
84 |   );
85 | };
86 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/month/month.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Segment, Mode, Type, getMonthCodes, getList } from '@sbzen/cron-core';
 3 | 
 4 | import { genId, getCssClassPrefix, localizeList } from './../../../helpers';
 5 | import { SimpleEvery, SimpleAnd, SimpleRange } from './../../../shared';
 6 | import { SimpleIncrement, CronUnixTabProps } from './../shared';
 7 | 
 8 | export const UnixCronMonth = ({
 9 |   service,
10 |   localization,
11 |   session,
12 |   cssClassPrefix
13 | }: CronUnixTabProps) => {
14 |   const { common, unix } = localization;
15 |   const { every, increment, and, range } = unix.month;
16 |   const classPrefix = getCssClassPrefix(cssClassPrefix);
17 |   const api = service.getApi<Type.MONTH>(Type.MONTH);
18 |   const monthCodes = getMonthCodes();
19 |   const monthes = getList(Segment.month);
20 | 
21 |   const genEvery = () => (
22 |     <SimpleEvery
23 |       cssClassPrefix={classPrefix}
24 |       checked={api.isEverySelected()}
25 |       disabled={service.isDisabled()}
26 |       segmentId={genId(Mode.EVERY, session)}
27 |       onSelect={() => api.selectEvery()}
28 |       label={every.label}/>
29 |   );
30 | 
31 |   const genIncrement = () => (
32 |     <SimpleIncrement
33 |       cssClassPrefix={classPrefix}
34 |       segmentId={genId(Mode.INCREMENT, session)}
35 |       checked={api.isIncrementSelected()}
36 |       disabled={service.isDisabled()}
37 |       disabledControls={api.isIncrementControlsDisabled()}
38 |       onSelect={() => api.selectIncrement()}
39 |       label1={increment.label1}
40 |       label2={increment.label2}
41 |       primaryOptions={monthes.map(({ value }, i) => ({ value, label: i + 1 }))}
42 |       primaryValue={api.getIncrementPrimaryValue()}
43 |       onPrimaryValueChange={api.setIncrementPrimaryValue}/>
44 |   );
45 | 
46 |   const genAnd = () => (
47 |     <SimpleAnd
48 |       cssClassPrefix={classPrefix}
49 |       gridSize={['col-3', 'col-md-2']}
50 |       segmentId={genId(Mode.AND, session)}
51 |       checked={api.isAndSelected()}
52 |       disabled={service.isDisabled()}
53 |       disabledControls={api.isAndControlsDisabled()}
54 |       onSelect={() => api.selectAnd()}
55 |       label={and.label}
56 |       onValueChange={api.selectAndValue}
57 |       isValueSelected={value => api.isSelectedAndValue(value)}
58 |       options={localizeList(monthCodes, common.month)}/>
59 |   );
60 | 
61 |   const genRange = () => (
62 |     <SimpleRange
63 |       cssClassPrefix={classPrefix}
64 |       segmentId={genId(Mode.RANGE, session)}
65 |       checked={api.isRangeSelected()}
66 |       disabled={service.isDisabled()}
67 |       onSelect={() => api.selectRange()}
68 |       disabledControls={api.isRangeControlsDisabled()}
69 |       label1={range.label1}
70 |       label2={range.label2}
71 |       primaryOptions={localizeList(monthes, common.month)}
72 |       primaryValue={api.getRangePrimaryValue()}
73 |       onPrimaryValueChange={api.setRangePrimaryValue}
74 |       secondaryOptions={localizeList(monthes, common.month)}
75 |       secondaryValue={api.getRangeSecondaryValue()}
76 |       onSecondaryValueChange={api.setRangeSecondaryValue}/>
77 |   );
78 | 
79 |   return (
80 |     <div>
81 |       {genEvery()}
82 |       {genIncrement()}
83 |       {genAnd()}
84 |       {genRange()}
85 |     </div>
86 |   );
87 | };
88 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/shared/increment.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Mode } from '@sbzen/cron-core';
 3 | 
 4 | import { CronBaseProps } from './../../../cron-base-props.type';
 5 | import { genClassName } from './../../../helpers';
 6 | 
 7 | type Props = {
 8 |   checked?: boolean;
 9 |   disabled?: boolean;
10 |   disabledControls?: boolean;
11 |   onSelect: () => void;
12 |   primaryOptions: {
13 |     label: string|number,
14 |     value: string
15 |   }[];
16 |   primaryValue: string;
17 |   onPrimaryValueChange: (value: string) => void;
18 |   label1: string;
19 |   label2: string;
20 |   segmentId: string;
21 | } & CronBaseProps;
22 | 
23 | export const SimpleIncrement = ({
24 |   cssClassPrefix = '',
25 |   checked = false,
26 |   disabled = false,
27 |   disabledControls = false,
28 |   label1,
29 |   label2,
30 |   onSelect,
31 |   primaryOptions,
32 |   primaryValue,
33 |   onPrimaryValueChange,
34 |   segmentId
35 | }: Props) => (
36 |   <div className={genClassName(cssClassPrefix, ['form-group', 'form-inline'], ['c-increment', 'c-segment'])}>
37 |     <div className={genClassName(cssClassPrefix, ['form-check'], ['c-increment-check'])}>
38 |       <input
39 |         className={genClassName(cssClassPrefix, ['form-check-input'], ['c-increment-option'])}
40 |         type="radio"
41 |         id={segmentId}
42 |         value={Mode.INCREMENT}
43 |         checked={checked}
44 |         disabled={disabled}
45 |         onChange={onSelect} />
46 | 
47 |       <label
48 |         className={genClassName(cssClassPrefix, ['form-check-label'], ['c-increment-option-label'])}
49 |         htmlFor={segmentId}>
50 |         {label1}
51 |       </label>
52 |     </div>
53 | 
54 |     <select
55 |       className={genClassName(cssClassPrefix, ['form-control', 'form-control-sm', 'mx-1'], ['c-increment-every'])}
56 |       disabled={disabledControls}
57 |       value={primaryValue}
58 |       onChange={(e) => onPrimaryValueChange(e.target.value)}>
59 | 
60 |       {primaryOptions.map(item => {
61 |         return (
62 |           <option
63 |             key={item.value}
64 |             value={item.value}>
65 |             {item.label}
66 |           </option>
67 |         );
68 |       })}
69 |     </select>
70 | 
71 |     <label
72 |       className="c-increment-option-label2"
73 |       htmlFor={segmentId}>
74 |       {label2}
75 |     </label>
76 |   </div>
77 | );
78 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/shared/index.ts:
--------------------------------------------------------------------------------
1 | export * from './increment';
2 | export * from './tab-props.type';
3 | 


--------------------------------------------------------------------------------
/src/lib/unix/tabs/shared/tab-props.type.ts:
--------------------------------------------------------------------------------
1 | import { CronUnixUIService } from '@sbzen/cron-core';
2 | 
3 | import { CronBaseTabProps } from './../../../cron-base-tab-props.type';
4 | 
5 | export type CronUnixTabProps = CronBaseTabProps<CronUnixUIService>;
6 | 


--------------------------------------------------------------------------------
/src/lib/unix/unix.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from 'react';
  2 | import {
  3 |   CronUnixUIService,
  4 |   UnixType,
  5 |   Type,
  6 |   getSegmentsList,
  7 |   getTypeSegments,
  8 |   getUnixTypes
  9 | } from '@sbzen/cron-core';
 10 | 
 11 | import { getLocalization, genSessionId, genClassName } from './../helpers';
 12 | import { CronHostProps } from './../cron-props.type';
 13 | import {
 14 |   UnixCronMinute,
 15 |   UnixCronHour,
 16 |   UnixCronMonth,
 17 |   UnixCronDay
 18 | } from './tabs';
 19 | 
 20 | export type ReUnixCronProps = CronHostProps<UnixType>;
 21 | 
 22 | export const ReUnixCron = ({
 23 |   localization: propLocalization,
 24 |   hideTabs: propHideTabs,
 25 |   tabs: propTabs,
 26 |   value = '',
 27 |   cssClassPrefix,
 28 |   activeTab,
 29 |   disabled,
 30 |   onTabChange,
 31 |   onChange
 32 | }: ReUnixCronProps) => {
 33 |   const tabs = (propTabs || getUnixTypes()).filter(t => ![
 34 |     Type.SECONDS,
 35 |     Type.YEAR
 36 |   ].includes(t));
 37 |   const [tab, setTab] = useState(activeTab || tabs[0]);
 38 |   const [service] = useState(new CronUnixUIService());
 39 |   const [renderCount, setRenderCount] = useState(0);
 40 |   const [session] = useState(genSessionId());
 41 |   const localization = getLocalization(propLocalization);
 42 |   const hasTabs = !propHideTabs && !!tabs.length;
 43 |   const tabProps = {
 44 |     cssClassPrefix,
 45 |     localization,
 46 |     session,
 47 |     service
 48 |   };
 49 | 
 50 |   useEffect(() => {
 51 |     const shouldUpdate = !!activeTab && activeTab !== tab;
 52 |     shouldUpdate && setTab(activeTab);
 53 |   }, [activeTab]);
 54 |   useEffect(() => () => service.destroy(), [service]);
 55 |   useEffect(() => listenChangas());
 56 |   useEffect(() => service.fillFromExpression(value), [value]);
 57 |   useEffect(() => service.setDisabled(disabled), [disabled]);
 58 | 
 59 |   const listenChangas = () => {
 60 |     const segments = getSegmentsList();
 61 |     return service.listen(segments, (_, segment) => {
 62 |       const shouldApply = getTypeSegments(tab).includes(segment);
 63 |       if (shouldApply) {
 64 |         applyChanges();
 65 |       }
 66 |     });
 67 |   };
 68 | 
 69 |   const genContent = () => {
 70 |     if (tab === Type.MINUTES) {
 71 |       return <UnixCronMinute {...tabProps}/>;
 72 |     } else if (tab === Type.HOURS) {
 73 |       return <UnixCronHour {...tabProps}/>;
 74 |     } else if (tab === Type.MONTH) {
 75 |       return <UnixCronMonth {...tabProps}/>;
 76 |     } else {
 77 |       return <UnixCronDay {...tabProps}/>;
 78 |     }
 79 |   };
 80 | 
 81 |   const genTabs = (activeTab: UnixType) => {
 82 |     const className = genClassName(cssClassPrefix, ['nav', 'nav-tabs', 'mb-2'], ['c-tabs']);
 83 |     return (
 84 |       <ul
 85 |         className={className}
 86 |         role="tablist"
 87 |         aria-label="Cron Generator Tabs">
 88 | 
 89 |         {tabs.map(t => genTab(t, activeTab))}
 90 |       </ul>
 91 |     );
 92 |   };
 93 | 
 94 |   const genTab = (tab: UnixType, activeTab: UnixType) => {
 95 |     const { tabs: tabsLocalization } = localization;
 96 |     const isActive = activeTab === tab;
 97 |     const className = genClassName(cssClassPrefix, ['nav-link', isActive ? 'active': ''], [tab, 'c-tab']);
 98 |     const tabKey = tab.toLowerCase() as keyof typeof tabsLocalization;
 99 | 
100 |     return (
101 |       <li
102 |         key={tab}
103 |         className={genClassName(cssClassPrefix, ['nav-item'], ['c-tab-item'])}>
104 | 
105 |         <button
106 |           role="tab"
107 |           type="button"
108 |           className={className}
109 |           aria-selected={isActive}
110 |           tabIndex={isActive ? 0 : -1}
111 |           onClick={() => changeTab(tab)}>
112 | 
113 |           {tabsLocalization[tabKey]}
114 |         </button>
115 |       </li>
116 |     );
117 |   };
118 | 
119 |   const changeTab = (tab: UnixType) => {
120 |     setTab(tab);
121 |     if (onTabChange) {
122 |       onTabChange(tab);
123 |     }
124 |   };
125 | 
126 |   const applyChanges = () => {
127 |     const str = service.toString();
128 |     if (str !== value && onChange) {
129 |       onChange(str);
130 |     }
131 |     setRenderCount(renderCount + 1);
132 |   };
133 | 
134 |   return (
135 |     <div className={'c-host c-unix'}>
136 |       {hasTabs && genTabs(tab)}
137 | 
138 |       <div
139 |         className="c-tab-content"
140 |         style={{ outline: 'none' }}
141 |         role="tabpanel"
142 |         tabIndex={0}
143 |         tab-name={tab}>
144 |         {genContent()}
145 |       </div>
146 |     </div>
147 |   );
148 | };
149 | 
150 | export default ReUnixCron;
151 | 


--------------------------------------------------------------------------------
/src/stories/Introduction.stories.mdx:
--------------------------------------------------------------------------------
  1 | import { Meta } from '@storybook/addon-docs';
  2 | import Code from './assets/code-brackets.svg';
  3 | import Colors from './assets/colors.svg';
  4 | import Comments from './assets/comments.svg';
  5 | import Direction from './assets/direction.svg';
  6 | import Flow from './assets/flow.svg';
  7 | import Plugin from './assets/plugin.svg';
  8 | import Repo from './assets/repo.svg';
  9 | import StackAlt from './assets/stackalt.svg';
 10 | 
 11 | <Meta title="Example/Introduction" />
 12 | 
 13 | <style>
 14 |   {`
 15 |     .subheading {
 16 |       --mediumdark: '#999999';
 17 |       font-weight: 900;
 18 |       font-size: 13px;
 19 |       color: #999;
 20 |       letter-spacing: 6px;
 21 |       line-height: 24px;
 22 |       text-transform: uppercase;
 23 |       margin-bottom: 12px;
 24 |       margin-top: 40px;
 25 |     }
 26 | 
 27 |     .link-list {
 28 |       display: grid;
 29 |       grid-template-columns: 1fr;
 30 |       grid-template-rows: 1fr 1fr;
 31 |       row-gap: 10px;
 32 |     }
 33 | 
 34 |     @media (min-width: 620px) {
 35 |       .link-list {
 36 |         row-gap: 20px;
 37 |         column-gap: 20px;
 38 |         grid-template-columns: 1fr 1fr;
 39 |       }
 40 |     }
 41 | 
 42 |     @media all and (-ms-high-contrast:none) {
 43 |     .link-list {
 44 |         display: -ms-grid;
 45 |         -ms-grid-columns: 1fr 1fr;
 46 |         -ms-grid-rows: 1fr 1fr;
 47 |       }
 48 |     }
 49 | 
 50 |     .link-item {
 51 |       display: block;
 52 |       padding: 20px 30px 20px 15px;
 53 |       border: 1px solid #00000010;
 54 |       border-radius: 5px;
 55 |       transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
 56 |       color: #333333;
 57 |       display: flex;
 58 |       align-items: flex-start;
 59 |     }
 60 | 
 61 |     .link-item:hover {
 62 |       border-color: #1EA7FD50;
 63 |       transform: translate3d(0, -3px, 0);
 64 |       box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
 65 |     }
 66 | 
 67 |     .link-item:active {
 68 |       border-color: #1EA7FD;
 69 |       transform: translate3d(0, 0, 0);
 70 |     }
 71 | 
 72 |     .link-item strong {
 73 |       font-weight: 700;
 74 |       display: block;
 75 |       margin-bottom: 2px;
 76 |     }
 77 | 
 78 |     .link-item img {
 79 |       height: 40px;
 80 |       width: 40px;
 81 |       margin-right: 15px;
 82 |       flex: none;
 83 |     }
 84 | 
 85 |     .link-item span {
 86 |       font-size: 14px;
 87 |       line-height: 20px;
 88 |     }
 89 | 
 90 |     .tip {
 91 |       display: inline-block;
 92 |       border-radius: 1em;
 93 |       font-size: 11px;
 94 |       line-height: 12px;
 95 |       font-weight: 700;
 96 |       background: #E7FDD8;
 97 |       color: #66BF3C;
 98 |       padding: 4px 12px;
 99 |       margin-right: 10px;
100 |       vertical-align: top;
101 |     }
102 | 
103 |     .tip-wrapper {
104 |       font-size: 13px;
105 |       line-height: 20px;
106 |       margin-top: 40px;
107 |       margin-bottom: 40px;
108 |     }
109 | 
110 |     .tip-wrapper code {
111 |       font-size: 12px;
112 |       display: inline-block;
113 |     }
114 |   `}
115 | </style>
116 | 
117 | # Welcome to Storybook
118 | 
119 | Storybook helps you build UI components in isolation from your app's business logic, data, and context.
120 | That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
121 | 
122 | Browse example stories now by navigating to them in the sidebar.
123 | View their code in the `stories` directory to learn how they work.
124 | We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
125 | 
126 | <div className="subheading">Configure</div>
127 | 
128 | <div className="link-list">
129 |   <a
130 |     className="link-item"
131 |     href="https://storybook.js.org/docs/react/addons/addon-types"
132 |     target="_blank"
133 |   >
134 |     <img src={Plugin} alt="plugin" />
135 |     <span>
136 |       <strong>Presets for popular tools</strong>
137 |       Easy setup for TypeScript, SCSS and more.
138 |     </span>
139 |   </a>
140 |   <a
141 |     className="link-item"
142 |     href="https://storybook.js.org/docs/react/configure/webpack"
143 |     target="_blank"
144 |   >
145 |     <img src={StackAlt} alt="Build" />
146 |     <span>
147 |       <strong>Build configuration</strong>
148 |       How to customize webpack and Babel
149 |     </span>
150 |   </a>
151 |   <a
152 |     className="link-item"
153 |     href="https://storybook.js.org/docs/react/configure/styling-and-css"
154 |     target="_blank"
155 |   >
156 |     <img src={Colors} alt="colors" />
157 |     <span>
158 |       <strong>Styling</strong>
159 |       How to load and configure CSS libraries
160 |     </span>
161 |   </a>
162 |   <a
163 |     className="link-item"
164 |     href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
165 |     target="_blank"
166 |   >
167 |     <img src={Flow} alt="flow" />
168 |     <span>
169 |       <strong>Data</strong>
170 |       Providers and mocking for data libraries
171 |     </span>
172 |   </a>
173 | </div>
174 | 
175 | <div className="subheading">Learn</div>
176 | 
177 | <div className="link-list">
178 |   <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
179 |     <img src={Repo} alt="repo" />
180 |     <span>
181 |       <strong>Storybook documentation</strong>
182 |       Configure, customize, and extend
183 |     </span>
184 |   </a>
185 |   <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
186 |     <img src={Direction} alt="direction" />
187 |     <span>
188 |       <strong>In-depth guides</strong>
189 |       Best practices from leading teams
190 |     </span>
191 |   </a>
192 |   <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
193 |     <img src={Code} alt="code" />
194 |     <span>
195 |       <strong>GitHub project</strong>
196 |       View the source and add issues
197 |     </span>
198 |   </a>
199 |   <a className="link-item" href="https://discord.gg/storybook" target="_blank">
200 |     <img src={Comments} alt="comments" />
201 |     <span>
202 |       <strong>Discord chat</strong>
203 |       Chat with maintainers and the community
204 |     </span>
205 |   </a>
206 | </div>
207 | 
208 | <div className="tip-wrapper">
209 |   <span className="tip">Tip</span>Edit the Markdown in{' '}
210 |   <code>stories/Introduction.stories.mdx</code>
211 | </div>
212 | 


--------------------------------------------------------------------------------
/src/stories/assets/code-brackets.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/colors.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/colors</title><g id="illustration/colors" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><circle id="Oval" cx="23.763" cy="16.192" r="13.271" fill="#FC521F" opacity=".6"/><circle id="Oval-Copy" cx="15.468" cy="32.308" r="13.271" fill="#66BF3C" opacity=".6"/><path id="Combined-Shape" fill="#FF5F95" d="M15.4683651,19.0362231 C21.5434817,19.0362231 26.6652087,23.1181689 28.2404554,28.6889694 C26.8420385,29.1906678 25.3344184,29.4637769 23.7630101,29.4637769 C17.6878936,29.4637769 12.5661666,25.3818311 10.9909199,19.8110306 C12.3898993,19.3092302 13.8972501,19.0362231 15.4683651,19.0362231 Z"/><circle id="Oval-Copy-2" cx="32.532" cy="32.308" r="13.271" fill="#1EA7FD" opacity=".6"/><path id="Combined-Shape" fill="#87E6E5" d="M24.00025,22.1417324 C26.897967,24.5762286 28.7397972,28.2268506 28.7397972,32.3076552 C28.7397972,36.3884597 26.897967,40.0390817 24.00025,42.4735779 C21.1018087,40.038637 19.2602028,36.3882111 19.2602028,32.3076552 C19.2602028,28.2815316 21.0530043,24.6741393 23.8838362,22.2402492 Z"/><path id="Combined-Shape" fill="#FBD178" d="M32.5316349,19.0362231 C33.9415155,19.0362231 35.3000478,19.2560712 36.5748203,19.6633557 C35.0489179,25.3104816 29.8909911,29.4637769 23.7630101,29.4637769 C22.3527608,29.4637769 20.9938866,29.2438138 19.7188247,28.8363247 C21.2451195,23.1900077 26.403293,19.0362231 32.5316349,19.0362231 Z"/><path id="Combined-Shape" fill="#FFF" d="M24.00025,22.1417324 L24.0124326,22.1519799 C24.1747744,22.288701 24.3337918,22.4292434 24.4893463,22.5734686 L24.3896855,22.4820008 C24.4671836,22.552408 24.5438453,22.6237194 24.619654,22.6959185 L24.4893463,22.5734686 C24.5690639,22.6473803 24.6478719,22.7222591 24.7257519,22.7980864 L24.619654,22.6959185 C24.6907654,22.7636441 24.7611262,22.8321506 24.8307226,22.9014245 L24.7257519,22.7980864 C24.8120661,22.8821258 24.8972403,22.9673303 24.981249,23.0536745 L24.8307226,22.9014245 C24.9073006,22.9776475 24.9829531,23.0547994 25.0576619,23.132862 L25.057852,23.1330605 C25.3140855,23.4007967 25.559391,23.679459 25.7928375,23.9681079 L25.7230574,23.8825538 C25.7985998,23.9743942 25.8729325,24.0672672 25.9460311,24.1611484 L25.7928375,23.9681079 C25.8624256,24.0541514 25.93096,24.1410823 25.998421,24.228881 L25.9460311,24.1611484 C26.0074362,24.2400115 26.0679704,24.319586 26.1276194,24.3998576 L25.998421,24.228881 C26.0663495,24.317288 26.1331896,24.4065749 26.1989214,24.4967216 L26.1276194,24.3998576 C26.204848,24.5037867 26.2805926,24.6088841 26.3548219,24.7151187 L26.1989214,24.4967216 C26.2678555,24.59126 26.3355706,24.6867441 26.4020436,24.7831507 L26.3548219,24.7151187 C26.4130013,24.798383 26.4702498,24.8823459 26.5265523,24.9669921 L26.4020436,24.7831507 C26.4678788,24.8786322 26.5324956,24.9750187 26.5958716,25.0722875 L26.5959296,25.0723765 C26.736338,25.2878741 26.870709,25.5077955 26.9987399,25.7318073 L26.9410662,25.6319089 C26.9973106,25.7283602 27.0523736,25.8255849 27.1062352,25.9235633 L26.9987399,25.7318073 C27.0539848,25.8284676 27.1080492,25.9258895 27.1609136,26.0240532 L27.1606656,26.0235927 C27.2696676,26.2259984 27.3733426,26.4310837 27.4717677,26.6391379 L27.4715275,26.6386302 C27.5541941,26.8133735 27.6329386,26.9896914 27.7079006,27.1679911 C27.7630163,27.299081 27.8161443,27.431391 27.8671831,27.5647345 L27.804312,27.4036517 C27.8391482,27.4912057 27.8730792,27.5792182 27.9060936,27.6676774 L27.8671831,27.5647345 C27.906613,27.6677486 27.9447959,27.7713796 27.9817136,27.8756091 L27.9060936,27.6676774 C27.946474,27.7758735 27.9854831,27.884738 28.0230997,27.9942498 L27.9817136,27.8756091 C28.0144978,27.9681688 28.0462842,28.0612004 28.0770597,28.1546911 L28.0230997,27.9942498 C28.0618265,28.1069941 28.0990774,28.2204244 28.1348294,28.3345177 L28.0770597,28.1546911 C28.1112208,28.2584663 28.1441365,28.3628071 28.175789,28.4676958 L28.1756797,28.4673338 L28.2408136,28.6893554 C28.2284694,28.6937793 28.2161167,28.6981854 28.2037557,28.7025737 L28.2404554,28.6889694 C27.9517707,28.7925384 27.6584322,28.8863659 27.3608394,28.97006 L27.3609965,28.9702524 C27.0695498,29.0519815 26.7741843,29.1241944 26.4751174,29.1863314 L26.5385665,29.1730829 C26.3901218,29.2046704 26.2407589,29.2337757 26.0905233,29.2603535 L26.4751174,29.1863314 C26.3367402,29.215082 26.1975707,29.2416755 26.0576458,29.2660754 L26.0905233,29.2603535 C25.9366833,29.2875689 25.7819282,29.312134 25.6263069,29.334 L26.0576458,29.2660754 C25.9017815,29.2932549 25.7449801,29.3177127 25.5872928,29.3393985 L25.6263069,29.334 C25.493366,29.3526793 25.3597929,29.3693888 25.2256182,29.3840982 L25.5872928,29.3393985 C25.4326976,29.360659 25.277251,29.3792552 25.1210012,29.3951396 L25.2256182,29.3840982 C25.0570566,29.4025774 24.8875455,29.4178998 24.7171453,29.4300052 L25.1210012,29.3951396 C24.9661341,29.4108835 24.810478,29.4239634 24.6540799,29.4343333 L24.7171453,29.4300052 C24.5612618,29.4410793 24.4046342,29.4494611 24.2473088,29.4551045 L24.6540799,29.4343333 C24.5098436,29.4438967 24.3649762,29.4511552 24.2195147,29.4560724 L24.2473088,29.4551045 C24.0865878,29.4608697 23.9251385,29.4637769 23.7630101,29.4637769 L23.3130142,29.4562912 C23.2993121,29.4558347 23.2856153,29.4553574 23.2719237,29.4548593 C22.9596275,29.4434959 22.6502324,29.4213577 22.3439491,29.3888006 L22.3886972,29.3934808 C22.2468147,29.3788837 22.105595,29.3620515 21.9650736,29.3430199 L22.3439491,29.3888006 C22.1914515,29.3725905 22.0397254,29.3537976 21.8888152,29.3324664 L21.9650736,29.3430199 C21.8025527,29.3210088 21.6409661,29.2960557 21.4803691,29.2682161 L21.8888152,29.3324664 C21.7352182,29.3107553 21.5824665,29.2864149 21.4306071,29.2594919 L21.4803691,29.2682161 C21.3506285,29.2457255 21.2215338,29.221351 21.0931142,29.1951218 L21.4306071,29.2594919 C21.2772401,29.2323016 21.1247833,29.2024774 20.973285,29.1700676 L21.0931142,29.1951218 C20.9267071,29.1611338 20.7614335,29.1240315 20.5973571,29.0838786 L20.973285,29.1700676 C20.825476,29.138447 20.6785795,29.1043653 20.5326403,29.0678674 L20.5973571,29.0838786 C20.4596684,29.0501832 20.3228227,29.0143396 20.1868576,28.9763851 L20.5326403,29.0678674 C20.3930822,29.0329653 20.2543997,28.9958536 20.1166319,28.9565718 L20.1169729,28.956669 L19.7188247,28.8363247 L19.7188247,28.8363247 L19.7880988,28.5894836 C19.8166627,28.4914193 19.8463277,28.3938241 19.8770797,28.2967124 L19.8480041,28.389868 C19.888904,28.2573207 19.931824,28.1256601 19.9767281,27.9949221 L19.8770797,28.2967124 C19.9117081,28.1873592 19.9477148,28.0786191 19.9850793,27.9705124 L19.9853117,27.9700125 C20.1152243,27.5939638 20.2618428,27.2250995 20.4240731,26.8647811 L20.345088,27.0439391 C20.3899401,26.9402428 20.4360767,26.8372321 20.4834778,26.7349269 L20.4240731,26.8647811 C20.461061,26.78263 20.4988604,26.7009231 20.5374612,26.6196707 L20.4834778,26.7349269 C20.5344734,26.6248636 20.5869326,26.515617 20.6408302,26.4072119 L20.5374612,26.6196707 C20.5871241,26.5151329 20.6381134,26.4113474 20.6904074,26.308336 L20.6408302,26.4072119 C20.681671,26.3250682 20.7233378,26.2434076 20.7658197,26.1622412 L20.7658807,26.1619302 C20.8435258,26.013775 20.923959,25.866962 21.0070529,25.7218685 C21.2050227,25.3759931 21.4182299,25.0398756 21.6456589,24.7144306 L21.5286537,24.8848257 C21.5876708,24.7975143 21.6476996,24.7109431 21.7087233,24.6251289 L21.6456589,24.7144306 C21.6993229,24.6376387 21.7537788,24.5614411 21.8090146,24.4858495 L21.7087233,24.6251289 C21.7826333,24.5211934 21.8580028,24.4183683 21.9348018,24.3166836 L21.8090146,24.4858495 C21.8722751,24.3992759 21.9365587,24.3134973 22.0018475,24.2285315 L22.0016895,24.2288802 C22.3179789,23.8171232 22.6576794,23.4247699 23.0189296,23.053491 L22.8296293,23.2521975 C22.9033796,23.1732135 22.9780829,23.095131 23.0537208,23.0179683 L23.0189296,23.053491 C23.083529,22.9870982 23.1488175,22.9213793 23.2147836,22.8563459 L23.0537208,23.0179683 C23.131055,22.9390752 23.2093662,22.8611436 23.2886348,22.7841931 L23.2147836,22.8563459 C23.2821211,22.7899605 23.3501645,22.7242893 23.4189017,22.6593447 L23.2886348,22.7841931 C23.3852399,22.6904132 23.4832671,22.5980904 23.582681,22.5072602 L23.4189017,22.6593447 C23.4912637,22.5909753 23.5643945,22.523411 23.6382797,22.4566663 L23.582681,22.5072602 C23.6715916,22.4260264 23.7616113,22.3459865 23.8527148,22.2671658 L23.8525967,22.2671923 C23.8915062,22.2336043 23.9304941,22.2002638 23.9696766,22.1671464 L24.00025,22.1417324 Z"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/comments.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/direction.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/flow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/plugin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/repo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/assets/stackalt.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>


--------------------------------------------------------------------------------
/src/stories/quartz-cron.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, Fragment } from 'react';
 2 | import { Story, ComponentMeta } from '@storybook/react';
 3 | 
 4 | import { ReQuartzCron, ReQuartzCronProps, Tab } from './../lib';
 5 | 
 6 | const Wrapper = (args: ReQuartzCronProps) => {
 7 |   const [value, setValue] = useState(args.value);
 8 | 
 9 |   useEffect(() => setValue(args.value), [args.value])
10 | 
11 |   return (
12 |     <Fragment>
13 |       <input className="form-control mb-2" readOnly value={value}/>
14 |       <ReQuartzCron {...args} value={value} onChange={setValue}/>
15 |     </Fragment>
16 |   );
17 | };
18 | 
19 | export default {
20 |   title: 'ReQuartzCron',
21 |   component: ReQuartzCron,
22 |   argTypes: {
23 |     tabs: {
24 |       control: 'inline-check',
25 |       options: [
26 |         Tab.SECONDS,
27 |         Tab.MINUTES,
28 |         Tab.HOURS,
29 |         Tab.MONTH,
30 |         Tab.DAY,
31 |         Tab.YEAR
32 |       ]
33 |     },
34 |     activeTab: {
35 |       control: 'inline-radio',
36 |       options: [
37 |         Tab.SECONDS,
38 |         Tab.MINUTES,
39 |         Tab.HOURS,
40 |         Tab.MONTH,
41 |         Tab.DAY,
42 |         Tab.YEAR
43 |       ]
44 |     }
45 |   }
46 | } as ComponentMeta<typeof ReQuartzCron>;
47 | 
48 | const Template: Story<ReQuartzCronProps> = args => <Wrapper {...args} />;
49 | export const Default = Template.bind({});
50 | Default.args = {
51 |   value: '* * * * * * *'
52 | };
53 | 


--------------------------------------------------------------------------------
/src/stories/unix-cron.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, Fragment } from 'react';
 2 | import { Story, ComponentMeta } from '@storybook/react';
 3 | 
 4 | import { ReUnixCron, ReUnixCronProps, Tab } from './../lib';
 5 | 
 6 | const Wrapper = (args: ReUnixCronProps) => {
 7 |   const [value, setValue] = useState(args.value);
 8 | 
 9 |   useEffect(() => setValue(args.value), [args.value])
10 | 
11 |   return (
12 |     <Fragment>
13 |       <input className="form-control mb-2" readOnly value={value}/>
14 |       <ReUnixCron {...args} value={value} onChange={setValue}/>
15 |     </Fragment>
16 |   );
17 | };
18 | 
19 | export default {
20 |   title: 'ReUnixCron',
21 |   component: ReUnixCron,
22 |   argTypes: {
23 |     tabs: {
24 |       control: 'inline-check',
25 |       options: [
26 |         Tab.MINUTES,
27 |         Tab.HOURS,
28 |         Tab.MONTH,
29 |         Tab.DAY
30 |       ]
31 |     },
32 |     activeTab: {
33 |       control: 'inline-radio',
34 |       options: [
35 |         Tab.MINUTES,
36 |         Tab.HOURS,
37 |         Tab.MONTH,
38 |         Tab.DAY
39 |       ]
40 |     }
41 |   }
42 | } as ComponentMeta<typeof ReUnixCron>;
43 | 
44 | const Template: Story<ReUnixCronProps> = args => <Wrapper {...args} />;
45 | export const Default = Template.bind({});
46 | Default.args = {
47 |   value: '0 0 1 2,4 *'
48 | };
49 | 


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "sourceMap": false,
 4 |     "declaration": true,
 5 |     "moduleResolution": "node",
 6 |     "baseUrl": "./src/lib",
 7 |     "target": "es2015",
 8 |     "module": "esnext",
 9 |     "lib": ["es2017", "dom"],
10 |     "resolveJsonModule": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "forceConsistentCasingInFileNames": true,
14 |     "strict": true,
15 |     "jsx": "react",
16 |     "noImplicitOverride": true,
17 |     "noPropertyAccessFromIndexSignature": true,
18 |     "noImplicitReturns": true,
19 |     "noFallthroughCasesInSwitch": true,
20 |     "paths": {
21 |       "@sbzen/re-cron": ["./dist"]
22 |     }
23 |   },
24 |   "exclude": ["node_modules", "dist"]
25 | }
26 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.base.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "dist"
 5 |   },
 6 |   "include": [
 7 |     "src/lib/**/*.ts",
 8 |     "src/lib/**/*.tsx"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------