Merge pull request #317 from cjdev/add-selected-row-to-data-table

Add selected rows to data table

Author: khoberg

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Upcoming
 
+## New Feature
+
+- Add selectable rows to DataTable.
+
+## Breaking Changes in DataTable
+
+- renderToolbar's data prop now return an array of objects instead of array of arrays.
+- Before: data = [['first', 'last']], After: data = [{row: ['first', 'last'], selected: true}]
+
+# Upcoming
+
 ## New Component
 
 - Add Chip component

packages/visual-stack-docs/src/containers/Components/Docs/table.js

@@ -146,6 +146,7 @@ export default () => (
             )}
             sortable
             pagination
+            selectable
           />
           {/* s7:end */}
 

packages/visual-stack-redux/package-lock.json

@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "ramda": "^0.26.1",
-    "redux-actions": "^0.9.1"
+    "redux-actions": "^2.6.5"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",

packages/visual-stack-redux/package.json

@@ -3,6 +3,7 @@ import { createAction, handleActions } from 'redux-actions';
 import { sortData } from '@cjdev/visual-stack/lib/components/Table/DataTable/sortingHelper';
 
 const defaultToEmpty = R.defaultTo({});
+const defaultToEmptyArray = R.defaultTo([]);
 const collapse = R.set(R.lensProp('expanded'), false);
 
 const OPEN_MODAL = '@cjdev/visual-stack-redux/OPEN_MODAL';
@@ -115,10 +116,13 @@ const findSortingIndex = (sortingOption, columns) =>
   R.findIndex(R.propEq('label', sortingOption.label))(columns);
 
 const getDataTableData = ({ columns, data, sortingOption }) => {
-  if (!sortingOption) return data;
+  const dataWithSelectedProp = defaultToEmptyArray(data).map((row, index) => {
+    return { id: index, row, selected: false };
+  });
+  if (!sortingOption) return dataWithSelectedProp;
 
   const sortingIndex = findSortingIndex(sortingOption, columns);
-  return sortData(sortingIndex, sortingOption.order, data);
+  return sortData(sortingIndex, sortingOption.order, dataWithSelectedProp);
 };
 
 const INITIALIZE_DATA_TABLE = '@cjdev/visual-stack-redux/INITIALIZE_DATA_TABLE';
@@ -133,6 +137,9 @@ export const setDataTableSortingOption = createAction(
   SET_DATA_TABLE_SORTING_OPTION
 );
 
