Skip to content

Commit 25fb972

Browse files
tonyitotonyito
authored
Merge pull request #42 from jzuniga206/feature
Added Typing to onChange events and fixed styling in bottom panel
2 parents 9fc8c1d + 6f14d53 commit 25fb972

File tree

7 files changed

+89
-58
lines changed

7 files changed

+89
-58
lines changed

‎src/components/bottom/CodePreview.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ type CodePreviewProps = {
1919
};
2020

2121
class CodePreview extends Component<CodePreviewProps> {
22-
2322
//checking if the code has been asigned yet or not
2423
//if no then generate code and asign to a focus component
2524
componentDidMount() {
@@ -67,10 +66,10 @@ class CodePreview extends Component<CodePreviewProps> {
6766
}}
6867
>
6968
<AceEditor
70-
mode="javascript"
71-
theme="monokai"
72-
width="100%"
73-
height="100%"
69+
mode='javascript'
70+
theme='monokai'
71+
width='100%'
72+
height='100%'
7473
style={{
7574
border: '2px solid #33eb91',
7675
borderRadius: '8px'
@@ -82,19 +81,19 @@ class CodePreview extends Component<CodePreviewProps> {
8281
})
8382
}
8483
value={this.props.focusComponent.code}
85-
name="Code_div"
84+
name='Code_div'
8685
readOnly={this.props.codeReadOnly}
8786
editorProps={{ $blockScrolling: true }}
8887
fontSize={16}
8988
/>
9089
<div style={{ display: 'flex', flexDirection: 'column' }}>
9190
<Button
92-
color="primary"
93-
aria-label="Add"
94-
type="submit"
91+
color='primary'
92+
aria-label='Add'
93+
type='submit'
9594
// disabled={!this.state.propKey || !this.state.propType}
96-
variant="contained"
97-
size="large"
95+
variant='contained'
96+
size='large'
9897
style={{ justifySelf: 'center' }}
9998
className={this.props.classes.startEdit}
10099
onClick={e => {

‎src/components/bottom/DataTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { IconButton } from '@material-ui/core';
1212
const styles = (theme: Theme) => ({
1313
root: {
1414
width: '650px',
15-
marginTop: theme.spacing.unit * 3,
15+
marginTop: theme.spacing(3),
1616
borderRadius: '8px',
1717
// boxShadow: '0px 0px 5px 2px #97ffb6'
1818
boxShadow: '0px 0px 5px 2px lightgray'

‎src/components/bottom/HtmlAttr.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ import { HTMLelements } from '../../utils/htmlElements.util';
1414
import { PropsInt, PropInt } from '../../interfaces/Interfaces';
1515

1616
interface HTMLAttrPropsInt extends PropsInt {
17-
classes: any;
18-
updateHtmlAttr(arg: { attr: string; value: string }): void;
19-
deleteProp(id: number): void;
20-
addProp(prop: PropInt): void;
17+
/*JZ: had to make all props optional, for PropsInt as well, due to typing errors in parent component
18+
because no props were passed down since they are all obtained from redux store */
19+
classes?: any;
20+
updateHtmlAttr?: (arg: { attr: string; value: string }) => void;
2121
}
2222

2323
interface StateInt {}
@@ -188,7 +188,10 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
188188
className={classes.select}
189189
id='htmlType'
190190
placeholder='title'
191-
onChange={event => this.handleChange(event)}
191+
// TS expects a change event type, so it must be specified in the onChange events
192+
onChange={(event: React.ChangeEvent<HTMLSelectElement>) =>
193+
this.handleChange(event)
194+
}
192195
value={buttonTypeTemp}
193196
defaultValue={`${``}`}
194197
required
@@ -211,7 +214,9 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
211214
label={attr}
212215
variant='outlined'
213216
id={attr}
214-
onChange={this.handleChange}
217+
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
218+
this.handleChange(event)
219+
}
215220
value={this.state[attr]}
216221
/>
217222
)}

‎src/components/bottom/Props.tsx

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ interface PropsPropsInt extends PropsInt {
1717
deleteProp(propId: number): void;
1818
}
1919

20+
interface StateInt {
21+
propVariable: string;
22+
propValue: string;
23+
propRequired: boolean;
24+
propType: string;
25+
}
26+
2027
const styles = () => ({
2128
root: {
2229
display: 'flex',
@@ -151,29 +158,21 @@ const availablePropTypes = {
151158
array: 'ARR',
152159
boolean: 'BOOL',
153160
function: 'FUNC',
154-
// symbol: 'SYM',
155-
// node: 'NODE',
156-
// element: 'ELEM',
157161
any: 'ANY',
158162
tuple: 'TUP',
159163
enum: 'ENUM'
160164
};
161165

162166
// generates the various options for the prop type selection
163167
const typeOptions = [
164-
<option value="" key="" />,
168+
<option value='' key='' />,
165169
...Object.keys(availablePropTypes).map(type => (
166170
<option value={type} key={type} style={{ color: '#000' }}>
167171
{type}
168172
</option>
169173
))
170174
];
171-
interface StateInt {
172-
propVariable: string;
173-
propValue: string;
174-
propRequired: boolean;
175-
propType: string;
176-
}
175+
177176
class Props extends Component<PropsPropsInt, StateInt> {
178177
constructor(props: PropsPropsInt) {
179178
super(props);
@@ -186,14 +185,19 @@ class Props extends Component<PropsPropsInt, StateInt> {
186185
}
187186

188187
// using useState to locally check a clickedValue
189-
190-
handleChange = (event: MouseEvent | any) => {
188+
// React.ChangeEvent<HTML...Element> is the correct typing for events
189+
handleChange = (
190+
event:
191+
| React.ChangeEvent<HTMLInputElement>
192+
| React.ChangeEvent<HTMLSelectElement>
193+
) => {
191194
if (event.target.id === 'propVariable') {
192195
this.setState({
193196
[event.target.id]: event.target.value.trim()
194197
});
195198
} else {
196199
this.setState({
200+
...this.state, // JZ: added state here to correct typing error of missing properties
197201
[event.target.id]: event.target.value
198202
});
199203
}
@@ -208,7 +212,7 @@ class Props extends Component<PropsPropsInt, StateInt> {
208212
// function that handles the addition of props to a given componnent
209213
// added regex to strip usr input from non alpha numeric properties
210214
// presence of these characters crashes the app and should not be a valid input anyways
211-
handleAddProp = (event: MouseEvent) => {
215+
handleAddProp = (event: React.ChangeEvent<HTMLFormElement>) => {
212216
event.preventDefault();
213217

214218
// destructuring from local state
@@ -262,7 +266,10 @@ class Props extends Component<PropsPropsInt, StateInt> {
262266
}));
263267

264268
return (
265-
<div className={'htmlattr'}>
269+
<div
270+
className={'htmlattr'}
271+
style={{ overflowY: 'auto', height: '85%', marginTop: '1rem' }}
272+
>
266273
{' '}
267274
{/* if no focus component in state, then render message */}
268275
{Object.keys(focusComponent).length < 1 ? (
@@ -292,24 +299,33 @@ class Props extends Component<PropsPropsInt, StateInt> {
292299
</span>
293300
</div>
294301
<div
295-
className="props-container"
302+
className='props-container'
296303
style={{ marginTop: '20px', width: '90%', height: '80%' }}
297304
>
298-
<Grid container spacing={8}>
305+
<Grid container spacing={8} style={{ overflowY: 'auto' }}>
299306
<Grid item xs={3}>
300-
<form className="props-input" onSubmit={this.handleAddProp}>
307+
<form
308+
className='props-input'
309+
// JZ: assigned typing to onSubmit event, matches handleAddProp func
310+
onSubmit={(event: React.ChangeEvent<HTMLFormElement>) =>
311+
this.handleAddProp(event)
312+
}
313+
>
301314
<Grid container spacing={8}>
302315
<Grid item xs={6}>
303316
<FormControl>
304317
<TextField
305-
type="text"
306-
native
307-
id="propVariable"
308-
label="Prop"
309-
margin="none"
318+
type='text'
319+
// native commented out due to overload error with material
320+
id='propVariable'
321+
label='Prop'
322+
margin='none'
310323
autoFocus
311-
size="medium"
312-
onChange={this.handleChange}
324+
size='medium'
325+
onChange={(
326+
//JZ: assigned typing to incoming event
327+
event: React.ChangeEvent<HTMLInputElement>
328+
) => this.handleChange(event)}
313329
value={this.state.propVariable}
314330
color={'primary'}
315331
required
@@ -342,15 +358,15 @@ class Props extends Component<PropsPropsInt, StateInt> {
342358
<FormControl required>
343359
<InputLabel
344360
className={classes.selectLabel}
345-
htmlFor="propType"
361+
htmlFor='propType'
346362
>
347363
Type
348364
</InputLabel>
349365
<Select
350366
native
351367
className={classes.select}
352-
id="propType"
353-
placeholder="title"
368+
id='propType'
369+
placeholder='title'
354370
onChange={this.handleChange}
355371
value={this.state.propType}
356372
required
@@ -378,12 +394,12 @@ class Props extends Component<PropsPropsInt, StateInt> {
378394
</Grid> */}
379395
<Grid item>
380396
<Button
381-
color="primary"
382-
aria-label="Add"
383-
type="submit"
397+
color='primary'
398+
aria-label='Add'
399+
type='submit'
384400
// disabled={!this.state.propKey || !this.state.propType}
385-
variant="contained"
386-
size="large"
401+
variant='contained'
402+
size='large'
387403
className={classes.addProp}
388404
>
389405
ADD PROP
@@ -396,10 +412,12 @@ class Props extends Component<PropsPropsInt, StateInt> {
396412
item
397413
xs={8}
398414
style={{
399-
height: '17rem',
400-
overflow: 'scroll',
415+
height: '75%',
416+
overflowY: 'auto',
417+
overflowX: 'auto',
401418
marginTop: '1rem',
402-
paddingBottom: '1rem',
419+
// paddingBottom: '1rem',
420+
marginLeft: '6rem',
403421
paddingTop: '0'
404422
}}
405423
>

‎src/components/left/HTMLComponentPanel.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,19 @@ class HTMLComponentPanel extends Component<HTMLCompPropsInt, StateInt> {
3838
render(): JSX.Element {
3939
const { classes } = this.props;
4040
return (
41-
<div align='center'>
41+
<div style={{ textAlign: 'center' }}>
4242
<Tab
4343
disableRipple
4444
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
45-
label='Add HTML elements'
46-
style={{ cursor: 'default' }}
45+
label='Add HTML Elements'
46+
style={{
47+
cursor: 'default',
48+
fontSize: '1.2em',
49+
textShadow: '2px 2px 2px black',
50+
paddingBottom: '20px'
51+
}}
4752
/>
48-
<Grid container spacing={8} alignItems='baseline' align='stretch'>
53+
<Grid container spacing={6} alignItems='center'>
4954
<Grid item xs={4}>
5055
<div className='htmliconwrapper'>
5156
<IconButton

‎src/components/left/LeftColExpansionPanel.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
ComponentsInt,
2020
PropsInt
2121
} from '../../interfaces/Interfaces'; // unused
22+
2223
interface LeftColExpPanPropsInt extends PropsInt {
2324
classes: any;
2425
id?: number;
@@ -63,10 +64,13 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
6364
handleChangeName,
6465
handleEditComponent
6566
} = props;
67+
6668
const { title, id, color, stateful, classBased } = component;
69+
6770
function isFocused() {
6871
return focusComponent.id === id ? 'focused' : '';
6972
}
73+
7074
// boolean flag to determine if the component card is focused or not
7175
// state/class toggles will be displayed when a component is focused
7276
const focusedToggle = isFocused() === 'focused' ? true : false;

‎src/interfaces/Interfaces.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface PropInt {
1010

1111
export interface PropsInt {
1212
focusChild?: ChildInt;
13-
components: ComponentsInt;
13+
components?: ComponentsInt;
1414
focusComponent?: ComponentInt;
1515
imageSource?: string;
1616
changeFocusChild?: (arg: { childId: number }) => void;

0 commit comments

Comments
 (0)