@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/es/components/Sheet/index.js

@@ -0,0 +1,176 @@
+import React, { useRef, useEffect, useContext, useCallback } from "react";
+import { Canvas, updateContextWithCanvas, updateContextWithSheetData, handleGlobalWheel, initFreeze } from "@fileverse-dev/fortune-core";
+import "./index.css";
+import WorkbookContext from "../../context";
+import SheetOverlay from "../SheetOverlay";
+var Sheet = function Sheet(_a) {
+  var _b, _c, _d;
+  var sheet = _a.sheet;
+  var data = sheet.data;
+  var containerRef = useRef(null);
+  var placeholderRef = useRef(null);
+  var _e = useContext(WorkbookContext),
+    context = _e.context,
+    setContext = _e.setContext,
+    refs = _e.refs,
+    settings = _e.settings;
+  useEffect(function () {
+    function resize() {
+      if (!data) return;
+      setContext(function (draftCtx) {
+        if (settings.devicePixelRatio === 0) {
+          draftCtx.devicePixelRatio = (globalThis || window).devicePixelRatio;
+        }
+        updateContextWithSheetData(draftCtx, data);
+        updateContextWithCanvas(draftCtx, refs.canvas.current, placeholderRef.current);
+      });
+    }
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+    };
+  }, [data, refs.canvas, setContext, settings.devicePixelRatio]);
+  useEffect(function () {
+    if (!data) return;
+    setContext(function (draftCtx) {
+      return updateContextWithSheetData(draftCtx, data);
+    });
+  }, [(_b = context.config) === null || _b === void 0 ? void 0 : _b.rowlen, (_c = context.config) === null || _c === void 0 ? void 0 : _c.columnlen, (_d = context.config) === null || _d === void 0 ? void 0 : _d.rowhidden, context.config.colhidden, data, context.zoomRatio, setContext]);
+  useEffect(function () {
+    setContext(function (draftCtx) {
+      return updateContextWithCanvas(draftCtx, refs.canvas.current, placeholderRef.current);
+    });
+  }, [refs.canvas, setContext, context.rowHeaderWidth, context.columnHeaderHeight, context.devicePixelRatio]);
+  useEffect(function () {
+    initFreeze(context, refs.globalCache, context.currentSheetId);
+  }, [refs.globalCache, sheet.frozen, context.currentSheetId, context.visibledatacolumn, context.visibledatarow]);
+  useEffect(function () {
+    var _a, _b, _c, _d, _e;
+    if (context.groupValuesRefreshData.length > 0) {
+      return;
+    }
+    var tableCanvas = new Canvas(refs.canvas.current, context);
+    if (tableCanvas == null) return;
+    var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[sheet.id];
+    if (((_b = freeze === null || freeze === void 0 ? void 0 : freeze.horizontal) === null || _b === void 0 ? void 0 : _b.freezenhorizontaldata) || ((_c = freeze === null || freeze === void 0 ? void 0 : freeze.vertical) === null || _c === void 0 ? void 0 : _c.freezenverticaldata)) {
+      var horizontalData = (_d = freeze === null || freeze === void 0 ? void 0 : freeze.horizontal) === null || _d === void 0 ? void 0 : _d.freezenhorizontaldata;
+      var verticallData = (_e = freeze === null || freeze === void 0 ? void 0 : freeze.vertical) === null || _e === void 0 ? void 0 : _e.freezenverticaldata;
+      if (horizontalData && verticallData) {
+        var horizontalPx = horizontalData[0],
+          horizontalScrollTop = horizontalData[2];
+        var verticalPx = verticallData[0],
+          verticalScrollWidth = verticallData[2];
+        tableCanvas.drawMain({
+          scrollWidth: context.scrollLeft + verticalPx - verticalScrollWidth,
+          scrollHeight: context.scrollTop + horizontalPx - horizontalScrollTop,
+          offsetLeft: verticalPx - verticalScrollWidth + context.rowHeaderWidth,
+          offsetTop: horizontalPx - horizontalScrollTop + context.columnHeaderHeight,
+          clear: true
+        });
+        tableCanvas.drawMain({
+          scrollWidth: context.scrollLeft + verticalPx - verticalScrollWidth,
+          scrollHeight: horizontalScrollTop,
+          drawHeight: horizontalPx,
+          offsetLeft: verticalPx - verticalScrollWidth + context.rowHeaderWidth
+        });
+        tableCanvas.drawMain({
+          scrollWidth: verticalScrollWidth,
+          scrollHeight: context.scrollTop + horizontalPx - horizontalScrollTop,
+          drawWidth: verticalPx,
+          offsetTop: horizontalPx - horizontalScrollTop + context.columnHeaderHeight
+        });
+        tableCanvas.drawMain({
+          scrollWidth: verticalScrollWidth,
+          scrollHeight: horizontalScrollTop,
+          drawWidth: verticalPx,
+          drawHeight: horizontalPx
+        });
+        tableCanvas.drawColumnHeader(context.scrollLeft + verticalPx - verticalScrollWidth, undefined, verticalPx - verticalScrollWidth + context.rowHeaderWidth);
+        tableCanvas.drawColumnHeader(verticalScrollWidth, verticalPx);
+        tableCanvas.drawRowHeader(context.scrollTop + horizontalPx - horizontalScrollTop, undefined, horizontalPx - horizontalScrollTop + context.columnHeaderHeight);
+        tableCanvas.drawRowHeader(horizontalScrollTop, horizontalPx);
+        tableCanvas.drawFreezeLine({
+          horizontalTop: horizontalPx - horizontalScrollTop + context.columnHeaderHeight - 2,
+          verticalLeft: verticalPx - verticalScrollWidth + context.rowHeaderWidth - 2
+        });
+      } else if (horizontalData) {
+        var horizontalPx = horizontalData[0],
+          horizontalScrollTop = horizontalData[2];
+        tableCanvas.drawMain({
+          scrollWidth: context.scrollLeft,
+          scrollHeight: context.scrollTop + horizontalPx - horizontalScrollTop,
+          offsetTop: horizontalPx - horizontalScrollTop + context.columnHeaderHeight,
+          clear: true
+        });
+        tableCanvas.drawMain({
+          scrollWidth: context.scrollLeft,
+          scrollHeight: horizontalScrollTop,
+          drawHeight: horizontalPx
+        });
+        tableCanvas.drawColumnHeader(context.scrollLeft);
+        tableCanvas.drawRowHeader(context.scrollTop + horizontalPx - horizontalScrollTop, undefined, horizontalPx - horizontalScrollTop + context.columnHeaderHeight);
+        tableCanvas.drawRowHeader(horizontalScrollTop, horizontalPx);
+        tableCanvas.drawFreezeLine({
+          horizontalTop: horizontalPx - horizontalScrollTop + context.columnHeaderHeight - 2
+        });
+      } else if (verticallData) {
+        var verticalPx = verticallData[0],
+          verticalScrollWidth = verticallData[2];
+        tableCanvas.drawMain({
+          scrollWidth: context.scrollLeft + verticalPx - verticalScrollWidth,
+          scrollHeight: context.scrollTop,
+          offsetLeft: verticalPx - verticalScrollWidth + context.rowHeaderWidth
+        });
+        tableCanvas.drawMain({
+          scrollWidth: verticalScrollWidth,
+          scrollHeight: context.scrollTop,
+          drawWidth: verticalPx
+        });
+        tableCanvas.drawRowHeader(context.scrollTop);
+        tableCanvas.drawColumnHeader(context.scrollLeft + verticalPx - verticalScrollWidth, undefined, verticalPx - verticalScrollWidth + context.rowHeaderWidth);
+        tableCanvas.drawColumnHeader(verticalScrollWidth, verticalPx);
+        tableCanvas.drawFreezeLine({
+          verticalLeft: verticalPx - verticalScrollWidth + context.rowHeaderWidth - 2
+        });
+      }
+    } else {
+      tableCanvas.drawMain({
+        scrollWidth: context.scrollLeft,
+        scrollHeight: context.scrollTop,
+        clear: true
+      });
+      tableCanvas.drawColumnHeader(context.scrollLeft);
+      tableCanvas.drawRowHeader(context.scrollTop);
+    }
+  }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
+  var onWheel = useCallback(function (e) {
+    var _a, _b;
+    var functionDetailsEl = document.getElementById("function-details");
+    var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
+    var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
+    var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
+    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
+    setContext(function (draftCtx) {
+      handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
+    });
+    e.preventDefault();
+  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  useEffect(function () {
+    var container = containerRef.current;
+    container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
+    return function () {
+      container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
+    };
+  }, [onWheel]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "fortune-sheet-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: placeholderRef,
+    className: "fortune-sheet-canvas-placeholder"
+  }), /*#__PURE__*/React.createElement("canvas", {
+    className: "fortune-sheet-canvas",
+    ref: refs.canvas
+  }), /*#__PURE__*/React.createElement(SheetOverlay, null));
+};
+export default Sheet;

