@springmicro/forms 0.6.4 → 0.7.0

package/src/builder/bottom-drawer.tsx

@@ -1,429 +1,429 @@
-import {
-  Box,
-  Button,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  IconButton,
-  Radio,
-  RadioGroup,
-  TextField,
-} from "@mui/material";
-import React from "react";
-import { UseStateType } from "../types/utils.type";
-import Modal from "./modal";
-import {
-  CountdownType,
-  EditingStateType,
-  FormNodeKeys,
-  FormNodeType,
-  FormType,
-} from "../types/form-builder";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import SettingsIcon from "@mui/icons-material/Settings";
-import HomeIcon from "@mui/icons-material/Home";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import {
-  defaultNodes,
-  generateNodeData,
-  serializeFormToBuilder,
-} from "../utils/form-builder";
-import { RJSFSchema, UiSchema } from "@rjsf/utils";
-/**
- * ---------------------- BOTTOM DRAWER ----------------------
- */
-
-export type BottomDrawerProps = {
-  nodesState: UseStateType<FormNodeType[]>;
-  formState: UseStateType<FormType>;
-  countdown: CountdownType;
-  path: [number[], (num?: number) => void];
-  setEditing: UseStateType<EditingStateType>[1];
-};
-
-export default function BottomDrawer({
-  nodesState,
-  countdown,
-  formState,
-  path: pathInfo,
-  setEditing,
-}: BottomDrawerProps) {
-  const [createModalOpen, setCreateModalOpen] = React.useState(false);
-  const [configModalOpen, setConfigModalOpen] = React.useState(false);
-
-  const [path, setPath] = pathInfo; // setPath is not from useState.
-
-  function importFunction(form: RJSFSchema, ui: UiSchema) {
-    const [, setNodes] = nodesState;
-    const [, setForm] = formState;
-    try {
-      const { nodes, form: formData } = serializeFormToBuilder(form, ui);
-      setNodes(nodes);
-      setForm(formData);
-    } catch {
-      return "Could not parse data.";
-    }
-  }
-
-  return (
-    <>
-      <Box
-        sx={{
-          width: "100%",
-          height: 60,
-          pt: 1,
-          borderTop: "1px solid #777",
-          flexShrink: 0,
-          display: "flex",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            gap: 1,
-            alignItems: "flex-end",
-            height: "100%",
-          }}
-        >
-          <DrawerIconButton
-            icon={SettingsIcon}
-            onClick={() => {
-              setConfigModalOpen(true);
-            }}
-          />
-          {path.length > 0 && (
-            <>
-              {/* PATH NAVIGATION */}
-              <DrawerIconButton
-                icon={HomeIcon}
-                onClick={() => {
-                  setPath(-1);
-                }}
-              />
-              <DrawerIconButton
-                icon={ArrowBackIcon}
-                onClick={() => {
-                  setPath();
-                }}
-              />
-            </>
-          )}
-        </Box>
-        <Box
-          sx={{
-            display: "flex",
-            gap: 1,
-            alignItems: "flex-end",
-            height: "100%",
-          }}
-        >
-          <p
-            style={{
-              color: countdown !== "Save failed." ? "#888" : "#d22",
-              fontSize: 20,
-            }}
-          >
-            <CountdownTimer countdown={countdown} />
-          </p>
-          <DrawerIconButton
-            icon={AddCircleIcon}
-            onClick={() => {
-              setCreateModalOpen(true);
-            }}
-          />
-        </Box>
-      </Box>
-      <CreateModal
-        openState={[createModalOpen, setCreateModalOpen]}
-        nodesState={nodesState}
-        setEditing={setEditing}
-      />
-      <ConfigModal
-        openState={[configModalOpen, setConfigModalOpen]}
-        formState={formState}
-        import={importFunction}
-      />
-    </>
-  );
-}
-
-/**
- * ---------------------- COUNTDOWN ----------------------
- */
-
-const CountdownTimer = ({ countdown }: { countdown: CountdownType }) => {
-  if (countdown === undefined) return <></>;
-  if (typeof countdown === "string") return <>{countdown}</>;
-  return <>Autosaving ({countdown})</>;
-};
-
-/**
- * ---------------------- ICON BUTTON ----------------------
- */
-
-type DrawerIconButtonProps = {
-  onClick?: () => void;
-  icon: React.ComponentType<any>;
-};
-
-function DrawerIconButton({
-  // children,
-  onClick,
-  icon: Icon,
-}: DrawerIconButtonProps) {
-  return (
-    <Box
-      sx={{
-        height: "100%",
-        aspectRatio: 1,
-        backgroundColor: "#eaeaea",
-        borderRadius: 1,
-        cursor: "pointer",
-      }}
-      onClick={onClick}
-    >
-      <IconButton sx={{ height: "100%", aspectRatio: 1 }}>
-        <Icon fontSize="large" sx={{ color: "#777" }} />
-      </IconButton>
-    </Box>
-  );
-}
-
-/**
- * ---------------------- CONFIG MODAL ----------------------
- */
-
-type ConfigModalProps = {
-  openState: UseStateType<boolean>;
-  formState: UseStateType<FormType>;
-  import: (form: RJSFSchema, ui: UiSchema) => void | string;
-};
-
-function ConfigModal({
-  openState,
-  formState,
-  import: importFunction,
-}: ConfigModalProps) {
-  const [open, setOpen] = openState;
-  const [form, setForm] = formState;
-
-  const [error, setError] = React.useState("");
-
-  function closeModal() {
-    setError("");
-    setOpen(false);
-  }
-
-  function openImport(): void {
-    const inputElement: HTMLInputElement = document.createElement("input");
-    inputElement.type = "file";
-    inputElement.accept = ".json";
-
-    inputElement.onchange = (event: Event) => {
-      const { files } = event.target as HTMLInputElement;
-      if (!files) return;
-      if (files.length === 0) {
-        setError("No file selected.");
-        return;
-      }
-      if (files.length !== 1) {
-        setError("Please select only one JSON file.");
-        return;
-      }
-      const file: File = files[0];
-      if (file.type === "application/json") {
-        const reader: FileReader = new FileReader();
-        reader.onload = () => {
-          try {
-            const jsonData = JSON.parse(reader.result as string);
-            if (!jsonData.form)
-              throw `Invalid JSON.\nExample format: {\n\t"form": {...formData},\n\t"ui": {...uiData | undefined}\n}`;
-            const imported = importFunction(jsonData.form, jsonData.ui ?? {});
-            if (typeof imported === "string") throw imported;
-
-            // Successful import!
-            closeModal();
-          } catch (err) {
-            setError(err);
-          }
-        };
-        reader.readAsText(file);
-      } else {
-        setError("Please select a valid JSON file.");
-      }
-    };
-
-    inputElement.click();
-  }
-
-  return (
-    <Modal open={open} onClose={() => setOpen(false)}>
-      <h2>Edit Form Details:</h2>
-      <TextField
-        label="Title"
-        required
-        value={form.title}
-        onChange={(e) => {
-          if (!e.target.value) return;
-          setForm((f) => ({ ...f, title: e.target.value }));
-        }}
-      />
-      <TextField
-        label="Description"
-        value={form.description}
-        onChange={(e) => {
-          setForm((f) => ({ ...f, description: e.target.value }));
-        }}
-      />
-      <Box
-        sx={{
-          display: "flex",
-          flexDirection: "row",
-          gap: 2,
-          button: { flexGrow: 1 },
-        }}
-      >
-        <Button variant="contained" onClick={openImport}>
-          Import
-        </Button>
-        <Button variant="contained" onClick={closeModal}>
-          Exit
-        </Button>
-      </Box>
-      <p style={{ color: "red", whiteSpace: "pre-wrap" }}>{error}</p>
-    </Modal>
-  );
-}
-
-/**
- * ---------------------- OBJECT PRESET CHILDREN (CREATE MODAL) ----------------------
- */
-
-const presetChildren: Record<string, Array<FormNodeType> | undefined> = {
-  // @ts-ignore
-  empty: [] as FormNodeType[],
-  image: [
-    {
-      ...generateNodeData("string"),
-      format: "uri",
-      propertyName: "src",
-      title: undefined,
-    },
-    {
-      ...generateNodeData("string"),
-      propertyName: "alt",
-      title: undefined,
-    },
-    {
-      ...generateNodeData("string"),
-      propertyName: "width",
-      title: undefined,
-    },
-    {
-      ...generateNodeData("string"),
-      propertyName: "height",
-      title: undefined,
-    },
-  ] as FormNodeType[],
-};
-
-/**
- * ---------------------- CREATE MODAL ----------------------
- */
-
-type CreateModalProps = {
-  openState: UseStateType<boolean>;
-  nodesState: UseStateType<FormNodeType[]>;
-  setEditing: UseStateType<EditingStateType>[1];
-};
-
-function CreateModal({ openState, nodesState, setEditing }: CreateModalProps) {
-  const [open, setOpen] = openState;
-  const [nodes, setNodes] = nodesState;
-  const [nodeType, setNodeType] = React.useState<FormNodeKeys>("string");
-  const [presetType, setPresetType] = React.useState<"empty" | "image">(
-    "empty"
-  );
-
-  return (
-    <Modal open={open} onClose={() => setOpen(false)}>
-      <h2>Create a new node:</h2>
-      <FormControl>
-        <FormLabel id="demo-radio-buttons-group-label">Field Type</FormLabel>
-        <RadioGroup
-          value={nodeType}
-          onChange={(e) => {
-            setNodeType(e.target.value as FormNodeKeys);
-          }}
-        >
-          {Object.keys(defaultNodes).map((key) => {
-            return (
-              <FormControlLabel
-                key={key}
-                value={key}
-                control={<Radio />}
-                label={key.slice(0, 1).toUpperCase() + key.slice(1)}
-              />
-            );
-          })}
-        </RadioGroup>
-      </FormControl>
-      {nodeType === "object" && (
-        // ======================= OBJECT PRESETS =======================
-        <FormControl>
-          <FormLabel id="demo-radio-buttons-group-label">Preset</FormLabel>
-          <RadioGroup
-            value={presetType}
-            onChange={(e) => {
-              setPresetType(e.target.value as any);
-            }}
-          >
-            {Object.keys(presetChildren).map((key) => {
-              return (
-                <FormControlLabel
-                  key={key}
-                  value={key}
-                  control={<Radio />}
-                  label={key.slice(0, 1).toUpperCase() + key.slice(1)}
-                />
-              );
-            })}
-          </RadioGroup>
-        </FormControl>
-      )}
-      <Button
-        onClick={() => {
-          setEditing(false);
-          let nodeId: EditingStateType = false;
-          setNodes((nodes) => {
-            const newNode = generateNodeData(
-              nodeType,
-              nodeType === "object"
-                ? // @ts-ignore
-                  (presetChildren[presetType] as FormNodeType[])
-                : undefined
-            ) as FormNodeType;
-            nodeId = newNode.nodeId;
-            setEditing(nodeId);
-            return [...nodes, newNode];
-          });
-          setOpen(false);
-          setTimeout(() => {
-            const element = document.getElementById(
-              "fb-scrollable"
-            ) as HTMLElement;
-            const newElement = document.getElementById(
-              nodeId as string
-            ) as HTMLElement;
-            element.scrollTop = element.scrollHeight - newElement.offsetHeight;
-          }, 0);
-        }}
-      >
-        Create
-      </Button>
-    </Modal>
-  );
-}
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  IconButton,
+  Radio,
+  RadioGroup,
+  TextField,
+} from "@mui/material";
+import React from "react";
+import { UseStateType } from "../types/utils.type";
+import Modal from "./modal";
+import {
+  CountdownType,
+  EditingStateType,
+  FormNodeKeys,
+  FormNodeType,
+  FormType,
+} from "../types/form-builder";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import SettingsIcon from "@mui/icons-material/Settings";
+import HomeIcon from "@mui/icons-material/Home";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import {
+  defaultNodes,
+  generateNodeData,
+  serializeFormToBuilder,
+} from "../utils/form-builder";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+/**
+ * ---------------------- BOTTOM DRAWER ----------------------
+ */
+
+export type BottomDrawerProps = {
+  nodesState: UseStateType<FormNodeType[]>;
+  formState: UseStateType<FormType>;
+  countdown: CountdownType;
+  path: [number[], (num?: number) => void];
+  setEditing: UseStateType<EditingStateType>[1];
+};
+
+export default function BottomDrawer({
+  nodesState,
+  countdown,
+  formState,
+  path: pathInfo,
+  setEditing,
+}: BottomDrawerProps) {
+  const [createModalOpen, setCreateModalOpen] = React.useState(false);
+  const [configModalOpen, setConfigModalOpen] = React.useState(false);
+
+  const [path, setPath] = pathInfo; // setPath is not from useState.
+
+  function importFunction(form: RJSFSchema, ui: UiSchema) {
+    const [, setNodes] = nodesState;
+    const [, setForm] = formState;
+    try {
+      const { nodes, form: formData } = serializeFormToBuilder(form, ui);
+      setNodes(nodes);
+      setForm(formData);
+    } catch {
+      return "Could not parse data.";
+    }
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: "100%",
+          height: 60,
+          pt: 1,
+          borderTop: "1px solid #777",
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            gap: 1,
+            alignItems: "flex-end",
+            height: "100%",
+          }}
+        >
+          <DrawerIconButton
+            icon={SettingsIcon}
+            onClick={() => {
+              setConfigModalOpen(true);
+            }}
+          />
+          {path.length > 0 && (
+            <>
+              {/* PATH NAVIGATION */}
+              <DrawerIconButton
+                icon={HomeIcon}
+                onClick={() => {
+                  setPath(-1);
+                }}
+              />
+              <DrawerIconButton
+                icon={ArrowBackIcon}
+                onClick={() => {
+                  setPath();
+                }}
+              />
+            </>
+          )}
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            gap: 1,
+            alignItems: "flex-end",
+            height: "100%",
+          }}
+        >
+          <p
+            style={{
+              color: countdown !== "Save failed." ? "#888" : "#d22",
+              fontSize: 20,
+            }}
+          >
+            <CountdownTimer countdown={countdown} />
+          </p>
+          <DrawerIconButton
+            icon={AddCircleIcon}
+            onClick={() => {
+              setCreateModalOpen(true);
+            }}
+          />
+        </Box>
+      </Box>
+      <CreateModal
+        openState={[createModalOpen, setCreateModalOpen]}
+        nodesState={nodesState}
+        setEditing={setEditing}
+      />
+      <ConfigModal
+        openState={[configModalOpen, setConfigModalOpen]}
+        formState={formState}
+        import={importFunction}
+      />
+    </>
+  );
+}
+
+/**
+ * ---------------------- COUNTDOWN ----------------------
+ */
+
+const CountdownTimer = ({ countdown }: { countdown: CountdownType }) => {
+  if (countdown === undefined) return <></>;
+  if (typeof countdown === "string") return <>{countdown}</>;
+  return <>Autosaving ({countdown})</>;
+};
+
+/**
+ * ---------------------- ICON BUTTON ----------------------
+ */
+
+type DrawerIconButtonProps = {
+  onClick?: () => void;
+  icon: React.ComponentType<any>;
+};
+
+function DrawerIconButton({
+  // children,
+  onClick,
+  icon: Icon,
+}: DrawerIconButtonProps) {
+  return (
+    <Box
+      sx={{
+        height: "100%",
+        aspectRatio: 1,
+        backgroundColor: "#eaeaea",
+        borderRadius: 1,
+        cursor: "pointer",
+      }}
+      onClick={onClick}
+    >
+      <IconButton sx={{ height: "100%", aspectRatio: 1 }}>
+        <Icon fontSize="large" sx={{ color: "#777" }} />
+      </IconButton>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- CONFIG MODAL ----------------------
+ */
+
+type ConfigModalProps = {
+  openState: UseStateType<boolean>;
+  formState: UseStateType<FormType>;
+  import: (form: RJSFSchema, ui: UiSchema) => void | string;
+};
+
+function ConfigModal({
+  openState,
+  formState,
+  import: importFunction,
+}: ConfigModalProps) {
+  const [open, setOpen] = openState;
+  const [form, setForm] = formState;
+
+  const [error, setError] = React.useState("");
+
+  function closeModal() {
+    setError("");
+    setOpen(false);
+  }
+
+  function openImport(): void {
+    const inputElement: HTMLInputElement = document.createElement("input");
+    inputElement.type = "file";
+    inputElement.accept = ".json";
+
+    inputElement.onchange = (event: Event) => {
+      const { files } = event.target as HTMLInputElement;
+      if (!files) return;
+      if (files.length === 0) {
+        setError("No file selected.");
+        return;
+      }
+      if (files.length !== 1) {
+        setError("Please select only one JSON file.");
+        return;
+      }
+      const file: File = files[0];
+      if (file.type === "application/json") {
+        const reader: FileReader = new FileReader();
+        reader.onload = () => {
+          try {
+            const jsonData = JSON.parse(reader.result as string);
+            if (!jsonData.form)
+              throw `Invalid JSON.\nExample format: {\n\t"form": {...formData},\n\t"ui": {...uiData | undefined}\n}`;
+            const imported = importFunction(jsonData.form, jsonData.ui ?? {});
+            if (typeof imported === "string") throw imported;
+
+            // Successful import!
+            closeModal();
+          } catch (err) {
+            setError(err);
+          }
+        };
+        reader.readAsText(file);
+      } else {
+        setError("Please select a valid JSON file.");
+      }
+    };
+
+    inputElement.click();
+  }
+
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <h2>Edit Form Details:</h2>
+      <TextField
+        label="Title"
+        required
+        value={form.title}
+        onChange={(e) => {
+          if (!e.target.value) return;
+          setForm((f) => ({ ...f, title: e.target.value }));
+        }}
+      />
+      <TextField
+        label="Description"
+        value={form.description}
+        onChange={(e) => {
+          setForm((f) => ({ ...f, description: e.target.value }));
+        }}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 2,
+          button: { flexGrow: 1 },
+        }}
+      >
+        <Button variant="contained" onClick={openImport}>
+          Import
+        </Button>
+        <Button variant="contained" onClick={closeModal}>
+          Exit
+        </Button>
+      </Box>
+      <p style={{ color: "red", whiteSpace: "pre-wrap" }}>{error}</p>
+    </Modal>
+  );
+}
+
+/**
+ * ---------------------- OBJECT PRESET CHILDREN (CREATE MODAL) ----------------------
+ */
+
+const presetChildren: Record<string, Array<FormNodeType> | undefined> = {
+  // @ts-ignore
+  empty: [] as FormNodeType[],
+  image: [
+    {
+      ...generateNodeData("string"),
+      format: "uri",
+      propertyName: "src",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "alt",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "width",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "height",
+      title: undefined,
+    },
+  ] as FormNodeType[],
+};
+
+/**
+ * ---------------------- CREATE MODAL ----------------------
+ */
+
+type CreateModalProps = {
+  openState: UseStateType<boolean>;
+  nodesState: UseStateType<FormNodeType[]>;
+  setEditing: UseStateType<EditingStateType>[1];
+};
+
+function CreateModal({ openState, nodesState, setEditing }: CreateModalProps) {
+  const [open, setOpen] = openState;
+  const [nodes, setNodes] = nodesState;
+  const [nodeType, setNodeType] = React.useState<FormNodeKeys>("string");
+  const [presetType, setPresetType] = React.useState<"empty" | "image">(
+    "empty"
+  );
+
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <h2>Create a new node:</h2>
+      <FormControl>
+        <FormLabel id="demo-radio-buttons-group-label">Field Type</FormLabel>
+        <RadioGroup
+          value={nodeType}
+          onChange={(e) => {
+            setNodeType(e.target.value as FormNodeKeys);
+          }}
+        >
+          {Object.keys(defaultNodes).map((key) => {
+            return (
+              <FormControlLabel
+                key={key}
+                value={key}
+                control={<Radio />}
+                label={key.slice(0, 1).toUpperCase() + key.slice(1)}
+              />
+            );
+          })}
+        </RadioGroup>
+      </FormControl>
+      {nodeType === "object" && (
+        // ======================= OBJECT PRESETS =======================
+        <FormControl>
+          <FormLabel id="demo-radio-buttons-group-label">Preset</FormLabel>
+          <RadioGroup
+            value={presetType}
+            onChange={(e) => {
+              setPresetType(e.target.value as any);
+            }}
+          >
+            {Object.keys(presetChildren).map((key) => {
+              return (
+                <FormControlLabel
+                  key={key}
+                  value={key}
+                  control={<Radio />}
+                  label={key.slice(0, 1).toUpperCase() + key.slice(1)}
+                />
+              );
+            })}
+          </RadioGroup>
+        </FormControl>
+      )}
+      <Button
+        onClick={() => {
+          setEditing(false);
+          let nodeId: EditingStateType = false;
+          setNodes((nodes) => {
+            const newNode = generateNodeData(
+              nodeType,
+              nodeType === "object"
+                ? // @ts-ignore
+                  (presetChildren[presetType] as FormNodeType[])
+                : undefined
+            ) as FormNodeType;
+            nodeId = newNode.nodeId;
+            setEditing(nodeId);
+            return [...nodes, newNode];
+          });
+          setOpen(false);
+          setTimeout(() => {
+            const element = document.getElementById(
+              "fb-scrollable"
+            ) as HTMLElement;
+            const newElement = document.getElementById(
+              nodeId as string
+            ) as HTMLElement;
+            element.scrollTop = element.scrollHeight - newElement.offsetHeight;
+          }, 0);
+        }}
+      >
+        Create
+      </Button>
+    </Modal>
+  );
+}