html comp panel render working

src/components/HtmlAttr.jsx

@@ -1,81 +1,90 @@
-import React, { Component, Fragment } from 'react';
-import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import IconButton from '@material-ui/core/IconButton';
-import UpdateIcon from '@material-ui/icons/Update';
-import { updateHtmlAttr } from '../actions/components';
-import { HTMLelements, getSize } from '../utils/htmlElements.util';
+import React, { Component, Fragment } from "react";
+import { connect } from "react-redux";
+import { withStyles } from "@material-ui/core/styles";
+import Grid from "@material-ui/core/Grid";
+import TextField from "@material-ui/core/TextField";
+import IconButton from "@material-ui/core/IconButton";
+import SaveIcon from "@material-ui/icons/Save";
+import { updateHtmlAttr } from "../actions/components";
+import { HTMLelements, getSize } from "../utils/htmlElements.util";
+import Paper from "@material-ui/core/Paper";
+import Fab from "@material-ui/core/Fab";
 
 const styles = theme => ({
   root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
+    display: "flex",
+    justifyContent: "center",
+    flexWrap: "wrap"
   },
   chip: {
     margin: theme.spacing.unit,
-    color: '#eee',
-    backgroundColor: '#333333',
+    color: "#eee",
+    backgroundColor: "#333333"
   },
   column: {
-    display: 'inline-flex',
-    alignItems: 'baseline',
+    display: "inline-flex",
+    alignItems: "baseline"
   },
   icon: {
-    fontSize: '20px',
-    color: '#eee',
-    opacity: '0.7',
-    transition: 'all .2s ease',
+    fontSize: "20px",
+    color: "#eee",
+    opacity: "0.7",
+    transition: "all .2s ease",
 
-    '&:hover': {
-      color: 'red',
-    },
+    "&:hover": {
+      color: "red"
+    }
   },
   cssLabel: {
-    color: 'white',
+    color: "white",
 
-    '&$cssFocused': {
-      color: 'green',
-    },
+    "&$cssFocused": {
+      color: "green"
+    }
   },
   cssFocused: {},
   input: {
-    color: '#fff',
-    opacity: '0.7',
-    marginBottom: '10px',
+    color: "#fff",
+    opacity: "0.7",
+    marginBottom: "10px"
   },
   light: {
-    color: '#eee',
+    color: "#eee"
   },
   avatar: {
-    color: '#eee',
-    fontSize: '10px',
-  },
+    color: "#eee",
+    fontSize: "10px"
+  }
 });
 
 const mapDispatchToProps = dispatch => ({
-  updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value })),
+  updateHtmlAttr: ({ attr, value }) => dispatch(updateHtmlAttr({ attr, value }))
 });
 
 const mapStateToProps = store => ({
   focusComponent: store.workspace.focusComponent,
-  focusChild: store.workspace.focusChild,
+  focusChild: store.workspace.focusChild
 });
 
 class HtmlAttr extends Component {
-  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
-    acc[attr] = '';
-    return acc;
-  }, {});
+  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce(
+    (acc, attr) => {
+      acc[attr] = "";
+      return acc;
+    },
+    {}
+  );
 
