Merge pull request #412 from komarovalexander/dev

Add cell oldValue info to build-in cell editing actions
komarovalexander · May 14, 2024 · dc80637 · dc80637
2 parents 8a0ac9f + 5dc2b00
commit dc80637
Show file tree

Hide file tree

Showing 28 changed files with 106 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "9.0.1",
+  "version": "9.1.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/lib/Components/CellEditorBoolean/CellEditorBoolean.test.tsx b/src/lib/Components/CellEditorBoolean/CellEditorBoolean.test.tsx
@@ -42,10 +42,11 @@ describe('CellEditorBoolean', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { checked: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'fieldName',
             rowKeyValue: 2,
+            oldValue: 'columnFieldValue',
             type: ActionType.UpdateCellValue,
             value: false,
         });
@@ -55,8 +56,8 @@ describe('CellEditorBoolean', () => {
         const wrapper = mount(<CellEditorBoolean {...props} />);
 
         wrapper.find('input').props().onBlur!({} as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.CloseEditor,
             columnKey: 'fieldName',
             rowKeyValue: 2,

diff --git a/src/lib/Components/CellEditorBoolean/CellEditorBoolean.tsx b/src/lib/Components/CellEditorBoolean/CellEditorBoolean.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-
 import { closeEditor, updateCellValue } from '../../actionCreators';
-import defaultOptions from '../../defaultOptions';
+
 import { ICellEditorProps } from '../../props';
-import { isEmpty } from '../../Utils/CommonUtils';
+import React from 'react';
+import defaultOptions from '../../defaultOptions';
 import { getElementCustomization } from '../../Utils/ComponentUtils';
+import { isEmpty } from '../../Utils/CommonUtils';
 
 const CellEditorBoolean: React.FunctionComponent<ICellEditorProps> = (props) => {
     const {
@@ -20,7 +20,11 @@ const CellEditorBoolean: React.FunctionComponent<ICellEditorProps> = (props) =>
         autoFocus,
         type: 'checkbox',
         checked: value || false,
-        onChange: (event) => dispatch(updateCellValue(rowKeyValue, column.key, event.currentTarget.checked)),
+        onChange: (event) => dispatch(updateCellValue(
+            rowKeyValue,
+            column.key,
+            event.currentTarget.checked,
+            value)),
         onBlur: () => dispatch(closeEditor(rowKeyValue, column.key))
     }, props, childComponents?.cellEditorInput);
     return (

diff --git a/src/lib/Components/CellEditorDate/CellEditorDate.test.tsx b/src/lib/Components/CellEditorDate/CellEditorDate.test.tsx
@@ -41,8 +41,8 @@ describe('CellEditorDate', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { value: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'fieldName',
             rowKeyValue: 2,
             type: ActionType.UpdateCellValue,
@@ -54,8 +54,8 @@ describe('CellEditorDate', () => {
         const wrapper = mount(<CellEditorDate {...props} />);
 
         wrapper.find('input').props().onBlur!({} as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.CloseEditor,
             columnKey: 'fieldName',
             rowKeyValue: 2,

diff --git a/src/lib/Components/CellEditorDate/CellEditorDate.tsx b/src/lib/Components/CellEditorDate/CellEditorDate.tsx
@@ -27,7 +27,9 @@ const CellEditorDate: React.FunctionComponent<ICellEditorProps> = (props) => {
             dispatch(updateCellValue(
                 rowKeyValue,
                 column.key,
-                newValue && new Date(newValue.getTime() + newValue.getTimezoneOffset() * 60000)));
+                newValue && new Date(newValue.getTime() + newValue.getTimezoneOffset() * 60000),
+                value
+            ));
         },
         onBlur: () => dispatch(closeEditor(rowKeyValue, column.key))
     }, props, childComponents?.cellEditorInput);

diff --git a/src/lib/Components/CellEditorNumber/CellEditorNumber.test.tsx b/src/lib/Components/CellEditorNumber/CellEditorNumber.test.tsx
@@ -42,8 +42,8 @@ describe('CellEditorNumber', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { value: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'fieldName',
             rowKeyValue: 1,
             type: ActionType.UpdateCellValue,
@@ -55,8 +55,8 @@ describe('CellEditorNumber', () => {
         const wrapper = mount(<CellEditorNumber {...props} />);
         wrapper.find('input').simulate('blur');
 
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.CloseEditor,
             columnKey: 'fieldName',
             rowKeyValue: 1,

diff --git a/src/lib/Components/CellEditorNumber/CellEditorNumber.tsx b/src/lib/Components/CellEditorNumber/CellEditorNumber.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-
 import { closeEditor, updateCellValue } from '../../actionCreators';
-import defaultOptions from '../../defaultOptions';
+
 import { ICellEditorProps } from '../../props';
+import React from 'react';
+import defaultOptions from '../../defaultOptions';
 import { getElementCustomization } from '../../Utils/ComponentUtils';
 
 const CellEditorNumber: React.FunctionComponent<ICellEditorProps> = (props) => {
@@ -21,7 +21,12 @@ const CellEditorNumber: React.FunctionComponent<ICellEditorProps> = (props) => {
         value: value === null || value === undefined ? '' : value,
         onChange: (event) => {
             const newValue = event.currentTarget.value !== '' ? Number(event.currentTarget.value) : null;
-            dispatch(updateCellValue(rowKeyValue, column.key, newValue));
+            dispatch(updateCellValue(
+                rowKeyValue,
+                column.key,
+                newValue,
+                value
+            ));
         },
         onBlur: () => {
             dispatch(closeEditor(rowKeyValue, column.key));

diff --git a/src/lib/Components/CellEditorState/CellEditorState.tsx b/src/lib/Components/CellEditorState/CellEditorState.tsx
@@ -42,7 +42,7 @@ const CellEditorState: React.FunctionComponent<ICellEditorProps> = (props) => {
     const closeHandler = useCallback(() => {
         if (!isCellEditingMode || !validationMessage) {
             if (editorValueState !== value) {
-                dispatch(updateEditorValue(rowKeyValue, column.key, editorValueState));
+                dispatch(updateEditorValue(rowKeyValue, column.key, editorValueState, value));
             }
             if (isCellEditingMode){
                 close();

diff --git a/src/lib/Components/CellEditorString/CellEditorString.test.tsx b/src/lib/Components/CellEditorString/CellEditorString.test.tsx
@@ -42,8 +42,8 @@ describe('CellEditorNumber', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { value: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'fieldName',
             rowKeyValue: 1,
             type: ActionType.UpdateCellValue,
@@ -55,8 +55,8 @@ describe('CellEditorNumber', () => {
         const wrapper = mount(<CellEditorString {...props} />);
         wrapper.find('input').simulate('blur');
 
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.CloseEditor,
             columnKey: 'fieldName',
             rowKeyValue: 1,

diff --git a/src/lib/Components/CellEditorString/CellEditorString.tsx b/src/lib/Components/CellEditorString/CellEditorString.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-
 import { closeEditor, updateCellValue } from '../../actionCreators';
-import defaultOptions from '../../defaultOptions';
+
 import { ICellEditorProps } from '../../props';
+import React from 'react';
+import defaultOptions from '../../defaultOptions';
 import { getElementCustomization } from '../../Utils/ComponentUtils';
 
 const CellEditorString: React.FunctionComponent<ICellEditorProps> = (props) => {
@@ -20,7 +20,12 @@ const CellEditorString: React.FunctionComponent<ICellEditorProps> = (props) => {
         type: 'text',
         value: value || '',
         onChange: (event) => {
-            dispatch(updateCellValue(rowKeyValue, column.key, event.currentTarget.value));
+            dispatch(updateCellValue(
+                rowKeyValue,
+                column.key,
+                event.currentTarget.value,
+                value
+            ));
         },
         onBlur: () => {
             dispatch(closeEditor(rowKeyValue, column.key));

diff --git a/src/lib/Components/CellText/CellText.test.tsx b/src/lib/Components/CellText/CellText.test.tsx
@@ -40,8 +40,8 @@ describe('CellText', () => {
         const wrapper = mount(<CellText {...props} />);
 
         wrapper.find('.ka-cell-text').simulate('click');
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.OpenEditor,
             columnKey: 'columnField',
             rowKeyValue: 1,
@@ -53,6 +53,6 @@ describe('CellText', () => {
             <CellText {...props} editingMode={EditingMode.None} />
         );
         wrapper.find('.ka-cell-text').simulate('click');
-        expect(props.dispatch).toBeCalledTimes(0);
+        expect(props.dispatch).toHaveBeenCalledTimes(0);
     });
 });
diff --git a/src/lib/Components/DataRow/DataRow.test.tsx b/src/lib/Components/DataRow/DataRow.test.tsx
@@ -62,6 +62,6 @@ describe('DataRow', () => {
                 attachTo: document.createElement('tbody'),
             }
         );
-        expect(ref).toBeCalled();
+        expect(ref).toHaveBeenCalled();
     });
 });
diff --git a/src/lib/Components/FilterRowBoolean/FilterRowBoolean.test.tsx b/src/lib/Components/FilterRowBoolean/FilterRowBoolean.test.tsx
@@ -46,8 +46,8 @@ describe('FilterRowBoolean', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { checked: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: column.key,
             filterRowValue: newValue,
             type: ActionType.UpdateFilterRowValue,
@@ -67,8 +67,8 @@ describe('FilterRowBoolean', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { checked: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.UpdateFilterRowValue,
             filterRowValue: undefined,
             columnKey: column.key,

diff --git a/src/lib/Components/FilterRowDate/FilterRowDate.test.tsx b/src/lib/Components/FilterRowDate/FilterRowDate.test.tsx
@@ -37,8 +37,8 @@ describe('FliterRowDate', () => {
         wrapper.find('input').props().onChange!({
             currentTarget: { value: newValue },
         } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             type: ActionType.UpdateFilterRowValue,
             filterRowValue: newValue,
             columnKey: 'nameKey',

diff --git a/src/lib/Components/FilterRowNumber/FilterRowNumber.test.tsx b/src/lib/Components/FilterRowNumber/FilterRowNumber.test.tsx
@@ -32,8 +32,8 @@ describe('FilterRowNumber', () => {
         const wrapper = mount(<FilterRowNumber {...props} column={column} />);
 
         wrapper.find('input').props().onChange!({currentTarget: { value: newValue} } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'nameKey',
             filterRowValue: newValue,
             type: ActionType.UpdateFilterRowValue,

diff --git a/src/lib/Components/FilterRowString/FilterRowString.test.tsx b/src/lib/Components/FilterRowString/FilterRowString.test.tsx
@@ -34,8 +34,8 @@ describe('FilterRowString', () => {
         const wrapper = mount(<FilterRowString {...props} column={column} />);
 
         wrapper.find('input').props().onChange!({currentTarget: { value: newValue} } as any);
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith(
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith(
             { type: ActionType.UpdateFilterRowValue, columnKey: 'nameKey', filterRowValue: newValue },
         );
     });

diff --git a/src/lib/Components/GroupRowContent/GroupRowContent.test.tsx b/src/lib/Components/GroupRowContent/GroupRowContent.test.tsx
@@ -35,8 +35,8 @@ describe('GroupRowContent', () => {
             attachTo: document.createElement('tr'),
         });
         wrapper.find('.ka-icon-group-arrow').simulate('click');
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             groupKey: ['group'],
             type: ActionType.UpdateGroupsExpanded,
         });

diff --git a/src/lib/Components/HeadCellContent/HeadCellContent.test.tsx b/src/lib/Components/HeadCellContent/HeadCellContent.test.tsx
@@ -30,8 +30,8 @@ describe('HeadCellContent', () => {
     it('onClick should dispath ChangeSorting', () => {
         const wrapper = mount(<HeadCellContent {...props} column={{ key: 'fieldTest', sortDirection: SortDirection.Ascend }} />);
         wrapper.find('.ka-thead-cell-content').simulate('click');
-        expect(props.dispatch).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledWith({
             columnKey: 'fieldTest',
             type: ActionType.UpdateSortDirection,
         });

diff --git a/src/lib/Components/HeadCellResize/HeadCellResize.test.tsx b/src/lib/Components/HeadCellResize/HeadCellResize.test.tsx
@@ -32,12 +32,12 @@ describe('HeadCellResize', () => {
         const wrapper = mount(<HeadCellResize {...props} />);
         const preventDefault = jest.fn();
         wrapper.simulate('mousedown', { preventDefault });
-        expect(preventDefault).toBeCalledTimes(1);
-        expect(props.dispatch).toBeCalledTimes(0);
+        expect(preventDefault).toHaveBeenCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledTimes(0);
         simulant.fire(document.body, 'mousemove');
-        expect(props.dispatch).toBeCalledTimes(1);
+        expect(props.dispatch).toHaveBeenCalledTimes(1);
         simulant.fire(document.body, 'mouseup');
-        expect(props.dispatch).toBeCalledTimes(2);
+        expect(props.dispatch).toHaveBeenCalledTimes(2);
     });
 
     it('should use parentWidth for resizing', () => {

diff --git a/src/lib/Components/PagingIndex/PagingIndex.test.tsx b/src/lib/Components/PagingIndex/PagingIndex.test.tsx
@@ -26,8 +26,8 @@ it('onClick should dispath UpdatePageIndex on click', () => {
         <PagingIndex {...props} pageIndex={2} dispatch={dispatch} />
     );
     wrapper.find('.ka-paging-page-index').first().simulate('click');
-    expect(dispatch).toBeCalledTimes(1);
-    expect(dispatch).toBeCalledWith({
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatch).toHaveBeenCalledWith({
         pageIndex: 2,
         type: ActionType.UpdatePageIndex,
     });

diff --git a/src/lib/Components/PagingPages/PagingPages.test.tsx b/src/lib/Components/PagingPages/PagingPages.test.tsx
@@ -33,7 +33,7 @@ describe('PagingPages', () => {
 
     it('set page index as 0 in case it out of the pages lenght', () => {
         mount(<PagingPages {...props} pageIndex={3} />);
-        expect(props.dispatch).toBeCalledWith({
+        expect(props.dispatch).toHaveBeenCalledWith({
             pageIndex: 0,
             type: ActionType.UpdatePageIndex,
         });

diff --git a/src/lib/Components/PagingSize/PagingSize.test.tsx b/src/lib/Components/PagingSize/PagingSize.test.tsx
@@ -38,8 +38,8 @@ it('onClick should dispath UpdatePageSize on click', () => {
     const dispatch = jest.fn();
     const wrapper = mount(<PagingSize {...props} dispatch={dispatch} />);
     wrapper.find('.ka-paging-size').first().simulate('click');
-    expect(dispatch).toBeCalledTimes(1);
-    expect(dispatch).toBeCalledWith({
+    expect(dispatch).toHaveBeenCalledTimes(1);
+    expect(dispatch).toHaveBeenCalledWith({
         pageSize: 5,
         type: ActionType.UpdatePageSize,
     });

diff --git a/src/lib/Components/TableWrapper/TableWrapper.test.tsx b/src/lib/Components/TableWrapper/TableWrapper.test.tsx
@@ -32,7 +32,7 @@ describe('TableWrapper', () => {
     it('should not dispatch ScrollTable on scroll', () => {
         const wrapper = mount(<TableWrapper {...tableProps} />);
         expect(wrapper.find('.ka-table-wrapper').prop('onScroll')).toBeUndefined();
-        expect(tableProps.dispatch).toBeCalledTimes(0);
+        expect(tableProps.dispatch).toHaveBeenCalledTimes(0);
     });
 
     it('should dispatch ScrollTable on scroll in case of virtual scrolling', () => {
@@ -47,8 +47,8 @@ describe('TableWrapper', () => {
         const scrollTop = 11;
 
         wrapper.find('.ka-table-wrapper').prop('onScroll')!({ currentTarget: {scrollTop} } as any);
-        expect(tableProps.dispatch).toBeCalledTimes(1);
-        expect(tableProps.dispatch).toBeCalledWith(
+        expect(tableProps.dispatch).toHaveBeenCalledTimes(1);
+        expect(tableProps.dispatch).toHaveBeenCalledWith(
             { type: ActionType.ScrollTable, scrollTop },
         );
     });

diff --git a/src/lib/Utils/CellResizeUtils.test.ts b/src/lib/Utils/CellResizeUtils.test.ts
@@ -26,7 +26,7 @@ describe('CellUtils', () => {
             const dispatch = jest.fn();
             const mouseMoveEvent = getMouseMove(40, 50, 100, 'column1', dispatch);
             mouseMoveEvent({ screenX: 20 } as any);
-            expect(dispatch).toBeCalledWith({type: 'ResizeColumn', columnKey: 'column1', width: 50});
+            expect(dispatch).toHaveBeenCalledWith({type: 'ResizeColumn', columnKey: 'column1', width: 50});
         });
         it('skip', () => {
             const dispatch = jest.fn();