@fileverse-dev/fortune-react 1.0.5 → 1.0.6

package/lib/components/SheetOverlay/InputBox.js

@@ -0,0 +1,314 @@
+"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 _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _ContentEditable = _interopRequireDefault(require("./ContentEditable"));
+var _FormulaSearch = _interopRequireDefault(require("./FormulaSearch"));
+var _FormulaHint = _interopRequireDefault(require("./FormulaHint"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
+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 InputBox = function InputBox() {
+  var _a, _b;
+  var _c = (0, _react.useContext)(_context.default),
+    context = _c.context,
+    setContext = _c.setContext,
+    refs = _c.refs;
+  var inputRef = (0, _react.useRef)(null);
+  var lastKeyDownEventRef = (0, _react.useRef)(null);
+  var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
+  var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
+  var _d = (0, _react.useState)(false),
+    isHidenRC = _d[0],
+    setIsHidenRC = _d[1];
+  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
+  var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
+  var preText = (0, _react.useRef)("");
+  var inputBoxStyle = (0, _react.useMemo)(function () {
+    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
+      var flowdata = (0, _fortuneCore.getFlowdata)(context);
+      if (!flowdata) return {};
+      return (0, _fortuneCore.getStyleByCell)(context, flowdata, firstSelection.row_focus, firstSelection.column_focus);
+    }
+    return {};
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, firstSelection]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    if (!context.allowEdit) {
+      setContext(function (ctx) {
+        var flowdata = (0, _fortuneCore.getFlowdata)(ctx);
+        if (!_lodash.default.isNil(flowdata) && ctx.forceFormulaRef) {
+          var value = (0, _fortuneCore.getCellValue)(row_index, col_index, flowdata, "f");
+          (0, _fortuneCore.createRangeHightlight)(ctx, value);
+        }
+      });
+    }
+    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
+      if (refs.globalCache.doNotUpdateCell) {
+        delete refs.globalCache.doNotUpdateCell;
+        return;
+      }
+      if (_lodash.default.isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
+        return;
+      }
+      var flowdata = (0, _fortuneCore.getFlowdata)(context);
+      var cell = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row_index]) === null || _a === void 0 ? void 0 : _a[col_index];
+      var value_1 = "";
+      if (cell && !refs.globalCache.overwriteCell) {
+        if ((0, _fortuneCore.isInlineStringCell)(cell)) {
+          value_1 = (0, _fortuneCore.getInlineStringHTML)(row_index, col_index, flowdata);
+        } else if (cell.f) {
+          value_1 = (0, _fortuneCore.getCellValue)(row_index, col_index, flowdata, "f");
+          setContext(function (ctx) {
+            (0, _fortuneCore.createRangeHightlight)(ctx, value_1);
+          });
+        } else {
+          value_1 = (0, _fortuneCore.valueShowEs)(row_index, col_index, flowdata);
+          if (Number(cell.qp) === 1) {
+            value_1 = value_1 ? "".concat(value_1) : value_1;
+          }
+        }
+      }
+      refs.globalCache.overwriteCell = false;
+      if (!refs.globalCache.ignoreWriteCell) inputRef.current.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value_1));
+      refs.globalCache.ignoreWriteCell = false;
+      if (!refs.globalCache.doNotFocus) {
+        setTimeout(function () {
+          (0, _fortuneCore.moveToEnd)(inputRef.current);
+        });
+      }
+      delete refs.globalCache.doNotFocus;
+    }
+  }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, firstSelection]);
+  (0, _react.useEffect)(function () {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      if (inputRef.current) {
+        inputRef.current.innerHTML = "";
+      }
+    }
+  }, [context.luckysheetCellUpdate]);
+  (0, _react.useEffect)(function () {
+    setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
+  }, [context.luckysheet_select_save]);
+  var getActiveFormula = (0, _react.useCallback)(function () {
+    return document.querySelector(".luckysheet-formula-search-item-active");
+  }, []);
+  var insertSelectedFormula = (0, _react.useCallback)(function (formulaName) {
+    var _a;
+    var textEditor = document.getElementById("luckysheet-rich-text-editor");
+    if (!textEditor) return;
+    textEditor.focus();
+    var selection = window.getSelection();
+    var range = (selection === null || selection === void 0 ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+    if (!selection || !range || !textEditor.contains(range.startContainer)) {
+      range = document.createRange();
+      range.selectNodeContents(textEditor);
+      range.collapse(false);
+      selection = window.getSelection();
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+    }
+    var searchTxt = ((_a = (0, _fortuneCore.getrangeseleciton)()) === null || _a === void 0 ? void 0 : _a.textContent) || "";
+    var deleteCount = searchTxt === "=" ? 0 : searchTxt.length;
+    if (deleteCount > 0 && range.startContainer.nodeType === Node.TEXT_NODE && textEditor.contains(range.startContainer)) {
+      var startOffset = Math.max(range.startOffset - deleteCount, 0);
+      var endOffset = range.startOffset;
+      range.setStart(range.startContainer, startOffset);
+      range.setEnd(range.startContainer, endOffset);
+      range.deleteContents();
+    }
+    textEditor.querySelectorAll(".luckysheet-formula-text-func, .luckysheet-formula-text-lpar").forEach(function (el) {
+      return el.remove();
+    });
+    var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
+    var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
+    if (range && parNode && funcNode) {
+      range.insertNode(funcNode);
+      range.collapse(false);
+      range.insertNode(parNode);
+      range.collapse(false);
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+    }
+    setContext(function (draftCtx) {
+      draftCtx.functionCandidates = [];
+      draftCtx.defaultCandidates = [];
+      draftCtx.functionHint = formulaName;
+    });
+  }, [setContext]);
+  var clearSearchItemActiveClass = (0, _react.useCallback)(function () {
+    var activeFormula = getActiveFormula();
+    if (activeFormula) {
+      activeFormula.classList.remove("luckysheet-formula-search-item-active");
+    }
+  }, [getActiveFormula]);
+  var selectActiveFormula = (0, _react.useCallback)(function (e) {
+    var _a, _b;
+    var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveFormula, insertSelectedFormula]);
+  var selectActiveFormulaOnClick = (0, _react.useCallback)(function (e) {
+    var _a, _b;
+    if (e.target.className.includes("sign-fortune")) return;
+    preText.current = inputRef.current.innerText;
+    var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveFormula, insertSelectedFormula]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
+    preText.current = inputRef.current.innerText;
+    if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.cancelNormalSelected)(draftCtx);
+        (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
+      });
+      e.preventDefault();
+    } else if (e.key === "Enter" && context.luckysheetCellUpdate.length > 0) {
+      if (e.altKey || e.metaKey) {
+        document.execCommand("insertHTML", false, "\n ");
+        document.execCommand("delete", false);
+        e.stopPropagation();
+      } else selectActiveFormula(e);
+    } else if (e.key === "Tab" && context.luckysheetCellUpdate.length > 0) {
+      selectActiveFormula(e);
+      e.preventDefault();
+    } else if (e.key === "F4" && context.luckysheetCellUpdate.length > 0) {
+      e.preventDefault();
+    } else if (e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0) {
+      if (document.getElementById("luckysheet-formula-search-c")) {
+        var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
+        var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
+        var previousItem = activeItem ? activeItem.previousElementSibling : null;
+        if (!previousItem) {
+          previousItem = (formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item:last-child")) || null;
+        }
+        clearSearchItemActiveClass();
+        if (previousItem) {
+          previousItem.classList.add("luckysheet-formula-search-item-active");
+        }
+      }
+      e.preventDefault();
+    } else if (e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0) {
+      if (document.getElementById("luckysheet-formula-search-c")) {
+        var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
+        var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
+        var nextItem = activeItem ? activeItem.nextElementSibling : null;
+        if (!nextItem) {
+          nextItem = (formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item:first-child")) || null;
+        }
+        clearSearchItemActiveClass();
+        if (nextItem) {
+          nextItem.classList.add("luckysheet-formula-search-item-active");
+        }
+      }
+      e.preventDefault();
+    }
+  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
+  var onChange = (0, _react.useCallback)(function (__, isBlur) {
+    var e = lastKeyDownEventRef.current;
+    if (!e) return;
+    var kcode = e.keyCode;
+    if (!kcode) return;
+    if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
+      setContext(function (draftCtx) {
+        if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || (0, _fortuneCore.israngeseleciton)(draftCtx)) && isBlur) return;
+        if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) {
+          return;
+        }
+        (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preText.current);
+      });
+    }
+  }, [refs.cellInput, refs.fxInput, setContext]);
+  var onPaste = (0, _react.useCallback)(function (e) {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      e.preventDefault();
+    }
+  }, [context.luckysheetCellUpdate]);
+  var cfg = context.config || {};
+  var rowReadOnly = cfg.rowReadOnly || {};
+  var colReadOnly = cfg.colReadOnly || {};
+  var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-input-box",
+    style: firstSelection && !((_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show) ? {
+      left: firstSelection.left,
+      top: firstSelection.top,
+      zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
+      display: "block"
+    } : {
+      left: -10000,
+      top: -10000,
+      display: "block"
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-input-box-inner",
+    style: firstSelection ? __assign({
+      minWidth: firstSelection.width,
+      minHeight: firstSelection.height
+    }, inputBoxStyle) : {}
+  }, /*#__PURE__*/_react.default.createElement(_ContentEditable.default, {
+    innerRef: function innerRef(e) {
+      inputRef.current = e;
+      refs.cellInput.current = e;
+    },
+    className: "luckysheet-cell-input",
+    id: "luckysheet-rich-text-editor",
+    style: {
+      transform: "scale(".concat(context.zoomRatio, ")"),
+      transformOrigin: "left top",
+      width: "".concat(100 / context.zoomRatio, "%"),
+      height: "".concat(100 / context.zoomRatio, "%")
+    },
+    "aria-autocomplete": "list",
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    allowEdit: edit ? !isHidenRC : edit
+  })), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0) && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
+    onMouseMove: function onMouseMove(e) {
+      if (document.getElementById("luckysheet-formula-search-c")) {
+        var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
+        if (!hoveredItem) return;
+        clearSearchItemActiveClass();
+        hoveredItem.classList.add("luckysheet-formula-search-item-active");
+      }
+      e.preventDefault();
+    },
+    onMouseDown: function onMouseDown(e) {
+      selectActiveFormulaOnClick(e);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_FormulaHint.default, null))));
+};
+var _default = exports.default = InputBox;

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const RowHeader: React.FC;
+export default RowHeader;

