feat: show live layout <3

BrianCraig · Feb 28, 2020 · bbdf3fd · bbdf3fd
1 parent bb642ac
commit bbdf3fd
Showing 1 changed file with 53 additions and 35 deletions.
diff --git a/src/Layout.tsx b/src/Layout.tsx
@@ -1,10 +1,9 @@
-import React from "react";
+import React, { useContext, FunctionComponent } from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import { Typography } from "@material-ui/core";
 import { createLayoutComponent } from "./constraints/generator";
 import { vertices } from "./examples/vertices";
-
-const Comp = createLayoutComponent(vertices);
+import { LayoutContext, LayoutProvider } from "./LayoutContext";
 
 const F = "";
 
@@ -56,43 +55,62 @@ const useStyles = makeStyles({
   }
 });
 
-export const Layout: React.FC = () => {
-  const classes = useStyles();
+const ComponentList: FunctionComponent<{ box: string; item: string }> = ({
+  box,
+  item
+}) => {
+  const { layout, addComponent } = useContext(LayoutContext);
+
   return (
-    <div className={classes.root}>
-      <div className={classes.leftBlock}>
-        <div className={classes.titleBox}>
-          <Typography component="h1" className={classes.title}>
-            Components
-          </Typography>
-        </div>
-        <div className={classes.componentNameBox}>
-          <Typography component="h1" className={classes.componentName}>
-            HeaderXStyleB
-          </Typography>
-        </div>
-        <div className={classes.componentNameBox}>
-          <Typography component="h1" className={classes.componentName}>
-            HeaderXStyleBasd
+    <>
+      {Object.keys(layout).map(name => (
+        <div className={box}>
+          <Typography component="h1" className={item}>
+            {name}
           </Typography>
         </div>
-        <div className={classes.componentNameBox}>
-          <Typography
-            component="h1"
-            className={`${classes.componentName} ${classes.bold}`}
-          >
-            AJGS
-          </Typography>
+      ))}
+      <Typography
+        onClick={() =>
+          addComponent(
+            [...Array(10)]
+              .map(i => (~~(Math.random() * 36)).toString(36))
+              .join("")
+          )
+        }
+      >
+        Add component
+      </Typography>
+    </>
+  );
+};
+
+const ComponentView = () => {
+  const { layout, addComponent } = useContext(LayoutContext);
+  const Comp = createLayoutComponent(layout);
+  return <Comp width={400} height={400} />;
+};
+
+export const Layout: React.FC = () => {
+  const classes = useStyles();
+  return (
+    <LayoutProvider>
+      <div className={classes.root}>
+        <div className={classes.leftBlock}>
+          <div className={classes.titleBox}>
+            <Typography component="h1" className={classes.title}>
+              Components
+            </Typography>
+          </div>
+          <ComponentList
+            box={classes.componentNameBox}
+            item={classes.componentName}
+          />
         </div>
-        <div className={classes.componentNameBox}>
-          <Typography component="h1" className={classes.componentName}>
-            SuperLargeTextXDXDXDXDXDXDXDXXDXDXD
-          </Typography>
+        <div className={classes.centerBlock}>
+          <ComponentView />
         </div>
       </div>
-      <div className={classes.centerBlock}>
-        <Comp width={400} height={400} />
-      </div>
-    </div>
+    </LayoutProvider>
   );
 };