Merge pull request #4 from MadinventorZero/codepreview

Added Input/Label elements, Fixed Broken Img

Author: MadinventorZero

app/src/components/left/HTMLItem.tsx

@@ -119,14 +119,14 @@ const HTMLItem : React.FC<{
       })
     );
   };
-
+  // Caret updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
-      { id <= 11 &&
+      { id <= 13 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>
         </div>}
-      {id > 11 &&
+      {id > 13 &&
       <span id="customHTMLElement">
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/components/main/DemoRender.tsx

@@ -28,10 +28,11 @@ const DemoRender = (props): JSX.Element => {
         const innerText = element.attributes.compText;
         const classRender = element.attributes.cssClasses;
         let renderedChildren;
-        if (element.children.length > 0) {
+        if (elementType !== 'input' && elementType !== 'img' && element.children.length > 0) {
           renderedChildren = componentBuilder(element.children);
         }
-        componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
+        if (elementType === 'input' || elementType === 'img') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}</Box>);
+        else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={childId}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }
     }

app/src/containers/RightContainer.tsx

@@ -147,7 +147,8 @@ const RightContainer = ({ isThemeLight }): JSX.Element => {
           focusTarget.child.style = focusChild.style;
           break;
         }
-        currentChild.children.forEach(child => searchArray.push(child));
+        // Caret Update
+        if (currentChild.name !== 'input' && currentChild.name !== 'img') currentChild.children.forEach(child => searchArray.push(child));
       }
 
       // if type is Component, use child's typeId to search through state components and find matching component's name

app/src/context/HTMLTypes.tsx

@@ -113,10 +113,28 @@ const HTMLTypes: HTMLType[] = [
     id: 5,
     tag: 'span',
     name: 'Span',
-    style: { fontSize: '1.5em' },
+    style: { fontSize: '1em' },
     placeHolderShort: 'Span',
     placeHolderLong: '',
     icon: HeaderIcon
+  },
+  {
+    id: 12,
+    tag: 'input',
+    name: 'Input',
+    style: { fontSize: '1em' },
+    placeHolderShort: 'Input',
+    placeHolderLong: '',
+    icon: HeaderIcon
+  },
+  {
+    id: 13,
+    tag: 'label',
+    name: 'Label',
+    style: { fontSize: '1em' },
+    placeHolderShort: <label>Label</label>,
+    placeHolderLong: '',
+    icon: HeaderIcon
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -98,7 +98,19 @@ const generateUnformattedCode = (
             return `<${child.tag}${formatStyles(
               child.style
               )}>${writeNestedElements(child.children)}</${child.tag}>`;
-          } else if (child.tag === 'p') {
+          } 
+            // Caret Start
+            else if (child.tag === 'input') {
+            return `<${child.tag}${formatStyles(child.style)}>Input</${
+              child.tag
+            }>`;
+          } else if (child.tag === 'label') {
+            return `<${child.tag}${formatStyles(child.style)}>Label</${
+              child.tag
+            }>`;
+          } 
+            // Caret End
+            else if (child.tag === 'p') {
             return `<${child.tag}${formatStyles(
               child.style
             )}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</${

app/src/helperFunctions/manageSeparators.ts

@@ -37,7 +37,8 @@ manageSeparators.handleSeparators = (arr: object[], str: string) => {
       manageSeparators.nextTopSeparatorId += 1;
     }
     // check is length is > 0 or it is a nested element
-    if (arr[index].children.length) {
+    // Caret Update
+    if ((arr[index].name !== 'input' && arr[index].name !== 'img') && arr[index].children.length) {
     // recursive call if children array
        (str === 'delete' || str === 'change position') ? manageSeparators.handleSeparators(arr[index].children, str) : manageSeparators.handleSeparators(arr[index].children);
     }

app/src/interfaces/Interfaces.ts

@@ -1,4 +1,4 @@
-nsimport { DragObjectWithType } from 'react-dnd';
+import { DragObjectWithType } from 'react-dnd';
 
 export interface State {
   name: string;

app/src/reducers/componentReducer.ts

@@ -33,14 +33,17 @@ const reducer = (state: State, action: Action) => {
       // shift off the first value and assign to an element
       const currentNode = nodeArr.shift();
       // try to find id of childNode in children
-      for (let i = 0; i <= currentNode.children.length - 1; i++) {
-        // if match is found return object with both the parent and the index value of the child
-        if (currentNode.children[i].childId === childId) {
-          return { directParent: currentNode, childIndexValue: i };
+      // Caret Update
+      if (currentNode.name !== 'input' && currentNode.name !== 'img') {
+        for (let i = 0; i <= currentNode.children.length - 1; i++) {
+          // if match is found return object with both the parent and the index value of the child
+          if (currentNode.children[i].childId === childId) {
+            return { directParent: currentNode, childIndexValue: i };
+          }
         }
+        // if child node isn't found add each of the current node's children to the search array
+        currentNode.children.forEach((node: ChildElement) => nodeArr.push(node));
       }
-      // if child node isn't found add each of the current node's children to the search array
-      currentNode.children.forEach((node: ChildElement) => nodeArr.push(node));
     }
     // if no search is found return -1
     return { directParent: null, childIndexValue: null };
@@ -84,7 +87,8 @@ const reducer = (state: State, action: Action) => {
       const currentNode = nodeArr.shift();
       if (currentNode.childId === childId) return currentNode;
       // if child node isn't found add each of the current node's children to the search array
-      currentNode.children.forEach(node => nodeArr.push(node));
+      // Caret Update
+      if (currentNode.name !== 'input' && currentNode.name !== 'img') currentNode.children.forEach(node => nodeArr.push(node));
     }
     // if no match is found return false
     return;
@@ -309,6 +313,9 @@ const reducer = (state: State, action: Action) => {
 
       // if the childId is null, this signifies that we are adding a child to the top-level component rather than another child element
       // we also add a separator before any new child
+      // Caret Update if the newChild Element is an input or img type, delete the children key/value pair
+      if (newChild.name === 'input' && newChild.name === 'img') delete newChild.children;
+
       let directParent;
       if (childId === null) {
         parentComponent.children.push(topSeparator);
@@ -365,20 +372,25 @@ const reducer = (state: State, action: Action) => {
         component,
         currentChildId
       );
-      
-      const child = { ...directParent.children[childIndexValue] };
-     
-      directParent.children.splice(childIndexValue, 1);
-
-      // if the childId is null, this signifies that we are adding a child to the top level component rather than another child element
-      if (newParentChildId === null) {
-        component.children.push(child);
-      }
-      // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
-      else {
-        const directParent = findChild(component, newParentChildId);
-        directParent.children.push(child);
+      // Caret start
+      // BREAKING HERE during manipulation of positions. Sometimes get a null value when manipulating positions
+      // Only run if the directParent exists
+      if (directParent) {
+        const child = { ...directParent.children[childIndexValue] };
+       
+        directParent.children.splice(childIndexValue, 1);
+        
+        // if the childId is null, this signifies that we are adding a child to the top level component rather than another child element
+        if (newParentChildId === null) {
+          component.children.push(child);
+        }
+        // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
+        else {
+          const directParent = findChild(component, newParentChildId);
+          directParent.children.push(child);
+        }
       }
+      // Caret End
 
       let nextTopSeparatorId = state.nextTopSeparatorId;