@zhenliang/sheet 0.2.5-beta.12 → 0.2.5-beta.14

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

@@ -18,7 +18,7 @@ import { formulaString } from "../numberEditor";
 import DropMenu from "./DropMenu";
 import "./index.less";
 import { useKeyEventEffect } from "./keyEventEffect";
-import { createSpan, flattenOptions, getStringDiff, moveCursorToSpan, replaceLabelsWithValues, replaceLongestDiff, replaceValuesWithLabels, SpanType, tokenize, validateVariables } from "./utils";
+import { createSpan, flattenOptions, getStringDiff, moveCursorToSpan, replaceLabelsWithValues, replaceValuesWithLabels, SpanType, tokenize, validateVariables } from "./utils";
 import validateCalculationExpr from "./vaildFormula";
 import { jsx as _jsx } from "react/jsx-runtime";
 var OPERATORS = ['=', '+', '-', '*', '/', '('];
@@ -67,7 +67,6 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
       setInputAfterDropDownShow = _useState10[1];
     var tempSpanRef = useRef(null);
     var containerRef = useRef(null);
-    var inputOperatorPosition = useRef(0);
 
     // 扁平化所有选项
     var flatOptions = useMemo(function () {
@@ -124,12 +123,6 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         setOpen(false);
         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 range = selection.getRangeAt(0);
       var startContainer = range.startContainer;
       var currentSpan = startContainer.nodeType === Node.TEXT_NODE ? startContainer.parentElement : startContainer;
@@ -174,6 +167,11 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         targetSpan = createSpan(OTHER, '');
         labelSpan.after(targetSpan);
       }
+      var newValueUser = container.textContent || '';
+      var expr = newValueUser;
+      var valueExprUser = replaceLabelsWithValues(expr, flatOptions);
+      setContainerValue(valueExprUser);
+      onChange(valueExprUser);
       moveCursorToSpan(targetSpan, true, selection);
       setOpen(false);
     }, [inputAfterDropDownShow]);
@@ -189,14 +187,6 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
       var processedValue = newValue;
       var expr = processedValue;
       var valueExpr = replaceLabelsWithValues(expr, flatOptions);
-      var oldLabelText = replaceValuesWithLabels(containerValue, flatOptions);
-      var firstDiffPosition = 0;
-      for (var i = 0; i < newValue.length; i++) {
-        if (newValue[i] !== oldLabelText[i]) {
-          firstDiffPosition = i;
-          break;
-        }
-      }
       var _getStringDiff = getStringDiff(containerValue, valueExpr),
         added = _getStringDiff.added,
         removed = _getStringDiff.removed;
@@ -215,7 +205,6 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         // 按下了运算符，下拉框刚打开，重置输入记录
         containerValueSnapShot.current = expr;
         inputStringAfterDropDownShow = '';
-        inputOperatorPosition.current = firstDiffPosition;
 
         // 获取当前光标距离 containerRef 最左边的距离
         var selection = window.getSelection();
