@flozy/editor 5.1.5 → 5.1.7

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

@@ -1,122 +1,106 @@
-import React, { useState } from "react";
-import { Transforms } from "slate";
-import { useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme } from "@mui/material";
-import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
-import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
-import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
-import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
-import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import SettingsIcon from "@mui/icons-material/Settings";
-import DeleteCellIcon from "./DeleteCellIcon";
-import DeleteRowIcon from "./DeleteRowIcon";
+import React, { useEffect, useRef, useState } from "react";
+import { Editor, Transforms } from "slate";
+import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody, useTheme, Popper, Fade } from "@mui/material";
 import { TableUtil } from "../../utils/table";
 import TablePopup from "./TablePopup";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import TableStyles from "./Styles";
 import "./table.css";
 import { groupByBreakpoint } from "../../helper/theme";
+import useTable, { TableProvider } from "../../hooks/useTable";
+import AddRowCol from "./AddRowCol";
+import TableTool from "./TableTool";
+import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const TABLE_MENUS = [{
-  Icon: AlignHorizontalRightIcon,
-  text: "Insert Columns to the Right",
-  action: {
-    type: "insertColumn",
-    position: "after"
+const hideRowDragBtns = (hide, dragRowBtnCls) => {
+  const rowDragBtns = document.querySelectorAll(`.${dragRowBtnCls}`);
+  if (rowDragBtns?.length) {
+    rowDragBtns?.forEach(btn => btn.style.display = hide);
   }
-}, {
-  Icon: AlignHorizontalLeftIcon,
-  text: "Insert Columns to the Left",
-  action: {
-    type: "insertColumn",
-    position: "at"
-  }
-}, {
-  Icon: AlignVerticalTopIcon,
-  text: "Insert Row Above",
-  action: {
-    type: "insertRow",
-    positon: "at"
-  }
-}, {
-  Icon: AlignVerticalBottomIcon,
-  text: "Insert Row Below",
-  action: {
-    type: "insertRow",
-    position: "after"
-  }
-}, {
-  Icon: DeleteRowIcon,
-  text: "Delete Row",
-  action: {
-    type: "deleteRow"
-  }
-}, {
-  Icon: DeleteCellIcon,
-  text: "Delete Column",
-  action: {
-    type: "deleteColumn"
-  }
-}, {
-  Icon: SettingsIcon,
-  text: "Settings",
-  action: {
-    type: "settings"
-  }
-}, {
-  Icon: DeleteForeverIcon,
-  text: "Remove Table",
-  action: {
-    type: "remove"
-  }
-}];
+};
+const ToolBar = props => {
+  const {
+    selected,
+    showTool,
+    classes,
+    handleExpand,
+    handleAction,
+    exandTools
+  } = props;
+  const {
+    getSelectedCells
+  } = useTable();
+  const viewTool = selected && !showTool && getSelectedCells()?.length <= 1;
+  return viewTool ? /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    contentEditable: false,
+    className: `tableToolBar ${exandTools ? "active" : ""}`,
+    sx: classes.tableToolBar,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Settings",
+      arrow: true,
+      onClick: () => handleAction("settings"),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: "toolbtn toggle",
+        children: /*#__PURE__*/_jsx(SettingsIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Show Tools",
+      arrow: true,
+      onClick: handleExpand,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        className: "toolbtn toggle",
+        children: /*#__PURE__*/_jsx(MoreIcon, {})
+      })
+    })]
+  }) : null;
+};
 const Table = props => {
   const theme = useTheme();
+  const {
+    theme: editorTheme
+  } = useEditorContext();
   const {
     element,
     attributes,
     children,
     customProps
   } = props;
-  const classes = TableStyles();
+  const classes = TableStyles(editorTheme);
   const {
     readOnly
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
-  const [exandTools, setExpandTools] = useState(false);
+  const [exandTools, setExpandTools] = useState(null);
   const {
     bgColor,
     borderColor,
-    xsHidden
+    xsHidden,
+    fontFamily,
+    fontWeight,
+    textSize,
+    textColor
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
   const [showTool] = useEditorSelection(editor);
-  const handleAction = ({
-    type,
-    position
-  }) => () => {
+  const tableRef = useRef(null);
+  const containerRef = useRef(null);
+  const path = ReactEditor.findPath(editor, element);
+  const dragRowBtnCls = `table-${path?.toString()?.replaceAll(",", "-")}-row-drag-btn`;
+  const handleAction = type => {
     Transforms.select(editor, editor.selection);
     switch (type) {
-      case "insertRow":
-        table.insertRow(position);
-        break;
-      case "insertColumn":
-        table.insertColumn(position);
-        break;
-      case "deleteRow":
-        table.deleteRow();
-        break;
-      case "deleteColumn":
-        table.deleteColumn();
-        break;
-      case "remove":
+      case "delete":
         table.removeTable();
         break;
+      case "duplicate":
+        table.duplicateTable();
+        break;
       case "settings":
         if (tableProps) {
           onSettings(true);
@@ -126,42 +110,16 @@ const Table = props => {
         return;
     }
   };
-  const handleExpand = () => {
-    setExpandTools(!exandTools);
-  };
-  const ToolBar = () => {
-    return selected && !showTool ? /*#__PURE__*/_jsxs(Box, {
-      component: "div",
-      contentEditable: false,
-      className: `tableToolBar ${exandTools ? "active" : ""}`,
-      sx: classes.tableToolBar,
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Show Tools",
-        arrow: true,
-        onClick: handleExpand,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          className: "toolbtn toggle",
-          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
-        })
-      }), TABLE_MENUS.map(({
-        Icon,
-        text,
-        action
-      }) => {
-        return /*#__PURE__*/_jsx(Tooltip, {
-          title: text,
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            className: `toolbtn ${action?.type}`,
-            onClick: handleAction(action),
-            children: /*#__PURE__*/_jsx(Icon, {})
-          })
-        }, text);
-      })]
-    }) : null;
+  const handleExpand = e => {
+    setExpandTools(prev => prev ? false : e.currentTarget);
   };