package/lib/components/SheetOverlay/RowHeader.js

@@ -0,0 +1,196 @@
+"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 _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var RowHeader = function RowHeader() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    settings = _b.settings,
+    refs = _b.refs;
+  var rowChangeSizeRef = (0, _react.useRef)(null);
+  var containerRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)({
+      row: -1,
+      row_pre: -1,
+      row_index: -1
+    }),
+    hoverLocation = _c[0],
+    setHoverLocation = _c[1];
+  var _d = (0, _react.useState)(false),
+    hoverInFreeze = _d[0],
+    setHoverInFreeze = _d[1];
+  var _e = (0, _react.useState)([]),
+    selectedLocation = _e[0],
+    setSelectedLocation = _e[1];
+  var sheetIndex = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
+  var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
+  var freezeHandleTop = (0, _react.useMemo)(function () {
+    var _a, _b, _c, _d, _e, _f;
+    if (((_a = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _a === void 0 ? void 0 : _a.type) === "row" || ((_b = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _b === void 0 ? void 0 : _b.type) === "rangeRow" || ((_c = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _c === void 0 ? void 0 : _c.type) === "rangeBoth" || ((_d = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _d === void 0 ? void 0 : _d.type) === "both") {
+      return (0, _fortuneCore.rowLocationByIndex)(((_f = (_e = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _e === void 0 ? void 0 : _e.range) === null || _f === void 0 ? void 0 : _f.row_focus) || 0, context.visibledatarow)[1] + context.scrollTop;
+    }
+    return context.scrollTop;
+  }, [context.visibledatarow, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollTop]);
+  var onMouseMove = (0, _react.useCallback)(function (e) {
+    var _a;
+    if (context.luckysheet_rows_change_size) {
+      return;
+    }
+    var mouseY = e.pageY - containerRef.current.getBoundingClientRect().top - window.scrollY;
+    var _y = mouseY + containerRef.current.scrollTop;
+    var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId];
+    var _b = (0, _fortuneCore.fixPositionOnFrozenCells)(freeze, 0, _y, 0, mouseY),
+      y = _b.y,
+      inHorizontalFreeze = _b.inHorizontalFreeze;
+    var row_location = (0, _fortuneCore.rowLocation)(y, context.visibledatarow);
+    var row_pre = row_location[0],
+      row = row_location[1],
+      row_index = row_location[2];
+    if (row_pre !== hoverLocation.row_pre || row !== hoverLocation.row) {
+      setHoverLocation({
+        row_pre: row_pre,
+        row: row,
+        row_index: row_index
+      });
+      setHoverInFreeze(inHorizontalFreeze);
+    }
+  }, [context.luckysheet_rows_change_size, context.visibledatarow, hoverLocation.row, hoverLocation.row_pre, refs.globalCache.freezen, context.currentSheetId]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleRowHeaderMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+    });
+  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    if (context.luckysheet_rows_change_size) {
+      return;
+    }
+    setHoverLocation({
+      row: -1,
+      row_pre: -1,
+      row_index: -1
+    });
+  }, [context.luckysheet_rows_change_size]);
+  var onRowSizeHandleMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleRowSizeHandleMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  var onRowFreezeHandleMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleRowFreezeHandleMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  var onContextMenu = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleContextMenu)(draftCtx, settings, nativeEvent, refs.workbookContainer.current, refs.cellArea.current, "rowHeader");
+    });
+  }, [refs.workbookContainer, setContext, settings, refs.cellArea]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    var s = context.luckysheet_select_save || [];
+    if (_lodash.default.isNil(s)) return;
+    setSelectedLocation([]);
+    if ((_a = s[0]) === null || _a === void 0 ? void 0 : _a.column_select) return;
+    var rowTitleMap = {};
+    for (var i = 0; i < s.length; i += 1) {
+      var r1 = s[i].row[0];
+      var r2 = s[i].row[1];
+      rowTitleMap = (0, _fortuneCore.selectTitlesMap)(rowTitleMap, r1, r2);
+    }
+    var rowTitleRange = (0, _fortuneCore.selectTitlesRange)(rowTitleMap);
+    var selects = [];
+    for (var i = 0; i < rowTitleRange.length; i += 1) {
+      var r1 = rowTitleRange[i][0];
+      var r2 = rowTitleRange[i][rowTitleRange[i].length - 1];
+      var row = (0, _fortuneCore.rowLocationByIndex)(r2, context.visibledatarow)[1];
+      var row_pre = (0, _fortuneCore.rowLocationByIndex)(r1, context.visibledatarow)[0];
+      if (_lodash.default.isNumber(row_pre) && _lodash.default.isNumber(row)) {
+        selects.push({
+          row: row,
+          row_pre: row_pre,
+          r1: r1,
+          r2: r2
+        });
+      }
+    }
+    setSelectedLocation(selects);
+  }, [context.luckysheet_select_save, context.visibledatarow]);
+  (0, _react.useEffect)(function () {
+    containerRef.current.scrollTop = context.scrollTop;
+  }, [context.scrollTop]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "fortune-row-header",
+    style: {
+      width: context.rowHeaderWidth - 1.5,
+      height: context.cellmainHeight
+    },
+    onMouseMove: onMouseMove,
+    onMouseDown: onMouseDown,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: onContextMenu
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-rows-freeze-handle",
+    onMouseDown: onRowFreezeHandleMouseDown,
+    style: {
+      top: freezeHandleTop
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-rows-change-size",
+    ref: rowChangeSizeRef,
+    onMouseDown: onRowSizeHandleMouseDown,
+    style: {
+      top: hoverLocation.row - 3 + (hoverInFreeze ? context.scrollTop : 0),
+      opacity: context.luckysheet_rows_change_size ? 1 : 0
+    }
+  }), !context.luckysheet_rows_change_size && hoverLocation.row_index >= 0 ? (/*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-row-header-hover",
+    style: _lodash.default.assign({
+      top: hoverLocation.row_pre,
+      height: hoverLocation.row - hoverLocation.row_pre - 1,
+      display: "block"
+    }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, hoverLocation.row_index, hoverLocation.row_index, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]))
+  })) : null, selectedLocation.map(function (_a, i) {
+    var _b;
+    var row = _a.row,
+      row_pre = _a.row_pre,
+      r1 = _a.r1,
+      r2 = _a.r2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "fortune-row-header-selected",
+      key: i,
+      style: _lodash.default.assign({
+        top: row_pre,
+        height: row - row_pre - 1,
+        display: "block",
+        backgroundColor: "#EFC703",
+        mixBlendMode: "multiply"
+      }, (0, _fortuneCore.fixRowStyleOverflowInFreeze)(context, r1, r2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
+    });
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: context.rh_height,
+      width: 1
+    },
+    id: "luckysheetrowHeader_0",
+    className: "luckysheetsheetchange"
+  }));
+};
+var _default = exports.default = RowHeader;

package/lib/components/SheetOverlay/ScrollBar/index.css

@@ -0,0 +1,40 @@
+.luckysheet-scrollbar-ltr {
+  position: absolute;
+  overflow: hidden;
+  z-index: 1003;
+}
+
+.luckysheet-scrollbar-ltr div {
+  height: 1px;
+  width: 1px;
+}
+
+.luckysheet-scrollbar-x {
+  bottom: 0px;
+  overflow-x: scroll;
+}
+
+.luckysheet-scrollbar-y {
+  right: 0px;
+  top: 0px;
+  overflow-y: scroll;
+}
+
+.luckysheet-scrollbar-ltr::-webkit-scrollbar {
+  background-color: transparent;
+  width: 8px;
+  height: 8px;
+}
+
+.luckysheet-scrollbar-ltr::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.luckysheet-scrollbar-ltr::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+}
+
+.luckysheet-scrollbar-ltr::-webkit-scrollbar-button {
+  display: none;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import "./index.css";
+type Props = {
+    axis: "x" | "y";
+};
+declare const ScrollBar: React.FC<Props>;
+export default ScrollBar;

package/lib/components/SheetOverlay/ScrollBar/index.js

@@ -0,0 +1,56 @@
+"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"));
+var _context = _interopRequireDefault(require("../../../context"));
+require("./index.css");
+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 ScrollBar = function ScrollBar(_a) {
+  var axis = _a.axis;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    refs = _b.refs,
+    setContext = _b.setContext;
+  (0, _react.useEffect)(function () {
+    if (axis === "x") {
+      refs.scrollbarX.current.scrollLeft = context.scrollLeft;
+    } else {
+      refs.scrollbarY.current.scrollTop = context.scrollTop;
+    }
+  }, [axis === "x" ? context.scrollLeft : context.scrollTop]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: axis === "x" ? refs.scrollbarX : refs.scrollbarY,
+    style: axis === "x" ? {
+      left: context.rowHeaderWidth,
+      width: "calc(100% - ".concat(context.rowHeaderWidth, "px)")
+    } : {
+      height: "100%"
+    },
+    className: "luckysheet-scrollbars luckysheet-scrollbar-ltr luckysheet-scrollbar-".concat(axis),
+    onScroll: function onScroll() {
+      if (axis === "x") {
+        setContext(function (draftCtx) {
+          draftCtx.scrollLeft = refs.scrollbarX.current.scrollLeft;
+        });
+      } else {
+        setContext(function (draftCtx) {
+          draftCtx.scrollTop = refs.scrollbarY.current.scrollTop;
+        });
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: axis === "x" ? {
+      width: context.ch_width,
+      height: 10
+    } : {
+      width: 10,
+      height: context.rh_height
+    }
+  }));
+};
+var _default = exports.default = ScrollBar;