Remove changed cols when we remove rows

CrystallizeAPI · Jul 22, 2024 · 30c3ad9 · 30c3ad9
1 parent 065e70a
commit 30c3ad9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/ui/styles/components/data-grid/data-grid.client.tsx b/src/ui/styles/components/data-grid/data-grid.client.tsx
@@ -25,7 +25,6 @@ const DataGrid = ({ items, components }: DataEditorProps) => {
         onRemoveSelected,
         isRemoveDisabled,
         itemsLength,
-        rerenderKey,
     } = useDataGrid({
         items,
         components,

diff --git a/src/ui/styles/components/data-grid/use-data-grid.ts b/src/ui/styles/components/data-grid/use-data-grid.ts
@@ -31,12 +31,13 @@ type UseDataGridProps = {
 
 export const useDataGrid = ({ items, components }: UseDataGridProps) => {
     const itemsRef = useRef(items);
-    const [changedColumns, setChangedColumns] = useState<Map<string, Item>>(new Map());
+    const [changedColumns, setChangedColumns] = useState<Map<string, Item[0][]>>(new Map());
     const [colsWidthMap, setColsWidthMap] = useState<Map<string, number>>(new Map());
     const [gridSelection, setGridSelection] = useState<GridSelection>();
 
     useEffect(() => {
         itemsRef.current = items;
+        setChangedColumns(new Map());
     }, [items]);
 
     const onColumnResize = useCallback((col: { id?: string }, newSize: number) => {
@@ -117,55 +118,63 @@ export const useDataGrid = ({ items, components }: UseDataGridProps) => {
     );
 
     const onCellEdited = useCallback(
-        (item: Item, val: GridCell) => {
-            const [col, row] = item;
+        ([col, row]: Item, val: GridCell) => {
             const column = columns[col];
             const componentId = column.id?.split('component-')[1] ?? '';
             const component = itemsRef.current?.[row][componentId];
+            const itemId = itemsRef.current?.[row].id;
 
             if (!component) {
                 return;
             }
 
             if (component.type === 'singleLine') {
                 component.content = { text: (val as TextCell).data };
-                setChangedColumns((prev) => new Map(prev.set(item.join('-'), item)));
             }
 
             if (component.type === 'richText') {
                 component.content = { json: [], html: [], plainText: [(val as TextCell).data] };
-                setChangedColumns((prev) => new Map(prev.set(item.join('-'), item)));
             }
+
+            setChangedColumns((prev) => new Map(prev.set(itemId, [...(prev.get(itemId) ?? []), col])));
         },
         [columns],
     );
 
     const highlightRegions = useMemo(
         () =>
-            [...changedColumns.values()].map(([col, row]) => {
-                return {
-                    color: '#ffde9933',
-                    range: { x: col, y: row, width: 1, height: 1 },
-                };
-            }),
+            [...changedColumns.keys()].flatMap((itemId) =>
+                [...(changedColumns.get(itemId) ?? [])].map((col) => {
+                    const row = itemsRef.current.findIndex((item) => item.id === itemId);
+                    return { color: '#ffde9933', range: { x: col, y: row, width: 1, height: 1 } };
+                }),
+            ),
         [changedColumns],
     );
 
     // @ts-expect-error rows items is available but TS allows only access in class
     const selectedRowsItem = gridSelection?.rows.items;
 
     const onRemoveSelected = useCallback(() => {
-        const indexToRemove = selectedRowsItem.flatMap(([startIndex, endIndex]: [number, number]) =>
+        const removedIds = selectedRowsItem.flatMap(([startIndex, endIndex]: [number, number]) =>
             Array(endIndex - startIndex)
                 .fill(0)
-                .map((_, index) => startIndex + index),
-        );
+                .map((_, index) => itemsRef.current[startIndex + index].id),
+        ) as string[];
 
-        itemsRef.current = itemsRef.current.filter((_, index) => !indexToRemove.includes(index));
+        itemsRef.current = itemsRef.current.filter((item) => !removedIds.includes(item.id));
+
+        setChangedColumns((prev) => {
+            const copy = new Map(prev);
+            removedIds.forEach((itemId) => copy.delete(itemId));
+            return copy;
+        });
 
         setGridSelection(undefined);
     }, [selectedRowsItem]);
 
+    console.log(highlightRegions);
+
     return {
         theme,
         columns,