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

20181007 release

docs/columns.md

@@ -13,6 +13,7 @@ Available properties in a column object:
 * [formatExtraData](#formatExtraData)
 * [sort](#sort)
 * [sortFunc](#sortFunc)
+* [sortCaret](#sortCaret)
 * [onSort](#onSort)
 * [classes](#classes)
 * [style](#style)
@@ -154,6 +155,20 @@ Enable the column sort via a `true` value given.
 }
 ```
 
+## <a name='sortCaret'>column.sortCaret - [Function]</a>
+Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+
+```js
+{
+  // omit...
+  sort: true,
+  sortCaret: (order, column) => {
+    return //...
+  }
+}
+```
+> The possible value of `order` argument is **`asc`**, **`desc`** and **`undefined`**.
+
 ## <a name='classes'>column.classes - [String | Function]</a>
 It's available to have custom class on table column:
 

packages/react-bootstrap-table2-example/examples/basic/exposed-function.js

@@ -0,0 +1,182 @@
+/* eslint no-return-assign: 0 */
+/* eslint no-console: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(63);
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  filter: textFilter()
+}, {
+  dataField: 'price',
+  text: 'Product Price',
+  sort: true,
+  filter: textFilter()
+}];
+
+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'
+}];
+
+class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>.....</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}
+`;
+
+export default class ExposedFunctionTable extends React.Component {
+  handleGetCurrentData = () => {
+    console.log(this.node.table.props.data);
+  }
+
+  handleGetSelectedData = () => {
+    console.log(this.node.selectionContext.state.selected);
+  }
+
+  handleGetExpandedData = () => {
+    console.log(this.node.rowExpandContext.state.expanded);
+  }
+
+  handleGetCurrentPage = () => {
+    console.log(this.node.paginationContext.currPage);
+  }
+
+  handleGetCurrentSizePerPage = () => {
+    console.log(this.node.paginationContext.currSizePerPage);
+  }
+
+  handleGetCurrentSortColumn = () => {
+    console.log(this.node.sortContext.state.sortColumn);
+  }
+
+  handleGetCurrentSortOrder = () => {
+    console.log(this.node.sortContext.state.sortOrder);
+  }
+
+  handleGetCurrentFilter = () => {
+    console.log(this.node.filterContext.currFilters);
+  }
+
+  render() {
+    const expandRow = {
+      renderer: row => (
+        <div>
+          <p>{ `This Expand row is belong to rowKey ${row.id}` }</p>
+          <p>You can render anything here, also you can add additional data on every row object</p>
+          <p>expandRow.renderer callback will pass the origin row object to you</p>
+        </div>
+      ),
+      showExpandColumn: true
+    };
+    return (
+      <div>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentData }>Get Current Display Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetSelectedData }>Get Current Selected Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetExpandedData }>Get Current Expanded Rows</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentPage }>Get Current Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSizePerPage }>Get Current Size Per Page</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortColumn }>Get Current Sort Column</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentSortOrder }>Get Current Sort Order</button>
+        <button className="btn btn-default" onClick={ this.handleGetCurrentFilter }>Get Current Filter Information</button>
+        <BootstrapTable
+          ref={ n => this.node = n }
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+          pagination={ paginationFactory() }
+          selectRow={ { mode: 'checkbox', clickToSelect: true } }
+          expandRow={ expandRow }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

packages/react-bootstrap-table2-example/examples/sort/custom-sort-caret.js

@@ -0,0 +1,59 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  sortCaret: (order, column) => {
+    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+    return null;
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID',
+  sort: true
+}, {
+  dataField: 'name',
+  text: 'Product Name',
+  sort: true,
+  sortCaret: (order, column) => {
+    if (!order) return (<span>&nbsp;&nbsp;Desc/Asc</span>);
+    else if (order === 'asc') return (<span>&nbsp;&nbsp;Desc/<font color="red">Asc</font></span>);
+    else if (order === 'desc') return (<span>&nbsp;&nbsp;<font color="red">Desc</font>/Asc</span>);
+    return null;
+  }
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable keyField="id" data={ products } columns={ columns } />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -13,6 +13,7 @@ import NoDataTable from 'examples/basic/no-data-table';
 import CustomizedIdClassesTable from 'examples/basic/customized-id-classes';
 import CaptionTable from 'examples/basic/caption-table';
 import LargeTable from 'examples/basic/large-table';
+import ExposedAPITable from 'examples/basic/exposed-function';
 
 // bootstrap 4
 import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
@@ -83,6 +84,7 @@ import DefaultSortTable from 'examples/sort/default-sort-table';
 import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
 import SortEvents from 'examples/sort/sort-events';
 import CustomSortTable from 'examples/sort/custom-sort-table';
+import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
 import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
 import HeaderSortingStyleTable from 'examples/sort/header-sorting-style';
 
@@ -189,7 +191,8 @@ storiesOf('Basic Table', module)
   .add('Indication For Empty Table', () => <NoDataTable />)
   .add('Customized id and class table', () => <CustomizedIdClassesTable />)
   .add('Table with caption', () => <CaptionTable />)
-  .add('Large Table', () => <LargeTable />);
+  .add('Large Table', () => <LargeTable />)
+  .add('Exposed API', () => <ExposedAPITable />);
 
 storiesOf('Bootstrap 4', module)
   .addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
@@ -267,6 +270,7 @@ storiesOf('Sort Table', module)
   .add('Default Sort Direction Table', () => <DefaultSortDirectionTable />)
   .add('Sort Events', () => <SortEvents />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
+  .add('Custom Sort Caret', () => <CustomSortCaretTable />)
   .add('Custom Classes on Sorting Header Column', () => <HeaderSortingClassesTable />)
   .add('Custom Style on Sorting Header Column', () => <HeaderSortingStyleTable />);
 

packages/react-bootstrap-table2-paginator/src/context.js

@@ -68,6 +68,9 @@ export default (
           currPage = newPage;
           needNewState = true;
         }
+      } else {
+        this.currPage = nextProps.pagination.options.page;
+        this.currSizePerPage = nextProps.pagination.options.sizePerPage;
       }
 
       if (needNewState) {

packages/react-bootstrap-table2-paginator/test/context.test.js

@@ -160,6 +160,27 @@ describe('PaginationContext', () => {
       });
     });
 
+    describe('when remote pagination is enable', () => {
+      beforeEach(() => {
+        wrapper = shallow(shallowContext({ ...defaultPagination }, true));
+        instance = wrapper.instance();
+        wrapper.render();
+        nextProps = {
+          data,
+          pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
+        };
+        instance.componentWillReceiveProps(nextProps);
+      });
+
+      it('should always set currPage from nextProps.pagination.options.page', () => {
+        expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+      });
+
+      it('should always set currSizePerPage from nextProps.pagination.options.sizePerPage', () => {
+        expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+      });
+    });
+
     describe('when page is not align', () => {
       beforeEach(() => {
         wrapper = shallow(shallowContext({

packages/react-bootstrap-table2-toolkit/src/search/context.js

@@ -39,8 +39,10 @@ export default (options = {
       const { data, columns } = this.props;
       let { searchText } = this.props;
 
-      if (isRemoteSearch() && this.performRemoteSearch) {
-        handleRemoteSearchChange(searchText);
+      if (isRemoteSearch()) {
+        if (this.performRemoteSearch) {
+          handleRemoteSearchChange(searchText);
+        }
         return data;
       }
 

packages/react-bootstrap-table2/src/contexts/index.js

@@ -66,6 +66,7 @@ const withContext = Base =>
         selectionProps
       ) => (
         <Base
+          ref={ n => this.table = n }
           { ...this.props }
           { ...selectionProps }
           { ...sortProps }
@@ -91,6 +92,7 @@ const withContext = Base =>
       ) => (
         <this.SelectionContext.Provider
           { ...baseProps }
+          ref={ n => this.selectionContext = n }
           selectRow={ this.props.selectRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >
@@ -123,6 +125,7 @@ const withContext = Base =>
       ) => (
         <this.RowExpandContext.Provider
           { ...baseProps }
+          ref={ n => this.rowExpandContext = n }
           expandRow={ this.props.expandRow }
           data={ rootProps.getData(filterProps, searchProps, sortProps, paginationProps) }
         >

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

@@ -24,6 +24,7 @@ const HeaderCell = (props) => {
   const {
     text,
     sort,
+    sortCaret,
     filter,
     filterRenderer,
     headerTitle,
@@ -69,7 +70,7 @@ const HeaderCell = (props) => {
     cellAttrs.className = cs(cellAttrs.className, 'sortable');
 
     if (sorting) {
-      sortSymbol = <SortCaret order={ sortOrder } />;
+      sortSymbol = sortCaret ? sortCaret(sortOrder, column) : <SortCaret order={ sortOrder } />;
 
       // append customized classes or style if table was sorting based on the current column.
       cellClasses = cs(
@@ -86,7 +87,7 @@ const HeaderCell = (props) => {
           : headerSortingStyle
       };
     } else {
-      sortSymbol = <SortSymbol />;
+      sortSymbol = sortCaret ? sortCaret(undefined, column) : <SortSymbol />;
     }
   }
 
@@ -151,6 +152,7 @@ HeaderCell.propTypes = {
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
   sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
+  sortCaret: PropTypes.func,
   isLastSorting: PropTypes.bool,
   onFilter: PropTypes.func,
   onExternalFilter: PropTypes.func

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

@@ -403,6 +403,24 @@ describe('HeaderCell', () => {
       it('header should render SortSymbol as default', () => {
         expect(wrapper.find(SortSymbol).length).toBe(1);
       });
+
+      describe('when sortCaret is defined ', () => {
+        beforeEach(() => {
+          column = { ...column, sortCaret: jest.fn() };
+          wrapper = shallow(
+            <HeaderCell column={ column } index={ index } onSort={ onSortCallBack } />
+          );
+        });
+
+        it('header should not render SortSymbol', () => {
+          expect(wrapper.find(SortSymbol).length).toBe(0);
+        });
+
+        it('should call column.sortCaret correctly', () => {
+          expect(column.sortCaret).toHaveBeenCalledTimes(1);
+          expect(column.sortCaret).toHaveBeenCalledWith(undefined, column);
+        });
+      });
     });
 
     describe('and sorting prop is true', () => {
@@ -420,6 +438,30 @@ describe('HeaderCell', () => {
         });
       });
 
+      describe('when sortCaret is defined ', () => {
+        beforeEach(() => {
+          column = { ...column, sortCaret: jest.fn() };
+          wrapper = shallow(
+            <HeaderCell
+              column={ column }
+              index={ index }
+              onSort={ onSortCallBack }
+              sortOrder={ Const.SORT_ASC }
+              sorting
+            />
+          );
+        });
+
+        it('header should not render SortSymbol', () => {
+          expect(wrapper.find(SortSymbol).length).toBe(0);
+        });
+
+        it('should call column.sortCaret correctly', () => {
+          expect(column.sortCaret).toHaveBeenCalledTimes(1);
+          expect(column.sortCaret).toHaveBeenCalledWith(Const.SORT_ASC, column);
+        });
+      });
+
       describe('when headerSortingClasses is defined ', () => {
         const classes = 'foo';
         const order = Const.SORT_DESC;