@zhenliang/sheet 0.2.5-beta.6 → 0.2.5-beta.9

package/dist/core/editor/InputOptionsEditor/index.d.ts

@@ -1,18 +1,5 @@
 import type { SheetType } from "../../../type";
-import { InputNumberProps } from 'antd';
 import './index.less';
-export interface OptionItem {
-    label: string;
-    value: string;
-    info?: string;
-    children?: OptionItem[];
-}
-type inputProps = Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'> & {
-    warnMethod?: (record: any) => void;
-    rangeMethod?: (record: any) => {
-        max?: number;
-        min?: number;
-    };
-}>;
+import { OptionItem, inputProps } from './utils';
 export declare const getFormulaInputEditor: (options: OptionItem[], replaceIndex?: string, extraProps?: inputProps, getExtraProps?: ((props: SheetType.CellEditorProps) => inputProps) | undefined, choseEditor?: ((record: any) => boolean) | undefined) => SheetType.CellEditor;
 export default getFormulaInputEditor;

package/dist/core/editor/InputOptionsEditor/index.js

@@ -18,22 +18,28 @@ import { get, head, isEmpty, isNil } from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { formulaString } from "../numberEditor";
 import "./index.less";
-import { flattenOptions, getCursorPositionInSpan, getStringDiff, replaceLabelsWithValues, replaceLongestDiff, replaceValuesWithLabels, tokenize, validateVariables } from "./utils";
+import { flattenOptions, getCursorPositionInSpan, getSpanAtCursor, getStringDiff, moveCursorToSpan, replaceLabelsWithValues, replaceLongestDiff, replaceValuesWithLabels, tokenize, validateVariables } from "./utils";
 import validateCalculationExpr from "./vaildFormula";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var OPERATORS = ['=', '+', '-', '*', '/'];
