Skip to content

Commit 683ec15

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #58 from tolgamizrakci/development
html comp updates and styling improvements
2 parents b7293e0 + 509f9d9 commit 683ec15

File tree

13 files changed

+585
-499
lines changed

13 files changed

+585
-499
lines changed

‎src/actionTypes/index.js

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
export const LOAD_INIT_DATA = 'LOAD_INIT_DATA';
2-
export const ADD_COMPONENT = 'ADD_COMPONENT';
3-
export const ADD_CHILD = 'ADD_CHILD';
4-
export const DELETE_CHILD = 'DELETE_CHILD';
5-
export const UPDATE_COMPONENT = 'UPDATE_COMPONENT';
6-
export const DELETE_COMPONENT = 'DELETE_COMPONENT';
7-
export const CHANGE_FOCUS_COMPONENT = 'CHANGE_FOCUS_COMPONENT';
8-
export const CHANGE_COMPONENT_FOCUS_CHILD = 'CHANGE_COMPONENT_FOCUS_CHILD';
9-
export const CHANGE_FOCUS_CHILD = 'CHANGE_FOCUS_CHILD';
10-
export const UPDATE_CHILDREN = 'UPDATE_CHILDREN';
11-
export const REASSIGN_PARENT = 'REASSIGN_PARENT';
12-
export const SET_SELECTABLE_PARENTS = 'SET_SELECTABLE_PARENTS';
13-
export const EXPORT_FILES = 'EXPORT_FILES';
14-
export const EXPORT_FILES_SUCCESS = 'EXPORT_FILES_SUCCESS';
15-
export const EXPORT_FILES_ERROR = 'EXPORT_FILES_ERROR';
16-
export const HANDLE_CLOSE = 'HANDLE_CLOSE';
17-
export const HANDLE_TRANSFORM = 'HANDLE_TRANSFORM';
18-
export const CREATE_APPLICATION = 'CREATE_APPLICATION';
19-
export const CREATE_APPLICATION_SUCCESS = 'CREATE_APPLICATION_SUCCESS';
20-
export const CREATE_APPLICATION_ERROR = 'CREATE_APPLICATION_ERROR';
21-
export const MOVE_TO_BOTTOM = 'MOVE_TO_BOTTOM';
22-
export const MOVE_TO_TOP = 'MOVE_TO_TOP';
23-
export const OPEN_EXPANSION_PANEL = 'OPEN_EXPANSION_PANEL';
24-
export const DELETE_PROP = 'DELETE_PROP';
25-
export const ADD_PROP = 'ADD_PROP';
26-
export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
27-
export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
1+
export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
2+
export const ADD_COMPONENT = "ADD_COMPONENT";
3+
export const ADD_CHILD = "ADD_CHILD";
4+
export const DELETE_CHILD = "DELETE_CHILD";
5+
export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
6+
export const DELETE_COMPONENT = "DELETE_COMPONENT";
7+
export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";
8+
export const CHANGE_COMPONENT_FOCUS_CHILD = "CHANGE_COMPONENT_FOCUS_CHILD";
9+
export const CHANGE_FOCUS_CHILD = "CHANGE_FOCUS_CHILD";
10+
export const UPDATE_CHILDREN = "UPDATE_CHILDREN";
11+
export const REASSIGN_PARENT = "REASSIGN_PARENT";
12+
export const SET_SELECTABLE_PARENTS = "SET_SELECTABLE_PARENTS";
13+
export const EXPORT_FILES = "EXPORT_FILES";
14+
export const EXPORT_FILES_SUCCESS = "EXPORT_FILES_SUCCESS";
15+
export const EXPORT_FILES_ERROR = "EXPORT_FILES_ERROR";
16+
export const HANDLE_CLOSE = "HANDLE_CLOSE";
17+
export const HANDLE_TRANSFORM = "HANDLE_TRANSFORM";
18+
export const CREATE_APPLICATION = "CREATE_APPLICATION";
19+
export const CREATE_APPLICATION_SUCCESS = "CREATE_APPLICATION_SUCCESS";
20+
export const CREATE_APPLICATION_ERROR = "CREATE_APPLICATION_ERROR";
21+
export const MOVE_TO_BOTTOM = "MOVE_TO_BOTTOM";
22+
export const MOVE_TO_TOP = "MOVE_TO_TOP";
23+
export const OPEN_EXPANSION_PANEL = "OPEN_EXPANSION_PANEL";
24+
export const DELETE_PROP = "DELETE_PROP";
25+
export const ADD_PROP = "ADD_PROP";
26+
export const DELETE_ALL_DATA = "DELETE_ALL_DATA";
27+
export const CHANGE_IMAGE_PATH = "CHANGE_IMAGE_PATH";
28+
export const UPDATE_HTML_ATTR = "UPDATE_HTML_ATTR";

