Skip to content

Commit 79554a5

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
authored
Merge pull request #114 from team-reactype/development
1.0 merge
2 parents 3c2429b + 9a79ef5 commit 79554a5

File tree

6 files changed

+290
-257
lines changed

6 files changed

+290
-257
lines changed

‎main.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const path = require('path');
1+
const path = require("path");
22

33
const {
44
app, BrowserWindow, Menu, shell, dialog, ipcMain,
@@ -63,11 +63,15 @@ const createWindow = () => {
6363
width,
6464
height,
6565
webPreferences: {
66-
zoomFactor: 0.9,
66+
zoomFactor: 0.7,
6767
'node-Integration': false,
6868
},
6969
show: false,
70-
icon: path.join(__dirname, '/src/public/icons/mac/icon.icns'),
70+
icon: path.join(__dirname, "/src/public/icons/mac/icon.icns"),
71+
win: {
72+
icon: path.join(__dirname, "/src/public/icons/win/icon.ico"),
73+
target: ["portable"]
74+
}
7175
});
7276

7377
// and load the index.html of the app.

‎src/components/DataTable.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ import { IconButton } from "@material-ui/core";
1212
const styles = (theme: any) => ({
1313
root: {
1414
width: "80%",
15-
marginTop: theme.spacing.unit * 3
15+
marginTop: theme.spacing.unit * 3,
16+
marginRight: "100px"
1617
// overflowX: "auto"
1718
},
1819
table: {
19-
minWidth: 500
20+
minWidth: 500,
21+
marginRight: "100px"
2022
}
2123
});
2224

‎src/components/Props.tsx

Lines changed: 97 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
import React, { Component, Fragment } from "react";
2-
import { connect } from "react-redux";
3-
import { withStyles } from "@material-ui/core/styles";
4-
import FormControl from "@material-ui/core/FormControl";
5-
import Grid from "@material-ui/core/Grid";
6-
import TextField from "@material-ui/core/TextField";
7-
import Button from "@material-ui/core/Button";
8-
import Select from "@material-ui/core/Select";
9-
import Switch from "@material-ui/core/Switch";
10-
import InputLabel from "@material-ui/core/InputLabel";
11-
import { addProp, deleteProp } from "../actions/components.ts";
12-
import DataTable from "./DataTable.tsx";
13-
import { ComponentInt } from "../utils/interfaces.ts";
1+
import React, { Component, Fragment } from 'react';
2+
import { connect } from 'react-redux';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import FormControl from '@material-ui/core/FormControl';
5+
import Grid from '@material-ui/core/Grid';
6+
import TextField from '@material-ui/core/TextField';
7+
import Button from '@material-ui/core/Button';
8+
import Select from '@material-ui/core/Select';
9+
import Switch from '@material-ui/core/Switch';
10+
import InputLabel from '@material-ui/core/InputLabel';
11+
import { addProp, deleteProp } from '../actions/components.ts';
12+
import DataTable from './DataTable.tsx';
13+
import { ComponentInt } from '../utils/interfaces.ts';
1414

