Cleaned up code after inline styling was completed using classes

ibeeliot · ibeeliot · commit d1d7dddeb6ff · 2020-03-18T22:44:42.000-07:00
diff --git a/src/components/HtmlAttr.tsx b/src/components/HtmlAttr.tsx
@@ -62,7 +62,7 @@ const availableButtonTypes = {
 // function for generating the button types for select dropdown
 // uses Object.keys method on object of drop down types
 const buttonTypeOptions = [
-  <option value="" key="" />,
+  <option value='' key='' />,
   ...Object.keys(availableButtonTypes).map(type => (
     <option value={type} key={type} style={{ color: '#000' }}>
       {type == null ? '' : type}
@@ -76,13 +76,16 @@ let buttonTypeTemp: string;
 // HtmlAttr is creating attributes grabbed from htmlElement & placing them
 // as the new state
 class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
-  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
-    acc[attr] = '';
+  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce(
+    (acc, attr) => {
+      acc[attr] = '';
 
-    return acc;
-  }, {});
+      return acc;
+    },
+    {}
+  );
 
-  // looks like:
+  // State looks like:
   // className: '',
   // id: '',
   // type: '',
@@ -123,96 +126,108 @@ class HtmlAttr extends Component<HTMLAttrPropsInt, StateInt> {
 
     const focusChildType = focusChild.htmlElement;
 
-    const HtmlForm = HTMLelements[focusChildType].attributes.map((attr: string, i: number) => (
-      <Grid container spacing={0} key={i} style={{ marginTop: '10px', marginRight: '20px' }}>
-        <Grid item xs={1}>
-          {/* if the attr being rendered for the HTMLForm is a button, then give it a special 
+    const HtmlForm = HTMLelements[focusChildType].attributes.map(
+      (attr: string, i: number) => (
+        <Grid
+          container
+          spacing={0}
+          key={i}
+          style={{ marginTop: '10px', marginRight: '20px' }}
+        >
+          <Grid item xs={1}>
+            {/* if the attr being rendered for the HTMLForm is a button, then give it a special 
           condition to render a "select" component rather than a text-input component */}
-          {attr == 'type' ? (
-            <FormControl required>
-              <InputLabel className={classes.light} htmlFor="htmlType">
-                Type
-              </InputLabel>
-              <Select
-                native
-                className={classes.light}
-                id="htmlType"
-                placeholder="title"
-                onChange={this.handleChange}
-                value={buttonTypeTemp}
-                defaultValue={'button'}
-                style={{
-                  background: '#424242',
-                  height: '45px',
-                  width: '146px',
-                  marginBottom: '23px',
-                  marginTop: '0px',
-                  color: '#fff',
-                  paddingLeft: '14px'
+            {attr == 'type' ? (
+              <FormControl required>
+                <InputLabel className={classes.light} htmlFor='htmlType'>
+                  Type
+                </InputLabel>
+                <Select
+                  native
+                  className={classes.light}
+                  id='htmlType'
+                  placeholder='title'
+                  onChange={this.handleChange}
+                  value={buttonTypeTemp}
+                  defaultValue={'button'}
+                  style={{
+                    background: '#424242',
+                    height: '45px',
+                    width: '146px',
+                    marginBottom: '23px',
+                    marginTop: '0px',
+                    color: '#fff',
+                    paddingLeft: '14px'
+                  }}
+                  required
+                >
+                  {buttonTypeOptions}
+                </Select>
+              </FormControl>
+            ) : (
+              <TextField
+                InputLabelProps={{
+                  classes: {
+                    root: classes.cssLabel,
+                    focused: classes.cssFocused,
+                    input: classes.input
+                  }
+                }}
+                InputProps={{
+                  classes: {
+                    root: classes.cssOutlinedInput,
+                    focused: classes.cssFocused,
+                    notchedOutline: classes.notchedOutline,
+                    input: classes.input
+                  }
                 }}
-                required
-              >
-                {buttonTypeOptions}
-              </Select>
-            </FormControl>
-          ) : (
-            <TextField
-              InputLabelProps={{
-                classes: {
-                  root: classes.cssLabel,
-                  focused: classes.cssFocused,
-                  input: classes.input
-                }
+                style={{ background: '#424242', height: '70%' }}
+                label={attr}
+                variant='outlined'
+                id={attr}
+                onChange={this.handleChange}
+                value={this.state[attr]}
+              />
+            )}
+          </Grid>
+          <Grid item xs={2}>
+            <Fab
+              variant='extended'
+              size='small'
+              color='default'
+              aria-label='Save'
+              style={{
+                marginLeft: '10px',
+                marginTop: '5px',
+                marginBottom: '10px'
               }}
-              InputProps={{
-                classes: {
-                  root: classes.cssOutlinedInput,
-                  focused: classes.cssFocused,
-                  notchedOutline: classes.notchedOutline,
-                  input: classes.input
-                }
+              onClick={e => {
+                e.preventDefault();
+                this.handleSave(attr);
               }}
-              style={{ background: '#424242', height: '70%' }}
-              label={attr}
-              variant="outlined"
-              id={attr}
-              onChange={this.handleChange}
-              value={this.state[attr]}
-            />
-          )}
-        </Grid>
-        <Grid item xs={2}>
-          <Fab
-            variant="extended"
-            size="small"
-            color="default"
-            aria-label="Save"
-            style={{
-              marginLeft: '10px',
-              marginTop: '5px',
-              marginBottom: '10px'
-            }}
-            onClick={e => {
-              e.preventDefault();
-              this.handleSave(attr);
-            }}
-          >
-            <SaveIcon />
-            Save
-          </Fab>
-        </Grid>
-        <Grid item xs={3}>
-          <Paper className={classes.root} style={{ height: '70%' }}>
-            <p style={{ color: 'black' }}>
-              {focusChild.HTMLInfo[attr] ? focusChild.HTMLInfo[attr] : ' no attribute assigned'}
-            </p>
-          </Paper>
+            >
+              <SaveIcon />
+              Save
+            </Fab>
+          </Grid>
+          <Grid item xs={3}>
+            <Paper className={classes.root} style={{ height: '70%' }}>
+              <p style={{ color: 'black' }}>
+                {focusChild.HTMLInfo[attr]
+                  ? focusChild.HTMLInfo[attr]
+                  : ' no attribute assigned'}
+              </p>
+            </Paper>
+          </Grid>
         </Grid>
-      </Grid>
-    ));
+      )
+    );
 
     return <div className={'htmlattr'}>{HtmlForm}</div>;
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(HtmlAttr));
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(HtmlAttr));
diff --git a/src/components/Props.tsx b/src/components/Props.tsx
@@ -2,9 +2,12 @@ import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import { withStyles, Theme } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
+import Input from '@material-ui/core/Input';
 import Select from '@material-ui/core/Select';
 import Switch from '@material-ui/core/Switch';
 import InputLabel from '@material-ui/core/InputLabel';
@@ -58,7 +61,10 @@ const styles = (theme: any) => ({
     borderRadius: '11px',
     height: '40%',
     overflowWrap: 'break-word',
-    padding: '8px'
+    paddingLeft: '15px',
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    fontSize: '1.2rem'
   },
   inputLabel: {
     fontSize: '1.3rem',
@@ -68,14 +74,17 @@ const styles = (theme: any) => ({
     color: '#fff'
   },
   select: {
-    color: '#000',
+    color: '#fff',
     marginBottom: '10px',
-    width: '100%',
-    backgroundColor: '#65BAEE',
+    width: '8rem',
+    backgroundColor: '#91D1F9',
     borderRadius: '11px',
     height: '40%',
     overflowWrap: 'break-word',
-    padding: '8px'
+    paddingLeft: '15px',
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    fontSize: '1.2rem'
   },
   selectLabel: {
     fontSize: '1.3rem',
@@ -84,6 +93,25 @@ const styles = (theme: any) => ({
     top: '-2.5rem',
     color: '#fff'
   },
+  addProp: {
+    width: '15rem',
+    marginLeft: '3rem',
+    height: '4rem',
+    transition: 'all 0.1s ease-out',
+    border: '2px solid #33eb91',
+    background: 'transparent',
+    color: '#fff',
+    '&:hover': {
+      transform: 'scale(1.1)',
+      fontSize: '1.2rem',
+      backgroundColor: '#33eb91',
+      color: '#006400'
+    }
+  },
+  dataTable: {
+    border: '1px solid red',
+    backgroundColor: 'red'
+  },
   light: {
     color: '#eee'
   },
@@ -144,6 +172,8 @@ class Props extends Component<PropsPropsInt, StateInt> {
     };
   }
 
+  // using useState to locally check a clickedValue
+
   handleChange = (event: MouseEvent | any) => {
     if (event.target.id === 'propVariable') {
       this.setState({
@@ -207,8 +237,6 @@ class Props extends Component<PropsPropsInt, StateInt> {
   render() {
     const { focusComponent, classes, deleteProp } = this.props;
 
-    console.log('this is focus component', focusComponent);
-
     // this will display the two fields of data at the focused component level
     const rowHeader = ['Prop', 'Type'];
 
@@ -312,9 +340,8 @@ class Props extends Component<PropsPropsInt, StateInt> {
                             onChange={this.handleChange}
                             value={this.state.propType}
                             required
-                          >
-                            {typeOptions}
-                          </Select>
+                            children={typeOptions}
+                          />
                         </FormControl>
                       </Grid>
                       {/* MAYBE not needed for React Components? */}
@@ -343,15 +370,29 @@ class Props extends Component<PropsPropsInt, StateInt> {
                           // disabled={!this.state.propKey || !this.state.propType}
                           variant='contained'
                           size='large'
+                          className={classes.addProp}
                         >
                           ADD PROP
                         </Button>
                       </Grid>
                     </Grid>
                   </form>
                 </Grid>
-                <Grid item xs={8}>
+                <Grid
+                  item
+                  xs={8}
+                  style={{
+                    height: '17rem',
+                    overflow: 'scroll',
+                    marginTop: '1rem',
+                    paddingBottom: '1rem',
+                    paddingTop: '0'
+                  }}
+                >
                   <DataTable
+                    InputProps={{
+                      className: classes.dataTable
+                    }}
                     rowHeader={rowHeader}
                     rowData={propsRows}
                     deletePropHandler={deleteProp}
diff --git a/src/public/styles/style.css b/src/public/styles/style.css
@@ -106,7 +106,7 @@ div.Component-horizontalScrollContainer-543 {
 
 /* affects component props layout in Component Props Tab */
 
-/* left side comp label */
+/* left side comp label */ ///
 #app
   > div
   > div
diff --git a/src/utils/componentRender.util.ts b/src/utils/componentRender.util.ts
@@ -144,7 +144,6 @@ const componentRender = (
       .join('\n')}
     
     interface Props {
-      ${console.log('being USED from props')}
       ${props.map(prop => `${prop.key}: ${typeSwitcher(prop.type)}\n`)}
     };
 
