Merge pull request #275 from komarovalexander/dev

Add rowData to newRow validation
komarovalexander · Jan 23, 2023 · 9fb68bc · 9fb68bc
2 parents de97aea + 4719367
commit 9fb68bc
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 45 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,9 @@
 {
   "prettier.jsxSingleQuote": true,
-  "prettier.printWidth": 140
+  "prettier.printWidth": 160,
+  "html.format.wrapLineLength": 160,
+  "editor.formatOnSaveMode": "modificationsIfAvailable",
+  "editor.formatOnSave": false,
+  "prettier.enable": false,
+  "prettier.embeddedLanguageFormatting": "off"
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.8.3",
+  "version": "7.8.4",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/lib/Components/CellEditorState/CellEditorState.tsx b/src/lib/Components/CellEditorState/CellEditorState.tsx
@@ -1,13 +1,14 @@
+import { ActionType, EditingMode } from '../../enums';
 import React, { useCallback, useEffect, useState } from 'react';
-
 import { closeEditor, updateEditorValue } from '../../actionCreators';
-import { ActionType, EditingMode } from '../../enums';
-import { ICellEditorProps } from '../../props';
+
+import CellEditorValidation from '../CellEditorValidation/CellEditorValidation';
 import { DispatchFunc } from '../../types';
-import { replaceValue } from '../../Utils/DataUtils';
+import { ICellEditorProps } from '../../props';
 import { addEscEnterKeyEffect } from '../../Utils/EffectUtils';
 import { getValidationValue } from '../../Utils/Validation';
-import CellEditorValidation from '../CellEditorValidation/CellEditorValidation';
+import { newRowId } from '../../const';
+import { replaceValue } from '../../Utils/DataUtils';
 
 const CellEditorState: React.FunctionComponent<ICellEditorProps> = (props) => {
   const {
@@ -25,7 +26,7 @@ const CellEditorState: React.FunctionComponent<ICellEditorProps> = (props) => {
   const [rowDataState, changeRowData] = useState(rowData);
   const [editorValueState, changeEditorValue] = useState(value);
   const isCellEditingMode = editingMode === EditingMode.Cell;
-  validationMessage = isCellEditingMode || validationMessage
+  validationMessage = rowKeyValue === newRowId || isCellEditingMode || validationMessage
     ? getValidationValue(editorValueState, rowDataState, column, validation) || ''
     : validationMessage;
   const onValueStateChange = (action: any): void => {

diff --git a/src/lib/Components/NewRow/NewRow.tsx b/src/lib/Components/NewRow/NewRow.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-
-import { newRowId } from '../../const';
+import DataRow from '../DataRow/DataRow';
 import { EditingMode } from '../../enums';
 import { INewRowProps } from '../../props';
-import DataRow from '../DataRow/DataRow';
+import React from 'react';
+import { getNewRowDataFromEditableCells } from '../../Utils/CellUtils';
+import { newRowId } from '../../const';
 
 const NewRow: React.FunctionComponent<INewRowProps> = ({
   childComponents,
@@ -15,26 +15,26 @@ const NewRow: React.FunctionComponent<INewRowProps> = ({
   rowKeyField,
   validation,
 }) => {
-    return (
-      <DataRow
-        childComponents={childComponents}
-        columns={columns}
-        dispatch={dispatch}
-        format={format}
-        editableCells={editableCells}
-        editingMode={EditingMode.None}
-        groupColumnsCount={groupColumnsCount}
-        isDetailsRowShown={false}
-        isSelectedRow={false}
-        rowData={{}}
-        rowKeyField={rowKeyField}
-        rowKeyValue={newRowId}
-        rowReordering={false}
-        validation={validation}
-        selectedRows={[]}
-        rowEditableCells={editableCells}
-      />
-    );
+  return (
+    <DataRow
+      childComponents={childComponents}
+      columns={columns}
+      dispatch={dispatch}
+      format={format}
+      editableCells={editableCells}
+      editingMode={EditingMode.None}
+      groupColumnsCount={groupColumnsCount}
+      isDetailsRowShown={false}
+      isSelectedRow={false}
+      rowData={getNewRowDataFromEditableCells(editableCells, columns)}
+      rowKeyField={rowKeyField}
+      rowKeyValue={newRowId}
+      rowReordering={false}
+      validation={validation}
+      selectedRows={[]}
+      rowEditableCells={editableCells}
+    />
+  );
 };
 
 export default NewRow;
diff --git a/src/lib/Utils/CellUtils.test.ts b/src/lib/Utils/CellUtils.test.ts
@@ -1,13 +1,16 @@
-
-
-import { closeEditor, updateEditorValue, updatePopupPosition } from '../actionCreators';
 import { ActionType, EditingMode } from '../enums';
-import { EditableCell } from '../models';
-import { PopupPosition } from '../Models/PopupPosition';
 import {
-  addItemToEditableCells, getCellEditorDispatchHandler, getEditableCell, isEditableCell,
+  addItemToEditableCells,
+  getCellEditorDispatchHandler,
+  getEditableCell,
+  getNewRowDataFromEditableCells,
+  isEditableCell,
   removeItemFromEditableCells,
 } from './CellUtils';
+import { closeEditor, updateEditorValue, updatePopupPosition } from '../actionCreators';
+
+import { EditableCell } from '../models';
+import { PopupPosition } from '../Models/PopupPosition';
 
 describe('CellUtils', () => {
   it('isEditableCell equals true', () => {
@@ -96,6 +99,38 @@ describe('CellUtils', () => {
       expect(dispatch).toBeCalledWith(action);
     });
   });
+  describe('getNewRowDataFromEditableCells', () => {
+    it('default', () => {
+      const editableCells: EditableCell[] = [
+        {
+          columnKey: 'column1',
+          rowKeyValue: 1,
+          editorValue: 11,
+        },
+        {
+          columnKey: 'column2',
+          rowKeyValue: 1,
+          editorValue: 22,
+        },
+        {
+          columnKey: 'column3',
+          rowKeyValue: 1,
+        },
+      ];
+      const result = getNewRowDataFromEditableCells(editableCells, [
+        {
+          key: 'column1',
+        },
+        {
+          key: 'column2',
+        },
+        {
+          key: 'column3',
+        },
+      ]);
+      expect(result).toEqual({ column1: 11, column2: 22 });
+    });
+  });
 });
 
 it('should dispatch the action', () => {

diff --git a/src/lib/Utils/CellUtils.ts b/src/lib/Utils/CellUtils.ts
@@ -1,15 +1,27 @@
-import { updateCellValue, updatePopupPosition } from '../actionCreators';
-import { newRowId } from '../const';
 import { ActionType, EditingMode } from '../enums';
 import { Column, EditableCell } from '../models';
-import { PopupPosition } from '../Models/PopupPosition';
+import { updateCellValue, updatePopupPosition } from '../actionCreators';
+
 import { DispatchFunc } from '../types';
+import { PopupPosition } from '../Models/PopupPosition';
+import { getColumn } from './ColumnUtils';
 import { getCopyOfArrayAndAddItem } from './ArrayUtils';
+import { newRowId } from '../const';
+import { replaceValue } from './DataUtils';
 
 export const getNewRowEditableCells = (editableCells: EditableCell[]) => {
   return editableCells && editableCells.filter(c => c.rowKeyValue === newRowId)
 };
 
+export const getNewRowDataFromEditableCells = (editableCells: EditableCell[], columns: Column[]) => {
+  return editableCells.reduce((acc, item) => {
+    if (!item.hasOwnProperty('editorValue')) return acc;
+    const column = getColumn(columns, item.columnKey);
+    acc = replaceValue(acc, column!, item.editorValue);
+    return acc;
+  }, {});
+};
+
 export const isEditableCell = (editingMode: EditingMode, column: Column, rowEditableCells: EditableCell[]): boolean => {
   if (column.isEditable !== undefined) {
     return column.isEditable;

diff --git a/src/lib/Utils/ColumnUtils.test.ts b/src/lib/Utils/ColumnUtils.test.ts
@@ -1,8 +1,29 @@
+import { getColumn, getField, getFieldParts, getLastField, getLastFieldParents } from './ColumnUtils';
 
 import defaultOptions from '../defaultOptions';
-import { getField, getFieldParts, getLastField, getLastFieldParents } from './ColumnUtils';
 
 describe('ColumnUtils', () => {
+  describe('getColumn', () => {
+    it('default', () => {
+      const result = getColumn(
+        [
+          {
+            key: 'column1',
+          },
+          {
+            key: 'column2',
+          },
+          {
+            key: 'column3',
+          },
+        ],
+        'column3'
+      );
+      expect(result).toEqual({
+        key: 'column3',
+      });
+    });
+  });
   it('getField from field', () => {
     const field = getField({ key: '2.2', field: '2.3' });
     expect(field).toEqual('2.3');

diff --git a/src/lib/Utils/ColumnUtils.ts b/src/lib/Utils/ColumnUtils.ts
@@ -1,6 +1,8 @@
-import defaultOptions from '../defaultOptions';
 import { Column } from '../models';
 import { Field } from '../types';
+import defaultOptions from '../defaultOptions';
+
+export const getColumn = (columns: Column[], columnKey: string) => columns.find((c) => c.key === columnKey);
 
 export const getField = (column: Column): Field => {
   return column.field || column.key;

diff --git a/src/lib/Utils/DataUtils.ts b/src/lib/Utils/DataUtils.ts
@@ -1,6 +1,7 @@
+import { getField, getFieldParts, getLastField, getLastFieldParents } from './ColumnUtils';
+
 import { Column } from '../Models/Column';
 import { Field } from '../types';
-import { getField, getFieldParts, getLastField, getLastFieldParents } from './ColumnUtils';
 
 export const getParentValue = (rowData: any, fieldParents: Field[]) => {
   const parentValue = fieldParents.reduce((previousValue, currentValue) => {
@@ -47,7 +48,7 @@ export const getValueByField = (rowData: any, field: Field) => {
   return o;
 };
 
-const replaceValueForField = (rowData: any, field: Field, newValue: any, fieldParents?: Field[]): void => {
+const replaceValueForField = (rowData: any, field: Field, newValue: any, fieldParents?: Field[]): any => {
   let result = { ...rowData };
   if (fieldParents && fieldParents.length) {
     const parentValue = getParentValue(result, fieldParents) || {};