-
-// 获取光标所在的 span
-var getSpanAtCursor = function getSpanAtCursor(startContainer) {
-  if (startContainer.nodeType === Node.TEXT_NODE) {
-    return startContainer.parentElement;
-  }
-  if (startContainer.nodeType === Node.ELEMENT_NODE) {
-    return startContainer;
-  }
-  return null;
-};
+var OPERATORS = ['=', '+', '-', '*', '/', '('];
+
+// // 创建 label span
+// const createLabelSpan = (label: string): HTMLElement => {
+//   const span = document.createElement('span');
+//   span.className = 'formula-editor-token-label';
+//   span.textContent = label;
+//   return span;
+// };
+
+// // 创建 empty other span
+// const createEmptyOtherSpan = (): HTMLElement => {
+//   const span = document.createElement('span');
+//   span.className = 'formula-editor-token-other';
+//   span.textContent = '';
+//   return span;
+// };
+
 export var getFormulaInputEditor = function getFormulaInputEditor(options, replaceIndex, extraProps, getExtraProps, choseEditor) {
   var _ref = extraProps || {},
     warnMethod = _ref.warnMethod,
@@ -74,6 +80,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
       _useState10 = _slicedToArray(_useState9, 2),
       inputAfterDropDownShow = _useState10[0],
       setInputAfterDropDownShow = _useState10[1];
+    var tempSpanRef = useRef(null);
     var containerRef = useRef(null);
     var inputOperatorPosition = useRef(0);
 
@@ -123,23 +130,56 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
     useEffect(function () {
       if (!open) {
         containerValueSnapShot.current = '';
+        tempSpanRef.current = null;
       }
       setInputAfterDropDownShow('');
     }, [open]);
+    var closeDorpDown = useCallback(function () {
+      setInputAfterDropDownShow('');
+      tempSpanRef.current = null;
+      // 点击div内直接关闭
+      setOpen(false);
+    }, []);
 
-    // 处理选项点击：删除用户刚输入的值，将选中的 label 放到运算符后面
+    // 处理选项点击
     var handleOptionClick = useCallback(function (opt) {
       var container = containerRef.current;
       if (!container) return;
-      var newValue = replaceLongestDiff(containerValueSnapShot.current, opt.label, inputOperatorPosition.current);
       setOpen(false);
       containerValueSnapShot.current = '';
-      var expr = newValue;
-      var valueExpr = replaceLabelsWithValues(expr, flatOptions);
-      setContainerValue(valueExpr);
-      onChange(valueExpr);
 
-      // 获取当前光标所在的 span
+      // 如果有 tempSpanRef，用新逻辑：直接替换该 span 的内容
+      if (tempSpanRef.current) {
+        tempSpanRef.current.textContent = opt.label;
+        var replacedSpan = tempSpanRef.current;
+        tempSpanRef.current = null;
+
+        // 光标移到替换后的 span 后面
+        var _allSpans = Array.from(container.querySelectorAll('span'));
+        var replacedIndex = _allSpans.indexOf(replacedSpan);
+        var _targetSpan = _allSpans[replacedIndex + 1];
+        if (!_targetSpan || _targetSpan.classList.contains('formula-editor-token-label')) {
+          _targetSpan = document.createElement('span');
+          _targetSpan.className = 'formula-editor-token-other';
+          _targetSpan.textContent = '';
+          replacedSpan.after(_targetSpan);
+        }
+        moveCursorToSpan(_targetSpan);
+
+        // 更新 containerValue
+        var newValue = container.textContent || '';
+        var valueExpr = replaceLabelsWithValues(newValue, flatOptions);
+        setContainerValue(valueExpr);
+        onChange(valueExpr);
+        return;
+      }
+
+      // 原逻辑：删除 inputAfterDropDownShow，插入新 label
+      var newValueUser = replaceLongestDiff(containerValueSnapShot.current, opt.label, inputOperatorPosition.current);
+      var expr = newValueUser;
+      var valueExprUser = replaceLabelsWithValues(expr, flatOptions);
+      setContainerValue(valueExprUser);
+      onChange(valueExprUser);
       var selection = window.getSelection();
       if (!selection || selection.rangeCount === 0) return;
       var range = selection.getRangeAt(0);
@@ -194,19 +234,16 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         targetSpan.textContent = '';
         labelSpan.after(targetSpan);
       }
-
-      // 将光标移到目标 span 的开头
-      var newRange = document.createRange();
-      newRange.selectNodeContents(targetSpan);
-      newRange.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(newRange);
+      moveCursorToSpan(targetSpan);
     }, [inputAfterDropDownShow]);
 
     // 处理输入变化
     var handleInput = useCallback(function () {
       var container = containerRef.current;
       if (!container) return;
+      if (tempSpanRef.current) {
+        closeDorpDown();
+      }
       var newValue = container.textContent || '';
       var processedValue = newValue;
       var expr = processedValue;
@@ -267,12 +304,8 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.focus();
       }
     }, [isEditing]);
-    var closeDorpDown = useCallback(function () {
-      // 点击div内直接关闭
-      setOpen(false);
-    }, []);
 
