@@ -4,8 +4,8 @@ import React, {
4
4
useEffect ,
5
5
useMemo ,
6
6
useRef ,
7
+ useCallback ,
7
8
} from 'react' ;
8
- import initialState from '../context/initialState' ;
9
9
import { makeStyles } from '@material-ui/core/styles' ;
10
10
import FormControl from '@material-ui/core/FormControl' ;
11
11
import Select from '@material-ui/core/Select' ;
@@ -25,7 +25,7 @@ import List from '@material-ui/core/List';
25
25
import ListItem from '@material-ui/core/ListItem' ;
26
26
import ListItemText from '@material-ui/core/ListItemText' ;
27
27
import createModal from '../components/right/createModal' ;
28
- import ComponentPanel from '../components/right/ComponentPanel'
28
+ import ComponentPanel from '../components/right/ComponentPanel' ;
29
29
30
30
// need to pass in props to use the useHistory feature of react router
31
31
const RightContainer = ( { isThemeLight} ) : JSX . Element => {
@@ -44,7 +44,6 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
44
44
const { style } = useContext ( styleContext ) ;
45
45
const [ modal , setModal ] = useState ( null ) ;
46
46
47
-
48
47
const resetFields = ( ) => {
49
48
const style = configTarget . child
50
49
? configTarget . child . style
@@ -187,7 +186,7 @@ const RightContainer = ({isThemeLight}): JSX.Element => {
187
186
if ( compWidth !== '' ) styleObj . width = compWidth ;
188
187
if ( compHeight !== '' ) styleObj . height = compHeight ;
189
188
if ( BGColor !== '' ) styleObj . backgroundColor = BGColor ;
190
-
189
+
191
190
dispatch ( {
192
191
type : 'UPDATE CSS' ,
193
192
payload : { style : styleObj }
@@ -205,6 +204,15 @@ const redoAction = () => {
205
204
dispatch ( { type : 'REDO' , payload : { } } ) ;
206
205
} ;
207
206
207
+ const undoRedoKey = useCallback ( ( e ) => {
208
+ ( e . key === 'z' && e . metaKey && ! e . shiftKey ) ? undoAction ( ) :
209
+ ( e . shiftKey && e . metaKey && e . key === 'z' ) ? redoAction ( ) : '' ;
210
+ } , [ ] ) ;
211
+
212
+ useEffect ( ( ) => {
213
+ document . addEventListener ( "keydown" , undoRedoKey ) ;
214
+ } , [ ] ) ;
215
+
208
216
// placeholder for handling deleting instance
209
217
const handleDelete = ( ) => {
210
218
dispatch ( { type : 'DELETE CHILD' , payload : { } } ) ;
@@ -331,7 +339,7 @@ const redoAction = () => {
331
339
className = { classes . select }
332
340
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
333
341
>
334
- < MenuItem value = "" > </ MenuItem >
342
+ < MenuItem value = "" > none </ MenuItem >
335
343
< MenuItem value = { 'block' } > block</ MenuItem >
336
344
< MenuItem value = { 'inline-block' } > inline-block</ MenuItem >
337
345
< MenuItem value = { 'flex' } > flex</ MenuItem >
@@ -356,7 +364,7 @@ const redoAction = () => {
356
364
className = { classes . select }
357
365
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
358
366
>
359
- < MenuItem value = "" > </ MenuItem >
367
+ < MenuItem value = "" > none </ MenuItem >
360
368
< MenuItem value = { 'row' } > row</ MenuItem >
361
369
< MenuItem value = { 'column' } > column</ MenuItem >
362
370
</ Select >
@@ -377,7 +385,7 @@ const redoAction = () => {
377
385
className = { classes . select }
378
386
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
379
387
>
380
- < MenuItem value = "" > </ MenuItem >
388
+ < MenuItem value = "" > none </ MenuItem >
381
389
< MenuItem value = { 'flex-start' } > flex-start</ MenuItem >
382
390
< MenuItem value = { 'flex-end' } > flex-end</ MenuItem >
383
391
< MenuItem value = { 'center' } > center</ MenuItem >
@@ -402,7 +410,7 @@ const redoAction = () => {
402
410
className = { classes . select }
403
411
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
404
412
>
405
- < MenuItem value = "" > </ MenuItem >
413
+ < MenuItem value = "" > none </ MenuItem >
406
414
< MenuItem value = { 'stretch' } > stretch</ MenuItem >
407
415
< MenuItem value = { 'flex-start' } > flex-start</ MenuItem >
408
416
< MenuItem value = { 'flex-end' } > flex-end</ MenuItem >
@@ -427,7 +435,7 @@ const redoAction = () => {
427
435
className = { classes . select }
428
436
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
429
437
>
430
- < MenuItem value = "" > </ MenuItem >
438
+ < MenuItem value = "" > none </ MenuItem >
431
439
< MenuItem value = { 'auto' } > auto</ MenuItem >
432
440
< MenuItem value = { '50%' } > 50%</ MenuItem >
433
441
< MenuItem value = { '25%' } > 25%</ MenuItem >
@@ -449,7 +457,7 @@ const redoAction = () => {
449
457
className = { classes . select }
450
458
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
451
459
>
452
- < MenuItem value = "" > </ MenuItem >
460
+ < MenuItem value = "" > none </ MenuItem >
453
461
< MenuItem value = { 'auto' } > auto</ MenuItem >
454
462
< MenuItem value = { '100%' } > 100%</ MenuItem >
455
463
< MenuItem value = { '50%' } > 50%</ MenuItem >
@@ -470,6 +478,7 @@ const redoAction = () => {
470
478
inputProps = { { className : isThemeLight ? `${ classes . selectInput } ${ classes . lightThemeFontColor } ` : `${ classes . selectInput } ${ classes . darkThemeFontColor } ` } }
471
479
value = { BGColor }
472
480
onChange = { handleChange }
481
+ placeholder = "#B6B8B7"
473
482
/>
474
483
</ FormControl >
475
484
</ div >
0 commit comments