feat: add components name

src/AddConstraint.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, useState } from "react";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField } from "@material-ui/core";
+import { LayoutContext } from "./LayoutContext";
+
+export const AddConstraint = () => {
+  const { addingComponent, toggleAddingComponent, addComponent } = useContext(LayoutContext);
+  const [name, setName] = useState<string>("")
+  const close=() =>{
+    toggleAddingComponent()
+    setName("")
+  }
+  const save=() =>{
+    addComponent(name)
+    close()
+  }
+
+  return (
+    <Dialog open={addingComponent} onClose={toggleAddingComponent}>
+      <DialogTitle>
+        Add a new Component
+    </DialogTitle>
+      <DialogContent>
+        <TextField value={name} onChange={(event) => setName(event.currentTarget.value)} label="Component Name" />
+      </DialogContent>
+      <DialogActions>
+      <Button onClick={close}>
+          Cancel
+      </Button>
+      <Button onClick={save} color="primary">
+          Add
+      </Button>
+      </DialogActions>
+    </Dialog>
+  )
+};

src/Layout.tsx

@@ -6,6 +6,7 @@ import { createLayoutComponent } from "./constraints/generator";
 import { LayoutContext, LayoutProvider } from "./LayoutContext";
 import { DebugElement } from "./DebugComponent";
 import { EditConstraint } from "./EditConstraint";
+import { AddConstraint } from "./AddConstraint";
 
 const F = "";
 
@@ -61,7 +62,7 @@ const ComponentList: FunctionComponent<{ box: string; item: string }> = ({
   box,
   item
 }) => {
-  const { layout, addComponent } = useContext(LayoutContext);
+  const { layout, toggleAddingComponent } = useContext(LayoutContext);
 
   return (
     <>
@@ -73,13 +74,7 @@ const ComponentList: FunctionComponent<{ box: string; item: string }> = ({
         </div>
       ))}
       <Typography
-        onClick={() =>
-          addComponent(
-            [...Array(10)]
-              .map(i => (~~(Math.random() * 36)).toString(36))
-              .join("")
-          )
-        }
+        onClick={toggleAddingComponent}
       >
         Add component
       </Typography>
@@ -95,10 +90,10 @@ const ComponentView = () => {
   Object.keys(layout).forEach(name => {
     props[name] = <DebugElement name={name} />;
   });
-  
+
   return (
-    <ResizableBox  height={size.height} width={size.width} onResize={(event, { size, handle}) => {
-      setSize({width: size.width, height: size.height})
+    <ResizableBox height={size.height} width={size.width} onResize={(event, { size, handle }) => {
+      setSize({ width: size.width, height: size.height })
     }}>
       <Comp
         width={size.width}
@@ -115,6 +110,7 @@ export const Layout: React.FC = () => {
   return (
     <LayoutProvider>
       <EditConstraint />
+      <AddConstraint />
       <div className={classes.root}>
         <div className={classes.leftBlock}>
           <div className={classes.titleBox}>

src/LayoutContext.tsx

@@ -11,9 +11,12 @@ import {
   ConstraintDefinition
 } from "./constraints/definition";
 
+
 export interface LayoutContextInterface {
   layout: LayoutDefinition;
   addComponent: (name: string) => void;
+  addingComponent: boolean;
+  toggleAddingComponent: () => void;
   changeConstraint: (constraint: ConstraintDefinition) => void;
   selectedComponent: string;
   setSelectedComponent: Dispatch<SetStateAction<string>>;
@@ -54,6 +57,7 @@ const defaultConstraints: ConstraintDefinition[] = [
 
 export const LayoutProvider: FunctionComponent = ({ children }) => {
   const [layout, setLayout] = useState<LayoutDefinition>({});
+  const [addingComponent, setAddingComponent] = useState<boolean>(false)
   const [selectedComponent, setSelectedComponent] = useState<string>("");
   const [editConstraint, setEditConstraint] = useState<string>("");
   const addComponent = (name: string) =>
@@ -84,6 +88,8 @@ export const LayoutProvider: FunctionComponent = ({ children }) => {
       value={{
         layout,
         addComponent,
+        addingComponent,
+        toggleAddingComponent: () => setAddingComponent(!addingComponent),
         changeConstraint,
         selectedComponent,
         setSelectedComponent,