@springmicro/forms 0.7.0 → 0.7.2

package/src/builder/nodes/node-base.tsx

@@ -1,94 +1,94 @@
-import { EditingStateType } from "../../types/form-builder";
-import { UseStateType } from "../../types/utils.type";
-import { Box, SxProps } from "@mui/material";
-import React from "react";
-import { Draggable } from "react-beautiful-dnd";
-
-export type NodeBaseProps = {
-  children?: React.ReactNode;
-  sx?: SxProps;
-  nodeId: string;
-  index: number;
-  editingState: UseStateType<EditingStateType>;
-  icon: React.ComponentType<any>;
-};
-
-export default function NodeBase({
-  children,
-  sx,
-  nodeId,
-  index,
-  editingState,
-  icon: Icon,
-}: NodeBaseProps) {
-  const [editingId, setEditing] = editingState;
-  const editingThisNode = editingId && editingId === nodeId;
-
-  const edit = () => {
-    if (editingThisNode) return;
-    setEditing(nodeId);
-  };
-
-  return (
-    <Draggable draggableId={nodeId} index={index}>
-      {(provided) => (
-        <div ref={provided.innerRef} {...provided.draggableProps}>
-          <Box
-            id={nodeId}
-            sx={{
-              display: "flex",
-              flexDirection: "row",
-              width: "100%",
-              backgroundColor: editingThisNode ? "#ececec" : "#e3e3e3",
-              border: editingThisNode
-                ? "2px solid #c0c0c0"
-                : "2px solid #e3e3e3",
-              borderRadius: 1,
-              transition: "all 0.2s",
-              cursor: editingThisNode ? "default" : "pointer",
-              ...(sx ?? {}), // Can be used for custom styles or overrides.
-            }}
-          >
-            <Handle {...provided.dragHandleProps} />
-            <Box
-              sx={{ flexGrow: 1, pr: 2, pb: 2, display: "flex" }}
-              onClick={edit}
-            >
-              <Box sx={{ width: 30, height: "100%", pt: 2 }} onClick={edit}>
-                <Icon sx={{ color: "#888" }} />
-              </Box>
-              {children}
-            </Box>
-          </Box>
-        </div>
-      )}
-    </Draggable>
-  );
-}
-
-// The draggable part of the icon.
-function Handle(props: any) {
-  return (
-    <Box
-      sx={{ p: 2, gap: 0.33, display: "flex", flexDirection: "row" }}
-      {...props}
-    >
-      <Box
-        sx={{
-          backgroundColor: "#888",
-          borderRadius: 2,
-          width: 3,
-          height: "100%",
-        }}
-      />
-      <Box
-        sx={{
-          backgroundColor: "#888",
-          borderRadius: 2,
-          width: 3,
-          height: "100%",
-        }}
-      />
-    </Box>
-  );
-}
+import { EditingStateType } from "../../types/form-builder";
+import { UseStateType } from "../../types/utils.type";
+import { Box, SxProps } from "@mui/material";
+import React from "react";
+import { Draggable } from "react-beautiful-dnd";
+
+export type NodeBaseProps = {
+  children?: React.ReactNode;
+  sx?: SxProps;
+  nodeId: string;
+  index: number;
+  editingState: UseStateType<EditingStateType>;
+  icon: React.ComponentType<any>;
+};
+
+export default function NodeBase({
+  children,
+  sx,
+  nodeId,
+  index,
+  editingState,
+  icon: Icon,
+}: NodeBaseProps) {
+  const [editingId, setEditing] = editingState;
+  const editingThisNode = editingId && editingId === nodeId;
+
+  const edit = () => {
+    if (editingThisNode) return;
+    setEditing(nodeId);
+  };
+
+  return (
+    <Draggable draggableId={nodeId} index={index}>
+      {(provided) => (
+        <div ref={provided.innerRef} {...provided.draggableProps}>
+          <Box
+            id={nodeId}
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              width: "100%",
+              backgroundColor: editingThisNode ? "#ececec" : "#e3e3e3",
+              border: editingThisNode
+                ? "2px solid #c0c0c0"
+                : "2px solid #e3e3e3",
+              borderRadius: 1,
+              transition: "all 0.2s",
+              cursor: editingThisNode ? "default" : "pointer",
+              ...(sx ?? {}), // Can be used for custom styles or overrides.
+            }}
+          >
+            <Handle {...provided.dragHandleProps} />
+            <Box
+              sx={{ flexGrow: 1, pr: 2, pb: 2, display: "flex" }}
+              onClick={edit}
+            >
+              <Box sx={{ width: 30, height: "100%", pt: 2 }} onClick={edit}>
+                <Icon sx={{ color: "#888" }} />
+              </Box>
+              {children}
+            </Box>
+          </Box>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+// The draggable part of the icon.
+function Handle(props: any) {
+  return (
+    <Box
+      sx={{ p: 2, gap: 0.33, display: "flex", flexDirection: "row" }}
+      {...props}
+    >
+      <Box
+        sx={{
+          backgroundColor: "#888",
+          borderRadius: 2,
+          width: 3,
+          height: "100%",
+        }}
+      />
+      <Box
+        sx={{
+          backgroundColor: "#888",
+          borderRadius: 2,
+          width: 3,
+          height: "100%",
+        }}
+      />
+    </Box>
+  );
+}