react-cron-generator 2.0.15 → 2.0.16

package/README.md

@@ -85,6 +85,12 @@ const options = {
 
 ```
 
+## Importables
+
+  Cron - The react Cron component. - Default  
+  CronProp - Cron component types.  
+  cronsture - Cronsture/i18 - [cronstrue](https://www.npmjs.com/package/cronstrue)  
+
 
 ## Release notes 2.x.x
 1. Build Procedure updated

package/build/cron.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HeaderKeyType } from './meta';
 import './cron-builder.css';
-interface CronProp {
+export interface CronProp {
     value?: string;
     onChange(val: string, text: string): void;
     showResultText: boolean;

package/build/day-select/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type DaySelectProp = {
+    disabled?: boolean;
+    onChange(value: null | string): void;
+    value: string;
+    multi?: false;
+} | {
+    multi: true;
+    disabled?: boolean;
+    onChange(value: string[]): void;
+    value: string[];
+};
+declare const DaySelect: React.FunctionComponent<DaySelectProp>;
+export default DaySelect;

package/build/index.d.ts

@@ -1,4 +1,6 @@
-import Cron from './cron';
+import Cron, { CronProp } from "./cron";
 import { HEADER } from './meta';
-export { HEADER };
+import cronstrue from "cronstrue/i18n";
+export { HEADER, cronstrue };
+export type { CronProp };
 export default Cron;

package/build/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 
 var cronstrueI18n = {exports: {}};
 
@@ -8142,6 +8142,46 @@ const WeeklyCron = (props) => {
     return (jsxs("div", Object.assign({ className: "container-fluid" }, { children: [jsxs("div", Object.assign({ className: "well well-small row" }, { children: [jsx("div", Object.assign({ className: "span6 col-sm-6" }, { children: jsxs("div", Object.assign({ className: "text_align_left" }, { children: [jsx("input", { id: "mon-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "MON", onChange: onCheck, checked: (props.value[5].search('MON') !== -1) ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'mon-checkbox' }, { children: translateFn('Monday') })), jsx("br", {}), jsx("input", { id: "wed-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "WED", onChange: onCheck, checked: props.value[5].search('WED') !== -1 ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'wed-checkbox' }, { children: translateFn('Wednesday') })), jsx("br", {}), jsx("input", { id: "fri-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "FRI", onChange: onCheck, checked: (props.value[5].search('FRI') !== -1) ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'fri-checkbox' }, { children: translateFn('Friday') })), jsx("br", {}), jsx("input", { id: "sun-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "SUN", onChange: onCheck, checked: props.value[5].search('SUN') !== -1 ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'sun-checkbox' }, { children: translateFn('Sunday') }))] })) })), jsxs("div", Object.assign({ className: "span6 col-sm-6" }, { children: [jsxs("div", Object.assign({ className: "text_align_left" }, { children: [jsx("input", { id: "tue-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "TUE", onChange: onCheck, checked: props.value[5].search('TUE') !== -1 ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'tue-checkbox' }, { children: translateFn('Tuesday') })), jsx("br", {}), jsx("input", { id: "thu-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "THU", onChange: onCheck, checked: props.value[5].search('THU') !== -1 ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'thu-checkbox' }, { children: translateFn('Thursday') })), jsx("br", {}), jsx("input", { id: "sat-checkbox", className: 'min_height_auto cursor_pointer', type: "checkbox", value: "SAT", onChange: onCheck, checked: props.value[5].search('SAT') !== -1 ? true : false, disabled: props.disabled }), jsx("label", Object.assign({ className: 'cursor_pointer', htmlFor: 'sat-checkbox' }, { children: translateFn('Saturday') }))] })), jsx("br", {}), jsx("br", {})] }))] })), translateFn('Start time'), jsx(HourSelect, { onChange: onAtHourChange, value: props.value[2], disabled: props.disabled }), jsx(MinutesSelect, { onChange: onAtMinuteChange, value: props.value[1], disabled: props.disabled })] })));
 };
 
+const DaySelect = ({ disabled, multi = false, onChange, value, }) => {
+    const [show, setShow] = useState(false);
+    const ref = useRef(null);
+    const handleClickOutside = useCallback((event) => {
+        if (show && ref.current && !ref.current.contains(event.target)) {
+            setShow(false);
+        }
+    }, [ref, show]);
+    useEffect(() => {
+        // Bind the event listener
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [handleClickOutside]);
+    const onSelect = (i) => {
+        if (multi && Array.isArray(value)) {
+            onChange((value.includes(i)
+                ? [...value.slice(0, value.indexOf(i)), ...value.splice(value.indexOf(i) + 1, value.length - 1)]
+                : [...value, i]));
+        }
+        else {
+            onChange((value === i ? null : i));
+        }
+    };
+    const buildOptions = () => {
+        let options = [];
+        for (let i = 1; i <= 31; i++) {
+            options.push(jsx("label", Object.assign({ className: `dropdown-item ${(Array.isArray(value) ? value.includes(i.toString()) : value === i.toString()) ? "dropdown-item-selected" : ""}`, onClick: () => !disabled && onSelect(i.toString()) }, { children: i })));
+        }
+        return options;
+    };
+    return (jsxs("div", Object.assign({ className: "dropdown mx-2", ref: ref }, { children: [jsx("input", { disabled: disabled, className: "dropbtn mx-0", onClick: () => setShow((s) => !s), value: (Array.isArray(value) ? value.length : value)
+                    ? Array.isArray(value)
+                        ? value.join(",")
+                        : value
+                    : "" }), show && jsx("div", Object.assign({ className: "dropdown-content" }, { children: buildOptions() }))] })));
+};
+
 const MonthlyCron = (props) => {
     const [state, setState] = useState({ hour: 0, minute: 0, every: "" });
     useEffect(() => {
@@ -8181,27 +8221,21 @@ const MonthlyCron = (props) => {
             props.onChange(val);
         }
     };
-    const onMultiDayChange = (e) => {
+    const onMultiDayChange = (value) => {
         if (props.disabled) {
             return;
         }
-        if (e.target.value === "" ||
-            e.target.value
-                .split(",")
-                .map((day) => day.trim() ? parseInt(day.trim()) : day)
-                .every((day) => typeof day !== "string" ? (day > 0 && day <= 31) : day === "")) {
-            let val = [
-                "0",
-                props.value[1] === "*" ? "0" : props.value[1],
-                props.value[2] === "*" ? "0" : props.value[2],
-                props.value[3],
-                "1/1",
-                "?",
-                "*",
-            ];
-            val[3] = `${e.target.value.replaceAll(",", "!")}`;
-            props.onChange(val);
-        }
+        const val = [
+            "0",
+            props.value[1] === "*" ? "0" : props.value[1],
+            props.value[2] === "*" ? "0" : props.value[2],
+            props.value[3],
+            "1/1",
+            "?",
+            "*",
+        ];
+        val[3] = `${value.filter(p => p).join("!")}`;
+        props.onChange(val);
     };
     const onLastDayChange = (e) => {
         if (props.disabled) {
@@ -8318,7 +8352,7 @@ const MonthlyCron = (props) => {
         ]);
     };
     const translateFn = props.translate;
-    return (jsxs("div", Object.assign({ className: "tab-pane" }, { children: [jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickMonthlyOnceRadio() }, { children: [jsx("input", { type: "radio", value: "1", name: "MonthlyOnceRadio", checked: state.every === "1" ? true : false, disabled: props.disabled }), translateFn("Day"), jsx("input", { readOnly: state.every !== "1", type: "number", value: props.value[3], onChange: onDayChange, disabled: props.disabled }), translateFn("of every month(s)")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickLastDayOfEveryMonth() }, { children: [jsx("input", { type: "radio", value: "2", name: "LastDayOfEveryMonth", checked: state.every === "2" ? true : false, disabled: props.disabled }), translateFn("Last day of every month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickLastWeekdayOfEveryMonth() }, { children: [jsx("input", { type: "radio", value: "3", name: "LastWeekdayOfEveryMonth", checked: state.every === "3" ? true : false, disabled: props.disabled }), translateFn("On the last weekday of every month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickDaysBeforeEndOfMonth() }, { children: [jsx("input", { type: "radio", value: "4", name: "DaysBeforeEndOfMonth", checked: state.every === "4" ? true : false, disabled: props.disabled }), jsx("input", { readOnly: state.every !== "4", type: "number", value: props.value[3].split("-").length && props.value[3].split("-")[1] ? props.value[3].split("-")[1] : "", onChange: onLastDayChange, disabled: props.disabled }), translateFn("day(s) before the end of the month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickMonthlyMultipleRadio() }, { children: [jsx("input", { type: "radio", value: "5", name: "MonthlyMultipleRadio", checked: state.every === "5" ? true : false, disabled: props.disabled }), jsx("input", { readOnly: state.every !== "5", type: "text", value: state.every === "5" ? props.value[3].replaceAll("!", ",") : "", onChange: onMultiDayChange, disabled: props.disabled }), translateFn("Days of every month (comma separated dates)")] })), translateFn("Start time"), jsx(HourSelect, { onChange: onAtHourChange, value: props.value[2], disabled: props.disabled }), jsx(MinutesSelect, { onChange: onAtMinuteChange, value: props.value[1], disabled: props.disabled })] })));
+    return (jsxs("div", Object.assign({ className: "tab-pane" }, { children: [jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickMonthlyOnceRadio() }, { children: [jsx("input", { type: "radio", value: "1", name: "MonthlyOnceRadio", checked: state.every === "1" ? true : false, disabled: props.disabled }), translateFn("Day"), jsx("input", { readOnly: state.every !== "1", type: "number", value: props.value[3], onChange: onDayChange, disabled: props.disabled }), translateFn("of every month(s)")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickLastDayOfEveryMonth() }, { children: [jsx("input", { type: "radio", value: "2", name: "LastDayOfEveryMonth", checked: state.every === "2" ? true : false, disabled: props.disabled }), translateFn("Last day of every month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickLastWeekdayOfEveryMonth() }, { children: [jsx("input", { type: "radio", value: "3", name: "LastWeekdayOfEveryMonth", checked: state.every === "3" ? true : false, disabled: props.disabled }), translateFn("On the last weekday of every month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickDaysBeforeEndOfMonth() }, { children: [jsx("input", { type: "radio", value: "4", name: "DaysBeforeEndOfMonth", checked: state.every === "4" ? true : false, disabled: props.disabled }), jsx("input", { readOnly: state.every !== "4", type: "number", value: props.value[3].split("-").length && props.value[3].split("-")[1] ? props.value[3].split("-")[1] : "", onChange: onLastDayChange, disabled: props.disabled }), translateFn("day(s) before the end of the month")] })), jsxs("div", Object.assign({ className: "well well-small cursor_pointer", onClick: () => onClickMonthlyMultipleRadio() }, { children: [jsx("input", { type: "radio", value: "5", name: "MonthlyMultipleRadio", checked: state.every === "5" ? true : false, disabled: props.disabled }), jsx(DaySelect, { onChange: (e) => onMultiDayChange(e), disabled: props.disabled, value: state.every === "5" ? props.value[3].split("!") : [], multi: true }), translateFn("Days of every month")] })), translateFn("Start time"), jsx(HourSelect, { onChange: onAtHourChange, value: props.value[2], disabled: props.disabled }), jsx(MinutesSelect, { onChange: onAtMinuteChange, value: props.value[1], disabled: props.disabled })] })));
 };
 
 const CustomCron = (props) => {
@@ -8455,7 +8489,7 @@ var translations = {
 	Monthly: Monthly,
 	Custom: Custom,
 	Expression: Expression,
-	"Days of every month (comma separated dates)": "Days of every month (comma separated dates)"
+	"Days of every month": "Days of every month"
 };
 
 function styleInject(css, ref) {
@@ -8485,7 +8519,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".cron_builder_bordering {\n    border: 1px solid #ddd;\n    border-top: none;\n    text-align: center;\n    padding: 10px;\n    background: #fff;\n}\n.cron_builder_bordering input, .cron_builder_bordering select {\n    width: 100px;\n    margin-right: 10px;\n    margin-left: 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    outline: none;\n    padding: 0px 5px;\n    min-height: 28px;\n}\n.df {\n    display: flex;\n}\n.cron-builder-bg {\n    background-color: #086090;\n    color: white;\n    text-align: center;\n    margin-bottom: 4px;\n    padding: 8px 0px;\n}\n.cron_builder_bordering select {\n    background-color: white;\n    width: 75px;\n    cursor: pointer;\n    padding: 4px 2px;\n    border-radius: 4px;\n}\n.cron_builder_bordering select:disabled{\n    background-color: #f5f5f5;\n    cursor: default;\n}\n.cron_builder_bordering select option:hover {\n    background-color: #086090;\n}\n.well-small input {\n    width: auto !important;\n}\n.cron_builder_bordering  input[type='radio'] {\n    margin-top: 0px;\n    vertical-align: middle;\n}\n.cron_builder {\n    border: 1px solid #d0cbcb;\n    padding: 5px;\n    background-color: #dddef13d;\n    width: 100%;\n    max-width: 600px;\n}\n.text_align_left {\n    text-align: left;\n}\n.cron_builder .nav li {\n    cursor: pointer;\n    flex: 1 1 10px;\n    text-align: center;\n    width: 10px;\n    display: flex;\n    padding: 0px 1px;\n}\n.cron_builder .nav li a {\n    color:#337ab7;\n    width: 100%;\n    padding: 10px;\n    display: inline-block;\n    border-radius: 4px 4px 0px 0px;\n}\n.cron_builder .nav-tabs .nav-link:focus, .cron_builder .nav-tabs .nav-link:hover {\n    border-color: transparent transparent transparent;\n    background-color: #eeeeee;\n}\n.cron_builder .nav-tabs .nav-item.show .nav-link, .cron_builder .nav-tabs .nav-link.active {\n    border-color: #dee2e6 #dee2e6 #fff;\n    background-color: #ffffff;\n}\n.cron_builder .nav-tabs .nav-item.show .nav-link, .cron_builder .nav-tabs .nav-link.disabled {\n    color: #6c757d;\n    background-color: #ffffff;\n    border-color: transparent transparent #ffffff;\n    cursor: not-allowed;\n}\n.cron_builder { \n    font-size: 14px;\n}\n.cron_builder .well {\n    min-height: 20px;\n    padding: 19px;\n    margin-bottom: 20px;\n    background-color: #f5f5f5;\n    border: 1px solid #e3e3e3;\n    border-radius: 4px;\n    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n}\n@media screen and (max-width:767px) {\n    .cron_builder .nav li {\n        cursor: pointer;\n        flex: 0 0 65px;\n        text-align: center;\n    }\n}\n\n/* ---- boostrap ----- */\n.cron_builder .nav.nav-tabs {\n    list-style: none;\n    display: flex;\n    margin: 0 0;\n    padding-left: 0;\n}\n.cron_builder .row {\n    display: flex;\n}\n.cron_builder .col-sm-6 {\n    flex: 0 0 50%;\n}\n.cron_builder .min_height_auto {\n    min-height: auto !important;\n}\n.cron_builder {\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n}\n.cron_builder .cursor_pointer {\n    cursor: pointer;\n}";
+var css_248z = ".cron_builder_bordering {\n    border: 1px solid #ddd;\n    border-top: none;\n    text-align: center;\n    padding: 10px;\n    background: #fff;\n}\n.cron_builder_bordering input, .cron_builder_bordering select {\n    width: 100px;\n    margin-right: 10px;\n    margin-left: 10px;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    outline: none;\n    padding: 0px 5px;\n    min-height: 28px;\n}\n.df {\n    display: flex;\n}\n.cron-builder-bg {\n    background-color: #086090;\n    color: white;\n    text-align: center;\n    margin-bottom: 4px;\n    padding: 8px 0px;\n}\n.cron_builder_bordering select {\n    background-color: white;\n    width: 75px;\n    cursor: pointer;\n    padding: 4px 2px;\n    border-radius: 4px;\n}\n.cron_builder_bordering select:disabled{\n    background-color: #f5f5f5;\n    cursor: default;\n}\n.cron_builder_bordering select option:hover {\n    background-color: #086090;\n}\n.well-small input {\n    width: auto !important;\n}\n.cron_builder_bordering  input[type='radio'] {\n    margin-top: 0px;\n    vertical-align: middle;\n}\n.cron_builder {\n    border: 1px solid #d0cbcb;\n    padding: 5px;\n    background-color: #dddef13d;\n    width: 100%;\n    max-width: 600px;\n}\n.text_align_left {\n    text-align: left;\n}\n.cron_builder .nav li {\n    cursor: pointer;\n    flex: 1 1 10px;\n    text-align: center;\n    width: 10px;\n    display: flex;\n    padding: 0px 1px;\n}\n.cron_builder .nav li a {\n    color:#337ab7;\n    width: 100%;\n    padding: 10px;\n    display: inline-block;\n    border-radius: 4px 4px 0px 0px;\n}\n.cron_builder .nav-tabs .nav-link:focus, .cron_builder .nav-tabs .nav-link:hover {\n    border-color: transparent transparent transparent;\n    background-color: #eeeeee;\n}\n.cron_builder .nav-tabs .nav-item.show .nav-link, .cron_builder .nav-tabs .nav-link.active {\n    border-color: #dee2e6 #dee2e6 #fff;\n    background-color: #ffffff;\n}\n.cron_builder .nav-tabs .nav-item.show .nav-link, .cron_builder .nav-tabs .nav-link.disabled {\n    color: #6c757d;\n    background-color: #ffffff;\n    border-color: transparent transparent #ffffff;\n    cursor: not-allowed;\n}\n.cron_builder { \n    font-size: 14px;\n}\n.cron_builder .well {\n    min-height: 20px;\n    padding: 19px;\n    margin-bottom: 20px;\n    background-color: #f5f5f5;\n    border: 1px solid #e3e3e3;\n    border-radius: 4px;\n    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n    box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);\n}\n@media screen and (max-width:767px) {\n    .cron_builder .nav li {\n        cursor: pointer;\n        flex: 0 0 65px;\n        text-align: center;\n    }\n}\n\n/* ---- boostrap ----- */\n.cron_builder .nav.nav-tabs {\n    list-style: none;\n    display: flex;\n    margin: 0 0;\n    padding-left: 0;\n}\n.cron_builder .row {\n    display: flex;\n}\n.cron_builder .col-sm-6 {\n    flex: 0 0 50%;\n}\n.cron_builder .min_height_auto {\n    min-height: auto !important;\n}\n.cron_builder {\n    font-family: -apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";\n}\n.cron_builder .cursor_pointer {\n    cursor: pointer;\n}\n\n.cron_builder .dropbtn {\n  cursor: pointer;\n}\n\n.cron_builder .dropdown {\n  position: relative;\n  display: inline-block;\n}\n\n.cron_builder .dropdown-content {\n  position: absolute;\n  background-color: #f1f1f1;\n  min-width: 140px;\n  overflow: auto;\n  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n  z-index: 1;\n  left: 0;\n  right: 0;\n  text-align: left;\n  max-height: 150px;\n  overflow: auto;\n}\n\n@media screen and (min-height: 800px) {\n    .cron_builder .dropdown-content {\n        max-height: 200px;\n      }\n}\n\n.cron_builder .dropdown-content .dropdown-item {\n    color: black;\n    padding: 12px 16px;\n    text-decoration: none;\n    display: block;\n}\n\n.cron_builder .dropdown-content .dropdown-item:hover, .cron_builder .dropdown-content .dropdown-item-selected {\n    background-color: #086090;\n    color: white;\n}\n\n.cron_builder .mx-0 {\n    margin-left: 0 !important;\n    margin-right: 0 !important;\n}\n.cron_builder .mx-2 {\n    margin-left: 10px !important;\n    margin-right: 10px !important;\n}";
 styleInject(css_248z);
 
 const defaultCron = '0 0 00 1/1 * ? *';
@@ -8612,5 +8646,5 @@ const Cron = (props) => {
     return (jsxs("div", Object.assign({ className: 'cron_builder' }, { children: [jsx("ul", Object.assign({ className: "nav nav-tabs" }, { children: getHeaders() })), jsx("div", Object.assign({ className: "cron_builder_bordering" }, { children: state.selectedTab ? getComponent(state.selectedTab) : "Select a header" })), props.showResultText && jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: getVal() })), props.showResultCron && jsx("div", Object.assign({ className: "cron-builder-bg" }, { children: state.value.toString().replace(/,/g, ' ').replace(/!/g, ',') }))] })));
 };
 
-export { HEADER, Cron as default };
+export { HEADER, i18n as cronstrue, Cron as default };
 //# sourceMappingURL=index.js.map