feat(UIKIT-309,NewDataGrid): Добавлена обработка emptyCellValue (#1087)

Co-authored-by: ooops_o_O <[email protected]>
kaluga-astral · Aug 14, 2024 · a33ab86 · a33ab86
1 parent a4f0f49
commit a33ab86
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 11 deletions.
diff --git a/packages/components/src/NewDataGrid/Cell/useLogic/useLogic.ts b/packages/components/src/NewDataGrid/Cell/useLogic/useLogic.ts
@@ -13,12 +13,16 @@ export const useLogic = <TData extends Record<string, CellValue>>({
 }: UseLogicParams<TData>) => {
   const { format, field } = cell;
 
+  const isValidValue = (value: CellValue): boolean => {
+    return Boolean(value) || value === 0;
+  };
+
   const formattedValue = useMemo(() => {
-    if (format) {
+    if (format && isValidValue(format(row))) {
       return format(row);
     }
 
-    if (field) {
+    if (field && isValidValue(row[field])) {
       return row[field];
     }
 

diff --git a/packages/components/src/NewDataGrid/NewDataGrid.stories.tsx b/packages/components/src/NewDataGrid/NewDataGrid.stories.tsx
@@ -628,6 +628,58 @@ export const DisabledLastCell = () => {
   );
 };
 
+export const EmptyCellValue = () => {
+  type DataTypeEmptyCell = {
+    id: string;
+    documentName?: string;
+    recipient?: string;
+    createDate: string;
+  };
+
+  const fakeDataTemplate: DataTypeEmptyCell = {
+    id: '1',
+    documentName: 'Договор №1',
+    createDate: '2022-03-24T17:50:40.206Z',
+  };
+
+  const fakeColumns: DataGridColumns<DataTypeEmptyCell>[] = [
+    {
+      field: 'documentName',
+      label: 'Наименование документа',
+      sortable: true,
+    },
+    {
+      field: 'recipient',
+      label: 'Получатель',
+      sortable: true,
+    },
+    {
+      field: 'createDate',
+      label: 'Дата создания',
+      sortable: true,
+      format: ({ createDate }) => new Date(createDate).toLocaleDateString(),
+    },
+  ];
+
+  const columns = makeColumns(fakeColumns);
+  const fakeData: DataGridRowWithOptions<DataTypeEmptyCell>[] = [
+    {
+      id: '123456789',
+      createDate: makeRandomDate(),
+    },
+    ...makeDataList(fakeDataTemplate),
+  ];
+
+  return (
+    <NewDataGrid<DataTypeEmptyCell>
+      keyId="id"
+      rows={fakeData}
+      columns={columns}
+      onRetry={() => {}}
+    />
+  );
+};
+
 /**
  * Таблица можем работать с вложенными структурами
  */

diff --git a/packages/components/src/NewDataGrid/NewDataGrid.test.tsx b/packages/components/src/NewDataGrid/NewDataGrid.test.tsx
@@ -7,6 +7,7 @@ import { ActionCell } from '../ActionCell';
 
 import { NewDataGrid } from './NewDataGrid';
 import type { DataGridColumns, DataGridSort } from './types';
+import { type DataGridRowWithOptions } from './types';
 
 describe('NewDataGrid', () => {
   it('Названия колонок отображаются', () => {
@@ -49,6 +50,70 @@ describe('NewDataGrid', () => {
     expect(title).toBeVisible();
   });
 
+  it.each([undefined, null, '', NaN, '—'])(
+    'EmptyCellValue отображается если нет данных',
+    async (cell) => {
+      renderWithTheme(
+        <NewDataGrid
+          keyId="cell"
+          rows={[{ cell }]}
+          columns={[
+            {
+              field: 'cell',
+              label: 'Наименование',
+            },
+          ]}
+          onRetry={() => {}}
+          emptyCellValue="—"
+        />,
+      );
+
+      const emptyCell = screen.getByText('—');
+
+      expect(emptyCell).toBeVisible();
+    },
+  );
+
+  it('EmptyCellValue отображается если format возвращает не валидные данные', async () => {
+    type DataTypeEmptyCell = {
+      id: string;
+      recipient?: string;
+    };
+
+    const fakeColumns: DataGridColumns<DataTypeEmptyCell>[] = [
+      {
+        field: 'recipient',
+        label: 'Получатель',
+        sortable: true,
+        format: ({ recipient }) => recipient,
+      },
+    ];
+
+    const fakeData: DataGridRowWithOptions<DataTypeEmptyCell>[] = [
+      {
+        id: '1',
+      },
+      {
+        id: '2',
+        recipient: 'ИП Иванов О.В.',
+      },
+    ];
+
+    renderWithTheme(
+      <NewDataGrid
+        keyId="id"
+        rows={fakeData}
+        columns={fakeColumns}
+        onRetry={() => {}}
+        emptyCellValue="—"
+      />,
+    );
+
+    const emptyCell = screen.getByText('—');
+
+    expect(emptyCell).toBeVisible();
+  });
+
   describe('Иконка сортировки', () => {
     it('Отображается при двух или более записях и sortable=true', () => {
       renderWithTheme(

diff --git a/packages/components/src/NewDataGrid/NewDataGrid.tsx b/packages/components/src/NewDataGrid/NewDataGrid.tsx
@@ -1,4 +1,6 @@
-import { type ReactNode, useCallback } from 'react';
+import { type ReactNode, useCallback, useContext } from 'react';
+
+import { ConfigContext } from '../ConfigProvider';
 
 import {
   EXPANDED_LEVEL_BY_DEFAULT,
@@ -126,7 +128,7 @@ export type NewDataGridProps<
 
   /**
    * Заглушка для пустых ячеек (если отсутствует field и filter и renderCell)
-   * @default '-'
+   * @default '—'
    */
   emptyCellValue?: ReactNode;
 
@@ -166,6 +168,7 @@ export const NewDataGrid = <
 ) => {
   const { isDataGridDisabled, headProps, bodyProps, loaderProps } =
     useLogic(props);
+  const { emptySymbol } = useContext(ConfigContext);
 
   const {
     columns,
@@ -182,7 +185,7 @@ export const NewDataGrid = <
     tree,
     keyId,
     activeRowId,
-    emptyCellValue,
+    emptyCellValue = emptySymbol,
     className,
     onRowClick,
     onSort,

diff --git a/packages/components/src/NewDataGrid/faker.ts b/packages/components/src/NewDataGrid/faker.ts
@@ -9,6 +9,14 @@ import type {
 } from './types';
 
 type DataType = {
+  id: string;
+  documentName?: string;
+  recipient?: string;
+  createDate: string;
+  actions?: object;
+};
+
+type TreeDataType = {
   id: string;
   documentName: string;
   recipient: string;
@@ -28,10 +36,10 @@ export const makeRandomDate = () => {
   return randomDate.toISOString();
 };
 
-export const makeColumns = (
-  columnsTemplate: DataGridColumns<DataType>[],
-  mergedColumns: DataGridColumns<DataType>[] = [],
-): DataGridColumns<DataType>[] => {
+export const makeColumns = <T extends DataType>(
+  columnsTemplate: DataGridColumns<T>[],
+  mergedColumns: DataGridColumns<T>[] = [],
+): DataGridColumns<T>[] => {
   const mergedColumnsMap = mergedColumns.reduce(
     (acc, { field, ...columnsOptions }) => {
       if (field) {
@@ -75,9 +83,9 @@ export const makeDataListWithTree = (
   options?: {
     isNotSelectable?: boolean;
     childrenCount?: number;
-    childrenColumns?: DataGridRowOptionColumns<DataType>[];
+    childrenColumns?: DataGridRowOptionColumns<TreeDataType>[];
   },
-): DataType[] => {
+): TreeDataType[] => {
   const { isNotSelectable, childrenCount = 3, childrenColumns } = options || {};
 
   return Array.from({ length }).map((_, i) => {