Skip to content

Commit 47e10a1

Browse files
ChristianEdwardPadillaChristianEdwardPadilla
authored
Merge pull request #67 from team-reactype/development
MVP
2 parents 5634296 + 5e9b75e commit 47e10a1

37 files changed

+2218
-1392
lines changed

‎main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function exportComponents() {
4444
ipcMain.on('choose_app_dir', (event) => {
4545
const directory = dialog.showOpenDialog(mainWindow, {
4646
properties: ['openDirectory'],
47+
buttonLabel: 'Export',
4748
});
4849

4950
if (!directory) return;

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,17 @@
7575
]
7676
},
7777
"dependencies": {
78-
"@material-ui/core": "^1.4.1",
78+
"@material-ui/core": "^3.9.3",
7979
"@material-ui/icons": "^2.0.0",
8080
"@types/react": "^16.8.14",
8181
"@types/react-dom": "^16.8.4",
82+
"@types/react-redux": "^7.0.8",
8283
"autoprefixer": "^9.0.1",
8384
"babel-polyfill": "^6.26.0",
8485
"classnames": "^2.2.6",
8586
"cli-spinner": "^0.2.8",
8687
"commander": "^2.17.1",
88+
"d3": "^5.9.2",
8789
"electron": "^2.0.7",
8890
"electron-reload": "^1.4.0",
8991
"enzyme": "^3.4.1",
@@ -93,6 +95,7 @@
9395
"prettier": "^1.14.2",
9496
"prop-types": "^15.6.2",
9597
"react": "^16.4.1",
98+
"react-d3-tree": "^1.12.3",
9699
"react-dom": "^16.4.1",
97100
"react-draggable": "^3.0.5",
98101
"react-konva": "^1.7.12",

‎src/actionTypes/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ export const DELETE_PROP = 'DELETE_PROP';
2525
export const ADD_PROP = 'ADD_PROP';
2626
export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
2727
export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
28+
export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';

‎src/actions/components.js

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
ADD_PROP,
2727
DELETE_ALL_DATA,
2828
CHANGE_IMAGE_PATH,
29+
UPDATE_HTML_ATTR,
2930
} from '../actionTypes/index';
3031

3132
import { loadState } from '../localStorage';
@@ -74,12 +75,9 @@ export const deleteChild = ({}) => (dispatch) => {
7475
};
7576

7677
export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
77-
console.log('Hello from component.js delete component.componentId= ', componentId);
78-
7978
// find all places where the "to be delted" is a child and do what u gotta do
8079
stateComponents.forEach((parent) => {
81-
parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
82-
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
80+
parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
8381
dispatch({
8482
type: DELETE_CHILD,
8583
payload: {
@@ -133,8 +131,8 @@ export const changeFocusComponent = ({ title }) => (dispatch) => {
133131
};
134132

135133
// make sure childId is being sent in
136-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
137-
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
134+
export const changeFocusChild = ({ childId }) => (dispatch) => {
135+
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { childId } });
138136
};
139137

140138
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
@@ -144,12 +142,15 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
144142
});
145143
};
146144

147-
export const exportFiles = ({ components, path }) => (dispatch) => {
145+
export const exportFiles = ({
146+
components, path, appName, exportAppBool,
147+
}) => (dispatch) => {
148+
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
148149
dispatch({
149150
type: EXPORT_FILES,
150151
});
151152

152-
createFiles(components, path)
153+
createFiles(components, path, appName, exportAppBool)
153154
.then(dir => dispatch({
154155
type: EXPORT_FILES_SUCCESS,
155156
payload: { status: true, dir: dir[0] },
@@ -183,26 +184,42 @@ export const createApplication = ({
183184
path,
184185
components = [],
185186
genOption,
186-
appName = 'proto_app',
187-
repoUrl,
187+
appName = 'reactype_app',
188+
exportAppBool,
188189
}) => (dispatch) => {
189190
if (genOption === 0) {
190-
dispatch(exportFiles({ path, components }));
191+
exportAppBool = false;
192+
dispatch(
193+
exportFiles({
194+
appName,
195+
path,
196+
components,
197+
exportAppBool,
198+
}),
199+
);
191200
} else if (genOption) {
201+
exportAppBool = true;
192202
dispatch({
193203
type: CREATE_APPLICATION,
194204
});
195205
createApplicationUtil({
196206
path,
197207
appName,
198208
genOption,
199-
repoUrl,
209+
exportAppBool,
200210
})
201211
.then(() => {
202212
dispatch({
203213
type: CREATE_APPLICATION_SUCCESS,
204214
});
205-
dispatch(exportFiles({ path: `${path}/${appName}`, components }));
215+
dispatch(
216+
exportFiles({
217+
appName,
218+
path,
219+
components,
220+
exportAppBool,
221+
}),
222+
);
206223
})
207224
.catch(err => dispatch({
208225
type: CREATE_APPLICATION_ERROR,
@@ -228,3 +245,10 @@ export const addProp = prop => ({
228245
type: ADD_PROP,
229246
payload: { ...prop },
230247
});
248+
249+
export const updateHtmlAttr = ({ attr, value }) => (dispatch) => {
250+
dispatch({
251+
type: UPDATE_HTML_ATTR,
252+
payload: { attr, value },
253+
});
254+
};

‎src/components/App.jsx renamed to ‎src/components/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { Component } from 'react';
22
import '../public/styles/style.css';
33
import { MuiThemeProvider } from '@material-ui/core/styles';
4-
import theme from './theme';
5-
import AppContainer from '../containers/AppContainer.jsx';
4+
import theme from './theme.ts';
5+
import AppContainer from '../containers/AppContainer.tsx';
66

77
class App extends Component {
88
render() {

‎src/components/BottomPanel.jsx

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,23 @@
1-
import React, { Component } from "react";
2-
import { connect } from "react-redux";
3-
import {
4-
handleClose,
5-
deleteCompProp,
6-
addCompProp
7-
} from "../actions/components";
8-
import RightTabs from "./RightTabs.jsx";
9-
import { some } from "bluebird-lst";
1+
import React, { Component } from 'react';
2+
import { connect } from 'react-redux';
3+
import { some } from 'bluebird-lst';
4+
import { handleClose, deleteCompProp, addCompProp } from '../actions/components';
5+
import RightTabs from './RightTabs.jsx';
106

11-
const IPC = require("electron").ipcRenderer;
7+
const IPC = require('electron').ipcRenderer;
128

139
const mapDispatchToProps = dispatch => ({
1410
handleNotificationClose: () => dispatch(handleClose()),
1511
deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
16-
addProp: prop => dispatch(addCompProp(prop))
12+
addProp: prop => dispatch(addCompProp(prop)),
1713
});
1814

1915
const mapStateToProps = store => ({
2016
// successOpen: store.workspace.successOpen,
2117
// errorOpen: store.workspace.errorOpen,
2218
// appDir: store.workspace.appDir,
23-
focusChild: store.workspace.focusChild
19+
focusChild: store.workspace.focusChild,
20+
components: store.workspace.components,
2421
});
2522

2623
class BottomPanel extends Component {
@@ -30,7 +27,7 @@ class BottomPanel extends Component {
3027
// };
3128

3229
viewAppDir = () => {
33-
IPC.send("view_app_dir", this.props.appDir);
30+
IPC.send('view_app_dir', this.props.appDir);
3431
};
3532

3633
render() {
@@ -43,12 +40,12 @@ class BottomPanel extends Component {
4340
focusComponent,
4441
deleteProp,
4542
addProp,
46-
focusChild
43+
focusChild,
4744
// rightColumnOpen
4845
} = this.props;
4946

5047
return (
51-
<div className="bottom-panel" style={{ width: "100%" }}>
48+
<div className="bottom-panel" style={{ width: '100%' }}>
5249
<RightTabs
5350
components={components}
5451
focusComponent={focusComponent}
@@ -71,5 +68,5 @@ class BottomPanel extends Component {
7168

7269
export default connect(
7370
mapStateToProps,
74-
mapDispatchToProps
71+
mapDispatchToProps,
7572
)(BottomPanel);

‎src/components/DataTable.jsx

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from "react";
1+
import React from 'react';
22
// import PropTypes from 'prop-types';
3-
import { withStyles } from "@material-ui/core/styles";
4-
import Table from "@material-ui/core/Table";
5-
import TableBody from "@material-ui/core/TableBody";
6-
import TableCell from "@material-ui/core/TableCell";
7-
import TableHead from "@material-ui/core/TableHead";
8-
import TableRow from "@material-ui/core/TableRow";
9-
import Paper from "@material-ui/core/Paper";
10-
import Button from "@material-ui/core/Button";
11-
import DeleteIcon from "@material-ui/icons/Delete";
12-
import { IconButton } from "@material-ui/core";
3+
import { withStyles } from '@material-ui/core/styles';
4+
import Table from '@material-ui/core/Table';
5+
import TableBody from '@material-ui/core/TableBody';
6+
import TableCell from '@material-ui/core/TableCell';
7+
import TableHead from '@material-ui/core/TableHead';
8+
import TableRow from '@material-ui/core/TableRow';
9+
import Paper from '@material-ui/core/Paper';
10+
import Button from '@material-ui/core/Button';
11+
import DeleteIcon from '@material-ui/icons/Delete';
12+
import { IconButton } from '@material-ui/core';
1313

1414
const styles = theme => ({
1515
root: {
16-
width: "80%",
16+
width: '80%',
1717
marginTop: theme.spacing.unit * 3,
18-
overflowX: "auto"
18+
// overflowX: "auto"
1919
},
2020
table: {
21-
minWidth: 500
22-
}
21+
minWidth: 500,
22+
},
2323
});
2424

2525
/** **************************
@@ -28,7 +28,9 @@ const styles = theme => ({
2828
* ****************************** */
2929

3030
function dataTable(props) {
31-
const { classes, rowData, rowHeader, deletePropHandler } = props;
31+
const {
32+
classes, rowData, rowHeader, deletePropHandler,
33+
} = props;
3234

3335
const renderHeader = rowHeader.map((col, idx) => (
3436
<TableCell key={`head_+${idx}`}>{col}</TableCell>
@@ -38,23 +40,19 @@ function dataTable(props) {
3840
if (!row) return;
3941
// for some reason we must put each value in a div.
4042
return rowHeader.map((header, idx) => (
41-
<TableCell align={"center"} key={`td_${idx}`}>
43+
<TableCell align={'center'} key={`td_${idx}`}>
4244
{/* <div align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
4345
{/* {row[header]} */}
44-
{typeof row[header] === "string" ? row[header] : row[header].toString()}
46+
{typeof row[header] === 'string' ? row[header] : row[header].toString()}
4547
</TableCell>
4648
));
4749
}
48-
//style={{height: 30}}
50+
// style={{height: 30}}
4951
const renderRows = rowData.map(row => (
5052
<TableRow key={`row-${row.id}`}>
5153
{renderRowCells(row)}
52-
<TableCell align={"center"} padding={"none"}>
53-
<IconButton
54-
color="default"
55-
fontSize="small"
56-
onClick={() => deletePropHandler(row.id)}
57-
>
54+
<TableCell align={'center'} padding={'none'}>
55+
<IconButton color="default" fontSize="small" onClick={() => deletePropHandler(row.id)}>
5856
<DeleteIcon />
5957
</IconButton>
6058
{/* <Button style={{height: 20}} onClick={() => deletePropHandler(row.id)}>Delete</Button> */}
@@ -64,7 +62,7 @@ function dataTable(props) {
6462

6563
return (
6664
<Paper className={classes.root}>
67-
<Table className={classes.table} selectable={"true"}>
65+
<Table className={classes.table} selectable={'true'}>
6866
<TableHead>
6967
<TableRow>{renderHeader}</TableRow>
7068
</TableHead>

0 commit comments

Comments
 (0)