Skip to content

Commit 2c7ff65

Browse files
jzuniga206jzuniga206
authored
Merge pull request #25 from ibeeliot/master
Set up foundation for propdrill down to children AND restyled component props tab
2 parents 2ac7716 + 612c4c5 commit 2c7ff65

16 files changed

+603
-152
lines changed

‎main.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,9 @@ const createWindow = () => {
216216
});
217217

218218
// dev tools opened on every browser creation
219-
mainWindow.webContents.openDevTools();
219+
mainWindow.webContents.once('dom-ready', () => {
220+
mainWindow.webContents.openDevTools();
221+
});
220222
};
221223

222224
// This method will be called when Electron has finished

‎package.json

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,9 @@
9090
]
9191
},
9292
"dependencies": {
93-
"@material-ui/core": "^3.9.3",
94-
"@material-ui/icons": "^2.0.0",
93+
"@material-ui/core": "^4.0.1",
94+
"@material-ui/icons": "^4.0.1",
95+
"@material-ui/styles": "^4.9.0",
9596
"@types/prettier": "^1.19.0",
9697
"@types/react": "^16.8.14",
9798
"@types/react-dom": "^16.8.4",
@@ -109,6 +110,7 @@
109110
"konva": "^4.1.6",
110111
"localforage": "^1.7.2",
111112
"lodash.throttle": "^4.1.1",
113+
"material-table": "^1.25.2",
112114
"prettier": "^1.19.1",
113115
"prop-types": "^15.6.2",
114116
"react": "^16.13.0",
@@ -137,7 +139,7 @@
137139
"clean-webpack-plugin": "^0.1.19",
138140
"concurrently": "^5.1.0",
139141
"copy-webpack-plugin": "^4.5.2",
140-
"cross-env": "^5.2.0",
142+
"cross-env": "^5.2.1",
141143
"css-loader": "^0.28.11",
142144
"electron": "^2.0.7",
143145
"electron-builder": "^20.44.4",
@@ -162,5 +164,11 @@
162164
"typescript": "^3.4.4",
163165
"webpack": "^4.42.0",
164166
"webpack-cli": "^3.3.11"
165-
}
167+
},
168+
"browserslist": [
169+
">0.2%",
170+
"not dead",
171+
"not ie <= 11",
172+
"not op_mini all"
173+
]
166174
}

‎src/components/AddChildProps.tsx

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import { ComponentInt } from '../utils/Interfaces';
4+
import { addProp, deleteProp } from '../actions/components';
5+
import DataTable from './DataTable';
6+
import MaterialTable from 'material-table';
7+
8+
const mapDispatchToProps = (dispatch: any) => ({
9+
addProp: ({
10+
key,
11+
value,
12+
required,
13+
type
14+
}: {
15+
key: string;
16+
value: string;
17+
required: boolean;
18+
type: string;
19+
}) =>
20+
dispatch(
21+
addProp({
22+
key,
23+
value,
24+
required,
25+
type
26+
})
27+
),
28+
deleteProp: (propId: number) => dispatch(deleteProp(propId))
29+
});
30+
31+
const mapStateToProps = (store: any) => ({
32+
focusComponent: store.workspace.focusComponent
33+
});
34+
35+
class AddChildProps extends Component {
36+
tableRef = React.createRef();
37+
// state = {
38+
// propVariables: '',
39+
// propValue: '',
40+
// propRequired: true,
41+
// propType: ''
42+
// };
43+
44+
// handleChange = (event: MouseEvent | any) => {
45+
// if (event.target.id === 'propVariable') {
46+
// this.setState({
47+
// [event.target.id]: event.target.value.trim()
48+
// });
49+
// } else {
50+
// this.setState({
51+
// [event.target.id]: event.target.value
52+
// });
53+
// }
54+
// };
55+
56+
// togglePropRequired = () => {
57+
// this.setState({
58+
// propRequired: !this.state.propRequired
59+
// });
60+
// };
61+
62+
// function that handles the addition of props to a given componnent
63+
// added regex to strip usr input from non alpha numeric properties
64+
// presence of these characters crashes the app and should not be a valid input anyways
65+
// handleAddProp = (event: MouseEvent) => {
66+
// event.preventDefault();
67+
68+
// // destructuring from local state
69+
// // if change here, make sure to change local state props to match
70+
// let { propVariable, propValue, propRequired, propType } = this.state;
71+
// propVariable = propVariable.replace(/[!@#$%^&*,./:;"]+\s/gi, '');
72+
// propValue = propValue.replace(/[!@#$%^&*,./:;'"]+\s/gi, '');
73+
74+
// // check if prop exists with same key. CANNOT have duplicates
75+
// const savedVariableKeys = this.props.focusComponent.props.map(
76+
// prop => prop.key
77+
// );
78+
// if (savedVariableKeys.includes(propVariable)) {
79+
// window.alert(`A prop with the name: "${propVariable}" already exists.`);
80+
// return;
81+
// }
82+
83+
// // check if prop starts with digits. Digits at string start breaks indexedDB
84+
// if (/^\d/.test(propVariable)) {
85+
// window.alert('Props are not allowed to begin with digits');
86+
// return;
87+
// }
88+
89+
// this.props.addProp({
90+
// key: propVariable,
91+
// value: propValue,
92+
// required: propRequired,
93+
// type: propType
94+
// });
95+
96+
// this.setState({
97+
// propVariable: '',
98+
// propValue: '',
99+
// propRequired: true,
100+
// propType: ''
101+
// });
102+
// };
103+
render() {
104+
const { focusComponent, classes, deleteProp, addProp } = this.props;
105+
106+
// Array to be used to populate HTML form elements
107+
const arrayPropsAvailable = [];
108+
109+
// IIFE : so that it runs without needing to be invoked
110+
(() => {
111+
focusComponent.props.map(prop => {
112+
// console.log('this is component Name from props array', prop.key);
113+
arrayPropsAvailable.push(
114+
<span>
115+
<input
116+
type='checkbox'
117+
id={`${prop}checkbox-${prop.key}`}
118+
name={`${prop}checkbox-${prop.key}`}
119+
/>
120+
<label
121+
className={`labelForPropsToAddToChild`}
122+
for={`${prop}checkbox-${prop.key}`}
123+
>
124+
{prop.key}
125+
</label>
126+
</span>
127+
);
128+
});
129+
})();
130+
131+
console.log('this is the array of props available', arrayPropsAvailable);
132+
133+
return (
134+
<div>
135+
<MaterialTable
136+
tableRef={this.tableRef}
137+
columns={[
138+
{
139+
title: 'Name',
140+
field: 'name',
141+
cellStyle: {
142+
width: 250,
143+
minWidth: 250
144+
},
145+
render: dataRows => <p>{`${dataRows.componentName}`}</p>
146+
},
147+
{
148+
title: 'Props To Add To Child',
149+
field: 'prop',
150+
render: () => <span>{arrayPropsAvailable}</span>
151+
}
152+
]}
153+
data={focusComponent.childrenArray}
154+
title='Add Your Child Props Here!'
155+
/>
156+
157+
<button
158+
onClick={() => {
159+
this.tableRef.current.onQueryChange();
160+
}}
161+
>
162+
Sean Sucks
163+
</button>
164+
</div>
165+
);
166+
}
167+
}
168+
169+
export default connect(mapStateToProps, mapDispatchToProps)(AddChildProps);

