Merge pull request #336 from react-bootstrap-table/develop

20180513 release

docs/README.md

@@ -17,6 +17,7 @@
 * [condensed](#condensed)
 * [id](#id)
 * [classes](#classes)
+* [wrapperClasses](#wrapperClasses)
 * [cellEdit](#cellEdit)
 * [selectRow](#selectRow)
 * [rowStyle](#rowStyle)
@@ -107,6 +108,9 @@ Same as bootstrap `.table-condensed` class for making a table more compact by cu
 Customize id on `table` element.
 ### <a name='classes'>classes - [String]</a>
 Customize class on `table` element.
+
+### <a name='wrapperClasses'>wrapperClasses - [String]</a>
+Customize class on the outer element which wrap up the `table` element. 
 ### <a name='cellEdit'>cellEdit - [Object]</a>
 Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
 

package.json

@@ -14,7 +14,8 @@
     "test:watch": "jest --watch",
     "storybook": "cd ./packages/react-bootstrap-table2-example && yarn storybook",
     "gh-pages:clean": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:clean",
-    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build"
+    "gh-pages:build": "cd ./packages/react-bootstrap-table2-example && yarn gh-pages:build",
+    "release": "yarn install && yarn build && lerna publish"
   },
   "repository": {
     "type": "git",

packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js

@@ -33,6 +33,7 @@ const columns = [{
 
 <BootstrapTable id="bar" keyField='id' data={ products } columns={ columns } />
 <BootstrapTable classes="foo" keyField='id' data={ products } columns={ columns } />
+<BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
 `;
 
 export default () => (
@@ -43,6 +44,9 @@ export default () => (
     <h4> Customized table className </h4>
     <BootstrapTable classes="foo" keyField="id" data={ products } columns={ columns } />
 
+    <h4> Customized wrapper className </h4>
+    <BootstrapTable wrapperClasses="boo" keyField="id" data={ products } columns={ columns } />
+
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/stories/stylesheet/base-table/_index.scss

@@ -5,3 +5,7 @@ table.foo {
 table#bar {
   background-color: $light-blue;
 }
+
+div.boo {
+  border: 2px solid salmon;
+}

packages/react-bootstrap-table2-filter/src/wrapper.js

@@ -30,13 +30,11 @@ export default (Base, {
         // I think this condition only isRemoteFilter is enough
         store.filteredData = store.getAllData();
         this.setState(() => ({ isDataChanged: true, currFilters: store.filters }));
-      } else if (isDataChanged) {
-        if (!isRemoteFilter && Object.keys(this.state.currFilters).length > 0) {
+      } else {
+        if (Object.keys(this.state.currFilters).length > 0) {
           store.filteredData = filters(store, columns, _)(this.state.currFilters);
         }
         this.setState(() => ({ isDataChanged }));
-      } else {
-        this.setState(() => ({ isDataChanged: false }));
       }
     }
 
@@ -50,7 +48,8 @@ export default (Base, {
     onFilter(column, filterType) {
       return (filterVal) => {
         const { store, columns } = this.props;
-        const currFilters = Object.assign({}, this.state.currFilters);
+        // watch out here if migration to context API, #334
+        const currFilters = Object.assign({}, store.filters);
         const { dataField, filter } = column;
 
         if (!_.isDefined(filterVal) || filterVal === '') {

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

@@ -52,9 +52,12 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       caption,
       rowStyle,
       rowClasses,
+      wrapperClasses,
       rowEvents
     } = this.props;
 
+    const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
+
     const tableClass = cs('table', {
       'table-striped': striped,
       'table-hover': hover,
@@ -75,7 +78,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
     const tableCaption = (caption && <Caption>{ caption }</Caption>);
 
     return (
-      <div className="react-bootstrap-table">
+      <div className={ tableWrapperClass }>
         <table id={ id } className={ tableClass }>
           { tableCaption }
           <Header
@@ -120,6 +123,7 @@ BootstrapTable.propTypes = {
   hover: PropTypes.bool,
   id: PropTypes.string,
   classes: PropTypes.string,
+  wrapperClasses: PropTypes.string,
   condensed: PropTypes.bool,
   caption: PropTypes.oneOfType([
     PropTypes.node,

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

@@ -74,6 +74,25 @@ describe('BootstrapTable', () => {
     });
   });
 
+  describe('when props.wrapperClasses was defined', () => {
+    const classes = 'foo';
+
+    beforeEach(() => {
+      wrapper = shallow(
+        <BootstrapTable
+          keyField="id"
+          columns={ columns }
+          data={ data }
+          store={ store }
+          wrapperClasses={ classes }
+        />);
+    });
+
+    it('should display customized classes correctly', () => {
+      expect(wrapper.find(`.${classes}`).length).toBe(1);
+    });
+  });
+
   describe('when props.id was defined', () => {
     const id = 'foo';