@fileverse-dev/fortune-react 1.0.5 → 1.0.6

package/lib/components/SheetOverlay/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "./index.css";
+declare const SheetOverlay: React.FC;
+export default SheetOverlay;

package/lib/components/SheetOverlay/index.js

@@ -0,0 +1,587 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _ColumnHeader = _interopRequireDefault(require("./ColumnHeader"));
+var _RowHeader = _interopRequireDefault(require("./RowHeader"));
+var _InputBox = _interopRequireDefault(require("./InputBox"));
+var _ScrollBar = _interopRequireDefault(require("./ScrollBar"));
+var _SearchReplace = _interopRequireDefault(require("../SearchReplace"));
+var _LinkEidtCard = _interopRequireDefault(require("../LinkEidtCard"));
+var _FilterOption = _interopRequireDefault(require("../FilterOption"));
+var _useAlert = require("../../hooks/useAlert");
+var _ImgBoxs = _interopRequireDefault(require("../ImgBoxs"));
+var _NotationBoxes = _interopRequireDefault(require("../NotationBoxes"));
+var _RangeDialog = _interopRequireDefault(require("../DataVerification/RangeDialog"));
+var _useDialog = require("../../hooks/useDialog");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _DropdownList = _interopRequireDefault(require("../DataVerification/DropdownList"));
+var _iFrameBoxs = _interopRequireDefault(require("../IFrameBoxs/iFrameBoxs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var SheetOverlay = function SheetOverlay() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+  var _o = (0, _react.useContext)(_context.default),
+    context = _o.context,
+    setContext = _o.setContext,
+    settings = _o.settings,
+    refs = _o.refs;
+  var _p = (0, _fortuneCore.locale)(context),
+    info = _p.info,
+    rightclick = _p.rightclick;
+  var showDialog = (0, _useDialog.useDialog)().showDialog;
+  var containerRef = (0, _react.useRef)(null);
+  var bottomAddRowInputRef = (0, _react.useRef)(null);
+  var dataVerificationHintBoxRef = (0, _react.useRef)(null);
+  var showAlert = (0, _useAlert.useAlert)().showAlert;
+  var cellAreaMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    if (e.button !== 2) {
+      setContext(function (draftCtx) {
+        var _a;
+        (0, _fortuneCore.handleCellAreaMouseDown)(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.cellArea.current, refs.fxInput.current, refs.canvas.current.getContext("2d"));
+        if (!_lodash.default.isEmpty((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) && refs.cellInput.current) {
+          setTimeout(function () {
+            var _a;
+            (_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+          });
+        }
+      });
+    }
+  }, [setContext, refs.globalCache, refs.cellInput, refs.cellArea, refs.fxInput, refs.canvas]);
+  var cellAreaContextMenu = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleContextMenu)(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "cell");
+    });
+  }, [refs.workbookContainer, setContext, settings, refs.cellArea]);
+  var cellAreaDoubleClick = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleCellAreaDoubleClick)(draftCtx, refs.globalCache, settings, nativeEvent, refs.cellArea.current);
+    });
+  }, [refs.cellArea, refs.globalCache, setContext, settings]);
+  var onLeftTopClick = (0, _react.useCallback)(function () {
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.selectAll)(draftCtx);
+    });
+  }, [setContext]);
+  var debouncedShowLinkCard = (0, _react.useMemo)(function () {
+    return _lodash.default.debounce(function (globalCache, r, c, isEditing, skip) {
+      var _a;
+      if (skip === void 0) {
+        skip = false;
+      }
+      if (skip || ((_a = globalCache.linkCard) === null || _a === void 0 ? void 0 : _a.mouseEnter)) return;
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.showLinkCard)(draftCtx, r, c, isEditing);
+      });
+    }, 800);
+  }, [setContext]);
+  var overShowLinkCard = (0, _react.useCallback)(function (ctx, globalCache, e, container, scrollX, scrollY) {
+    var rc = (0, _fortuneCore.getCellRowColumn)(ctx, e, container, scrollX, scrollY);
+    if (rc == null) return;
+    var link = (0, _fortuneCore.getCellHyperlink)(ctx, rc.r, rc.c);
+    if (link == null) {
+      debouncedShowLinkCard(globalCache, rc.r, rc.c, false);
+    } else {
+      (0, _fortuneCore.showLinkCard)(ctx, rc.r, rc.c, false);
+      debouncedShowLinkCard(globalCache, rc.r, rc.c, false, true);
+    }
+  }, [debouncedShowLinkCard]);
+  var onMouseMove = (0, _react.useCallback)(function (nativeEvent) {
+    setContext(function (draftCtx) {
+      overShowLinkCard(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.scrollbarX.current, refs.scrollbarY.current);
+      (0, _fortuneCore.handleOverlayMouseMove)(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current, refs.fxInput.current);
+    });
+  }, [overShowLinkCard, refs.cellInput, refs.fxInput, refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  var onMouseUp = (0, _react.useCallback)(function (nativeEvent) {
+    setContext(function (draftCtx) {
+      try {
+        (0, _fortuneCore.handleOverlayMouseUp)(draftCtx, refs.globalCache, settings, nativeEvent, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      } catch (e) {
+        showAlert(e.message);
+      }
+    });
+  }, [refs.cellInput, refs.fxInput, refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext, settings, showAlert]);
+  var onKeyDownForZoom = (0, _react.useCallback)(function (ev) {
+    var newZoom = (0, _fortuneCore.handleKeydownForZoom)(ev, context.zoomRatio);
+    if (newZoom !== context.zoomRatio) {
+      setContext(function (ctx) {
+        ctx.zoomRatio = newZoom;
+        ctx.luckysheetfile[(0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId)].zoomRatio = newZoom;
+      });
+    }
+  }, [context.zoomRatio, setContext]);
+  var onTouchStart = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftContext) {
+      (0, _fortuneCore.handleOverlayTouchStart)(draftContext, nativeEvent, refs.globalCache);
+    });
+    e.stopPropagation();
+  }, [refs.globalCache, setContext]);
+  var onTouchMove = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleOverlayTouchMove)(draftCtx, nativeEvent, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
+    });
+  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  var onTouchEnd = (0, _react.useCallback)(function () {
+    (0, _fortuneCore.handleOverlayTouchEnd)(refs.globalCache);
+  }, [refs.globalCache]);
+  var handleBottomAddRow = (0, _react.useCallback)(function () {
+    var _a;
+    var valueStr = ((_a = bottomAddRowInputRef.current) === null || _a === void 0 ? void 0 : _a.value) || context.addDefaultRows.toString();
+    var value = parseInt(valueStr, 10);
+    if (Number.isNaN(value)) {
+      return;
+    }
+    if (value < 1) {
+      return;
+    }
+    var insertRowColOp = {
+      type: "row",
+      index: context.luckysheetfile[(0, _fortuneCore.getSheetIndex)(context, context.currentSheetId)].data.length - 1,
+      count: value,
+      direction: "rightbottom",
+      id: context.currentSheetId
+    };
+    setContext(function (draftCtx) {
+      try {
+        (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp, false);
+      } catch (err) {
+        if (err.message === "maxExceeded") showAlert(rightclick.rowOverLimit);
+      }
+    }, {
+      insertRowColOp: insertRowColOp
+    });
+  }, [context, rightclick.rowOverLimit, setContext, showAlert]);
+  (0, _react.useEffect)(function () {
+    if (context.warnDialog) {
+      setTimeout(function () {
+        showDialog(context.warnDialog, "yesno", "Invalid data", "Retry");
+        setContext(function (ctx) {
+          ctx.warnDialog = undefined;
+        });
+      }, 240);
+    }
+  }, [context.warnDialog, setContext, showDialog]);
+  (0, _react.useEffect)(function () {
+    refs.cellArea.current.scrollLeft = context.scrollLeft;
+    refs.cellArea.current.scrollTop = context.scrollTop;
+  }, [context.scrollLeft, context.scrollTop, refs.cellArea, (_a = refs.cellArea.current) === null || _a === void 0 ? void 0 : _a.scrollLeft, (_b = refs.cellArea.current) === null || _b === void 0 ? void 0 : _b.scrollTop]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    if (context.commentBoxes || context.hoveredCommentBox || context.editingCommentBox) {
+      _lodash.default.concat((_a = context.commentBoxes) === null || _a === void 0 ? void 0 : _a.filter(function (v) {
+        var _a;
+        return v.rc !== ((_a = context.editingCommentBox) === null || _a === void 0 ? void 0 : _a.rc);
+      }), [context.hoveredCommentBox, context.editingCommentBox]).forEach(function (box) {
+        if (box) {
+          (0, _fortuneCore.drawArrow)(box.rc, box.size);
+        }
+      });
+    }
+  }, [context.commentBoxes, context.hoveredCommentBox, context.editingCommentBox]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("mousemove", onMouseMove);
+    return function () {
+      document.removeEventListener("mousemove", onMouseMove);
+    };
+  }, [onMouseMove]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("mouseup", onMouseUp);
+    return function () {
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [onMouseUp]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", onKeyDownForZoom);
+    return function () {
+      document.removeEventListener("keydown", onKeyDownForZoom);
+    };
+  }, [onKeyDownForZoom]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-sheet-overlay",
+    ref: containerRef,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    tabIndex: -1,
+    style: {
+      width: context.luckysheetTableContentHW[0],
+      height: context.luckysheetTableContentHW[1]
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-col-header-wrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-left-top",
+    onClick: onLeftTopClick,
+    tabIndex: 0,
+    style: {
+      width: context.rowHeaderWidth - 1.5,
+      height: context.columnHeaderHeight - 1.5
+    }
+  }), /*#__PURE__*/_react.default.createElement(_ColumnHeader.default, null)), (context.showSearch || context.showReplace) && (/*#__PURE__*/_react.default.createElement(_SearchReplace.default, {
+    getContainer: function getContainer() {
+      return containerRef.current;
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-row-body"
+  }, /*#__PURE__*/_react.default.createElement(_RowHeader.default, null), /*#__PURE__*/_react.default.createElement(_ScrollBar.default, {
+    axis: "x"
+  }), /*#__PURE__*/_react.default.createElement(_ScrollBar.default, {
+    axis: "y"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: refs.cellArea,
+    className: "fortune-cell-area",
+    onMouseDown: cellAreaMouseDown,
+    onDoubleClick: cellAreaDoubleClick,
+    onContextMenu: cellAreaContextMenu,
+    style: {
+      width: context.cellmainWidth,
+      height: context.cellmainHeight,
+      cursor: context.luckysheet_cell_selected_extend ? "crosshair" : "default"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-formula-functionrange"
+  }), context.formulaRangeSelect && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy fortune-formula-functionrange-select",
+    style: context.formulaRangeSelect
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy-top fortune-copy"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy-right fortune-copy"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy-bottom fortune-copy"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy-left fortune-copy"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-selection-copy-hc"
+  }))), context.formulaRangeHighlight.map(function (v) {
+    var rangeIndex = v.rangeIndex,
+      backgroundColor = v.backgroundColor;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: rangeIndex,
+      id: "fortune-formula-functionrange-highlight",
+      className: "fortune-selection-highlight fortune-formula-functionrange-highlight",
+      style: _lodash.default.omit(v, "backgroundColor")
+    }, ["top", "right", "bottom", "left"].map(function (d) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: d,
+        "data-type": d,
+        className: "fortune-selection-copy-".concat(d, " fortune-copy"),
+        style: {
+          backgroundColor: backgroundColor
+        }
+      });
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-hc",
+      style: {
+        backgroundColor: backgroundColor
+      }
+    }), ["lt", "rt", "lb", "rb"].map(function (d) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: d,
+        "data-type": d,
+        className: "fortune-selection-highlight-".concat(d, " luckysheet-highlight"),
+        style: {
+          backgroundColor: backgroundColor
+        }
+      });
+    }));
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-row-count-show luckysheet-count-show",
+    id: "luckysheet-row-count-show"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-column-count-show luckysheet-count-show",
+    id: "luckysheet-column-count-show"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-change-size-line",
+    hidden: !context.luckysheet_cols_change_size && !context.luckysheet_rows_change_size && !context.luckysheet_cols_freeze_drag && !context.luckysheet_rows_freeze_drag
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-freeze-drag-line",
+    hidden: !context.luckysheet_cols_freeze_drag && !context.luckysheet_rows_freeze_drag
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cell-selected-focus",
+    style: ((_d = (_c = context.luckysheet_select_save) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0 ? function () {
+      var _a, _b;
+      var selection = _lodash.default.last(context.luckysheet_select_save);
+      return _lodash.default.assign({
+        left: selection.left,
+        top: selection.top,
+        width: selection.width ? selection.width - 1.8 : selection.width,
+        height: selection.height ? selection.height - 1.8 : selection.height,
+        display: "block"
+      }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, selection.row_focus || 0, selection.row_focus || 0, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]), (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, selection.column_focus || 0, selection.column_focus || 0, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]));
+    }() : {},
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }), ((_f = (_e = context.luckysheet_selection_range) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 && (/*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-selection-copy"
+  }, context.luckysheet_selection_range.map(function (range) {
+    var r1 = range.row[0];
+    var r2 = range.row[1];
+    var c1 = range.column[0];
+    var c2 = range.column[1];
+    var row = context.visibledatarow[r2];
+    var row_pre = r1 - 1 === -1 ? 0 : context.visibledatarow[r1 - 1];
+    var col = context.visibledatacolumn[c2];
+    var col_pre = c1 - 1 === -1 ? 0 : context.visibledatacolumn[c1 - 1];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy",
+      key: "".concat(r1, "-").concat(r2, "-").concat(c1, "-").concat(c2),
+      style: {
+        left: col_pre,
+        width: col - col_pre - 1,
+        top: row_pre,
+        height: row - row_pre - 1
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-top fortune-copy"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-right fortune-copy"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-bottom fortune-copy"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-left fortune-copy"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-selection-copy-hc"
+    }));
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-chart-rangeShow"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-cell-selected-extend"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-cell-selected-move",
+    id: "fortune-cell-selected-move",
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }), ((_h = (_g = context.luckysheet_select_save) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 0 && (/*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-cell-selected-boxs"
+  }, context.luckysheet_select_save.map(function (selection, index) {
+    var _a, _b;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      id: "luckysheet-cell-selected",
+      className: "luckysheet-cell-selected",
+      style: _lodash.default.assign({
+        left: selection.left_move,
+        top: selection.top_move,
+        width: selection.width_move ? selection.width_move - 1.8 : selection.width_move,
+        height: selection.height_move ? selection.height_move - 1.8 : selection.height_move,
+        display: "block"
+      }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, selection.row[0], selection.row[1], (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]), (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, selection.column[0], selection.column[1], (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId])),
+      onMouseDown: function onMouseDown(e) {
+        e.stopPropagation();
+        var nativeEvent = e.nativeEvent;
+        setContext(function (draftCtx) {
+          (0, _fortuneCore.onCellsMoveStart)(draftCtx, refs.globalCache, nativeEvent, refs.scrollbarX.current, refs.scrollbarY.current, containerRef.current);
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-inner-border"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-fillhandle",
+      onMouseDown: function onMouseDown(e) {
+        var nativeEvent = e.nativeEvent;
+        setContext(function (draftContext) {
+          (0, _fortuneCore.createDropCellRange)(draftContext, nativeEvent, containerRef.current);
+        });
+        e.stopPropagation();
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-inner-border"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-draghandle-top luckysheet-cs-draghandle",
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-draghandle-bottom luckysheet-cs-draghandle",
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-draghandle-left luckysheet-cs-draghandle",
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-draghandle-right luckysheet-cs-draghandle",
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      }
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-touchhandle luckysheet-cs-touchhandle-lt"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-touchhandle-btn"
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-touchhandle luckysheet-cs-touchhandle-rb"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-cs-touchhandle-btn"
+    })));
+  }))), ((_k = (_j = context.presences) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : 0) > 0 && context.presences.map(function (presence, index) {
+    if (presence.sheetId !== context.currentSheetId) {
+      return null;
+    }
+    var _a = presence.selection,
+      r = _a.r,
+      c = _a.c,
+      color = presence.color;
+    var row_pre = r - 1 === -1 ? 0 : context.visibledatarow[r - 1];
+    var col_pre = c - 1 === -1 ? 0 : context.visibledatacolumn[c - 1];
+    var row = context.visibledatarow[r];
+    var col = context.visibledatacolumn[c];
+    var width = col - col_pre - 1;
+    var height = row - row_pre - 1;
+    var usernameStyle = {
+      maxWidth: width + 1,
+      backgroundColor: color
+    };
+    _lodash.default.set(usernameStyle, r === 0 ? "top" : "bottom", height);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: (presence === null || presence === void 0 ? void 0 : presence.userId) || index,
+      className: "fortune-presence-selection",
+      style: {
+        left: col_pre,
+        top: row_pre - 2,
+        width: width,
+        height: height,
+        borderColor: color,
+        borderWidth: 1
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-presence-username",
+      style: usernameStyle
+    }, presence.username));
+  }), ((_l = context.linkCard) === null || _l === void 0 ? void 0 : _l.sheetId) === context.currentSheetId && (/*#__PURE__*/_react.default.createElement(_LinkEidtCard.default, __assign({}, context.linkCard))), ((_m = context.rangeDialog) === null || _m === void 0 ? void 0 : _m.show) && /*#__PURE__*/_react.default.createElement(_RangeDialog.default, null), /*#__PURE__*/_react.default.createElement(_FilterOption.default, {
+    getContainer: function getContainer() {
+      return containerRef.current;
+    }
+  }), /*#__PURE__*/_react.default.createElement(_InputBox.default, null), /*#__PURE__*/_react.default.createElement(_NotationBoxes.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-multipleRange-show"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-dynamicArray-hightShow"
+  }), /*#__PURE__*/_react.default.createElement(_ImgBoxs.default, null), /*#__PURE__*/_react.default.createElement(_iFrameBoxs.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-dataVerification-dropdown-btn",
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        ctx.dataVerificationDropDownList = true;
+        dataVerificationHintBoxRef.current.style.display = "none";
+      });
+    },
+    tabIndex: 0,
+    style: {
+      display: "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "caret-down-fill",
+    width: 16,
+    height: 16
+  })), context.dataVerificationDropDownList && (context.dataVerification.dataRegulation.value1 !== "" || context.dataVerification.dataRegulation.value2 !== "") && (/*#__PURE__*/_react.default.createElement(_DropdownList.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-dataVerification-showHintBox",
+    ref: dataVerificationHintBoxRef
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cell-copy"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-grdblkflowpush"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-cell-flow_0",
+    className: "luckysheet-cell-flow luckysheetsheetchange"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cell-flow-clip"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-grdblkpush"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheetcoltable_0",
+    className: "luckysheet-cell-flow-col"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-sheettable_0",
+    className: "luckysheet-cell-sheettable",
+    style: {
+      height: context.rh_height,
+      width: context.ch_width
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-bottom-controll-row",
+    className: "luckysheet-bottom-controll-row",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
+    onKeyUp: function onKeyUp(e) {
+      return e.stopPropagation();
+    },
+    onKeyPress: function onKeyPress(e) {
+      return e.stopPropagation();
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    onDoubleClick: function onDoubleClick(e) {
+      return e.stopPropagation();
+    },
+    tabIndex: 0,
+    style: {
+      left: context.scrollLeft,
+      display: context.allowEdit ? "block" : "none"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-add-row-button",
+    onClick: function onClick() {
+      handleBottomAddRow();
+    },
+    tabIndex: 0
+  }, info.add), /*#__PURE__*/_react.default.createElement("input", {
+    ref: bottomAddRowInputRef,
+    type: "text",
+    style: {
+      width: 50
+    },
+    placeholder: context.addDefaultRows.toString()
+  }), " ", /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: 14
+    }
+  }, info.row), " ", /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: 14,
+      color: "#9c9c9c"
+    }
+  }, "(", info.addLast, ")"), /*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-add-row-button",
+    onClick: function onClick() {
+      setContext(function (ctx) {
+        ctx.scrollTop = 0;
+      });
+    },
+    tabIndex: 0
+  }, info.backTop))))))));
+};
+var _default = exports.default = SheetOverlay;

package/lib/components/SheetTab/SheetItem.d.ts

@@ -0,0 +1,8 @@
+import { Sheet } from "@fileverse-dev/fortune-core";
+import React from "react";
+type Props = {
+    sheet: Sheet;
+    isDropPlaceholder?: boolean;
+};
+declare const SheetItem: React.FC<Props>;
+export default SheetItem;