fix: 修复表格排序后, 编辑单元格后数据更新错误 close #2573 (#2544)

* fix: 修复表格排序后, 编辑单元格后数据更新错误 close #2573 * fix: 移除误提交代码 * fix: onChange
antvis · Feb 6, 2024 · 9075896 · 9075896
1 parent f88ef9d
commit 9075896
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 57 deletions.
diff --git a/packages/s2-core/src/data-set/base-data-set.ts b/packages/s2-core/src/data-set/base-data-set.ts
@@ -116,7 +116,7 @@ export abstract class BaseDataSet {
   }
 
   public getDisplayDataSet() {
-    return this.displayData;
+    return this.displayData || [];
   }
 
   public isEmpty() {

diff --git a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/drag-copy-mask.tsx
@@ -17,7 +17,7 @@ type DragCopyProps = {
 export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
   const spreadsheet = useSpreadSheetRef();
 
-  const [startCell, setstartCell] = useState<DataCell>();
+  const [startCell, setStartCell] = useState<DataCell>();
   const [maskPosition, setMaskPosition] = useState({ right: 0, bottom: 0 });
   const [dragPoint, setDragPoint] = useState<Point>();
 
@@ -67,9 +67,9 @@ export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
 
   const getCurrentHoverCell = (event: MouseEvent) => {
     const rect = spreadsheet.getCanvasElement().getBoundingClientRect();
-    const allCelles = spreadsheet.interaction.getPanelGroupAllDataCells();
+    const allCells = spreadsheet.interaction.getPanelGroupAllDataCells();
 
-    return allCelles.find((v) =>
+    return allCells.find((v) =>
       isInCell({ y: event.y - rect.y, x: event.x - rect.x }, v),
     );
   };
@@ -81,8 +81,9 @@ export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
     const maxX = Math.max(startCellMeta.colIndex, endCellMeta.colIndex);
     const maxY = Math.max(startCellMeta.rowIndex, endCellMeta.rowIndex);
     const minY = Math.min(startCellMeta.rowIndex, endCellMeta.rowIndex);
-    const allCelles = spreadsheet.interaction.getPanelGroupAllDataCells();
-    return allCelles.filter((item) => {
+    const allCells = spreadsheet.interaction.getPanelGroupAllDataCells();
+
+    return allCells.filter((item) => {
       const itemMeta = item.getMeta();
       return (
         itemMeta.rowIndex <= maxY &&
@@ -127,25 +128,24 @@ export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
   }, 10);
 
   const dragMouseUp = (event: MouseEvent) => {
-    let targetCell = getCurrentHoverCell(event);
-
     if (!startCell) {
       return;
     }
-    if (!targetCell) {
-      targetCell = getCurrentHoverCell(lastHoverPoint as MouseEvent);
-    }
-    const source = spreadsheet.dataSet.originData;
 
+    const targetCell =
+      getCurrentHoverCell(event) ||
+      getCurrentHoverCell(lastHoverPoint as MouseEvent);
+
+    const displayData = spreadsheet.dataSet.getDisplayDataSet();
     const selectedRange = getSelectedCellRange(startCell, targetCell);
     const { fieldValue } = startCell.getMeta();
     const changedCells = selectedRange.map((item) => {
       const { rowIndex, valueField } = item.getMeta();
       if (
-        source[rowIndex] &&
-        typeof source[rowIndex][valueField] !== undefined
+        displayData[rowIndex] &&
+        typeof displayData[rowIndex][valueField] !== undefined
       ) {
-        source[rowIndex][valueField] = fieldValue;
+        displayData[rowIndex][valueField] = fieldValue;
       }
       return item;
     });
@@ -160,7 +160,7 @@ export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
     setMaskPosition({ right: 0, bottom: 0 });
     spreadsheet.off(S2Event.GLOBAL_MOUSE_MOVE, dragMove);
     spreadsheet.off(S2Event.GLOBAL_MOUSE_UP, dragMouseUp);
-    setstartCell(undefined);
+    setStartCell(undefined);
     onCopyFinished?.();
   };
 
@@ -178,12 +178,12 @@ export function DragCopyMask({ onCopyFinished }: DragCopyProps) {
 
     const rect = (event.target as HTMLElement).getBoundingClientRect();
     const { top, left } = get(event, 'target.style', {} as any);
-    const allCelles = spreadsheet.interaction.getPanelGroupAllDataCells();
-    const targetCell = allCelles.find((v) =>
+    const allCells = spreadsheet.interaction.getPanelGroupAllDataCells();
+    const targetCell = allCells.find((v) =>
       isInCell({ y: parseFloat(top), x: parseFloat(left) }, v),
     );
     setDragPoint({ x: rect.x, y: rect.y });
-    setstartCell(targetCell as DataCell);
+    setStartCell(targetCell as DataCell);
   };
 
   useEffect(() => {

diff --git a/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/drag-copy/index.tsx
@@ -8,11 +8,7 @@ import { useSpreadSheetRef } from '../../../../utils/SpreadSheetContext';
 import { DragCopyMask } from './drag-copy-mask';
 import './drag-copy-point.less';
 
-export type DragCopyProps = {
-  onChange?: (val) => void;
-};
-
-export const DragCopyPoint = memo((props: DragCopyProps) => {
+export const DragCopyPoint = memo(() => {
   const spreadsheet = useSpreadSheetRef();
 
   const [scroll, setScroll] = useState<
@@ -134,7 +130,6 @@ export const DragCopyPoint = memo((props: DragCopyProps) => {
   useS2Event(S2Event.ROW_CELL_CLICK, batchSelected, spreadsheet);
   useS2Event(S2Event.CORNER_CELL_CLICK, batchSelected, spreadsheet);
   useS2Event(S2Event.DATA_CELL_BRUSH_SELECTION, batchSelected, spreadsheet);
-
   useS2Event(S2Event.DATA_CELL_CLICK, fixPosition, spreadsheet);
 
   return (
@@ -152,3 +147,5 @@ export const DragCopyPoint = memo((props: DragCopyProps) => {
     </div>
   );
 });
+
+DragCopyPoint.displayName = 'DragCopyPoint';
diff --git a/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx b/packages/s2-react/src/components/sheets/editable-sheet/edit-cell/index.tsx
@@ -1,5 +1,12 @@
 import type { Event as CanvasEvent } from '@antv/g-canvas';
-import { BaseCell, S2Event, SpreadSheet, type ViewMeta } from '@antv/s2';
+import {
+  BaseCell,
+  S2Event,
+  SpreadSheet,
+  type DataType,
+  type S2CellType,
+  type ViewMeta,
+} from '@antv/s2';
 import { Input } from 'antd';
 import { merge, pick } from 'lodash';
 import React, {
@@ -20,22 +27,22 @@ import './index.less';
 
 export interface CustomProps {
   style: React.CSSProperties;
-  onChange: (val: string) => void;
+  onChange: (value: string) => void;
   onSave: () => void;
-  value: any;
+  value: string;
   spreadsheet: SpreadSheet;
-  cell: any;
+  cell: S2CellType;
 }
 
-type onChangeProps = {
-  onChange?: (val: any[]) => void;
+type EditCellProps = {
+  onChange?: (data: DataType[]) => void;
   onDataCellEditEnd?: (meta: ViewMeta) => void;
   trigger?: number;
   CustomComponent?: React.FunctionComponent<CustomProps>;
 };
 
 function EditCellComponent(
-  props: InvokeComponentProps<{ event: CanvasEvent } & onChangeProps>,
+  props: InvokeComponentProps<{ event: CanvasEvent } & EditCellProps>,
 ) {
   const { params, resolver } = props;
   const spreadsheet = useSpreadSheetRef();
@@ -64,7 +71,6 @@ function EditCellComponent(
     height: cellHeight,
   } = useMemo(() => {
     const scroll = spreadsheet.facet.getScrollOffset();
-
     const cellMeta = pick(cell.getMeta(), ['x', 'y', 'width', 'height']);
 
     cellMeta.x -= scroll.scrollX || 0;
@@ -74,26 +80,24 @@ function EditCellComponent(
 
     return cellMeta;
   }, [cell, spreadsheet]);
-  const [inputVal, setinputVal] = useState(cell.getMeta().fieldValue);
 
+  const [inputVal, setInputVal] = useState(cell.getMeta().fieldValue);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setTimeout(() => {
       // 防止触发表格全选
-      if (containerRef.current) {
-        containerRef.current!.click();
-      }
-      if (inputRef.current) {
-        inputRef.current!.focus();
-      }
+      containerRef.current?.click();
+      // 开启 preventScroll, 防止页面有滚动条时触发滚动
+      inputRef.current?.focus({ preventScroll: true });
     });
   }, []);
 
   const onSave = () => {
     const { rowIndex, valueField } = cell.getMeta();
-    spreadsheet.dataSet.originData[rowIndex][valueField] = inputVal;
+    const displayData = spreadsheet.dataSet.getDisplayDataSet();
+    displayData[rowIndex][valueField] = inputVal;
     spreadsheet.render(true);
 
     onDataCellEditEnd?.(
@@ -105,10 +109,7 @@ function EditCellComponent(
       }),
     );
 
-    if (onChange) {
-      onChange(spreadsheet.dataSet.originData);
-    }
-
+    onChange?.(displayData);
     resolver(true);
   };
 
@@ -119,7 +120,7 @@ function EditCellComponent(
     }
   };
 
-  const styleProps = React.useMemo(() => {
+  const styleProps = React.useMemo<React.CSSProperties>(() => {
     return {
       left: cellLeft,
       top: cellTop,
@@ -129,8 +130,8 @@ function EditCellComponent(
     };
   }, []);
 
-  const changeValue = (val: string) => {
-    setinputVal(val);
+  const onChangeValue = (val: string) => {
+    setInputVal(val);
   };
 
   return (
@@ -150,20 +151,20 @@ function EditCellComponent(
         <CustomComponent
           cell={cell}
           spreadsheet={spreadsheet}
-          value={inputVal}
+          value={inputVal as string}
           style={styleProps}
-          onChange={changeValue}
+          onChange={onChangeValue}
           onSave={onSave}
         />
       ) : (
         <Input.TextArea
           required
           style={styleProps}
           className={'s2-edit-cell'}
-          value={inputVal as any}
+          value={inputVal as string}
           ref={inputRef}
           onChange={(e) => {
-            setinputVal(e.target.value);
+            setInputVal(e.target.value);
           }}
           onBlur={onSave}
           onKeyDown={onKeyDown}
@@ -173,15 +174,15 @@ function EditCellComponent(
   );
 }
 
-const EditCell = memo(
-  ({ onChange, onDataCellEditEnd, CustomComponent }: onChangeProps) => {
+export const EditCell: React.FC<EditCellProps> = memo(
+  ({ onChange, onDataCellEditEnd, CustomComponent }) => {
     const spreadsheet = useSpreadSheetRef();
 
     const cb = useCallback(
-      (e: CanvasEvent) => {
+      (event: CanvasEvent) => {
         invokeComponent(
           EditCellComponent,
-          { event: e, onChange, onDataCellEditEnd, CustomComponent },
+          { event, onChange, onDataCellEditEnd, CustomComponent },
           spreadsheet,
         );
       },
@@ -194,4 +195,4 @@ const EditCell = memo(
   },
 );
 
-export { EditCell };
+EditCell.displayName = 'EditCell';