Skip to content

Commit b37ba20

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #45 from tolgamizrakci/development
adding html comps works
2 parents 9b09733 + 63eeb36 commit b37ba20

File tree

10 files changed

+842
-538
lines changed

10 files changed

+842
-538
lines changed

‎src/actions/components.js

Lines changed: 57 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,21 +25,23 @@ import {
2525
DELETE_PROP,
2626
ADD_PROP,
2727
DELETE_ALL_DATA,
28-
CHANGE_IMAGE_PATH,
29-
} from '../actionTypes/index';
28+
CHANGE_IMAGE_PATH
29+
} from "../actionTypes/index";
3030

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

3333
// import createFiles from '../utils/createFiles.util';
3434
// import createApplicationUtil from '../utils/createApplication.util';
3535

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

4547
// export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -60,39 +62,47 @@ export const loadInitData = () => (dispatch) => {
6062
// },
6163
// });
6264

63-
export const addComponent = ({ title }) => (dispatch) => {
65+
export const addComponent = ({ title }) => dispatch => {
6466
dispatch({ type: ADD_COMPONENT, payload: { title } });
6567
};
6668

67-
export const addChild = ({ title }) => (dispatch) => {
68-
dispatch({ type: ADD_CHILD, payload: { title } });
69+
export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
70+
dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
6971
};
7072

71-
export const deleteChild = ({}) => (dispatch) => {
73+
export const deleteChild = ({}) => dispatch => {
7274
// with no payload, it will delete focusd child
7375
dispatch({ type: DELETE_CHILD, payload: {} });
7476
};
7577

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

7987
// 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-
},
88+
stateComponents.forEach(parent => {
89+
parent.childrenArray
90+
.filter(child => child.childComponentId == componentId)
91+
.forEach(child => {
92+
// console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
93+
dispatch({
94+
type: DELETE_CHILD,
95+
payload: {
96+
parentId: parent.id,
97+
childId: child.childId,
98+
calledFromDeleteComponent: true
99+
}
100+
});
90101
});
91-
});
92102
});
93103

94104
// change focus to APp
95-
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
105+
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
96106
// after taking care of the children delete the component
97107
dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
98108
};
@@ -128,19 +138,22 @@ export const deleteComponent = ({ componentId, stateComponents }) => (dispatch)
128138
// dispatch({ type: SET_SELECTABLE_PARENTS });
129139
// };
130140

