@@ -3,9 +3,24 @@ import { clipboard } from 'electron';
33import cronstrue from 'cronstrue' ;
44import classNames from 'classnames' ;
55
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+
621const 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 ) ) ;
924 const [ inputErr , setInputErr ] = useState ( false ) ;
1025
1126 const handleChangeInput = ( evt : { target : { value : string } } ) =>
@@ -42,23 +57,24 @@ const CronEditor = () => {
4257 < div className = "flex items-center space-x-2" >
4358 < input
4459 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"
4661 value = { input }
4762 />
4863 </ div >
4964 </ section >
5065 < section
5166 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 ,
5368 'text-blue-500' : ! inputErr ,
5469 'text-red-500' : inputErr ,
5570 } ) }
5671 >
57- { ! inputErr && '“ ' }
72+ { ! inputErr && '" ' }
5873 { output }
59- { ! inputErr && '” ' }
74+ { ! inputErr && '" ' }
6075 </ 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 >
6278 < table >
6379 < tbody >
6480 < tr className = "flex space-x-4" >
@@ -80,6 +96,23 @@ const CronEditor = () => {
8096 </ tbody >
8197 </ table >
8298 </ 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 >
83116 </ section >
84117 </ div >
85118 ) ;
0 commit comments