@flozy/editor 5.5.8 → 5.6.0

package/dist/Editor/Elements/Table/DragStyles.js

@@ -0,0 +1,70 @@
+const DragStyles = theme => {
+  const {
+    containers,
+    editor
+  } = theme?.palette || {};
+  const {
+    buttonBorder,
+    background,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg
+  } = editor || {};
+  const onDragActive = {
+    outline: `1.5px solid ${activeColor || "#2563EB"}`,
+    background: `${signaturePopUpTabButtonSelectedBg} !important`,
+    "& svg ellipse": {
+      fill: `${signaturePopUpTabButtonSelectedSvg}`
+    }
+  };
+  return {
+    popper: {
+      zIndex: 1000,
+      "& .MuiPaper-root": {
+        borderRadius: "3px !important",
+        outline: `1.5px solid ${buttonBorder}`,
+        backgroundColor: `${background}`,
+        "&:hover": onDragActive,
+        "&.active": onDragActive
+      },
+      "& .MuiIconButton-root": {
+        padding: "4px 6px",
+        borderRadius: "none",
+        "& .dragIcon": {
+          width: "14px",
+          height: "10px"
+        },
+        "&:hover": {
+          background: "none"
+        }
+      }
+    },
+    toolPopper: {
+      zIndex: 4001,
+      "& .MuiPaper-root": {
+        borderRadius: "8px"
+      }
+    },
+    mobileToolDrawer: {
+      "& .customSelectContainer": {
+        border: "none !important",
+        padding: "0px !important",
+        boxShadow: "none !important"
+      }
+    },
+    drawerContainer: {
+      "&.MuiDrawer-root": {
+        zIndex: 1301
+      },
+      "& .MuiDrawer-paper": {
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
+        backgroundColor: containers?.card
+      },
+      "& .customSelectContainer": {
+        border: "none"
+      }
+    }
+  };
+};
+export default DragStyles;

package/dist/Editor/Elements/Table/Draggable.js

@@ -0,0 +1,25 @@
+import { useDraggable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Draggable(props) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform
+  } = useDraggable(props);
+  const {
+    dragType
+  } = props?.data || {};
+  const style = transform ? {
+    transform: dragType === "row" ? `translate3d(0, ${transform.y}px, 0)` : `translate3d(${transform.x}px, 0, 0)`
+  } : undefined;
+  return /*#__PURE__*/_jsx(Box, {
+    style: style,
+    ref: setNodeRef,
+    ...listeners,
+    ...attributes,
+    children: props.children
+  });
+}
+export default Draggable;

package/dist/Editor/Elements/Table/Droppable.js

@@ -0,0 +1,53 @@
+import { useDroppable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function getStyle(dragType, isOver, tableDOM) {
+  const style = {};
+  const borderStyle = "4px solid #2563EB";
+  if (isOver) {
+    const {
+      width,
+      height
+    } = tableDOM.getBoundingClientRect();
+    if (dragType === "row") {
+      style.borderTop = borderStyle;
+      style.width = width;
+    } else if (dragType === "col") {
+      style.borderLeft = borderStyle;
+      style.height = height;
+    }
+  }
+  return style;
+}
+export function Droppable(props) {
+  const {
+    dragType,
+    tableDOM,
+    ...rest
+  } = props;
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable(rest);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      ref: setNodeRef,
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%"
+      }
+    }), isOver ? /*#__PURE__*/_jsx(Box, {
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        ...getStyle(dragType, isOver, tableDOM)
+      }
+    }) : null]
+  });
+}

package/dist/Editor/Elements/Table/Styles.js