131-
export const changeFocusComponent = ({ title }) => (dispatch) => {
141+
export const changeFocusComponent = ({ title }) => dispatch => {
132142
dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
133143
};
134144

135145
// make sure childId is being sent in
136-
export const changeFocusChild = ({ title, childId }) => (dispatch) => {
146+
export const changeFocusChild = ({ title, childId }) => dispatch => {
137147
dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
138148
};
139149

140-
export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
150+
export const changeComponentFocusChild = ({
151+
componentId,
152+
childId
153+
}) => dispatch => {
141154
dispatch({
142155
type: CHANGE_COMPONENT_FOCUS_CHILD,
143-
payload: { componentId, childId },
156+
payload: { componentId, childId }
144157
});
145158
};
146159

@@ -162,21 +175,23 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch
162175

163176
export const handleClose = () => ({
164177
type: HANDLE_CLOSE,
165-
payload: false,
178+
payload: false
166179
});
167180

168-
export const handleTransform = (componentId, childId, {
169-
x, y, width, height,
170-
}) => ({
181+
export const handleTransform = (
182+
componentId,
183+
childId,
184+
{ x, y, width, height }
185+
) => ({
171186
type: HANDLE_TRANSFORM,
172187
payload: {
173188
componentId,
174189
childId,
175190
x,
176191
y,
177192
width,
178-
height,
179-
},
193+
height
194+
}
180195
});
181196

182197
// export const createApplication = ({
@@ -206,20 +221,18 @@ export const handleTransform = (componentId, childId, {
206221

207222
export const openExpansionPanel = component => ({
208223
type: OPEN_EXPANSION_PANEL,
209-
payload: { component },
224+
payload: { component }
210225
});
211226

212227
// export const deleteAllData = () => ({
213228
// type: DELETE_ALL_DATA,
214229
// });
215230

216-
217-
218-
export const deleteProp = ( propId ) => (dispatch) => {
219-
; dispatch({ type: DELETE_PROP, payload: propId });
231+
export const deleteProp = propId => dispatch => {
232+
dispatch({ type: DELETE_PROP, payload: propId });
220233
};
221234

222235
export const addProp = prop => ({
223236
type: ADD_PROP,
224-
payload: { ...prop },
237+
payload: { ...prop }
225238
});

‎src/components/HTMLComponentPanel.jsx

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import { compose } from "redux";
4+
import { withStyles } from "@material-ui/core/styles";
5+
import TextField from "@material-ui/core/TextField";
6+
import IconButton from "@material-ui/core/IconButton";
7+
import ImageIcon from "@material-ui/icons/Image";
8+
import FormIcon from "@material-ui/icons/Description";
9+
import ButtonIcon from "@material-ui/icons/EditAttributes";
10+
import LinkIcon from "@material-ui/icons/Link";
11+
import ListIcon from "@material-ui/icons/List";
12+
import ParagraphIcon from "@material-ui/icons/LocalParking";
13+
import theme from "../components/theme";
14+
15+
import Grid from "@material-ui/core/Grid";
16+
import Paper from "@material-ui/core/Paper";
17+
18+
class HTMLComponentPanel extends Component {
19+
state = {
20+
HtmlComponentName: ""
21+
};
22+
23+
handleChange = event => {
24+
this.setState({
25+
HtmlComponentName: event.target.value
26+
});
27+
};
28+
29+
handleCreateHTMLChild = type => {
30+
this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
31+
};
32+
33+
render() {
34+
const { addChild } = this.props;
35+
return (
36+
<Paper className={"htmlPanelz"}>
37+
<TextField
38+
id="title-input"
39+
label="Add HTML component"
40+
placeholder="Name of Component"
41+
margin="normal"
42+
autoFocus
43+
onChange={this.handleChange}
44+
// value={HtmlComponentName}
45+
// name="HtmlComponentName"
46+
// className={classes.light}
47+
// InputProps={{
48+
// className: classes.input
49+
// }}
50+
// InputLabelProps={{
51+
// className: classes.input
52+
// }}
53+
/>
54+
<Grid container spacing={24} alignItems="baseline" align="stretch">
55+
<Grid item xs={4}>
56+
<IconButton
57+
aria-label="Image"
58+
onClick={() => {
59+
this.handleCreateHTMLChild("Image");
60+
}}
61+
62+
// onClick={() => {
63+
// console.log(addChild);
64+
// addChild({ title: "Image", childType: "Image" });
65+
// }}
66+
>
67+
<ImageIcon />
68+
</IconButton>
69+
</Grid>
70+
<Grid item xs={4}>
71+
<IconButton
72+
aria-label="Form"
73+
onClick={() => {
74+
this.handleCreateHTMLChild("Form");
75+
}}
76+
>
77+
<FormIcon />
78+
</IconButton>
79+
</Grid>
80+
<Grid item xs={4}>
81+
<IconButton
82+
aria-label="Button"
83+
onClick={() => {
84+
this.handleCreateHTMLChild("Button");
85+
}}
86+
>
87+
<ButtonIcon />
88+
</IconButton>
89+
</Grid>
90+
<Grid item xs={4}>
91+
<IconButton
92+
aria-label="Link"
93+
onClick={() => {
94+
this.handleCreateHTMLChild("Link");
95+
}}
96+
>
97+
<LinkIcon />
98+
</IconButton>
99+
</Grid>
100+
<Grid item xs={4}>
101+
<IconButton
102+
aria-label="List"
103+
onClick={() => {
104+
this.handleCreateHTMLChild("List");
105+
}}
106+
>
107+
<ListIcon />
108+
</IconButton>
109+
</Grid>
110+
<Grid item xs={4}>
111+
<IconButton
112+
aria-label="Paragraph"
113+
onClick={() => {
114+
this.handleCreateHTMLChild("Paragraph");
115+
}}
116+
>
117+
<ParagraphIcon />
118+
</IconButton>
119+
</Grid>
120+
</Grid>
121+
</Paper>
122+
);
123+
}
124+
}
125+
126+
function styles() {
127+
return {};
128+
}
129+
130+
export default withStyles(styles)(HTMLComponentPanel);

0 commit comments

Comments
 (0)