@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/Sheet/index.js

@@ -0,0 +1,185 @@
+"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 _fortuneCore = require("@fileverse-dev/fortune-core");
+require("./index.css");
+var _context = _interopRequireDefault(require("../../context"));
+var _SheetOverlay = _interopRequireDefault(require("../SheetOverlay"));
+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 Sheet = function Sheet(_a) {
+  var _b, _c, _d;
+  var sheet = _a.sheet;
+  var data = sheet.data;
+  var containerRef = (0, _react.useRef)(null);
+  var placeholderRef = (0, _react.useRef)(null);
+  var _e = (0, _react.useContext)(_context.default),
+    context = _e.context,
+    setContext = _e.setContext,
+    refs = _e.refs,
+    settings = _e.settings;
+  (0, _react.useEffect)(function () {
+    function resize() {
+      if (!data) return;
+      setContext(function (draftCtx) {
+        if (settings.devicePixelRatio === 0) {
+          draftCtx.devicePixelRatio = (globalThis || window).devicePixelRatio;
+        }
+        (0, _fortuneCore.updateContextWithSheetData)(draftCtx, data);
+        (0, _fortuneCore.updateContextWithCanvas)(draftCtx, refs.canvas.current, placeholderRef.current);
+      });
+    }
+    window.addEventListener("resize", resize);
+    return function () {
+      window.removeEventListener("resize", resize);
+    };
+  }, [data, refs.canvas, setContext, settings.devicePixelRatio]);
+  (0, _react.useEffect)(function () {
+    if (!data) return;
+    setContext(function (draftCtx) {
+      return (0, _fortuneCore.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]);
+  (0, _react.useEffect)(function () {
+    setContext(function (draftCtx) {
+      return (0, _fortuneCore.updateContextWithCanvas)(draftCtx, refs.canvas.current, placeholderRef.current);
+    });
+  }, [refs.canvas, setContext, context.rowHeaderWidth, context.columnHeaderHeight, context.devicePixelRatio]);
+  (0, _react.useEffect)(function () {
+    (0, _fortuneCore.initFreeze)(context, refs.globalCache, context.currentSheetId);
+  }, [refs.globalCache, sheet.frozen, context.currentSheetId, context.visibledatacolumn, context.visibledatarow]);
+  (0, _react.useEffect)(function () {
+    var _a, _b, _c, _d, _e;
+    if (context.groupValuesRefreshData.length > 0) {
+      return;
+    }
+    var tableCanvas = new _fortuneCore.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 = (0, _react.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) {
+      (0, _fortuneCore.handleGlobalWheel)(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
+    });
+    e.preventDefault();
+  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  (0, _react.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.default.createElement("div", {
+    ref: containerRef,
+    className: "fortune-sheet-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: placeholderRef,
+    className: "fortune-sheet-canvas-placeholder"
+  }), /*#__PURE__*/_react.default.createElement("canvas", {
+    className: "fortune-sheet-canvas",
+    ref: refs.canvas
+  }), /*#__PURE__*/_react.default.createElement(_SheetOverlay.default, null));
+};
+var _default = exports.default = Sheet;

package/lib/components/SheetList/SheetHiddenButton.d.ts

@@ -0,0 +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;

package/lib/components/SheetList/SheetHiddenButton.js

@@ -0,0 +1,44 @@
+"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 _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _context = _interopRequireDefault(require("../../context"));
+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 SheetHiddenButton = function SheetHiddenButton(_a) {
+  var style = _a.style,
+    sheet = _a.sheet;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext;
+  var showSheet = (0, _react.useCallback)(function () {
+    if (context.allowEdit === false) return;
+    if (!sheet) return;
+    setContext(function (ctx) {
+      _fortuneCore.api.showSheet(ctx, sheet.id);
+    });
+  }, [context.allowEdit, setContext, sheet]);
+  return /*#__PURE__*/_react.default.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.default.createElement(_SVGIcon.default, {
+    name: "hidden",
+    width: 16,
+    height: 16,
+    style: {
+      marginTop: "7px"
+    }
+  })) : "");
+};
+var _default = exports.default = SheetHiddenButton;

package/lib/components/SheetList/SheetListItem.d.ts

@@ -0,0 +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;

package/lib/components/SheetList/SheetListItem.js

@@ -0,0 +1,81 @@
+"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 _ui = require("@fileverse/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+require("./index.css");
+var _SheetHiddenButton = _interopRequireDefault(require("./SheetHiddenButton"));
+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 SheetListItem = function SheetListItem(_a) {
+  var sheet = _a.sheet,
+    isDropPlaceholder = _a.isDropPlaceholder;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.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.default.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;
+        (0, _fortuneCore.cancelActiveImgItem)(draftCtx, refs.globalCache);
+        (0, _fortuneCore.cancelNormalSelected)(draftCtx);
+      });
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "w-4"
+  }, sheet.id === context.currentSheetId && (/*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+    name: "Check",
+    size: "sm",
+    className: "color-text-default w-4 h-4"
+  }))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "luckysheet-sheets-item-name fortune-sheet-list-item-name",
+    spellCheck: "false"
+  }, !!sheet.color && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-sheets-list-item-color",
+    style: {
+      background: sheet.color
+    }
+  })), sheet.name), sheet.hide && /*#__PURE__*/_react.default.createElement(_SheetHiddenButton.default, {
+    sheet: sheet
+  }));
+};
+var _default = exports.default = SheetListItem;