1515
interface PropInt {
1616
addProp: any;
@@ -21,125 +21,126 @@ interface PropInt {
2121

2222
const styles = (theme: any): any => ({
2323
root: {
24-
display: "flex",
25-
justifyContent: "center",
26-
flexWrap: "wrap"
24+
display: 'flex',
25+
justifyContent: 'center',
26+
flexWrap: 'wrap',
2727
},
2828
chip: {
29-
color: "#eee",
30-
backgroundColor: "#333333"
29+
color: '#eee',
30+
backgroundColor: '#333333',
3131
},
3232
column: {
33-
display: "inline-flex",
34-
alignItems: "baseline"
33+
display: 'inline-flex',
34+
alignItems: 'baseline',
3535
},
3636
icon: {
37-
fontSize: "20px",
38-
color: "#eee",
39-
opacity: "0.7",
40-
transition: "all .2s ease",
37+
fontSize: '20px',
38+
color: '#eee',
39+
opacity: '0.7',
40+
transition: 'all .2s ease',
4141

42-
"&:hover": {
43-
color: "red"
44-
}
42+
'&:hover': {
43+
color: 'red',
44+
},
4545
},
4646
cssLabel: {
47-
color: "white",
47+
color: 'white',
4848

49-
"&$cssFocused": {
50-
color: "green"
51-
}
49+
'&$cssFocused': {
50+
color: 'green',
51+
},
5252
},
5353
cssFocused: {},
5454
input: {
55-
color: "#eee",
56-
marginBottom: "10px",
57-
width: "60%"
55+
color: '#eee',
56+
marginBottom: '10px',
57+
width: '60%',
5858
},
5959
light: {
60-
color: "#eee"
60+
color: '#eee',
6161
},
6262
avatar: {
63-
color: "#eee",
64-
fontSize: "10px"
65-
}
63+
color: '#eee',
64+
fontSize: '10px',
65+
},
6666
});
6767

6868
const mapDispatchToProps = (dispatch: any) => ({
6969
addProp: ({
7070
key,
7171
value,
7272
required,
73-
type
73+
type,
7474
}: {
75-
key: string;
76-
value: string;
77-
required: boolean;
78-
type: string;
79-
}) =>
80-
dispatch(
81-
addProp({
82-
key,
83-
value,
84-
required,
85-
type
86-
})
87-
),
88-
deleteProp: (propId: number) => dispatch(deleteProp(propId))
75+
key: string;
76+
value: string;
77+
required: boolean;
78+
type: string;
79+
}) => dispatch(
80+
addProp({
81+
key,
82+
value,
83+
required,
84+
type,
85+
}),
86+
),
87+
deleteProp: (propId: number) => dispatch(deleteProp(propId)),
8988
});
9089

9190
const mapStateToProps = (store: any) => ({
92-
focusComponent: store.workspace.focusComponent
91+
focusComponent: store.workspace.focusComponent,
9392
});
9493

9594
const availablePropTypes = {
96-
string: "STR",
97-
number: "NUM",
98-
object: "OBJ",
99-
array: "ARR",
100-
boolean: "BOOL",
101-
function: "FUNC",
95+
string: 'STR',
96+
number: 'NUM',
97+
object: 'OBJ',
98+
array: 'ARR',
99+
boolean: 'BOOL',
100+
function: 'FUNC',
102101
// symbol: 'SYM',
103-
node: "NODE",
104-
element: "ELEM",
105-
any: "ANY",
106-
tuple: "TUP",
107-
enum: "ENUM"
102+
node: 'NODE',
103+
element: 'ELEM',
104+
any: 'ANY',
105+
tuple: 'TUP',
106+
enum: 'ENUM',
108107
};
109108

110109
const typeOptions = [
111110
<option value="" key="" />,
112111
...Object.keys(availablePropTypes).map(type => (
113-
<option value={type} key={type} style={{ color: "#000" }}>
112+
<option value={type} key={type} style={{ color: '#000' }}>
114113
{type}
115114
</option>
116-
))
115+
)),
117116
];
118117