-    // 鼠标释放时，如果光标在 label span 内，移动到后一个 span 的开头
+    // 鼠标释放时，如果光标在 label span 内，打开下拉框并记录 tempSpan
     var handleMouseUp = useCallback(function () {
       var div = containerRef.current;
       if (!div) return;
@@ -285,8 +318,20 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
       if (!currentSpan || currentSpan === div) return;
       var isLabelSpan = currentSpan.classList.contains('formula-editor-token-label');
 
-      // 如果在 label span 内，移动到下一个 span 的开头
+      // 如果在 label span 内，打开下拉框并记录 tempSpan
       if (isLabelSpan) {
+        // 更新 offsetX 位置
+        var containerRect = div.getBoundingClientRect();
+        var cursorRect = range.getBoundingClientRect();
+        var cursorDistance = cursorRect ? cursorRect.left - containerRect.left : 0;
+        setOffsetX(cursorDistance < 150 ? 0 : cursorDistance - 8);
+
+        // 记录当前 label span 作为 tempSpan
+        tempSpanRef.current = currentSpan;
+
+        // 打开下拉框
+        setOpen(true);
+        // 移动到下一个 span 的开头
         var allSpans = Array.from(div.querySelectorAll('span'));
         var currentIndex = allSpans.indexOf(currentSpan);
         if (currentIndex < allSpans.length - 1) {
@@ -298,7 +343,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           selection.addRange(newRange);
         }
       }
-    }, [closeDorpDown]);
+    }, [closeDorpDown, setOffsetX, setOpen]);
     var handleKeyDown = useCallback(function (e) {
       var _currentSpan$textCont, _currentSpan$textCont2;
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
@@ -321,13 +366,13 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
 
       // 方向键：跳过 label span
       if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-        closeDorpDown();
         var position = getCursorPositionInSpan(currentSpan);
         var isAtEnd = startOffset >= textLen;
         var isAtStart = startOffset === 0;
         var isAlmostEnd = startOffset >= textLen - 1;
         var isAlmostStart = position === 1;
         if (e.key === 'ArrowRight' && isAtEnd) {
+          closeDorpDown();
           // 向右 + 在末尾 -> 跳到下一个 span 的开头（跳过 label span）
           var targetIndex = currentIndex + 1;
           while (targetIndex < allSpans.length && allSpans[targetIndex].classList.contains('formula-editor-token-label')) {
@@ -336,48 +381,35 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           if (targetIndex < allSpans.length && targetIndex !== currentIndex + 1) {
             e.preventDefault();
             var targetSpan = allSpans[targetIndex];
-            var newRange = document.createRange();
-            newRange.selectNodeContents(targetSpan);
-            newRange.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(newRange);
+            moveCursorToSpan(targetSpan);
+          }
+        } else if (e.key === 'ArrowRight' && isAlmostEnd) {
+          closeDorpDown();
+          var _targetIndex = currentIndex + 1;
+          if (_targetIndex < allSpans.length && !allSpans[_targetIndex].classList.contains('formula-editor-token-label')) {
+            e.preventDefault();
+            var _targetSpan2 = allSpans[_targetIndex];
+            moveCursorToSpan(_targetSpan2);
           }
         } else if (e.key === 'ArrowLeft' && isAtStart) {
+          closeDorpDown();
           // 向左 + 在开头 -> 跳到上一个 span 的末尾（跳过 label span）
-          var _targetIndex = currentIndex - 1;
-          while (_targetIndex >= 0 && allSpans[_targetIndex].classList.contains('formula-editor-token-label')) {
-            _targetIndex--;
+          var _targetIndex2 = currentIndex - 1;
+          while (_targetIndex2 >= 0 && allSpans[_targetIndex2].classList.contains('formula-editor-token-label')) {
+            _targetIndex2--;
           }
-          if (_targetIndex >= 0 && _targetIndex !== currentIndex - 1) {
-            e.preventDefault();
-            var _targetSpan = allSpans[_targetIndex];
-            var _newRange = document.createRange();
-            _newRange.selectNodeContents(_targetSpan);
-            _newRange.collapse(false);
-            selection.removeAllRanges();
-            selection.addRange(_newRange);
-          }
-        } else if (e.key === 'ArrowRight' && isAlmostEnd) {
-          var _targetIndex2 = currentIndex + 1;
-          if (_targetIndex2 < allSpans.length && !allSpans[_targetIndex2].classList.contains('formula-editor-token-label')) {
+          if (_targetIndex2 >= 0 && _targetIndex2 !== currentIndex - 1) {
             e.preventDefault();
-            var _targetSpan2 = allSpans[_targetIndex2];
-            var _newRange2 = document.createRange();
-            _newRange2.selectNodeContents(_targetSpan2);
-            _newRange2.collapse(true);
-            selection.removeAllRanges();
-            selection.addRange(_newRange2);
+            var _targetSpan3 = allSpans[_targetIndex2];
+            moveCursorToSpan(_targetSpan3, false);
           }
         } else if (e.key === 'ArrowLeft' && isAlmostStart) {
+          closeDorpDown();
           var _targetIndex3 = currentIndex - 1;
           if (_targetIndex3 >= 0 && !allSpans[_targetIndex3].classList.contains('formula-editor-token-label')) {
             e.preventDefault();
-            var _targetSpan3 = allSpans[_targetIndex3];
-            var _newRange3 = document.createRange();
-            _newRange3.selectNodeContents(_targetSpan3);
-            _newRange3.collapse(false);
-            selection.removeAllRanges();
-            selection.addRange(_newRange3);
+            var _targetSpan4 = allSpans[_targetIndex3];
+            moveCursorToSpan(_targetSpan4, false);
           }
         }
         return;
@@ -385,7 +417,10 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
 
       // 删除键逻辑
       if (e.key !== 'Delete' && e.key !== 'Backspace') return;
-      if (e.key === 'Backspace') {
+      if (e.key === 'Backspace' || e.key === 'Delete') {
+        if (tempSpanRef.current) {
+          closeDorpDown();
+        }
         // 检查删除后是否只剩一个空的 span
         var allSpansNow = Array.from(div.querySelectorAll('span'));
         var isOnlyOneEmptySpan = allSpansNow.length === 1 && allSpansNow[0].textContent === '';
@@ -403,31 +438,31 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           e.preventDefault();
           e.stopPropagation();
           prevSpan.remove();
-          var _newRange4 = document.createRange();
+          var newRange = document.createRange();
 
           // 如果当前 span 有内容，光标放在开头；否则找最近的有内容的 span
           if (currentSpan.textContent !== '') {
-            _newRange4.selectNodeContents(currentSpan);
-            _newRange4.collapse(true);
+            newRange.selectNodeContents(currentSpan);
+            newRange.collapse(true);
           } else {
             // 找前一个最近的有内容的 span
-            var _targetSpan4;
+            var _targetSpan5;
             for (var i = currentIndex - 2; i >= 0; i--) {
               if (allSpans[i].textContent !== '') {
-                _targetSpan4 = allSpans[i];
+                _targetSpan5 = allSpans[i];
                 break;
               }
             }
-            if (_targetSpan4) {
-              _newRange4.selectNodeContents(_targetSpan4);
-              _newRange4.collapse(false);
+            if (_targetSpan5) {
+              newRange.selectNodeContents(_targetSpan5);
+              newRange.collapse(false);
             } else {
-              _newRange4.selectNodeContents(div);
-              _newRange4.collapse(true);
+              newRange.selectNodeContents(div);
+              newRange.collapse(true);
             }
           }
           selection.removeAllRanges();
-          selection.addRange(_newRange4);
+          selection.addRange(newRange);
           return;
         }
       }
@@ -443,11 +478,11 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           if (prevText.length > 0) {
             _prevSpan.textContent = prevText.slice(0, -1);
           }
-          var _newRange5 = document.createRange();
-          _newRange5.selectNodeContents(_prevSpan);
-          _newRange5.collapse(false);
+          var _newRange = document.createRange();
+          _newRange.selectNodeContents(_prevSpan);
+          _newRange.collapse(false);
           selection.removeAllRanges();
-          selection.addRange(_newRange5);
+          selection.addRange(_newRange);
         }
       }
 
@@ -462,73 +497,73 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
           // 如果光标在 span 开头 + Delete 键，currentIndex 指向的是被删 span 的后一个，所以要 -1
           var searchIndex = startOffset === 0 ? currentIndex - 1 : currentIndex;
           // 从 searchIndex 位置往前找
-          var _targetSpan5;
+          var _targetSpan6;
           for (var _i = searchIndex; _i >= 0; _i--) {
             var span = allSpansNow[_i];
             if (span.textContent !== '') {
-              _targetSpan5 = span;
+              _targetSpan6 = span;
               break;
             }
           }
           // 如果找到的有内容 span 是 label，则把光标放在 label span 的后一个 span 的开头
-          if (_targetSpan5 && _targetSpan5.classList.contains('formula-editor-token-label')) {
-            var labelIndex = allSpansNow.indexOf(_targetSpan5);
+          if (_targetSpan6 && _targetSpan6.classList.contains('formula-editor-token-label')) {
+            var labelIndex = allSpansNow.indexOf(_targetSpan6);
             if (labelIndex < allSpansNow.length - 1) {
               var nextSpan = allSpansNow[labelIndex + 1];
-              var _newRange6 = document.createRange();
-              _newRange6.selectNodeContents(nextSpan);
-              _newRange6.collapse(true);
+              var _newRange2 = document.createRange();
+              _newRange2.selectNodeContents(nextSpan);
+              _newRange2.collapse(true);
               selection.removeAllRanges();
-              selection.addRange(_newRange6);
+              selection.addRange(_newRange2);
               return;
             }
           }
 
           // 否则把光标放在找到的 span 的末尾
-          if (_targetSpan5) {
-            var _newRange7 = document.createRange();
-            _newRange7.selectNodeContents(_targetSpan5);
-            _newRange7.collapse(false);
+          if (_targetSpan6) {
+            var _newRange3 = document.createRange();
+            _newRange3.selectNodeContents(_targetSpan6);
+            _newRange3.collapse(false);
             selection.removeAllRanges();
-            selection.addRange(_newRange7);
+            selection.addRange(_newRange3);
             return;
           }
         }
         if (!currentSpanNow || currentSpanNow === div) return;
         if (currentSpanNow.textContent === '') {
           var currentIndexNow = allSpansNow.indexOf(currentSpanNow);
-          var _newRange8 = document.createRange();
+          var _newRange4 = document.createRange();
           if (currentIndexNow > 0) {
             // 移到前一个 span 的末尾，但如果前一个 span 是 label，则移到后一个 span 的开头
-            var _targetSpan6 = allSpansNow[currentIndexNow - 1];
-            if (_targetSpan6.classList.contains('formula-editor-token-label')) {
+            var _targetSpan7 = allSpansNow[currentIndexNow - 1];
+            if (_targetSpan7.classList.contains('formula-editor-token-label')) {
               // 移到 label span 的后一个 span 的开头
               if (currentIndexNow < allSpansNow.length - 1) {
                 var _nextSpan = allSpansNow[currentIndexNow + 1];
-                _newRange8.selectNodeContents(_nextSpan);
-                _newRange8.collapse(true);
+                _newRange4.selectNodeContents(_nextSpan);
+                _newRange4.collapse(true);
               } else {
-                _newRange8.selectNodeContents(div);
-                _newRange8.collapse(false);
+                _newRange4.selectNodeContents(div);
+                _newRange4.collapse(false);
               }
             } else {
-              _newRange8.selectNodeContents(_targetSpan6);
-              _newRange8.collapse(false);
+              _newRange4.selectNodeContents(_targetSpan7);
+              _newRange4.collapse(false);
             }
             currentSpanNow.remove();
           } else if (allSpansNow.length > 1) {
             // 第一个 span 为空，移到下一个 span 的开头
             var _nextSpan2 = allSpansNow[currentIndexNow + 1];
-            _newRange8.selectNodeContents(_nextSpan2);
-            _newRange8.collapse(true);
+            _newRange4.selectNodeContents(_nextSpan2);
+            _newRange4.collapse(true);
             currentSpanNow.remove();
           } else {
             // 只有一个空 span，保持空
-            _newRange8.selectNodeContents(div);
-            _newRange8.collapse(true);
+            _newRange4.selectNodeContents(div);
+            _newRange4.collapse(true);
           }
           selection.removeAllRanges();
-          selection.addRange(_newRange8);
+          selection.addRange(_newRange4);
         }
       }, 0);
     }, []);

package/dist/core/editor/InputOptionsEditor/utils.d.ts

@@ -1,3 +1,4 @@
+import { InputNumberProps } from "antd";
 export declare const OPERATORS: string[];
 export declare const VARIABLE_REGEX: RegExp;
 export declare const NUMBER_REGEX: RegExp;
@@ -57,3 +58,18 @@ export declare const longestCommonSubsequence: (arr1: string, arr2: string) => s
 export declare const getStringDiff: (str1: any, str2: any, mode?: string) => any;
 export declare const replaceLongestDiff: (a: string, str: string, position: number) => string;
 export declare const getCursorPositionInSpan: (span: any) => any;
+export interface OptionItem {
+    label: string;
+    value: string;
+    info?: string;
+    children?: OptionItem[];
+}
+export type inputProps = Partial<Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'> & {
+    warnMethod?: (record: any) => void;
+    rangeMethod?: (record: any) => {
+        max?: number;
+        min?: number;
+    };
+}>;
+export declare const getSpanAtCursor: (startContainer: any) => HTMLElement | null;
+export declare const moveCursorToSpan: (targetSpan: HTMLElement, atStart?: boolean) => void;

package/dist/core/editor/InputOptionsEditor/utils.js

@@ -338,4 +338,26 @@ export var getCursorPositionInSpan = function getCursorPositionInSpan(span) {
   preCaretRange.selectNodeContents(span);
   preCaretRange.setEnd(range.startContainer, range.startOffset);
   return preCaretRange.toString().length;
+};
+// 获取光标所在的 span
+export var getSpanAtCursor = function getSpanAtCursor(startContainer) {
+  if (startContainer.nodeType === Node.TEXT_NODE) {
+    return startContainer.parentElement;
+  }
+  if (startContainer.nodeType === Node.ELEMENT_NODE) {
+    return startContainer;
+  }
+  return null;
+};
+
+// 将光标移到目标 span 的开头或末尾
+export var moveCursorToSpan = function moveCursorToSpan(targetSpan) {
+  var atStart = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var selection = window.getSelection();
+  if (!selection) return;
+  var newRange = document.createRange();
+  newRange.selectNodeContents(targetSpan);
+  newRange.collapse(atStart);
+  selection.removeAllRanges();
+  selection.addRange(newRange);
 };

package/dist/core/editor/InputOptionsEditor/vaildFormula.js

@@ -257,14 +257,26 @@ var Parser = /*#__PURE__*/function () {
       return true;
     }
 
-    // 解析基本表达式（括号、数字、百分比、变量）
-    // factor: '(' expr ')' | NUMBER | PERCENT | REFVAR
+    // 解析基本表达式（括号、数字、百分比、变量、带符号的数字）
+    // factor: '(' expr ')' | NUMBER | PERCENT | REFVAR | ('+' | '-') factor
+    // 注意：一元正负号后不能紧跟另一个一元正负号
   }, {
     key: "parseFactor",
     value: function parseFactor() {
       var token = this.currentToken();
       if (!token) return false;
 
+      // 处理一元正负号
+      if (token.type === 'ADD' || token.type === 'SUB') {
+        this.pos++;
+        var nextToken = this.currentToken();
+        // 一元正负号后不能是另一个一元正负号
+        if (nextToken && (nextToken.type === 'ADD' || nextToken.type === 'SUB')) {
+          return false;
+        }
+        return this.parseFactor();
+      }
+
       // 处理括号表达式
       if (token.type === 'LPAREN') {
         this.pos++;

package/dist/example/basic.js

@@ -181,7 +181,7 @@ var data = [{
   age: 41,
   address: 'Sidney No. 1 Lake Park',
   tags: ['cool', 'teacher'],
-  formula: null,
+  formula: '=(123 + -456) * price *-discount',
   amount: 100
 }];
 var App = function App() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.2.5-beta.6",
+  "version": "0.2.5-beta.9",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",