Merge pull request #55 from spincycle01/master

ChristianEdwardPadilla · web-flow · commit 749816c8c9dd · 2019-05-03T19:41:00.000-04:00
exporting working with multiple props in one component
diff --git a/src/components/Props.jsx b/src/components/Props.jsx
@@ -1,130 +1,133 @@
-import React, { Component, Fragment } from "react";
-import { connect } from "react-redux";
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
 
 // import PropTypes from 'prop-types';
-import { withStyles } from "@material-ui/core/styles";
-import Chip from "@material-ui/core/Chip";
-import Avatar from "@material-ui/core/Avatar";
-import FormControl from "@material-ui/core/FormControl";
-import Grid from "@material-ui/core/Grid";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import Select from "@material-ui/core/Select";
-import Switch from "@material-ui/core/Switch";
-import InputLabel from "@material-ui/core/InputLabel";
-import RemoveCircleOutlineIcon from "@material-ui/icons/RemoveCircleOutline";
-import { addProp, deleteProp } from "../actions/components";
-import DataTable from "./DataTable.jsx";
+import { withStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Avatar from '@material-ui/core/Avatar';
+import FormControl from '@material-ui/core/FormControl';
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import Select from '@material-ui/core/Select';
+import Switch from '@material-ui/core/Switch';
+import InputLabel from '@material-ui/core/InputLabel';
+import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';
+import { addProp, deleteProp } from '../actions/components';
+import DataTable from './DataTable.jsx';
 
 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: "#eee",
-    marginBottom: "10px",
-    width: "60%"
+    color: '#eee',
+    marginBottom: '10px',
+    width: '60%',
   },
   light: {
-    color: "#eee"
+    color: '#eee',
   },
   avatar: {
-    color: "#eee",
-    fontSize: "10px"
-  }
+    color: '#eee',
+    fontSize: '10px',
+  },
 });
 
 const mapDispatchToProps = dispatch => ({
-  addProp: ({ key, value, required, type }) =>
-    dispatch(
-      addProp({
-        key,
-        value,
-        required,
-        type
-      })
-    ),
-  deleteProp: propId => dispatch(deleteProp(propId))
+  addProp: ({
+    key, value, required, type,
+  }) => dispatch(
+    addProp({
+      key,
+      value,
+      required,
+      type,
+    }),
+  ),
+  deleteProp: propId => dispatch(deleteProp(propId)),
 });
 
 const mapStateToProps = store => ({
-  focusComponent: store.workspace.focusComponent
+  focusComponent: store.workspace.focusComponent,
 });
 
 const availablePropTypes = {
-  string: "STR",
-  object: "OBJ",
-  array: "ARR",
-  number: "NUM",
-  bool: "BOOL",
-  func: "FUNC",
-  symbol: "SYM",
-  node: "NODE",
-  element: "ELEM"
+  string: 'STR',
+  object: 'OBJ',
+  array: 'ARR',
+  number: 'NUM',
+  boolean: 'BOOL',
+  function: 'FUNC',
+  symbol: 'SYM',
+  node: 'NODE',
+  element: 'ELEM',
 };
 
 const typeOptions = [
   <option value="" key="" />,
   ...Object.keys(availablePropTypes).map(type => (
-    <option value={type} key={type} style={{ color: "#000" }}>
+    <option value={type} key={type} style={{ color: '#000' }}>
       {type}
     </option>
-  ))
+  )),
 ];
 
 class Props extends Component {
   state = {
-    propKey: "",
-    propValue: "",
+    propKey: '',
+    propValue: '',
     propRequired: false,
-    propType: ""
+    propType: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      [event.target.id]: event.target.value.trim()
+      [event.target.id]: event.target.value.trim(),
     });
   };
 
   togglePropRequired = () => {
     this.setState({
-      propRequired: !this.state.propRequired
+      propRequired: !this.state.propRequired,
     });
   };
 
