@fileverse-dev/fortune-react 1.0.26-patch-1 → 1.1.0

package/es/components/Toolbar/index.js

@@ -1,1338 +0,0 @@
-import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
-import { toolbarItemClickHandler, handleTextBackground, handleTextColor, handleTextSize, normalizedCellAttr, getFlowdata, newComment, editComment, deleteComment, showHideComment, showHideAllComments, autoSelectionFormula, handleSum, locale, handleMerge, handleBorder, toolbarItemSelectedFunc, handleFreeze, insertImage, showImgChooser, updateFormat, handleSort, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, createFilter, clearFilter, applyLocation, insertDuneChart } from "@fileverse-dev/fortune-core";
-import _ from "lodash";
-import { IconButton, LucideIcon, Tooltip } from "@fileverse/ui";
-import WorkbookContext from "../../context";
-import "./index.css";
-import Button from "./Button";
-import Divider, { MenuDivider } from "./Divider";
-import Combo from "./Combo";
-import Select, { Option } from "./Select";
-import SVGIcon from "../SVGIcon";
-import { useDialog } from "../../hooks/useDialog";
-import { SplitColumn } from "../SplitColumn";
-import { LocationCondition } from "../LocationCondition";
-import DataVerification from "../DataVerification";
-import ConditionalFormat from "../ConditionFormat";
-import CustomButton from "./CustomButton";
-import { CustomColor } from "./CustomColor";
-import { FormatSearch } from "../FormatSearch";
-import DuneChartsInputModal from "../DuneChartsInputModal/DuneChartsInputModal";
-import MoreItemsContaier from "./MoreItemsContainer";
-export var getLucideIcon = function getLucideIcon(title) {
-  switch (title) {
-    case "undo":
-      return "Undo";
-    case "redo":
-      return "Redo";
-    case "bold":
-      return "Bold";
-    case "italic":
-      return "Italic";
-    case "strike-through":
-      return "Strikethrough";
-    case "underline":
-      return "Underline";
-    case "align-left":
-      return "AlignLeft";
-    case "align-center":
-      return "AlignCenter";
-    case "align-right":
-      return "AlignRight";
-    case "align-top":
-      return "ArrowUpFromLine";
-    case "align-middle":
-      return "AlignVerticalMiddle";
-    case "align-bottom":
-      return "ArrowDownToLine";
-    case "text-overflow":
-      return "TextOverflow";
-    case "text-wrap":
-      return "WrapText";
-    case "text-clip":
-      return "TextClip";
-    case "font-color":
-      return "Baseline";
-    case "background":
-      return "PaintBucket";
-    case "border-all":
-      return "Border";
-    case "merge-all":
-      return "MergeHorizontal";
-    case "format":
-      return "DollarSign";
-    case "currency-format":
-      return "DollarSign";
-    case "percentage-format":
-      return "Percent";
-    case "number-decrease":
-      return "DecimalsArrowLeft";
-    case "number-increase":
-      return "DecimalsArrowRight";
-    case "conditionFormat":
-      return "PaintbrushVertical";
-    case "filter":
-      return "Filter";
-    case "link":
-      return "Link";
-    case "comment":
-      return "MessageSquarePlus";
-    case "image":
-      return "Image";
-    case "formula-sum":
-      return "Sigma";
-    case "dataVerification":
-      return "ShieldCheck";
-    case "search":
-      return "Search";
-    case "dune":
-      return "DuneChart";
-    case "Ellipsis":
-      return "Ellipsis";
-    default:
-      return "";
-  }
-};
-var Toolbar = function Toolbar(_a) {
-  var _b, _c, _d;
-  var setMoreItems = _a.setMoreItems,
-    moreItemsOpen = _a.moreItemsOpen,
-    onMoreToolbarItemsClose = _a.onMoreToolbarItemsClose,
-    moreToolbarItems = _a.moreToolbarItems;
-  var _e = useContext(WorkbookContext),
-    context = _e.context,
-    setContext = _e.setContext,
-    refs = _e.refs,
-    settings = _e.settings,
-    handleUndo = _e.handleUndo,
-    handleRedo = _e.handleRedo;
-  var contextRef = useRef(context);
-  var containerRef = useRef(null);
-  var _f = useState(-1),
-    toolbarWrapIndex = _f[0],
-    setToolbarWrapIndex = _f[1];
-  var _g = useState([]),
-    itemLocations = _g[0],
-    setItemLocations = _g[1];
-  var _h = useState(false),
-    showDuneModal = _h[0],
-    setShowDuneModal = _h[1];
-  var _j = useState(window.innerWidth >= 1280),
-    isDesktop = _j[0],
-    setIsDesktop = _j[1];
-  var _k = useDialog(),
-    showDialog = _k.showDialog,
-    hideDialog = _k.hideDialog;
-  var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
-  var flowdata = getFlowdata(context);
-  contextRef.current = context;
-  var row = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
-  var col = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
-  var cell = flowdata && row != null && col != null ? (_c = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row]) === null || _c === void 0 ? void 0 : _c[col] : undefined;
-  var _l = locale(context),
-    toolbar = _l.toolbar,
-    merge = _l.merge,
-    border = _l.border,
-    freezen = _l.freezen,
-    defaultFmt = _l.defaultFmt,
-    formula = _l.formula,
-    sort = _l.sort,
-    align = _l.align,
-    textWrap = _l.textWrap,
-    rotation = _l.rotation,
-    screenshot = _l.screenshot,
-    filter = _l.filter,
-    splitText = _l.splitText,
-    findAndReplace = _l.findAndReplace,
-    comment = _l.comment,
-    fontarray = _l.fontarray;
-  var toolbarFormat = locale(context).format;
-  var sheetWidth = context.luckysheetTableContentHW[0];
-  var currency = settings.currency;
-  var defaultFormat = defaultFmt(currency);
-  var customColor = useState("#000000")[0];
-  var customStyle = useState("1")[0];
-  var showSubMenu = useCallback(function (e, className) {
-    var target = e.target;
-    var menuItem = target.className === "fortune-toolbar-menu-line" ? target.parentElement : target;
-    var menuItemRect = menuItem.getBoundingClientRect();
-    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
-    var subMenu = menuItem.querySelector(".".concat(className));
-    if (_.isNil(subMenu)) return;
-    var menuItemStyle = window.getComputedStyle(menuItem);
-    var menuItemPaddingRight = parseFloat(menuItemStyle.getPropertyValue("padding-right").replace("px", ""));
-    if (workbookContainerRect.right - menuItemRect.right < parseFloat(subMenu.style.width.replace("px", ""))) {
-      subMenu.style.display = "block";
-      subMenu.style.right = "".concat(menuItemRect.width - menuItemPaddingRight, "px");
-    } else {
-      subMenu.style.display = "block";
-      subMenu.style.right = className === "more-format" ? "".concat(-(parseFloat(subMenu.style.width.replace("px", "")) + 0), "px") : "".concat(-(parseFloat(subMenu.style.width.replace("px", "")) + menuItemPaddingRight), "px");
-    }
-  }, [refs.workbookContainer]);
-  var hideSubMenu = useCallback(function (e, className) {
-    var target = e.target;
-    if (target.className === "".concat(className)) {
-      target.style.display = "none";
-      return;
-    }
-    var subMenu = target.className === "condition-format-item" ? target.parentElement : target.querySelector(".".concat(className));
-    if (_.isNil(subMenu)) return;
-    subMenu.style.display = "none";
-  }, []);
-  useEffect(function () {
-    var handleResize = function handleResize() {
-      setIsDesktop(window.innerWidth >= 1280);
-    };
-    window.addEventListener("resize", handleResize);
-    return function () {
-      return window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  useEffect(function () {
-    setToolbarWrapIndex(-1);
-  }, [settings.toolbarItems, settings.customToolbarItems]);
-  useEffect(function () {
-    if (toolbarWrapIndex === -1) {
-      var container = containerRef.current;
-      if (!container) return;
-      var items = container.querySelectorAll(".fortune-toolbar-item");
-      if (!items) return;
-      var locations = [];
-      var containerRect = container.getBoundingClientRect();
-      for (var i = 0; i < items.length; i += 1) {
-        var item = items[i];
-        var itemRect = item.getBoundingClientRect();
-        locations.push(itemRect.left - containerRect.left + itemRect.width);
-      }
-      setItemLocations(locations);
-    }
-  }, [toolbarWrapIndex, sheetWidth]);
-  useEffect(function () {
-    if (isDesktop) {
-      setToolbarWrapIndex(-1);
-      setMoreItems(null);
-      return;
-    }
-    if (itemLocations.length === 0) return;
-    var container = containerRef.current;
-    if (!container) return;
-    var moreButtonWidth = 50;
-    var containerWidth = container.getBoundingClientRect().width;
-    var availableWidth = containerWidth - 30;
-    for (var i = itemLocations.length - 1; i >= 0; i -= 1) {
-      var loc = itemLocations[i];
-      if (loc + moreButtonWidth < availableWidth) {
-        setToolbarWrapIndex(i - itemLocations.length + settings.toolbarItems.length);
-        if (i === itemLocations.length - 1) {
-          setMoreItems(null);
-        }
-        break;
-      }
-    }
-  }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth, isDesktop]);
-  var getToolbarItem = useCallback(function (name, i) {
-    var _a, _b, _c, _d, _e, _f;
-    var tooltip = toolbar[name];
-    if (name === "|") {
-      return /*#__PURE__*/React.createElement(Divider, {
-        key: i
-      });
-    }
-    if (["font-color", "background"].includes(name)) {
-      var pick_1 = function pick_1(color) {
-        setContext(function (draftCtx) {
-          return (name === "font-color" ? handleTextColor : handleTextBackground)(draftCtx, refs.cellInput.current, color);
-        });
-        if (name === "font-color") {
-          refs.globalCache.recentTextColor = color;
-        } else {
-          refs.globalCache.recentBackgroundColor = color;
-        }
-      };
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          position: "relative"
-        },
-        key: name
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: 24,
-          height: 4,
-          backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
-          position: "absolute",
-          bottom: 2,
-          left: 3,
-          zIndex: 100
-        }
-      }), /*#__PURE__*/React.createElement(Combo, {
-        iconId: name,
-        tooltip: tooltip,
-        showArrow: false,
-        fillColor: name === "font-color" ? refs.globalCache.recentTextColor : undefined,
-        onClick: function onClick() {
-          var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
-          if (color) pick_1(color);
-        }
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(CustomColor, {
-          onCustomPick: function onCustomPick(color) {
-            pick_1(color);
-            setOpen(false);
-          },
-          onColorPick: pick_1
-        });
-      }));
-    }
-    if (name === "format") {
-      var currentFmt = defaultFormat[0].text;
-      if (cell) {
-        var curr_1 = normalizedCellAttr(cell, "ct");
-        var format = _.find(defaultFormat, function (v) {
-          return v.value === (curr_1 === null || curr_1 === void 0 ? void 0 : curr_1.fa);
-        });
-        if ((curr_1 === null || curr_1 === void 0 ? void 0 : curr_1.fa) != null) {
-          if (format != null) {
-            currentFmt = format.text;
-          } else {
-            currentFmt = defaultFormat[defaultFormat.length - 1].text;
-          }
-        }
-      }
-      return /*#__PURE__*/React.createElement(Combo, {
-        text: currentFmt,
-        key: name,
-        tooltip: tooltip,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, defaultFormat.map(function (_a, ii) {
-          var text = _a.text,
-            value = _a.value,
-            example = _a.example;
-          if (value === "split") {
-            return /*#__PURE__*/React.createElement(MenuDivider, {
-              key: ii
-            });
-          }
-          if (value === "fmtOtherSelf") {
-            return /*#__PURE__*/React.createElement(Option, {
-              key: value,
-              onClick: function onClick() {
-                showDialog(/*#__PURE__*/React.createElement(FormatSearch, {
-                  onCancel: hideDialog,
-                  type: "currency"
-                }), undefined, "Currency Format");
-                setOpen(false);
-              }
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "fortune-toolbar-menu-line"
-            }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement("div", {
-              className: "fortune-toolbar-subtext"
-            }, example)));
-          }
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              setOpen(false);
-              setContext(function (ctx) {
-                var d = getFlowdata(ctx);
-                if (d == null) return;
-                updateFormat(ctx, refs.cellInput.current, d, "ct", value);
-              });
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-subtext"
-          }, example)));
-        }));
-      });
-    }
-    if (name === "font") {
-      var current_1 = fontarray[0];
-      if ((cell === null || cell === void 0 ? void 0 : cell.ff) != null) {
-        if (_.isNumber(cell.ff)) {
-          current_1 = fontarray[cell.ff];
-        } else {
-          current_1 = cell.ff;
-        }
-      }
-      return /*#__PURE__*/React.createElement(Combo, {
-        text: current_1,
-        key: name,
-        tooltip: tooltip,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, fontarray.map(function (o) {
-          return /*#__PURE__*/React.createElement(Option, {
-            key: o,
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                current_1 = o;
-                var d = getFlowdata(ctx);
-                if (!d) return;
-                updateFormat(ctx, refs.cellInput.current, d, "ff", o);
-              });
-              setOpen(false);
-            }
-          }, o);
-        }));
-      });
-    }
-    if (name === "font-size") {
-      return /*#__PURE__*/React.createElement(Combo, {
-        text: cell ? normalizedCellAttr(cell, "fs", context.defaultFontSize) : context.defaultFontSize.toString(),
-        key: name,
-        tooltip: tooltip,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, {
-          style: {
-            minWidth: "fit-content",
-            width: "50px"
-          }
-        }, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
-          return /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-select-option text-body-sm text-center color-text-default",
-            style: {
-              minWidth: "fit-content",
-              padding: "0px",
-              width: "36px",
-              height: "36px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "14px"
-            },
-            key: num,
-            onClick: function onClick() {
-              setContext(function (draftContext) {
-                return handleTextSize(draftContext, refs.cellInput.current, num, refs.canvas.current.getContext("2d"));
-              });
-              setOpen(false);
-            }
-          }, num);
-        }));
-      });
-    }
-    if (name === "horizontal-align") {
-      var items_1 = [{
-        title: "align-left",
-        text: align.left,
-        value: 1
-      }, {
-        title: "align-center",
-        text: align.center,
-        value: 0
-      }, {
-        title: "align-right",
-        text: align.right,
-        value: 2
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: ((_a = _.find(items_1, function (item) {
-          return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
-        })) === null || _a === void 0 ? void 0 : _a.title) || "align-left",
-        key: name,
-        tooltip: toolbar.horizontalAlign,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, {
-          style: {
-            minWidth: "fit-content",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4
-          }
-        }, items_1.map(function (_a) {
-          var _b;
-          var title = _a.title;
-          return /*#__PURE__*/React.createElement(IconButton, {
-            key: title,
-            isActive: ((_b = _.find(items_1, function (item) {
-              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
-            })) === null || _b === void 0 ? void 0 : _b.title) === title,
-            icon: getLucideIcon(title),
-            variant: "ghost",
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
-              });
-              setOpen(false);
-            },
-            tabIndex: 0
-          });
-        }));
-      });
-    }
-    if (name === "vertical-align") {
-      var items_2 = [{
-        title: "align-top",
-        text: align.top,
-        value: 1
-      }, {
-        title: "align-middle",
-        text: align.middle,
-        value: 0
-      }, {
-        title: "align-bottom",
-        text: align.bottom,
-        value: 2
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: ((_b = _.find(items_2, function (item) {
-          return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-        })) === null || _b === void 0 ? void 0 : _b.title) || "align-top",
-        key: name,
-        tooltip: toolbar.verticalAlign,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, {
-          style: {
-            minWidth: "fit-content",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4
-          }
-        }, items_2.map(function (_a) {
-          var _b;
-          var title = _a.title;
-          return /*#__PURE__*/React.createElement(IconButton, {
-            key: title,
-            isActive: ((_b = _.find(items_2, function (item) {
-              return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
-            })) === null || _b === void 0 ? void 0 : _b.title) === title,
-            icon: getLucideIcon(title),
-            variant: "ghost",
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
-              });
-              setOpen(false);
-            },
-            tabIndex: 0
-          });
-        }));
-      });
-    }
-    if (name === "undo") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: tooltip,
-        key: name,
-        disabled: refs.globalCache.undoList.length === 0,
-        onClick: function onClick() {
-          return handleUndo();
-        }
-      });
-    }
-    if (name === "redo") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: tooltip,
-        key: name,
-        disabled: refs.globalCache.redoList.length === 0,
-        onClick: function onClick() {
-          return handleRedo();
-        }
-      });
-    }
-    if (name === "screenshot") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: tooltip,
-        key: name,
-        onClick: function onClick() {
-          var imgsrc = handleScreenShot(contextRef.current);
-          if (imgsrc) {
-            showDialog(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, screenshot.screenshotTipSuccess), /*#__PURE__*/React.createElement("img", {
-              src: imgsrc,
-              alt: "",
-              style: {
-                maxWidth: "100%",
-                maxHeight: "100%"
-              }
-            })));
-          }
-        }
-      });
-    }
-    if (name === "splitColumn") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: tooltip,
-        key: name,
-        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));
-            }
-          }
-        }
-      });
-    }
-    if (name === "dataVerification") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: tooltip,
-        key: name,
-        onClick: function onClick() {
-          if (context.allowEdit === false) return;
-          showDialog(/*#__PURE__*/React.createElement(DataVerification, null), undefined, toolbar.dataVerification);
-        }
-      });
-    }
-    if (name === "locationCondition") {
-      var items_3 = [{
-        text: findAndReplace.location,
-        value: "location"
-      }, {
-        text: findAndReplace.locationFormula,
-        value: "locationFormula"
-      }, {
-        text: findAndReplace.locationDate,
-        value: "locationDate"
-      }, {
-        text: findAndReplace.locationDigital,
-        value: "locationDigital"
-      }, {
-        text: findAndReplace.locationString,
-        value: "locationString"
-      }, {
-        text: findAndReplace.locationError,
-        value: "locationError"
-      }, {
-        text: findAndReplace.locationRowSpan,
-        value: "locationRowSpan"
-      }, {
-        text: findAndReplace.columnSpan,
-        value: "locationColumnSpan"
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "locationCondition",
-        key: name,
-        tooltip: findAndReplace.location,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_3.map(function (_a) {
-          var text = _a.text,
-            value = _a.value;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              var _a, _b, _c, _d, _e, _f;
-              if (context.luckysheet_select_save == null) {
-                showDialog(freezen.noSelectionError, "ok");
-                return;
-              }
-              var last = context.luckysheet_select_save[0];
-              var range;
-              var rangeArr = [];
-              if (((_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) === 0 || ((_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b.length) === 1 && last.row[0] === last.row[1] && last.column[0] === last.column[1]) {
-                range = [{
-                  row: [0, flowdata.length - 1],
-                  column: [0, flowdata[0].length - 1]
-                }];
-              } else {
-                range = _.assignIn([], context.luckysheet_select_save);
-              }
-              if (value === "location") {
-                showDialog(/*#__PURE__*/React.createElement(LocationCondition, null));
-              } else if (value === "locationFormula") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationFormula", "all", ctx);
-                });
-              } else if (value === "locationDate") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationConstant", "d", ctx);
-                });
-              } else if (value === "locationDigital") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationConstant", "n", ctx);
-                });
-              } else if (value === "locationString") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationConstant", "s,g", ctx);
-                });
-              } else if (value === "locationError") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationConstant", "e", ctx);
-                });
-              } else if (value === "locationCondition") {
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationCF", undefined, ctx);
-                });
-              } else if (value === "locationRowSpan") {
-                if (((_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c.length) === 0 || ((_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d.length) === 1 && context.luckysheet_select_save[0].row[0] === context.luckysheet_select_save[0].row[1]) {
-                  showDialog(findAndReplace.locationTiplessTwoRow, "ok");
-                  return;
-                }
-                range = _.assignIn([], context.luckysheet_select_save);
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationRowSpan", undefined, ctx);
-                });
-              } else if (value === "locationColumnSpan") {
-                if (((_e = context.luckysheet_select_save) === null || _e === void 0 ? void 0 : _e.length) === 0 || ((_f = context.luckysheet_select_save) === null || _f === void 0 ? void 0 : _f.length) === 1 && context.luckysheet_select_save[0].column[0] === context.luckysheet_select_save[0].column[1]) {
-                  showDialog(findAndReplace.locationTiplessTwoColumn, "ok");
-                  return;
-                }
-                range = _.assignIn([], context.luckysheet_select_save);
-                setContext(function (ctx) {
-                  rangeArr = applyLocation(range, "locationColumnSpan", undefined, ctx);
-                });
-              }
-              if (rangeArr.length === 0 && value !== "location") showDialog(findAndReplace.locationTipNotFindCell, "ok");
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text));
-        }));
-      });
-    }
-    if (name === "conditionFormat") {
-      var items_4 = ["highlightCellRules", "itemSelectionRules", "-", "deleteRule"];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "conditionFormat",
-        key: name,
-        tooltip: toolbar.conditionalFormat,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(ConditionalFormat, {
-          items: items_4,
-          setOpen: setOpen
-        });
-      });
-    }
-    if (name === "image") {
-      return /*#__PURE__*/React.createElement(Button, {
-        iconId: name,
-        tooltip: toolbar.insertImage,
-        key: name,
-        onClick: function onClick() {
-          if (context.allowEdit === false) return;
-          showImgChooser();
-        }
-      }, /*#__PURE__*/React.createElement("input", {
-        id: "fortune-img-upload",
-        type: "file",
-        accept: "image/*",
-        style: {
-          display: "none"
-        },
-        onChange: function onChange(e) {
-          var _a;
-          var file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
-          if (!file) return;
-          var render = new FileReader();
-          render.readAsDataURL(file);
-          render.onload = function (event) {
-            var _a;
-            if (event.target == null) return;
-            var src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-            var image = new Image();
-            image.onload = function () {
-              setContext(function (draftCtx) {
-                insertImage(draftCtx, image);
-              });
-            };
-            image.src = src;
-          };
-          e.currentTarget.value = "";
-        }
-      }));
-    }
-    if (name === "comment") {
-      var last = (_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c[context.luckysheet_select_save.length - 1];
-      var row_index_1 = last === null || last === void 0 ? void 0 : last.row_focus;
-      var col_index_1 = last === null || last === void 0 ? void 0 : last.column_focus;
-      if (!last) {
-        row_index_1 = 0;
-        col_index_1 = 0;
-      } else {
-        if (row_index_1 == null) {
-          row_index_1 = last.row[0];
-        }
-        if (col_index_1 == null) {
-          col_index_1 = last.column[0];
-        }
-      }
-      var itemData_1;
-      if (((_e = (_d = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row_index_1]) === null || _d === void 0 ? void 0 : _d[col_index_1]) === null || _e === void 0 ? void 0 : _e.ps) != null) {
-        itemData_1 = [{
-          key: "edit",
-          text: comment.edit,
-          onClick: editComment
-        }, {
-          key: "delete",
-          text: comment.delete,
-          onClick: deleteComment
-        }, {
-          key: "showOrHide",
-          text: comment.showOne,
-          onClick: showHideComment
-        }, {
-          key: "showOrHideAll",
-          text: comment.showAll,
-          onClick: showHideAllComments
-        }];
-      } else {
-        itemData_1 = [{
-          key: "new",
-          text: comment.insert,
-          onClick: newComment
-        }, {
-          key: "showOrHideAll",
-          text: comment.showAll,
-          onClick: showHideAllComments
-        }];
-      }
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: name,
-        key: name,
-        tooltip: tooltip,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, itemData_1.map(function (_a) {
-          var key = _a.key,
-            text = _a.text,
-            _onClick = _a.onClick;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: key,
-            onClick: function onClick() {
-              setContext(function (draftContext) {
-                return _onClick(draftContext, refs.globalCache, row_index_1, col_index_1);
-              });
-              setOpen(false);
-            }
-          }, text);
-        }));
-      });
-    }
-    if (name === "quick-formula") {
-      var itemData_2 = [{
-        text: formula.sum,
-        value: "SUM"
-      }, {
-        text: formula.average,
-        value: "AVERAGE"
-      }, {
-        text: formula.count,
-        value: "COUNT"
-      }, {
-        text: formula.max,
-        value: "MAX"
-      }, {
-        text: formula.min,
-        value: "MIN"
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "formula-sum",
-        key: name,
-        tooltip: toolbar.autoSum,
-        showArrow: false,
-        onClick: function onClick() {
-          return setContext(function (ctx) {
-            handleSum(ctx, refs.cellInput.current, refs.fxInput.current, refs.globalCache);
-          });
-        }
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, itemData_2.map(function (_a) {
-          var value = _a.value,
-            text = _a.text;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                autoSelectionFormula(ctx, refs.cellInput.current, refs.fxInput.current, value, refs.globalCache);
-              });
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-subtext"
-          }, value)));
-        }), /*#__PURE__*/React.createElement(MenuDivider, null), /*#__PURE__*/React.createElement(Option, {
-          key: "formula",
-          onClick: function onClick() {
-            var button = document.getElementById("function-button");
-            if (button) {
-              button.click();
-            }
-            setOpen(false);
-          }
-        }, "".concat(formula.find, "...")));
-      });
-    }
-    if (name === "merge-cell") {
-      var itemdata_1 = [{
-        text: merge.mergeAll,
-        value: "merge-all",
-        icon: "MergeAll"
-      }, {
-        text: merge.mergeV,
-        value: "merge-vertical",
-        icon: "MergeVertical"
-      }, {
-        text: merge.mergeH,
-        value: "merge-horizontal",
-        icon: "MergeHorizontal"
-      }, {
-        text: merge.mergeCancel,
-        value: "merge-cancel",
-        icon: "Unmerge"
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "merge-all",
-        key: name,
-        tooltip: tooltip,
-        text: "\u5408\u5E76\u5355\u5143\u683C",
-        onClick: function onClick() {
-          return setContext(function (ctx) {
-            handleMerge(ctx, "merge-all");
-          });
-        }
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, itemdata_1.map(function (_a) {
-          var text = _a.text,
-            value = _a.value,
-            icon = _a.icon;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                handleMerge(ctx, value);
-              });
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: 6
-            }
-          }, /*#__PURE__*/React.createElement(LucideIcon, {
-            name: icon,
-            width: 16,
-            height: 16
-          }), text));
-        }));
-      });
-    }
-    if (name === "border") {
-      var items_5 = [{
-        text: border.borderTop,
-        value: "border-top",
-        icon: "BorderTop"
-      }, {
-        text: border.borderBottom,
-        value: "border-bottom",
-        icon: "BorderBottom"
-      }, {
-        text: border.borderLeft,
-        value: "border-left",
-        icon: "BorderLeft"
-      }, {
-        text: border.borderRight,
-        value: "border-right",
-        icon: "BorderRight"
-      }, {
-        text: border.borderNone,
-        value: "border-none",
-        icon: "NoBorder"
-      }, {
-        text: border.borderAll,
-        value: "border-all",
-        icon: "Border"
-      }, {
-        text: border.borderOutside,
-        value: "border-outside",
-        icon: "BorderOutside"
-      }, {
-        text: border.borderInside,
-        value: "border-inside",
-        icon: "BorderInside"
-      }, {
-        text: border.borderHorizontal,
-        value: "border-horizontal",
-        icon: "BorderHorizontal"
-      }, {
-        text: border.borderVertical,
-        value: "border-vertical",
-        icon: "BorderVertical"
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "border-all",
-        key: name,
-        tooltip: tooltip,
-        text: "\u8FB9\u6846\u8BBE\u7F6E",
-        showArrow: false,
-        onClick: function onClick() {
-          return setContext(function (ctx) {
-            handleBorder(ctx, "border-all", customColor, customStyle);
-          });
-        }
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: "fortune-toolbar-select fortune-border-grid"
-        }, items_5.map(function (_a) {
-          var value = _a.value,
-            icon = _a.icon;
-          return /*#__PURE__*/React.createElement("div", {
-            key: value,
-            className: "fortune-border-grid-item",
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                handleBorder(ctx, value, customColor, customStyle);
-              });
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement(LucideIcon, {
-            name: icon,
-            width: 16,
-            height: 16
-          }));
-        }));
-      });
-    }
-    if (name === "freeze") {
-      var items_6 = [{
-        text: freezen.freezenRowRange,
-        value: "freeze-row"
-      }, {
-        text: freezen.freezenColumnRange,
-        value: "freeze-col"
-      }, {
-        text: freezen.freezenRCRange,
-        value: "freeze-row-col"
-      }, {
-        text: freezen.freezenCancel,
-        value: "freeze-cancel"
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "freeze-row-col",
-        key: name,
-        tooltip: tooltip,
-        showArrow: false,
-        onClick: function onClick() {
-          return setContext(function (ctx) {
-            handleFreeze(ctx, "freeze-row-col");
-          });
-        }
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_6.map(function (_a) {
-          var text = _a.text,
-            value = _a.value;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                handleFreeze(ctx, value);
-              });
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: value,
-            width: 16,
-            height: 16
-          })));
-        }));
-      });
-    }
-    if (name === "text-wrap") {
-      var items_7 = [{
-        text: textWrap.clip,
-        iconId: "text-clip",
-        value: "clip"
-      }, {
-        text: textWrap.overflow,
-        iconId: "text-overflow",
-        value: "overflow"
-      }, {
-        text: textWrap.wrap,
-        iconId: "text-wrap",
-        value: "wrap"
-      }];
-      var curr_2 = items_7[0];
-      if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
-        curr_2 = _.get(items_7, cell.tb);
-      }
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: curr_2.iconId,
-        key: name,
-        tooltip: toolbar.textWrap,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, {
-          style: {
-            minWidth: "fit-content",
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: 4
-          }
-        }, items_7.map(function (_a) {
-          var iconId = _a.iconId,
-            value = _a.value;
-          return /*#__PURE__*/React.createElement(IconButton, {
-            key: value,
-            isActive: curr_2.value === value,
-            icon: getLucideIcon(iconId),
-            variant: "ghost",
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                var d = getFlowdata(ctx);
-                if (d == null) return;
-                updateFormat(ctx, refs.cellInput.current, d, "tb", value);
-              });
-              setOpen(false);
-            },
-            tabIndex: 0
-          });
-        }));
-      });
-    }
-    if (name === "text-rotation") {
-      var items_8 = [{
-        text: rotation.none,
-        iconId: "text-rotation-none",
-        value: "none"
-      }, {
-        text: rotation.angleup,
-        iconId: "text-rotation-angleup",
-        value: "angleup"
-      }, {
-        text: rotation.angledown,
-        iconId: "text-rotation-angledown",
-        value: "angledown"
-      }, {
-        text: rotation.vertical,
-        iconId: "text-rotation-vertical",
-        value: "vertical"
-      }, {
-        text: rotation.rotationUp,
-        iconId: "text-rotation-up",
-        value: "rotation-up"
-      }, {
-        text: rotation.rotationDown,
-        iconId: "text-rotation-down",
-        value: "rotation-down"
-      }];
-      var curr = items_8[0];
-      if ((cell === null || cell === void 0 ? void 0 : cell.tr) != null) {
-        curr = _.get(items_8, cell.tr);
-      }
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: curr.iconId,
-        key: name,
-        tooltip: toolbar.textRotate,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, null, items_8.map(function (_a) {
-          var text = _a.text,
-            iconId = _a.iconId,
-            value = _a.value;
-          return /*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              setContext(function (ctx) {
-                var d = getFlowdata(ctx);
-                if (d == null) return;
-                updateFormat(ctx, refs.cellInput.current, d, "tr", value);
-              });
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line"
-          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId,
-            width: 16,
-            height: 16
-          })));
-        }));
-      });
-    }
-    if (name === "filter") {
-      var items_9 = [{
-        iconId: "sort-asc",
-        value: "sort-asc",
-        text: sort.asc,
-        onClick: function onClick() {
-          setContext(function (ctx) {
-            handleSort(ctx, true);
-          });
-        }
-      }, {
-        iconId: "sort-desc",
-        value: "sort-desc",
-        text: sort.desc,
-        onClick: function onClick() {
-          setContext(function (ctx) {
-            handleSort(ctx, false);
-          });
-        }
-      }, {
-        iconId: "",
-        value: "divider"
-      }, {
-        iconId: "filter1",
-        value: "filter",
-        text: filter.filter,
-        onClick: function onClick() {
-          return setContext(function (draftCtx) {
-            createFilter(draftCtx);
-          });
-        }
-      }, {
-        iconId: "eraser",
-        value: "eraser",
-        text: filter.clearFilter,
-        onClick: function onClick() {
-          return setContext(function (draftCtx) {
-            clearFilter(draftCtx);
-          });
-        }
-      }];
-      return /*#__PURE__*/React.createElement(Combo, {
-        iconId: "filter",
-        key: name,
-        tooltip: toolbar.sortAndFilter,
-        showArrow: false
-      }, function (setOpen) {
-        return /*#__PURE__*/React.createElement(Select, {
-          style: {
-            minWidth: "11.25rem"
-          }
-        }, items_9.map(function (_a, index) {
-          var text = _a.text,
-            iconId = _a.iconId,
-            value = _a.value,
-            _onClick2 = _a.onClick;
-          return value !== "divider" ? (/*#__PURE__*/React.createElement(Option, {
-            key: value,
-            onClick: function onClick() {
-              _onClick2 === null || _onClick2 === void 0 ? void 0 : _onClick2();
-              setOpen(false);
-            }
-          }, /*#__PURE__*/React.createElement("div", {
-            className: "fortune-toolbar-menu-line gap-1",
-            style: {
-              justifyContent: "start"
-            }
-          }, /*#__PURE__*/React.createElement(SVGIcon, {
-            name: iconId,
-            width: 16,
-            height: 16
-          }), text))) : (/*#__PURE__*/React.createElement(MenuDivider, {
-            key: "divider-".concat(index)
-          }));
-        }));
-      });
-    }
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      text: tooltip,
-      placement: "bottom"
-    }, /*#__PURE__*/React.createElement(Button, {
-      iconId: name,
-      tooltip: tooltip,
-      key: name,
-      selected: (_f = toolbarItemSelectedFunc(name)) === null || _f === void 0 ? void 0 : _f(cell),
-      onClick: function onClick() {
-        return setContext(function (draftCtx) {
-          var _a;
-          (_a = toolbarItemClickHandler(name)) === null || _a === void 0 ? void 0 : _a(draftCtx, refs.cellInput.current, refs.globalCache);
-        });
-      }
-    }));
-  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDuneModal, merge, border, freezen, screenshot, sort, textWrap, rotation, filter, splitText, findAndReplace, context.luckysheet_select_save, context.defaultFontSize, context.allowEdit, comment, fontarray, hideSubMenu, showSubMenu, refs.canvas, customColor, customStyle, toolbarFormat.moreCurrency]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: "fortune-toolbar",
-    "aria-label": toolbar.toolbar
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-left"
-  }, settings.customToolbarItems.filter(function (n) {
-    return n.key === "import-export";
-  }).map(function (n) {
-    return /*#__PURE__*/React.createElement(CustomButton, {
-      tooltip: n.tooltip,
-      onClick: n.onClick,
-      key: n.key,
-      icon: n.icon,
-      iconName: n.iconName
-    }, n.children);
-  }), ((_d = settings.customToolbarItems) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (/*#__PURE__*/React.createElement(Divider, {
-    key: "customDivider"
-  })) : null, (toolbarWrapIndex === -1 || isDesktop ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
-    return getToolbarItem(name, i);
-  }), !isDesktop && toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? (/*#__PURE__*/React.createElement(Button, {
-    iconId: "Ellipsis",
-    tooltip: toolbar.toolMore,
-    onClick: function onClick() {
-      if (moreItemsOpen) {
-        setMoreItems(null);
-      } else {
-        setMoreItems(settings.toolbarItems.slice(toolbarWrapIndex + 1).map(function (name, i) {
-          return getToolbarItem(name, i);
-        }));
-      }
-    }
-  })) : null, moreToolbarItems && (/*#__PURE__*/React.createElement(MoreItemsContaier, {
-    onClose: onMoreToolbarItemsClose
-  }, moreToolbarItems))), /*#__PURE__*/React.createElement("div", {
-    className: "fortune-toolbar-right"
-  }, settings.customToolbarItems.length > 0 && (/*#__PURE__*/React.createElement(Button, {
-    iconId: "dune",
-    tooltip: "Insert Dune Chart",
-    key: "dune-charts",
-    onClick: function onClick() {
-      if (context.allowEdit === false) return;
-      setShowDuneModal(true);
-    },
-    style: {
-      backgroundColor: "#F4603E2E",
-      borderRadius: "8px"
-    }
-  })), settings.customToolbarItems.filter(function (n) {
-    return n.key !== "import-export";
-  }).map(function (n) {
-    return /*#__PURE__*/React.createElement(CustomButton, {
-      tooltip: n.tooltip,
-      onClick: n.onClick,
-      key: n.key,
-      icon: n.icon,
-      iconName: n.iconName
-    }, n.children);
-  }), showDuneModal && (/*#__PURE__*/React.createElement(DuneChartsInputModal, {
-    isOpen: showDuneModal,
-    onSubmit: function onSubmit(url) {
-      var _a;
-      setContext(function (draftCtx) {
-        insertDuneChart(draftCtx, url);
-      });
-      setShowDuneModal(false);
-      (_a = settings.onDuneChartEmbed) === null || _a === void 0 ? void 0 : _a.call(settings);
-    },
-    onClose: function onClose() {
-      return setShowDuneModal(false);
-    },
-    placeholder: "Paste here any Dune chart link for some magic",
-    submitText: "Add Dune chart"
-  }))));
-};
-export default Toolbar;