@leankylin-sheet/react 3.1.44 → 3.1.46

package/dist/components/SheetOverlay/FormulaSearch/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function getPlainTextCursorOffset(editableDiv: any): number;
+export declare function getrangeseleciton(): ParentNode | ChildNode | null | undefined;
+export declare function moveCursorToPosition(editableDiv: any, targetPosition: any): void;

package/dist/index.css

@@ -1036,6 +1036,8 @@ html::-webkit-scrollbar-button {
   background: #fff;
   z-index: 1003;
   width: 300px;
+  max-height: 300px;
+  overflow: auto;
 }
 
 .luckysheet-formula-search-c .luckysheet-formula-search-item {
@@ -1044,7 +1046,7 @@ html::-webkit-scrollbar-button {
   cursor: pointer;
 }
 .luckysheet-formula-search-item:hover {
-  background-color: #f1f1f1 !important;
+  /* background-color: #f1f1f1 !important; */
 }
 
 .luckysheet-formula-search-c

package/dist/index.esm.css

@@ -1036,6 +1036,8 @@ html::-webkit-scrollbar-button {
   background: #fff;
   z-index: 1003;
   width: 300px;
+  max-height: 300px;
+  overflow: auto;
 }
 
 .luckysheet-formula-search-c .luckysheet-formula-search-item {
@@ -1044,7 +1046,7 @@ html::-webkit-scrollbar-button {
   cursor: pointer;
 }
 .luckysheet-formula-search-item:hover {
-  background-color: #f1f1f1 !important;
+  /* background-color: #f1f1f1 !important; */
 }
 
 .luckysheet-formula-search-c

package/dist/index.esm.js

@@ -159,6 +159,57 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 var defaultRefs = {
   globalCache: {
@@ -688,39 +739,295 @@ var ContentEditable = function ContentEditable(_ref) {
   }));
 };
 
+function getLastTextNode(element) {
+  var lastText = null;
+  function traverse(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      lastText = node;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      for (var i = node.childNodes.length - 1; i >= 0; i -= 1) {
+        traverse(node.childNodes[i]);
+        if (lastText) break;
+      }
+    }
+  }
+  traverse(element);
+  return lastText;
+}
+function getPlainTextCursorOffset(editableDiv) {
+  var selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return -1;
+  var range = selection.getRangeAt(0);
+  if (!editableDiv.contains(range.commonAncestorContainer)) {
+    return -1;
+  }
+  var textNodes = [];
+  function collectTextNodes(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      textNodes.push(node);
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      for (var i = 0; i < node.childNodes.length; i += 1) {
+        collectTextNodes(node.childNodes[i]);
+      }
+    }
+  }
+  collectTextNodes(editableDiv);
+  var cursorTextNode = null;
+  var offsetInNode = 0;
+  var startContainer = range.startContainer;
+  var startOffset = range.startOffset;
+  if (startContainer.nodeType === Node.TEXT_NODE) {
+    cursorTextNode = startContainer;
+    offsetInNode = startOffset;
+  } else if (startContainer.nodeType === Node.ELEMENT_NODE) {
+    var childNodes = startContainer.childNodes;
+    var prevTextNode = null;
+    for (var i = 0; i < startOffset; i += 1) {
+      var child = childNodes[i];
+      if (child.nodeType === Node.TEXT_NODE) {
+        prevTextNode = child;
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        var lastText = getLastTextNode(child);
+        if (lastText) prevTextNode = lastText;
+      }
+    }
+    if (prevTextNode) {
+      var _prevTextNode$textCon;
+      cursorTextNode = prevTextNode;
+      offsetInNode = ((_prevTextNode$textCon = prevTextNode.textContent) === null || _prevTextNode$textCon === void 0 ? void 0 : _prevTextNode$textCon.length) || 0;
+    } else {
+      return 0;
+    }
+  }
+  var totalOffset = 0;
+  for (var _i = 0, _textNodes = textNodes; _i < _textNodes.length; _i++) {
+    var node = _textNodes[_i];
+    if (node === cursorTextNode) {
+      totalOffset += offsetInNode;
+      break;
+    } else {
+      var _node$textContent;
+      totalOffset += ((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.length) || 0;
+    }
+  }
+  return totalOffset;
+}
+function getrangeseleciton() {
+  var _anchorNode$parentNod, _anchorNode$parentNod2, _anchorNode$parentEle, _anchorNode$parentEle2;
+  var currSelection = window.getSelection();
+  if (!currSelection) return null;
+  var anchorNode = currSelection.anchorNode,
+    anchorOffset = currSelection.anchorOffset;
+  if (!anchorNode) return null;
+  if (((_anchorNode$parentNod = anchorNode.parentNode) === null || _anchorNode$parentNod === void 0 ? void 0 : (_anchorNode$parentNod2 = _anchorNode$parentNod.nodeName) === null || _anchorNode$parentNod2 === void 0 ? void 0 : _anchorNode$parentNod2.toLowerCase()) === "span" && anchorOffset !== 0) {
+    var txt = _.trim(anchorNode.textContent || "");
+    if (txt.length === 0 && anchorNode.parentNode.previousSibling) {
+      var ahr = anchorNode.parentNode.previousSibling;
+      txt = _.trim(ahr.textContent || "");
+      return ahr;
+    }
+    return anchorNode.parentNode;
+  }
+  var anchorElement = anchorNode;
+  if (anchorElement.id === "luckysheet-rich-text-editor" || anchorElement.id === "luckysheet-functionbox-cell") {
+    var _$last;
+    var _txt = _.trim((_$last = _.last(anchorElement.querySelectorAll("span"))) === null || _$last === void 0 ? void 0 : _$last.innerText);
+    if (_txt.length === 0 && anchorElement.querySelectorAll("span").length > 1) {
+      var _ahr = anchorElement.querySelectorAll("span");
+      _txt = _.trim(_ahr[_ahr.length - 2].innerText);
+      return _ahr === null || _ahr === void 0 ? void 0 : _ahr[0];
+    }
+    return _.last(anchorElement.querySelectorAll("span"));
+  }
+  if ((anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$parentEle = anchorNode.parentElement) === null || _anchorNode$parentEle === void 0 ? void 0 : _anchorNode$parentEle.id) === "luckysheet-rich-text-editor" || (anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$parentEle2 = anchorNode.parentElement) === null || _anchorNode$parentEle2 === void 0 ? void 0 : _anchorNode$parentEle2.id) === "luckysheet-functionbox-cell" || anchorOffset === 0) {
+    var newAnchorNode = anchorOffset === 0 ? anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.parentNode : anchorNode;
+    if (newAnchorNode === null || newAnchorNode === void 0 ? void 0 : newAnchorNode.previousSibling) {
+      return newAnchorNode === null || newAnchorNode === void 0 ? void 0 : newAnchorNode.previousSibling;
+    }
+  }
+  return null;
+}
+function moveCursorToPosition(editableDiv, targetPosition) {
+  if (!editableDiv || editableDiv.contentEditable !== "true") {
+    console.warn('目标元素必须是可编辑的div（contenteditable="true"）');
+    return;
+  }
+  if (targetPosition < 0) {
+    targetPosition = 0;
+  }
+  var textNodesInfo = [];
+  var totalLength = 0;
+  function traverseNodes(node) {
+    if (!node) return;
+    if (node.nodeType === Node.TEXT_NODE) {
+      var textLength = node.textContent.length;
+      totalLength += textLength;
+      textNodesInfo.push({
+        node: node,
+        cumulativeLength: totalLength
+      });
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      Array.from(node.childNodes).forEach(function (child) {
+        return traverseNodes(child);
+      });
+    }
+  }
+  traverseNodes(editableDiv);
+  var targetNode = null;
+  var offsetInNode = 0;
+  if (totalLength <= targetPosition) {
+    if (textNodesInfo.length > 0) {
+      var lastNodeInfo = textNodesInfo[textNodesInfo.length - 1];
+      targetNode = lastNodeInfo.node;
+      offsetInNode = lastNodeInfo.node.textContent.length;
+    }
+  } else {
+    var prevCumulativeLength = 0;
+    var _iterator = _createForOfIteratorHelper(textNodesInfo),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var info = _step.value;
+        if (info.cumulativeLength > targetPosition) {
+          targetNode = info.node;
+          offsetInNode = targetPosition - prevCumulativeLength;
+          break;
+        }
+        prevCumulativeLength = info.cumulativeLength;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  if (targetNode) {
+    var selection = window.getSelection();
+    selection.removeAllRanges();
+    var range = document.createRange();
+    range.setStart(targetNode, offsetInNode);
+    range.setEnd(targetNode, offsetInNode);
+    selection.addRange(range);
+  }
+}
+
 var FormulaSearch = function FormulaSearch(props) {
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     refs = _useContext.refs,
     settings = _useContext.settings;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    n = _useState2[0],
+    setN = _useState2[1];
+  var wrapperRf = useRef(null);
+  var nRef = useRef(n);
+  nRef.current = n;
+  useEffect(function () {
+    if (context.functionCandidates.length) {
+      setN(context.functionCandidates[0].n);
+    }
+  }, [context.functionCandidates]);
+  var fListRef = useRef([]);
+  fListRef.current = context.functionCandidates;
+  var inputN = function inputN(fnName) {
+    var _refs$cellInput$curre, _editor$textContent;
+    var offsetIndex = getPlainTextCursorOffset(refs.cellInput.current);
+    var text = ((_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 ? void 0 : _refs$cellInput$curre.innerText) || "";
+    var editor = getrangeseleciton();
+    var replaceText = (_editor$textContent = editor.textContent) === null || _editor$textContent === void 0 ? void 0 : _editor$textContent.trim();
+    var replaceTextLength = (replaceText === null || replaceText === void 0 ? void 0 : replaceText.length) || 0;
+    var newText = (text === null || text === void 0 ? void 0 : text.slice(0, offsetIndex - replaceTextLength)) + fnName + (text === null || text === void 0 ? void 0 : text.slice(offsetIndex));
+    refs.cellInput.current.innerHTML = functionHTMLGenerate(newText);
+    moveCursorToPosition(refs.cellInput.current, offsetIndex - replaceTextLength + fnName.length);
+  };
+  var viewActive = function viewActive() {
+    var _wrapperRf$current;
+    var aItem = (_wrapperRf$current = wrapperRf.current) === null || _wrapperRf$current === void 0 ? void 0 : _wrapperRf$current.querySelector(".luckysheet-formula-search-item-active");
+    if (aItem) {
+      aItem === null || aItem === void 0 ? void 0 : aItem.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  };
+  useEffect(function () {
+    var _refs$cellInput$curre2;
+    var onChange = function onChange(e) {
+      var _fListRef$current;
+      if (((_fListRef$current = fListRef.current) === null || _fListRef$current === void 0 ? void 0 : _fListRef$current.length) <= 0) {
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setN(function (_n) {
+          var _fListRef$current2, _fListRef$current3;
+          var currentIndex = Math.max((_fListRef$current2 = fListRef.current) === null || _fListRef$current2 === void 0 ? void 0 : _fListRef$current2.findIndex(function (item) {
+            return item.n === _n;
+          }), 0);
+          return (_fListRef$current3 = fListRef.current[(currentIndex + 1) % fListRef.current.length]) === null || _fListRef$current3 === void 0 ? void 0 : _fListRef$current3.n;
+        });
+        setTimeout(function () {
+          viewActive();
+        }, 200);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setN(function (_n) {
+          var _fListRef$current4, _fListRef$current5;
+          var currentIndex = Math.max((_fListRef$current4 = fListRef.current) === null || _fListRef$current4 === void 0 ? void 0 : _fListRef$current4.findIndex(function (item) {
+            return item.n === _n;
+          }), 0);
+          return (_fListRef$current5 = fListRef.current[(currentIndex - 1) % fListRef.current.length]) === null || _fListRef$current5 === void 0 ? void 0 : _fListRef$current5.n;
+        });
+        setTimeout(function () {
+          viewActive();
+        }, 200);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (nRef.current) {
+          inputN("".concat(nRef.current, "("));
+        }
+      }
+    };
+    (_refs$cellInput$curre2 = refs.cellInput.current) === null || _refs$cellInput$curre2 === void 0 ? void 0 : _refs$cellInput$curre2.addEventListener("keydown", onChange);
+    return function () {
+      var _refs$cellInput$curre3;
+      (_refs$cellInput$curre3 = refs.cellInput.current) === null || _refs$cellInput$curre3 === void 0 ? void 0 : _refs$cellInput$curre3.removeEventListener("keydown", onChange);
+    };
+  }, [refs.cellInput.current]);
   if (_.isEmpty(context.functionCandidates)) return null;
-  function moveCursorToEnd(editor) {
-    var leftParen = editor.querySelector(".luckysheet-formula-text-lpar");
-    var rightParen = editor.querySelector(".luckysheet-formula-text-rpar");
-    var range = document.createRange();
-    var selection = window.getSelection();
-    range.setStartAfter(leftParen);
-    range.setEndBefore(rightParen);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
   if (settings.renderFormulaSearch) {
     return settings.renderFormulaSearch(context.functionCandidates, functionHTMLGenerate, refs.cellInput.current);
   }
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
     id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c"
+    className: "luckysheet-formula-search-c",
+    ref: wrapperRf,
+    onWheel: function onWheel(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onWheelCapture: function onWheelCapture(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }), context.functionCandidates.map(function (v) {
     return /*#__PURE__*/React.createElement("div", {
-      onClick: function onClick() {
-        var _refs$cellInput$curre;
-        refs.cellInput.current.innerHTML = functionHTMLGenerate("=".concat(v.n, "()"));
-        (_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 ? void 0 : _refs$cellInput$curre.focus();
-        moveCursorToEnd(refs.cellInput.current);
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        inputN("".concat(v.n, "("));
+      },
+      onMouseEnter: function onMouseEnter() {
+        setN(v.n);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
       },
       key: v.n,
       "data-func": v.n,
-      className: "luckysheet-formula-search-item"
+      className: "luckysheet-formula-search-item ".concat(n === v.n && "luckysheet-formula-search-item-active")
     }, /*#__PURE__*/React.createElement("div", {
       className: "luckysheet-formula-search-func"
     }, v.n), /*#__PURE__*/React.createElement("div", {
@@ -1014,7 +1321,7 @@ var InputBox = function InputBox() {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     allowEdit: edit ? !isHidenRC : edit
-  })), document.activeElement === inputRef.current && ( /*#__PURE__*/React.createElement(React.Fragment, null, (_settings$renderEdito = settings.renderEditorSelector) === null || _settings$renderEdito === void 0 ? void 0 : _settings$renderEdito.call(settings, inputRef.current), /*#__PURE__*/React.createElement(FormulaSearch, {
+  })), document.activeElement === inputRef.current && ( /*#__PURE__*/React.createElement(React.Fragment, null, (_settings$renderEdito = settings.renderEditorSelector) === null || _settings$renderEdito === void 0 ? void 0 : _settings$renderEdito.call(settings, inputRef.current, context.functionCandidates, context.functionHint, context.formulaCache.functionlistMap), /*#__PURE__*/React.createElement(FormulaSearch, {
     style: {
       top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
     }
@@ -5532,8 +5839,10 @@ var Toolbar = function Toolbar(_ref) {
     if (!container) return;
     var moreButtonWidth = 50;
     for (var i = itemLocations.length - 1; i >= 0; i -= 1) {
+      var _container$querySelec;
       var loc = itemLocations[i];
-      if (loc + moreButtonWidth < container.clientWidth) {
+      var wrapperWidth = container.clientWidth - (((_container$querySelec = container.querySelector(".leankylin-toolbar-right")) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.clientWidth) || 0);
+      if (loc + moreButtonWidth < wrapperWidth) {
         setToolbarWrapIndex(i - itemLocations.length + settings.toolbarItems.length);
         if (i === itemLocations.length - 1) {
           setMoreItems(null);
@@ -6551,7 +6860,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null, (_settings$toolbarRigh = settings.toolbarRightRender) === null || _settings$toolbarRigh === void 0 ? void 0 : _settings$toolbarRigh.call(settings));
+  })) : null, settings.toolbarRightRender ? ( /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-toolbar-right"
+  }, (_settings$toolbarRigh = settings.toolbarRightRender) === null || _settings$toolbarRigh === void 0 ? void 0 : _settings$toolbarRigh.call(settings))) : null);
 };
 
 var LocationBox = function LocationBox() {