+const SET_DATA_TABLE_ROWS = '@cjdev/visual-stack-redux/SET_DATA_TABLE_ROWS';
+export const setDataTableRows = createAction(SET_DATA_TABLE_ROWS);
+
 export const selectDataTable = id => state => {
   const dataTable = R.view(R.lensPath(['visualStack', 'dataTable', id]))(state);
   const defaultTable = { data: [], pagination: {} };
@@ -211,7 +218,6 @@ export default handleActions(
       R.set(R.lensPath(['slidingPanel', filterLabel, 'expanded']), true, state),
     [SET_SLIDING_PANEL_ACTIVE_STATE]: (state, { payload: newActiveState }) =>
       R.set(R.lensPath(['slidingPanel', 'active']), newActiveState, state),
-
     [SELECT_TAB]: (state, { payload: { tabLayoutId, index } }) => {
       return R.set(
         R.lensPath(['tabLayout', tabLayoutId, 'index']),
@@ -264,8 +270,8 @@ export default handleActions(
       ),
     [RESET_CALENDAR_SELECTION]: (state, { payload: { datePickerId } }) =>
       R.set(R.lensPath(['datePicker', datePickerId]), {}, state),
-    [INITIALIZE_DATA_TABLE]: (state, { payload }) =>
-      R.set(
+    [INITIALIZE_DATA_TABLE]: (state, { payload }) => {
+      return R.set(
         R.lensPath(['dataTable', payload.id]),
         {
           data: getDataTableData(payload),
@@ -279,24 +285,22 @@ export default handleActions(
           )(payload),
         },
         state
-      ),
+      );
+    },
     [SET_DATA_TABLE_PAGE]: (state, { payload: { id, pagination } }) =>
       R.set(R.lensPath(['dataTable', id, 'pagination']), pagination, state),
     [SET_DATA_TABLE_SORTING_OPTION]: (
       state,
-      { payload: { id, data, sortingOption } }
+      { payload: { id, sortingOption } }
     ) => {
-      const stateWithSortingOption = R.set(
+      return R.set(
         R.lensPath(['dataTable', id, 'sortingOption']),
         sortingOption,
         state
       );
-
-      return R.set(
-        R.lensPath(['dataTable', id, 'data']),
-        data,
-        stateWithSortingOption
-      );
+    },
+    [SET_DATA_TABLE_ROWS]: (state, { payload: { id, data } }) => {
+      return R.set(R.lensPath(['dataTable', id, 'data']), data, state);
     },
   },
   {
@@ -309,5 +313,6 @@ export default handleActions(
     tabLayout: {},
     pagination: {},
     datePicker: {},
+    dataTable: {},
   }
 );

packages/visual-stack-redux/src/actions.js

@@ -6,6 +6,7 @@ import {
   setDataTablePage,
   setDataTableSortingOption,
   selectDataTable,
+  setDataTableRows,
 } from '../../actions';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
@@ -48,12 +49,14 @@ export class DataTablePure extends Component {
       id,
       setDataTablePage,
       setDataTableSortingOption,
+      setDataTableRows,
       onClick,
       renderToolbar,
       rowsPerPageTemplate,
       totalRecordsTemplate,
       isLoading,
       loadingMessage,
+      selectable,
     } = this.props;
     return (
       <div>
@@ -63,6 +66,7 @@ export class DataTablePure extends Component {
           description={description}
           noDataLabel={noDataLabel}
           sortable={sortable}
+          selectable={selectable}
           pagination={pagination}
           data={dataTable.data}
           isLoading={isLoading}
@@ -75,11 +79,15 @@ export class DataTablePure extends Component {
             setDataTablePage({ id, pagination });
           }}
           onSort={({ data, sortingOption }) => {
-            setDataTableSortingOption({ id, data, sortingOption });
+            setDataTableSortingOption({ id, sortingOption });
+            setDataTableRows({ id, data });
           }}
           renderToolbar={renderToolbar}
           rowsPerPageTemplate={rowsPerPageTemplate}
           totalRecordsTemplate={totalRecordsTemplate}
+          onSelect={({ data }) => {
+            setDataTableRows({ id, data });
+          }}
         />
       </div>
     );
@@ -124,6 +132,7 @@ const mapDispatchToProps = {
   initializeDataTable,
   setDataTablePage,
   setDataTableSortingOption,
+  setDataTableRows,
 };
 
 export const DataTable = connect(

packages/visual-stack-redux/src/components/DataTable/index.js

@@ -53,9 +53,10 @@ describe('DataTablePure', () => {
     ]);
   });
 
-  it('should call setDataTableSortingOption when sorting from VSDataTable', () => {
+  it('should call setDataTableSortingOption and setDataTableRows when sorting from VSDataTable', () => {
     const id = '1';
     const setDataTableSortingOption = jest.fn();
+    const setDataTableRows = jest.fn();
     const sortingPayload = {
       sortingOption: { label: 'id', order: 'ASCENDING' },
       data: [{ id: 1 }],
@@ -66,6 +67,7 @@ describe('DataTablePure', () => {
         dataTable={{ pagination: {} }}
         initializeDataTable={() => {}}
         setDataTableSortingOption={setDataTableSortingOption}
+        setDataTableRows={setDataTableRows}
       />
     );
     const { onSort } = wrapper.find(VSDataTable).props();
@@ -74,7 +76,41 @@ describe('DataTablePure', () => {
       [
         {
           id,
-          ...sortingPayload,
+          sortingOption: sortingPayload.sortingOption,
+        },
+      ],
+    ]);
+    expect(setDataTableRows.mock.calls).toEqual([
+      [
+        {
+          id,
+          data: sortingPayload.data,
+        },
+      ],
+    ]);
+  });
+
+  it('should call setDataTableRows when selecting rows from VSDataTable', () => {
+    const id = '1';
+    const setDataTableRows = jest.fn();
+    const payload = {
+      data: [{ id: 1 }],
+    };
+    const wrapper = shallow(
+      <DataTablePure
+        id={id}
+        dataTable={{ pagination: {} }}
+        initializeDataTable={() => {}}
+        setDataTableRows={setDataTableRows}
+      />
+    );
+    const { onSelect } = wrapper.find(VSDataTable).props();
+    onSelect(payload);
+    expect(setDataTableRows.mock.calls).toEqual([
+      [
+        {
+          id,
+          data: payload.data,
         },
       ],
     ]);

packages/visual-stack-redux/src/components/DataTable/tests/index.test.js

@@ -17,6 +17,7 @@ import reducer, {
   initializeDataTable,
   setDataTablePage,
   setDataTableSortingOption,
+  setDataTableRows,
 } from '../src/actions';
 import { selectDataTable } from '../src/actions';
 import { DESCENDING } from '@cjdev/visual-stack/lib/components/Table/DataTable/sortingHelper';
@@ -34,6 +35,7 @@ describe('reducer', () => {
       tabLayout: {},
       pagination: {},
       datePicker: {},
+      dataTable: {},
     });
   });
 
@@ -354,20 +356,23 @@ describe('reducer', () => {
 
   test('should initialize dataTable data', () => {
     const id = 'sample-data-table';
-    const data = [
-      {
-        id: 1,
-      },
-    ];
+    const data = [[1, 'first name', 'last name']];
     const columns = [];
     const sortingOption = null;
     const beforeState = {};
     const afterState = reducer(
       beforeState,
       initializeDataTable({ id, data, columns, sortingOption })
     );
+    const dataWithSelectedProp = [
+      {
+        id: 0,
+        row: [1, 'first name', 'last name'],
+        selected: false,
+      },
+    ];
     expect(afterState.dataTable[id]).toEqual({
-      data,
+      data: dataWithSelectedProp,
       pagination: {
         page: 1,
         rowsPerPage: 10,
@@ -397,7 +402,13 @@ describe('reducer', () => {
       data: actualData,
       sortingOption: actualSortingOption,
     } = afterState.dataTable[id];
-    expect(actualData).toEqual([[7], [4], [3], [2], [1]]);
+    expect(actualData).toEqual([
+      { id: 2, row: [7], selected: false },
+      { id: 0, row: [4], selected: false },
+      { id: 1, row: [3], selected: false },
+      { id: 4, row: [2], selected: false },
+      { id: 3, row: [1], selected: false },
+    ]);
     expect(actualSortingOption).toEqual(sortingOption);
   });
 
@@ -419,22 +430,30 @@ describe('reducer', () => {
 
   test('should setDataTableSortingOption', () => {
     const id = 'sample-data-table';
-    const data = [{ id: 1 }];
     const sortingOption = {
       label: 'id',
       order: 'ASCENDING',
     };
     const beforeState = {};
     const afterState = reducer(
       beforeState,
-      setDataTableSortingOption({ id, data, sortingOption })
+      setDataTableSortingOption({ id, sortingOption })
     );
     expect(afterState.dataTable[id]).toEqual({
-      data,
       sortingOption,
     });
   });
 
+  test('should setDataTableRows', () => {
+    const id = 'sample-data-table';
+    const data = [{ id: 0, row: [1], selected: false }];
+    const beforeState = {};
+    const afterState = reducer(beforeState, setDataTableRows({ id, data }));
+    expect(afterState.dataTable[id]).toEqual({
+      data,
+    });
+  });
+
   test('should select data table from tabe id', () => {
     const dataTable = {
       data: [{ id: 1 }],