-  handleAddProp = event => {
+  handleAddProp = (event) => {
     event.preventDefault();
 
-    const { propKey, propValue, propRequired, propType } = this.state;
+    const {
+      propKey, propValue, propRequired, propType,
+    } = this.state;
 
     // check if prop exists with same key. CANNOT have doubles
     const savedPropKeys = this.props.focusComponent.props.map(p => p.key);
@@ -137,36 +140,38 @@ class Props extends Component {
       key: propKey,
       value: propValue,
       required: propRequired,
-      type: propType
+      type: propType,
     });
 
     this.setState({
-      propKey: "",
-      propValue: "",
+      propKey: '',
+      propValue: '',
       propRequired: false,
-      propType: ""
+      propType: '',
     });
   };
 
   render() {
-    const { focusComponent, classes, deleteProp, addProp } = this.props;
+    const {
+      focusComponent, classes, deleteProp, addProp,
+    } = this.props;
 
-    const rowHeader = ["_Key", "Value", "Type", "Required"];
+    const rowHeader = ['_Key', 'Value', 'Type', 'Required'];
     // prepare the saved Props in a nice way, so you can sent them to TableData
     const propsRows = focusComponent.props.map(prop => ({
       _Key: prop.key,
       Value: prop.value,
       Type: prop.type,
       Required: prop.required,
-      id: prop.id
+      id: prop.id,
     }));
 
     return (
       // <div style={{ display: rightColumnOpen ? "inline" : "none" }}>
       <div>
-        {" "}
+        {' '}
         {Object.keys(focusComponent).length < 1 ? (
-          <div style={{ marginTop: "20px", marginLeft: "20px" }}>
+          <div style={{ marginTop: '20px', marginLeft: '20px' }}>
             Click a component to view its props.
           </div>
         ) : (
@@ -186,10 +191,10 @@ class Props extends Component {
                           value={this.state.propKey}
                           required
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                         />
                       </Grid>
@@ -200,20 +205,17 @@ class Props extends Component {
                           margin="normal"
                           onChange={this.handleChange}
                           InputProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           InputLabelProps={{
-                            className: classes.input
+                            className: classes.input,
                           }}
                           value={this.state.propValue}
                         />
                       </Grid>
                       <Grid item xs={6}>
                         <FormControl required>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propType"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propType">
                             Type
                           </InputLabel>
                           <Select
@@ -231,10 +233,7 @@ class Props extends Component {
                       </Grid>
                       <Grid item xs={6}>
                         <div className={classes.column}>
-                          <InputLabel
-                            className={classes.light}
-                            htmlFor="propRequired"
-                          >
+                          <InputLabel className={classes.light} htmlFor="propRequired">
                             Required?
                           </InputLabel>
                           <Switch
@@ -305,5 +304,5 @@ class Props extends Component {
 
 export default connect(
   mapStateToProps,
-  mapDispatchToProps
+  mapDispatchToProps,
 )(withStyles(styles)(Props));
diff --git a/src/utils/componentRender.util.js b/src/utils/componentRender.util.js
@@ -3,11 +3,11 @@ const componentRender = (component, data) => {
     stateful, id, position, childrenArray, title, props,
   } = component;
 
-  // need to filter with reduce the import, copy from below
   if (stateful) {
     return `
       import React, { Component } from 'react';
       ${childrenArray
+    .filter(child => child.childType !== 'HTML')
     .map(child => `import ${child.componentName} from './${child.componentName}.tsx'`)
     .reduce((acc, child) => {
       if (!acc.includes(child)) {
@@ -36,10 +36,10 @@ const componentRender = (component, data) => {
       export default ${title};
     `;
   }
-
   return `
     import React from 'react';
     ${childrenArray
+    .filter(child => child.childType !== 'HTML')
     .map(child => `import ${child.componentName} from './${child.componentName}.tsx'`)
     .reduce((acc, child) => {
       if (!acc.includes(child)) {
@@ -50,9 +50,8 @@ const componentRender = (component, data) => {
     }, [])
     .join('\n')}
     
-
     type Props = {
-      ${component.props.map(prop => `${prop.key}: ${prop.type}`).join('\n')}
+      ${props.map(prop => `${prop.key}: ${prop.type}`).join('\n')}
     }
 
     const ${title} = (props: Props) => (
diff --git a/src/utils/createFiles.util.js b/src/utils/createFiles.util.js
@@ -23,7 +23,7 @@ const createFiles = (data, path) => {
           trailingComma: 'es5',
           bracketSpacing: true,
           jsxBracketSameLine: true,
-          parser: 'babylon',
+          parser: 'typescript',
         }),
         (err) => {
           if (err) return reject(err.message);
