Skip to content

Commit 5a37351

Browse files
MadinventorZeroMadinventorZero
authored
Merge pull request #2 from jonocr/styles
Selector Form Refactor
2 parents 2d667fd + 37ffeb3 commit 5a37351

File tree

2 files changed

+113
-157
lines changed

2 files changed

+113
-157
lines changed

‎app/src/components/form/Selector.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// 100% Caret
2+
import React from 'react';
3+
import FormControl from '@material-ui/core/FormControl';
4+
import Select from '@material-ui/core/Select';
5+
import MenuItem from '@material-ui/core/MenuItem';
6+
7+
const FormSelector = (props): JSX.Element => {
8+
const items = [];
9+
props.items.forEach(el => {
10+
items.push(<MenuItem value={el.value}>{el.text}</MenuItem>);
11+
})
12+
return (
13+
<div className={props.classes.configRow}>
14+
<div className={props.isThemeLight ? `${props.classes.configType} ${props.classes.lightThemeFontColor}` : `${props.classes.configType} ${props.classes.darkThemeFontColor}`}>
15+
<h3>{props.title}</h3>
16+
</div>
17+
<div className={props.classes.configValue}>
18+
<FormControl variant="filled" className={props.classes.formControl}>
19+
<Select
20+
value={props.selectValue}
21+
name={props.name}
22+
onChange={props.handleChange}
23+
displayEmpty
24+
className={props.classes.select}
25+
inputProps={{ className: props.isThemeLight ? `${props.classes.selectInput} ${props.classes.lightThemeFontColor}` : `${props.classes.selectInput} ${props.classes.darkThemeFontColor}` }}
26+
>
27+
{items}
28+
</Select>
29+
</FormControl>
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
export default FormSelector;

‎app/src/containers/RightContainer.tsx

Lines changed: 78 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import React, {
88
} from 'react';
99
import { makeStyles } from '@material-ui/core/styles';
1010
import FormControl from '@material-ui/core/FormControl';
11-
import Select from '@material-ui/core/Select';
12-
import MenuItem from '@material-ui/core/MenuItem';
1311
import TextField from '@material-ui/core/TextField';
1412
import Button from '@material-ui/core/Button';
1513
import Dialog from '@material-ui/core/Dialog';
@@ -20,14 +18,13 @@ import DialogTitle from '@material-ui/core/DialogTitle';
2018
import List from '@material-ui/core/List';
2119
import ListItem from '@material-ui/core/ListItem';
2220
import ListItemText from '@material-ui/core/ListItemText';
23-
import UndoIcon from '@material-ui/icons/Undo';
24-
import RedoIcon from '@material-ui/icons/Redo';
2521
import createModal from '../components/right/createModal';
2622
import ComponentPanel from '../components/right/ComponentPanel';
2723
import { styleContext } from './AppContainer';
2824
import ErrorMessages from '../constants/ErrorMessages';
2925
import ProjectManager from '../components/right/ProjectManager';
3026
import StateContext from '../context/context';
27+
import FormSelector from '../components/form/Selector';
3128

3229
// need to pass in props to use the useHistory feature of react router
3330
const RightContainer = ({ isThemeLight }): JSX.Element => {
@@ -53,7 +50,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
5350
const childrenArray = state.components[0].children;
5451
let attributes;
5552
for (const element of childrenArray) {
56-
if (element.childId === configTarget.child.id) {
53+
if (configTarget.child && element.childId === configTarget.child.id) {
5754
attributes = element.attributes;
5855
setCompText(attributes.text ? attributes.text : '');
5956
}
@@ -105,9 +102,11 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
105102
setBGColor(inputVal);
106103
break;
107104
// Caret
108-
case 'compText':
105+
case 'compText':
109106
setCompText(inputVal);
110107
break;
108+
default:
109+
break;
111110
}
112111
};
113112

@@ -282,13 +281,13 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
282281
marginTop: '5%',
283282
}}
284283
>
285-
<ListItemText primary={'Yes'} style={{ textAlign: 'center' }} />
284+
<ListItemText primary={'Yes'} style={{ textAlign: 'center' }} />
286285
</ListItem>
287286

288287
<ListItem
289288
key={'not delete'}
290289
button
291-
onClick={closeModal}ƒ
290+
onClick={closeModal} ƒ
292291
style={{
293292
border: '1px solid #3f51b5',
294293
marginBottom: '2%',
@@ -322,9 +321,9 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
322321
(e.key === 'z' && e.metaKey && !e.shiftKey || e.key === 'z' && e.ctrlKey && !e.shiftKey) ? handleUndo()
323322
// Redo
324323
: (e.shiftKey && e.metaKey && e.key === 'z' || e.shiftKey && e.ctrlKey && e.key === 'z') ? handleRedo()
325-
// Delete HTML tag off canvas
324+
// Delete HTML tag off canvas
326325
: (e.key === 'Backspace') ? handleDelete()
327-
// Save
326+
// Save
328327
: (e.key === 's' && e.ctrlKey && e.shiftKey || e.key === 's' && e.metaKey && e.shiftKey) ? handleSave() : '';
329328
}, []);
330329

@@ -338,9 +337,9 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
338337

339338
return (
340339
<div className="column right" id="rightContainer" style={style}>
341-
<ComponentPanel isThemeLight={isThemeLight}/>
340+
<ComponentPanel isThemeLight={isThemeLight} />
342341
<ProjectManager />
343-
{/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
342+
{/* -----------------------------MOVED PROJECT MANAGER-------------------------------------- */}
344343
<div className="rightPanelWrapper">
345344
<div>
346345
<div className={classes.configHeader}>
@@ -357,154 +356,76 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
357356
</span>
358357
</h4>
359358
) : (
360-
<h4 className={ isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor} >
359+
<h4 className={isThemeLight ? classes.lightThemeFontColor : classes.darkThemeFontColor} >
361360
Parent Component:
362361
<br />
363362
<br />
364363
<span className={classes.compName}>{configTarget.name}</span>
365364
</h4>
366365
)}
367366
</div>
368-
<div className={classes.configRow}>
369-
<div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
370-
<h3>Display:</h3>
371-
</div>
372-
<div className={classes.configValue}>
373-
<FormControl variant="filled" className={classes.formControl}>
374-
<Select
375-
value={displayMode}
376-
name="display"
377-
onChange={handleChange}
378-
displayEmpty
379-
className={classes.select}
380-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
381-
>
382-
<MenuItem value="">none</MenuItem>
383-
<MenuItem value={'block'}>block</MenuItem>
384-
<MenuItem value={'inline-block'}>inline-block</MenuItem>
385-
<MenuItem value={'flex'}>flex</MenuItem>
386-
</Select>
387-
</FormControl>
388-
</div>
389-
</div>
367+
{/* Caret Start Created new FormSelector component */}
368+
<FormSelector
369+
classes={classes}
370+
isThemeLight={isThemeLight}
371+
selectValue={flexAlign}
372+
handleChange={handleChange}
373+
title='Display:'
374+
name='display'
375+
items={[{ value: '', text: 'none' }, { value: 'block', text: 'block' }, { value: 'inline-block', text: 'inline-block' }, { value: 'flex', text: 'flex' }]}
376+
/>
390377
{/* flex options are hidden until display flex is chosen */}
391378
{displayMode === 'flex' && (
392379
<div>
393-
<div className={classes.configRow}>
394-
<div className={classes.configType}>
395-
<h3>Flex direction:</h3>
396-
</div>
397-
<div className={classes.configValue}>
398-
<FormControl variant="filled" className={classes.formControl}>
399-
<Select
400-
value={flexDir}
401-
name="flexdir"
402-
onChange={handleChange}
403-
displayEmpty
404-
className={classes.select}
405-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
406-
>
407-
<MenuItem value="">none</MenuItem>
408-
<MenuItem value={'row'}>row</MenuItem>
409-
<MenuItem value={'column'}>column</MenuItem>
410-
</Select>
411-
</FormControl>
412-
</div>
413-
</div>
414-
<div className={classes.configRow}>
415-
<div className={classes.configType}>
416-
<h3>Justify content:</h3>
417-
</div>
418-
<div className={classes.configValue}>
419-
<FormControl variant="filled" className={classes.formControl}>
420-
<Select
421-
value={flexJustify}
422-
name="flexjust"
423-
onChange={handleChange}
424-
displayEmpty
425-
className={classes.select}
426-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
427-
>
428-
<MenuItem value="">none</MenuItem>
429-
<MenuItem value={'flex-start'}>flex-start</MenuItem>
430-
<MenuItem value={'flex-end'}>flex-end</MenuItem>
431-
<MenuItem value={'center'}>center</MenuItem>
432-
<MenuItem value={'space-between'}>space-between</MenuItem>
433-
<MenuItem value={'space-around'}>space-around</MenuItem>
434-
<MenuItem value={'space-evenly'}>space-evenly</MenuItem>
435-
</Select>
436-
</FormControl>
437-
</div>
438-
</div>
439-
<div className={classes.configRow}>
440-
<div className={classes.configType}>
441-
<h3>Align items:</h3>
442-
</div>
443-
<div className={classes.configValue}>
444-
<FormControl variant="filled" className={classes.formControl}>
445-
<Select
446-
value={flexAlign}
447-
onChange={handleChange}
448-
name="flexalign"
449-
displayEmpty
450-
className={classes.select}
451-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
452-
>
453-
<MenuItem value="">none</MenuItem>
454-
<MenuItem value={'stretch'}>stretch</MenuItem>
455-
<MenuItem value={'flex-start'}>flex-start</MenuItem>
456-
<MenuItem value={'flex-end'}>flex-end</MenuItem>
457-
<MenuItem value={'center'}>center</MenuItem>
458-
</Select>
459-
</FormControl>
460-
</div>
461-
</div>
380+
381+
<FormSelector
382+
classes={classes}
383+
isThemeLight={isThemeLight}
384+
selectValue={flexAlign}
385+
handleChange={handleChange}
386+
title='Flex direction:'
387+
name='flexdir'
388+
items={[{ value: '', text: 'none' }, { value: 'row', text: 'row' }, { value: 'column', text: 'column' }]}
389+
/>
390+
<FormSelector
391+
classes={classes}
392+
isThemeLight={isThemeLight}
393+
selectValue={flexAlign}
394+
handleChange={handleChange}
395+
title='Justify content:'
396+
name='flexjust'
397+
items={[{ value: '', text: 'none' }, { value: 'flex-start', text: 'flex-start' }, { value: 'flex-end', text: 'flex-end' }, { value: 'center', text: 'center' }, { value: 'space-between', text: 'space-between' }, { value: 'space-around', text: 'space-around' }, { value: 'space-evenly', text: 'space-evenly' }]}
398+
/>
399+
<FormSelector
400+
classes={classes}
401+
isThemeLight={isThemeLight}
402+
selectValue={flexAlign}
403+
handleChange={handleChange}
404+
title='Align items:'
405+
name='flexalign'
406+
items={[{ value: '', text: 'none' }, { value: 'stretch', text: 'stretch' }, { value: 'flex-start', text: 'flex-start' }, { value: 'flex-end', text: 'flex-end' }, { value: 'center', text: 'center' }]}
407+
/>
462408
</div>
463409
)}
464-
<div className={classes.configRow}>
465-
<div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
466-
<h3>Width:</h3>
467-
</div>
468-
<div className={classes.configValue}>
469-
<FormControl variant="filled" className={classes.formControl}>
470-
<Select
471-
value={compWidth}
472-
name="width"
473-
onChange={handleChange}
474-
displayEmpty
475-
className={classes.select}
476-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
477-
>
478-
<MenuItem value="">none</MenuItem>
479-
<MenuItem value={'auto'}>auto</MenuItem>
480-
<MenuItem value={'50%'}>50%</MenuItem>
481-
<MenuItem value={'25%'}>25%</MenuItem>
482-
</Select>
483-
</FormControl>
484-
</div>
485-
</div>
486-
<div className={classes.configRow}>
487-
<div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
488-
<h3>Height:</h3>
489-
</div>
490-
<div className={classes.configValue}>
491-
<FormControl variant="filled" className={classes.formControl}>
492-
<Select
493-
value={compHeight}
494-
name="height"
495-
onChange={handleChange}
496-
displayEmpty
497-
className={classes.select}
498-
inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
499-
>
500-
<MenuItem value="">none</MenuItem>
501-
<MenuItem value={'auto'}>auto</MenuItem>
502-
<MenuItem value={'100%'}>100%</MenuItem>
503-
<MenuItem value={'50%'}>50%</MenuItem>
504-
</Select>
505-
</FormControl>
506-
</div>
507-
</div>
410+
<FormSelector
411+
classes={classes}
412+
isThemeLight={isThemeLight}
413+
selectValue={compWidth}
414+
handleChange={handleChange}
415+
title='Width:'
416+
name='width'
417+
items={[{ value: '', text: 'none' }, { value: 'auto', text: 'auto' }, { value: '50%', text: '50%' }, { value: '25%', text: '25%' }]}
418+
/>
419+
<FormSelector
420+
classes={classes}
421+
isThemeLight={isThemeLight}
422+
selectValue={compWidth}
423+
handleChange={handleChange}
424+
title='Height:'
425+
name='height'
426+
items={[{ value: '', text: 'none' }, { value: 'auto', text: 'auto' }, { value: '100%', text: '100%' }, { value: '50%', text: '50%' }]}
427+
/>
428+
{/* Caret End */}
508429
<div className={classes.configRow}>
509430
<div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
510431
<h3>Background color:</h3>
@@ -585,22 +506,22 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
585506
</Button>
586507
</div>
587508
)}
588-
<div className = {classes.buttonRow}>
509+
<div className={classes.buttonRow}>
589510
<Button
590-
color="primary"
591-
className={classes.button}
592-
onClick={handleUndo}
511+
color="primary"
512+
className={classes.button}
513+
onClick={handleUndo}
593514
>
594515
<i className="fas fa-undo"></i>
595516
</Button>
596517
<Button
597-
color="primary"
598-
className={classes.button}
599-
onClick={handleRedo}
518+
color="primary"
519+
className={classes.button}
520+
onClick={handleRedo}
600521
>
601522
<i className="fas fa-redo"></i>
602523
</Button>
603-
</div>
524+
</div>
604525
</div>
605526

606527
</div>
@@ -701,4 +622,4 @@ const useStyles = makeStyles({
701622
},
702623
});
703624

704-
export default RightContainer;
625+
export default RightContainer;

0 commit comments

Comments
 (0)