Skip to content

Commit 71fe640

Browse files
tolgamizrakcitolgamizrakci
authored
Merge pull request #69 from tolgamizrakci/development
html comp panel render working
2 parents 68471dc + 32f1bb7 commit 71fe640

File tree

3 files changed

+285
-182
lines changed

3 files changed

+285
-182
lines changed

‎src/components/HtmlAttr.jsx

Lines changed: 145 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,90 @@
1-
import React, { Component, Fragment } from 'react';
2-
import { connect } from 'react-redux';
3-
import { withStyles } from '@material-ui/core/styles';
4-
import Grid from '@material-ui/core/Grid';
5-
import TextField from '@material-ui/core/TextField';
6-
import IconButton from '@material-ui/core/IconButton';
7-
import UpdateIcon from '@material-ui/icons/Update';
8-
import { updateHtmlAttr } from '../actions/components';
9-
import { HTMLelements, getSize } from '../utils/htmlElements.util';
1+
import React, { Component, Fragment } from "react";
2+
import { connect } from "react-redux";
3+
import { withStyles } from "@material-ui/core/styles";
4+
import Grid from "@material-ui/core/Grid";
5+
import TextField from "@material-ui/core/TextField";
6+
import IconButton from "@material-ui/core/IconButton";
7+
import SaveIcon from "@material-ui/icons/Save";
8+
import { updateHtmlAttr } from "../actions/components";
9+
import { HTMLelements, getSize } from "../utils/htmlElements.util";
10+
import Paper from "@material-ui/core/Paper";
11+
import Fab from "@material-ui/core/Fab";
1012

1113
const styles = theme => ({
1214
root: {
13-
display: 'flex',
14-
justifyContent: 'center',
15-
flexWrap: 'wrap',
15+
display: "flex",
16+
justifyContent: "center",
17+
flexWrap: "wrap"
1618
},
1719
chip: {
1820
margin: theme.spacing.unit,
19-
color: '#eee',
20-
backgroundColor: '#333333',
21+
color: "#eee",
22+
backgroundColor: "#333333"
2123
},
2224
column: {
23-
display: 'inline-flex',
24-
alignItems: 'baseline',
25+
display: "inline-flex",
26+
alignItems: "baseline"
2527
},
2628
icon: {
27-
fontSize: '20px',
28-
color: '#eee',
29-
opacity: '0.7',
30-
transition: 'all .2s ease',
29+
fontSize: "20px",
30+
color: "#eee",
31+
opacity: "0.7",
32+
transition: "all .2s ease",
3133

32-
'&:hover': {
33-
color: 'red',
34-
},
34+
"&:hover": {
35+
color: "red"
36+
}
3537
},
3638
cssLabel: {
37-
color: 'white',
39+
color: "white",
3840

39-
'&$cssFocused': {
40-
color: 'green',
41-
},
41+
"&$cssFocused": {
42+
color: "green"
43+
}
4244
},
4345
cssFocused: {},
4446
input: {
45-
color: '#fff',
46-
opacity: '0.7',
47-
marginBottom: '10px',
47+
color: "#fff",
48+
opacity: "0.7",
49+
marginBottom: "10px"
4850
},
4951
light: {
50-
color: '#eee',
52+
color: "#eee"
5153
},
5254
avatar: {
53-
color: '#eee',
54-
fontSize: '10px',
55-
},
55+
color: "#eee",
56+
fontSize: "10px"
57+
}
5658
});
5759

5860
const mapDispatchToProps = dispatch => ({
59-
updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value })),
61+
updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value }))
6062
});
6163

6264
const mapStateToProps = store => ({
6365
focusComponent: store.workspace.focusComponent,
64-
focusChild: store.workspace.focusChild,
66+
focusChild: store.workspace.focusChild
6567
});
6668

6769
class HtmlAttr extends Component {
68-
state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
69-
acc[attr] = '';
70-
return acc;
71-
}, {});
70+
state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce(
71+
(acc, attr) => {
72+
acc[attr] = "";
73+
return acc;
74+
},
75+
{}
76+
);
7277

