@springmicro/forms 0.7.5 → 0.7.7

package/src/builder/form-builder.tsx

@@ -1,256 +1,256 @@
-import React from "react";
-import NodeParent from "./nodes/node-parent";
-import BottomDrawer from "./bottom-drawer";
-import {
-  CountdownType,
-  EditingStateType,
-  FormNodeType,
-  FormType,
-  ObjectNode,
-} from "../types/form-builder";
-import { DragDropContext, Droppable } from "react-beautiful-dnd";
-import { serializeBuilderToForm } from "../utils/form-builder";
-import { RJSFSchema, UiSchema } from "@rjsf/utils";
-import { UseStateType } from "../types/utils.type";
-import { Box } from "@mui/material";
-
-export type FormBuilderProps = {
-  nodes: UseStateType<FormNodeType[]>;
-  form: UseStateType<FormType>;
-  saveCallback: (data: { form: RJSFSchema; ui: UiSchema }) => Promise<boolean>;
-};
-
-const countdownSeconds = 5;
-
-export default function FormBuilder({
-  nodes: providedNodes,
-  form: providedForm,
-  saveCallback,
-}: FormBuilderProps) {
-  const [form, setForm] = providedForm;
-  const [baseNodes, setBaseNodes] = providedNodes;
-  const [path, setPath] = React.useState<number[]>([]);
-  const [nodes, setNodes] = React.useState<FormNodeType[]>([...baseNodes]);
-  const editingState = React.useState<EditingStateType>(false);
-
-  /**
-   * ------------------------- PATH MANAGEMENT -----------------------------
-   */
-
-  React.useEffect(() => {
-    if (path.length === 0) {
-      setBaseNodes([...nodes]);
-    } else {
-      setBaseNodes((bn) => {
-        const basePathSearch = [...bn]; // The new base of nodes.
-        let pathSearch = basePathSearch; // Runs through the path and modifies basePathSearch.
-        for (let i = 0; i < path.length - 1; i++) {
-          // Sets pathSearch to every child in the path except for the last one.
-          pathSearch = (pathSearch[path[i]] as ObjectNode).children;
-        }
-        (pathSearch[path[path.length - 1]] as ObjectNode).children = nodes; // Sets the value pathSearch.children in the last value of the path to nodes. (Where the user is currently editing)
-        return [...basePathSearch];
-      });
-    }
-  }, [nodes]);
-
-  React.useEffect(() => {
-    let pathSearch = [...baseNodes];
-    for (let i = 0; i < path.length; i++) {
-      pathSearch = (pathSearch[path[i]] as ObjectNode).children;
-    }
-    setNodes(pathSearch);
-  }, [path]);
-
-  function updatePath(newPathNum?: number) {
-    editingState[1](false);
-    if (newPathNum === undefined) {
-      // If undefined, go up a layer in the path.
-      setPath((p) => p.filter((_, i) => i !== p.length - 1));
-    } else if (newPathNum < 0) {
-      // If negative, reset to base path.
-      setPath([]);
-    } else {
-      // If 0 or higher, push to the end of the path.
-      setPath((p) => [...p, newPathNum]);
-    }
-  }
-
-  /**
-   * ------------------------- AUTOSAVE -----------------------------
-   */
-
-  const timerRef = React.useRef<NodeJS.Timeout>();
-  const [countdown, setCountdown] = React.useState<CountdownType>(undefined);
-
-  function resetCountdown() {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
-    setCountdown(countdownSeconds);
-    timerRef.current = setTimeout(() => {
-      Save();
-    }, countdownSeconds * 1000);
-  }
-
-  const AutosaveNodes: React.Dispatch<React.SetStateAction<FormNodeType[]>> = (
-    action: React.SetStateAction<FormNodeType[]>
-  ) => {
-    setNodes((prevNodes) => {
-      let currentState: FormNodeType[] = prevNodes;
-      if (typeof action === "function") {
-        currentState = action(currentState);
-      } else {
-        currentState = [...action];
-      }
-
-      resetCountdown();
-      return currentState;
-    });
-  };
-
-  const AutosaveForm: React.Dispatch<React.SetStateAction<FormType>> = (
-    action: React.SetStateAction<FormType>
-  ) => {
-    setForm((prevForm) => {
-      let currentState: FormType = prevForm;
-      if (typeof action === "function") {
-        currentState = action(currentState);
-      } else {
-        currentState = { ...prevForm, ...action };
-      }
-
-      resetCountdown();
-      return currentState;
-    });
-  };
-
-  React.useEffect(() => {
-    if (typeof countdown === "string" || countdown === undefined) return;
-    if (countdown > 0) {
-      const interval = setInterval(() => {
-        setCountdown((prevCount) => (prevCount as number) - 1);
-      }, 1000);
-      return () => clearInterval(interval);
-    }
-  }, [countdown]);
-
-  React.useEffect(() => {
-    // Adds a warning when user tries to close tab with unsaved changes
-    if (countdown !== "Saved." && countdown !== undefined) {
-      const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-        const confirmationMessage =
-          "You have unsaved changes. Are you sure you want to leave?";
-        event.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
-        return confirmationMessage; // Gecko, WebKit, Chrome <34
-      };
-
-      window.addEventListener("beforeunload", handleBeforeUnload);
-
-      return () => {
-        window.removeEventListener("beforeunload", handleBeforeUnload);
-      };
-    }
-  }, [countdown]);
-
-  // Runs after autosave countdown finishes.
-  function Save() {
-    setCountdown("Saving...");
-    setBaseNodes((bn) => {
-      // Gets the most up-to-date baseNodes through the setBaseNodes function because it updates in a weird way.
-      const Form = serializeBuilderToForm(form, bn);
-      saveCallback({ ...Form }).then((res) => {
-        console.log("PROMISE RES:", res);
-        if (res) {
-          setCountdown("Saved.");
-          setTimeout(() => {
-            setCountdown(undefined);
-          }, 1500); // Waits 1.5s before removing text
-        } else {
-          setCountdown("Save failed."); // Do not remove this text until another change has been made by the user.
-        }
-      });
-
-      return bn; // doesn't need to return a new object because it's not intended to update any state.
-    });
-    setTimeout(() => {}, Math.random() * 700 + 300); // Simulated API wait time
-  }
-
-  return (
-    <Box
-      sx={{
-        p: 2,
-        width: "100%",
-        height: "100%",
-        borderRadius: 2,
-        border: "1px solid #999",
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
-      <Box
-        id="fb-scrollable"
-        sx={{
-          display: "flex",
-          flexGrow: 1,
-          overflow: "auto",
-          borderTopLeftRadius: 0.5,
-          borderTopRightRadius: 0.5,
-          flexDirection: "column",
-          scrollBehavior: "smooth",
-        }}
-      >
-        <Box sx={{ display: "flex", flexDirection: "column" }}>
-          <DragDropContext
-            onDragEnd={(result) => {
-              AutosaveNodes((prevNodes) => {
-                if (!result.destination) return prevNodes;
-
-                const items = Array.from(prevNodes);
-                const [reorderedItem] = items.splice(result.source.index, 1);
-                items.splice(result.destination.index, 0, reorderedItem);
-
-                return items;
-              });
-            }}
-          >
-            <Droppable droppableId="nodes">
-              {(provided) => (
-                <Box
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                  sx={{ display: "flex", flexDirection: "column", gap: 1 }}
-                >
-                  {nodes.map((node, i) => (
-                    <NodeParent
-                      key={node.nodeId}
-                      node={node}
-                      nodesState={[nodes, AutosaveNodes]}
-                      index={i}
-                      editingState={editingState}
-                      updatePath={() => {
-                        updatePath(i);
-                      }}
-                      deleteNode={() => {
-                        AutosaveNodes((n) => n.filter((_, j) => j !== i));
-                      }}
-                    />
-                  ))}
-                  {provided.placeholder}
-                </Box>
-              )}
-            </Droppable>
-          </DragDropContext>
-        </Box>
-      </Box>
-      <BottomDrawer
-        nodesState={[nodes, AutosaveNodes]}
-        formState={[form, AutosaveForm]}
-        countdown={countdown}
-        path={[path, updatePath]}
-        setEditing={editingState[1]}
-      />
-    </Box>
-  );
-}
+import React from "react";
+import NodeParent from "./nodes/node-parent";
+import BottomDrawer from "./bottom-drawer";
+import {
+  CountdownType,
+  EditingStateType,
+  FormNodeType,
+  FormType,
+  ObjectNode,
+} from "../types/form-builder";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { serializeBuilderToForm } from "../utils/form-builder";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import { UseStateType } from "../types/utils.type";
+import { Box } from "@mui/material";
+
+export type FormBuilderProps = {
+  nodes: UseStateType<FormNodeType[]>;
+  form: UseStateType<FormType>;
+  saveCallback: (data: { form: RJSFSchema; ui: UiSchema }) => Promise<boolean>;
+};
+
+const countdownSeconds = 5;
+
+export default function FormBuilder({
+  nodes: providedNodes,
+  form: providedForm,
+  saveCallback,
+}: FormBuilderProps) {
+  const [form, setForm] = providedForm;
+  const [baseNodes, setBaseNodes] = providedNodes;
+  const [path, setPath] = React.useState<number[]>([]);
+  const [nodes, setNodes] = React.useState<FormNodeType[]>([...baseNodes]);
+  const editingState = React.useState<EditingStateType>(false);
+
+  /**
+   * ------------------------- PATH MANAGEMENT -----------------------------
+   */
+
+  React.useEffect(() => {
+    if (path.length === 0) {
+      setBaseNodes([...nodes]);
+    } else {
+      setBaseNodes((bn) => {
+        const basePathSearch = [...bn]; // The new base of nodes.
+        let pathSearch = basePathSearch; // Runs through the path and modifies basePathSearch.
+        for (let i = 0; i < path.length - 1; i++) {
+          // Sets pathSearch to every child in the path except for the last one.
+          pathSearch = (pathSearch[path[i]] as ObjectNode).children;
+        }
+        (pathSearch[path[path.length - 1]] as ObjectNode).children = nodes; // Sets the value pathSearch.children in the last value of the path to nodes. (Where the user is currently editing)
+        return [...basePathSearch];
+      });
+    }
+  }, [nodes]);
+
+  React.useEffect(() => {
+    let pathSearch = [...baseNodes];
+    for (let i = 0; i < path.length; i++) {
+      pathSearch = (pathSearch[path[i]] as ObjectNode).children;
+    }
+    setNodes(pathSearch);
+  }, [path]);
+
+  function updatePath(newPathNum?: number) {
+    editingState[1](false);
+    if (newPathNum === undefined) {
+      // If undefined, go up a layer in the path.
+      setPath((p) => p.filter((_, i) => i !== p.length - 1));
+    } else if (newPathNum < 0) {
+      // If negative, reset to base path.
+      setPath([]);
+    } else {
+      // If 0 or higher, push to the end of the path.
+      setPath((p) => [...p, newPathNum]);
+    }
+  }
+
+  /**
+   * ------------------------- AUTOSAVE -----------------------------
+   */
+
+  const timerRef = React.useRef<NodeJS.Timeout>();
+  const [countdown, setCountdown] = React.useState<CountdownType>(undefined);
+
+  function resetCountdown() {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setCountdown(countdownSeconds);
+    timerRef.current = setTimeout(() => {
+      Save();
+    }, countdownSeconds * 1000);
+  }
+
+  const AutosaveNodes: React.Dispatch<React.SetStateAction<FormNodeType[]>> = (
+    action: React.SetStateAction<FormNodeType[]>
+  ) => {
+    setNodes((prevNodes) => {
+      let currentState: FormNodeType[] = prevNodes;
+      if (typeof action === "function") {
+        currentState = action(currentState);
+      } else {
+        currentState = [...action];
+      }
+
+      resetCountdown();
+      return currentState;
+    });
+  };
+
+  const AutosaveForm: React.Dispatch<React.SetStateAction<FormType>> = (
+    action: React.SetStateAction<FormType>
+  ) => {
+    setForm((prevForm) => {
+      let currentState: FormType = prevForm;
+      if (typeof action === "function") {
+        currentState = action(currentState);
+      } else {
+        currentState = { ...prevForm, ...action };
+      }
+
+      resetCountdown();
+      return currentState;
+    });
+  };
+
+  React.useEffect(() => {
+    if (typeof countdown === "string" || countdown === undefined) return;
+    if (countdown > 0) {
+      const interval = setInterval(() => {
+        setCountdown((prevCount) => (prevCount as number) - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [countdown]);
+
+  React.useEffect(() => {
+    // Adds a warning when user tries to close tab with unsaved changes
+    if (countdown !== "Saved." && countdown !== undefined) {
+      const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+        const confirmationMessage =
+          "You have unsaved changes. Are you sure you want to leave?";
+        event.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+        return confirmationMessage; // Gecko, WebKit, Chrome <34
+      };
+
+      window.addEventListener("beforeunload", handleBeforeUnload);
+
+      return () => {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
+      };
+    }
+  }, [countdown]);
+
+  // Runs after autosave countdown finishes.
+  function Save() {
+    setCountdown("Saving...");
+    setBaseNodes((bn) => {
+      // Gets the most up-to-date baseNodes through the setBaseNodes function because it updates in a weird way.
+      const Form = serializeBuilderToForm(form, bn);
+      saveCallback({ ...Form }).then((res) => {
+        console.log("PROMISE RES:", res);
+        if (res) {
+          setCountdown("Saved.");
+          setTimeout(() => {
+            setCountdown(undefined);
+          }, 1500); // Waits 1.5s before removing text
+        } else {
+          setCountdown("Save failed."); // Do not remove this text until another change has been made by the user.
+        }
+      });
+
+      return bn; // doesn't need to return a new object because it's not intended to update any state.
+    });
+    setTimeout(() => {}, Math.random() * 700 + 300); // Simulated API wait time
+  }
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        width: "100%",
+        height: "100%",
+        borderRadius: 2,
+        border: "1px solid #999",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        id="fb-scrollable"
+        sx={{
+          display: "flex",
+          flexGrow: 1,
+          overflow: "auto",
+          borderTopLeftRadius: 0.5,
+          borderTopRightRadius: 0.5,
+          flexDirection: "column",
+          scrollBehavior: "smooth",
+        }}
+      >
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <DragDropContext
+            onDragEnd={(result) => {
+              AutosaveNodes((prevNodes) => {
+                if (!result.destination) return prevNodes;
+
+                const items = Array.from(prevNodes);
+                const [reorderedItem] = items.splice(result.source.index, 1);
+                items.splice(result.destination.index, 0, reorderedItem);
+
+                return items;
+              });
+            }}
+          >
+            <Droppable droppableId="nodes">
+              {(provided) => (
+                <Box
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  sx={{ display: "flex", flexDirection: "column", gap: 1 }}
+                >
+                  {nodes.map((node, i) => (
+                    <NodeParent
+                      key={node.nodeId}
+                      node={node}
+                      nodesState={[nodes, AutosaveNodes]}
+                      index={i}
+                      editingState={editingState}
+                      updatePath={() => {
+                        updatePath(i);
+                      }}
+                      deleteNode={() => {
+                        AutosaveNodes((n) => n.filter((_, j) => j !== i));
+                      }}
+                    />
+                  ))}
+                  {provided.placeholder}
+                </Box>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </Box>
+      </Box>
+      <BottomDrawer
+        nodesState={[nodes, AutosaveNodes]}
+        formState={[form, AutosaveForm]}
+        countdown={countdown}
+        path={[path, updatePath]}
+        setEditing={editingState[1]}
+      />
+    </Box>
+  );
+}

package/src/builder/modal.tsx

@@ -1,39 +1,39 @@
-import { Box, Modal as MuiModal, SxProps } from "@mui/material";
-
-const style: SxProps = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 400,
-  bgcolor: "white",
-  borderRadius: 2,
-  boxShadow: 24,
-  p: 4,
-  gap: 2,
-  display: "flex",
-  flexDirection: "column",
-};
-
-export type ModalProps = {
-  open: boolean;
-  onClose?: () => void;
-  children: React.ReactNode;
-  sx?: SxProps;
-  innerBoxSx?: SxProps;
-};
-
-export default function Modal({
-  open,
-  onClose,
-  children,
-  sx,
-  innerBoxSx,
-}: ModalProps) {
-  const innerSx = { ...style, ...innerBoxSx };
-  return (
-    <MuiModal open={open} onClose={onClose} sx={sx}>
-      <Box sx={innerSx}>{children}</Box>
-    </MuiModal>
-  );
-}
+import { Box, Modal as MuiModal, SxProps } from "@mui/material";
+
+const style: SxProps = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "white",
+  borderRadius: 2,
+  boxShadow: 24,
+  p: 4,
+  gap: 2,
+  display: "flex",
+  flexDirection: "column",
+};
+
+export type ModalProps = {
+  open: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  sx?: SxProps;
+  innerBoxSx?: SxProps;
+};
+
+export default function Modal({
+  open,
+  onClose,
+  children,
+  sx,
+  innerBoxSx,
+}: ModalProps) {
+  const innerSx = { ...style, ...innerBoxSx };
+  return (
+    <MuiModal open={open} onClose={onClose} sx={sx}>
+      <Box sx={innerSx}>{children}</Box>
+    </MuiModal>
+  );
+}