Skip to content

Commit 73f1a54

Browse files
ibeeliotibeeliot
committed
Refactored code.
Code ready for pull from upstream.
1 parent 4157d9f commit 73f1a54

File tree

3 files changed

+91
-122
lines changed

3 files changed

+91
-122
lines changed

‎src/components/HtmlAttr.tsx

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,48 +26,47 @@ const styles = (theme: Theme): any => ({
2626
root: {
2727
display: 'flex',
2828
justifyContent: 'center',
29-
flexWrap: 'wrap',
29+
flexWrap: 'wrap'
3030
},
3131
cssLabel: {
32-
color: 'white',
32+
color: 'white'
3333
},
3434
cssFocused: {
35-
color: 'green',
35+
color: 'green'
3636
},
3737
input: {
3838
color: '#fff',
3939
opacity: '0.7',
40-
marginBottom: '15px',
41-
},
40+
marginBottom: '15px'
41+
}
4242
});
4343

4444
const mapDispatchToProps = (dispatch: any) => ({
4545
updateHtmlAttr: ({ attr, value }: { attr: string; value: string }) => {
4646
dispatch(updateHtmlAttr({ attr, value }));
47-
},
47+
}
4848
});
4949

5050
const mapStateToProps = (store: any) => ({
5151
focusComponent: store.workspace.focusComponent,
52-
focusChild: store.workspace.focusChild,
52+
focusChild: store.workspace.focusChild
5353
});
5454

5555
// available types for select drop-down for button types
5656
const availableButtonTypes = {
5757
button: 'BUTTON',
5858
submit: 'SUBMIT',
59-
reset: 'RESET',
59+
reset: 'RESET'
6060
};
6161

6262
// function for generating the button types for select dropdown
6363
// uses Object.keys method on object of drop down types
6464
const buttonTypeOptions = [
65-
<option value='' key='' />,
66-
...Object.keys(availableButtonTypes).map(type => (
65+
Object.keys(availableButtonTypes).map(type => (
6766
<option value={type} key={type} style={{ color: '#000' }}>
6867
{type == null ? '' : type}
6968
</option>
70-
)),
69+
))
7170
];
7271

7372
// this is a variable to save temp state for button types
@@ -82,7 +81,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
8281

8382
return acc;
8483
},
85-
{},
84+
{}
8685
);
8786

8887
// State looks like:
@@ -92,16 +91,9 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
9291
// propType: ''
9392

9493
handleChange = (event: MouseEvent) => {
95-
if (
96-
event.target.value == 'button' ||
97-
event.target.value == 'submit' ||
98-
event.target.value == 'reset'
99-
) {
100-
buttonTypeTemp = event.target.value;
101-
}
102-
94+
buttonTypeTemp = event.target.value;
10395
this.setState({
104-
[event.target.id]: event.target.value,
96+
[event.target.id]: buttonTypeTemp
10597
});
10698
};
10799

@@ -111,12 +103,12 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
111103
if (attr == 'type') {
112104
this.props.updateHtmlAttr({ attr, value: buttonTypeTemp });
113105
this.setState({
114-
[attr]: '',
106+
[attr]: ''
115107
});
116108
} else {
117109
this.props.updateHtmlAttr({ attr, value: this.state[attr] });
118110
this.setState({
119-
[attr]: '',
111+
[attr]: ''
120112
});
121113
}
122114
};
@@ -157,7 +149,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
157149
marginBottom: '23px',
158150
marginTop: '0px',
159151
color: '#fff',
160-
paddingLeft: '14px',
152+
paddingLeft: '14px'
161153
}}
162154
required
163155
>
@@ -220,7 +212,7 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
220212
</Paper>
221213
</Grid>
222214
</Grid>
223-
),
215+
)
224216
);
225217

226218
return <div className={'htmlattr'}>{HtmlForm}</div>;
@@ -229,5 +221,5 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
229221

230222
export default connect(
231223
mapStateToProps,
232-
mapDispatchToProps,
224+
mapDispatchToProps
233225
)(withStyles(styles)(HtmlAttr));

‎src/components/LeftColExpansionPanel.tsx