package/{dist/packages/react/src → es}/components/SheetList/SheetHiddenButton.d.ts

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

package/es/components/SheetList/SheetHiddenButton.js

@@ -0,0 +1,35 @@
+import { api } from "@fileverse-dev/fortune-core";
+import React, { useCallback, useContext } from "react";
+import SVGIcon from "../SVGIcon";
+import WorkbookContext from "../../context";
+var SheetHiddenButton = function SheetHiddenButton(_a) {
+  var style = _a.style,
+    sheet = _a.sheet;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext;
+  var showSheet = useCallback(function () {
+    if (context.allowEdit === false) return;
+    if (!sheet) return;
+    setContext(function (ctx) {
+      api.showSheet(ctx, sheet.id);
+    });
+  }, [context.allowEdit, setContext, sheet]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      showSheet();
+    },
+    tabIndex: 0,
+    className: "fortune-sheet-hidden-button"
+  }, (sheet === null || sheet === void 0 ? void 0 : sheet.hide) === 1 ? (/*#__PURE__*/React.createElement(SVGIcon, {
+    name: "hidden",
+    width: 16,
+    height: 16,
+    style: {
+      marginTop: "7px"
+    }
+  })) : "");
+};
+export default SheetHiddenButton;

package/{dist/packages/react/src → es}/components/SheetList/SheetListItem.d.ts

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

