Merge pull request #184 from komarovalexander/dev

InsertRow action

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

src/Demos/Demos.tsx

@@ -42,10 +42,11 @@ import GroupedColumnsDemo from './GroupedColumnsDemo/GroupedColumnsDemo';
 import GroupingCustomCellDemo from './GroupingCustomCellDemo/GroupingCustomCellDemo';
 import GroupingCustomRowDemo from './GroupingCustomRowDemo/GroupingCustomRowDemo';
 import GroupingDemo from './GroupingDemo/GroupingDemo';
-import HeaderFilterDemo from './HeaderFilterDemo/HeaderFilterDemo';
 import GroupingSummaryDemo from './GroupingSummaryDemo/GroupingSummaryDemo';
+import HeaderFilterDemo from './HeaderFilterDemo/HeaderFilterDemo';
 import HoverRowDemo from './HoverRowDemo/HoverRowDemo';
 import InfiniteScrollingDemo from './InfiniteScrollingDemo/InfiniteScrollingDemo';
+import InserRowDemo from './InserRowDemo/InserRowDemo';
 import JsonDemo from './JsonDemo/JsonDemo';
 import KeyboardNavigationDemo from './KeyboardNavigationDemo/KeyboardNavigationDemo';
 import LoadingDemo from './LoadingDemo/LoadingDemo';
