@flozy/editor 5.3.8 → 5.4.0

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

@@ -0,0 +1,142 @@
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
+import DragStyles from "./DragStyles";
+import { DragIcon } from "../../common/iconListV2";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { useRef, useState } from "react";
+import { TableToolOnDrag } from "./TableTool";
+import Draggable from "./Draggable";
+import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
+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 DragButton({
+  anchorEl,
+  placement,
+  dragType,
+  onDrag = () => {},
+  handleToolAction,
+  hideDelete,
+  className = "",
+  customProps,
+  dndProps,
+  resetSelection,
+  show
+}) {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = DragStyles(theme);
+  const dragElement = useRef(null);
+  const [showTool, setShowTool] = useState(false);
+  const {
+    isMobile
+  } = customProps || {};
+  const onDragClick = () => {
+    onDrag();
+    setShowTool(true);
+  };
+  const onDragClose = () => {
+    setShowTool(false);
+    setTimeout(() => resetSelection(), 200);
+  };
+  const dragProps = {
+    ...dndProps,
+    id: dndProps?.id + dragType,
+    disabled: isMobile,
+    data: {
+      ...dndProps.data,
+      dragType
+    }
+  };
+  const handleAction = (value, option, dragType) => {
+    const omitValues = ["delete"];
+    if (!omitValues.includes(value)) {
+      setShowTool(false);
+    }
+    handleToolAction(value, option, dragType);
+  };
+  const commonToolProps = {
+    theme,
+    dragType,
+    hideDelete,
+    handleToolAction: (value, option, dragType) => {
+      handleAction(value, option, dragType);
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popper, {
+        sx: classes.popper,
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        placement: placement || "left",
+        transition: true,
+        contentEditable: false,
+        ref: dragElement,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, -12]
+          }
+        }, {
+          name: "flip",
+          enabled: false // Disable dynamic flipping
+        }],
+
+        disablePortal: dragType !== "row",
+        className: `${className}`,
+        children: ({
+          TransitionProps
+        }) => /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(Draggable, {
+              ...dragProps,
+              children: /*#__PURE__*/_jsx(Paper, {
+                sx: dragType === "row" ? {
+                  transform: "rotate(90deg)"
+                } : {},
+                className: `${showTool ? "active" : ""}`,
+                style: {
+                  lineHeight: 0
+                },
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => {
+                    onDragClick();
+                  },
+                  children: /*#__PURE__*/_jsx(DragIcon, {})
+                })
+              })
+            })
+          })
+        })
+      }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+        open: showTool,
+        onClose: onDragClose,
+        swipeableDrawer: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileToolDrawer,
+          children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+            ...commonToolProps
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Popper, {
+        open: showTool,
+        anchorEl: dragElement?.current,
+        contentEditable: false,
+        sx: classes.toolPopper,
+        placement: dragType === "row" ? "bottom-start" : "right-start",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onDragClose,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+              ...commonToolProps
+            })
+          })
+        })
+      })]
+    }) : null
+  });
+}
+export default DragButton;

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,91 @@
-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"
-    },
-    "&.Mui-selected": {
-      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
-      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
+      background: "transparent",
+      width: "3px",
+      borderRadius: "0px",
+      zIndex: 1,
+      "&:hover": {
+        background: "#2563EB"
+      }
     }
-  }
-});
+  };
+};
 export default TableStyles;