package/es/components/SheetList/SheetListItem.js

@@ -0,0 +1,72 @@
+import { cancelNormalSelected, cancelActiveImgItem } from "@fileverse-dev/fortune-core";
+import { LucideIcon } from "@fileverse/ui";
+import React, { useContext, useEffect, useRef } from "react";
+import WorkbookContext from "../../context";
+import "./index.css";
+import SheetHiddenButton from "./SheetHiddenButton";
+var SheetListItem = function SheetListItem(_a) {
+  var sheet = _a.sheet,
+    isDropPlaceholder = _a.isDropPlaceholder;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var containerRef = useRef(null);
+  useEffect(function () {
+    setContext(function (draftCtx) {
+      var _a, _b, _c, _d;
+      var r = context.sheetScrollRecord[draftCtx === null || draftCtx === void 0 ? void 0 : draftCtx.currentSheetId];
+      if (r) {
+        draftCtx.scrollLeft = (_a = r.scrollLeft) !== null && _a !== void 0 ? _a : 0;
+        draftCtx.scrollTop = (_b = r.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        draftCtx.luckysheet_select_status = (_c = r.luckysheet_select_status) !== null && _c !== void 0 ? _c : false;
+        draftCtx.luckysheet_select_save = (_d = r.luckysheet_select_save) !== null && _d !== void 0 ? _d : undefined;
+      } else {
+        draftCtx.scrollLeft = 0;
+        draftCtx.scrollTop = 0;
+        draftCtx.luckysheet_select_status = false;
+        draftCtx.luckysheet_select_save = undefined;
+      }
+      draftCtx.luckysheet_selection_range = [];
+    });
+  }, [context.currentSheetId, context.sheetScrollRecord, setContext]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-sheet-list-item flex items-center gap-2 px-2",
+    key: sheet.id,
+    ref: containerRef,
+    onClick: function onClick() {
+      if (isDropPlaceholder) return;
+      setContext(function (draftCtx) {
+        draftCtx.sheetScrollRecord[draftCtx.currentSheetId] = {
+          scrollLeft: draftCtx.scrollLeft,
+          scrollTop: draftCtx.scrollTop,
+          luckysheet_select_status: draftCtx.luckysheet_select_status,
+          luckysheet_select_save: draftCtx.luckysheet_select_save,
+          luckysheet_selection_range: draftCtx.luckysheet_selection_range
+        };
+        draftCtx.currentSheetId = sheet.id;
+        draftCtx.zoomRatio = sheet.zoomRatio || 1;
+        cancelActiveImgItem(draftCtx, refs.globalCache);
+        cancelNormalSelected(draftCtx);
+      });
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "w-4"
+  }, sheet.id === context.currentSheetId && (/*#__PURE__*/React.createElement(LucideIcon, {
+    name: "Check",
+    size: "sm",
+    className: "color-text-default w-4 h-4"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: "luckysheet-sheets-item-name fortune-sheet-list-item-name",
+    spellCheck: "false"
+  }, !!sheet.color && (/*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-sheets-list-item-color",
+    style: {
+      background: sheet.color
+    }
+  })), sheet.name), sheet.hide && /*#__PURE__*/React.createElement(SheetHiddenButton, {
+    sheet: sheet
+  }));
+};
+export default SheetListItem;

package/es/components/SheetList/index.css

@@ -0,0 +1,48 @@
+.fortune-sheet-list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-width: 120px;
+  position: absolute;
+  z-index: 10002;
+  bottom: 53px;
+  margin-left: 72px;
+  max-height: 60%;
+}
+
+.fortune-sheet-list-item {
+  height: 30px;
+  line-height: 30px;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.fortune-sheet-list-item-name {
+  margin-right: 15px;
+  position: relative;
+}
+
+.fortune-sheet-list-item-name .luckysheet-sheets-list-item-color {
+  width: 6%;
+  height: 100%;
+  position: absolute;
+  bottom: 0;
+  left: -6px;
+}
+
+.fortune-sheet-list :hover {
+  background-color: hsl(var(--color-bg-default-hover));
+  transition: background-color 0.2s ease-in-out;
+}
+
+.fortune-sheet-hidden-button {
+  margin-right: 15px;
+  display: inline-flex;
+  position: absolute;
+  right: 0;
+  justify-content: flex-end;
+}
+
+.fortune-sheet-hidden-button :hover {
+  background-color: #d0d0d0;
+}

package/{dist/packages/react/src → es}/components/SheetList/index.d.ts

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

package/es/components/SheetList/index.js

@@ -0,0 +1,30 @@
+import _ from "lodash";
+import React, { useContext, useRef, useCallback } from "react";
+import WorkbookContext from "../../context";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+import "./index.css";
+import SheetListItem from "./SheetListItem";
+var SheetList = function SheetList() {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext;
+  var containerRef = useRef(null);
+  var close = useCallback(function () {
+    setContext(function (ctx) {
+      ctx.showSheetList = false;
+    });
+  }, [setContext]);
+  useOutsideClick(containerRef, close, [close]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-context-menu luckysheet-cols-menu fortune-sheet-list",
+    ref: containerRef
+  }, _.sortBy(context.luckysheetfile, function (s) {
+    return Number(s.order);
+  }).map(function (singleSheet) {
+    return /*#__PURE__*/React.createElement(SheetListItem, {
+      sheet: singleSheet,
+      key: singleSheet.id
+    });
+  }));
+};
+export default SheetList;

package/{dist/packages/react/src → es}/components/SheetOverlay/ColumnHeader.d.ts

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

package/es/components/SheetOverlay/ColumnHeader.js

@@ -0,0 +1,217 @@
+import { colLocation, colLocationByIndex, selectTitlesMap, selectTitlesRange, handleColSizeHandleMouseDown, handleColumnHeaderMouseDown, isAllowEdit, getFlowdata, fixColumnStyleOverflowInFreeze, handleColFreezeHandleMouseDown, getSheetIndex, fixPositionOnFrozenCells } from "@fileverse-dev/fortune-core";
+import _ from "lodash";
+import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import WorkbookContext from "../../context";
+import SVGIcon from "../SVGIcon";
+var ColumnHeader = function ColumnHeader() {
+  var _a;
+  var _b = useContext(WorkbookContext),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var containerRef = useRef(null);
+  var colChangeSizeRef = useRef(null);
+  var _c = useState({
+      col: -1,
+      col_pre: -1,
+      col_index: -1
+    }),
+    hoverLocation = _c[0],
+    setHoverLocation = _c[1];
+  var _d = useState(false),
+    hoverInFreeze = _d[0],
+    setHoverInFreeze = _d[1];
+  var _e = useState([]),
+    selectedLocation = _e[0],
+    setSelectedLocation = _e[1];
+  var allowEditRef = useRef(true);
+  var sheetIndex = getSheetIndex(context, context.currentSheetId);
+  var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
+  var freezeHandleLeft = 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) === "column" || ((_b = sheet === null || sheet === void 0 ? void 0 : sheet.frozen) === null || _b === void 0 ? void 0 : _b.type) === "rangeColumn" || ((_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 colLocationByIndex(((_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.column_focus) || 0, context.visibledatacolumn)[1] - 2 + context.scrollLeft;
+    }
+    return context.scrollLeft;
+  }, [context.visibledatacolumn, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollLeft]);
+  var onMouseMove = useCallback(function (e) {
+    var _a;
+    if (context.luckysheet_cols_change_size) {
+      return;
+    }
+    var mouseX = e.pageX - containerRef.current.getBoundingClientRect().left - window.scrollX;
+    var _x = mouseX + containerRef.current.scrollLeft;
+    var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId];
+    var _b = fixPositionOnFrozenCells(freeze, _x, 0, mouseX, 0),
+      x = _b.x,
+      inVerticalFreeze = _b.inVerticalFreeze;
+    var col_location = colLocation(x, context.visibledatacolumn);
+    var col_pre = col_location[0],
+      col = col_location[1],
+      col_index = col_location[2];
+    if (col_index !== hoverLocation.col_index) {
+      setHoverLocation({
+        col_pre: col_pre,
+        col: col,
+        col_index: col_index
+      });
+      setHoverInFreeze(inVerticalFreeze);
+    }
+    var flowdata = getFlowdata(context);
+    if (!_.isNil(flowdata)) allowEditRef.current = isAllowEdit(context) && isAllowEdit(context, [{
+      row: [0, flowdata.length - 1],
+      column: col_location
+    }]);
+  }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
+  var onMouseDown = useCallback(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      handleColumnHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+    });
+  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
+  var onMouseLeave = useCallback(function () {
+    if (context.luckysheet_cols_change_size) {
+      return;
+    }
+    setHoverLocation({
+      col: -1,
+      col_pre: -1,
+      col_index: -1
+    });
+  }, [context.luckysheet_cols_change_size]);
+  var onColSizeHandleMouseDown = useCallback(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      handleColSizeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  var onColFreezeHandleMouseDown = useCallback(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      handleColFreezeHandleMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  useEffect(function () {
+    var s = context.luckysheet_select_save;
+    if (_.isNil(s)) return;
+    setSelectedLocation([]);
+    if (s[0].row_select) return;
+    var columnTitleMap = {};
+    for (var i = 0; i < s.length; i += 1) {
+      var c1 = s[i].column[0];
+      var c2 = s[i].column[1];
+      columnTitleMap = selectTitlesMap(columnTitleMap, c1, c2);
+    }
+    var columnTitleRange = selectTitlesRange(columnTitleMap);
+    var selects = [];
+    for (var j = 0; j < columnTitleRange.length; j += 1) {
+      var c1 = columnTitleRange[j][0];
+      var c2 = columnTitleRange[j][columnTitleRange[j].length - 1];
+      var col = colLocationByIndex(c2, context.visibledatacolumn)[1];
+      var col_pre = colLocationByIndex(c1, context.visibledatacolumn)[0];
+      if (_.isNumber(col) && _.isNumber(col_pre)) {
+        selects.push({
+          col: col,
+          col_pre: col_pre,
+          c1: c1,
+          c2: c2
+        });
+      }
+    }
+    setSelectedLocation(selects);
+  }, [context.luckysheet_select_save, context.visibledatacolumn]);
+  useEffect(function () {
+    containerRef.current.scrollLeft = context.scrollLeft;
+  }, [context.scrollLeft]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "fortune-col-header",
+    style: {
+      height: context.columnHeaderHeight - 1.5
+    },
+    onMouseMove: onMouseMove,
+    onMouseDown: onMouseDown,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: function onContextMenu(e) {
+      e.preventDefault();
+      setContext(function (ctx) {
+        ctx.contextMenu = {
+          x: e.pageX,
+          y: 90,
+          headerMenu: true
+        };
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-cols-freeze-handle",
+    onMouseDown: onColFreezeHandleMouseDown,
+    style: {
+      left: freezeHandleLeft
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-cols-change-size",
+    ref: colChangeSizeRef,
+    id: "fortune-cols-change-size",
+    onMouseDown: onColSizeHandleMouseDown,
+    style: {
+      left: hoverLocation.col - 5 + (hoverInFreeze ? context.scrollLeft : 0),
+      opacity: context.luckysheet_cols_change_size ? 1 : 0
+    }
+  }), !context.luckysheet_cols_change_size && hoverLocation.col_index >= 0 ? (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-col-header-hover",
+    style: _.assign({
+      left: hoverLocation.col_pre,
+      width: hoverLocation.col - hoverLocation.col_pre - 1,
+      display: "block"
+    }, fixColumnStyleOverflowInFreeze(context, hoverLocation.col_index, hoverLocation.col_index, (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId]))
+  }, allowEditRef.current && (/*#__PURE__*/React.createElement("span", {
+    className: "header-arrow",
+    onClick: function onClick(e) {
+      setContext(function (ctx) {
+        ctx.contextMenu = {
+          x: e.pageX,
+          y: 90,
+          headerMenu: true
+        };
+      });
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "headDownArrow",
+    width: 12,
+    style: {
+      marginBottom: "3px"
+    }
+  }))))) : null, selectedLocation.map(function (_a, i) {
+    var _b;
+    var col = _a.col,
+      col_pre = _a.col_pre,
+      c1 = _a.c1,
+      c2 = _a.c2;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "fortune-col-header-selected",
+      key: i,
+      style: _.assign({
+        left: col_pre,
+        width: col - col_pre - 1,
+        display: "block",
+        backgroundColor: "#EFC703",
+        mixBlendMode: "multiply"
+      }, fixColumnStyleOverflowInFreeze(context, c1, c2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-cols-h-cells luckysheetsheetchange",
+    id: "luckysheet-cols-h-cells_0",
+    style: {
+      width: context.ch_width,
+      height: 1
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-cols-h-cells-c"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-grdblkpush"
+  }))));
+};
+export default ColumnHeader;

package/{dist/packages/react/src → es}/components/SheetOverlay/ContentEditable.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-type ContentEditableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
-    initialContent?: string;
-    innerRef?: (e: HTMLDivElement | null) => void;
-    onChange?: (html: string, isBlur?: boolean) => void;
-    onBlur?: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
-    autoFocus?: boolean;
-    allowEdit?: boolean;
-};
-declare const ContentEditable: React.FC<ContentEditableProps>;
-export default ContentEditable;
+import React from "react";
+type ContentEditableProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & {
+    initialContent?: string;
+    innerRef?: (e: HTMLDivElement | null) => void;
+    onChange?: (html: string, isBlur?: boolean) => void;
+    onBlur?: (e: React.FocusEvent<HTMLDivElement, Element>) => void;
+    autoFocus?: boolean;
+    allowEdit?: boolean;
+};
+declare const ContentEditable: React.FC<ContentEditableProps>;
+export default ContentEditable;