-  handleChange = (event) => {
+  handleChange = event => {
     this.setState({
-      [event.target.id]: event.target.value.trim(),
+      [event.target.id]: event.target.value.trim()
     });
   };
 
+  componentDidUpdate() {
+    console.log("focuschild", this.props.focusChild);
+  }
+
   // setInitialState = () => {
   //   HTMLelements[focusChildType].attributes.forEach(attr =>
   //     this.setState({ attr: "" })
@@ -84,17 +93,54 @@ class HtmlAttr extends Component {
 
   render() {
     const {
-      focusComponent, classes, deleteProp, addProp, focusChild, updateHtmlAttr,
+      focusComponent,
+      classes,
+      deleteProp,
+      addProp,
+      focusChild,
+      updateHtmlAttr
     } = this.props;
 
     const focusChildType = focusChild.htmlElement;
 
-    console.log(focusChild);
+    // console.log(focusChild);
 
     const HtmlForm = HTMLelements[focusChildType].attributes.map((attr, i) => (
-      <Grid container spacing={8} alignItems="baseline" align="stretch" key={i}>
-        <Grid item xs={6}>
+      <Grid
+        container
+        spacing={0}
+        alignItems="stretch"
+        // align="stretch"
+        key={i}
+        direction="row"
+        justify="flex-start"
+        style={{ marginTop: "10px", marginRight: "20px" }}
+      >
+        <Grid item xs={4}>
           <TextField
+            className={classes.margin}
+            InputLabelProps={{
+              classes: {
+                root: classes.cssLabel,
+                focused: classes.cssFocused
+              }
+            }}
+            InputProps={{
+              classes: {
+                root: classes.cssOutlinedInput,
+                focused: classes.cssFocused,
+                notchedOutline: classes.notchedOutline
+              }
+            }}
+            style={{ background: "#424242" }}
+            label={attr}
+            variant="outlined"
+            id={attr}
+            onChange={this.handleChange}
+            value={this.state[attr]}
+          />
+
+          {/* <TextField
             id={attr}
             label={attr}
             margin="normal"
@@ -103,44 +149,75 @@ class HtmlAttr extends Component {
             onChange={this.handleChange}
             value={this.state[attr]}
             InputProps={{
-              className: classes.input,
+              className: classes.input
             }}
             InputLabelProps={{
-              className: classes.input,
+              className: classes.input
             }}
-          />
-          <IconButton
+          /> */}
+        </Grid>
+        <Grid item xs={4}>
+          <Fab
+            variant="extended"
+            size="small"
+            color="default"
+            aria-label="Delete"
+            className={classes.margin}
+            style={{
+              marginLeft: "10px",
+              marginTop: "5px",
+              marginBottom: "10px"
+            }}
+            // style={{ maxWidth: "20px" }}
+            onClick={() => {
+              updateHtmlAttr({ attr, value: this.state[attr] });
+            }}
+          >
+            <SaveIcon className={classes.extendedIcon} />
+            Save
+          </Fab>
+
+          {/* <IconButton
             aria-label="Update"
             onClick={() => {
               updateHtmlAttr({ attr, value: this.state[attr] });
             }}
-            // onClick={() => {
-            //   addChild({ title, childType: "COMP" });
-            // }}
           >
-            <UpdateIcon />
-          </IconButton>
+            <SaveIcon style={{ color: "white" }} />
+          </IconButton> */}
         </Grid>
-        <Grid item xs={6}>
-          <TextField
-            disabled
-            id="filled-disabled"
-            label={attr}
-            defaultValue={focusChild.HTMLInfo[attr]}
-            style={{ background: 'bcbcbc' }}
-            className={classes.textField}
-            margin="normal"
-            variant="filled"
-          />
+        <Grid item xs={4}>
+          <Paper className={classes.root} elevation={1}>
+            <p style={{ color: "gray" }}>
+              {attr}
+              {":  "}
+            </p>
+            <p style={{ color: "black" }}>
+              {focusChild.HTMLInfo[attr]
+                ? focusChild.HTMLInfo[attr]
+                : "no attribute assigned"}
+            </p>
+
+            {/* <TextField
+              disabled
+              id="filled-disabled"
+              label={attr}
+              value={focusChild.HTMLInfo[attr]}
+              style={{ maxWidth: "20px" }}
+              className={classes.textField}
+              margin="normal"
+              // variant="filled"
+            /> */}
+          </Paper>
         </Grid>
       </Grid>
     ));
 
-    return <div className={'htmlattr'}>{HtmlForm}</div>;
+    return <div className={"htmlattr"}>{HtmlForm}</div>;
   }
 }
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 )(withStyles(styles)(HtmlAttr));