@fileverse-dev/fortune-react 1.1.0 → 1.1.2

package/es/components/ContextMenu/index.js

@@ -0,0 +1,1054 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+import { locale, handleCopy, handlePasteByClick, deleteRowCol, insertRowCol, removeActiveImage, deleteSelectedCellText, sortSelection, createFilter, showImgChooser, handleLink, hideSelected, showSelected, getSheetIndex, api, isAllowEdit, jfrefreshgrid, newComment, getFreezeState, toggleFreeze, clearFilter } from "@fileverse-dev/fortune-core";
+import _ from "lodash";
+import React, { useContext, useRef, useCallback, useLayoutEffect } from "react";
+import regeneratorRuntime from "regenerator-runtime";
+import Tippy from "@tippyjs/react";
+import { LucideIcon } from "@fileverse/ui";
+import { SplitColumn } from "../SplitColumn";
+import { ResetColumnWidth } from "../ResetColumnWidth";
+import DataVerification from "../DataVerification";
+import WorkbookContext from "../../context";
+import { useAlert } from "../../hooks/useAlert";
+import { useDialog } from "../../hooks/useDialog";
+import Divider from "./Divider";
+import "./index.css";
+import Menu from "./Menu";
+import "tippy.js/dist/tippy.css";
+import ConditionalFormat from "../ConditionFormat";
+import SVGIcon from "../SVGIcon";
+var ContextMenu = function ContextMenu() {
+  var showDialog = useDialog().showDialog;
+  var containerRef = useRef(null);
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext,
+    settings = _a.settings,
+    refs = _a.refs;
+  var contextMenu = context.contextMenu;
+  var showAlert = useAlert().showAlert;
+  var _b = locale(context),
+    rightclick = _b.rightclick,
+    drag = _b.drag,
+    generalDialog = _b.generalDialog,
+    info = _b.info,
+    toolbar = _b.toolbar,
+    splitText = _b.splitText;
+  var getMenuElement = useCallback(function (name, i) {
+    var _a, _b, _c, _d;
+    var selection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+    if (name === "|") {
+      return /*#__PURE__*/React.createElement(Divider, {
+        key: "divider-".concat(i)
+      });
+    }
+    if (name === "split-text") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: "split-text",
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          if (_.isUndefined(context.luckysheet_select_save)) {
+            showDialog(splitText.tipNoSelect, "ok");
+          } else {
+            var currentColumn = context.luckysheet_select_save[context.luckysheet_select_save.length - 1].column;
+            if (context.luckysheet_select_save.length > 1) {
+              showDialog(splitText.tipNoMulti, "ok");
+            } else if (currentColumn[0] !== currentColumn[1]) {
+              showDialog(splitText.tipNoMultiColumn, "ok");
+            } else {
+              showDialog(/*#__PURE__*/React.createElement(SplitColumn, null), undefined, "Split text to columns");
+            }
+          }
+          setContext(function (draftCtx) {
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "split-flv",
+        width: 18,
+        height: 18
+      }), "Split text to columns"));
+    }
+    if (name === "freeze-row") {
+      var freezeState = getFreezeState(context);
+      var isFrozen_1 = freezeState.isRowFrozen;
+      var isEntireRowSelected = (selection === null || selection === void 0 ? void 0 : selection.row_select) === true;
+      if (!isEntireRowSelected) return null;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: "freeze-row",
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            if (isFrozen_1) {
+              toggleFreeze(draftCtx, "unfreeze-row");
+            } else {
+              toggleFreeze(draftCtx, "row");
+            }
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Snowflake"
+      }), /*#__PURE__*/React.createElement("p", null, isFrozen_1 ? "Unfreeze row" : "Freeze upto current row")));
+    }
+    if (name === "freeze-column") {
+      var freezeState = getFreezeState(context);
+      var isFrozen_2 = freezeState.isColFrozen;
+      var isEntireColumnSelected = (selection === null || selection === void 0 ? void 0 : selection.column_select) === true;
+      if (!isEntireColumnSelected) return null;
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: "freeze-column",
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            if (isFrozen_2) {
+              toggleFreeze(draftCtx, "unfreeze-column");
+            } else {
+              toggleFreeze(draftCtx, "column");
+              jfrefreshgrid(draftCtx, null, undefined, false);
+            }
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Snowflake"
+      }), /*#__PURE__*/React.createElement("p", null, isFrozen_2 ? "Unfreeze column" : "Freeze upto current column")));
+    }
+    if (name === "comment") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            newComment(draftCtx, refs.globalCache, selection === null || selection === void 0 ? void 0 : selection.row_focus, selection === null || selection === void 0 ? void 0 : selection.column_focus);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "MessageSquarePlus"
+      }), /*#__PURE__*/React.createElement("p", null, "Comment")));
+    }
+    if (name === "dataVerification") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          setContext(function (draftCtx) {
+            draftCtx.contextMenu = {};
+          });
+          showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ShieldCheck"
+      }), /*#__PURE__*/React.createElement("p", null, "Data Verification")));
+    }
+    if (name === "searchReplace") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          setContext(function (draftCtx) {
+            draftCtx.showSearch = true;
+            draftCtx.showReplace = true;
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Search"
+      }), /*#__PURE__*/React.createElement("p", null, "Find and Replace")));
+    }
+    if (name === "copy") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            var _a;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            handleCopy(draftCtx);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Copy"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.copy)));
+    }
+    if (name === "cut") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            var _a;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            handleCopy(draftCtx);
+            if (draftCtx.activeImg != null) {
+              removeActiveImage(draftCtx);
+            } else {
+              var msg = deleteSelectedCellText(draftCtx);
+              if (msg === "partMC") {
+                showDialog(generalDialog.partiallyError, "ok");
+              } else if (msg === "allowEdit") {
+                showDialog(generalDialog.readOnlyError, "ok");
+              } else if (msg === "dataNullError") {
+                showDialog(generalDialog.dataNullError, "ok");
+              }
+            }
+            jfrefreshgrid(draftCtx, null, undefined);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Scissors"
+      }), /*#__PURE__*/React.createElement("p", null, "Cut")));
+    }
+    if (name === "paste" && regeneratorRuntime) {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          return __awaiter(void 0, void 0, void 0, function () {
+            var clipboardText;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  return [4, navigator.clipboard.readText()];
+                case 1:
+                  clipboardText = _a.sent();
+                  setContext(function (draftCtx) {
+                    handlePasteByClick(draftCtx, clipboardText);
+                    draftCtx.contextMenu = {};
+                  });
+                  return [2];
+              }
+            });
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Clipboard"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.paste)));
+    }
+    if (name === "insert-column") {
+      return (selection === null || selection === void 0 ? void 0 : selection.row_select) ? null : ["left"].map(function (dir) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          key: "add-col-".concat(dir),
+          onClick: function onClick() {
+            var _a, _b, _c;
+            var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.column) === null || _c === void 0 ? void 0 : _c[0];
+            if (position == null) return;
+            var count = 1;
+            if (count < 1) return;
+            var direction = dir === "left" ? "lefttop" : "rightbottom";
+            var insertRowColOp = {
+              type: "column",
+              index: position,
+              count: count,
+              direction: direction,
+              id: context.currentSheetId
+            };
+            setContext(function (draftCtx) {
+              try {
+                insertRowCol(draftCtx, insertRowColOp);
+                draftCtx.contextMenu = {};
+              } catch (err) {
+                if (err.message === "maxExceeded") showAlert(rightclick.columnOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnColumnReadOnly, "ok");
+                draftCtx.contextMenu = {};
+              }
+            }, {
+              insertRowColOp: insertRowColOp
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item"
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Plus"
+        }), /*#__PURE__*/React.createElement("div", null, "Insert column to the left")));
+      });
+    }
+    if (name === "insert-row") {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) ? null : ["bottom"].map(function (dir) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          key: "add-row-".concat(dir),
+          onClick: function onClick() {
+            var _a, _b, _c;
+            var position = (_c = (_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.row) === null || _c === void 0 ? void 0 : _c[0];
+            if (position == null) return;
+            var count = 1;
+            if (count < 1) return;
+            var direction = dir === "top" ? "lefttop" : "rightbottom";
+            var insertRowColOp = {
+              type: "row",
+              index: position,
+              count: count,
+              direction: direction,
+              id: context.currentSheetId
+            };
+            setContext(function (draftCtx) {
+              try {
+                insertRowCol(draftCtx, insertRowColOp);
+                draftCtx.contextMenu = {};
+              } catch (err) {
+                if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit, "ok");else if (err.message === "readOnly") showAlert(rightclick.cannotInsertOnRowReadOnly, "ok");
+                draftCtx.contextMenu = {};
+              }
+            }, {
+              insertRowColOp: insertRowColOp
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item"
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Plus"
+        }), /*#__PURE__*/React.createElement("div", null, "Insert row below")));
+      });
+    }
+    if (name === "delete-column") {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React.createElement(Menu, {
+        key: "delete-col",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _a = selection.column,
+            st_index = _a[0],
+            ed_index = _a[1];
+          var deleteRowColOp = {
+            type: "column",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _a, _b, _c;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              draftCtx.dataVerificationDropDownList = false;
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_c = (_b = draftCtx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllColumn, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteColumnReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Trash2"
+      }), /*#__PURE__*/React.createElement("div", null, rightclick.deleteSelected, rightclick.column))));
+    }
+    if (name === "cell-delete-column") {
+      return !(selection === null || selection === void 0 ? void 0 : selection.row_select) && (/*#__PURE__*/React.createElement(Menu, {
+        key: "cell-delete-col",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _a = selection.column,
+            st_index = _a[0],
+            ed_index = _a[1];
+          var deleteRowColOp = {
+            type: "column",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _a, _b, _c;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              draftCtx.dataVerificationDropDownList = false;
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_c = (_b = draftCtx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllColumn, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteColumnReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Trash2"
+      }), /*#__PURE__*/React.createElement("div", null, rightclick.deleteSelected, rightclick.column))));
+    }
+    if (name === "delete-row") {
+      return (selection === null || selection === void 0 ? void 0 : selection.row_select) && (/*#__PURE__*/React.createElement(Menu, {
+        key: "delete-row",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _a = selection.row,
+            st_index = _a[0],
+            ed_index = _a[1];
+          var deleteRowColOp = {
+            type: "row",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _a, _b;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_b = draftCtx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllRow, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteRowReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Trash2"
+      }), /*#__PURE__*/React.createElement("div", null, rightclick.deleteSelected, rightclick.row))));
+    }
+    if (name === "cell-delete-row") {
+      return !(selection === null || selection === void 0 ? void 0 : selection.column_select) && (/*#__PURE__*/React.createElement(Menu, {
+        key: "cell-delete-row",
+        onClick: function onClick() {
+          if (!selection) return;
+          var _a = selection.row,
+            st_index = _a[0],
+            ed_index = _a[1];
+          var deleteRowColOp = {
+            type: "row",
+            start: st_index,
+            end: ed_index,
+            id: context.currentSheetId
+          };
+          setContext(function (draftCtx) {
+            var _a, _b;
+            if (((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+              showAlert(rightclick.noMulti, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            var slen = ed_index - st_index + 1;
+            var index = getSheetIndex(draftCtx, context.currentSheetId);
+            if (((_b = draftCtx.luckysheetfile[index].data) === null || _b === void 0 ? void 0 : _b.length) <= slen) {
+              showAlert(rightclick.cannotDeleteAllRow, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            try {
+              deleteRowCol(draftCtx, deleteRowColOp);
+            } catch (e) {
+              if (e.message === "readOnly") {
+                showAlert(rightclick.cannotDeleteRowReadOnly, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+          }, {
+            deleteRowColOp: deleteRowColOp
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Trash2"
+      }), /*#__PURE__*/React.createElement("div", null, rightclick.deleteSelected, rightclick.row))));
+    }
+    if (name === "hide-row") {
+      return (selection === null || selection === void 0 ? void 0 : selection.row_select) === true && ["hideSelected", "showHide"].map(function (item) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          key: item,
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              var msg = "";
+              if (item === "hideSelected") {
+                msg = hideSelected(draftCtx, "row");
+              } else if (item === "showHide") {
+                showSelected(draftCtx, "row");
+              }
+              if (msg === "noMulti") {
+                showDialog(drag.noMulti);
+              }
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item"
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "EyeOff"
+        }), /*#__PURE__*/React.createElement("div", null, rightclick[item] + rightclick.row)));
+      });
+    }
+    if (name === "hide-column") {
+      return (selection === null || selection === void 0 ? void 0 : selection.column_select) === true && ["hideSelected", "showHide"].map(function (item) {
+        return /*#__PURE__*/React.createElement(Menu, {
+          key: item,
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              var msg = "";
+              if (item === "hideSelected") {
+                msg = hideSelected(draftCtx, "column");
+              } else if (item === "showHide") {
+                showSelected(draftCtx, "column");
+              }
+              if (msg === "noMulti") {
+                showDialog(drag.noMulti);
+              }
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item"
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "EyeOff"
+        }), /*#__PURE__*/React.createElement("div", null, rightclick[item] + rightclick.column)));
+      });
+    }
+    if (name === "set-row-height") {
+      var rowHeight_1 = (selection === null || selection === void 0 ? void 0 : selection.height) || context.defaultrowlen;
+      var shownRowHeight = ((_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b.some(function (section) {
+        return section.height_move !== (rowHeight_1 + 1) * (section.row[1] - section.row[0] + 1) - 1;
+      })) ? "" : rowHeight_1;
+      return ((_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c.some(function (section) {
+        return section.row_select;
+      })) ? (/*#__PURE__*/React.createElement(Menu, {
+        key: "set-row-height",
+        onClick: function onClick(e, container) {
+          var _a;
+          var targetRowHeight = (_a = container.querySelector("input")) === null || _a === void 0 ? void 0 : _a.value;
+          setContext(function (draftCtx) {
+            if (_.isUndefined(targetRowHeight) || targetRowHeight === "" || parseInt(targetRowHeight, 10) <= 0 || parseInt(targetRowHeight, 10) > 545) {
+              showAlert(info.tipRowHeightLimit, "ok");
+              draftCtx.contextMenu = {};
+              return;
+            }
+            var numRowHeight = parseInt(targetRowHeight, 10);
+            var rowHeightList = {};
+            _.forEach(draftCtx.luckysheet_select_save, function (section) {
+              for (var rowNum = section.row[0]; rowNum <= section.row[1]; rowNum += 1) {
+                rowHeightList[rowNum] = numRowHeight;
+              }
+            });
+            api.setRowHeight(draftCtx, rowHeightList, {}, true);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "resize-flv",
+        width: 16,
+        height: 16
+      }), /*#__PURE__*/React.createElement("div", null, "Resize row height", /*#__PURE__*/React.createElement("input", {
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        onKeyDown: function onKeyDown(e) {
+          return e.stopPropagation();
+        },
+        tabIndex: 0,
+        type: "number",
+        min: 1,
+        max: 545,
+        className: "luckysheet-mousedown-cancel",
+        placeholder: rightclick.number,
+        defaultValue: shownRowHeight,
+        style: {
+          width: "40px"
+        }
+      }), "px")))) : null;
+    }
+    if (name === "set-column-width") {
+      return ((_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d.some(function (section) {
+        return section.column_select;
+      })) ? (/*#__PURE__*/React.createElement(Menu, {
+        key: "set-column-width",
+        onClick: function onClick() {
+          showDialog(/*#__PURE__*/React.createElement(ResetColumnWidth, null), undefined, "Resize column");
+          setContext(function (draftCtx) {
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(SVGIcon, {
+        name: "resize-flv",
+        width: 16,
+        height: 16
+      }), /*#__PURE__*/React.createElement("div", null, "Resize column width")))) : null;
+    }
+    if (name === "clear") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            var allowEdit = isAllowEdit(draftCtx);
+            if (!allowEdit) return;
+            if (draftCtx.activeImg != null) {
+              removeActiveImage(draftCtx);
+            } else {
+              var msg = deleteSelectedCellText(draftCtx);
+              if (msg === "partMC") {
+                showDialog(generalDialog.partiallyError, "ok");
+              } else if (msg === "allowEdit") {
+                showDialog(generalDialog.readOnlyError, "ok");
+              } else if (msg === "dataNullError") {
+                showDialog(generalDialog.dataNullError, "ok");
+              }
+            }
+            draftCtx.contextMenu = {};
+            jfrefreshgrid(draftCtx, null, undefined);
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Eraser"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.clearContent)));
+    }
+    if (name === "ascSort") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          setContext(function (draftCtx) {
+            sortSelection(draftCtx, true);
+            draftCtx.contextMenu = {};
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ArrowDown01"
+      }), /*#__PURE__*/React.createElement("p", null, "Ascending sort")));
+    }
+    if (name === "desSort") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          if (context.allowEdit === false) return;
+          setContext(function (draftCtx) {
+            sortSelection(draftCtx, false);
+            draftCtx.contextMenu = {};
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ArrowDown10"
+      }), /*#__PURE__*/React.createElement("p", null, "Descending sort")));
+    }
+    if (name === "sort") {
+      var sort = locale(context).sort;
+      return /*#__PURE__*/React.createElement(Tippy, {
+        key: name,
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select",
+          style: {
+            minWidth: "11.25rem"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col color-text-default text-body-sm"
+        }, /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              sortSelection(draftCtx, true);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "ArrowUp"
+        }), /*#__PURE__*/React.createElement("p", null, sort.asc))), /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              sortSelection(draftCtx, false);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "ArrowDown"
+        }), /*#__PURE__*/React.createElement("p", null, sort.desc))))),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ArrowDownUp"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.sortSelection)), /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ChevronRight",
+        width: 16,
+        height: 16
+      })))));
+    }
+    if (name === "filter") {
+      var filter = locale(context).filter;
+      return /*#__PURE__*/React.createElement(Tippy, {
+        key: name,
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          className: "fortune-toolbar-select",
+          style: {
+            minWidth: "11.25rem"
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "flex flex-col color-text-default text-body-sm"
+        }, /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              createFilter(draftCtx);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Filter",
+          className: "w-4 h-4"
+        }), /*#__PURE__*/React.createElement("p", null, filter.filter))), /*#__PURE__*/React.createElement(Menu, {
+          onClick: function onClick() {
+            setContext(function (draftCtx) {
+              clearFilter(draftCtx);
+              draftCtx.contextMenu = {};
+            });
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: "context-item p-2 w-full",
+          style: {
+            height: "40px"
+          }
+        }, /*#__PURE__*/React.createElement(LucideIcon, {
+          name: "Eraser"
+        }), /*#__PURE__*/React.createElement("p", null, filter.clearFilter))))),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Filter"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.filterSelection)), /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ChevronRight",
+        width: 16,
+        height: 16,
+        className: "w-4 h-4 color-text-secondary"
+      })))));
+    }
+    if (name === "image") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            showImgChooser();
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, rightclick.image);
+    }
+    if (name === "link") {
+      return /*#__PURE__*/React.createElement(Menu, {
+        key: name,
+        onClick: function onClick() {
+          setContext(function (draftCtx) {
+            handleLink(draftCtx);
+            draftCtx.contextMenu = {};
+          });
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "Link"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.link)));
+    }
+    if (name === "conditionFormat") {
+      var closeContextMenu = function closeContextMenu() {
+        return setContext(function (ctx) {
+          ctx.contextMenu = {};
+        });
+      };
+      return /*#__PURE__*/React.createElement(Tippy, {
+        key: name,
+        placement: "right-start",
+        interactive: true,
+        interactiveBorder: 50,
+        offset: [0, 0],
+        arrow: false,
+        zIndex: 3000,
+        appendTo: document.body,
+        content: /*#__PURE__*/React.createElement("div", {
+          style: {
+            minWidth: 220
+          }
+        }, /*#__PURE__*/React.createElement(ConditionalFormat, {
+          items: ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"],
+          setOpen: closeContextMenu
+        })),
+        trigger: "mouseenter focus",
+        hideOnClick: false
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center justify-between w-full"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-2 context-item"
+      }, /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "PaintbrushVertical"
+      }), /*#__PURE__*/React.createElement("p", null, rightclick.conditionFormat || "Conditional Format")), /*#__PURE__*/React.createElement(LucideIcon, {
+        name: "ChevronRight",
+        width: 16,
+        height: 16,
+        className: "color-text-secondary w-4 h-4"
+      })))));
+    }
+    return null;
+  }, [context, setContext, refs.globalCache, rightclick, showAlert, showDialog, drag.noMulti, info.tipRowHeightLimit, info.tipColumnWidthLimit, generalDialog.partiallyError, generalDialog.readOnlyError, generalDialog.dataNullError]);
+  useLayoutEffect(function () {
+    var _a;
+    if (!containerRef.current) {
+      return;
+    }
+    var winH = window.innerHeight;
+    var winW = window.innerWidth;
+    var rect = containerRef.current.getBoundingClientRect();
+    var workbookRect = (_a = refs.workbookContainer.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!workbookRect) {
+      return;
+    }
+    var menuW = rect.width;
+    var menuH = rect.height;
+    var top = contextMenu.y || 0;
+    var left = contextMenu.x || 0;
+    var hasOverflow = false;
+    if (workbookRect.left + left + menuW > winW) {
+      left -= menuW;
+      hasOverflow = true;
+    }
+    if (workbookRect.top + top + menuH > winH) {
+      top -= menuH;
+      hasOverflow = true;
+    }
+    if (top < 0) {
+      top = 0;
+      hasOverflow = true;
+    }
+    if (hasOverflow) {
+      setContext(function (draftCtx) {
+        draftCtx.contextMenu.x = left;
+        draftCtx.contextMenu.y = top;
+      });
+    }
+  }, [contextMenu.x, contextMenu.y, refs.workbookContainer, setContext]);
+  if (_.isEmpty(context.contextMenu)) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-context-menu luckysheet-cols-menu",
+    ref: containerRef,
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    style: {
+      left: contextMenu.x,
+      top: contextMenu.y
+    }
+  }, context.contextMenu.headerMenu === true ? settings.headerContextMenu.map(function (menu, i) {
+    return getMenuElement(menu, i);
+  }) : settings.cellContextMenu.map(function (menu, i) {
+    return getMenuElement(menu, i);
+  }));
+};
+export default ContextMenu;