Implement column formatter (#13)

fix #12

Author: AllenFang

package.json

@@ -41,6 +41,7 @@
     "jest-babel": "^1.0.1",
     "lerna": "^2.0.0",
     "react-test-renderer": "^15.6.1",
+    "sinon": "^3.2.1",
     "webpack": "^3.5.4",
     "webpack-dev-server": "^2.7.1"
   },

packages/react-bootstrap-table2/src/body.js

@@ -6,8 +6,13 @@ import Row from './row';
 const Body = ({ columns, data, keyField }) => (
   <tbody>
     {
-      data.map(row => (
-        <Row key={ row[keyField] } row={ row } columns={ columns } />
+      data.map((row, index) => (
+        <Row
+          key={ row[keyField] }
+          row={ row }
+          rowIndex={ index }
+          columns={ columns }
+        />
       ))
     }
   </tbody>

packages/react-bootstrap-table2/src/cell.js

@@ -2,12 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const Cell = ({ value }) => (
-  <td>{ value }</td>
-);
+const Cell = ({ row, rowIndex, column }) => {
+  let content = row[column.dataField];
+  if (column.formatter) {
+    content = column.formatter(content, row, rowIndex, column.formatExtraData);
+  }
+  return (
+    <td>{ content }</td>
+  );
+};
 
 Cell.propTypes = {
-  value: PropTypes.any.isRequired
+  row: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  column: PropTypes.object.isRequired
 };
 
 export default Cell;

packages/react-bootstrap-table2/src/row.js

@@ -3,18 +3,25 @@ import PropTypes from 'prop-types';
 
 import Cell from './cell';
 
-const Row = ({ row, columns }) => (
+const Row = ({ row, rowIndex, columns }) => (
   <tr>
     {
       columns.map(column =>
-        <Cell key={ row[column.dataField] } value={ row[column.dataField] } />
-      )
+        (
+          <Cell
+            key={ row[column.dataField] }
+            row={ row }
+            rowIndex={ rowIndex }
+            column={ column }
+          />
+        ))
     }
   </tr>
 );
 
 Row.propTypes = {
   row: PropTypes.object.isRequired,
+  rowIndex: PropTypes.number.isRequired,
   columns: PropTypes.array.isRequired
 };
 

packages/react-bootstrap-table2/test/bootstrap-table.test.js

@@ -41,7 +41,7 @@ describe('BootstrapTable', () => {
     });
   });
 
-  describe('when hover is true', () => {
+  describe('when hover props is true', () => {
     beforeEach(() => {
       wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } hover />);
     });
@@ -51,7 +51,7 @@ describe('BootstrapTable', () => {
     });
   });
 
-  describe('when striped is true', () => {
+  describe('when striped props is true', () => {
     beforeEach(() => {
       wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } striped />);
     });
@@ -61,7 +61,7 @@ describe('BootstrapTable', () => {
     });
   });
 
-  describe('when condensed is true', () => {
+  describe('when condensed props is true', () => {
     beforeEach(() => {
       wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } condensed />);
     });
@@ -71,7 +71,7 @@ describe('BootstrapTable', () => {
     });
   });
 
-  describe('when bordered is false', () => {
+  describe('when bordered props is false', () => {
     beforeEach(() => {
       wrapper = shallow(<BootstrapTable keyField="id" columns={ columns } data={ data } bordered={ false } />);
     });

packages/react-bootstrap-table2/test/cell.test.js

@@ -1,20 +1,60 @@
 import React from 'react';
+import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import Cell from '../src/cell';
 
 describe('Cell', () => {
   let wrapper;
-  const value = 'test';
+  const row = {
+    id: 1,
+    name: 'A'
+  };
 
   describe('simplest cell', () => {
+    const column = {
+      dataField: 'id',
+      text: 'ID'
+    };
+
     beforeEach(() => {
-      wrapper = shallow(<Cell value={ value } />);
+      wrapper = shallow(<Cell row={ row } rowIndex={ 1 } column={ column } />);
     });
 
     it('should render successfully', () => {
       expect(wrapper.length).toBe(1);
-      expect(wrapper.contains(<td>{ value }</td>)).toBe(true);
+      expect(wrapper.contains(<td>{ row[column.dataField] }</td>)).toBe(true);
+    });
+  });
+
+  describe('when formatter prop is defined', () => {
+    const rowIndex = 1;
+    const column = {
+      dataField: 'id',
+      text: 'ID',
+      formatExtraData: []
+    };
+    const formatterResult = (<h3>{ row[column.dataField] }</h3>);
+    const formatter = sinon.stub()
+      .withArgs(row[column.dataField], row, rowIndex, column.formatExtraData)
+      .returns(formatterResult);
+    column.formatter = formatter; // defined column formatter
+
+    beforeEach(() => {
+      wrapper = shallow(<Cell row={ row } rowIndex={ rowIndex } column={ column } />);
+    });
+
+    afterEach(() => { formatter.reset(); });
+
+    it('should render successfully', () => {
+      expect(wrapper.length).toBe(1);
+      expect(wrapper.contains(<td><h3>{ row[column.dataField] }</h3></td>)).toBe(true);
+    });
+
+    it('should call custom formatter correctly', () => {
+      expect(formatter.callCount).toBe(1);
+      expect(formatter.calledWith(row[column.dataField],
+        row, rowIndex, column.formatExtraData)).toBe(true);
     });
   });
 });

packages/react-bootstrap-table2/test/row.test.js

@@ -21,7 +21,7 @@ describe('Row', () => {
 
   describe('simplest row', () => {
     beforeEach(() => {
-      wrapper = shallow(<Row columns={ columns } row={ row } />);
+      wrapper = shallow(<Row rowIndex={ 1 } columns={ columns } row={ row } />);
     });
 
     it('should render successfully', () => {