@fileverse-dev/fortune-react 1.0.15 → 1.0.17

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 } from "@fileverse-dev/fortune-core";
+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 React, { useContext, useEffect, useMemo, useRef, useCallback, useLayoutEffect, useState } from "react";
 import _ from "lodash";
 import WorkbookContext from "../../context";
@@ -17,18 +17,27 @@ import FormulaSearch from "./FormulaSearch";
 import FormulaHint from "./FormulaHint";
 import usePrevious from "../../hooks/usePrevious";
 var InputBox = function InputBox() {
-  var _a, _b;
-  var _c = useContext(WorkbookContext),
-    context = _c.context,
-    setContext = _c.setContext,
-    refs = _c.refs;
+  var _a, _b, _c, _d, _e, _f;
+  var _g = useContext(WorkbookContext),
+    context = _g.context,
+    setContext = _g.setContext,
+    refs = _g.refs;
   var inputRef = useRef(null);
   var lastKeyDownEventRef = useRef(null);
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
-  var _d = useState(false),
-    isHidenRC = _d[0],
-    setIsHidenRC = _d[1];
+  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 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;
@@ -99,6 +108,12 @@ 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");
   }, []);
@@ -253,25 +268,91 @@ var InputBox = function InputBox() {
   var rowReadOnly = cfg.rowReadOnly || {};
   var colReadOnly = cfg.colReadOnly || {};
   var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
-  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,
+  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,
       zIndex: _.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
-    } : {
-      left: -10000,
-      top: -10000,
+    };
+  }, [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",
       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();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, 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", {
     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 #0188fb;
+  border: 1px dashed #efc703;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -188,7 +188,7 @@
   position: absolute;
   /* pointer-events: none; */
   z-index: 16;
-  border: 2px solid #0188fb;
+  border: 2px solid #efc703;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -197,7 +197,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 15;
-  border: 2.5px solid #0188fb;
+  border: 2.5px solid #efc703;
   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: #0188fb;
+  background-color: #efc703;
   border: solid 1px #fff;
   z-index: 16;
   pointer-events: auto;
@@ -321,7 +321,7 @@
 }
 
 .luckysheet-input-box {
-  position: absolute;
+  position: fixed;
   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: 1px #5292f7 solid;
+  border: 2px #efc703 solid;
   padding: 0 2px;
   margin: 0;
   resize: none;
@@ -937,3 +937,18 @@
   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,18 +26,27 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var InputBox = function InputBox() {
-  var _a, _b;
-  var _c = (0, _react.useContext)(_context.default),
-    context = _c.context,
-    setContext = _c.setContext,
-    refs = _c.refs;
+  var _a, _b, _c, _d, _e, _f;
+  var _g = (0, _react.useContext)(_context.default),
+    context = _g.context,
+    setContext = _g.setContext,
+    refs = _g.refs;
   var inputRef = (0, _react.useRef)(null);
   var lastKeyDownEventRef = (0, _react.useRef)(null);
   var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
   var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
-  var _d = (0, _react.useState)(false),
-    isHidenRC = _d[0],
-    setIsHidenRC = _d[1];
+  var _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 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,6 +117,12 @@ 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");
   }, []);
@@ -262,25 +277,91 @@ var InputBox = function InputBox() {
   var rowReadOnly = cfg.rowReadOnly || {};
   var colReadOnly = cfg.colReadOnly || {};
   var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "luckysheet-input-box",
-    style: firstSelection && !((_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show) ? {
-      left: firstSelection.left,
-      top: firstSelection.top,
+  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,
       zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
-    } : {
-      left: -10000,
-      top: -10000,
+    };
+  }, [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",
       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();
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, 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", {
     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 #0188fb;
+  border: 1px dashed #efc703;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -188,7 +188,7 @@
   position: absolute;
   /* pointer-events: none; */
   z-index: 16;
-  border: 2px solid #0188fb;
+  border: 2px solid #efc703;
   margin: -1px 0 0 -1px;
   display: none;
 }
@@ -197,7 +197,7 @@
   position: absolute;
   pointer-events: none;
   z-index: 15;
-  border: 2.5px solid #0188fb;
+  border: 2.5px solid #efc703;
   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: #0188fb;
+  background-color: #efc703;
   border: solid 1px #fff;
   z-index: 16;
   pointer-events: auto;
@@ -321,7 +321,7 @@
 }
 
 .luckysheet-input-box {
-  position: absolute;
+  position: fixed;
   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: 1px #5292f7 solid;
+  border: 2px #efc703 solid;
   padding: 0 2px;
   margin: 0;
   resize: none;
@@ -937,3 +937,18 @@
   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.15",
+  "version": "1.0.17",
   "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.14",
+    "@fileverse-dev/fortune-core": "1.0.17",
     "@fileverse/ui": "^4.1.7-patch-16",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",