@fileverse-dev/fortune-react 1.0.2-mod-41 → 1.0.2-mod-41-patch-1

package/dist/components/Workbook/api.d.ts

@@ -1172,5 +1172,5 @@ export declare function generateAPIs(context: Context, setContext: (recipe: (ctx
             support: string;
         };
     };
-    getWorkbookContect: () => Context;
+    getWorkbookContext: () => Context;
 };

package/dist/components/Workbook/index.d.ts

@@ -1179,6 +1179,6 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
             support: string;
         };
     };
-    getWorkbookContect: () => Context;
+    getWorkbookContext: () => Context;
 }>>;
 export default Workbook;

package/dist/index.esm.js

@@ -784,12 +784,37 @@ var ContentEditable = function ContentEditable(_ref) {
 };
 
 var FormulaSearch = function FormulaSearch(props) {
+  var _context$luckysheet_s;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
+  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
+  var hintRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    top = _useState2[0],
+    setTop = _useState2[1];
+  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
+    var _hintRef$current;
+    if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
+    var hintHeight = hintRef.current.offsetHeight;
+    var inputBottom = firstSelection.top + firstSelection.height_move;
+    var availableBelow = window.innerHeight - inputBottom;
+    var hintAbove = hintHeight > availableBelow;
+    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
+    var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
+    setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
+  };
+  useEffect(function () {
+    calcuatePopUpPlacement();
+  });
   if (_.isEmpty(context.functionCandidates)) return null;
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: hintRef,
     id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c"
