fix: editing label content should not cause fields to disappear

1 files changed, 36 insertions, 31 deletions

diff --git a/src/components/FormBuilder/index.js b/src/components/FormBuilder/index.js
index b9f0389..8a13bf0 100644
--- a/src/components/FormBuilder/index.js
+++ b/src/components/FormBuilder/index.js
@@ -28,25 +28,23 @@ export default function FormBuilder() {
 const availableWidgets = {
   label: {
     name: "Label",
-    element: (props) => (
+    element: ({ id, name, setName }) => (
       <TextField
-        id="outlined-basic"
+        id={id}
         variant="standard"
-        value={props?.name}
-        onChange={(e) =>
-          props?.setFormField({ ...props, name: e.target.value })
-        }
+        value={name}
+        onChange={(e) => setName(e.target.value)}
         fullWidth
       />
     ),
-    finalElement: (props) => <div>{props?.id}</div>,
+    finalElement: ({ id }) => <div>{id}</div>,
   },
   number: {
     name: "Number",
-    element: (props) => (
+    element: ({ id }) => (
       <TextField
-        id="outlined-basic"
-        label={props?.id ? `example field ${props.id}` : "Outlined"}
+        id={id}
+        label={id ? `example field ${id}` : "Outlined"}
         variant="outlined"
         type={"number"}
         fullWidth
@@ -55,10 +53,10 @@ const availableWidgets = {
   },
   text: {
     name: "Text",
-    element: (props) => (
+    element: ({ id }) => (
       <TextField
-        id="outlined-basic"
-        label={props?.id ? `example field ${props.id}` : "Outlined"}
+        id={id}
+        label={id ? `example field ${id}` : "Outlined"}
         variant="outlined"
         fullWidth
       />
@@ -66,10 +64,10 @@ const availableWidgets = {
   },
   multiline: {
     name: "Multiline",
-    element: (props) => (
+    element: ({ id }) => (
       <TextField
-        id="outlined-textarea"
-        label={props?.id ? `example field ${props.id}` : "Multiline"}
+        id={id}
+        label={id ? `example field ${id}` : "Multiline"}
         placeholder="Placeholder"
         multiline
         minRows={4}
@@ -127,7 +125,7 @@ function WidgetCard({ name, element, type, finalElement }) {
             <CardHeader title={name} />
             <CardContent>
               <div style={disabledFieldOverlay}>
-                {finalElement ? finalElement() : element()}
+                {finalElement ? finalElement({}) : element({})}
               </div>
             </CardContent>
           </div>
@@ -137,35 +135,42 @@ function WidgetCard({ name, element, type, finalElement }) {
   }
 }
 
-function FormField(props) {
-  if (!props?.type) {
-    console.log("formfield render failed", props);
+function FormField({ formField, setFormField, deleteFormField }) {
+  const { id, type, name } = formField;
+
+  function setName(name) {
+    setFormField({ ...formField, name });
+  }
+
+  if (!type) {
     return;
   }
-  const { element: Element } = availableWidgets[props?.type];
+  const { element: Element } = availableWidgets[type];
   const dragHandleRef = useRef();
   const [target, setTarget] = useState();
   return (
     <Stack
       direction={"row"}
-      sx={{ width: "100%", cursor: "grab" }}
+      sx={{ width: "100%" }}
       alignItems={"center"}
       justifyContent={"space-between"}
       draggable
-      onMouseDown={(e) => setTarget(e.target)}
+      onMouseDown={(e) => {
+        setTarget(e.target);
+      }}
       onDragStart={(e) => {
         if (dragHandleRef.current.contains(target)) {
-          e.dataTransfer.setData("application/formwidgetid", props?.id);
+          e.dataTransfer.setData("application/formwidgetid", id);
         } else {
           e.preventDefault();
         }
       }}
     >
-      <span ref={dragHandleRef}>
+      <span ref={dragHandleRef} style={{ cursor: "grab" }}>
         <DragIndicator />
       </span>
-      <Element {...props} />
-      <IconButton onClick={() => props?.deleteFormField()}>
+      <Element id={id} name={name} setName={setName} type={type} />
+      <IconButton onClick={deleteFormField}>
         <Clear />
       </IconButton>
     </Stack>
@@ -271,12 +276,12 @@ function Form({ initialForm, editable }) {
             index={-1}
           />
         )}
-        {form?.fields?.map((props, i) => (
-          <Grouping key={props?.id}>
+        {form?.fields?.map((formField, i) => (
+          <Grouping key={formField.id}>
             <FormField
               setFormField={(field) => updateFormField(field)}
-              deleteFormField={() => deleteFormField(props.id)}
-              {...props}
+              deleteFormField={() => deleteFormField(formField.id)}
+              formField={formField}
             />
             {editable && (
               <DropZone