Merge pull request #40 from ibeeliot/master

tonyito · web-flow · commit 9fc8c1dafc53 · 2020-03-24T23:15:18.000-04:00
[FIXED: #38] REPUSH: Children added to parent components will have their children props destructured to parents automatically
diff --git a/src/actions/actionCreators.ts b/src/actions/actionCreators.ts
@@ -61,9 +61,9 @@ export const addComponent = ({ title }: { title: string }) => (
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
-export const addProp = (prop: PropInt) => ({
+export const addProp = ({ key, type }: { key: string; type: string }) => ({
   type: ADD_PROP,
-  payload: { ...prop }
+  payload: { key, type }
 });
 
 export const changeTutorial = (tutorial: number) => ({
diff --git a/src/components/bottom/BottomTabs.tsx b/src/components/bottom/BottomTabs.tsx
@@ -11,7 +11,7 @@ import { ComponentsInt, PropInt, PropsInt } from '../../interfaces/Interfaces';
 
 interface BottomTabsPropsInt extends PropsInt {
   deleteProp(id: number): void;
-  addProp(prop: PropInt): void;
+  addProp(arg: { key: string; type: string }): void;
   classes: any;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
@@ -165,12 +165,12 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Application Tree"
+            label='Application Tree'
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Code Preview"
+            label='Code Preview'
           />
           <Tab
             disableRipple
@@ -187,13 +187,13 @@ class BottomTabs extends Component<BottomTabsPropsInt, StateInt> {
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
-            label="Add Child Props"
+            label='Add Child Props'
           />
         </Tabs>
 
         {value === 0 && (
           <div
-            id="treeWrapper"
+            id='treeWrapper'
             style={{
               width: '100%',
               height: '100%'
diff --git a/src/components/bottom/DataTable.tsx b/src/components/bottom/DataTable.tsx
@@ -11,20 +11,57 @@ import { IconButton } from '@material-ui/core';
 
 const styles = (theme: Theme) => ({
   root: {
-    width: '80%',
+    width: '650px',
     marginTop: theme.spacing.unit * 3,
-    marginRight: '100px'
-    // overflowX: "auto"
+    borderRadius: '8px',
+    // boxShadow: '0px 0px 5px 2px #97ffb6'
+    boxShadow: '0px 0px 5px 2px lightgray'
+  },
+  tableContainer: {
+    borderRadius: '7px',
+    border: 'none',
+    backgroundColor: '#55585b'
   },
   table: {
-    minWidth: 500,
-    marginRight: '100px'
+    minWidth: 300,
+    borderRadius: '7px',
+    backgroundColor: '#55585b'
+  },
+  tableHeader: {
+    fontWeight: '900',
+    fontSize: '25px',
+    color: '#01d46d',
+    border: 'none',
+    textShadow: '2px 2px 5px 5px #8dffce'
   },
   tableCell: {
+    fontWeight: '500',
+    fontSize: '17px',
+    letterSpacing: '2px',
+    color: 'lightgray',
+    padding: '3px',
+    borderRadius: '7px',
+    border: 'none',
+    '&:hover': {
+      transform: 'scale(1.1)',
+      color: '#fff'
+    }
+  },
+  tableCellShaded: {
     fontWeight: '900',
-    fontSize: '1.2rem',
+    fontSize: '15px',
     color: '#91D1F9',
-    border: '1px solid red'
+    borderRadius: '7px'
+  },
+  trashIcon: {
+    backgroundColor: 'none',
+    color: 'gray',
+    '&:hover': {
+      transform: 'scale(1.08)',
+      backgroundColor: 'gray',
+      color: '#b30000',
+      border: 'none'
+    }
   }
 });
 
@@ -54,7 +91,11 @@ function dataTable(props: dataTableProps) {
   const { classes, rowData, rowHeader, deletePropHandler } = props;
 
   const renderHeader = rowHeader.map((col: any, idx: number) => (
-    <TableCell align={'center'} key={`head_+${idx}`}>
+    <TableCell
+      className={classes.tableHeader}
+      align={'center'}
+      key={`head_+${idx}`}
+    >
       {col}
     </TableCell>
   ));
@@ -64,18 +105,23 @@ function dataTable(props: dataTableProps) {
     // for some reason we must put each value in a div.
     return rowHeader.map((header: string, idx: number) => (
       <TableCell align={'center'} key={`td_${idx}`}>
-        {/* <div  align={'center'} padding = {'none'} >{typeof row[header] === 'string' ? row[header] : row[header].toString()}</div> */}
-        {/* {row[header]} */}
-        {typeof row[header] === 'string' ? row[header] : row[header].toString()}
+        <div className={classes.tableCell} align={'center'} padding={'none'}>
+          {row[header]}
+        </div>
       </TableCell>
     ));
   }
   // style={{height: 30}}
   const renderRows = rowData.map((row: any) => (
     <TableRow key={`row-${row.id}`}>
       {renderRowCells(row)}
-      <TableCell align={'center'} padding={'none'}>
+      <TableCell
+        style={{ height: '15px', width: '15px' }}
+        align={'center'}
+        padding={'none'}
+      >
         <IconButton
+          className={classes.trashIcon}
           color='default'
           // fontSize='small' - commented/removed b/c not a valid attribute for IconButton component
           onClick={() => deletePropHandler(row.id)}
@@ -89,15 +135,14 @@ function dataTable(props: dataTableProps) {
 
   return (
     <Paper className={classes.root}>
-      <Table
-        className={classes.table}
-        // selectable={'true'} - commented/removed b/c not a valid attr for Table (no adverse effects noted)
-      >
-        <TableHead>
-          <TableRow>{renderHeader}</TableRow>
-        </TableHead>
-        <TableBody>{renderRows}</TableBody>
-      </Table>
+      <div className={classes.tableContainer}>
+        <Table className={classes.table} selectable={'true'}>
+          <TableHead>
+            <TableRow>{renderHeader}</TableRow>
+          </TableHead>
+          <TableBody>{renderRows}</TableBody>
+        </Table>
+      </div>
     </Paper>
   );
 }
diff --git a/src/components/left/LeftColExpansionPanel.tsx b/src/components/left/LeftColExpansionPanel.tsx
@@ -14,11 +14,16 @@ import Tooltip from '@material-ui/core/Tooltip';
 import Collapse from '@material-ui/core/Collapse';
 import Switch from '@material-ui/core/Switch'; // for state/class toggling
 import InputLabel from '@material-ui/core/InputLabel'; // labeling of state/class toggles
-import { ComponentInt, ComponentsInt, PropsInt } from '../../interfaces/Interfaces'; // unused
+import {
+  ComponentInt,
+  ComponentsInt,
+  PropsInt
+} from '../../interfaces/Interfaces'; // unused
 interface LeftColExpPanPropsInt extends PropsInt {
   classes: any;
   id?: number;
   component: ComponentInt;
+  addProp(arg: { title: string; type: string }): void;
   addChild(arg: { title: string; childType: string; HTMLInfo?: object }): void;
   changeFocusComponent(arg: { title: string }): void;
   selectableChildren: number[];
@@ -45,6 +50,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
     focusComponent,
     components,
     component,
+    addProp,
     addChild,
     changeFocusComponent,
     selectableChildren,
@@ -65,8 +71,6 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
   // state/class toggles will be displayed when a component is focused
   const focusedToggle = isFocused() === 'focused' ? true : false;
 
-
-
   //this function determines whether edit mode for component name should be entered or not
   //resets the title if 'escape' key is hit
   const handleEdit = () => {
@@ -78,12 +82,54 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
     }
   };
 
+  // function adds childProps & also addsChild at the same time to the parents and updates state
+  // to reflect the childrenArray to be update inside the parent as well as the props from the child
+  // automatically destructured in the parents
+  const addChildProps = () => {
+    const addedChildProps = components.find(
+      (component: ComponentInt) => component.title === title
+    );
+
+    const parentKeys: any[] = [];
+    if (focusComponent.props.length > 0) {
+      focusComponent.props.forEach(key => parentKeys.push(key.key));
+    }
+    console.log('this is parentKeys', parentKeys);
+    // sorting through object keys of the focusComponent
+
+    let i = 0;
+    while (i <= addedChildProps.props.length) {
+      if (addedChildProps.props.length) {
+        if (i === 0) {
+          addChild({ title, childType: 'COMP' });
+          changeFocusComponent({ title: focusComponent.title });
+        }
+        if (addedChildProps.props[i]) {
+          const newKey = addedChildProps.props[i]['key'],
+            newType = addedChildProps.props[i]['type'];
+          if (!parentKeys.includes(newKey))
+            addProp({
+              key: newKey,
+              type: newType
+            });
+          else console.log('child prop already exists in parent!');
+        }
+      } else {
+        if (i === 0) {
+          addChild({ title, childType: 'COMP' });
+          changeFocusComponent({ title: focusComponent.title });
+        }
+      }
+      i++;
+    }
+  };
+
   return (
     <Grid
       container
-      direction="row"
-      justify="center"
-      alignItems="center"
+      direction='row'
+      justify='center'
+      alignItems='center'
       style={{
         minWidth: '470px'
       }}
@@ -106,7 +152,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
             in={focusedToggle}
             collapsedHeight={'80px'} //The type for the Collapse component is asking for a string, but if you put in a string and not a number, the component itself breaks.
             style={{ borderRadius: '5px' }}
-            timeout="auto"
+            timeout='auto'
           >
             {/* NOT SURE WHY COLOR: RED IS USED, TRIED REMOVING IT AND NO VISIBLE CHANGE OCCURED. */}
             <Grid
@@ -156,10 +202,10 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                           </Typography>
                         ) : (
                           <TextField //show a text field for editing instead if edit mode entered
-                            id="filled"
-                            label="Change Component Name"
+                            id='filled'
+                            label='Change Component Name'
                             defaultValue={title}
-                            variant="outlined"
+                            variant='outlined'
                             className={classes.text}
                             InputProps={{
                               className: classes.light //all of these styling makes the input box border, label, and text default to white.
@@ -191,7 +237,7 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                         {focusedToggle ? (
                           <span style={{ display: 'inline-flex' }}>
                             <InputLabel
-                              htmlFor="stateful"
+                              htmlFor='stateful'
                               style={{
                                 color: '#fff',
                                 marginBottom: '0px',
@@ -210,12 +256,12 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                                 toggleComponentState({ id });
                                 changeFocusComponent({ title });
                               }}
-                              value="stateful"
-                              color="primary"
+                              value='stateful'
+                              color='primary'
                               // id={props.id.toString()}
                             />
                             <InputLabel
-                              htmlFor="classBased"
+                              htmlFor='classBased'
                               style={{
                                 color: '#fff',
                                 marginBottom: '0px',
@@ -234,19 +280,19 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
                                 toggleComponentClass({ id });
                                 changeFocusComponent({ title });
                               }}
-                              value="classBased"
-                              color="primary"
+                              value='classBased'
+                              color='primary'
                             />
                           </span>
                         ) : (
                           ''
                         )}
                         {focusedToggle && component.id !== 1 ? (
                           <Button
-                            variant="text"
-                            size="small"
-                            color="default"
-                            aria-label="Delete"
+                            variant='text'
+                            size='small'
+                            color='default'
+                            aria-label='Delete'
                             className={classes.margin}
                             onClick={() =>
                               deleteComponent({
@@ -295,15 +341,14 @@ const LeftColExpansionPanel = (props: LeftColExpPanPropsInt) => {
           <div />
         ) : (
           <Tooltip
-            title="add as child"
-            aria-label="add as child"
-            placement="left"
+            title='add as child'
+            aria-label='add as child'
+            placement='left'
           >
             <IconButton
-              aria-label="Add"
+              aria-label='Add'
               onClick={() => {
-                addChild({ title, childType: 'COMP' });
-                changeFocusComponent({ title: focusComponent.title });
+                addChildProps();
               }}
             >
               <AddIcon style={{ color, float: 'right', marginTop: '10px' }} />
diff --git a/src/containers/LeftContainer.tsx b/src/containers/LeftContainer.tsx