119118
class Props extends Component<PropInt> {
120119
state = {
121-
propKey: "",
122-
propValue: "",
120+
propKey: '',
121+
propValue: '',
123122
propRequired: true,
124-
propType: ""
123+
propType: '',
125124
};
126125

127126
handleChange = (event: any) => {
128127
this.setState({
129-
[event.target.id]: event.target.value.trim()
128+
[event.target.id]: event.target.value.trim(),
130129
});
131130
};
132131

133132
togglePropRequired = () => {
134133
this.setState({
135-
propRequired: !this.state.propRequired
134+
propRequired: !this.state.propRequired,
136135
});
137136
};
138137

139138
handleAddProp = (event: any) => {
140139
event.preventDefault();
141140

142-
const { propKey, propValue, propRequired, propType } = this.state;
141+
const {
142+
propKey, propValue, propRequired, propType,
143+
} = this.state;
143144

144145
// check if prop exists with same key. CANNOT have duplicates
145146
const savedPropKeys = this.props.focusComponent.props.map(p => p.key);
@@ -150,53 +151,55 @@ class Props extends Component<PropInt> {
150151

151152
// check if prop starts with digits. Digits at string start breaks indexedDB
152153
if (/^\d/.test(propKey)) {
153-
window.alert("Props are not allowed to begin with digits");
154+
window.alert('Props are not allowed to begin with digits');
154155
return;
155156
}
156157

157158
this.props.addProp({
158159
key: propKey,
159160
value: propValue,
160161
required: propRequired,
161-
type: propType
162+
type: propType,
162163
});
163164

164165
this.setState({
165-
propKey: "",
166-
propValue: "",
166+
propKey: '',
167+
propValue: '',
167168
propRequired: true,
168-
propType: ""
169+
propType: '',
169170
});
170171
};
171172

172173
render() {
173-
const { focusComponent, classes, deleteProp, addProp } = this.props;
174+
const {
175+
focusComponent, classes, deleteProp, addProp,
176+
} = this.props;
174177

175-
const rowHeader = ["_Key", "Value", "Type", "Required"];
178+
const rowHeader = ['_Key', 'Value', 'Type', 'Required'];
176179
// prepare the saved Props in a nice way, so you can sent them to TableData
177180
const propsRows = focusComponent.props.map(prop => ({
178181
_Key: prop.key,
179182
Value: prop.value,
180183
Type: prop.type,
181184
Required: prop.required,
182-
id: prop.id
185+
id: prop.id,
183186
}));
184187

185188
return (
186-
<div className={"htmlattr"}>
187-
{" "}
189+
<div className={'htmlattr'}>
190+
{' '}
188191
{Object.keys(focusComponent).length < 1 ? (
189-
<div style={{ marginTop: "20px", width: "90%" }}>
192+
<div style={{ marginTop: '20px', width: '90%' }}>
190193
Click a component to view its props.
191194
</div>
192195
) : (
193196
<Fragment>
194197
<div
195198
className="props-container"
196-
style={{ marginTop: "20px", width: "90%", height: "80%" }}
199+
style={{ marginTop: '20px', width: '90%', height: '80%' }}
197200
>
198201
<Grid container spacing={8}>
199-
<Grid item xs={4}>
202+
<Grid item xs={3}>
200203
<form className="props-input" onSubmit={this.handleAddProp}>
201204
<Grid container spacing={8}>
202205
<Grid item xs={6}>
@@ -209,10 +212,10 @@ class Props extends Component<PropInt> {
209212
value={this.state.propKey}
210213
required
211214
InputProps={{
212-
className: classes.input
215+
className: classes.input,
213216
}}
214217
InputLabelProps={{
215-
className: classes.input
218+
className: classes.input,
216219
}}
217220
/>
218221
</Grid>
@@ -223,20 +226,17 @@ class Props extends Component<PropInt> {
223226
margin="normal"
224227
onChange={this.handleChange}
225228
InputProps={{
226-
className: classes.input
229+
className: classes.input,
227230
}}
228231
InputLabelProps={{
229-
className: classes.input
232+
className: classes.input,
230233
}}
231234
value={this.state.propValue}
232235
/>
233236
</Grid>
234237
<Grid item xs={6}>
235238
<FormControl required>
236-
<InputLabel
237-
className={classes.light}
238-
htmlFor="propType"
239-
>
239+
<InputLabel className={classes.light} htmlFor="propType">
240240
Type
241241
</InputLabel>
242242
<Select
@@ -254,10 +254,7 @@ class Props extends Component<PropInt> {
254254
</Grid>
255255
<Grid item xs={6}>
256256
<div className={classes.column}>
257-
<InputLabel
258-
className={classes.light}
259-
htmlFor="propRequired"
260-
>
257+
<InputLabel className={classes.light} htmlFor="propRequired">
261258
Required?
262259
</InputLabel>
263260
<Switch
@@ -291,6 +288,7 @@ class Props extends Component<PropInt> {
291288
deletePropHandler={deleteProp}
292289
/>
293290
</Grid>
291+
<Grid item xs={1} />
294292
</Grid>
295293
</div>
296294
</Fragment>
@@ -302,5 +300,5 @@ class Props extends Component<PropInt> {
302300

303301
export default connect(
304302
mapStateToProps,
305-
mapDispatchToProps
303+
mapDispatchToProps,
306304
)(withStyles(styles)(Props));

0 commit comments

Comments
 (0)