@fileverse-dev/fortune-react 1.0.17 → 1.0.18

package/es/components/SheetOverlay/InputBox.js

@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, getrangeseleciton, indexToColumnChar } from "@fileverse-dev/fortune-core";
+import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, getrangeseleciton } from "@fileverse-dev/fortune-core";
 import React, { useContext, useEffect, useMemo, useRef, useCallback, useLayoutEffect, useState } from "react";
 import _ from "lodash";
 import WorkbookContext from "../../context";
@@ -17,27 +17,18 @@ import FormulaSearch from "./FormulaSearch";
 import FormulaHint from "./FormulaHint";
 import usePrevious from "../../hooks/usePrevious";
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f;
-  var _g = useContext(WorkbookContext),
-    context = _g.context,
-    setContext = _g.setContext,
-    refs = _g.refs;
+  var _a, _b;
+  var _c = useContext(WorkbookContext),
+    context = _c.context,
+    setContext = _c.setContext,
+    refs = _c.refs;
   var inputRef = useRef(null);
   var lastKeyDownEventRef = useRef(null);
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
-  var _h = useState(false),
-    isHidenRC = _h[0],
-    setIsHidenRC = _h[1];
-  var _j = useState(false),
-    isInputBoxActive = _j[0],
-    setIsInputBoxActive = _j[1];
-  var _k = useState({
-      left: 0,
-      top: 0
-    }),
-    frozenPosition = _k[0],
-    setFrozenPosition = _k[1];
+  var _d = useState(false),
+    isHidenRC = _d[0],
+    setIsHidenRC = _d[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
@@ -108,12 +99,6 @@ var InputBox = function InputBox() {
   useEffect(function () {
     setIsHidenRC(isShowHidenCR(context));
   }, [context.luckysheet_select_save]);
-  useEffect(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _.isEmpty(context.luckysheetCellUpdate)) {
-      setIsInputBoxActive(false);
-    }
-  }, [firstSelection, (_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show, context.luckysheetCellUpdate]);
   var getActiveFormula = useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
@@ -268,91 +253,25 @@ var InputBox = function InputBox() {
   var rowReadOnly = cfg.rowReadOnly || {};
   var colReadOnly = cfg.colReadOnly || {};
   var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
-  var getInputBoxPosition = useCallback(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
-      return {
-        left: -10000,
-        top: -10000,
-        display: "block"
-      };
-    }
-    var canvasContainer = refs.cellArea.current;
-    if (!canvasContainer) {
-      return {
-        left: firstSelection.left || 0,
-        top: firstSelection.top || 0,
-        display: "block"
-      };
-    }
-    if (isInputBoxActive) {
-      return {
-        left: frozenPosition.left,
-        top: frozenPosition.top,
-        zIndex: _.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
-        display: "block"
-      };
-    }
-    var containerRect = canvasContainer.getBoundingClientRect();
-    var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
-    var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
-    return {
-      left: initialLeft,
-      top: initialTop,
+  return /*#__PURE__*/React.createElement("div", {
+    className: "luckysheet-input-box",
+    style: firstSelection && !((_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show) ? {
+      left: firstSelection.left,
+      top: firstSelection.top,
       zIndex: _.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
-    };
-  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
-  useEffect(function () {
-    var _a;
-    if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_.isEmpty(context.luckysheetCellUpdate)) {
-      var canvasContainer = refs.cellArea.current;
-      if (canvasContainer) {
-        var containerRect = canvasContainer.getBoundingClientRect();
-        var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
-        var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
-        setFrozenPosition({
-          left: initialLeft,
-          top: initialTop
-        });
-        setIsInputBoxActive(true);
-      }
-    }
-  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
-  var getAddressIndicatorPosition = useCallback(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
-      return {
-        display: "none"
-      };
-    }
-    return {
-      top: "-18px",
-      left: "0",
+    } : {
+      left: -10000,
+      top: -10000,
       display: "block"
-    };
-  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show]);
-  var getCellAddress = useCallback(function () {
-    if (!firstSelection) return "";
-    var rowIndex = firstSelection.row_focus || 0;
-    var colIndex = firstSelection.column_focus || 0;
-    var columnChar = indexToColumnChar(colIndex);
-    var rowNumber = rowIndex + 1;
-    return "".concat(columnChar).concat(rowNumber);
-  }, [firstSelection]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-input-box",
-    style: getInputBoxPosition(),
+    },
     onMouseDown: function onMouseDown(e) {
       return e.stopPropagation();
     },
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show) && (/*#__PURE__*/React.createElement("div", {
-    className: "luckysheet-cell-address-indicator",
-    style: getAddressIndicatorPosition()
-  }, getCellAddress())), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "luckysheet-input-box-inner",
     style: firstSelection ? __assign({
       minWidth: firstSelection.width,

package/es/components/SheetOverlay/index.css

@@ -178,7 +178,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 16;
-  border: 1px dashed #efc703;
+  border: 1px dashed #0188fb;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -188,7 +188,7 @@
   position: absolute;
   /* pointer-events: none; */
   z-index: 16;
-  border: 2px solid #efc703;
+  border: 2px solid #0188fb;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -197,7 +197,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 15;
-  border: 2.5px solid #efc703;
+  border: 2.5px solid #0188fb;
   margin: -1px 0 0 -1px;
   background: rgba(1, 136, 251, 0.15);
   display: none;
@@ -220,7 +220,7 @@
   height: 6px;
   bottom: -5px;
   cursor: crosshair;
-  background-color: #efc703;
+  background-color: #0188fb;
   border: solid 1px #fff;
   z-index: 16;
   pointer-events: auto;
@@ -321,7 +321,7 @@
 }
 
 .luckysheet-input-box {
-  position: fixed;
+  position: absolute;
   font: normal normal 400 13px arial, sans, sans-serif;
   z-index: 15;
   display: flex;
@@ -333,7 +333,7 @@
   text-align: left;
   max-height: 9900px;
   max-width: 9900px;
-  border: 2px #efc703 solid;
+  border: 1px #5292f7 solid;
   padding: 0 2px;
   margin: 0;
   resize: none;
@@ -937,18 +937,3 @@
   overflow: hidden;
   cursor: pointer !important;
 }
-
-.luckysheet-cell-address-indicator {
-  position: absolute;
-  top: -18px;
-  left: 0;
-  background-color: #efc703;
-  color: #000000;
-  padding: 2px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  z-index: 20;
-  pointer-events: none;
-  user-select: none;
-}

package/lib/components/SheetOverlay/InputBox.js

@@ -26,27 +26,18 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f;
-  var _g = (0, _react.useContext)(_context.default),
-    context = _g.context,
-    setContext = _g.setContext,
-    refs = _g.refs;
+  var _a, _b;
+  var _c = (0, _react.useContext)(_context.default),
+    context = _c.context,
+    setContext = _c.setContext,
+    refs = _c.refs;
   var inputRef = (0, _react.useRef)(null);
   var lastKeyDownEventRef = (0, _react.useRef)(null);
   var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
   var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
-  var _h = (0, _react.useState)(false),
-    isHidenRC = _h[0],
-    setIsHidenRC = _h[1];
-  var _j = (0, _react.useState)(false),
-    isInputBoxActive = _j[0],
-    setIsInputBoxActive = _j[1];
-  var _k = (0, _react.useState)({
-      left: 0,
-      top: 0
-    }),
-    frozenPosition = _k[0],
-    setFrozenPosition = _k[1];
+  var _d = (0, _react.useState)(false),
+    isHidenRC = _d[0],
+    setIsHidenRC = _d[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
@@ -117,12 +108,6 @@ var InputBox = function InputBox() {
   (0, _react.useEffect)(function () {
     setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
   }, [context.luckysheet_select_save]);
-  (0, _react.useEffect)(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _lodash.default.isEmpty(context.luckysheetCellUpdate)) {
-      setIsInputBoxActive(false);
-    }
-  }, [firstSelection, (_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show, context.luckysheetCellUpdate]);
   var getActiveFormula = (0, _react.useCallback)(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
@@ -277,91 +262,25 @@ var InputBox = function InputBox() {
   var rowReadOnly = cfg.rowReadOnly || {};
   var colReadOnly = cfg.colReadOnly || {};
   var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
-  var getInputBoxPosition = (0, _react.useCallback)(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
-      return {
-        left: -10000,
-        top: -10000,
-        display: "block"
-      };
-    }
-    var canvasContainer = refs.cellArea.current;
-    if (!canvasContainer) {
-      return {
-        left: firstSelection.left || 0,
-        top: firstSelection.top || 0,
-        display: "block"
-      };
-    }
-    if (isInputBoxActive) {
-      return {
-        left: frozenPosition.left,
-        top: frozenPosition.top,
-        zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
-        display: "block"
-      };
-    }
-    var containerRect = canvasContainer.getBoundingClientRect();
-    var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
-    var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
-    return {
-      left: initialLeft,
-      top: initialTop,
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-input-box",
+    style: firstSelection && !((_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show) ? {
+      left: firstSelection.left,
+      top: firstSelection.top,
       zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
-    };
-  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
-  (0, _react.useEffect)(function () {
-    var _a;
-    if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
-      var canvasContainer = refs.cellArea.current;
-      if (canvasContainer) {
-        var containerRect = canvasContainer.getBoundingClientRect();
-        var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
-        var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
-        setFrozenPosition({
-          left: initialLeft,
-          top: initialTop
-        });
-        setIsInputBoxActive(true);
-      }
-    }
-  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
-  var getAddressIndicatorPosition = (0, _react.useCallback)(function () {
-    var _a;
-    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
-      return {
-        display: "none"
-      };
-    }
-    return {
-      top: "-18px",
-      left: "0",
+    } : {
+      left: -10000,
+      top: -10000,
       display: "block"
-    };
-  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show]);
-  var getCellAddress = (0, _react.useCallback)(function () {
-    if (!firstSelection) return "";
-    var rowIndex = firstSelection.row_focus || 0;
-    var colIndex = firstSelection.column_focus || 0;
-    var columnChar = (0, _fortuneCore.indexToColumnChar)(colIndex);
-    var rowNumber = rowIndex + 1;
-    return "".concat(columnChar).concat(rowNumber);
-  }, [firstSelection]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "luckysheet-input-box",
-    style: getInputBoxPosition(),
+    },
     onMouseDown: function onMouseDown(e) {
       return e.stopPropagation();
     },
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show) && (/*#__PURE__*/_react.default.createElement("div", {
-    className: "luckysheet-cell-address-indicator",
-    style: getAddressIndicatorPosition()
-  }, getCellAddress())), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-input-box-inner",
     style: firstSelection ? __assign({
       minWidth: firstSelection.width,

package/lib/components/SheetOverlay/index.css

@@ -178,7 +178,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 16;
-  border: 1px dashed #efc703;
+  border: 1px dashed #0188fb;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -188,7 +188,7 @@
   position: absolute;
   /* pointer-events: none; */
   z-index: 16;
-  border: 2px solid #efc703;
+  border: 2px solid #0188fb;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -197,7 +197,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 15;
-  border: 2.5px solid #efc703;
+  border: 2.5px solid #0188fb;
   margin: -1px 0 0 -1px;
   background: rgba(1, 136, 251, 0.15);
   display: none;
@@ -220,7 +220,7 @@
   height: 6px;
   bottom: -5px;
   cursor: crosshair;
-  background-color: #efc703;
+  background-color: #0188fb;
   border: solid 1px #fff;
   z-index: 16;
   pointer-events: auto;
@@ -321,7 +321,7 @@
 }
 
 .luckysheet-input-box {
-  position: fixed;
+  position: absolute;
   font: normal normal 400 13px arial, sans, sans-serif;
   z-index: 15;
   display: flex;
@@ -333,7 +333,7 @@
   text-align: left;
   max-height: 9900px;
   max-width: 9900px;
-  border: 2px #efc703 solid;
+  border: 1px #5292f7 solid;
   padding: 0 2px;
   margin: 0;
   resize: none;
@@ -937,18 +937,3 @@
   overflow: hidden;
   cursor: pointer !important;
 }
-
-.luckysheet-cell-address-indicator {
-  position: absolute;
-  top: -18px;
-  left: 0;
-  background-color: #efc703;
-  color: #000000;
-  padding: 2px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  white-space: nowrap;
-  z-index: 20;
-  pointer-events: none;
-  user-select: none;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.0.17",
+    "@fileverse-dev/fortune-core": "1.0.18",
     "@fileverse/ui": "^4.1.7-patch-16",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",