|
1 | 1 | import*asReactfrom'react' |
2 | 2 |
|
3 | 3 | conststyles={ |
4 | | -box:{ |
5 | | -display:'flex', |
6 | | -alignItems:'center', |
7 | | -justifyContent:'center', |
8 | | -}, |
9 | | -input:{ |
10 | | -border:'1px solid black', |
11 | | -backgroundColor:'yellow', |
12 | | -}, |
| 4 | +box:{ |
| 5 | +display:'flex', |
| 6 | +alignItems:'center', |
| 7 | +justifyContent:'center', |
| 8 | +}, |
| 9 | +input:{ |
| 10 | +border:'1px solid black', |
| 11 | +}, |
| 12 | +loading:{ |
| 13 | +backgroundColor:'red', |
| 14 | +}, |
13 | 15 | } |
14 | 16 |
|
15 | 17 | interfaceProps{ |
16 | | -status:'COMPLETE'|'INCOMPLETE'|'ACTIVE'|'LOADING' |
| 18 | +status:'COMPLETE'|'INCOMPLETE'|'ACTIVE'|'LOADING' |
17 | 19 | } |
18 | 20 |
|
19 | 21 | constCheckbox=(props:Props)=>{ |
20 | | -constchecked=props.status==='COMPLETE' |
21 | | -// const loading = props.state === 'LOADING' |
22 | | -constonChange=()=>{ |
23 | | -/* read */ |
24 | | -} |
25 | | -return( |
26 | | -<divstyle={styles.box}> |
27 | | -<label> |
28 | | -<inputstyle={styles.input}type="checkbox"checked={checked}onChange={onChange}/> |
29 | | -</label> |
30 | | -</div> |
31 | | -) |
| 22 | +constonChange=()=>{ |
| 23 | +/* read only */ |
| 24 | +} |
| 25 | + |
| 26 | +if(props.status==='LOADING'){ |
| 27 | +return( |
| 28 | +<divstyle={styles.box}> |
| 29 | +<input |
| 30 | +ref={input=>{ |
| 31 | +/* ref because unable to apply indeterminate on jsx */ |
| 32 | +if(input){ |
| 33 | +input.indeterminate=true |
| 34 | +} |
| 35 | +}} |
| 36 | +type="checkbox" |
| 37 | +checked={false} |
| 38 | +disabled={true} |
| 39 | +onChange={onChange} |
| 40 | +/> |
| 41 | +</div> |
| 42 | +) |
| 43 | +} |
| 44 | + |
| 45 | +constchecked=props.status==='COMPLETE' |
| 46 | + |
| 47 | +return( |
| 48 | +<divstyle={styles.box}> |
| 49 | +<label> |
| 50 | +<inputstyle={styles.input}type="checkbox"checked={checked}onChange={onChange}/> |
| 51 | +</label> |
| 52 | +</div> |
| 53 | +) |
32 | 54 | } |
33 | 55 |
|
34 | 56 | exportdefaultCheckbox |