@springmicro/forms 0.6.4 → 0.7.0

package/src/builder/nodes/node-child-helpers.tsx

@@ -1,273 +1,273 @@
-import { FieldArrayType, FormNodeType } from "../../types/form-builder";
-import {
-  Checkbox,
-  FormControlLabel,
-  IconButton,
-  TextField,
-  Tooltip,
-} from "@mui/material";
-import { Box, SxProps } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import React from "react";
-import { formatTitle } from "../../utils/form-builder";
-import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
-
-/**
- * ---------------------- NODE CHILD BASE ----------------------
- */
-
-export type NodeChildBaseProps = {
-  children?: React.ReactNode;
-};
-
-export function NodeChildBase({ children }: NodeChildBaseProps) {
-  return (
-    <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
-      {children}
-    </Box>
-  );
-}
-
-/**
- * ---------------------- NODE ACCORDIAN ----------------------
- */
-
-export type NodeAccordianProps = {
-  open?: boolean;
-  children?: React.ReactNode;
-  close: () => void;
-  deleteNode: () => void;
-};
-
-export function NodeAccordian({
-  open,
-  children,
-  close,
-  deleteNode,
-}: NodeAccordianProps) {
-  return (
-    <Box
-      className={open ? "open" : ""}
-      sx={{
-        overflow: "hidden",
-        transition: "max-height .45s cubic-bezier(0, 1, 0, 1) -.1s",
-        maxHeight: 0,
-        "&.open": {
-          maxHeight: 9999,
-          transitionTimingFunction: "cubic-bezier(0.5, 0, 1, 0)",
-          transitionDelay: "0s",
-        },
-        width: "100%",
-      }}
-    >
-      <Box
-        sx={{
-          pt: 2,
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
-        {children}
-      </Box>
-      <Box sx={{ pt: 1 }}>
-        <BottomSection close={close} deleteNode={deleteNode} />
-      </Box>
-    </Box>
-  );
-}
-
-/**
- * ---------------------- NODE TITLE ----------------------
- */
-
-export function NodeTitle({
-  children,
-  isPropname,
-  isEditing,
-  onClick,
-}: {
-  children: React.ReactNode;
-  isPropname?: boolean;
-  isEditing?: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        pt: 2,
-        cursor: "pointer",
-        transition: "background-color 0.5s",
-        borderBottomLeftRadius: 10,
-        borderBottomRightRadius: 10,
-        ":hover": {
-          backgroundColor: isEditing ? "#dddddd" : "transparent",
-        },
-      }}
-      onClick={isEditing ? onClick : () => {}}
-    >
-      <Box
-        sx={{
-          fontWeight: 400,
-          fontSize: 18,
-          backgroundColor: !isPropname ? "transparent" : "#d5d5d5",
-          borderRadius: 2,
-          px: 1,
-          display: "inline-block",
-        }}
-      >
-        {children}
-      </Box>
-    </Box>
-  );
-}
-
-/**
- * ---------------------- STYLED TEXT FIELD ----------------------
- */
-
-export const textfieldStyle = (sx?: SxProps) => ({
-  minWidth: 250,
-  flexGrow: 1,
-  ...{
-    "& .MuiOutlinedInput-root": {
-      "& fieldset": {
-        borderColor: "#C0C3C7",
-      },
-      "&:hover fieldset": {
-        borderColor: "#A2AAB2",
-      },
-      "&.Mui-focused fieldset": {
-        borderColor: "#6F7E8C",
-      },
-    },
-  },
-  ...(sx ?? {}),
-});
-
-export function StyledTextField(props?: any, children?: React.ReactNode) {
-  return (
-    <TextField {...props} sx={textfieldStyle(props.sx)}>
-      {children}
-    </TextField>
-  );
-}
-
-/**
- * ---------------------- BOTTOM SECTION ----------------------
- */
-
-export function BottomSection({
-  close,
-  deleteNode,
-}: {
-  close: () => void;
-  deleteNode: () => void;
-}) {
-  return (
-    <Box
-      sx={{
-        width: "100%",
-        display: "flex",
-        justifyContent: "space-between",
-        backgroundColor: "#00000009",
-        borderRadius: 1,
-        py: 0.5,
-      }}
-    >
-      <Box>
-        <IconButton onClick={deleteNode}>
-          <DeleteOutlineIcon sx={{ color: "red" }} />
-        </IconButton>
-      </Box>
-      <Box>
-        <IconButton onClick={close}>
-          <CloseIcon />
-        </IconButton>
-      </Box>
-    </Box>
-  );
-}
-
-/**
- * ---------------------- FIELD INPUTS ----------------------
- */
-
-export function NodeField({
-  field,
-  node,
-  update,
-}: {
-  field: FieldArrayType<any>[0];
-  node: FormNodeType;
-  update: (
-    key: string,
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    type?: string
-  ) => void;
-}) {
-  const prop = field.prop as keyof FormNodeType;
-  const textfield = (
-    <StyledTextField
-      label={field.title ?? formatTitle(prop)}
-      value={node[prop] as string}
-      onChange={(e: any) => update(prop, e)}
-      {...field.props}
-    />
-  );
-  if (!field.tooltip) return textfield;
-  return (
-    <Tooltip title={field.tooltip} arrow>
-      {textfield}
-    </Tooltip>
-  );
-}
-
-export function NodeCheckbox({
-  field,
-  node,
-  update,
-}: {
-  field: FieldArrayType<any>[0];
-  node: FormNodeType;
-  update: (
-    key: string,
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    type?: string
-  ) => void;
-}) {
-  const prop = field.prop as keyof FormNodeType;
-  const checkbox = (
-    <FormControlLabel
-      control={
-        <Checkbox
-          checked={node[prop] as boolean}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            update(prop, e, "check");
-          }}
-        />
-      }
-      label={field.title ?? formatTitle(prop)}
-    />
-  );
-  if (!field.tooltip) return checkbox;
-  return (
-    <Tooltip title={field.tooltip} arrow>
-      {checkbox}
-    </Tooltip>
-  );
-}
-
-/**
- * ---------------------- FIELD CONTAINERS ----------------------
- */
-
-export function FieldContainer({ children }: { children?: React.ReactNode }) {
-  return (
-    <Box
-      sx={{ display: "flex", flexDirection: "row", gap: 2, flexWrap: "wrap" }}
-    >
-      {children}
-    </Box>
-  );
-}
+import { FieldArrayType, FormNodeType } from "../../types/form-builder";
+import {
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  TextField,
+  Tooltip,
+} from "@mui/material";
+import { Box, SxProps } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { formatTitle } from "../../utils/form-builder";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+
+/**
+ * ---------------------- NODE CHILD BASE ----------------------
+ */
+
+export type NodeChildBaseProps = {
+  children?: React.ReactNode;
+};
+
+export function NodeChildBase({ children }: NodeChildBaseProps) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- NODE ACCORDIAN ----------------------
+ */
+
+export type NodeAccordianProps = {
+  open?: boolean;
+  children?: React.ReactNode;
+  close: () => void;
+  deleteNode: () => void;
+};
+
+export function NodeAccordian({
+  open,
+  children,
+  close,
+  deleteNode,
+}: NodeAccordianProps) {
+  return (
+    <Box
+      className={open ? "open" : ""}
+      sx={{
+        overflow: "hidden",
+        transition: "max-height .45s cubic-bezier(0, 1, 0, 1) -.1s",
+        maxHeight: 0,
+        "&.open": {
+          maxHeight: 9999,
+          transitionTimingFunction: "cubic-bezier(0.5, 0, 1, 0)",
+          transitionDelay: "0s",
+        },
+        width: "100%",
+      }}
+    >
+      <Box
+        sx={{
+          pt: 2,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {children}
+      </Box>
+      <Box sx={{ pt: 1 }}>
+        <BottomSection close={close} deleteNode={deleteNode} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- NODE TITLE ----------------------
+ */
+
+export function NodeTitle({
+  children,
+  isPropname,
+  isEditing,
+  onClick,
+}: {
+  children: React.ReactNode;
+  isPropname?: boolean;
+  isEditing?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        pt: 2,
+        cursor: "pointer",
+        transition: "background-color 0.5s",
+        borderBottomLeftRadius: 10,
+        borderBottomRightRadius: 10,
+        ":hover": {
+          backgroundColor: isEditing ? "#dddddd" : "transparent",
+        },
+      }}
+      onClick={isEditing ? onClick : () => {}}
+    >
+      <Box
+        sx={{
+          fontWeight: 400,
+          fontSize: 18,
+          backgroundColor: !isPropname ? "transparent" : "#d5d5d5",
+          borderRadius: 2,
+          px: 1,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- STYLED TEXT FIELD ----------------------
+ */
+
+export const textfieldStyle = (sx?: SxProps) => ({
+  minWidth: 250,
+  flexGrow: 1,
+  ...{
+    "& .MuiOutlinedInput-root": {
+      "& fieldset": {
+        borderColor: "#C0C3C7",
+      },
+      "&:hover fieldset": {
+        borderColor: "#A2AAB2",
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#6F7E8C",
+      },
+    },
+  },
+  ...(sx ?? {}),
+});
+
+export function StyledTextField(props?: any, children?: React.ReactNode) {
+  return (
+    <TextField {...props} sx={textfieldStyle(props.sx)}>
+      {children}
+    </TextField>
+  );
+}
+
+/**
+ * ---------------------- BOTTOM SECTION ----------------------
+ */
+
+export function BottomSection({
+  close,
+  deleteNode,
+}: {
+  close: () => void;
+  deleteNode: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        backgroundColor: "#00000009",
+        borderRadius: 1,
+        py: 0.5,
+      }}
+    >
+      <Box>
+        <IconButton onClick={deleteNode}>
+          <DeleteOutlineIcon sx={{ color: "red" }} />
+        </IconButton>
+      </Box>
+      <Box>
+        <IconButton onClick={close}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- FIELD INPUTS ----------------------
+ */
+
+export function NodeField({
+  field,
+  node,
+  update,
+}: {
+  field: FieldArrayType<any>[0];
+  node: FormNodeType;
+  update: (
+    key: string,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    type?: string
+  ) => void;
+}) {
+  const prop = field.prop as keyof FormNodeType;
+  const textfield = (
+    <StyledTextField
+      label={field.title ?? formatTitle(prop)}
+      value={node[prop] as string}
+      onChange={(e: any) => update(prop, e)}
+      {...field.props}
+    />
+  );
+  if (!field.tooltip) return textfield;
+  return (
+    <Tooltip title={field.tooltip} arrow>
+      {textfield}
+    </Tooltip>
+  );
+}
+
+export function NodeCheckbox({
+  field,
+  node,
+  update,
+}: {
+  field: FieldArrayType<any>[0];
+  node: FormNodeType;
+  update: (
+    key: string,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    type?: string
+  ) => void;
+}) {
+  const prop = field.prop as keyof FormNodeType;
+  const checkbox = (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={node[prop] as boolean}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            update(prop, e, "check");
+          }}
+        />
+      }
+      label={field.title ?? formatTitle(prop)}
+    />
+  );
+  if (!field.tooltip) return checkbox;
+  return (
+    <Tooltip title={field.tooltip} arrow>
+      {checkbox}
+    </Tooltip>
+  );
+}
+
+/**
+ * ---------------------- FIELD CONTAINERS ----------------------
+ */
+
+export function FieldContainer({ children }: { children?: React.ReactNode }) {
+  return (
+    <Box
+      sx={{ display: "flex", flexDirection: "row", gap: 2, flexWrap: "wrap" }}
+    >
+      {children}
+    </Box>
+  );
+}