@@ -241,6 +230,7 @@ export var getFormulaInputEditor = function getFormulaInputEditor(options, repla
         closeDorpDown: closeDorpDown,
         setOffsetX: setOffsetX,
         setOpen: setOpen,
+        handleInput: handleInput,
         containerRef: containerRef,
         tempSpanRef: tempSpanRef,
         inputAfterDropDownShow: inputAfterDropDownShow,

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

@@ -1,9 +1,10 @@
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { OptionItem } from './utils';
-declare const useKeyEventEffect: ({ closeDorpDown, setOffsetX, setOpen, containerRef, tempSpanRef, inputAfterDropDownShow, options }: {
+declare const useKeyEventEffect: ({ closeDorpDown, setOffsetX, setOpen, handleInput, containerRef, tempSpanRef, inputAfterDropDownShow, options }: {
     closeDorpDown: () => void;
     setOffsetX: (value: React.SetStateAction<number>) => void;
     setOpen: (value: React.SetStateAction<boolean>) => void;
+    handleInput: () => void;
     containerRef: React.RefObject<HTMLDivElement>;
     tempSpanRef: React.MutableRefObject<HTMLElement | null>;
     inputAfterDropDownShow: string;

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

@@ -8,11 +8,12 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import { useCallback, useMemo } from 'react';
-import { getCursorPositionInSpan, getSpanAtCursor, moveCursorToSpan } from "./utils";
+import { createSpan, getCursorPositionInSpan, getSpanAtCursor, moveCursorToSpan, SpanType } from "./utils";
 var useKeyEventEffect = function useKeyEventEffect(_ref) {
   var closeDorpDown = _ref.closeDorpDown,
     setOffsetX = _ref.setOffsetX,
     setOpen = _ref.setOpen,
+    handleInput = _ref.handleInput,
     containerRef = _ref.containerRef,
     tempSpanRef = _ref.tempSpanRef,
     inputAfterDropDownShow = _ref.inputAfterDropDownShow,
@@ -54,7 +55,7 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
   }, [closeDorpDown, setOffsetX, setOpen]);
   var handleKeyDown = useCallback(function (e) {
     var _currentSpan$textCont, _currentSpan$textCont2;
-    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Delete') {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault();
       e.stopPropagation();
       return;
@@ -122,17 +123,14 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
       }
       return;
     }
-
+    var isDeleteOpt = e.key === 'Backspace' || e.key === 'Delete';
     // 删除键逻辑
-    if (e.key !== 'Delete' && e.key !== 'Backspace') return;
-    if (e.key === 'Backspace' || e.key === 'Delete') {
+    if (!isDeleteOpt) return;
+    if (isDeleteOpt) {
       if (tempSpanRef.current) {
         closeDorpDown();
       }
-      // 检查删除后是否只剩一个空的 span
-      var allSpansNow = Array.from(div.querySelectorAll('span'));
-      var isOnlyOneEmptySpan = allSpansNow.length === 1 && allSpansNow[0].textContent === '';
-      if (isOnlyOneEmptySpan) {
+      if (!div.textContent || div.textContent === '') {
         e.preventDefault();
         e.stopPropagation();
         return;
@@ -140,7 +138,7 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
     }
 
     // 不在 label span 内，在 span 开头且前一个是 label 时，删除整个 label span
-    if (startOffset === 0 && e.key === 'Backspace' && currentIndex > 0) {
+    if (startOffset === 0 && e.key === 'BackSpace' && currentIndex > 0) {
       var prevSpan = allSpans[currentIndex - 1];
       if (prevSpan.classList.contains('formula-editor-token-label')) {
         e.preventDefault();
@@ -176,7 +174,7 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
     }
 
     // 在 span 开头 + Delete 键，光标移到前一个 span 的末尾
-    if (startOffset === 0 && e.key === 'Backspace' && currentIndex > 0) {
+    if (startOffset === 0 && e.key === 'BackSpace' && currentIndex > 0) {
       var _prevSpan = allSpans[currentIndex - 1];
       // 前一个 span 是非 label span 时，光标移到其末尾
       if (!_prevSpan.classList.contains('formula-editor-token-label')) {
@@ -187,6 +185,7 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
           _prevSpan.textContent = prevText.slice(0, -1);
         }
         moveCursorToSpan(_prevSpan, false, selection);
+        handleInput();
       }
     }
 
@@ -225,7 +224,13 @@ var useKeyEventEffect = function useKeyEventEffect(_ref) {
           return;
         }
       }
-      if (!currentSpanNow || currentSpanNow === div) return;
+      if (!currentSpanNow || currentSpanNow === div) {
+        // 插入一个空的 other span
+        var emptySpan = createSpan(SpanType.OTHER, '');
+        div.appendChild(emptySpan);
+        moveCursorToSpan(emptySpan, true, selection);
+        return;
+      }
       if (currentSpanNow.textContent === '') {
         var currentIndexNow = allSpansNow.indexOf(currentSpanNow);
         var _newRange = document.createRange();

package/dist/core/sheet/Cell.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
-import { isNil } from 'lodash';
+import { get, isNil } from 'lodash';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSetState, useSheetEvent } from "../../hooks";
 import { renderValue } from "../util";
@@ -30,6 +30,7 @@ var Cell = function Cell(props) {
     valueViewer = props.valueViewer,
     attributesRenderer = props.attributesRenderer,
     cellFixedInfo = props.cellFixedInfo;
+  var replaceIndex = cell.replaceIndex;
   var eventBus = useSheetEvent();
   var _useSetState = useSetState(),
     _useSetState2 = _slicedToArray(_useSetState, 2),
@@ -82,8 +83,9 @@ var Cell = function Cell(props) {
       setEventState({
         confirm: false
       });
+      var oldValue = replaceIndex ? get(cell.record, [replaceIndex(cell.record)]) : valueRef.current;
       var newValue = value;
-      if (newValue === valueRef.current) {
+      if (newValue === oldValue) {
         return;
       }
       // 转化一下公式

package/dist/core/table/useGroupConfig.js

@@ -165,6 +165,7 @@ export var formatGroupData = function formatGroupData(param) {
           valueViewer: colInfo.render ? colInfo.render : undefined,
           dataEditor: colInfo.editor ? colInfo.editor : undefined,
           searchKey: colInfo.searchKey,
+          replaceIndex: colInfo.replaceIndex,
           row: currentIndex,
           className: classNames(!(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex), hasRemark ? 'remark-cell' : null),
           dataIndex: colInfo.dataIndex,

package/dist/core/table/useRowSelection.d.ts

@@ -1,5 +1,5 @@
 import { SheetTableType } from "../..";
 export declare const useRowSelection: (dataSource: Record<string, unknown>[], rowSelection?: SheetTableType.TableRowSelection, hasChildren?: boolean) => [boolean[], (value: boolean[]) => void];
-export declare const formatSelectionData: (param: Pick<SheetTableType.TableProps, "columns" | "showRemark" | "rowSelection" | "dataSource" | "rowKey"> & {
+export declare const formatSelectionData: (param: Pick<SheetTableType.TableProps, "columns" | "dataSource" | "rowKey" | "showRemark" | "rowSelection"> & {
     checked: boolean[];
 }) => any[][];

package/dist/core/table/useRowSelection.js

@@ -82,6 +82,7 @@ export var formatSelectionData = function formatSelectionData(param) {
         valueViewer: colInfo.render ? colInfo.render : undefined,
         dataEditor: colInfo.editor ? colInfo.editor : undefined,
         searchKey: colInfo.searchKey,
+        replaceIndex: colInfo.replaceIndex,
         className: classNames(!(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, item, row), hasRemark ? 'remark-cell' : null),
         row: row,
         col: col,

package/dist/example/basic.js

@@ -92,7 +92,10 @@ var columns = [{
       label: '批发价',
       value: 'wholesale'
     }]
-  }], 'formula')
+  }], 'formula'),
+  replaceIndex: function replaceIndex(record) {
+    return 'formula';
+  }
 }, {
   title: 'Address',
   editable: false,
@@ -141,7 +144,7 @@ var data = [{
   age: 32,
   address: 'New York No. 1 Lake Park',
   tags: ['nice', 'developer'],
-  formula: '=price*qty',
+  formula: '=price*qty+wholesale',
   amount: 100
 }, {
   key: '2',

package/dist/type/sheet.d.ts

@@ -26,6 +26,7 @@ export type Cell = {
     dataIndex?: string;
     valueViewer?: CellViewer;
     searchKey?: (value: unknown, record?: unknown) => string;
+    replaceIndex?: (record?: unknown) => string;
     className?: string;
     align?: CellAlign;
     fixed?: Omit<CellAlign, 'center'>;

package/dist/type/sheetTable.d.ts

@@ -40,6 +40,7 @@ export type ColumnProps = {
     render?: SheetType.CellViewer;
     editor?: SheetType.CellEditor;
     searchKey?: (value: unknown, record: Record<string, unknown>) => string;
+    replaceIndex?: (record?: unknown) => string;
     fixedAllowSelect?: boolean | RecordRowMap<boolean>;
 };
 export type TableChange = {

package/package.json

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