diff --git a/.vscode/settings.json b/.vscode/settings.json index f2151782..7044007b 100644 --- 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 index c5fd6f64..8f435305 100644 --- 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 index 9d7c2417..0237c029 100644 --- 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 = (props) => { const { @@ -25,7 +26,7 @@ const CellEditorState: React.FunctionComponent = (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 index 87ed8173..ad88c7ea 100644 --- 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 = ({ childComponents, @@ -15,26 +15,26 @@ const NewRow: React.FunctionComponent = ({ rowKeyField, validation, }) => { - return ( - - ); + return ( + + ); }; export default NewRow; diff --git a/src/lib/Utils/CellUtils.test.ts b/src/lib/Utils/CellUtils.test.ts index 33ba82ef..d6915bf5 100644 --- 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 index 0c5d2bb0..bf73feb5 100644 --- 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 index 016047b3..542a8961 100644 --- 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 index f9bb89f5..568afdac 100644 --- 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 index 16277990..5b6dd5ae 100644 --- 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) || {};