Skip to content

Commit f7be121

Browse files
jzuniga206jzuniga206
committed
Added typing for HtmlAttr component
1 parent c6f6fdd commit f7be121

File tree

1 file changed

+131
-126
lines changed

1 file changed

+131
-126
lines changed

‎src/components/HtmlAttr.tsx

Lines changed: 131 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { HTMLelements } from '../utils/htmlElements.util';
1414
import { ComponentInt, ChildInt, PropsInt, PropInt } from '../utils/Interfaces';
1515

1616
interface HTMLAttrPropsInt extends PropsInt {
17-
updateHtmlAttr(arg: { attr: string; value: string }): void;
1817
classes: any;
18+
updateHtmlAttr(arg: { attr: string; value: string }): void;
1919
deleteProp(id: number): void;
2020
addProp(prop: PropInt): void;
2121
}
@@ -33,12 +33,12 @@ const styles = (theme: Theme): any => ({
3333
},
3434
cssFocused: {
3535
color: 'green'
36-
},
37-
input: {
38-
color: '#fff',
39-
opacity: '0.7',
40-
marginBottom: '15px'
4136
}
37+
// input: { // commented out b/c Typescript/Material doesn't allow 'input' in its styles object
38+
// color: '#fff',
39+
// opacity: '0.7',
40+
// marginBottom: '15px'
41+
// }
4242
});
4343

