diff --git a/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js b/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js new file mode 100644 index 0000000..10b6948 --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js @@ -0,0 +1,221 @@ +/* eslint jsx-a11y/label-has-for: 0 */ +import React from 'react'; + +import BootstrapTable from 'react-bootstrap-table-next'; +import Code from 'components/common/code-block'; + + +const products = [ + { id: 12, name: 'Item 12', price: 12.5, inStock: false }, + { id: 13, name: 'Item 13', price: 13.5, inStock: true }, + { id: 14, name: 'Item 14', price: 14.5, inStock: true } +]; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, + { + dataField: 'name', + text: 'Product Name' + }, + { + dataField: 'price', + text: 'Product Price' + }, + { + dataField: 'inStock', + text: 'In Stock', + formatter: (cellContent, row) => ( +
+ +
+ ) + }, + { + dataField: 'df1', + isDummyField: true, + text: 'Action 1', + formatter: (cellContent, row) => { + if (row.inStock) { + return ( +
+ Available +
+ ); + } + return ( +
+ Backordered +
+ ); + } + }, + { + dataField: 'df2', + isDummyField: true, + text: 'Action 2', + formatter: (cellContent, row) => { + if (row.inStock) { + return ( +
+ Available +
+ ); + } + return ( +
+ Backordered +
+ ); + } + } +]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; + +const columns = [ + { + dataField: 'id', + text: 'Product ID' + }, + { + dataField: 'name', + text: 'Product Name' + }, + { + dataField: 'price', + text: 'Product Price' + }, + { + dataField: 'inStock', + text: 'In Stock', + formatter: (cellContent, row) => ( +
+ +
+ ) + }, + { + dataField: 'df1', + isDummyField: true, + text: 'Action 1', + formatter: (cellContent, row) => { + if (row.inStock) { + return ( +
+ Available +
+ ); + } + return ( +
+ Backordered +
+ ); + } + }, + { + dataField: 'df2', + isDummyField: true, + text: 'Action 2', + formatter: (cellContent, row) => { + if (row.inStock) { + return ( +
+ Available +
+ ); + } + return ( +
+ Backordered +
+ ); + } + } +]; + +class ProductList extends React.Component { + constructor(props) { + super(props); + this.state = { products }; + } + + toggleInStock = () => { + let newProducts = [...this.state.products]; + newProducts = newProducts.map((d) => { + if (d.id === 13) { + return { + ...d, + inStock: !d.inStock + }; + } + return d; + }); + this.setState(curr => ({ ...curr, products: newProducts })); + }; + + render() { + return ( +
+

Products

+ + +
+ ); + } +} +`; + +class ProductList extends React.Component { + constructor(props) { + super(props); + this.state = { products }; + } + + toggleInStock = () => { + let newProducts = [...this.state.products]; + newProducts = newProducts.map((d) => { + if (d.id === 13) { + return { + ...d, + inStock: !d.inStock + }; + } + return d; + }); + this.setState(curr => ({ ...curr, products: newProducts })); + }; + + render() { + return ( +
+

Action 1 and Action 2 are dummy column

+ + + { sourceCode } +
+ ); + } +} + +export default ProductList; diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index eff1ee0..45fb5cc 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -30,6 +30,7 @@ import ColumnTitleTable from 'examples/columns/column-title-table'; import ColumnEventTable from 'examples/columns/column-event-table'; import ColumnHiddenTable from 'examples/columns/column-hidden-table'; import ColumnAttrsTable from 'examples/columns/column-attrs-table'; +import DummyColumnTable from 'examples/columns/dummy-column-table'; // work on header columns import HeaderColumnFormatTable from 'examples/header-columns/column-format-table'; @@ -201,7 +202,8 @@ storiesOf('Work on Columns', module) .add('Column Event', () => ) .add('Customize Column Class', () => ) .add('Customize Column Style', () => ) - .add('Customize Column HTML attribute', () => ); + .add('Customize Column HTML attribute', () => ) + .add('Dummy Column', () => ); storiesOf('Work on Header Columns', module) .addDecorator(bootstrapStyle()) diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js index 86bf393..e2e42ab 100644 --- a/packages/react-bootstrap-table2/test/cell.test.js +++ b/packages/react-bootstrap-table2/test/cell.test.js @@ -177,22 +177,45 @@ describe('Cell', () => { let props; let nextProps; - describe('when content is change', () => { - const column = { dataField: 'name', text: 'Product Name' }; - beforeEach(() => { - props = { - row, - columnIndex: 1, - rowIndex: 1, - column - }; - wrapper = shallow( - ); - }); + describe('if column.isDummyField is false', () => { + describe('when content is change', () => { + const column = { dataField: 'name', text: 'Product Name' }; + beforeEach(() => { + props = { + row, + columnIndex: 1, + rowIndex: 1, + column + }; + wrapper = shallow( + ); + }); - it('should return true', () => { - nextProps = { ...props, row: { id: 1, name: 'CDE' } }; - expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true); + it('should return true', () => { + nextProps = { ...props, row: { id: 1, name: 'CDE' } }; + expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true); + }); + }); + }); + + describe('if column.isDummyField is true', () => { + describe('when content is change', () => { + const column = { dataField: '', text: 'Product Name', isDummyField: true }; + beforeEach(() => { + props = { + row, + columnIndex: 1, + rowIndex: 1, + column + }; + wrapper = shallow( + ); + }); + + it('should return true', () => { + nextProps = { ...props, row: { id: 1, name: 'CDE', test: 'This is new Field' } }; + expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true); + }); }); });