@@ -118,6 +119,7 @@ const demos: Demo[] = [
   new Demo(KeyboardNavigationDemo, '/keyboard-navigation', 'Keyboard Navigation', 'KeyboardNavigationDemo', 'https://stackblitz.com/edit/table-keyboard-navigation-js', 'https://stackblitz.com/edit/table-keyboard-navigation-ts', 'Miscellaneous'),
   new Demo(LoadingDemo, '/loading', 'Loading', 'LoadingDemo', 'https://stackblitz.com/edit/table-loading-js', 'https://stackblitz.com/edit/table-loading-ts', 'Miscellaneous'),
   new Demo(InfiniteScrollingDemo, '/infinite-scrolling', 'Infinite Scrolling', 'InfiniteScrollingDemo', 'https://stackblitz.com/edit/table-infinite-scrolling-js', 'https://stackblitz.com/edit/table-infinite-scrolling-ts', 'Virtual Scrolling'),
+  new Demo(InserRowDemo, '/insert-row', 'Insert Row', 'InserRowDemo', 'https://stackblitz.com/edit/table-insert-row-js', 'https://stackblitz.com/edit/table-insert-row-ts', 'Editing'),
   new Demo(ManyColumnsDemo, '/many-columns', 'Many Columns', 'ManyColumnsDemo', 'https://stackblitz.com/edit/table-many-columns-js', 'https://stackblitz.com/edit/table-many-columns-ts', 'Columns'),
   new Demo(ManyRowsDemo, '/many-rows', '100K Rows', 'ManyRowsDemo', 'https://stackblitz.com/edit/table-many-rows-js', 'https://stackblitz.com/edit/table-many-rows-ts', 'Virtual Scrolling'),
   new Demo(ManyRowsDynamicDemo, '/many-rows-dynamic', '10K Rows Dynamic', 'ManyRowsDynamicDemo', 'https://stackblitz.com/edit/table-many-rows-dynamic-js', 'https://stackblitz.com/edit/table-many-rows-dynamic-ts', 'Virtual Scrolling'),

src/Demos/InserRowDemo/InserRowDemo.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import InserRowDemo from './InserRowDemo';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<InserRowDemo />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Demos/InserRowDemo/InserRowDemo.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+
+import { ITableProps, kaReducer, Table } from '../../lib';
+import { insertRow } from '../../lib/actionCreators';
+import { DataType, EditingMode, InsertRowPosition } from '../../lib/enums';
+import { DispatchFunc } from '../../lib/types';
+
+const dataArray = Array(7).fill(undefined).map(
+  (_, index) => ({
+    column1: `column:1 rowId:${index}`,
+    column2: `column:2 rowId:${index}`,
+    column3: `column:3 rowId:${index}`,
+    id: index,
+  }),
+);
+
+let maxValue = Math.max(...dataArray.map(i => i.id));
+const generateNewId = () => {
+  maxValue++;
+  return maxValue;
+};
+
+const tablePropsInit: ITableProps = {
+  columns: [
+    {
+      key: 'column1',
+      title: 'Column 1',
+      dataType: DataType.String
+    },
+    { key: 'column2', title: 'Column 2', dataType: DataType.String },
+    { key: 'column3', title: 'Column 3', dataType: DataType.String },
+    {
+      key: 'insertRowBeforeColumn',
+      width: 200
+    },
+    {
+      key: 'insertRowAfterColumn',
+      width: 200
+    },
+  ],
+  editingMode: EditingMode.Cell,
+  data: dataArray,
+  rowKeyField: 'id',
+};
+
+const InserRowDemo: React.FC = () => {
+  const [tableProps, changeTableProps] = useState(tablePropsInit);
+  const dispatch: DispatchFunc = (action) => {
+    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
+  };
+
+  return (
+    <div className='add-row-demo'>
+      <Table
+        {...tableProps}
+        childComponents={{
+          cell: {
+            content: (props) => {
+              if (props.column.key === 'insertRowBeforeColumn'){
+                return (
+                  <button onClick={() => {
+                    const id = generateNewId();
+                    const newRow = {
+                      id,
+                      column1: `column:1 rowId:${id}`,
+                    };
+                    dispatch(insertRow(newRow, { rowKeyValue: props.rowKeyValue }))
+                  }}>
+                    Insert Row Before
+                  </button>
+                );
+              }
+              if (props.column.key === 'insertRowAfterColumn'){
+                return (
+                  <button onClick={() => {
+                    const id = generateNewId();
+                    const newRow = {
+                      id,
+                      column1: `column:1 rowId:${id}`,
+                    };
+                    dispatch(insertRow(newRow, { rowKeyValue: props.rowKeyValue, insertRowPosition: InsertRowPosition.after }))
+                  }}>
+                    Insert Row After
+                  </button>
+                );
+              }
+            }
+          },
+        }}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+};
+
+export default InserRowDemo;

src/Demos/MenuItems.tsx

@@ -11,8 +11,8 @@ export class MenuItem {
   public isActive?: boolean;
 }
 
-const newItems: string[] = ['HeaderFilterDemo'];
-const updateItems: string[] = ['Filtering'];
+const newItems: string[] = ['InsertRowDemo'];
+const updateItems: string[] = ['Editing'];
 
 const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => {
 

src/lib/Reducers/__snapshots__/kaReducer.test.ts.snap

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`kaReducer InsertRow insert after row with id=2 1`] = `
+Array [
+  Object {
+    "id": 1,
+    "val": 102,
+  },
+  Object {
+    "id": 2,
+    "val": 10,
+  },
+  Object {
+    "id": 4,
+    "val": 40,
+  },
+  Object {
+    "id": 3,
+    "val": 10,
+  },
+]
+`;
+
+exports[`kaReducer InsertRow insert before row with id=2 1`] = `
+Array [
+  Object {
+    "id": 1,
+    "val": 102,
+  },
+  Object {
+    "id": 3,
+    "val": 30,
+  },
+  Object {
+    "id": 2,
+    "val": 10,
+  },
+]
+`;
+
+exports[`kaReducer InsertRow insert to 0 position by default 1`] = `
+Array [
+  Object {
+    "id": 3,
+    "val": 30,
+  },
+  Object {
+    "id": 1,
+    "val": 102,
+  },
+  Object {
+    "id": 2,
+    "val": 10,
+  },
+]
+`;
+
+exports[`kaReducer InsertRow insert to last position for after mode 1`] = `
+Array [
+  Object {
+    "id": 1,
+    "val": 102,
+  },
+  Object {
+    "id": 2,
+    "val": 10,
+  },
+  Object {
+    "id": 3,
+    "val": 10,
+  },
+  Object {
+    "id": 4,
+    "val": 40,
+  },
+]
+`;
+
 exports[`kaReducer ReorderColumns default 1`] = `
 Object {
   "columns": Array [

src/lib/Reducers/kaReducer.test.ts

@@ -1,11 +1,11 @@
 import { ITableProps } from '../';
 import {
   clearSingleAction, deleteRow, deselectAllFilteredRows, deselectAllRows, deselectAllVisibleRows,
-  deselectRow, loadData, reorderColumns, reorderRows, resizeColumn, selectAllFilteredRows,
-  selectAllRows, selectAllVisibleRows, selectRowsRange, selectSingleRow, setSingleAction,
-  updateData, updateTreeGroupsExpanded, validate,
+  deselectRow, insertRow, loadData, reorderColumns, reorderRows, resizeColumn,
+  selectAllFilteredRows, selectAllRows, selectAllVisibleRows, selectRowsRange, selectSingleRow,
+  setSingleAction, updateData, updateTreeGroupsExpanded, validate,
 } from '../actionCreators';
-import { ActionType, FilterOperatorName } from '../enums';
+import { ActionType, FilterOperatorName, InsertRowPosition } from '../enums';
 import { kaReducer } from './kaReducer';
 
 describe('kaReducer', () => {
@@ -461,4 +461,91 @@ describe('kaReducer', () => {
       expect(newState.editableCells).toMatchSnapshot();
     });
   });
+  describe('InsertRow', () => {
+    it('insert to 0 position by default', () => {
+      const intialState: ITableProps = {
+        columns: [],
+        data: [{
+          id: 1,
+          val: 102
+        }, {
+          id: 2,
+          val: 10
+        }],
+        rowKeyField: 'id'
+      };
+      const newState = kaReducer(intialState, insertRow({
+        id: 3,
+        val: 30
+      }));
+      expect(newState.data).toMatchSnapshot();
+    });
+    it('insert before row with id=2', () => {
+      const intialState: ITableProps = {
+        columns: [],
+        data: [{
+          id: 1,
+          val: 102
+        }, {
+          id: 2,
+          val: 10
+        }],
+        rowKeyField: 'id'
+      };
+      const newState = kaReducer(intialState, insertRow({
+        id: 3,
+        val: 30
+      }, {
+        rowKeyValue: 2
+      }));
+      expect(newState.data).toMatchSnapshot();
+    });
+    it('insert after row with id=2', () => {
+      const intialState: ITableProps = {
+        columns: [],
+        data: [{
+          id: 1,
+          val: 102
+        }, {
+          id: 2,
+          val: 10
+        }, {
+          id: 3,
+          val: 10
+        }],
+        rowKeyField: 'id'
+      };
+      const newState = kaReducer(intialState, insertRow({
+        id: 4,
+        val: 40
+      }, {
+        rowKeyValue: 2,
+        insertRowPosition: InsertRowPosition.after
+      }));
+      expect(newState.data).toMatchSnapshot();
+    });
+    it('insert to last position for after mode', () => {
+      const intialState: ITableProps = {
+        columns: [],
+        data: [{
+          id: 1,
+          val: 102
+        }, {
+          id: 2,
+          val: 10
+        }, {
+          id: 3,
+          val: 10
+        }],
+        rowKeyField: 'id'
+      };
+      const newState = kaReducer(intialState, insertRow({
+        id: 4,
+        val: 40
+      }, {
+        insertRowPosition: InsertRowPosition.after
+      }));
+      expect(newState.data).toMatchSnapshot();
+    });
+  });
 });

src/lib/Reducers/kaReducer.ts

@@ -1,5 +1,5 @@
 import { newRowId } from '../const';
-import { ActionType, SortingMode } from '../enums';
+import { ActionType, InsertRowPosition, SortingMode } from '../enums';
 import { ITableProps } from '../index';
 import { Column } from '../models';
 import { ILoadingProps } from '../props';
@@ -36,6 +36,24 @@ const kaReducer: any = (props: ITableProps, action: any): ITableProps => {
   } = props;
 
   switch (action.type) {
+    case ActionType.InsertRow: {
+      const {
+        rowData,
+        options
+       } = action;
+      const { rowKeyValue, insertRowPosition } = options || {};
+      const newData = [...data];
+      if (rowKeyValue != null) {
+        let rowIndex = newData.findIndex((d) => getValueByField(d, rowKeyField) === rowKeyValue);
+        if (insertRowPosition === InsertRowPosition.after){
+          rowIndex++;
+        }
+        newData.splice(rowIndex, 0, rowData);
+      } else {
+        insertRowPosition === InsertRowPosition.after ? newData.push(rowData) : newData.unshift(rowData);
+      }
+      return { ...props, data: newData };
+    }
     case ActionType.UpdateHeaderFilterValues: {
       const newColumns = columns.map((c: Column) => {
         if (c.key === action.columnKey) {

src/lib/actionCreators.ts

@@ -1,4 +1,4 @@
-import { ActionType } from './enums';
+import { ActionType, InsertRowPosition } from './enums';
 import { Focused } from './Models/Focused';
 import { PopupPosition } from './Models/PopupPosition';
 import { IMoveFocusedSettings } from './Utils/NavigationUtils';
@@ -290,3 +290,12 @@ export const openAllEditors = () => ({
 export const saveAllEditors = () => ({
   type: ActionType.SaveAllEditors
 });
+
+export const insertRow = (rowData: any, options?: {
+  rowKeyValue?: any,
+  insertRowPosition?: InsertRowPosition
+}) => ({
+  rowData,
+  options,
+  type: ActionType.InsertRow
+});