@@ -3,9 +3,24 @@ import { clipboard } from 'electron';
3
3
import cronstrue from 'cronstrue' ;
4
4
import classNames from 'classnames' ;
5
5
6
+ const defaultCron = '29 8 * * *' ;
7
+ const examples = [
8
+ '* * * * * *' ,
9
+ '* * * * *' ,
10
+ '0 * * * *' ,
11
+ '0 */12 * * *' ,
12
+ '0 0 * * MON' ,
13
+ '0 0 * * 6,0' ,
14
+ '0 0 1 * *' ,
15
+ '0 0 1 1 *' ,
16
+ '0 0 1 */3 *' ,
17
+ '0 0 1 */6 *' ,
18
+ '0 0 1 1 *' ,
19
+ ] ;
20
+
6
21
const CronEditor = ( ) => {
7
- const [ input , setInput ] = useState ( '* * * * *' ) ;
8
- const [ output , setOutput ] = useState ( cronstrue . toString ( '* * * * *' ) ) ;
22
+ const [ input , setInput ] = useState ( defaultCron ) ;
23
+ const [ output , setOutput ] = useState ( cronstrue . toString ( defaultCron ) ) ;
9
24
const [ inputErr , setInputErr ] = useState ( false ) ;
10
25
11
26
const handleChangeInput = ( evt : { target : { value : string } } ) =>
@@ -42,23 +57,24 @@ const CronEditor = () => {
42
57
< div className = "flex items-center space-x-2" >
43
58
< input
44
59
onChange = { handleChangeInput }
45
- className = "flex-1 px-2 py-1 text-lg text- center bg-white rounded-md"
60
+ className = "flex-1 px-2 py-1 text-center bg-white rounded-md"
46
61
value = { input }
47
62
/>
48
63
</ div >
49
64
</ section >
50
65
< section
51
66
className = { classNames ( {
52
- 'flex flex-col flex-shrink-0 text-center text-lg ' : true ,
67
+ 'flex flex-col flex-shrink-0 text-center text-base ' : true ,
53
68
'text-blue-500' : ! inputErr ,
54
69
'text-red-500' : inputErr ,
55
70
} ) }
56
71
>
57
- { ! inputErr && '“ ' }
72
+ { ! inputErr && '" ' }
58
73
{ output }
59
- { ! inputErr && '” ' }
74
+ { ! inputErr && '" ' }
60
75
</ section >
61
- < section className = "flex flex-col items-center justify-start flex-1 opacity-70" >
76
+ < section className = "flex flex-col items-start justify-start flex-shrink-0 pt-2 space-y-4 border-t border-gray-300 opacity-70" >
77
+ < p className = "italic" > Rules:</ p >
62
78
< table >
63
79
< tbody >
64
80
< tr className = "flex space-x-4" >
@@ -80,6 +96,23 @@ const CronEditor = () => {
80
96
</ tbody >
81
97
</ table >
82
98
</ section >
99
+ < section className = "flex flex-col items-start justify-start flex-shrink-0 pt-2 space-y-4 border-t border-gray-300 opacity-70" >
100
+ < p className = "italic" > Examples:</ p >
101
+ < table >
102
+ < tbody >
103
+ { examples . map ( ( c ) => (
104
+ < tr
105
+ className = "flex space-x-4 cursor-pointer"
106
+ key = { c }
107
+ onClick = { ( ) => setInput ( c ) }
108
+ >
109
+ < th className = "w-32 text-left" > { c } </ th >
110
+ < td > { cronstrue . toString ( c ) } </ td >
111
+ </ tr >
112
+ ) ) }
113
+ </ tbody >
114
+ </ table >
115
+ </ section >
83
116
</ section >
84
117
</ div >
85
118
) ;
0 commit comments