package/lib/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/lib/components/SheetList/index.d.ts

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

package/lib/components/SheetList/index.js

@@ -0,0 +1,39 @@
+"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 _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _useOutsideClick = require("../../hooks/useOutsideClick");
+require("./index.css");
+var _SheetListItem = _interopRequireDefault(require("./SheetListItem"));
+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 SheetList = function SheetList() {
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext;
+  var containerRef = (0, _react.useRef)(null);
+  var close = (0, _react.useCallback)(function () {
+    setContext(function (ctx) {
+      ctx.showSheetList = false;
+    });
+  }, [setContext]);
+  (0, _useOutsideClick.useOutsideClick)(containerRef, close, [close]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-context-menu luckysheet-cols-menu fortune-sheet-list",
+    ref: containerRef
+  }, _lodash.default.sortBy(context.luckysheetfile, function (s) {
+    return Number(s.order);
+  }).map(function (singleSheet) {
+    return /*#__PURE__*/_react.default.createElement(_SheetListItem.default, {
+      sheet: singleSheet,
+      key: singleSheet.id
+    });
+  }));
+};
+var _default = exports.default = SheetList;

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

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

package/lib/components/SheetOverlay/ColumnHeader.js

@@ -0,0 +1,226 @@
+"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"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+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 ColumnHeader = function ColumnHeader() {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext,
+    refs = _b.refs;
+  var containerRef = (0, _react.useRef)(null);
+  var colChangeSizeRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)({
+      col: -1,
+      col_pre: -1,
+      col_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 allowEditRef = (0, _react.useRef)(true);
+  var sheetIndex = (0, _fortuneCore.getSheetIndex)(context, context.currentSheetId);
+  var sheet = sheetIndex == null ? null : context.luckysheetfile[sheetIndex];
+  var freezeHandleLeft = (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) === "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 (0, _fortuneCore.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 = (0, _react.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 = (0, _fortuneCore.fixPositionOnFrozenCells)(freeze, _x, 0, mouseX, 0),
+      x = _b.x,
+      inVerticalFreeze = _b.inVerticalFreeze;
+    var col_location = (0, _fortuneCore.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 = (0, _fortuneCore.getFlowdata)(context);
+    if (!_lodash.default.isNil(flowdata)) allowEditRef.current = (0, _fortuneCore.isAllowEdit)(context) && (0, _fortuneCore.isAllowEdit)(context, [{
+      row: [0, flowdata.length - 1],
+      column: col_location
+    }]);
+  }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
+  var onMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleColumnHeaderMouseDown)(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_cols_change_size) {
+      return;
+    }
+    setHoverLocation({
+      col: -1,
+      col_pre: -1,
+      col_index: -1
+    });
+  }, [context.luckysheet_cols_change_size]);
+  var onColSizeHandleMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleColSizeHandleMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  var onColFreezeHandleMouseDown = (0, _react.useCallback)(function (e) {
+    var nativeEvent = e.nativeEvent;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleColFreezeHandleMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.workbookContainer.current, refs.cellArea.current);
+    });
+    e.stopPropagation();
+  }, [refs.cellArea, refs.globalCache, refs.workbookContainer, setContext]);
+  (0, _react.useEffect)(function () {
+    var s = context.luckysheet_select_save;
+    if (_lodash.default.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 = (0, _fortuneCore.selectTitlesMap)(columnTitleMap, c1, c2);
+    }
+    var columnTitleRange = (0, _fortuneCore.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 = (0, _fortuneCore.colLocationByIndex)(c2, context.visibledatacolumn)[1];
+      var col_pre = (0, _fortuneCore.colLocationByIndex)(c1, context.visibledatacolumn)[0];
+      if (_lodash.default.isNumber(col) && _lodash.default.isNumber(col_pre)) {
+        selects.push({
+          col: col,
+          col_pre: col_pre,
+          c1: c1,
+          c2: c2
+        });
+      }
+    }
+    setSelectedLocation(selects);
+  }, [context.luckysheet_select_save, context.visibledatacolumn]);
+  (0, _react.useEffect)(function () {
+    containerRef.current.scrollLeft = context.scrollLeft;
+  }, [context.scrollLeft]);
+  return /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "fortune-cols-freeze-handle",
+    onMouseDown: onColFreezeHandleMouseDown,
+    style: {
+      left: freezeHandleLeft
+    }
+  }), /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: "fortune-col-header-hover",
+    style: _lodash.default.assign({
+      left: hoverLocation.col_pre,
+      width: hoverLocation.col - hoverLocation.col_pre - 1,
+      display: "block"
+    }, (0, _fortuneCore.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.default.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.default.createElement(_SVGIcon.default, {
+    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.default.createElement("div", {
+      className: "fortune-col-header-selected",
+      key: i,
+      style: _lodash.default.assign({
+        left: col_pre,
+        width: col - col_pre - 1,
+        display: "block",
+        backgroundColor: "#EFC703",
+        mixBlendMode: "multiply"
+      }, (0, _fortuneCore.fixColumnStyleOverflowInFreeze)(context, c1, c2, (_b = refs.globalCache.freezen) === null || _b === void 0 ? void 0 : _b[context.currentSheetId]))
+    });
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cols-h-cells luckysheetsheetchange",
+    id: "luckysheet-cols-h-cells_0",
+    style: {
+      width: context.ch_width,
+      height: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cols-h-cells-c"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-grdblkpush"
+  }))));
+};
+var _default = exports.default = ColumnHeader;