‎src/components/BottomTabs.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { Component } from 'react';
2+
import AddChildProps from './AddChildProps';
23
import { withStyles, Theme } from '@material-ui/core/styles';
34
import Tabs from '@material-ui/core/Tabs';
45
import Tab from '@material-ui/core/Tab';
@@ -10,7 +11,7 @@ import {
1011
ComponentInt,
1112
ComponentsInt,
1213
PropInt,
13-
PropsInt,
14+
PropsInt
1415
} from '../utils/Interfaces';
1516

1617
interface BottomTabsPropsInt extends PropsInt {
@@ -121,7 +122,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
121122
component.childrenArray.forEach(child => {
122123
if (child.childType === 'COMP') {
123124
tree.children.push(
124-
this.generateComponentTree(child.childComponentId, components),
125+
this.generateComponentTree(child.childComponentId, components)
125126
);
126127
} else {
127128
let str = { Type: 'HTML Element' };
@@ -149,7 +150,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
149150
// display count on the tab. user can see without clicking into tab
150151
const propCount = focusComponent.props.length;
151152
const htmlAttribCount = focusComponent.childrenArray.filter(
152-
child => child.childType === 'HTML',
153+
child => child.childType === 'HTML'
153154
).length;
154155

155156
return (
@@ -162,12 +163,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
162163
<Tab
163164
disableRipple
164165
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
165-
label="Application Tree"
166+
label='Application Tree'
166167
/>
167168
<Tab
168169
disableRipple
169170
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
170-
label="Code Preview"
171+
label='Code Preview'
171172
/>
172173
<Tab
173174
disableRipple
@@ -181,16 +182,16 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
181182
htmlAttribCount ? `(${htmlAttribCount})` : ''
182183
} `}
183184
/>
184-
{/* <Tab
185+
<Tab
185186
disableRipple
186187
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
187-
label="Component State"
188-
/> */}
188+
label='Add Child Props'
189+
/>
189190
</Tabs>
190191

191192
{value === 0 && (
192193
<div
193-
id="treeWrapper"
194+
id='treeWrapper'
194195
style={{
195196
width: '100%',
196197
height: '100%',
@@ -235,6 +236,7 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
235236
{value === 3 && focusChild.childType !== 'HTML' && (
236237
<p>Please select an HTML element to view attributes</p>
237238
)}
239+
{value === 4 && <AddChildProps />}
238240
</div>
239241
);
240242
}

‎src/components/DataTable.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@ function dataTable(props: any) {
3131
const { classes, rowData, rowHeader, deletePropHandler } = props;
3232

3333
const renderHeader = rowHeader.map((col: any, idx: number) => (
34-
<TableCell key={`head_+${idx}`}>{col}</TableCell>
34+
<TableCell align={'center'} key={`head_+${idx}`}>
35+
{col}
36+
</TableCell>
3537
));
3638

3739
function renderRowCells(row: any) {
@@ -50,7 +52,11 @@ function dataTable(props: any) {
5052
<TableRow key={`row-${row.id}`}>
5153
{renderRowCells(row)}
5254
<TableCell align={'center'} padding={'none'}>
53-
<IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)}>
55+
<IconButton
56+
color='default'
57+
fontSize='small'
58+
onClick={() => deletePropHandler(row.id)}
59+
>
5460
<DeleteIcon />
5561
</IconButton>
5662
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}

0 commit comments

Comments
 (0)