Update behavior for edit process (error with TextArea initial value) (#176)

* update behavior for edit flow

* lint fix

* Update CHANGELOG.md

* Update screenshot

---------

Co-authored-by: Mikhail Volkov <[email protected]>

Author: vitPinchuk

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-## 1.8.0 (IN PROGRESS)
+## 1.8.0 (2024-11-21)
 
 ### Features / Enhancements
 
@@ -10,6 +10,7 @@
 - Added custom value to editable select field (#165)
 - Updated group expanding for empty cells (#169)
 - Added type check for text area (#172)
+- Updated behavior for edit process (error with TextArea initial value) (#176)
 
 ## 1.7.0 (2024-11-16)
 

src/components/Table/hooks/useEditableData.test.ts

@@ -1,6 +1,9 @@
 import { Row } from '@tanstack/react-table';
 import { act, renderHook } from '@testing-library/react';
 
+import { ColumnEditorType } from '@/types';
+import { createColumnAccessorFn, createColumnMeta } from '@/utils';
+
 import { useEditableData } from './useEditableData';
 
 /**
@@ -22,8 +25,15 @@ describe('useEditableData', () => {
       ...row,
     }) as any;
 
+  /**
+   * Default Table
+   */
+  const defaultTable = {
+    getAllColumns: () => [],
+  };
+
   it('Should allow to start edit', async () => {
-    const { result } = renderHook(() => useEditableData({ table: {} as any, onUpdateRow: jest.fn() }));
+    const { result } = renderHook(() => useEditableData({ table: defaultTable as any, onUpdateRow: jest.fn() }));
 
     const row = createRow({ id: '1', original: { name: 'abc' } });
     await act(async () => result.current.onStartEdit(row));
@@ -32,7 +42,7 @@ describe('useEditableData', () => {
   });
 
   it('Should allow to cancel edit', async () => {
-    const { result } = renderHook(() => useEditableData({ table: {} as any, onUpdateRow: jest.fn() }));
+    const { result } = renderHook(() => useEditableData({ table: defaultTable as any, onUpdateRow: jest.fn() }));
 
     const row = createRow({ id: '1', original: { name: 'abc' } });
 
@@ -44,7 +54,7 @@ describe('useEditableData', () => {
   });
 
   it('Should allow to change row data', async () => {
-    const { result } = renderHook(() => useEditableData({ table: {} as any, onUpdateRow: jest.fn() }));
+    const { result } = renderHook(() => useEditableData({ table: defaultTable as any, onUpdateRow: jest.fn() }));
 
     const row = createRow({ id: '1', original: { name: 'abc' } });
 
@@ -61,7 +71,7 @@ describe('useEditableData', () => {
 
   it('Should allow to save row data', async () => {
     const onUpdateRow = jest.fn();
-    const { result } = renderHook(() => useEditableData({ table: {} as any, onUpdateRow }));
+    const { result } = renderHook(() => useEditableData({ table: defaultTable as any, onUpdateRow }));
 
     const row = createRow({ id: '1', original: { name: 'abc' } });
 
@@ -88,7 +98,7 @@ describe('useEditableData', () => {
 
   it('Should reset saving state if update error', async () => {
     const onUpdateRow = jest.fn().mockRejectedValue(null);
-    const { result } = renderHook(() => useEditableData({ table: {} as any, onUpdateRow }));
+    const { result } = renderHook(() => useEditableData({ table: defaultTable as any, onUpdateRow }));
 
     const row = createRow({ id: '1', original: { name: 'abc' } });
 
@@ -109,4 +119,55 @@ describe('useEditableData', () => {
     expect(result.current.row).toEqual(row);
     expect(result.current.isSaving).toBeFalsy();
   });
+
+  it('Should allow to start edit and replace value for TextArea editors', async () => {
+    const columns = [
+      {
+        id: 'name',
+        accessorFn: createColumnAccessorFn('name'),
+        columnDef: {
+          meta: createColumnMeta({
+            editable: false,
+          }),
+        },
+      },
+      {
+        id: 'value',
+        accessorFn: createColumnAccessorFn('value'),
+        columnDef: {
+          meta: createColumnMeta({
+            editable: true,
+            editor: {
+              type: ColumnEditorType.NUMBER,
+            },
+          }),
+        },
+      },
+      {
+        id: 'text',
+        accessorFn: createColumnAccessorFn('text'),
+        columnDef: {
+          meta: createColumnMeta({
+            editable: true,
+            editor: {
+              type: ColumnEditorType.TEXTAREA,
+            },
+          }),
+        },
+      },
+    ];
+
+    const currentTable = {
+      getAllColumns: () => columns,
+    };
+
+    const { result } = renderHook(() => useEditableData({ table: currentTable as any, onUpdateRow: jest.fn() }));
+
+    const row = createRow({ id: '1', original: { name: 'abc', value: 10, text: 'text test\n' } });
+    const expectedRow = createRow({ id: '1', original: { name: 'abc', value: 10, text: 'text test\\n' } });
+
+    await act(async () => result.current.onStartEdit(row));
+
+    expect(result.current.row).toEqual(expectedRow);
+  });
 });

src/components/Table/hooks/useEditableData.ts

@@ -1,6 +1,8 @@
-import { createRow, Row, Table } from '@tanstack/react-table';
+import { CoreRow, createRow, Row, Table } from '@tanstack/react-table';
 import { useCallback, useMemo, useState } from 'react';
 
+import { ColumnEditorType } from '@/types';
+
 /**
  * Use Editable Data
  */
@@ -24,9 +26,43 @@ export const useEditableData = <TData>({
   /**
    * Start Edit
    */
-  const onStartEdit = useCallback((row: Row<TData>) => {
-    setRow(row);
-  }, []);
+  const onStartEdit = useCallback(
+    (row: Row<TData>) => {
+      /**
+       * Columns
+       */
+      const columns = table.getAllColumns();
+
+      /**
+       * Update original row and replace initial value for text area editors
+       */
+      const updatedOriginalRow = Object.entries(row.original as CoreRow<TData>).reduce<{ [key: string]: unknown }>(
+        (acc, [key, value]) => {
+          const foundColumn = columns.find((obj) => obj.id === key);
+
+          /**
+           * Update text area value
+           */
+          if (
+            foundColumn?.columnDef.meta?.editable &&
+            foundColumn?.columnDef.meta?.editor?.type === ColumnEditorType.TEXTAREA
+          ) {
+            acc[key] = value.replaceAll('\n', '\\n');
+          } else {
+            acc[key] = value;
+          }
+          return acc;
+        },
+        {}
+      );
+
+      /**
+       * Set row with updated original row option
+       */
+      setRow(createRow(table, row.id, updatedOriginalRow as TData, row.index, row.depth));
+    },
+    [table]
+  );
 
   /**
    * Cancel Edit