@fileverse-dev/fortune-react 1.0.4 → 1.0.6

package/lib/components/Workbook/index.js

@@ -0,0 +1,595 @@
+"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"));
+require("./index.css");
+var _immer = _interopRequireWildcard(require("immer"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _Sheet = _interopRequireDefault(require("../Sheet"));
+var _context = _interopRequireDefault(require("../../context"));
+var _Toolbar = _interopRequireDefault(require("../Toolbar"));
+var _FxEditor = _interopRequireDefault(require("../FxEditor"));
+var _SheetTab = _interopRequireDefault(require("../SheetTab"));
+var _ContextMenu = _interopRequireDefault(require("../ContextMenu"));
+var _SVGDefines = _interopRequireDefault(require("../SVGDefines"));
+var _SheetTab2 = _interopRequireDefault(require("../ContextMenu/SheetTab"));
+var _api = require("./api");
+var _modal = require("../../context/modal");
+var _FilterMenu = _interopRequireDefault(require("../ContextMenu/FilterMenu"));
+var _SheetList = _interopRequireDefault(require("../SheetList"));
+var _DunePreview = _interopRequireDefault(require("../DunePreview/DunePreview"));
+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 __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+(0, _immer.enablePatches)();
+var triggerGroupValuesRefresh = function triggerGroupValuesRefresh(ctx) {
+  if (ctx.groupValuesRefreshData.length > 0) {
+    (0, _fortuneCore.groupValuesRefresh)(ctx);
+  }
+};
+var concatProducer = function concatProducer() {
+  var producers = [];
+  for (var _i = 0; _i < arguments.length; _i++) {
+    producers[_i] = arguments[_i];
+  }
+  return function (ctx) {
+    producers.forEach(function (producer) {
+      producer(ctx);
+    });
+  };
+};
+var Workbook = /*#__PURE__*/_react.default.forwardRef(function (_a, ref) {
+  var _b;
+  var onChange = _a.onChange,
+    onOp = _a.onOp,
+    originalData = _a.data,
+    props = __rest(_a, ["onChange", "onOp", "data"]);
+  var globalCache = (0, _react.useRef)({
+    undoList: [],
+    redoList: []
+  });
+  var cellInput = (0, _react.useRef)(null);
+  var fxInput = (0, _react.useRef)(null);
+  var canvas = (0, _react.useRef)(null);
+  var scrollbarX = (0, _react.useRef)(null);
+  var scrollbarY = (0, _react.useRef)(null);
+  var cellArea = (0, _react.useRef)(null);
+  var workbookContainer = (0, _react.useRef)(null);
+  var refs = (0, _react.useMemo)(function () {
+    return {
+      globalCache: globalCache.current,
+      cellInput: cellInput,
+      fxInput: fxInput,
+      canvas: canvas,
+      scrollbarX: scrollbarX,
+      scrollbarY: scrollbarY,
+      cellArea: cellArea,
+      workbookContainer: workbookContainer
+    };
+  }, []);
+  var _c = (0, _react.useState)((0, _fortuneCore.defaultContext)(refs)),
+    context = _c[0],
+    setContext = _c[1];
+  var formula = (0, _fortuneCore.locale)(context).formula;
+  var _d = (0, _react.useState)(null),
+    moreToolbarItems = _d[0],
+    setMoreToolbarItems = _d[1];
+  var _e = (0, _react.useState)({
+      numberC: 0,
+      count: 0,
+      sum: 0,
+      max: 0,
+      min: 0,
+      average: ""
+    }),
+    calInfo = _e[0],
+    setCalInfo = _e[1];
+  var mergedSettings = (0, _react.useMemo)(function () {
+    return _lodash.default.assign(_lodash.default.cloneDeep(_fortuneCore.defaultSettings), props);
+  }, __spreadArray([], _lodash.default.values(props), true));
+  (0, _react.useEffect)(function () {
+    var selection = context.luckysheet_select_save;
+    var lang = props.lang;
+    if (selection) {
+      var re = (0, _fortuneCore.calcSelectionInfo)(context, lang);
+      setCalInfo(re);
+    }
+  }, [context.luckysheet_select_save]);
+  var initSheetData = (0, _react.useCallback)(function (draftCtx, newData, index) {
+    var _a, _b;
+    var celldata = newData.celldata,
+      row = newData.row,
+      column = newData.column;
+    var lastRow = _lodash.default.maxBy(celldata, "r");
+    var lastCol = _lodash.default.maxBy(celldata, "c");
+    var lastRowNum = ((_a = lastRow === null || lastRow === void 0 ? void 0 : lastRow.r) !== null && _a !== void 0 ? _a : 0) + 1;
+    var lastColNum = ((_b = lastCol === null || lastCol === void 0 ? void 0 : lastCol.c) !== null && _b !== void 0 ? _b : 0) + 1;
+    if (row != null && column != null && row > 0 && column > 0) {
+      lastRowNum = Math.max(lastRowNum, row);
+      lastColNum = Math.max(lastColNum, column);
+    } else {
+      lastRowNum = Math.max(lastRowNum, draftCtx.defaultrowNum);
+      lastColNum = Math.max(lastColNum, draftCtx.defaultcolumnNum);
+    }
+    if (lastRowNum && lastColNum) {
+      var expandedData_1 = _lodash.default.times(lastRowNum, function () {
+        return _lodash.default.times(lastColNum, function () {
+          return null;
+        });
+      });
+      celldata === null || celldata === void 0 ? void 0 : celldata.forEach(function (d) {
+        expandedData_1[d.r][d.c] = d.v;
+      });
+      draftCtx.luckysheetfile = (0, _immer.default)(draftCtx.luckysheetfile, function (d) {
+        d[index].data = expandedData_1;
+        delete d[index].celldata;
+        return d;
+      });
+      return expandedData_1;
+    }
+    return null;
+  }, []);
+  var emitOp = (0, _react.useCallback)(function (ctx, patches, options, undo) {
+    if (undo === void 0) {
+      undo = false;
+    }
+    if (onOp) {
+      onOp((0, _fortuneCore.patchToOp)(ctx, patches, options, undo));
+    }
+  }, [onOp]);
+  function reduceUndoList(ctx, ctxBefore) {
+    var sheetsId = ctx.luckysheetfile.map(function (sheet) {
+      return sheet.id;
+    });
+    var sheetDeletedByMe = globalCache.current.undoList.filter(function (undo) {
+      var _a;
+      return (_a = undo.options) === null || _a === void 0 ? void 0 : _a.deleteSheetOp;
+    }).map(function (item) {
+      var _a, _b;
+      return (_b = (_a = item.options) === null || _a === void 0 ? void 0 : _a.deleteSheetOp) === null || _b === void 0 ? void 0 : _b.id;
+    });
+    globalCache.current.undoList = globalCache.current.undoList.filter(function (undo) {
+      var _a, _b, _c, _d;
+      return ((_a = undo.options) === null || _a === void 0 ? void 0 : _a.deleteSheetOp) || ((_b = undo.options) === null || _b === void 0 ? void 0 : _b.id) === undefined || _lodash.default.indexOf(sheetsId, (_c = undo.options) === null || _c === void 0 ? void 0 : _c.id) !== -1 || _lodash.default.indexOf(sheetDeletedByMe, (_d = undo.options) === null || _d === void 0 ? void 0 : _d.id) !== -1;
+    });
+    if (ctxBefore.luckysheetfile.length > ctx.luckysheetfile.length) {
+      var sheetDeleted = ctxBefore.luckysheetfile.filter(function (oneSheet) {
+        return _lodash.default.indexOf(ctx.luckysheetfile.map(function (item) {
+          return item.id;
+        }), oneSheet.id) === -1;
+      }).map(function (item) {
+        return (0, _fortuneCore.getSheetIndex)(ctxBefore, item.id);
+      });
+      var deletedIndex_1 = sheetDeleted[0];
+      globalCache.current.undoList = globalCache.current.undoList.map(function (oneStep) {
+        oneStep.patches = oneStep.patches.map(function (onePatch) {
+          if (typeof onePatch.path[1] === "number" && onePatch.path[1] > deletedIndex_1) {
+            onePatch.path[1] -= 1;
+          }
+          return onePatch;
+        });
+        oneStep.inversePatches = oneStep.inversePatches.map(function (onePatch) {
+          if (typeof onePatch.path[1] === "number" && onePatch.path[1] > deletedIndex_1) {
+            onePatch.path[1] -= 1;
+          }
+          return onePatch;
+        });
+        return oneStep;
+      });
+    }
+  }
+  function dataToCelldata(data) {
+    var _a;
+    var cellData = [];
+    for (var row = 0; row < (data === null || data === void 0 ? void 0 : data.length); row += 1) {
+      for (var col = 0; col < ((_a = data[row]) === null || _a === void 0 ? void 0 : _a.length); col += 1) {
+        if (data[row][col] !== null) {
+          cellData.push({
+            r: row,
+            c: col,
+            v: data[row][col]
+          });
+        }
+      }
+    }
+    return cellData;
+  }
+  var setContextWithProduce = (0, _react.useCallback)(function (recipe, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    setContext(function (ctx_) {
+      var _a, _b, _c;
+      var _d = (0, _immer.produceWithPatches)(ctx_, concatProducer(recipe, triggerGroupValuesRefresh)),
+        result = _d[0],
+        patches = _d[1],
+        inversePatches = _d[2];
+      if (patches.length > 0 && !options.noHistory) {
+        if (options.logPatch) {
+          console.info("patch", patches);
+        }
+        var filteredPatches = (0, _fortuneCore.filterPatch)(patches);
+        var filteredInversePatches = (0, _fortuneCore.filterPatch)(inversePatches);
+        if (filteredInversePatches.length > 0) {
+          options.id = ctx_.currentSheetId;
+          if (options.deleteSheetOp) {
+            var target = ctx_.luckysheetfile.filter(function (sheet) {
+              var _a;
+              return sheet.id === ((_a = options.deleteSheetOp) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            if (target) {
+              var index = (0, _fortuneCore.getSheetIndex)(ctx_, options.deleteSheetOp.id);
+              options.deletedSheet = {
+                id: options.deleteSheetOp.id,
+                index: index,
+                value: _lodash.default.cloneDeep(ctx_.luckysheetfile[index])
+              };
+              options.deletedSheet.value.celldata = dataToCelldata(options.deletedSheet.value.data);
+              delete options.deletedSheet.value.data;
+              options.deletedSheet.value.status = 0;
+              filteredInversePatches = [{
+                op: "add",
+                path: ["luckysheetfile", 0],
+                value: options.deletedSheet.value
+              }];
+            }
+          } else if (options.addSheetOp) {
+            options.addSheet = {};
+            options.addSheet.id = result.luckysheetfile[result.luckysheetfile.length - 1].id;
+          }
+          globalCache.current.undoList.push({
+            patches: filteredPatches,
+            inversePatches: filteredInversePatches,
+            options: options
+          });
+          globalCache.current.redoList = [];
+          emitOp(result, filteredPatches, options);
+        }
+      } else {
+        if (((_b = (_a = patches === null || patches === void 0 ? void 0 : patches[0]) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) < ((_c = ctx_ === null || ctx_ === void 0 ? void 0 : ctx_.luckysheetfile) === null || _c === void 0 ? void 0 : _c.length)) {
+          reduceUndoList(result, ctx_);
+        }
+      }
+      return result;
+    });
+  }, [emitOp]);
+  var handleUndo = (0, _react.useCallback)(function () {
+    var history = globalCache.current.undoList.pop();
+    if (history) {
+      setContext(function (ctx_) {
+        var _a, _b, _c, _d, _e;
+        if ((_a = history.options) === null || _a === void 0 ? void 0 : _a.deleteSheetOp) {
+          history.inversePatches[0].path[1] = ctx_.luckysheetfile.length;
+          var order_1 = (_c = (_b = history.options.deletedSheet) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.order;
+          var sheetsRight = ctx_.luckysheetfile.filter(function (sheet) {
+            var _a, _b;
+            return (sheet === null || sheet === void 0 ? void 0 : sheet.order) >= order_1 && sheet.id !== ((_b = (_a = history === null || history === void 0 ? void 0 : history.options) === null || _a === void 0 ? void 0 : _a.deleteSheetOp) === null || _b === void 0 ? void 0 : _b.id);
+          });
+          _lodash.default.forEach(sheetsRight, function (sheet) {
+            history.inversePatches.push({
+              op: "replace",
+              path: ["luckysheetfile", (0, _fortuneCore.getSheetIndex)(ctx_, sheet.id), "order"],
+              value: (sheet === null || sheet === void 0 ? void 0 : sheet.order) + 1
+            });
+          });
+        }
+        var newContext = (0, _immer.applyPatches)(ctx_, history.inversePatches);
+        globalCache.current.redoList.push(history);
+        var inversedOptions = (0, _fortuneCore.inverseRowColOptions)(history.options);
+        if (inversedOptions === null || inversedOptions === void 0 ? void 0 : inversedOptions.insertRowColOp) {
+          inversedOptions.restoreDeletedCells = true;
+        }
+        if ((_d = history.options) === null || _d === void 0 ? void 0 : _d.addSheetOp) {
+          var index = (0, _fortuneCore.getSheetIndex)(ctx_, history.options.addSheet.id);
+          inversedOptions.addSheet = {
+            id: history.options.addSheet.id,
+            index: index,
+            value: _lodash.default.cloneDeep(ctx_.luckysheetfile[index])
+          };
+          inversedOptions.addSheet.value.celldata = dataToCelldata((_e = inversedOptions.addSheet.value) === null || _e === void 0 ? void 0 : _e.data);
+          delete inversedOptions.addSheet.value.data;
+        }
+        emitOp(newContext, history.inversePatches, inversedOptions, true);
+        return newContext;
+      });
+    }
+  }, [emitOp]);
+  var handleRedo = (0, _react.useCallback)(function () {
+    var history = globalCache.current.redoList.pop();
+    if (history) {
+      setContext(function (ctx_) {
+        var newContext = (0, _immer.applyPatches)(ctx_, history.patches);
+        globalCache.current.undoList.push(history);
+        emitOp(newContext, history.patches, history.options);
+        return newContext;
+      });
+    }
+  }, [emitOp]);
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    if (context.luckysheet_select_save != null) {
+      (_b = (_a = mergedSettings.hooks) === null || _a === void 0 ? void 0 : _a.afterSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, context.currentSheetId, context.luckysheet_select_save[0]);
+    }
+  }, [context.currentSheetId, context.luckysheet_select_save, mergedSettings.hooks]);
+  var providerValue = (0, _react.useMemo)(function () {
+    return {
+      context: context,
+      setContext: setContextWithProduce,
+      settings: mergedSettings,
+      handleUndo: handleUndo,
+      handleRedo: handleRedo,
+      refs: refs
+    };
+  }, [context, handleRedo, handleUndo, mergedSettings, refs, setContextWithProduce]);
+  (0, _react.useEffect)(function () {
+    if (!_lodash.default.isEmpty(context.luckysheetfile)) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(context.luckysheetfile);
+    }
+  }, [context.luckysheetfile, onChange]);
+  (0, _react.useEffect)(function () {
+    setContextWithProduce(function (draftCtx) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+      draftCtx.defaultcolumnNum = mergedSettings.column;
+      draftCtx.defaultrowNum = mergedSettings.row;
+      draftCtx.defaultFontSize = mergedSettings.defaultFontSize;
+      if (_lodash.default.isEmpty(draftCtx.luckysheetfile)) {
+        var newData = (0, _immer.default)(originalData, function (draftData) {
+          (0, _fortuneCore.ensureSheetIndex)(draftData, mergedSettings.generateSheetId);
+        });
+        draftCtx.luckysheetfile = newData;
+        newData.forEach(function (newDatum) {
+          var _a;
+          var index = (0, _fortuneCore.getSheetIndex)(draftCtx, newDatum.id);
+          var sheet = (_a = draftCtx.luckysheetfile) === null || _a === void 0 ? void 0 : _a[index];
+          initSheetData(draftCtx, sheet, index);
+        });
+      }
+      if (mergedSettings.devicePixelRatio > 0) {
+        draftCtx.devicePixelRatio = mergedSettings.devicePixelRatio;
+      }
+      draftCtx.lang = mergedSettings.lang;
+      draftCtx.allowEdit = mergedSettings.allowEdit;
+      draftCtx.hooks = mergedSettings.hooks;
+      if (_lodash.default.isEmpty(draftCtx.currentSheetId)) {
+        (0, _fortuneCore.initSheetIndex)(draftCtx);
+      }
+      var sheetIdx = (0, _fortuneCore.getSheetIndex)(draftCtx, draftCtx.currentSheetId);
+      if (sheetIdx == null) {
+        if (((_b = (_a = draftCtx.luckysheetfile) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0) {
+          sheetIdx = 0;
+          draftCtx.currentSheetId = draftCtx.luckysheetfile[0].id;
+        }
+      }
+      if (sheetIdx == null) return;
+      var sheet = (_c = draftCtx.luckysheetfile) === null || _c === void 0 ? void 0 : _c[sheetIdx];
+      if (!sheet) return;
+      var data = sheet.data;
+      if (_lodash.default.isEmpty(data)) {
+        var temp = initSheetData(draftCtx, sheet, sheetIdx);
+        if (!_lodash.default.isNull(temp)) {
+          data = temp;
+        }
+      }
+      if (_lodash.default.isEmpty(draftCtx.luckysheet_select_save) && !_lodash.default.isEmpty(sheet.luckysheet_select_save)) {
+        draftCtx.luckysheet_select_save = sheet.luckysheet_select_save;
+      }
+      if (((_d = draftCtx.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d.length) === 0) {
+        if (((_f = (_e = data === null || data === void 0 ? void 0 : data[0]) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.mc) && !_lodash.default.isNil((_j = (_h = (_g = data === null || data === void 0 ? void 0 : data[0]) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.mc) === null || _j === void 0 ? void 0 : _j.rs) && !_lodash.default.isNil((_m = (_l = (_k = data === null || data === void 0 ? void 0 : data[0]) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.mc) === null || _m === void 0 ? void 0 : _m.cs)) {
+          draftCtx.luckysheet_select_save = [{
+            row: [0, data[0][0].mc.rs - 1],
+            column: [0, data[0][0].mc.cs - 1]
+          }];
+        } else {
+          draftCtx.luckysheet_select_save = [{
+            row: [0, 0],
+            column: [0, 0]
+          }];
+        }
+      }
+      draftCtx.config = _lodash.default.isNil(sheet.config) ? {} : sheet.config;
+      draftCtx.insertedImgs = sheet.images;
+      draftCtx.insertedIframes = sheet.iframes;
+      draftCtx.currency = mergedSettings.currency || "¥";
+      draftCtx.zoomRatio = _lodash.default.isNil(sheet.zoomRatio) ? 1 : sheet.zoomRatio;
+      draftCtx.rowHeaderWidth = mergedSettings.rowHeaderWidth * draftCtx.zoomRatio;
+      draftCtx.columnHeaderHeight = mergedSettings.columnHeaderHeight * draftCtx.zoomRatio;
+      if (!_lodash.default.isNil(sheet.defaultRowHeight)) {
+        draftCtx.defaultrowlen = Number(sheet.defaultRowHeight);
+      } else {
+        draftCtx.defaultrowlen = mergedSettings.defaultRowHeight;
+      }
+      if (!_lodash.default.isNil(sheet.addRows)) {
+        draftCtx.addDefaultRows = Number(sheet.addRows);
+      } else {
+        draftCtx.addDefaultRows = mergedSettings.addRows;
+      }
+      if (!_lodash.default.isNil(sheet.defaultColWidth)) {
+        draftCtx.defaultcollen = Number(sheet.defaultColWidth);
+      } else {
+        draftCtx.defaultcollen = mergedSettings.defaultColWidth;
+      }
+      if (!_lodash.default.isNil(sheet.showGridLines)) {
+        var showGridLines = sheet.showGridLines;
+        if (showGridLines === 0 || showGridLines === false) {
+          draftCtx.showGridLines = false;
+        } else {
+          draftCtx.showGridLines = true;
+        }
+      } else {
+        draftCtx.showGridLines = true;
+      }
+      if (_lodash.default.isNil(mergedSettings.lang)) {
+        var lang = navigator.languages && navigator.languages[0] || navigator.language || navigator.userLanguage;
+        draftCtx.lang = lang;
+      }
+    }, {
+      noHistory: true
+    });
+  }, [context.currentSheetId, context.luckysheetfile.length, originalData, mergedSettings.defaultRowHeight, mergedSettings.defaultColWidth, mergedSettings.column, mergedSettings.row, mergedSettings.defaultFontSize, mergedSettings.devicePixelRatio, mergedSettings.lang, mergedSettings.allowEdit, mergedSettings.hooks, mergedSettings.generateSheetId, setContextWithProduce, initSheetData, mergedSettings.rowHeaderWidth, mergedSettings.columnHeaderHeight, mergedSettings.addRows, mergedSettings.currency]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    if ((e.ctrlKey || e.metaKey) && e.code === "KeyZ") {
+      if (e.shiftKey) {
+        handleRedo();
+      } else {
+        handleUndo();
+      }
+      e.stopPropagation();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.code === "KeyY") {
+      handleRedo();
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    setContextWithProduce(function (draftCtx) {
+      (0, _fortuneCore.handleGlobalKeyDown)(draftCtx, cellInput.current, fxInput.current, nativeEvent, globalCache.current, handleUndo, handleRedo, canvas.current.getContext("2d"));
+    });
+  }, [handleRedo, handleUndo, setContextWithProduce]);
+  var onPaste = (0, _react.useCallback)(function (e) {
+    var _a;
+    if (cellInput.current === document.activeElement || ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.className) === "fortune-sheet-overlay") {
+      var clipboardData = e.clipboardData;
+      if (!clipboardData) {
+        clipboardData = window.clipboardData;
+      }
+      var txtdata = clipboardData.getData("text/html") || clipboardData.getData("text/plain");
+      var ele = document.createElement("div");
+      ele.innerHTML = txtdata;
+      var trList = ele.querySelectorAll("table tr");
+      var maxRow = trList.length + context.luckysheet_select_save[0].row[0];
+      var rowToBeAdded = maxRow - context.luckysheetfile[(0, _fortuneCore.getSheetIndex)(context, context.currentSheetId)].data.length;
+      var range_1 = context.luckysheet_select_save;
+      if (rowToBeAdded > 0) {
+        var insertRowColOp_1 = {
+          type: "row",
+          index: context.luckysheetfile[(0, _fortuneCore.getSheetIndex)(context, context.currentSheetId)].data.length - 1,
+          count: rowToBeAdded,
+          direction: "rightbottom",
+          id: context.currentSheetId
+        };
+        setContextWithProduce(function (draftCtx) {
+          (0, _fortuneCore.insertRowCol)(draftCtx, insertRowColOp_1);
+          draftCtx.luckysheet_select_save = range_1;
+        }, {
+          insertRowColOp: insertRowColOp_1
+        });
+      }
+      setContextWithProduce(function (draftCtx) {
+        try {
+          (0, _fortuneCore.handlePaste)(draftCtx, e);
+        } catch (err) {
+          console.error(err);
+        }
+      });
+    }
+  }, [context, setContextWithProduce]);
+  var onMoreToolbarItemsClose = (0, _react.useCallback)(function () {
+    setMoreToolbarItems(null);
+  }, []);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("paste", onPaste);
+    return function () {
+      document.removeEventListener("paste", onPaste);
+    };
+  }, [onPaste]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _api.generateAPIs)(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current, globalCache.current);
+  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, globalCache]);
+  var i = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
+  if (i == null) {
+    return null;
+  }
+  var sheet = (_b = context.luckysheetfile) === null || _b === void 0 ? void 0 : _b[i];
+  if (!sheet) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/_react.default.createElement(_modal.ModalProvider, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-container",
+    ref: workbookContainer,
+    onKeyDown: onKeyDown
+  }, /*#__PURE__*/_react.default.createElement(_SVGDefines.default, {
+    currency: mergedSettings.currency
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-workarea"
+  }, mergedSettings.showToolbar && (/*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    moreItemsOpen: moreToolbarItems !== null,
+    setMoreItems: setMoreToolbarItems,
+    onMoreToolbarItemsClose: onMoreToolbarItemsClose,
+    moreToolbarItems: moreToolbarItems
+  })), mergedSettings.showFormulaBar && /*#__PURE__*/_react.default.createElement(_FxEditor.default, null)), /*#__PURE__*/_react.default.createElement(_Sheet.default, {
+    sheet: sheet
+  }), mergedSettings.showSheetTabs && /*#__PURE__*/_react.default.createElement(_SheetTab.default, null), /*#__PURE__*/_react.default.createElement(_ContextMenu.default, null), /*#__PURE__*/_react.default.createElement(_FilterMenu.default, null), /*#__PURE__*/_react.default.createElement(_SheetTab2.default, null), context.showSheetList && /*#__PURE__*/_react.default.createElement(_SheetList.default, null), !_lodash.default.isEmpty(context.contextMenu) && (/*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: function onMouseDown() {
+      setContextWithProduce(function (draftCtx) {
+        draftCtx.contextMenu = {};
+        draftCtx.filterContextMenu = undefined;
+        draftCtx.showSheetList = undefined;
+      });
+    },
+    onMouseMove: function onMouseMove(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    className: "fortune-popover-backdrop"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-stat-area"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-sheet-selection-calInfo"
+  }, !!calInfo.count && (/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: "60px"
+    }
+  }, formula.count, ": ", calInfo.count)), !!calInfo.numberC && !!calInfo.sum && (/*#__PURE__*/_react.default.createElement("div", null, formula.sum, ": ", calInfo.sum)), !!calInfo.numberC && !!calInfo.average && (/*#__PURE__*/_react.default.createElement("div", null, formula.average, ": ", calInfo.average)), !!calInfo.numberC && !!calInfo.max && (/*#__PURE__*/_react.default.createElement("div", null, formula.max, ": ", calInfo.max)), !!calInfo.numberC && !!calInfo.min && (/*#__PURE__*/_react.default.createElement("div", null, formula.min, ": ", calInfo.min)))), context.showDunePreview && (/*#__PURE__*/_react.default.createElement(_DunePreview.default, {
+    url: context.showDunePreview.url,
+    position: context.showDunePreview.position,
+    onKeepAsLink: function onKeepAsLink() {
+      setContextWithProduce(function (draftCtx) {
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+    },
+    onEmbed: function onEmbed() {
+      var _a;
+      setContextWithProduce(function (draftCtx) {
+        (0, _fortuneCore.insertDuneChart)(draftCtx, context.showDunePreview.url);
+        draftCtx.showDunePreview = undefined;
+      }, {
+        noHistory: true
+      });
+      (_a = mergedSettings.onDuneChartEmbed) === null || _a === void 0 ? void 0 : _a.call(mergedSettings);
+    }
+  })))));
+});
+var _default = exports.default = Workbook;

package/lib/components/ZoomControl/index.css

@@ -0,0 +1,54 @@
+.fortune-zoom-container {
+  white-space: nowrap;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+
+.fortune-zoom-button {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.fortune-zoom-button:hover {
+  background: #efefef;
+}
+
+.fortune-zoom-ratio {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 48px;
+  color: #1e1e1f;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.fortune-zoom-ratio-current {
+  width: 100%;
+}
+
+.fortune-zoom-ratio-item:hover {
+  background: #efefef;
+}
+
+.fortune-zoom-ratio-menu {
+  position: absolute;
+  bottom: 30px;
+  left: 0;
+  line-height: 24px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  padding: 10px 0px 10px 0px;
+  border-radius: 6px;
+  background: white;
+  z-index: 1004;
+}
+
+.fortune-zoom-ratio-text {
+  padding: 0px 10px 0px 10px;
+}

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

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