@@ -1,88 +1,98 @@
-const TableStyles = themeType => ({
-  tableToolBar: {
-    position: "absolute",
-    top: "-34px",
-    left: 0,
-    backgroundColor: "#FFF",
-    border: "1px solid rgba(37, 99, 235, 0.32)",
-    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-    borderRadius: "0px",
-    width: "32px",
-    height: "32px",
-    overflow: "hidden",
-    transition: "all 0.3s",
-    "& button": {
-      "& svg": {
-        width: "16px",
-        height: "16px"
-      }
-    },
-    "&.active": {
-      width: "auto",
-      "& .toggle": {
-        rotate: "180deg"
+const TableStyles = theme => {
+  const {
+    background,
+    closeButtonSvgStroke,
+    activeColor,
+    signaturePopUpTabButtonSelectedBg,
+    signaturePopUpTabButtonSelectedSvg,
+    aiInputBackground,
+    buttonBorder1
+  } = theme?.palette?.editor || {};
+  return {
+    tableToolBar: {
+      position: "absolute",
+      top: "-24px",
+      left: 0,
+      transition: "all 0.3s",
+      "& button": {
+        backgroundColor: aiInputBackground,
+        border: `1px solid ${buttonBorder1}`,
+        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+        borderRadius: "50%",
+        padding: "4px",
+        margin: "2px",
+        "&:hover": {
+          backgroundColor: background
+        },
+        "& svg": {
+          width: "18px",
+          height: "18px",
+          "& path": {
+            stroke: closeButtonSvgStroke
+          }
+        },
+        "&.selected": {
+          outline: `1.5px solid ${activeColor || "#2563EB"}`,
+          background: signaturePopUpTabButtonSelectedBg,
+          border: "none",
+          "& svg": {
+            "& path": {
+              stroke: signaturePopUpTabButtonSelectedSvg
+            }
+          }
+        }
+      },
+      "&.active": {
+        width: "auto",
+        "& .toggle": {
+          rotate: "180deg"
+        }
+      },
+      "& .toolbtn": {
+        "& svg": {
+          stroke: "rgb(100, 116, 139)"
+        }
       }
     },
-    "& .toolbtn": {
-      "& svg": {
-        stroke: "rgb(100, 116, 139)"
-      }
-    }
-  },
-  table: {
-    "& td": {
-      padding: "8px 8px",
-      border: "1px solid #E0E0E0",
-      "&.selection": {
-        "& *::selection": {
-          background: "transparent"
+    table: {
+      "& td": {
+        padding: "8px 8px"
+      },
+      "& .selection-area-tc": {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        left: 0,
+        outline: "1px solid #2563EB",
+        pointerEvents: "none"
+      },
+      "& .hide-drag-btn-wrapper": {
+        "& .row-drag-btn": {
+          display: "none"
         }
       }
     },
-    "& .selection-area-tc": {
+    cellResizer: {
       position: "absolute",
-      width: "100%",
-      height: "100%",
+      cursor: "col-resize",
+      right: "-2px",
       top: 0,
-      left: 0,
-      background: "rgba(149, 218, 255, .3)",
-      pointerEvents: "none"
-    }
-  },
-  cellResizer: {
-    position: "absolute",
-    cursor: "col-resize",
-    right: "-2px",
-    top: 0,
-    background: "transparent",
-    width: "4px",
-    borderRadius: "0px",
-    zIndex: 1,
-    "&:hover": {
-      background: "#ccc"
-    }
-  },
-  deleteCellsPopUp: {
-    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
-    borderRadius: "7px !important",
-    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
-    zIndex: 100,
-    minWidth: "186px !important"
-  },
-  menuItemPopUp: {
-    padding: "5px 7px !important",
-    margin: "6px !important",
-    borderRadius: 1,
-    userSelect: "none",
-    color: themeType === "dark" ? "#2563EB" : "#0F172A",
-    "&:hover": {
-      // backgroundColor: "rgba(0, 123, 255, 0.1)",
-      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+      background: "transparent",
+      width: "3px",
+      borderRadius: "0px",
+      zIndex: 1,
+      "&:hover": {
+        background: "#2563EB"
+      }
     },
-    "&.Mui-selected": {
-      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
-      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
+    mobileToolDrawer: {
+      "& .customSelectContainer": {
+        border: "none !important",
+        padding: "0px !important",
+        boxShadow: "none !important"
+      }
     }
-  }
-});
+  };
+};
 export default TableStyles;