4444
const mapDispatchToProps = (dispatch: any) => ({
@@ -60,52 +60,45 @@ const availableButtonTypes = {
6060
};
6161

6262
// function for generating the button types for select dropdown
63-
const buttonTypeOptions = [
64-
<option value="" key="" />,
65-
...Object.keys(availableButtonTypes).map(type => (
66-
<option value={type} key={type} style={{ color: '#000' }}>
67-
{type == null ? '' : type}
68-
</option>
69-
))
70-
];
63+
const buttonTypeOptions = Object.keys(availableButtonTypes).map(type => (
64+
<option value={type} key={type} style={{ color: '#000' }}>
65+
{type}
66+
</option>
67+
));
7168

7269
// this is a variable to save temp state for button types
7370
let buttonTypeTemp: string;
7471

7572
// HtmlAttr is creating attributes grabbed from htmlElement & placing them
7673
// as the new state
7774
class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
78-
state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
79-
acc[attr] = '';
80-
81-
return acc;
82-
}, {});
83-
84-
// looks like:
85-
// className: '',
86-
// id: '',
87-
// type: '',
88-
// propType: ''
89-
90-
handleChange = (event: MouseEvent) => {
91-
// delete whenever you see this
92-
// just for testing
93-
// switch(event.target.id )
94-
// console.log(
95-
// 'EVENT.TARGET.VALUE DATA FROM HANDLECHANGE',
96-
// event.target.value
97-
// );
98-
99-
if (
100-
event.target.value == 'button' ||
101-
event.target.value == 'submit' ||
102-
event.target.value == 'reset'
103-
) {
104-
buttonTypeTemp = event.target.value;
105-
}
75+
state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce(
76+
(acc: any, attr: any) => {
77+
acc[attr] = '';
78+
79+
return acc;
80+
},
81+
{}
82+
);
83+
84+
handleChange = (
85+
event:
86+
| React.ChangeEvent<HTMLInputElement>
87+
| React.ChangeEvent<HTMLSelectElement>
88+
) => {
89+
// if ( -- COMMENTED OUT UNNEEDED CODE. DROPDOWN ONLY HAS THOSE THREE OPTIONS. REMOVE THIS EVENTUALLY.
90+
// event.target.value == 'button' ||
91+
// event.target.value == 'submit' ||
92+
// event.target.value == 'reset'
93+
// ) {
94+
// buttonTypeTemp = event.target.value;
95+
// }
96+
97+
// reassigns global variable for use by other listener functions
98+
buttonTypeTemp = event.target.value;
10699

107100
this.setState({
108-
[event.target.id]: event.target.value
101+
[event.target.id]: buttonTypeTemp
109102
});
110103
};
111104

@@ -130,96 +123,108 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
130123

131124
const focusChildType = focusChild.htmlElement;
132125

133-
const HtmlForm = HTMLelements[focusChildType].attributes.map((attr: string, i: number) => (
134-
<Grid container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
135-
<Grid item xs={1}>
136-
{/* if the attr being rendered for the HTMLForm is a button, then give it a special
126+
const HtmlForm = HTMLelements[focusChildType].attributes.map(
127+
(attr: string, i: number) => (
128+
<Grid
129+
container
130+
spacing={0}
131+
key={i}
132+
style={{ marginTop: '10px', marginRight: '20px' }}
133+
>
134+
<Grid item xs={1}>
135+
{/* if the attr being rendered for the HTMLForm is a button, then give it a special
137136
condition to render a "select" component rather than a text-input component */}
138-
{attr == 'type' ? (
139-
<FormControl required>
140-
<InputLabel className={classes.light} htmlFor="htmlType">
141-
Type
142-
</InputLabel>
143-
<Select
144-
native
145-
className={classes.light}
146-
id="htmlType"
147-
placeholder="title"
148-
onChange={this.handleChange}
149-
value={buttonTypeTemp}
150-
defaultValue={'button'}
151-
style={{
152-
background: '#424242',
153-
height: '45px',
154-
width: '146px',
155-
marginBottom: '23px',
156-
marginTop: '0px',
157-
color: '#fff',
158-
paddingLeft: '14px'
137+
{attr == 'type' ? (
138+
<FormControl required>
139+
<InputLabel className={classes.light} htmlFor='htmlType'>
140+
Type
141+
</InputLabel>
142+
<Select
143+
native
144+
className={classes.light}
145+
id='htmlType'
146+
placeholder='title'
147+
onChange={event => this.handleChange(event)}
148+
value={buttonTypeTemp}
149+
defaultValue={'button'}
150+
style={{
151+
background: '#424242',
152+
height: '45px',
153+
width: '146px',
154+
marginBottom: '23px',
155+
marginTop: '0px',
156+
color: '#fff',
157+
paddingLeft: '14px'
158+
}}
159+
required
160+
>
161+
{buttonTypeOptions}
162+
</Select>
163+
</FormControl>
164+
) : (
165+
<TextField
166+
InputLabelProps={{
167+
classes: {
168+
root: classes.cssLabel,
169+
focused: classes.cssFocused
170+
// input: classes.input -- commented out because 'input' not valid on Material typing
171+
}
159172
}}
160-
required
161-
>
162-
{buttonTypeOptions}
163-
</Select>
164-
</FormControl>
165-
) : (
166-
<TextField
167-
InputLabelProps={{
168-
classes: {
169-
root: classes.cssLabel,
170-
focused: classes.cssFocused,
171-
input: classes.input
172-
}
173+
InputProps={{
174+
classes: {
175+
root: classes.cssOutlinedInput,
176+
focused: classes.cssFocused,
177+
notchedOutline: classes.notchedOutline,
178+
input: classes.input
179+
}
180+
}}
181+
style={{ background: '#424242', height: '70%' }}
182+
label={attr}
183+
variant='outlined'
184+
id={attr}
185+
onChange={this.handleChange}
186+
value={this.state[attr]}
187+
/>
188+
)}
189+
</Grid>
190+
<Grid item xs={2}>
191+
<Fab
192+
variant='extended'
193+
size='small'
194+
color='default'
195+
aria-label='Save'
196+
style={{
197+
marginLeft: '10px',
198+
marginTop: '5px',
199+
marginBottom: '10px'
173200
}}
174-
InputProps={{
175-
classes: {
176-
root: classes.cssOutlinedInput,
177-
focused: classes.cssFocused,
178-
notchedOutline: classes.notchedOutline,
179-
input: classes.input
180-
}
201+
onClick={e => {
202+
e.preventDefault();
203+
this.handleSave(attr);
181204
}}
182-
style={{ background: '#424242', height: '70%' }}
183-
label={attr}
184-
variant="outlined"
185-
id={attr}
186-
onChange={this.handleChange}
187-
value={this.state[attr]}
188-
/>
189-
)}
190-
</Grid>
191-
<Grid item xs={2}>
192-
<Fab
193-
variant="extended"
194-
size="small"
195-
color="default"
196-
aria-label="Save"
197-
style={{
198-
marginLeft: '10px',
199-
marginTop: '5px',
200-
marginBottom: '10px'
201-
}}
202-
onClick={e => {
203-
e.preventDefault();
204-
this.handleSave(attr);
205-
}}
206-
>
207-
<SaveIcon />
208-
Save
209-
</Fab>
210-
</Grid>
211-
<Grid item xs={3}>
212-
<Paper className={classes.root} style={{ height: '70%' }}>
213-
<p style={{ color: 'black' }}>
214-
{focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
215-
</p>
216-
</Paper>
205+
>
206+
<SaveIcon />
207+
Save
208+
</Fab>
209+
</Grid>
210+
<Grid item xs={3}>
211+
<Paper className={classes.root} style={{ height: '70%' }}>
212+
<p style={{ color: 'black' }}>
213+
{focusChild.HTMLInfo[attr]
214+
? focusChild.HTMLInfo[attr]
215+
: ' no attribute assigned'}
216+
</p>
217+
</Paper>
218+
</Grid>
217219
</Grid>
218-
</Grid>
219-
));
220+
)
221+
);
220222

221223
return <div className={'htmlattr'}>{HtmlForm}</div>;
222224
}
223225
}
224226

225-
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HtmlAttr));
227+
export default connect(
228+
mapStateToProps,
229+
mapDispatchToProps
230+
)(withStyles(styles)(HtmlAttr));

0 commit comments

Comments
 (0)