Lines changed: 70 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import Tooltip from '@material-ui/core/Tooltip';
1313
import Collapse from '@material-ui/core/Collapse';
1414
import Switch from '@material-ui/core/Switch'; // for state/class toggling
1515
import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
16-
1716
import { ComponentInt, ComponentsInt, PropsInt } from '../utils/Interfaces'; // unused
1817
interface LeftColExpPanPropsInt extends PropsInt {
1918
classes: any;
@@ -29,12 +28,10 @@ interface LeftColExpPanPropsInt extends PropsInt {
2928
toggleComponentState(arg: number): void;
3029
toggleComponentClass(arg: number): void;
3130
}
32-
3331
//interface created but never used
3432
// interface TypographyProps {
3533
// type: string;
3634
// }
37-
3835
// TODO: ASSIGN SPECIFIC TYPING TO INCOMING PROPS (REMOVE ANY)
3936
const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4037
const {
@@ -49,24 +46,21 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
4946
toggleComponentState,
5047
toggleComponentClass
5148
} = props;
52-
5349
const { title, id, color, stateful, classBased } = component;
54-
5550
function isFocused() {
5651
return focusComponent.id === id ? 'focused' : '';
5752
}
58-
5953
// boolean flag to determine if the component card is focused or not
6054
// state/class toggles will be displayed when a component is focused
6155
const focusedToggle = isFocused() === 'focused' ? true : false;
62-
6356
return (
6457
<Grid
6558
container
6659
spacing={16}
6760
direction='row'
68-
justify='flex-start'
61+
justify='center'
6962
alignItems='center'
63+
style={{ minWidth: '320px' }}
7064
>
7165
<Grid item xs={9}>
7266
<div
@@ -89,7 +83,8 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
8983
style={{
9084
color: 'red',
9185
backgroundColor: color,
92-
borderRadius: '10px'
86+
borderRadius: '10px',
87+
minWidth: '320px'
9388
}}
9489
>
9590
<List style={{ color: 'red' }}>
@@ -115,49 +110,36 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
115110
>
116111
{title}
117112
</Typography>
118-
119113
{/* ALL OF THE STATE/CLASS TOGGLES AND LABELS ARE ONLY RENDERED IF THEIR COMPONENT IS THE FOCUSED COMPONENT
120-
121114
TO DO : IMPROVE DRYNESS OF CODE BY RENDERING ALL FOUR MATERIAL ELEMENTS (LABELS/SWITCH) IN ONE CONDITIONAL
122115
*/}
123-
124116
{/* LABEL AND TOGGLE(SWITCH) FOR STATEFULNESS */}
125117
{focusedToggle ? (
126-
<InputLabel
127-
htmlFor='stateful'
128-
style={{
129-
color: '#fff',
130-
marginBottom: '10px',
131-
marginTop: '0px',
132-
marginLeft: '11px',
133-
padding: '0px',
134-
fontSize: '18px',
135-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
136-
}}
137-
>
138-
State?
139-
</InputLabel>
140-
) : (
141-
''
142-
)}
143-
144-
{focusedToggle ? (
145-
<Switch
146-
checked={stateful}
147-
onChange={e => {
148-
toggleComponentState(id);
149-
changeFocusComponent({ title });
150-
}}
151-
value='stateful'
152-
color='primary'
153-
// id={props.id.toString()}
154-
/>
155-
) : (
156-
''
157-
)}
158-
<div>
159-
{/* LABEL/TOGGLE(SWITCH) FOR CLASS BASED */}
160-
{focusedToggle ? (
118+
<span style={{ display: 'inline-flex' }}>
119+
<InputLabel
120+
htmlFor='stateful'
121+
style={{
122+
color: '#fff',
123+
marginBottom: '10px',
124+
marginTop: '0px',
125+
marginLeft: '11px',
126+
padding: '0px',
127+
fontSize: '18px',
128+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.7)'
129+
}}
130+
>
131+
State?
132+
</InputLabel>
133+
<Switch
134+
checked={stateful}
135+
onChange={e => {
136+
toggleComponentState(id);
137+
changeFocusComponent({ title });
138+
}}
139+
value='stateful'
140+
color='primary'
141+
// id={props.id.toString()}
142+
/>
161143
<InputLabel
162144
htmlFor='classBased'
163145
style={{
@@ -171,11 +153,8 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
171153
}}
172154
>
173155
Class?
174-
</InputLabel>
175-
) : (
176-
''
177-
)}
178-
{focusedToggle ? (
156+
</InputLabel>{' '}
157+
(
179158
<Switch
180159
checked={classBased}
181160
onChange={e => {
@@ -185,48 +164,48 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
185164
value='classBased'
186165
color='primary'
187166
/>
188-
) : (
189-
''
190-
)}
191-
{focusedToggle && component.id !== 1 ? (
192-
<Button
193-
variant='text'
194-
size='small'
195-
color='default'
196-
aria-label='Delete'
197-
className={classes.margin}
198-
onClick={() =>
199-
deleteComponent({
200-
componentId: id,
201-
stateComponents: components
202-
})
203-
}
167+
</span>
168+
) : (
169+
''
170+
)}
171+
{focusedToggle && component.id !== 1 ? (
172+
<Button
173+
variant='text'
174+
size='small'
175+
color='default'
176+
aria-label='Delete'
177+
className={classes.margin}
178+
onClick={() =>
179+
deleteComponent({
180+
componentId: id,
181+
stateComponents: components
182+
})
183+
}
184+
style={{
185+
color: 'white',
186+
marginBottom: '0px',
187+
marginTop: '4px'
188+
}}
189+
>
190+
<DeleteIcon
191+
style={{
192+
color: '#b30000',
193+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)'
194+
}}
195+
/>
196+
<div
204197
style={{
205-
color: 'white',
206-
marginBottom: '0px',
207-
marginTop: '4px'
198+
marginTop: '3px',
199+
fontSize: '15px',
200+
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
208201
}}
209202
>
210-
<DeleteIcon
211-
style={{
212-
color: '#b30000',
213-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)'
214-
}}
215-
/>
216-
<span
217-
style={{
218-
marginTop: '3px',
219-
fontSize: '15px',
220-
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
221-
}}
222-
>
223-
Delete Component
224-
</span>
225-
</Button>
226-
) : (
227-
''
228-
)}
229-
</div>
203+
Delete Component
204+
</div>
205+
</Button>
206+
) : (
207+
''
208+
)}
230209
</div>
231210
}
232211
style={{ color }}
@@ -291,7 +270,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
291270
</Grid>
292271
);
293272
};
294-
295273
function styles(): any {
296274
return {
297275
root: {
@@ -307,5 +285,4 @@ function styles(): any {
307285
}
308286
};
309287
}
310-
311288
export default withStyles(styles)(LeftColExpansionPanel);

0 commit comments

Comments
 (0)