Merge pull request #3 from MadinventorZero/sandbox

Sandbox Render MVP Updates

Author: MadinventorZero

app/src/components/main/DemoRender.tsx

@@ -2,26 +2,52 @@
 import React, {
   useState, useCallback, useContext, useEffect,
 } from 'react';
+import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+import './renderDemo.css';
+import StateContext from '../../context/context';
+
 
 const DemoRender = (props): JSX.Element => {
   const [components, setComponents] = useState([]);
+  const [state, dispatch] = useContext(StateContext);
   const demoContainerStyle = {
     width: '100%',
     backgroundColor: 'lightgrey',
     border: '2px Solid grey',
   };
 
+  const componentBuilder = (array, key = 0) => {
+    const componentsToRender = [];
+    for (const element of array) {
+      if (element.name !== 'separator') {
+        console.log('detail from children array', element);
+        const elementType = element.name;
+        const childId = element.childId;
+        const elementStyle = element.style;
+        const innerText = element.attributes.compText;
+        const classRender = element.attributes.cssClasses;
+        let renderedChildren;
+        if (element.children.length > 0) {
+          renderedChildren = componentBuilder(element.children);
+        }
+        componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
+        key += 1;
+      }
+    }
+    return componentsToRender;
+  };
+
   useEffect(() => {
-    console.log('props', props.demo);
-    setComponents(props.demo);
-  }, [props.demo]);
+    const childrenArray = state.components[0].children;
+    console.log('Refrenced Children in State!!!', childrenArray);
+    const renderedComponents = componentBuilder(childrenArray);
+    setComponents(renderedComponents);
+  }, [state.components]);
+
   return (
     <div id={'renderFocus'} style={demoContainerStyle}>
-      {console.log('Props Boxes has reached DemoContainer', props.demo)}
-      {components.map((component, index) => {
-        console.log('Found a component', component);
-        return component;
-      })}
+      {components.map((component, index) => component)}
     </div>
   );
 };

app/src/components/main/renderDemo.css

@@ -0,0 +1,8 @@
+.text-color { 
+  color: #cc0707;
+}
+.btn {
+  height: 20px;
+  width: 100px;
+  background-color: #cc0707;
+}

app/src/containers/MainContainer.tsx

@@ -1,46 +1,19 @@
 import React, { useState, useContext, useEffect } from 'react';
-import Button from '@material-ui/core/Button';
-import Box from '@material-ui/core/Box';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 import { styleContext } from './AppContainer';
-import StateContext from '../context/context';
 import DemoRender from '../components/main/DemoRender';
 
 const MainContainer = () => {
   const { style } = useContext(styleContext);
-  // Caret Start
-  const [state, dispatch] = useContext(StateContext);
-  const componentsToRender = [];
-  useEffect(() => {
-    const childrenArray = state.components[0].children;
-    console.log('Refrenced Children in State!!!', childrenArray);
-    const codePreviewView = state.components[0].code;
-    console.log('This is the framework for CodePreview', codePreviewView);
-    let key = 0;
-    for (const element of childrenArray) {
-      if (element.name !== 'separator') {
-        console.log('detail from children array', element);
-        const elementType = element.name;
-        const childId = element.childId;
-        const elementStyle = element.style;
-        const innerText = element.attributes.compText;
-        if (elementType !== 'button') {
-          componentsToRender.push(<Box component={elementType} key={key} id={childId}>{innerText}</Box>);
-        } else componentsToRender.push(<Button key={key} id={childId} color={'primary'}>{innerText}</Button>);
-        key += 1;
-      }
-    }
-  }, [state.components]);
-  // Caret End
+
 
   return (
     <div className="main-container" style={style} >
       <div className="main">
         <CanvasContainer />
         {/* Caret Component Render */}
-        {console.log('Completed Components to Render', componentsToRender)}
-        <DemoRender demo={componentsToRender}/>
+        <DemoRender />
       </div>
       <BottomPanel />
     </div>

app/src/containers/RightContainer.tsx

@@ -35,8 +35,10 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
   const [flexJustify, setFlexJustify] = useState('');
   const [flexAlign, setFlexAlign] = useState('');
   const [BGColor, setBGColor] = useState('');
-  // Caret
+  // Caret Start
   const [compText, setCompText] = useState('');
+  const [cssClasses, setCssClasses] = useState('');
+  // Caret End
   const [compWidth, setCompWidth] = useState('');
   const [compHeight, setCompHeight] = useState('');
   const [deleteLinkedPageError, setDeleteLinkedPageError] = useState(false);
@@ -53,9 +55,10 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       if (configTarget.child && element.childId === configTarget.child.id) {
         attributes = element.attributes;
         setCompText(attributes.text ? attributes.text : '');
+        setCssClasses(attributes.cssClasses ? attributes.cssClasses : '');
       }
     }
-    console.log('Attributes: ', configTarget.child);
+    console.log('Canvas Element Detail: ', configTarget.child);
     // Caret End
     const style = configTarget.child
       ? configTarget.child.style
@@ -101,12 +104,16 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
       case 'bgcolor':
         setBGColor(inputVal);
         break;
-      // Caret
+      // Caret Start
       case 'compText':
         setCompText(inputVal);
         break;
+      case 'cssClasses':
+        setCssClasses(inputVal);
+        break;
       default:
         break;
+      // Caret End
     }
   };
 
@@ -208,6 +215,7 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
     // Caret
     const attributesObj: any = {};
     if (compText !== '') attributesObj.compText = compText;
+    if (cssClasses !== '') attributesObj.cssClasses = cssClasses;
 
     dispatch({
       type: 'UPDATE CSS',
@@ -321,9 +329,10 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
     (e.key === 'z' && e.metaKey && !e.shiftKey || e.key === 'z' && e.ctrlKey && !e.shiftKey) ? handleUndo()
       // Redo
       : (e.shiftKey && e.metaKey && e.key === 'z' || e.shiftKey && e.ctrlKey && e.key === 'z') ? handleRedo()
-        // Delete HTML tag off canvas
-        : (e.key === 'Backspace') ? handleDelete()
-          // Save
+      // Delete HTML tag off canvas
+      // Caret
+        : (e.key === 'Backspace' && e.ctrlKey) ? handleDelete()
+        // Save
           : (e.key === 's' && e.ctrlKey && e.shiftKey || e.key === 's' && e.metaKey && e.shiftKey) ? handleSave() : '';
   }, []);
 
@@ -463,6 +472,24 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
               </FormControl>
             </div>
           </div>
+          <div className={classes.configRow}>
+            <div className={isThemeLight ? `${classes.configType} ${classes.lightThemeFontColor}` : `${classes.configType} ${classes.darkThemeFontColor}`}>
+              <h3>Css Classes:</h3>
+            </div>
+            <div className={classes.configValue}>
+              <FormControl variant="filled" className={classes.formControl}>
+                <TextField
+                  variant="filled"
+                  name="cssClasses"
+                  className={classes.select}
+                  inputProps={{ className: isThemeLight ? `${classes.selectInput} ${classes.lightThemeFontColor}` : `${classes.selectInput} ${classes.darkThemeFontColor}` }}
+                  value={cssClasses}
+                  onChange={handleChange}
+                  placeholder="Text"
+                />
+              </FormControl>
+            </div>
+          </div>
           {/* Caret End */}
           <div className={classes.buttonRow}>
             <Button