Resizable bottom container

Author: stormikph

app/src/components/bottom/BottomPanel.tsx

@@ -1,16 +1,15 @@
 import React, { useContext } from 'react';
 import { stateContext } from '../../context/context';
 import BottomTabs from './BottomTabs';
-// import BottomTabs from './BottomTabs';
 
 // const IPC = require('electron').ipcRenderer;
 
 const BottomPanel = () => {
   return (
-    <div className="bottom-panel" style={{ width: '100%' }}>
+    <div className="bottom-panel" style={{ width: '100%', height: '100%' }}>
       <BottomTabs />
     </div>
   );
 };
 
-export default BottomPanel;
+export default BottomPanel;

app/src/components/bottom/CodePreview.tsx

@@ -26,6 +26,7 @@ const CodePreview = () => {
         justifyContent: 'center'
       }}
     >
+      
       <AceEditor
         mode="javascript"
         theme="monokai"

app/src/components/left/ComponentPanel.tsx

@@ -66,7 +66,7 @@ const ComponentPanel = (): JSX.Element => {
 
   // Add a new component
   const createOption = (inputName: String) => {
-    // format name so first letter is capitalized and there are no whitespaces
+    // format name so first letter is capitalized and there are no white spaces
     let inputNameClean = inputName.replace(/\s+/g, '');
     const formattedName =
       inputNameClean.charAt(0).toUpperCase() + inputNameClean.slice(1);
@@ -86,11 +86,6 @@ const ComponentPanel = (): JSX.Element => {
     if (!compName.charAt(0).match(letters)) {
       triggerError('letters');
       return;
-      // }
-      // let firstChar = compName.charAt(0);
-      // if (firstChar <= '9' && firstChar >= '0') {
-      //   triggerError('number');
-      //   return;
     } else if (compName.trim() === '') {
       triggerError('empty');
       return;

app/src/components/left/HTMLItem.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useDrag } from 'react-dnd';
+import { ItemTypes } from '../../constants/ItemTypes';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+
+
+const useStyles = makeStyles({
+  HTMLPanelItem: {
+    color: 'white',
+    // this is experimental for version: BLADERUNNER THEME
+    backgroundColor: 'transparent',
+    // minWidth: '340px',
+    minHeight: '60px',
+    marginBottom: '10px',
+    marginRight: '5px',
+    marginLeft: '5px',
+    border: '2px dotted rgba(255,255,255, 0.45)',
+    borderRadius: '8px',
+    cursor: 'grab',
+    '& > h3': {
+      display: 'inline-block',
+      paddingTop: '18px'
+    }
+  }
+});
+
+const HTMLItem: React.FC<{
+  name: string;
+  id: number;
+  Icon: any;
+}> = ({ name, id, Icon }) => {
+  const classes = useStyles();
+
+  const [{ isDragging }, drag] = useDrag({
+    item: {
+      type: ItemTypes.INSTANCE,
+      newInstance: true,
+      instanceType: 'HTML Element',
+      name,
+      instanceTypeId: id
+    },
+    collect: (monitor: any) => ({
+      isDragging: !!monitor.isDragging()
+    })
+  });
+
+  return (
+    <Grid item xs={5} key={`html-${name}`}>
+      <div ref={drag} className={classes.HTMLPanelItem}>
+        <h3>{name}</h3>
+        <span
+          style={{
+            verticalAlign: 'middle',
+            display: 'inline-block',
+            marginLeft: '5px'
+          }}
+        >
+          {Icon && <Icon />}
+        </span>
+      </div>
+    </Grid>
+  );
+}
+
+export default HTMLItem;

app/src/components/left/HTMLPanel.tsx

@@ -1,74 +1,75 @@
-import React from 'react';
+import React, { useState, useContext } from 'react';
 import Grid from '@material-ui/core/Grid';
-import { useDrag } from 'react-dnd';
-import { ItemTypes } from '../../constants/ItemTypes';
-import HTMLTypes from '../../context/HTMLTypes';
-import { makeStyles } from '@material-ui/core/styles';
+import { stateContext } from '../../context/context';
+import HTMLItem from './HTMLItem';
 
-const useStyles = makeStyles({
-  HTMLPanelItem: {
-    color: 'white',
-    // this is experimental for version: BLADERUNNER THEME
-    backgroundColor: 'transparent',
-    // minWidth: '340px',
-    minHeight: '60px',
-    marginBottom: '10px',
-    marginRight: '5px',
-    marginLeft: '5px',
-    border: '2px dotted rgba(255,255,255, 0.45)',
-    borderRadius: '8px',
-    cursor: 'grab',
-    '& > h3': {
-      display: 'inline-block',
-      paddingTop: '18px'
-    }
+const HTMLPanel = (): JSX.Element => {
+  const [tag, setTag] = useState('');
+  const [name, setName] = useState('');
+  const [currentID, setCurrentID] = useState(12);
+  const [state, dispatch] = useContext(stateContext);
+
+  const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTag(e.target.value);
   }
-});
 
-const HTMLPanel = (): JSX.Element => {
-  const classes = useStyles();
-  const options = HTMLTypes.map(option => {
-    const [{ isDragging }, drag] = useDrag({
-      item: {
-        type: ItemTypes.INSTANCE,
-        newInstance: true,
-        instanceType: 'HTML Element',
-        name: option.name,
-        instanceTypeId: option.id
-      },
-      collect: (monitor: any) => ({
-        isDragging: !!monitor.isDragging()
-      })
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value);
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newElement = {
+      id: currentID,
+      tag,
+      name,
+      style: {},
+      placeHolderShort: name,
+      placeHolderLong: '',
+      icon: null
+    };
+    dispatch({
+      type: 'ADD ELEMENT',
+      payload: newElement
     });
-    return (
-      <Grid item xs={5} key={`html-${option.name}`}>
-        <div ref={drag} className={classes.HTMLPanelItem}>
-          <h3>{option.name}</h3>
-          <span
-            style={{
-              verticalAlign: 'middle',
-              display: 'inline-block',
-              marginLeft: '5px'
-            }}
-          >
-            {<option.icon />}
-          </span>
-        </div>
-      </Grid>
-    );
-  });
+    setCurrentID(currentID + 1);
+    setTag('');
+    setName('');
+    console.log("SUBMIT BUTTON CLICKED: ", newElement);
+  }
 
   return (
     <div>
       <h4> HTML Elements</h4>
+      <div>
+        <form onSubmit={handleSubmit}>
+          <h4>Create New Element: </h4>
+          <label>
+            Tag:
+            <input type="text" name="Tag" value={tag} onChange={handleTagChange} />
+          </label>
+          <label>
+            Tag Name:
+            <input type="text" name="Tag Name" value={name} onChange={handleNameChange} />
+          </label>
+          <input type="submit" value="Add Element" />
+        </form>
+      </div>
       <Grid
         container
         spacing={1}
         direction="row"
         justify="center"
         alignItems="center"
       >
-        {options}
+        {state.HTMLTypes.map(option => (
+          <HTMLItem
+            name={option.name}
+            key={`html-${option.name}`}
+            id={option.id}
+            Icon={option.icon}
+          />
+        ))}
       </Grid>
     </div>
   );

app/src/components/main/DirectChildHTML.tsx

@@ -10,7 +10,6 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import IndirectChild from './IndirectChild';
-import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
 
 function DirectChildHTML({
@@ -24,7 +23,7 @@ function DirectChildHTML({
 
   // find the HTML element corresponding with this instance of an HTML element
   // find the current component to render on the canvas
-  const HTMLType: HTMLType = HTMLTypes.find(
+  const HTMLType: HTMLType = state.HTMLTypes.find(
     (type: HTMLType) => type.id === typeId
   );
 

app/src/components/right/ProjectManager.tsx

@@ -71,6 +71,7 @@ const ProjectManager = () => {
           <ListItemText
             primary={'Yes, delete all project data'}
             style={{ textAlign: 'center' }}
+            onClick={closeModal}
           />
         </ListItem>
       </List>

app/src/containers/MainContainer.tsx

@@ -2,6 +2,9 @@ import React, { Component } from 'react';
 import BottomPanel from '../components/bottom/BottomPanel';
 import CanvasContainer from '../components/main/CanvasContainer';
 
+//test for resizable component
+import { Resizable } from "re-resizable";
+
 // Main container contains the canvas which renders the components/elements on screen
 // and the bottom panel which displays the code for the component
 class MainContainer extends Component {
@@ -13,9 +16,10 @@ class MainContainer extends Component {
         >
           <CanvasContainer />
         </div>
-
-        <BottomPanel />
-      </div>
+        <Resizable minHeight={'25%'} enable={{ top: true }}>
+          <BottomPanel />
+        </Resizable>
+    </div>
     );
   }
 }

app/src/containers/RightContainer.tsx

@@ -8,7 +8,6 @@ import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 
 import { stateContext } from '../context/context';
-import HTMLTypes from '../context/HTMLTypes';
 
 import ProjectManager from '../components/right/ProjectManager';
 
@@ -116,7 +115,7 @@ const RightContainer = (props): JSX.Element => {
         // if type is HTML Element, search through HTML types to find matching element's name
       } else if (focusChild.type === 'HTML Element') {
         focusTarget.child.type = 'HTML element';
-        focusTarget.child.name = HTMLTypes.find(
+        focusTarget.child.name = state.HTMLTypes.find(
           elem => elem.id === focusChild.typeId
         ).name;
       }
@@ -166,7 +165,7 @@ const RightContainer = (props): JSX.Element => {
   const handlePageDelete = (id) => () => {
     dispatch({ type: 'DELETE PAGE', payload: { id }});
   }
-  
+
   const handleDeleteReusableComponent = () => {
     dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   }
@@ -398,7 +397,7 @@ const RightContainer = (props): JSX.Element => {
                 DELETE PAGE
               </Button>
             </div>
-          ) : 
+          ) :
             ''
           )}
         </div>

app/src/context/initialState.ts

@@ -1,4 +1,5 @@
 import { State } from '../interfaces/Interfaces';
+import HTMLTypes from './HTMLTypes';
 
 // This is the state that will be set for a new project or when the user resets the state of their project
 export const initialState: State = {
@@ -17,7 +18,8 @@ export const initialState: State = {
   rootComponents: [1],
   canvasFocus: { componentId: 1, childId: null },
   nextComponentId: 2,
-  nextChildId: 1
+  nextChildId: 1,
+  HTMLTypes
 };
 
 export default initialState;