+  useEffect(() => {
+    if (!selected) {
+      setExpandTools(false);
+    }
+  }, [selected]);
   const onSettings = () => {
-    setOpenSettings(true);
+    setOpenSettings(!openSetttings);
   };
   const onSave = data => {
     const updateData = {
@@ -183,28 +141,137 @@ const Table = props => {
       lg: "inline-block"
     }
   }, theme);
-  return /*#__PURE__*/_jsxs("div", {
-    style: {
-      minWidth: "100%",
-      maxWidth: "100%",
-      position: "relative"
+  const addRow = () => {
+    const lastRow = element?.rows - 1;
+    const firstCol = 0;
+    const lastRowPath = [...path, lastRow, firstCol];
+    const position = Editor.start(editor, lastRowPath);
+    const selection = {
+      anchor: position,
+      focus: position
+    };
+
+    // select the last row first col to insert row below
+    Transforms.select(editor, selection);
+    table.insertRow("after");
+    Transforms.deselect(editor);
+  };
+  const addCol = () => {
+    const lastCol = element?.columns - 1;
+    const firstRow = 0;
+    const lastColumnPath = [...path, firstRow, lastCol];
+    const position = Editor.start(editor, lastColumnPath);
+    const selection = {
+      anchor: position,
+      focus: position
+    };
+
+    // select the last row first col to insert row below
+    Transforms.select(editor, selection);
+    table.insertColumn("after");
+    Transforms.deselect(editor);
+  };
+  const handleRowDragBtns = () => {
+    if (containerRef?.current?.scrollLeft > 0) {
+      hideRowDragBtns("none", dragRowBtnCls);
+    } else {
+      hideRowDragBtns("", dragRowBtnCls);
+    }
+  };
+  const handleScroll = () => {
+    handleRowDragBtns();
+  };
+  const onMouseOver = () => {
+    containerRef?.current?.classList.remove("hideScroll");
+  };
+  const onMouseLeave = () => {
+    containerRef?.current?.classList.add("hideScroll");
+  };
+  const commonAddBtnProps = {
+    tableRef,
+    containerRef,
+    readOnly,
+    tableNode: element
+  };
+  return /*#__PURE__*/_jsxs(TableProvider, {
+    editor: editor,
+    otherProps: {
+      dragRowBtnCls,
+      tablePath: path,
+      openSetttings
     },
-    children: [/*#__PURE__*/_jsx(TableComp, {
-      className: readOnly ? "readOnly" : "",
-      sx: {
-        ...classes.table,
-        ...tableSX
-      },
+    children: [/*#__PURE__*/_jsxs("div", {
       style: {
-        background: bgColor,
-        border: borderColor ? `1px solid ${borderColor}` : "",
-        width: "auto"
+        minWidth: "100%",
+        maxWidth: "100%",
+        position: "relative",
+        overflowX: "auto",
+        display: "flex",
+        paddingTop: "10px"
       },
-      children: /*#__PURE__*/_jsx(TableBody, {
-        ...attributes,
-        children: children
+      ref: containerRef,
+      onScroll: handleScroll,
+      onMouseOver: onMouseOver,
+      onMouseLeave: onMouseLeave,
+      className: "custom-scroll",
+      children: [/*#__PURE__*/_jsx(TableComp, {
+        className: readOnly ? "readOnly" : "",
+        sx: {
+          ...classes.table,
+          ...tableSX
+        },
+        style: {
+          background: bgColor,
+          border: borderColor ? `1px solid ${borderColor}` : "",
+          width: "auto",
+          fontFamily,
+          fontWeight,
+          fontSize: textSize,
+          color: textColor
+        },
+        ref: tableRef,
+        children: /*#__PURE__*/_jsx(TableBody, {
+          ...attributes,
+          children: children
+        })
+      }), /*#__PURE__*/_jsx(AddRowCol, {
+        ...commonAddBtnProps,
+        addType: "col",
+        onAdd: addCol
+      })]
+    }), /*#__PURE__*/_jsx(AddRowCol, {
+      ...commonAddBtnProps,
+      addType: "row",
+      onAdd: addRow
+    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {
+      selected: selected,
+      showTool: showTool,
+      classes: classes,
+      handleExpand: handleExpand,
+      handleAction: handleAction,
+      exandTools: exandTools
+    }), /*#__PURE__*/_jsx(Popper, {
+      open: Boolean(exandTools),
+      anchorEl: exandTools,
+      transition: true,
+      contentEditable: false,
+      sx: {
+        zIndex: 2000
+      },
+      placement: "bottom-start",
+      children: ({
+        TransitionProps
+      }) => /*#__PURE__*/_jsx(Fade, {
+        ...TransitionProps,
+        timeout: 350,
+        children: /*#__PURE__*/_jsx("div", {
+          children: /*#__PURE__*/_jsx(TableTool, {
+            theme: editorTheme,
+            handleToolAction: handleAction
+          })
+        })
       })
-    }), !readOnly && /*#__PURE__*/_jsx(ToolBar, {}), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+    }), openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
       element: tableProps?.styleProps || {},
       onSave: onSave,
       onClose: onClose,