react-cron-generator 2.1.1 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/build/cron-builder.css +213 -0
- package/build/cron.d.ts +0 -1
- package/build/cron.d.ts.map +1 -1
- package/build/index.js +0 -30
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ yarn add react-cron-generator
|
|
|
44
44
|
```jsx
|
|
45
45
|
import React, { useState } from 'react';
|
|
46
46
|
import Cron from 'react-cron-generator';
|
|
47
|
-
import 'react-cron-generator/
|
|
47
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
48
48
|
|
|
49
49
|
function App() {
|
|
50
50
|
const [value, setValue] = useState('0 0 00 1/1 * ? *');
|
|
@@ -69,7 +69,7 @@ function App() {
|
|
|
69
69
|
```jsx
|
|
70
70
|
import React, { useState } from 'react';
|
|
71
71
|
import Cron from 'react-cron-generator';
|
|
72
|
-
import 'react-cron-generator/
|
|
72
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
73
73
|
|
|
74
74
|
function App() {
|
|
75
75
|
const [value, setValue] = useState('*/5 * * * *');
|
|
@@ -244,7 +244,7 @@ function translateFn(key) {
|
|
|
244
244
|
The component comes with default styles. Import the CSS file:
|
|
245
245
|
|
|
246
246
|
```jsx
|
|
247
|
-
import 'react-cron-generator/
|
|
247
|
+
import 'react-cron-generator/build/cron-builder.css';
|
|
248
248
|
```
|
|
249
249
|
|
|
250
250
|
You can override styles by targeting the CSS classes:
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
.cron_builder {
|
|
2
|
+
border: 1px solid #d0cbcb;
|
|
3
|
+
padding: 5px;
|
|
4
|
+
background-color: #dddef13d;
|
|
5
|
+
width: 100%;
|
|
6
|
+
max-width: 600px;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
font-family:
|
|
9
|
+
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
|
10
|
+
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.cron_builder .cron_builder_bordering {
|
|
14
|
+
border: 1px solid #ddd;
|
|
15
|
+
border-top: none;
|
|
16
|
+
text-align: center;
|
|
17
|
+
padding: 10px;
|
|
18
|
+
background: #fff;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.cron_builder .cron_builder_bordering input,
|
|
22
|
+
.cron_builder .cron_builder_bordering select {
|
|
23
|
+
width: 100px;
|
|
24
|
+
margin-right: 10px;
|
|
25
|
+
margin-left: 10px;
|
|
26
|
+
border: 1px solid #ddd;
|
|
27
|
+
border-radius: 4px;
|
|
28
|
+
outline: none;
|
|
29
|
+
padding: 0px 5px;
|
|
30
|
+
min-height: 28px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.cron_builder .df {
|
|
34
|
+
display: flex;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.cron_builder .cron-builder-bg {
|
|
38
|
+
background-color: #086090;
|
|
39
|
+
color: white;
|
|
40
|
+
text-align: center;
|
|
41
|
+
margin-bottom: 4px;
|
|
42
|
+
padding: 8px 0px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.cron_builder .cron_builder_bordering select {
|
|
46
|
+
background-color: white;
|
|
47
|
+
width: 75px;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
padding: 4px 2px;
|
|
50
|
+
border-radius: 4px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.cron_builder .cron_builder_bordering select:disabled {
|
|
54
|
+
background-color: #f5f5f5;
|
|
55
|
+
cursor: default;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.cron_builder .cron_builder_bordering select option:hover {
|
|
59
|
+
background-color: #086090;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.cron_builder .well-small input {
|
|
63
|
+
width: auto !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cron_builder .cron_builder_bordering input[type='radio'] {
|
|
67
|
+
margin-top: 0px;
|
|
68
|
+
vertical-align: middle;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.cron_builder .text_align_left {
|
|
72
|
+
text-align: left;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.cron_builder .nav li {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
flex: 1 1 10px;
|
|
78
|
+
text-align: center;
|
|
79
|
+
width: 10px;
|
|
80
|
+
display: flex;
|
|
81
|
+
padding: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.cron_builder .nav li a,
|
|
85
|
+
.cron_builder .nav li button {
|
|
86
|
+
color: #337ab7;
|
|
87
|
+
width: 100%;
|
|
88
|
+
padding: 10px;
|
|
89
|
+
display: inline-block;
|
|
90
|
+
border-radius: 4px 4px 0px 0px;
|
|
91
|
+
background: none;
|
|
92
|
+
border: 1px solid transparent;
|
|
93
|
+
font-size: inherit;
|
|
94
|
+
font-family: inherit;
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.cron_builder .nav-tabs .nav-link:focus,
|
|
100
|
+
.cron_builder .nav-tabs .nav-link:hover {
|
|
101
|
+
border-color: transparent transparent transparent;
|
|
102
|
+
background-color: #eeeeee;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.cron_builder .nav-tabs .nav-item.show .nav-link,
|
|
106
|
+
.cron_builder .nav-tabs .nav-link.active {
|
|
107
|
+
border-color: #dee2e6 #dee2e6 #fff;
|
|
108
|
+
background-color: #ffffff;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.cron_builder .nav-tabs .nav-item.show .nav-link,
|
|
112
|
+
.cron_builder .nav-tabs .nav-link.disabled {
|
|
113
|
+
color: #6c757d;
|
|
114
|
+
background-color: #ffffff;
|
|
115
|
+
border-color: transparent transparent #ffffff;
|
|
116
|
+
cursor: not-allowed;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.cron_builder .well {
|
|
120
|
+
display: block;
|
|
121
|
+
min-height: 20px;
|
|
122
|
+
padding: 19px;
|
|
123
|
+
margin-bottom: 20px;
|
|
124
|
+
background-color: #f5f5f5;
|
|
125
|
+
border: 1px solid #e3e3e3;
|
|
126
|
+
border-radius: 4px;
|
|
127
|
+
-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
|
128
|
+
box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media screen and (max-width: 767px) {
|
|
132
|
+
.cron_builder .nav li {
|
|
133
|
+
cursor: pointer;
|
|
134
|
+
flex: 0 0 65px;
|
|
135
|
+
text-align: center;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* ---- boostrap ----- */
|
|
140
|
+
.cron_builder .nav.nav-tabs {
|
|
141
|
+
list-style: none;
|
|
142
|
+
display: flex;
|
|
143
|
+
margin: 0 0;
|
|
144
|
+
padding-left: 0;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.cron_builder .row {
|
|
148
|
+
display: flex;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.cron_builder .col-sm-6 {
|
|
152
|
+
flex: 0 0 50%;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.cron_builder .min_height_auto {
|
|
156
|
+
min-height: auto !important;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.cron_builder .cursor_pointer {
|
|
160
|
+
cursor: pointer;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.cron_builder .dropbtn {
|
|
164
|
+
cursor: pointer;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.cron_builder .dropdown {
|
|
168
|
+
position: relative;
|
|
169
|
+
display: inline-block;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.cron_builder .dropdown-content {
|
|
173
|
+
position: absolute;
|
|
174
|
+
background-color: #f1f1f1;
|
|
175
|
+
min-width: 140px;
|
|
176
|
+
overflow: auto;
|
|
177
|
+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
|
178
|
+
z-index: 1;
|
|
179
|
+
left: 0;
|
|
180
|
+
right: 0;
|
|
181
|
+
text-align: left;
|
|
182
|
+
max-height: 150px;
|
|
183
|
+
overflow: auto;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
@media screen and (min-height: 800px) {
|
|
187
|
+
.cron_builder .dropdown-content {
|
|
188
|
+
max-height: 200px;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.cron_builder .dropdown-content .dropdown-item {
|
|
193
|
+
color: black;
|
|
194
|
+
padding: 12px 16px;
|
|
195
|
+
text-decoration: none;
|
|
196
|
+
display: block;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.cron_builder .dropdown-content .dropdown-item:hover,
|
|
200
|
+
.cron_builder .dropdown-content .dropdown-item-selected {
|
|
201
|
+
background-color: #086090;
|
|
202
|
+
color: white;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.cron_builder .mx-0 {
|
|
206
|
+
margin-left: 0 !important;
|
|
207
|
+
margin-right: 0 !important;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.cron_builder .mx-2 {
|
|
211
|
+
margin-left: 10px !important;
|
|
212
|
+
margin-right: 10px !important;
|
|
213
|
+
}
|
package/build/cron.d.ts
CHANGED
package/build/cron.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["../src/lib/cron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAyB,aAAa,EAAiB,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"cron.d.ts","sourceRoot":"","sources":["../src/lib/cron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAyB,aAAa,EAAiB,MAAM,QAAQ,CAAC;AAK7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE;QAAE,OAAO,EAAE,aAAa,EAAE,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAeD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CA8X3C,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
package/build/index.js
CHANGED
|
@@ -9022,36 +9022,6 @@ function validateCron(expression) {
|
|
|
9022
9022
|
}
|
|
9023
9023
|
}
|
|
9024
9024
|
|
|
9025
|
-
function styleInject(css, ref) {
|
|
9026
|
-
if ( ref === void 0 ) ref = {};
|
|
9027
|
-
var insertAt = ref.insertAt;
|
|
9028
|
-
|
|
9029
|
-
if (typeof document === 'undefined') { return; }
|
|
9030
|
-
|
|
9031
|
-
var head = document.head || document.getElementsByTagName('head')[0];
|
|
9032
|
-
var style = document.createElement('style');
|
|
9033
|
-
style.type = 'text/css';
|
|
9034
|
-
|
|
9035
|
-
if (insertAt === 'top') {
|
|
9036
|
-
if (head.firstChild) {
|
|
9037
|
-
head.insertBefore(style, head.firstChild);
|
|
9038
|
-
} else {
|
|
9039
|
-
head.appendChild(style);
|
|
9040
|
-
}
|
|
9041
|
-
} else {
|
|
9042
|
-
head.appendChild(style);
|
|
9043
|
-
}
|
|
9044
|
-
|
|
9045
|
-
if (style.styleSheet) {
|
|
9046
|
-
style.styleSheet.cssText = css;
|
|
9047
|
-
} else {
|
|
9048
|
-
style.appendChild(document.createTextNode(css));
|
|
9049
|
-
}
|
|
9050
|
-
}
|
|
9051
|
-
|
|
9052
|
-
var css_248z = ".cron_builder {\n border: 1px solid #d0cbcb;\n padding: 5px;\n background-color: #dddef13d;\n width: 100%;\n max-width: 600px;\n font-size: 14px;\n font-family:\n -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',\n sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';\n}\n\n.cron_builder .cron_builder_bordering {\n border: 1px solid #ddd;\n border-top: none;\n text-align: center;\n padding: 10px;\n background: #fff;\n}\n\n.cron_builder .cron_builder_bordering input,\n.cron_builder .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\n.cron_builder .df {\n display: flex;\n}\n\n.cron_builder .cron-builder-bg {\n background-color: #086090;\n color: white;\n text-align: center;\n margin-bottom: 4px;\n padding: 8px 0px;\n}\n\n.cron_builder .cron_builder_bordering select {\n background-color: white;\n width: 75px;\n cursor: pointer;\n padding: 4px 2px;\n border-radius: 4px;\n}\n\n.cron_builder .cron_builder_bordering select:disabled {\n background-color: #f5f5f5;\n cursor: default;\n}\n\n.cron_builder .cron_builder_bordering select option:hover {\n background-color: #086090;\n}\n\n.cron_builder .well-small input {\n width: auto !important;\n}\n\n.cron_builder .cron_builder_bordering input[type='radio'] {\n margin-top: 0px;\n vertical-align: middle;\n}\n\n.cron_builder .text_align_left {\n text-align: left;\n}\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\n.cron_builder .nav li a,\n.cron_builder .nav li button {\n color: #337ab7;\n width: 100%;\n padding: 10px;\n display: inline-block;\n border-radius: 4px 4px 0px 0px;\n background: none;\n border: 1px solid transparent;\n font-size: inherit;\n font-family: inherit;\n cursor: pointer;\n text-decoration: none;\n}\n\n.cron_builder .nav-tabs .nav-link:focus,\n.cron_builder .nav-tabs .nav-link:hover {\n border-color: transparent transparent transparent;\n background-color: #eeeeee;\n}\n\n.cron_builder .nav-tabs .nav-item.show .nav-link,\n.cron_builder .nav-tabs .nav-link.active {\n border-color: #dee2e6 #dee2e6 #fff;\n background-color: #ffffff;\n}\n\n.cron_builder .nav-tabs .nav-item.show .nav-link,\n.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\n.cron_builder .well {\n display: block;\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\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\n.cron_builder .row {\n display: flex;\n}\n\n.cron_builder .col-sm-6 {\n flex: 0 0 50%;\n}\n\n.cron_builder .min_height_auto {\n min-height: auto !important;\n}\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,\n.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\n.cron_builder .mx-2 {\n margin-left: 10px !important;\n margin-right: 10px !important;\n}\n";
|
|
9053
|
-
styleInject(css_248z);
|
|
9054
|
-
|
|
9055
9025
|
const defaultCron = '0 0 00 1/1 * ? *';
|
|
9056
9026
|
const Cron = (props) => {
|
|
9057
9027
|
// Validate prop combination
|