+    className: "luckysheet-formula-search-c",
+    style: {
+      top: top
+    }
   }), context.functionCandidates.map(function (v, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: v.n,
@@ -839,8 +864,10 @@ var FormulaSearch = function FormulaSearch(props) {
 };
 
 var FormulaHint = function FormulaHint(props) {
+  var _context$luckysheet_s;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context;
+  var firstSelection = (_context$luckysheet_s = context.luckysheet_select_save) === null || _context$luckysheet_s === void 0 ? void 0 : _context$luckysheet_s[0];
   var _locale = locale(context),
     formulaMore = _locale.formulaMore;
   var fn = context.formulaCache.functionlistMap[context.functionHint];
@@ -856,7 +883,7 @@ var FormulaHint = function FormulaHint(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isKeyAdded = _useState6[0],
     setApiKeyAdded = _useState6[1];
-  var _useState7 = useState(false),
+  var _useState7 = useState(true),
     _useState8 = _slicedToArray(_useState7, 2),
     showFunctionBody = _useState8[0],
     setShouldShowFunctionBody = _useState8[1];
@@ -870,11 +897,66 @@ var FormulaHint = function FormulaHint(props) {
   var apiKeyPlaceholder = {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
+  var hintRef = useRef(null);
+  var _useState9 = useState(0),
+    _useState0 = _slicedToArray(_useState9, 2),
+    top = _useState0[0],
+    setTop = _useState0[1];
+  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
+    var _hintRef$current;
+    if (!(firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) || !firstSelection.height_move || !hintRef.current) return;
+    var hintHeight = 422;
+    var inputBottom = firstSelection.top + firstSelection.height_move;
+    var availableBelow = window.innerHeight - inputBottom;
+    var hintAbove = hintHeight > availableBelow;
+    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
+    var divOffset = ((_hintRef$current = hintRef.current) === null || _hintRef$current === void 0 ? void 0 : _hintRef$current.offsetHeight) || 0;
+    setTop(hintAbove ? selectionHeight - (divOffset + 70) : selectionHeight + 4);
+  };
+  useEffect(function () {
+    calcuatePopUpPlacement();
+  });
+  useEffect(function () {
+    var el = document.getElementById("function-details");
+    var handleWheel;
+    if (el) {
+      var scrollLockTimeout = null;
+      var cache = {
+        verticalScrollLock: false,
+        horizontalScrollLock: false
+      };
+      handleWheel = function handleWheel(e) {
+        e.preventDefault();
+        var step = 40;
+        var ratio = 1;
+        if (e.deltaY !== 0 && !cache.verticalScrollLock) {
+          cache.horizontalScrollLock = true;
+          el.scrollTop += (e.deltaY > 0 ? 1 : -1) * step * ratio;
+        } else if (e.deltaX !== 0 && !cache.horizontalScrollLock) {
+          cache.verticalScrollLock = true;
+          el.scrollLeft += (e.deltaX > 0 ? 1 : -1) * step * ratio;
+        }
+        clearTimeout(scrollLockTimeout);
+        scrollLockTimeout = setTimeout(function () {
+          cache.verticalScrollLock = false;
+          cache.horizontalScrollLock = false;
+        }, 50);
+      };
+      el.addEventListener("wheel", handleWheel, {
+        passive: false
+      });
+    }
+    return function () {
+      if (el && handleWheel) el.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
   if (!fn) return null;
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: hintRef,
     id: "luckysheet-formula-help-c",
     className: "luckysheet-formula-help-c",
     style: {
+      top: top,
       borderWidth: "1px",
       borderColor: (fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR) ? fn === null || fn === void 0 ? void 0 : fn.BRAND_SECONDARY_COLOR : "#F8F9FA",
       backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
@@ -965,8 +1047,11 @@ var FormulaHint = function FormulaHint(props) {
     height: 16
   })))), showFunctionBody && (/*#__PURE__*/React.createElement("div", {
     className: "luckysheet-formula-help-content",
+    id: "function-details",
     style: {
-      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA")
+      backgroundColor: "".concat(fn.BRAND_COLOR ? fn.BRAND_COLOR : "#F8F9FA"),
+      maxHeight: "318px",
+      overflowY: "scroll"
     }
   }, fn.API_KEY && (/*#__PURE__*/React.createElement("div", {
     style: {
@@ -1103,8 +1188,12 @@ var FormulaHint = function FormulaHint(props) {
       borderBottomRightRadius: "10px"
     },
     className: "w-full"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "color-text-link text-helper-text-sm"
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick() {
+      var _document$getElementB;
+      (_document$getElementB = document.getElementById("function-button")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.click();
+    },
+    className: "color-text-link cursor-pointer text-helper-text-sm"
   }, "Learn More")));
 };
 
@@ -1203,6 +1292,38 @@ var InputBox = function InputBox() {
   var getActiveFormula = useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
+  var insertSelectedFormula = useCallback(function (formulaName) {
+    var _getrangeseleciton;
+    var textEditor = document.getElementById("luckysheet-rich-text-editor");
+    if (!textEditor) return;
+    var searchTxt = ((_getrangeseleciton = getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
+    var deleteCount = searchTxt.length;
+    textEditor.focus();
+    var selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    var range = selection.getRangeAt(0);
+    if (deleteCount !== 0 && range) {
+      var startOffset = Math.max(range.startOffset - deleteCount, 0);
+      var endOffset = range.startOffset;
+      range.setStart(range.startContainer, startOffset);
+      range.setEnd(range.startContainer, endOffset);
+      range.deleteContents();
+    }
+    var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
+    var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
+    if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
+      range.setStart(range.startContainer.parentNode, 1);
+    }
+    if (parNode) range.insertNode(parNode);
+    if (funcNode) range.insertNode(funcNode);
+    range.collapse();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    setContext(function (draftCtx) {
+      draftCtx.functionCandidates = [];
+      draftCtx.functionHint = formulaName;
+    });
+  }, [setContext]);
   var clearSearchItemActiveClass = useCallback(function () {
     var activeFormula = getActiveFormula();
     if (activeFormula) {
@@ -1210,89 +1331,24 @@ var InputBox = function InputBox() {
     }
   }, [getActiveFormula]);
   var selectActiveFormula = useCallback(function (e) {
-    var activeFormula = getActiveFormula();
-    var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
-    if (formulaNameDiv) {
-      var formulaName = formulaNameDiv.textContent;
-      var textEditor = document.getElementById("luckysheet-rich-text-editor");
-      if (textEditor) {
-        var _getrangeseleciton;
-        var searchTxt = ((_getrangeseleciton = getrangeseleciton()) === null || _getrangeseleciton === void 0 ? void 0 : _getrangeseleciton.textContent) || "";
-        var deleteCount = searchTxt.length;
-        textEditor.focus();
-        var selection = window.getSelection();
-        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
-        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
-        if (deleteCount !== 0 && range) {
-          var startOffset = Math.max(range.startOffset - deleteCount, 0);
-          var endOffset = range.startOffset;
-          range.setStart(range.startContainer, startOffset);
-          range.setEnd(range.startContainer, endOffset);
-          range.deleteContents();
-        }
-        var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
-        var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
-        var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
-        var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
-        if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
-          range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
-        }
-        range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
-        range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
-        range === null || range === void 0 ? void 0 : range.collapse();
-        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-        if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-        setContext(function (draftCtx) {
-          draftCtx.functionCandidates = [];
-          draftCtx.functionHint = formulaName;
-        });
-      }
+    var _getActiveFormula, _getActiveFormula$que;
+    var formulaName = (_getActiveFormula = getActiveFormula()) === null || _getActiveFormula === void 0 ? void 0 : (_getActiveFormula$que = _getActiveFormula.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula$que === void 0 ? void 0 : _getActiveFormula$que.textContent;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, setContext]);
+  }, [getActiveFormula, insertSelectedFormula]);
   var selectActiveFormulaOnClick = useCallback(function (e) {
-    var activeFormula = getActiveFormula();
-    var formulaNameDiv = activeFormula === null || activeFormula === void 0 ? void 0 : activeFormula.querySelector(".luckysheet-formula-search-func");
-    if (formulaNameDiv) {
-      var formulaName = formulaNameDiv.textContent;
-      var textEditor = document.getElementById("luckysheet-rich-text-editor");
-      if (textEditor) {
-        var _getrangeseleciton2;
-        var searchTxt = ((_getrangeseleciton2 = getrangeseleciton()) === null || _getrangeseleciton2 === void 0 ? void 0 : _getrangeseleciton2.textContent) || "";
-        var deleteCount = searchTxt.length;
-        textEditor.focus();
-        var selection = window.getSelection();
-        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) === 0) return;
-        var range = selection === null || selection === void 0 ? void 0 : selection.getRangeAt(0);
-        if (deleteCount !== 0 && range) {
-          var startOffset = Math.max(range.startOffset - deleteCount, 0);
-          var endOffset = range.startOffset;
-          range.setStart(range.startContainer, startOffset);
-          range.setEnd(range.startContainer, endOffset);
-          range.deleteContents();
-        }
-        var functionStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>");
-        var lParStr = "<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>";
-        var functionNode = new DOMParser().parseFromString(functionStr, "text/html").body.childNodes[0];
-        var lParNode = new DOMParser().parseFromString(lParStr, "text/html").body.childNodes[0];
-        if (range === null || range === void 0 ? void 0 : range.startContainer.parentNode) {
-          range === null || range === void 0 ? void 0 : range.setStart(range.startContainer.parentNode, 1);
-        }
-        range === null || range === void 0 ? void 0 : range.insertNode(lParNode);
-        range === null || range === void 0 ? void 0 : range.insertNode(functionNode);
-        range === null || range === void 0 ? void 0 : range.collapse();
-        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-        if (range) selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-        setContext(function (draftCtx) {
-          draftCtx.functionCandidates = [];
-          draftCtx.functionHint = formulaName;
-        });
-      }
+    var _getActiveFormula2, _getActiveFormula2$qu;
+    preText.current = inputRef.current.innerText;
+    var formulaName = (_getActiveFormula2 = getActiveFormula()) === null || _getActiveFormula2 === void 0 ? void 0 : (_getActiveFormula2$qu = _getActiveFormula2.querySelector(".luckysheet-formula-search-func")) === null || _getActiveFormula2$qu === void 0 ? void 0 : _getActiveFormula2$qu.textContent;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
       e.preventDefault();
       e.stopPropagation();
     }
-  }, [getActiveFormula, setContext]);
+  }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = useCallback(function (e) {
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
     preText.current = inputRef.current.innerText;
@@ -1409,10 +1465,7 @@ var InputBox = function InputBox() {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     allowEdit: edit ? !isHidenRC : edit
-  })), document.activeElement === inputRef.current && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
-    style: {
-      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
-    },
+  })), (context.functionCandidates.length > 0 || context.functionHint) && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
     onMouseOver: function onMouseOver(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -1422,14 +1475,10 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     },
-    onClick: function onClick(e) {
+    onMouseDown: function onMouseDown(e) {
       selectActiveFormulaOnClick(e);
     }
-  }), /*#__PURE__*/React.createElement(FormulaHint, {
-    style: {
-      top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
-    }
-  }))));
+  }), /*#__PURE__*/React.createElement(FormulaHint, null))));
 };
 
 var ScrollBar = function ScrollBar(_ref) {
@@ -4314,6 +4363,9 @@ var Sheet = function Sheet(_ref) {
     }
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
   var onWheel = useCallback(function (e) {
+    var el = document.getElementById("function-details");
+    var isMouseOver = el === null || el === void 0 ? void 0 : el.matches(":hover");
+    if (el && isMouseOver) return;
     setContext(function (draftCtx) {
       handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
     });
@@ -10535,7 +10587,7 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     getLocaleContext: function getLocaleContext() {
       return locale(context);
     },
-    getWorkbookContect: function getWorkbookContect() {
+    getWorkbookContext: function getWorkbookContext() {
       return context;
     }
   };