changed solution to handle multiple propDefinitions

teleporthq · Feb 5, 2020 · c1d4f86 · c1d4f86
1 parent a684854
commit c1d4f86
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 85 deletions.
diff --git a/components/FlipWraper.tsx b/components/FlipWraper.tsx
@@ -4,40 +4,40 @@ import UIDLtoHTMLComponent from "../components/UIDLtoHTMLComponent";
 import SplitEditor from "../components/SplitEditor";
 
 export default function FlipWrapper() {
-
   const [isHidden, setIsHidden] = useState(false);
   const [uidl, setUidl] = useState("");
 
   const handleClick = () => {
     setIsHidden(!isHidden);
-    if(isHidden){
-      document.getElementById("hide").innerHTML = "<"
+    if (isHidden) {
+      document.getElementById("hide").innerHTML = "<";
     } else {
-      document.getElementById("hide").innerHTML = ">"
+      document.getElementById("hide").innerHTML = ">";
     }
   };
 
-  const handleChange = (newValue) => {
+  const handleChange = newValue => {
     setUidl(newValue);
-  }
-
+  };
   return (
     <div className="mainContainer">
       <SplitEditor onChange={handleChange} uidl={uidl} isHidden={isHidden} />
-      <button className="hideButton" id="hide" onClick = {() => handleClick()}>&lt;</button>
+      <button className="hideButton" id="hide" onClick={() => handleClick()}>
+        &lt;
+      </button>
       <UIDLtoHTMLComponent uidl={uidl} />
       <style jsx>{`
         .mainContainer {
           display: flex;
           height: 100vh;
           width: 100vw;
-          align-items:stretch
+          align-items: stretch;
         }
 
         .hideButton {
           width: 2%;
         }
-        `}</style>
+      `}</style>
     </div>
   );
 }
diff --git a/components/SplitEditor.tsx b/components/SplitEditor.tsx
@@ -3,16 +3,17 @@ import dynamic from "next/dynamic";
 
 const CodeEditor = dynamic(import("./AceEditor"), { ssr: false });
 
-const SplitEditor = ({isHidden,onChange,uidl}) => {
-  return (
-    isHidden? <div></div> :
+const SplitEditor = ({ isHidden, onChange, uidl }) => {
+  return isHidden ? (
+    <div></div>
+  ) : (
     <div className="container">
       <div className="editorContainer">
         <div className="wraper" id="TEST">
           <CodeEditor
             mode={"json"}
             value={uidl}
-            onChange={(newValue) => onChange(newValue)}
+            onChange={newValue => onChange(newValue)}
           />
         </div>
       </div>
@@ -24,7 +25,7 @@ const SplitEditor = ({isHidden,onChange,uidl}) => {
           width: 100%;
           margin: auto;
         }
-        .editorContainer{
+        .editorContainer {
           position: relative;
           height: 100%;
           width: 100%;
@@ -33,7 +34,7 @@ const SplitEditor = ({isHidden,onChange,uidl}) => {
         .container {
           position: relative;
           height: 100%;
-          min-width: 30%;
+          min-width: 50%;
           border-radius: 6px;
           background: #0b032d;
         }

diff --git a/components/UIDLtoHTMLComponent.tsx b/components/UIDLtoHTMLComponent.tsx
@@ -2,18 +2,18 @@ import React, { useEffect } from "react";
 import UIDLToHtml from "../utils/UIDLToHtml";
 import UIDLParser from "../utils/UIDLParser";
 export default function UIDLtoHTMLComponent(props): any {
-
-
   useEffect(() => {
-    let UIDLObject : unknown
-    try{
-      UIDLObject = JSON.parse(props.uidl)
+    let UIDLObject: unknown;
+    try {
+      UIDLObject = JSON.parse(props.uidl);
     } catch (e) {
-      UIDLObject = ""
+      UIDLObject = "";
     }
-
-    const {html, style} = UIDLToHtml(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))));
-    document.getElementById("htmlContainer").innerHTML = html
+    console.log(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))));
+    const { html, style } = UIDLToHtml(
+      UIDLParser(JSON.parse(JSON.stringify(UIDLObject)))
+    );
+    document.getElementById("htmlContainer").innerHTML = html;
 
     if (document.getElementById("generatedElementStyle")) {
       document.getElementById("generatedElementStyle").innerHTML = style;
@@ -24,66 +24,62 @@ export default function UIDLtoHTMLComponent(props): any {
     sheet.innerHTML = style;
     sheet.id = "generatedElementStyle";
     document.body.appendChild(sheet);
-
-  }, [props])
+  }, [props]);
 
   return (
     <div className="container">
-
-      <div className="htmlWrapper" >
+      <div className="htmlWrapper">
         <div id="htmlContainer" className="htmlContainer"></div>
       </div>
 
-
-        <style jsx>{`
-          .htmlContainer {
-            position: relative;
-            height: 100%;
-            width: 100%;
-            margin: auto;
-            background-color: white;
-          }
-          .htmlWrapper {
-            position: relative;
-            height: 100%;
-            width: 100%;
-            border-radius: 6px;
-            background: #0b032d;
-          }
-          .container {
-            height: 100%;
-            width: 100%;
-          }
-          .buton{
-            position: relative;
-            display: block;
-            margin: 5% auto 0;
-            padding: 14px 15px;
-            color: #fff;
-            font-size:14px;
-            font-weight: bold;
-            text-align: center;
-            text-decoration: none;
-            text-transform: uppercase;
-            overflow: hidden;
-            letter-spacing: .08em;
-            border-radius: 0;
-            text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-            transition: all 1s ease;
-            border: 2px solid #D24D57;
-          }
-
-          .buton:hover {
-            background: #D24D57;
-            transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-          }
+      <style jsx>{`
+        .htmlContainer {
+          position: relative;
+          height: 100%;
+          width: 100%;
+          margin: auto;
+          background-color: white;
+        }
+        .htmlWrapper {
+          position: relative;
+          height: 100%;
+          width: 100%;
+          border-radius: 6px;
+          background: #0b032d;
+        }
+        .container {
+          height: 100%;
+          width: 100%;
+        }
+        .buton {
+          position: relative;
+          display: block;
+          margin: 5% auto 0;
+          padding: 14px 15px;
+          color: #fff;
+          font-size: 14px;
+          font-weight: bold;
+          text-align: center;
+          text-decoration: none;
+          text-transform: uppercase;
+          overflow: hidden;
+          letter-spacing: 0.08em;
+          border-radius: 0;
+          text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
+          transition: all 1s ease;
+          border: 2px solid #d24d57;
+        }
 
-          .buton{
-            color: #0b032d;
-            cursor: pointer;
-          }
-        `}</style>
+        .buton:hover {
+          background: #d24d57;
+          transform: translateX(-50%) translateY(-50%) rotate(-25deg);
+        }
 
+        .buton {
+          color: #0b032d;
+          cursor: pointer;
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/utils/UIDLParser.ts b/utils/UIDLParser.ts
@@ -46,10 +46,8 @@ const UILDParser = (obj: UIDLElementContent, depthLevel: number = -1) => {
           let test = value.children.map((child, i) => {
             return { type: "static", content: child };
           });
-          console.log("From map: ", test);
 
           value.children = test;
-          console.log("Original", value.children);
         }
         const newValues = value.children.map(child => {
           if (child.type === "conditional") {
@@ -63,8 +61,6 @@ const UILDParser = (obj: UIDLElementContent, depthLevel: number = -1) => {
 
         delete value.children;
       }
-      console.log(acc);
-
       return fixSpecialCases(acc, defaultState, defaultProps);
     },
     []
@@ -83,9 +79,12 @@ const fixSpecialCases = (
   // Treat DefaultProps Case
   if (props && Object.keys(props).length) {
     const consideringProps = filteredResult.map((element, i) => {
-      if (element.elementInfo["id"] === Object.keys(props)[0]) {
+      let myFind = Object.keys(props).find(
+        prop => prop === element.elementInfo["id"]
+      );
+      if (myFind) {
         return (element = {
-          elementInfo: props[Object.keys(props)[0]].defaultValue,
+          elementInfo: props[myFind].defaultValue,
           depthLevel: element.depthLevel
         });
       } else {
@@ -94,8 +93,6 @@ const fixSpecialCases = (
     });
     return consideringProps;
   }
-  console.log(filteredResult);
-
   return filteredResult;
 };