@light-sheet/react/esm/components/Toolbar/index.js

FortuneSheet is a drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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 } from "@light-sheet/core";
import _ from "lodash";
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 { FormulaSearch } from "../FormulaSearch";
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 CustomBorder from "./CustomBorder";
import { FormatSearch } from "../FormatSearch";
var Toolbar = function Toolbar(_ref) {
  var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
  var setMoreItems = _ref.setMoreItems,
    moreItemsOpen = _ref.moreItemsOpen;
  var _useContext = useContext(WorkbookContext),
    context = _useContext.context,
    setContext = _useContext.setContext,
    refs = _useContext.refs,
    settings = _useContext.settings,
    handleUndo = _useContext.handleUndo,
    handleRedo = _useContext.handleRedo;
  var contextRef = useRef(context);
  var containerRef = useRef(null);
  var _useState = useState(-1),
    _useState2 = _slicedToArray(_useState, 2),
    toolbarWrapIndex = _useState2[0],
    setToolbarWrapIndex = _useState2[1]; // -1 means pending for item location calculation
  var _useState3 = useState([]),
    _useState4 = _slicedToArray(_useState3, 2),
    itemLocations = _useState4[0],
    setItemLocations = _useState4[1];
  var _useDialog = useDialog(),
    showDialog = _useDialog.showDialog,
    hideDialog = _useDialog.hideDialog;
  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[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 ? flowdata === null || flowdata === void 0 || (_flowdata$row = flowdata[row]) === null || _flowdata$row === void 0 ? void 0 : _flowdata$row[col] : undefined;
  var _locale = locale(context),
    toolbar = _locale.toolbar,
    merge = _locale.merge,
    border = _locale.border,
    freezen = _locale.freezen,
    defaultFmt = _locale.defaultFmt,
    formula = _locale.formula,
    sort = _locale.sort,
    align = _locale.align,
    textWrap = _locale.textWrap,
    rotation = _locale.rotation,
    screenshot = _locale.screenshot,
    filter = _locale.filter,
    splitText = _locale.splitText,
    findAndReplace = _locale.findAndReplace,
    comment = _locale.comment,
    fontarray = _locale.fontarray;
  var toolbarFormat = locale(context).format;
  var sheetWidth = context.luckysheetTableContentHW[0];
  var currency = settings.currency;
  var defaultFormat = defaultFmt(currency);
  var _useState5 = useState("#000000"),
    _useState6 = _slicedToArray(_useState5, 2),
    customColor = _useState6[0],
    setcustomColor = _useState6[1];
  var _useState7 = useState("1"),
    _useState8 = _slicedToArray(_useState7, 2),
    customStyle = _useState8[0],
    setcustomStyle = _useState8[1];
  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";
  }, []);

  // rerenders the entire toolbar and trigger recalculation of item locations
  useEffect(function () {
    setToolbarWrapIndex(-1);
  }, [settings.toolbarItems, settings.customToolbarItems]);

  // recalculate item locations
  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]);

  // calculate the position after which items should be wrapped
  useEffect(function () {
    if (itemLocations.length === 0) return;
    var container = containerRef.current;
    if (!container) return;
    var moreButtonWidth = 50;
    for (var i = itemLocations.length - 1; i >= 0; i -= 1) {
      var loc = itemLocations[i];
      if (loc + moreButtonWidth < container.clientWidth) {
        setToolbarWrapIndex(i - itemLocations.length + settings.toolbarItems.length);
        if (i === itemLocations.length - 1) {
          setMoreItems(null);
        }
        break;
      }
    }
  }, [itemLocations, setMoreItems, settings.toolbarItems.length, sheetWidth]);
  var getToolbarItem = useCallback(function (name, i) {
    var _toolbarItemSelectedF;
    // @ts-ignore
    var tooltip = toolbar[name];
    if (name === "|") {
      return /*#__PURE__*/React.createElement(Divider, {
        key: i
      });
    }
    if (["font-color", "background"].includes(name)) {
      var pick = function pick(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: 17,
          height: 2,
          backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
          position: "absolute",
          bottom: 8,
          left: 9,
          zIndex: 100
        }
      }), /*#__PURE__*/React.createElement(Combo, {
        iconId: name,
        tooltip: tooltip,
        onClick: function onClick() {
          var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
          if (color) pick(color);
        }
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(CustomColor, {
          onCustomPick: function onCustomPick(color) {
            pick(color);
            setOpen(false);
          },
          onColorPick: pick
        });
      }));
    }
    if (name === "format") {
      var currentFmt = defaultFormat[0].text;
      if (cell) {
        var curr = normalizedCellAttr(cell, "ct");
        var format = _.find(defaultFormat, function (v) {
          return v.value === (curr === null || curr === void 0 ? void 0 : curr.fa);
        });
        if ((curr === null || curr === void 0 ? void 0 : curr.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
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, defaultFormat.map(function (_ref2, ii) {
          var text = _ref2.text,
            value = _ref2.value,
            example = _ref2.example;
          if (value === "split") {
            return /*#__PURE__*/React.createElement(MenuDivider, {
              key: ii
            });
          }
          if (value === "fmtOtherSelf") {
            return /*#__PURE__*/React.createElement(Option, {
              key: value,
              onMouseEnter: function onMouseEnter(e) {
                return showSubMenu(e, "more-format");
              },
              onMouseLeave: function onMouseLeave(e) {
                return hideSubMenu(e, "more-format");
              }
            }, /*#__PURE__*/React.createElement("div", {
              className: "fortune-toolbar-menu-line"
            }, /*#__PURE__*/React.createElement("div", null, text), /*#__PURE__*/React.createElement(SVGIcon, {
              name: "rightArrow",
              width: 14
            })), /*#__PURE__*/React.createElement("div", {
              className: "more-format toolbar-item-sub-menu fortune-toolbar-select",
              style: {
                display: "none",
                width: 150,
                bottom: 10,
                top: undefined
              }
            }, [{
              text: toolbarFormat.moreCurrency,
              onclick: function onclick() {
                showDialog( /*#__PURE__*/React.createElement(FormatSearch, {
                  onCancel: hideDialog,
                  type: "currency"
                }));
                setOpen(false);
              }
            }, {
              text: toolbarFormat.moreNumber,
              onclick: function onclick() {
                showDialog( /*#__PURE__*/React.createElement(FormatSearch, {
                  onCancel: hideDialog,
                  type: "number"
                }));
                setOpen(false);
              }
            }].map(function (v) {
              return /*#__PURE__*/React.createElement("div", {
                className: "set-background-item fortune-toolbar-select-option",
                key: v.text,
                onClick: function onClick() {
                  v.onclick();
                  setOpen(false);
                },
                tabIndex: 0
              }, v.text);
            })));
          }
          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 = fontarray[0];
      if ((cell === null || cell === void 0 ? void 0 : cell.ff) != null) {
        if (_.isNumber(cell.ff)) {
          current = fontarray[cell.ff];
        } else {
          current = cell.ff;
        }
      }
      return /*#__PURE__*/React.createElement(Combo, {
        text: current,
        key: name,
        tooltip: tooltip
      }, 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 = 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
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, [9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72].map(function (num) {
          return /*#__PURE__*/React.createElement(Option, {
            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 _$find;
      var items = [{
        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: ((_$find = _.find(items, function (item) {
          return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.ht);
        })) === null || _$find === void 0 ? void 0 : _$find.title) || "align-left",
        key: name,
        tooltip: toolbar.horizontalAlign
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, items.map(function (_ref3) {
          var text = _ref3.text,
            title = _ref3.title;
          return /*#__PURE__*/React.createElement(Option, {
            key: title,
            onClick: function onClick() {
              setContext(function (ctx) {
                handleHorizontalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
              });
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
            name: title
          })));
        }));
      });
    }
    if (name === "vertical-align") {
      var _$find2;
      var _items = [{
        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: ((_$find2 = _.find(_items, function (item) {
          return "".concat(item.value) === "".concat(cell === null || cell === void 0 ? void 0 : cell.vt);
        })) === null || _$find2 === void 0 ? void 0 : _$find2.title) || "align-top",
        key: name,
        tooltip: toolbar.verticalAlign
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items.map(function (_ref4) {
          var text = _ref4.text,
            title = _ref4.title;
          return /*#__PURE__*/React.createElement(Option, {
            key: title,
            onClick: function onClick() {
              setContext(function (ctx) {
                handleVerticalAlign(ctx, refs.cellInput.current, title.replace("align-", ""));
              });
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
            name: title
          })));
        }));
      });
    }
    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));
        }
      });
    }
    if (name === "locationCondition") {
      var _items2 = [{
        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"
      },
      // TODO 条件格式
      // {
      //   text: findAndReplace.locationCondition,
      //   value: "locationCondition",
      // },
      {
        text: findAndReplace.locationRowSpan,
        value: "locationRowSpan"
      }, {
        text: findAndReplace.columnSpan,
        value: "locationColumnSpan"
      }];
      return /*#__PURE__*/React.createElement(Combo, {
        iconId: "locationCondition",
        key: name,
        tooltip: findAndReplace.location
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items2.map(function (_ref5) {
          var text = _ref5.text,
            value = _ref5.value;
          return /*#__PURE__*/React.createElement(Option, {
            key: value,
            onClick: function onClick() {
              var _context$luckysheet_s2, _context$luckysheet_s3;
              if (context.luckysheet_select_save == null) {
                showDialog(freezen.noSeletionError, "ok");
                return;
              }
              var last = context.luckysheet_select_save[0];
              var range;
              var rangeArr = [];
              if (((_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : _context$luckysheet_s2.length) === 0 || ((_context$luckysheet_s3 = context.luckysheet_select_save) === null || _context$luckysheet_s3 === void 0 ? void 0 : _context$luckysheet_s3.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") {
                var _context$luckysheet_s4, _context$luckysheet_s5;
                if (((_context$luckysheet_s4 = context.luckysheet_select_save) === null || _context$luckysheet_s4 === void 0 ? void 0 : _context$luckysheet_s4.length) === 0 || ((_context$luckysheet_s5 = context.luckysheet_select_save) === null || _context$luckysheet_s5 === void 0 ? void 0 : _context$luckysheet_s5.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") {
                var _context$luckysheet_s6, _context$luckysheet_s7;
                if (((_context$luckysheet_s6 = context.luckysheet_select_save) === null || _context$luckysheet_s6 === void 0 ? void 0 : _context$luckysheet_s6.length) === 0 || ((_context$luckysheet_s7 = context.luckysheet_select_save) === null || _context$luckysheet_s7 === void 0 ? void 0 : _context$luckysheet_s7.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 _items3 = ["highlightCellRules", "itemSelectionRules",
      // "dataBar",
      // "colorGradation",
      // "icons",
      "-",
      // "newFormatRule",
      "deleteRule"
      // "manageRules",
      ];
      return /*#__PURE__*/React.createElement(Combo, {
        iconId: "conditionFormat",
        key: name,
        tooltip: toolbar.conditionalFormat
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(ConditionalFormat, {
          items: _items3,
          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 _e$currentTarget$file;
          var file = (_e$currentTarget$file = e.currentTarget.files) === null || _e$currentTarget$file === void 0 ? void 0 : _e$currentTarget$file[0];
          if (!file) return;
          var render = new FileReader();
          render.readAsDataURL(file);
          render.onload = function (event) {
            var _event$target;
            if (event.target == null) return;
            var src = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result;
            var image = new Image();
            image.onload = function () {
              setContext(function (draftCtx) {
                insertImage(draftCtx, image);
              });
            };
            image.src = src;
          };
          e.currentTarget.value = "";
        }
      }));
    }
    if (name === "comment") {
      var _context$luckysheet_s8, _flowdata$row_index;
      var last = (_context$luckysheet_s8 = context.luckysheet_select_save) === null || _context$luckysheet_s8 === void 0 ? void 0 : _context$luckysheet_s8[context.luckysheet_select_save.length - 1];
      var row_index = last === null || last === void 0 ? void 0 : last.row_focus;
      var col_index = last === null || last === void 0 ? void 0 : last.column_focus;
      if (!last) {
        row_index = 0;
        col_index = 0;
      } else {
        if (row_index == null) {
          var _last$row = _slicedToArray(last.row, 1);
          row_index = _last$row[0];
        }
        if (col_index == null) {
          var _last$column = _slicedToArray(last.column, 1);
          col_index = _last$column[0];
        }
      }
      var itemData;
      if ((flowdata === null || flowdata === void 0 || (_flowdata$row_index = flowdata[row_index]) === null || _flowdata$row_index === void 0 || (_flowdata$row_index = _flowdata$row_index[col_index]) === null || _flowdata$row_index === void 0 ? void 0 : _flowdata$row_index.ps) != null) {
        itemData = [{
          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 = [{
          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
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, itemData.map(function (_ref6) {
          var key = _ref6.key,
            text = _ref6.text,
            _onClick = _ref6.onClick;
          return /*#__PURE__*/React.createElement(Option, {
            key: key,
            onClick: function onClick() {
              setContext(function (draftContext) {
                return _onClick(draftContext, refs.globalCache, row_index, col_index);
              });
              setOpen(false);
            }
          }, text);
        }));
      });
    }
    if (name === "quick-formula") {
      var _itemData = [{
        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,
        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.map(function (_ref7) {
          var value = _ref7.value,
            text = _ref7.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() {
            showDialog( /*#__PURE__*/React.createElement(FormulaSearch, {
              onCancel: hideDialog
            }));
            setOpen(false);
          }
        }, "".concat(formula.find, "...")));
      });
    }
    if (name === "merge-cell") {
      var itemdata = [{
        text: merge.mergeAll,
        value: "merge-all"
      }, {
        text: merge.mergeV,
        value: "merge-vertical"
      }, {
        text: merge.mergeH,
        value: "merge-horizontal"
      }, {
        text: merge.mergeCancel,
        value: "merge-cancel"
      }];
      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.map(function (_ref8) {
          var text = _ref8.text,
            value = _ref8.value;
          return /*#__PURE__*/React.createElement(Option, {
            key: value,
            onClick: function onClick() {
              setContext(function (ctx) {
                handleMerge(ctx, value);
              });
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, /*#__PURE__*/React.createElement(SVGIcon, {
            name: value,
            style: {
              marginRight: 4
            }
          }), text));
        }));
      });
    }
    if (name === "border") {
      var _items4 = [{
        text: border.borderTop,
        value: "border-top"
      }, {
        text: border.borderBottom,
        value: "border-bottom"
      }, {
        text: border.borderLeft,
        value: "border-left"
      }, {
        text: border.borderRight,
        value: "border-right"
      }, {
        text: "",
        value: "divider"
      }, {
        text: border.borderNone,
        value: "border-none"
      }, {
        text: border.borderAll,
        value: "border-all"
      }, {
        text: border.borderOutside,
        value: "border-outside"
      }, {
        text: "",
        value: "divider"
      }, {
        text: border.borderInside,
        value: "border-inside"
      }, {
        text: border.borderHorizontal,
        value: "border-horizontal"
      }, {
        text: border.borderVertical,
        value: "border-vertical"
      }, {
        text: border.borderSlash,
        value: "border-slash"
      }, {
        text: "",
        value: "divider"
      }];
      return /*#__PURE__*/React.createElement(Combo, {
        iconId: "border-all",
        key: name,
        tooltip: tooltip,
        text: "\u8FB9\u6846\u8BBE\u7F6E",
        onClick: function onClick() {
          return setContext(function (ctx) {
            handleBorder(ctx, "border-all", customColor, customStyle);
          });
        }
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items4.map(function (_ref9, ii) {
          var text = _ref9.text,
            value = _ref9.value;
          return value !== "divider" ? /*#__PURE__*/React.createElement(Option, {
            key: value,
            onClick: function onClick() {
              setContext(function (ctx) {
                handleBorder(ctx, value, customColor, customStyle);
              });
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
            name: value
          }))) : /*#__PURE__*/React.createElement(MenuDivider, {
            key: ii
          });
        }), /*#__PURE__*/React.createElement(CustomBorder, {
          onPick: function onPick(color, style) {
            setcustomColor(color);
            setcustomStyle(style);
          }
        }));
      });
    }
    if (name === "freeze") {
      var _items5 = [{
        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,
        onClick: function onClick() {
          return setContext(function (ctx) {
            handleFreeze(ctx, "freeze-row-col");
          });
        }
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items5.map(function (_ref10) {
          var text = _ref10.text,
            value = _ref10.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
          })));
        }));
      });
    }
    if (name === "text-wrap") {
      var _items6 = [{
        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 = _items6[0];
      if ((cell === null || cell === void 0 ? void 0 : cell.tb) != null) {
        _curr = _.get(_items6, cell.tb);
      }
      return /*#__PURE__*/React.createElement(Combo, {
        iconId: _curr.iconId,
        key: name,
        tooltip: toolbar.textWrap
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items6.map(function (_ref11) {
          var text = _ref11.text,
            iconId = _ref11.iconId,
            value = _ref11.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, "tb", value);
              });
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
            name: iconId
          })));
        }));
      });
    }
    if (name === "text-rotation") {
      var _items7 = [{
        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 _curr2 = _items7[0];
      if ((cell === null || cell === void 0 ? void 0 : cell.tr) != null) {
        _curr2 = _.get(_items7, cell.tr);
      }
      return /*#__PURE__*/React.createElement(Combo, {
        iconId: _curr2.iconId,
        key: name,
        tooltip: toolbar.textRotate
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items7.map(function (_ref12) {
          var text = _ref12.text,
            iconId = _ref12.iconId,
            value = _ref12.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
          })));
        }));
      });
    }
    if (name === "filter") {
      var _items8 = [{
        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: "sort", value: "sort", text: sort.custom },
      {
        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
      }, function (setOpen) {
        return /*#__PURE__*/React.createElement(Select, null, _items8.map(function (_ref13, index) {
          var text = _ref13.text,
            iconId = _ref13.iconId,
            value = _ref13.value,
            _onClick2 = _ref13.onClick;
          return value !== "divider" ? /*#__PURE__*/React.createElement(Option, {
            key: value,
            onClick: function onClick() {
              _onClick2 === null || _onClick2 === void 0 || _onClick2();
              setOpen(false);
            }
          }, /*#__PURE__*/React.createElement("div", {
            className: "fortune-toolbar-menu-line"
          }, text, /*#__PURE__*/React.createElement(SVGIcon, {
            name: iconId
          }))) : /*#__PURE__*/React.createElement(MenuDivider, {
            key: "divider-".concat(index)
          });
        }));
      });
    }
    return /*#__PURE__*/React.createElement(Button, {
      iconId: name,
      tooltip: tooltip,
      key: name,
      selected: (_toolbarItemSelectedF = toolbarItemSelectedFunc(name)) === null || _toolbarItemSelectedF === void 0 ? void 0 : _toolbarItemSelectedF(cell),
      onClick: function onClick() {
        return setContext(function (draftCtx) {
          var _toolbarItemClickHand;
          (_toolbarItemClickHand = toolbarItemClickHandler(name)) === null || _toolbarItemClickHand === void 0 || _toolbarItemClickHand(draftCtx, refs.cellInput.current, refs.globalCache);
        });
      }
    });
  }, [toolbar, cell, setContext, refs.cellInput, refs.fxInput, refs.globalCache, defaultFormat, align, handleUndo, handleRedo, flowdata, formula, showDialog, hideDialog, 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
  }, settings.customToolbarItems.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);
  }), ((_settings$customToolb = settings.customToolbarItems) === null || _settings$customToolb === void 0 ? void 0 : _settings$customToolb.length) > 0 ? /*#__PURE__*/React.createElement(Divider, {
    key: "customDivider"
  }) : null, (toolbarWrapIndex === -1 ? settings.toolbarItems : settings.toolbarItems.slice(0, toolbarWrapIndex + 1)).map(function (name, i) {
    return getToolbarItem(name, i);
  }), toolbarWrapIndex !== -1 && toolbarWrapIndex < settings.toolbarItems.length - 1 ? /*#__PURE__*/React.createElement(Button, {
    iconId: "more",
    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);
};
export default Toolbar;