‎src/actions/components.js

Lines changed: 96 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,23 @@ import {
2626
ADD_PROP,
2727
DELETE_ALL_DATA,
2828
CHANGE_IMAGE_PATH,
29-
} from '../actionTypes/index';
29+
UPDATE_HTML_ATTR
30+
} from "../actionTypes/index";
3031

31-
import { loadState } from '../localStorage';
32+
import { loadState } from "../localStorage";
3233

33-
import createFiles from '../utils/createFiles.util';
34-
import createApplicationUtil from '../utils/createApplication.util';
34+
import createFiles from "../utils/createFiles.util";
35+
import createApplicationUtil from "../utils/createApplication.util";
3536

36-
export const loadInitData = () => (dispatch) => {
37-
loadState().then(data => dispatch({
38-
type: LOAD_INIT_DATA,
39-
payload: {
40-
data: data ? data.workspace : {},
41-
},
42-
}));
37+
export const loadInitData = () => dispatch => {
38+
loadState().then(data =>
39+
dispatch({
40+
type: LOAD_INIT_DATA,
41+
payload: {
42+
data: data ? data.workspace : {}
43+
}
44+
})
45+
);
4346
};
4447

4548
// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -60,39 +63,47 @@ export const loadInitData = () => (dispatch) => {
6063
// },
6164
// });
6265

63-
export const addComponent = ({ title }) => (dispatch) => {
66+
export const addComponent = ({ title }) => dispatch => {
6467
dispatch({ type: ADD_COMPONENT, payload: { title } });
6568
};
6669

67-
export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
70+
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
6871
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
6972
};
7073

71-
export const deleteChild = ({}) => (dispatch) => {
74+
export const deleteChild = ({}) => dispatch => {
7275
// with no payload, it will delete focusd child
7376
dispatch({ type: DELETE_CHILD, payload: {} });
7477
};
7578

76-
export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
77-
console.log('Hello from component.js delete component.componentId= ', componentId);
79+
export const deleteComponent = ({
80+
componentId,
81+
stateComponents
82+
}) => dispatch => {
83+
console.log(
84+
"Hello from component.js delete component.componentId= ",
85+
componentId
86+
);
7887

7988
// find all places where the "to be delted" is a child and do what u gotta do
80-
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}`)
83-
dispatch({
84-
type: DELETE_CHILD,
85-
payload: {
86-
parentId: parent.id,
87-
childId: child.childId,
88-
calledFromDeleteComponent: true,
89-
},
89+
stateComponents.forEach(parent => {
90+
parent.childrenArray
91+
.filter(child => child.childComponentId == componentId)
92+
.forEach(child => {
93+
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
94+
dispatch({
95+
type: DELETE_CHILD,
96+
payload: {
97+
parentId: parent.id,
98+
childId: child.childId,
99+
calledFromDeleteComponent: true
100+
}
101+
});
90102
});
91-
});
92103
});
93104

94105
// change focus to APp
95-
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
106+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
96107
// after taking care of the children delete the component
97108
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
98109
};
@@ -128,104 +139,132 @@ export const deleteComponent = ({ componentId, stateComponents }) => (dispatch)
128139
// dispatch({ type: SET_SELECTABLE_PARENTS });
129140
// };
130141

131-
export const changeFocusComponent = ({ title }) => (dispatch) => {
142+
export const changeFocusComponent = ({ title }) => dispatch => {
132143
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
133144
};
134145

135146
// make sure childId is being sent in
136-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
147+
export const changeFocusChild = ({ title, childId }) => dispatch => {
137148
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
138149
};
139150

140-
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
151+
export const changeComponentFocusChild = ({
152+
componentId,
153+
childId
154+
}) => dispatch => {
141155
dispatch({
142156
type: CHANGE_COMPONENT_FOCUS_CHILD,
143-
payload: { componentId, childId },
157+
payload: { componentId, childId }
144158
});
145159
};
146160

161+
<<<<<<< HEAD
162+
export const exportFiles = ({ components, path }) => dispatch => {
163+
=======
147164
export const exportFiles = ({ components, path }) => (dispatch) => {
148165
// this dispatch sets the global state property 'loading' to true until the createFiles call resolves below
166+
>>>>>>> b7293e0b5086a0b3845de7570cc40c7eb47578af
149167
dispatch({
150-
type: EXPORT_FILES,
168+
type: EXPORT_FILES
151169
});
152170

153171
createFiles(components, path)
154-
.then(dir => dispatch({
155-
type: EXPORT_FILES_SUCCESS,
156-
payload: { status: true, dir: dir[0] },
157-
}))
158-
.catch(err => dispatch({
159-
type: EXPORT_FILES_ERROR,
160-
payload: { status: true, err },
161-
}));
172+
.then(dir =>
173+
dispatch({
174+
type: EXPORT_FILES_SUCCESS,
175+
payload: { status: true, dir: dir[0] }
176+
})
177+
)
178+
.catch(err =>
179+
dispatch({
180+
type: EXPORT_FILES_ERROR,
181+
payload: { status: true, err }
182+
})
183+
);
162184
};
163185

164186
export const handleClose = () => ({
165187
type: HANDLE_CLOSE,
166-
payload: false,
188+
payload: false
167189
});
168190

169-
export const handleTransform = (componentId, childId, {
170-
x, y, width, height,
171-
}) => ({
191+
export const handleTransform = (
192+
componentId,
193+
childId,
194+
{ x, y, width, height }
195+
) => ({
172196
type: HANDLE_TRANSFORM,
173197
payload: {
174198
componentId,
175199
childId,
176200
x,
177201
y,
178202
width,
179-
height,
180-
},
203+
height
204+
}
181205
});
182206

183207
export const createApplication = ({
184208
path,
185209
components = [],
186210
genOption,
211+
<<<<<<< HEAD
212+
appName = "proto_app",
213+
repoUrl
214+
}) => dispatch => {
215+
=======
187216
appName = 'reactype_app',
188217
repoUrl,
189218
}) => (dispatch) => {
219+
>>>>>>> b7293e0b5086a0b3845de7570cc40c7eb47578af
190220
if (genOption === 0) {
191221
dispatch(exportFiles({ path, components }));
192222
} else if (genOption) {
193223
dispatch({
194-
type: CREATE_APPLICATION,
224+
type: CREATE_APPLICATION
195225
});
196226
createApplicationUtil({
197227
path,
198228
appName,
199229
genOption,
200-
repoUrl,
230+
repoUrl
201231
})
202232
.then(() => {
203233
dispatch({
204-
type: CREATE_APPLICATION_SUCCESS,
234+
type: CREATE_APPLICATION_SUCCESS
205235
});
206236
dispatch(exportFiles({ path: `${path}/${appName}`, components }));
207237
})
208-
.catch(err => dispatch({
209-
type: CREATE_APPLICATION_ERROR,
210-
payload: { status: true, err },
211-
}));
238+
.catch(err =>
239+
dispatch({
240+
type: CREATE_APPLICATION_ERROR,
241+
payload: { status: true, err }
242+
})
243+
);
212244
}
213245
};
214246

215247
export const openExpansionPanel = component => ({
216248
type: OPEN_EXPANSION_PANEL,
217-
payload: { component },
249+
payload: { component }
218250
});
219251

220252
// export const deleteAllData = () => ({
221253
// type: DELETE_ALL_DATA,
222254
// });
223255

224-
export const deleteProp = propId => (dispatch) => {
256+
export const deleteProp = propId => dispatch => {
225257
dispatch({ type: DELETE_PROP, payload: propId });
226258
};
227259

228260
export const addProp = prop => ({
229261
type: ADD_PROP,
230-
payload: { ...prop },
262+
payload: { ...prop }
231263
});
264+
265+
export const updateHtmlAttr = ({ attr, value }) => dispatch => {
266+
dispatch({
267+
type: UPDATE_HTML_ATTR,
268+
payload: { attr, value }
269+
});
270+
};

‎src/components/DataTable.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import { IconButton } from "@material-ui/core";
1414
const styles = theme => ({
1515
root: {
1616
width: "80%",
17-
marginTop: theme.spacing.unit * 3,
18-
overflowX: "auto"
17+
marginTop: theme.spacing.unit * 3
18+
// overflowX: "auto"
1919
},
2020
table: {
2121
minWidth: 500

0 commit comments

Comments
 (0)