73-
handleChange = (event) => {
78+
handleChange = event => {
7479
this.setState({
75-
[event.target.id]: event.target.value.trim(),
80+
[event.target.id]: event.target.value.trim()
7681
});
7782
};
7883

84+
componentDidUpdate() {
85+
console.log("focuschild", this.props.focusChild);
86+
}
87+
7988
// setInitialState = () => {
8089
// HTMLelements[focusChildType].attributes.forEach(attr =>
8190
// this.setState({ attr: "" })
@@ -84,17 +93,54 @@ class HtmlAttr extends Component {
8493

8594
render() {
8695
const {
87-
focusComponent, classes, deleteProp, addProp, focusChild, updateHtmlAttr,
96+
focusComponent,
97+
classes,
98+
deleteProp,
99+
addProp,
100+
focusChild,
101+
updateHtmlAttr
88102
} = this.props;
89103

90104
const focusChildType = focusChild.htmlElement;
91105

92-
console.log(focusChild);
106+
// console.log(focusChild);
93107

94108
const HtmlForm = HTMLelements[focusChildType].attributes.map((attr, i) => (
95-
<Grid container spacing={8} alignItems="baseline" align="stretch" key={i}>
96-
<Grid item xs={6}>
109+
<Grid
110+
container
111+
spacing={0}
112+
alignItems="stretch"
113+
// align="stretch"
114+
key={i}
115+
direction="row"
116+
justify="flex-start"
117+
style={{ marginTop: "10px", marginRight: "20px" }}
118+
>
119+
<Grid item xs={4}>
97120
<TextField
121+
className={classes.margin}
122+
InputLabelProps={{
123+
classes: {
124+
root: classes.cssLabel,
125+
focused: classes.cssFocused
126+
}
127+
}}
128+
InputProps={{
129+
classes: {
130+
root: classes.cssOutlinedInput,
131+
focused: classes.cssFocused,
132+
notchedOutline: classes.notchedOutline
133+
}
134+
}}
135+
style={{ background: "#424242" }}
136+
label={attr}
137+
variant="outlined"
138+
id={attr}
139+
onChange={this.handleChange}
140+
value={this.state[attr]}
141+
/>
142+
143+
{/* <TextField
98144
id={attr}
99145
label={attr}
100146
margin="normal"
@@ -103,44 +149,75 @@ class HtmlAttr extends Component {
103149
onChange={this.handleChange}
104150
value={this.state[attr]}
105151
InputProps={{
106-
className: classes.input,
152+
className: classes.input
107153
}}
108154
InputLabelProps={{
109-
className: classes.input,
155+
className: classes.input
110156
}}
111-
/>
112-
<IconButton
157+
/> */}
158+
</Grid>
159+
<Grid item xs={4}>
160+
<Fab
161+
variant="extended"
162+
size="small"
163+
color="default"
164+
aria-label="Delete"
165+
className={classes.margin}
166+
style={{
167+
marginLeft: "10px",
168+
marginTop: "5px",
169+
marginBottom: "10px"
170+
}}
171+
// style={{ maxWidth: "20px" }}
172+
onClick={() => {
173+
updateHtmlAttr({ attr, value: this.state[attr] });
174+
}}
175+
>
176+
<SaveIcon className={classes.extendedIcon} />
177+
Save
178+
</Fab>
179+
180+
{/* <IconButton
113181
aria-label="Update"
114182
onClick={() => {
115183
updateHtmlAttr({ attr, value: this.state[attr] });
116184
}}
117-
// onClick={() => {
118-
// addChild({ title, childType: "COMP" });
119-
// }}
120185
>
121-
<UpdateIcon />
122-
</IconButton>
186+
<SaveIcon style={{ color: "white" }} />
187+
</IconButton> */}
123188
</Grid>
124-
<Grid item xs={6}>
125-
<TextField
126-
disabled
127-
id="filled-disabled"
128-
label={attr}
129-
defaultValue={focusChild.HTMLInfo[attr]}
130-
style={{ background: 'bcbcbc' }}
131-
className={classes.textField}
132-
margin="normal"
133-
variant="filled"
134-
/>
189+
<Grid item xs={4}>
190+
<Paper className={classes.root} elevation={1}>
191+
<p style={{ color: "gray" }}>
192+
{attr}
193+
{": "}
194+
</p>
195+
<p style={{ color: "black" }}>
196+
{focusChild.HTMLInfo[attr]
197+
? focusChild.HTMLInfo[attr]
198+
: "no attribute assigned"}
199+
</p>
200+
201+
{/* <TextField
202+
disabled
203+
id="filled-disabled"
204+
label={attr}
205+
value={focusChild.HTMLInfo[attr]}
206+
style={{ maxWidth: "20px" }}
207+
className={classes.textField}
208+
margin="normal"
209+
// variant="filled"
210+
/> */}
211+
</Paper>
135212
</Grid>
136213
</Grid>
137214
));
138215

139-
return <div className={'htmlattr'}>{HtmlForm}</div>;
216+
return <div className={"htmlattr"}>{HtmlForm}</div>;
140217
}
141218
}
142219

143220
export default connect(
144221
mapStateToProps,
145-
mapDispatchToProps,
222+
mapDispatchToProps
146223
)(withStyles(styles)(HtmlAttr));

0 commit comments

Comments
 (0)