Date: Thu, 20 Dec 2018 23:47:30 +0800
Subject: [PATCH 007/250] add expandable for expandColumnRenderer
---
docs/row-expand.md | 7 ++++---
.../examples/row-expand/custom-expand-column.js | 2 +-
.../react-bootstrap-table2/src/row-expand/expand-cell.js | 1 +
3 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/docs/row-expand.md b/docs/row-expand.md
index 5de4f7b83..ce710dee8 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -92,15 +92,16 @@ const expandRow = {
```
### expandRow.expandColumnRenderer - [Function]
-Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain two properties:
-* `expanded`: Indicate if current row is expanded or not
+Provide a callback function which allow you to custom the expand indicator. This callback only have one argument which is an object and contain these properties:
+* `expanded`: If current row is expanded or not
* `rowKey`: Current row key
+* `expandable`: If currnet row is expandable or not
```js
const expandRow = {
renderer: (row) => ...
- expandColumnRenderer: ({ expanded, rowKey }) => (
+ expandColumnRenderer: ({ expanded, rowKey, expandable }) => (
// ....
)
};
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/custom-expand-column.js b/packages/react-bootstrap-table2-example/examples/row-expand/custom-expand-column.js
index b1ed8c177..507bcf275 100644
--- a/packages/react-bootstrap-table2-example/examples/row-expand/custom-expand-column.js
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/custom-expand-column.js
@@ -34,7 +34,7 @@ const expandRow = {
}
return + ;
},
- expandColumnRenderer: ({ expanded, rowKey }) => {
+ expandColumnRenderer: ({ expanded, rowKey, expandable }) => {
if (expanded) {
return (
-
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-cell.js b/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
index dc7bf24b0..4b5903dd9 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
@@ -47,6 +47,7 @@ export default class ExpandCell extends Component {
{
expandColumnRenderer ? expandColumnRenderer({
+ expandable,
expanded,
rowKey
}) : (expandable ? (expanded ? '(-)' : '(+)') : '')
From 4ddbfd4972f84606450b0e1ff87778423ccb49d0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Fri, 21 Dec 2018 16:23:14 +0800
Subject: [PATCH 008/250] fix #711
---
docs/README.md | 9 +++
.../examples/rows/row-hidden.js | 57 +++++++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 5 +-
.../src/props-resolver/index.js | 10 ++++
.../test/props-resolver/index.test.js | 45 +++++++++++++++
6 files changed, 125 insertions(+), 3 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/rows/row-hidden.js
diff --git a/docs/README.md b/docs/README.md
index 56f1fa3ae..3fc1c5828 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -27,6 +27,7 @@
* [rowStyle](#rowStyle)
* [rowClasses](#rowClasses)
* [rowEvents](#rowEvents)
+* [hiddenRows](#hiddenRows)
* [defaultSorted](#defaultSorted)
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
@@ -181,6 +182,14 @@ const rowEvents = {
hiddenRows - [Array]
+Hide rows, this props accept an array of row keys:
+
+```js
+const hiddenRows = [1, 4];
+defaultSorted - [Array]
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
diff --git a/packages/react-bootstrap-table2-example/examples/rows/row-hidden.js b/packages/react-bootstrap-table2-example/examples/rows/row-hidden.js
new file mode 100644
index 000000000..c200a7bf5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/rows/row-hidden.js
@@ -0,0 +1,57 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-console: 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'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const rowEvents = {
+ onClick: (e, row, rowIndex) => {
+ console.log(`clicked on row with index: ${rowIndex}`);
+ },
+ onMouseEnter: (e, row, rowIndex) => {
+ console.log(`enter on row with index: ${rowIndex}`);
+ }
+};
+
+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'
+}];
+
+const hiddenRowKeys = [1, 3];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 275728069..fe2eecddc 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -79,6 +79,7 @@ import ClearAllFilters from 'examples/column-filter/clear-all-filters';
import RowStyleTable from 'examples/rows/row-style';
import RowClassTable from 'examples/rows/row-class';
import RowEventTable from 'examples/rows/row-event';
+import RowHiddenTable from 'examples/rows/row-hidden';
// table sort
import EnableSortTable from 'examples/sort/enable-sort-table';
@@ -271,6 +272,7 @@ storiesOf('Work on Rows', module)
.addDecorator(bootstrapStyle())
.add('Customize Row Style', () =>
Date: Fri, 21 Dec 2018 16:51:04 +0800
Subject: [PATCH 009/250] Publish
- react-bootstrap-table2-example@1.0.12
- react-bootstrap-table-next@1.4.3
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 4532ad475..bc00de469 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.11",
+ "version": "1.0.12",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index d21d605ab..df97e8716 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "1.4.2",
+ "version": "1.4.3",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From d4be1675db7d78d45fca8ac0d5552c2696fc5b5f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 25 Nov 2018 14:18:04 +0800
Subject: [PATCH 010/250] refactoring pagination context
---
.../react-bootstrap-table2-paginator/index.js | 21 +-
.../src/context.js | 182 ------------------
.../src/data-context.js | 100 ++++++++++
.../src/page.js | 4 +-
.../src/state-context.js | 163 ++++++++++++++++
.../src/contexts/index.js | 9 +-
.../src/props-resolver/remote-resolver.js | 13 +-
7 files changed, 301 insertions(+), 191 deletions(-)
delete mode 100644 packages/react-bootstrap-table2-paginator/src/context.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/data-context.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/state-context.js
diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js
index 87501837a..8b20636a3 100644
--- a/packages/react-bootstrap-table2-paginator/index.js
+++ b/packages/react-bootstrap-table2-paginator/index.js
@@ -1,6 +1,23 @@
-import createContext from './src/context';
+import React from 'react';
+import PropTypes from 'prop-types';
+import createBaseContext from './src/state-context';
+import createDataContext from './src/data-context';
export default (options = {}) => ({
- createContext,
+ createContext: createDataContext,
options
});
+
+const { Provider, Consumer } = createBaseContext();
+
+const CustomizableProvider = props => (
+
+ { paginationProps => props.children(paginationProps) }
+
+);
+
+CustomizableProvider.propTypes = {
+ children: PropTypes.func.isRequired
+};
+
+export const PaginationProvider = CustomizableProvider;
diff --git a/packages/react-bootstrap-table2-paginator/src/context.js b/packages/react-bootstrap-table2-paginator/src/context.js
deleted file mode 100644
index d5ffb9658..000000000
--- a/packages/react-bootstrap-table2-paginator/src/context.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/* eslint react/prop-types: 0 */
-/* eslint react/require-default-props: 0 */
-/* eslint no-lonely-if: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Const from './const';
-import { BootstrapContext } from './bootstrap';
-import Pagination from './pagination';
-import { getByCurrPage, alignPage } from './page';
-
-export default (
- isRemotePagination,
- handleRemotePageChange
-) => {
- const PaginationContext = React.createContext();
-
- class PaginationProvider extends React.Component {
- static propTypes = {
- data: PropTypes.array.isRequired
- }
-
- constructor(props) {
- super(props);
- this.handleChangePage = this.handleChangePage.bind(this);
- this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
-
- let currPage;
- let currSizePerPage;
- const { options } = props.pagination;
- const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
-
- // initialize current page
- if (typeof options.page !== 'undefined') {
- currPage = options.page;
- } else if (typeof options.pageStartIndex !== 'undefined') {
- currPage = options.pageStartIndex;
- } else {
- currPage = Const.PAGE_START_INDEX;
- }
-
- // initialize current sizePerPage
- if (typeof options.sizePerPage !== 'undefined') {
- currSizePerPage = options.sizePerPage;
- } else if (typeof sizePerPageList[0] === 'object') {
- currSizePerPage = sizePerPageList[0].value;
- } else {
- currSizePerPage = sizePerPageList[0];
- }
-
- this.currPage = currPage;
- this.currSizePerPage = currSizePerPage;
- }
-
- componentWillReceiveProps(nextProps) {
- let needNewState = false;
- let { currPage } = this;
- const { currSizePerPage } = this;
- const { onPageChange } = nextProps.pagination.options;
-
- const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ?
- nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX;
-
- // user should align the page when the page is not fit to the data size when remote enable
- if (!isRemotePagination()) {
- const newPage = alignPage(nextProps.data, currPage, currSizePerPage, pageStartIndex);
- if (currPage !== newPage) {
- currPage = newPage;
- needNewState = true;
- }
- } else {
- this.currPage = nextProps.pagination.options.page;
- this.currSizePerPage = nextProps.pagination.options.sizePerPage;
- }
-
- if (needNewState) {
- if (onPageChange) {
- onPageChange(currPage, currSizePerPage);
- }
- this.currPage = currPage;
- this.currSizePerPage = currSizePerPage;
- }
- }
-
- handleChangePage(currPage) {
- const { currSizePerPage } = this;
- const { pagination: { options } } = this.props;
-
- if (options.onPageChange) {
- options.onPageChange(currPage, currSizePerPage);
- }
-
- this.currPage = currPage;
-
- if (isRemotePagination()) {
- handleRemotePageChange(currPage, currSizePerPage);
- return;
- }
- this.forceUpdate();
- }
-
- handleChangeSizePerPage(currSizePerPage, currPage) {
- const { pagination: { options } } = this.props;
-
- if (options.onSizePerPageChange) {
- options.onSizePerPageChange(currSizePerPage, currPage);
- }
-
- this.currPage = currPage;
- this.currSizePerPage = currSizePerPage;
-
- if (isRemotePagination()) {
- handleRemotePageChange(currPage, currSizePerPage);
- return;
- }
- this.forceUpdate();
- }
-
- render() {
- let { data } = this.props;
- const { pagination: { options }, bootstrap4 } = this.props;
- const { currPage, currSizePerPage } = this;
- const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
- Const.With_FIRST_AND_LAST : options.withFirstAndLast;
- const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
- Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
- const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
- Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
- const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
- Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
- const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
- Const.PAGE_START_INDEX : options.pageStartIndex;
-
- data = isRemotePagination() ?
- data :
- getByCurrPage(
- data,
- currPage,
- currSizePerPage,
- pageStartIndex
- );
-
- return (
-
- { this.props.children }
-
-
-
- );
- }
- }
-
- return {
- Provider: PaginationProvider,
- Consumer: PaginationContext.Consumer
- };
-};
diff --git a/packages/react-bootstrap-table2-paginator/src/data-context.js b/packages/react-bootstrap-table2-paginator/src/data-context.js
new file mode 100644
index 000000000..d9e9e0183
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/data-context.js
@@ -0,0 +1,100 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-lonely-if: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from './const';
+import { BootstrapContext } from './bootstrap';
+import Pagination from './pagination';
+import { getByCurrPage, alignPage } from './page';
+import createBaseContext from './state-context';
+
+const { Provider } = createBaseContext();
+
+const PaginationDataContext = React.createContext();
+
+class PaginationDataProvider extends Provider {
+ static propTypes = {
+ data: PropTypes.array.isRequired,
+ remoteEmitter: PropTypes.object.isRequired,
+ isRemotePagination: PropTypes.func.isRequired
+ }
+
+ componentWillReceiveProps(nextProps) {
+ super.componentWillReceiveProps(nextProps);
+ const { currSizePerPage } = this;
+ const { custom, onPageChange } = nextProps.pagination.options;
+
+ const pageStartIndex = typeof nextProps.pagination.options.pageStartIndex !== 'undefined' ?
+ nextProps.pagination.options.pageStartIndex : Const.PAGE_START_INDEX;
+
+ // user should align the page when the page is not fit to the data size when remote enable
+ if (!this.isRemotePagination() && !custom) {
+ const newPage = alignPage(
+ nextProps.data.length, this.currPage, currSizePerPage, pageStartIndex);
+
+ if (this.currPage !== newPage) {
+ if (onPageChange) {
+ onPageChange(newPage, currSizePerPage);
+ }
+ this.currPage = newPage;
+ }
+ }
+ }
+
+ isRemotePagination = () => this.props.isRemotePagination();
+
+ renderDefaultPagination = () => {
+ if (!this.props.pagination.options.custom) {
+ const {
+ bootstrap4,
+ page: currPage,
+ sizePerPage: currSizePerPage,
+ dataSize,
+ ...rest
+ } = this.getPaginationProps();
+ return (
+
+
+ );
+ }
+ return null;
+ }
+
+ render() {
+ let { data } = this.props;
+ const { pagination: { options } } = this.props;
+ const { currPage, currSizePerPage } = this;
+ const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+ Const.PAGE_START_INDEX : options.pageStartIndex;
+
+ data = this.isRemotePagination() ?
+ data :
+ getByCurrPage(
+ data,
+ currPage,
+ currSizePerPage,
+ pageStartIndex
+ );
+
+ return (
+
+ { this.props.children }
+ { this.renderDefaultPagination() }
+
+ );
+ }
+}
+
+export default () => ({
+ Provider: PaginationDataProvider,
+ Consumer: PaginationDataContext.Consumer
+});
diff --git a/packages/react-bootstrap-table2-paginator/src/page.js b/packages/react-bootstrap-table2-paginator/src/page.js
index feb1f0a6a..1e3e82b0d 100644
--- a/packages/react-bootstrap-table2-paginator/src/page.js
+++ b/packages/react-bootstrap-table2-paginator/src/page.js
@@ -18,13 +18,11 @@ const startIndex = (
) => end - (sizePerPage - 1);
export const alignPage = (
- data,
+ dataSize,
page,
sizePerPage,
pageStartIndex
) => {
- const dataSize = data.length;
-
if (page < pageStartIndex || page > (Math.floor(dataSize / sizePerPage) + pageStartIndex)) {
return pageStartIndex;
}
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
new file mode 100644
index 000000000..122b62bb1
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -0,0 +1,163 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/require-default-props: 0 */
+/* eslint no-lonely-if: 0 */
+import React from 'react';
+import Const from './const';
+
+const StateContext = React.createContext();
+
+class StateProvider extends React.Component {
+ constructor(props) {
+ super(props);
+ this.handleChangePage = this.handleChangePage.bind(this);
+ this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+
+ let currPage;
+ let currSizePerPage;
+ const { options } = props.pagination;
+ const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
+
+ // initialize current page
+ if (typeof options.page !== 'undefined') {
+ currPage = options.page;
+ } else if (typeof options.pageStartIndex !== 'undefined') {
+ currPage = options.pageStartIndex;
+ } else {
+ currPage = Const.PAGE_START_INDEX;
+ }
+
+ // initialize current sizePerPage
+ if (typeof options.sizePerPage !== 'undefined') {
+ currSizePerPage = options.sizePerPage;
+ } else if (typeof sizePerPageList[0] === 'object') {
+ currSizePerPage = sizePerPageList[0].value;
+ } else {
+ currSizePerPage = sizePerPageList[0];
+ }
+
+ this.currPage = currPage;
+ this.currSizePerPage = currSizePerPage;
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { custom } = nextProps.pagination.options;
+
+ // user should align the page when the page is not fit to the data size when remote enable
+ if (this.isRemotePagination() || custom) {
+ this.currPage = nextProps.pagination.options.page;
+ this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+ }
+ }
+
+ getPaginationProps = () => {
+ const { pagination: { options }, bootstrap4 } = this.props;
+ const { currPage, currSizePerPage } = this;
+ const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
+ Const.With_FIRST_AND_LAST : options.withFirstAndLast;
+ const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
+ Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
+ const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
+ Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
+ const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
+ Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
+ const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+ Const.PAGE_START_INDEX : options.pageStartIndex;
+ return {
+ ...options,
+ bootstrap4,
+ page: currPage,
+ sizePerPage: currSizePerPage,
+ pageStartIndex,
+ hidePageListOnlyOnePage,
+ hideSizePerPage,
+ alwaysShowAllBtns,
+ withFirstAndLast,
+ dataSize: options.totalSize,
+ sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
+ paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
+ showTotal: options.showTotal,
+ paginationTotalRenderer: options.paginationTotalRenderer,
+ firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
+ prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
+ nextPageText: options.nextPageText || Const.NEXT_PAGE_TEXT,
+ lastPageText: options.lastPageText || Const.LAST_PAGE_TEXT,
+ prePageTitle: options.prePageTitle || Const.PRE_PAGE_TITLE,
+ nextPageTitle: options.nextPageTitle || Const.NEXT_PAGE_TITLE,
+ firstPageTitle: options.firstPageTitle || Const.FIRST_PAGE_TITLE,
+ lastPageTitle: options.lastPageTitle || Const.LAST_PAGE_TITLE,
+ onPageChange: this.handleChangePage,
+ onSizePerPageChange: this.handleChangeSizePerPage
+ };
+ }
+
+ setPaginationRemoteEmitter = (remoteEmitter) => {
+ this.remoteEmitter = remoteEmitter;
+ }
+
+ isRemotePagination = () => {
+ const e = {};
+ this.remoteEmitter.emit('isRemotePagination', e);
+ return e.result;
+ };
+
+ handleChangePage(currPage) {
+ const { currSizePerPage } = this;
+ const { pagination: { options } } = this.props;
+
+ if (options.onPageChange) {
+ options.onPageChange(currPage, currSizePerPage);
+ }
+
+ this.currPage = currPage;
+
+ if (this.isRemotePagination()) {
+ this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage);
+ return;
+ }
+ this.forceUpdate();
+ }
+
+ handleChangeSizePerPage(currSizePerPage, currPage) {
+ const { pagination: { options } } = this.props;
+
+ if (options.onSizePerPageChange) {
+ options.onSizePerPageChange(currSizePerPage, currPage);
+ }
+
+ this.currPage = currPage;
+ this.currSizePerPage = currSizePerPage;
+
+ if (this.isRemotePagination()) {
+ this.remoteEmitter.emit('paginationChange', currPage, currSizePerPage);
+ return;
+ }
+ this.forceUpdate();
+ }
+
+ render() {
+ const paginationProps = this.getPaginationProps();
+ const pagination = {
+ ...this.props.pagination,
+ options: paginationProps
+ };
+
+ return (
+
+ { this.props.children }
+
+ );
+ }
+}
+
+export default () => ({
+ Provider: StateProvider,
+ Consumer: StateContext.Consumer
+});
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index dc2f6a774..12bfb9a7c 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -40,8 +40,7 @@ const withContext = Base =>
}
if (props.pagination) {
- this.PaginationContext = props.pagination.createContext(
- this.isRemotePagination, this.handleRemotePageChange);
+ this.PaginationContext = props.pagination.createContext();
}
if (props.search && props.search.searchContext) {
@@ -52,6 +51,10 @@ const withContext = Base =>
if (props.setDependencyModules) {
props.setDependencyModules(_);
}
+
+ if (props.setPaginationRemoteEmitter) {
+ props.setPaginationRemoteEmitter(this.remoteEmitter);
+ }
}
componentWillReceiveProps(nextProps) {
@@ -150,6 +153,8 @@ const withContext = Base =>
pagination={ this.props.pagination }
data={ rootProps.getData(filterProps, searchProps, sortProps) }
bootstrap4={ this.props.bootstrap4 }
+ isRemotePagination={ this.isRemotePagination }
+ remoteEmitter={ this.remoteEmitter }
>
{
diff --git a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
index 89af4c6ad..b8f493510 100644
--- a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
+++ b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
@@ -1,7 +1,15 @@
+import EventEmitter from 'events';
import _ from '../utils';
export default ExtendBase =>
class RemoteResolver extends ExtendBase {
+ constructor(props) {
+ super(props);
+ this.remoteEmitter = new EventEmitter();
+ this.remoteEmitter.on('paginationChange', this.handleRemotePageChange);
+ this.remoteEmitter.on('isRemotePagination', this.isRemotePagination);
+ }
+
getNewestState = (state = {}) => {
let sortOrder;
let sortField;
@@ -47,9 +55,10 @@ export default ExtendBase =>
return remote === true || (_.isObject(remote) && remote.search) || this.isRemotePagination();
}
- isRemotePagination = () => {
+ isRemotePagination = (e = {}) => {
const { remote } = this.props;
- return remote === true || (_.isObject(remote) && remote.pagination);
+ e.result = (remote === true || (_.isObject(remote) && remote.pagination));
+ return e.result;
}
isRemoteFiltering = () => {
From 7dbdc1943b15dc5beeb5564d3c03e4cef04a06b6 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 1 Dec 2018 15:46:51 +0800
Subject: [PATCH 011/250] patch pagination context test suites
---
.../test/context.test.js | 711 ---------------
.../test/data-context.test.js | 208 +++++
.../test/page.test.js | 20 +-
.../test/state-context.test.js | 841 ++++++++++++++++++
4 files changed, 1052 insertions(+), 728 deletions(-)
delete mode 100644 packages/react-bootstrap-table2-paginator/test/context.test.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/data-context.test.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/state-context.test.js
diff --git a/packages/react-bootstrap-table2-paginator/test/context.test.js b/packages/react-bootstrap-table2-paginator/test/context.test.js
deleted file mode 100644
index d72caea7a..000000000
--- a/packages/react-bootstrap-table2-paginator/test/context.test.js
+++ /dev/null
@@ -1,711 +0,0 @@
-import 'jsdom-global/register';
-import React from 'react';
-import { shallow } from 'enzyme';
-import BootstrapTable from 'react-bootstrap-table-next/src/bootstrap-table';
-
-import Pagination from '../src/pagination';
-import Const from '../src/const';
-import createPaginationContext from '../src/context';
-import paginationFactory from '../index';
-
-const data = [];
-for (let i = 0; i < 100; i += 1) {
- data.push({
- id: i,
- name: `itme name ${i}`
- });
-}
-
-describe('PaginationContext', () => {
- let wrapper;
- let PaginationContext;
-
- const columns = [{
- dataField: 'id',
- text: 'ID'
- }, {
- dataField: 'name',
- text: 'Name'
- }];
-
- const defaultPagination = { options: {} };
-
- const mockBase = jest.fn((props => (
-
-
- {
- paginationProps => mockBase(paginationProps)
- }
-
-
- );
- }
-
- describe('default render', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext());
- wrapper.render();
- });
-
- it('should have correct Provider property after calling createPaginationContext', () => {
- expect(PaginationContext.Provider).toBeDefined();
- });
-
- it('should have correct Consumer property after calling createPaginationContext', () => {
- expect(PaginationContext.Consumer).toBeDefined();
- });
-
- it('should have correct currPage', () => {
- expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
- });
-
- it('should have correct currSizePerPage', () => {
- expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
- });
-
- it('should render Pagination component correctly', () => {
- expect(wrapper.length).toBe(1);
- const instance = wrapper.instance();
- const pagination = wrapper.find(Pagination);
- expect(pagination).toHaveLength(1);
- expect(pagination.prop('dataSize')).toEqual(data.length);
- expect(pagination.prop('currPage')).toEqual(instance.currPage);
- expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
- expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
- expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
- expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
- expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
- expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
- expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
- expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
- expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
- expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
- expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
- expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
- expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
- expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
- expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
- expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
- expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
- expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
- expect(pagination.prop('paginationTotalRenderer')).toBeNull();
- });
-
- it('should pass correct cell editing props to children element', () => {
- expect(mockBase.mock.calls[0][0].data).toHaveLength(Const.SIZE_PER_PAGE_LIST[0]);
- });
- });
-
- describe('componentWillReceiveProps', () => {
- let instance;
- let nextProps;
-
- describe('when nextProps.pagination.options.page is not existing', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- page: 3
- }));
- instance = wrapper.instance();
- wrapper.render();
- nextProps = { data, pagination: defaultPagination };
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should not set currPage', () => {
- expect(instance.currPage).toEqual(3);
- });
- });
-
- describe('when nextProps.pagination.options.sizePerPage is not existing', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- sizePerPage: Const.SIZE_PER_PAGE_LIST[2]
- }));
- instance = wrapper.instance();
- wrapper.render();
- nextProps = { data, pagination: defaultPagination };
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should not set currSizePerPage', () => {
- expect(instance.currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[2]);
- });
- });
-
- 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({
- ...defaultPagination,
- page: 2
- }));
- instance = wrapper.instance();
- wrapper.render();
- nextProps = {
- data: [],
- pagination: { ...defaultPagination }
- };
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should reset currPage to first page', () => {
- expect(instance.currPage).toEqual(1);
- });
-
- describe('if options.onPageChange is defined', () => {
- const onPageChange = jest.fn();
- beforeEach(() => {
- onPageChange.mockClear();
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- page: 2
- }));
- instance = wrapper.instance();
- wrapper.render();
- nextProps = {
- data: [],
- pagination: { ...defaultPagination, options: { onPageChange } }
- };
- instance.componentWillReceiveProps(nextProps);
- });
-
- it('should call options.onPageChange correctly', () => {
- expect(onPageChange).toHaveBeenCalledTimes(1);
- expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage);
- });
- });
- });
- });
-
- describe('handleChangePage', () => {
- let instance;
- const newPage = 3;
-
- describe('should update component correctly', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext());
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangePage(newPage);
- });
-
- it('', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
- });
- });
-
- describe('if options.onPageChange is defined', () => {
- const onPageChange = jest.fn();
- beforeEach(() => {
- onPageChange.mockClear();
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- onPageChange
- }));
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangePage(newPage);
- });
-
- it('should still update component correctly', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
- });
-
- it('should call options.onPageChange correctly', () => {
- expect(onPageChange).toHaveBeenCalledTimes(1);
- expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
- });
- });
-
- describe('if remote pagination is enable', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination
- }, true));
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangePage(newPage);
- });
-
- it('should still update component correctly', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
- });
-
- it('should call handleRemotePageChange correctly', () => {
- expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
- expect(handleRemotePaginationChange)
- .toHaveBeenCalledWith(newPage, instance.currSizePerPage);
- });
- });
- });
-
- describe('handleChangeSizePerPage', () => {
- let instance;
- const newPage = 2;
- const newSizePerPage = 15;
-
- describe('should update component correctly', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext());
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangeSizePerPage(newSizePerPage, newPage);
- });
-
- it('', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.currSizePerPage).toEqual(newSizePerPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
- });
- });
-
- describe('if options.onSizePerPageChange is defined', () => {
- const onSizePerPageChange = jest.fn();
- beforeEach(() => {
- onSizePerPageChange.mockClear();
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- onSizePerPageChange
- }));
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangeSizePerPage(newSizePerPage, newPage);
- });
-
- it('should still update component correctly', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.currSizePerPage).toEqual(newSizePerPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
- });
-
- it('should call options.onSizePerPageChange correctly', () => {
- expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
- expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
- });
- });
-
- describe('if remote pagination is enable', () => {
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination
- }, true));
- instance = wrapper.instance();
- jest.spyOn(instance, 'forceUpdate');
- instance.handleChangeSizePerPage(newSizePerPage, newPage);
- });
-
- it('should still update component correctly', () => {
- expect(instance.currPage).toEqual(newPage);
- expect(instance.currSizePerPage).toEqual(newSizePerPage);
- expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
- });
-
- it('should call handleRemotePageChange correctly', () => {
- expect(handleRemotePaginationChange).toHaveBeenCalledTimes(1);
- expect(handleRemotePaginationChange)
- .toHaveBeenCalledWith(newPage, newSizePerPage);
- });
- });
- });
-
- describe('when options.page is defined', () => {
- const page = 3;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- page
- }));
- wrapper.render();
- });
-
- it('should set correct currPage', () => {
- expect(wrapper.instance().currPage).toEqual(page);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('currPage')).toEqual(page);
- });
- });
-
- describe('when options.sizePerPage is defined', () => {
- const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- sizePerPage
- }));
- wrapper.render();
- });
-
- it('should set correct currSizePerPage', () => {
- expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('currSizePerPage')).toEqual(sizePerPage);
- });
- });
-
- describe('when options.totalSize is defined', () => {
- const totalSize = 100;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- totalSize
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('dataSize')).toEqual(totalSize);
- });
- });
-
- describe('when options.showTotal is defined', () => {
- const showTotal = true;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- showTotal
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('showTotal')).toEqual(showTotal);
- });
- });
-
- describe('when options.pageStartIndex is defined', () => {
- const pageStartIndex = -1;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- pageStartIndex
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('pageStartIndex')).toEqual(pageStartIndex);
- });
- });
-
- describe('when options.sizePerPageList is defined', () => {
- const sizePerPageList = [10, 40];
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- sizePerPageList
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('sizePerPageList')).toEqual(sizePerPageList);
- });
- });
-
- describe('when options.paginationSize is defined', () => {
- const paginationSize = 10;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- paginationSize
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('paginationSize')).toEqual(paginationSize);
- });
- });
-
- describe('when options.withFirstAndLast is defined', () => {
- const withFirstAndLast = false;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- withFirstAndLast
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('withFirstAndLast')).toEqual(withFirstAndLast);
- });
- });
-
- describe('when options.alwaysShowAllBtns is defined', () => {
- const alwaysShowAllBtns = true;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- alwaysShowAllBtns
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('alwaysShowAllBtns')).toEqual(alwaysShowAllBtns);
- });
- });
-
- describe('when options.firstPageText is defined', () => {
- const firstPageText = '1st';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- firstPageText
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('firstPageText')).toEqual(firstPageText);
- });
- });
-
- describe('when options.prePageText is defined', () => {
- const prePageText = 'PRE';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- prePageText
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('prePageText')).toEqual(prePageText);
- });
- });
-
- describe('when options.nextPageText is defined', () => {
- const nextPageText = 'NEXT';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- nextPageText
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('nextPageText')).toEqual(nextPageText);
- });
- });
-
- describe('when options.lastPageText is defined', () => {
- const lastPageText = 'LAST';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- lastPageText
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('lastPageText')).toEqual(lastPageText);
- });
- });
-
- describe('when options.firstPageTitle is defined', () => {
- const firstPageTitle = '1st';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- firstPageTitle
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('firstPageTitle')).toEqual(firstPageTitle);
- });
- });
-
- describe('when options.prePageTitle is defined', () => {
- const prePageTitle = 'PRE';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- prePageTitle
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('prePageTitle')).toEqual(prePageTitle);
- });
- });
-
- describe('when options.nextPageTitle is defined', () => {
- const nextPageTitle = 'NEXT';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- nextPageTitle
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('nextPageTitle')).toEqual(nextPageTitle);
- });
- });
-
- describe('when options.lastPageTitle is defined', () => {
- const lastPageTitle = 'nth';
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- lastPageTitle
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('lastPageTitle')).toEqual(lastPageTitle);
- });
- });
-
- describe('when options.hideSizePerPage is defined', () => {
- const hideSizePerPage = true;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- hideSizePerPage
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('hideSizePerPage')).toEqual(hideSizePerPage);
- });
- });
-
- describe('when options.hidePageListOnlyOnePage is defined', () => {
- const hidePageListOnlyOnePage = true;
-
- beforeEach(() => {
- wrapper = shallow(shallowContext({
- ...defaultPagination,
- hidePageListOnlyOnePage
- }));
- wrapper.render();
- });
-
- it('should rendering Pagination correctly', () => {
- const pagination = wrapper.find(Pagination);
- expect(pagination.length).toBe(1);
- expect(pagination.prop('hidePageListOnlyOnePage')).toEqual(hidePageListOnlyOnePage);
- });
- });
-});
diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
new file mode 100644
index 000000000..6128f7bed
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
@@ -0,0 +1,208 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import paginationFactory from '../index';
+import Const from '../src/const';
+import createStateContext from '../src/data-context';
+import Pagination from '../src/pagination';
+import { getByCurrPage } from '../src/page';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+ data.push({
+ id: i,
+ name: `itme name ${i}`
+ });
+}
+
+describe('PaginationDataContext', () => {
+ let wrapper;
+ let PaginationDataContext;
+
+ const defaultPagination = { options: { totalSize: data.length }, createContext: jest.fn() };
+
+ const MockComponent = () => null;
+ const renderMockComponent = jest.fn((props => (
+
+
+ {
+ paginationProps => renderMockComponent(paginationProps)
+ }
+
+
+ );
+ }
+
+ describe('default render', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext());
+ wrapper.render();
+ });
+
+ it('should have correct Provider property after calling createPaginationDataContext', () => {
+ expect(PaginationDataContext.Provider).toBeDefined();
+ });
+
+ it('should have correct Consumer property after calling createPaginationDataContext', () => {
+ expect(PaginationDataContext.Consumer).toBeDefined();
+ });
+
+ it('should have correct currPage', () => {
+ expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
+ });
+
+ it('should have correct currSizePerPage', () => {
+ expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+ });
+
+ it('should render correct data props to childrens', () => {
+ const instance = wrapper.instance();
+ expect(renderMockComponent).toHaveBeenCalledTimes(1);
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ data: getByCurrPage(
+ data,
+ instance.currPage,
+ instance.currSizePerPage,
+ Const.PAGE_START_INDEX
+ ),
+ setRemoteEmitter: instance.setRemoteEmitter
+ });
+ });
+ });
+
+ describe('default render', () => {
+ describe('when options.custom is negative', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext());
+ wrapper.render();
+ });
+
+ it('should render Pagination component correctly', () => {
+ const instance = wrapper.instance();
+ const pagination = wrapper.find(Pagination);
+ expect(pagination).toHaveLength(1);
+
+ expect(pagination.prop('dataSize')).toEqual(data.length);
+ expect(pagination.prop('currPage')).toEqual(instance.currPage);
+ expect(pagination.prop('currSizePerPage')).toEqual(instance.currSizePerPage);
+ expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);
+ expect(pagination.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
+ expect(pagination.prop('sizePerPageList')).toEqual(Const.SIZE_PER_PAGE_LIST);
+ expect(pagination.prop('paginationSize')).toEqual(Const.PAGINATION_SIZE);
+ expect(pagination.prop('pageStartIndex')).toEqual(Const.PAGE_START_INDEX);
+ expect(pagination.prop('withFirstAndLast')).toEqual(Const.With_FIRST_AND_LAST);
+ expect(pagination.prop('alwaysShowAllBtns')).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+ expect(pagination.prop('firstPageText')).toEqual(Const.FIRST_PAGE_TEXT);
+ expect(pagination.prop('prePageText')).toEqual(Const.PRE_PAGE_TEXT);
+ expect(pagination.prop('nextPageText')).toEqual(Const.NEXT_PAGE_TEXT);
+ expect(pagination.prop('lastPageText')).toEqual(Const.LAST_PAGE_TEXT);
+ expect(pagination.prop('firstPageTitle')).toEqual(Const.FIRST_PAGE_TITLE);
+ expect(pagination.prop('prePageTitle')).toEqual(Const.PRE_PAGE_TITLE);
+ expect(pagination.prop('nextPageTitle')).toEqual(Const.NEXT_PAGE_TITLE);
+ expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
+ expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+ expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
+ expect(pagination.prop('paginationTotalRenderer')).toBeNull();
+ });
+ });
+
+ describe('when options.custom is positive', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ custom: true
+ }));
+ wrapper.render();
+ });
+
+ it('should not render Pagination component', () => {
+ const pagination = wrapper.find(Pagination);
+ expect(pagination).toHaveLength(0);
+ });
+ });
+ });
+
+ describe('when remote pagination enabled', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({}, true));
+ wrapper.render();
+ });
+
+ it('just pass data props to children', () => {
+ const instance = wrapper.instance();
+ expect(renderMockComponent).toHaveBeenCalledTimes(1);
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ data: instance.props.data,
+ setRemoteEmitter: instance.setRemoteEmitter
+ });
+ });
+ });
+
+ describe('componentWillReceiveProps', () => {
+ let instance;
+ let nextProps;
+ describe('when page is not align', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ page: 2
+ }));
+ instance = wrapper.instance();
+ wrapper.render();
+ nextProps = {
+ data: [],
+ pagination: { ...defaultPagination }
+ };
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should reset currPage to first page', () => {
+ expect(instance.currPage).toEqual(1);
+ });
+
+ describe('if options.onPageChange is defined', () => {
+ const onPageChange = jest.fn();
+ beforeEach(() => {
+ onPageChange.mockClear();
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ page: 2
+ }));
+ instance = wrapper.instance();
+ wrapper.render();
+ nextProps = {
+ data: [],
+ pagination: { ...defaultPagination, options: { onPageChange } }
+ };
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should call options.onPageChange correctly', () => {
+ expect(onPageChange).toHaveBeenCalledTimes(1);
+ expect(onPageChange).toHaveBeenCalledWith(instance.currPage, instance.currSizePerPage);
+ });
+ });
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2-paginator/test/page.test.js b/packages/react-bootstrap-table2-paginator/test/page.test.js
index dad8742f4..aa20c3343 100644
--- a/packages/react-bootstrap-table2-paginator/test/page.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page.test.js
@@ -46,29 +46,15 @@ describe('Page Functions', () => {
const pageStartIndex = 1;
const sizePerPage = 10;
const page = 3;
- describe('if the page does not fit the pages interval calculated from the length of store.data', () => {
- beforeEach(() => {
- data = [];
- for (let i = 0; i < 15; i += 1) {
- data.push({ id: i, name: `test_name${i}` });
- }
- });
-
+ describe('if the page does not fit the pages which calculated from the length of data', () => {
it('should return pageStartIndex argument', () => {
- expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
+ expect(alignPage(15, page, sizePerPage, pageStartIndex)).toEqual(pageStartIndex);
});
});
describe('if the length of store.data is large than the end page index', () => {
- beforeEach(() => {
- data = [];
- for (let i = 0; i < 30; i += 1) {
- data.push({ id: i, name: `test_name${i}` });
- }
- });
-
it('should return current page', () => {
- expect(alignPage(data, page, sizePerPage, pageStartIndex)).toEqual(page);
+ expect(alignPage(30, page, sizePerPage, pageStartIndex)).toEqual(page);
});
});
});
diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
new file mode 100644
index 000000000..e67d10a26
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
@@ -0,0 +1,841 @@
+/* eslint no-param-reassign: 0 */
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Const from '../src/const';
+import createStateContext from '../src/state-context';
+import paginationFactory from '../index';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+ data.push({
+ id: i,
+ name: `itme name ${i}`
+ });
+}
+
+describe('PaginationStateContext', () => {
+ let wrapper;
+ let remoteEmitter;
+ let PaginationStateContext;
+
+ const defaultPagination = { options: {}, createContext: jest.fn() };
+
+ const MockComponent = () => null;
+ const renderMockComponent = jest.fn((props => (
+
+
+ {
+ paginationProps => renderMockComponent(paginationProps)
+ }
+
+
+ );
+ }
+
+ function setRemotePaginationEmitter(
+ instance,
+ remoteEnabled = false
+ ) {
+ remoteEmitter = { emit: jest.fn() };
+ if (remoteEnabled) {
+ remoteEmitter.emit = jest.fn().mockImplementation((evtName, d = {}) => {
+ if (evtName === 'isRemotePagination') {
+ d.result = remoteEnabled;
+ }
+ });
+ }
+ instance.setPaginationRemoteEmitter(remoteEmitter);
+ }
+
+ describe('default render', () => {
+ const options = { totalSize: data.length };
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext(options));
+ wrapper.render();
+ });
+
+ it('should have correct Provider property after calling createPaginationStateContext', () => {
+ expect(PaginationStateContext.Provider).toBeDefined();
+ });
+
+ it('should have correct Consumer property after calling createPaginationStateContext', () => {
+ expect(PaginationStateContext.Consumer).toBeDefined();
+ });
+
+ it('should have correct currPage', () => {
+ expect(wrapper.instance().currPage).toEqual(Const.PAGE_START_INDEX);
+ });
+
+ it('should have correct currSizePerPage', () => {
+ expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
+ });
+
+ it('should get correct pagination props', () => {
+ const instance = wrapper.instance();
+ expect(wrapper.length).toBe(1);
+ expect(renderMockComponent).toHaveBeenCalledTimes(1);
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+
+ it('should return correct pagination states from getPaginationProps function', () => {
+ const instance = wrapper.instance();
+ const paginationProps = instance.getPaginationProps();
+
+ expect(paginationProps.dataSize).toEqual(data.length);
+ expect(paginationProps.page).toEqual(instance.currPage);
+ expect(paginationProps.sizePerPage).toEqual(instance.currSizePerPage);
+ expect(paginationProps.onPageChange).toEqual(instance.handleChangePage);
+ expect(paginationProps.onSizePerPageChange).toEqual(instance.handleChangeSizePerPage);
+ expect(paginationProps.sizePerPageList).toEqual(Const.SIZE_PER_PAGE_LIST);
+ expect(paginationProps.paginationSize).toEqual(Const.PAGINATION_SIZE);
+ expect(paginationProps.showTotal).toEqual(options.showTotal);
+ expect(paginationProps.hidePageListOnlyOnePage).toEqual(Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE);
+ expect(paginationProps.pageStartIndex).toEqual(Const.PAGE_START_INDEX);
+ expect(paginationProps.withFirstAndLast).toEqual(Const.With_FIRST_AND_LAST);
+ expect(paginationProps.alwaysShowAllBtns).toEqual(Const.SHOW_ALL_PAGE_BTNS);
+ expect(paginationProps.firstPageText).toEqual(Const.FIRST_PAGE_TEXT);
+ expect(paginationProps.prePageText).toEqual(Const.PRE_PAGE_TEXT);
+ expect(paginationProps.nextPageText).toEqual(Const.NEXT_PAGE_TEXT);
+ expect(paginationProps.lastPageText).toEqual(Const.LAST_PAGE_TEXT);
+ expect(paginationProps.firstPageTitle).toEqual(Const.FIRST_PAGE_TITLE);
+ expect(paginationProps.prePageTitle).toEqual(Const.PRE_PAGE_TITLE);
+ expect(paginationProps.nextPageTitle).toEqual(Const.NEXT_PAGE_TITLE);
+ expect(paginationProps.lastPageTitle).toEqual(Const.LAST_PAGE_TITLE);
+ expect(paginationProps.hideSizePerPage).toEqual(Const.HIDE_SIZE_PER_PAGE);
+ expect(paginationProps.paginationTotalRenderer).toEqual(options.paginationTotalRenderer);
+ });
+ });
+
+ describe('compoientWillReceiveProps', () => {
+ let instance;
+ let nextProps;
+
+ describe('if remote pagination is enable', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination
+ }, true));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance, true);
+ nextProps = {
+ data,
+ pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
+ };
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should always reset currPage and currSizePerPage', () => {
+ expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+ expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+ });
+ });
+
+ describe('if options.custom is true', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ custom: true
+ }, true));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance, true);
+ nextProps = {
+ data,
+ pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, custom: true } }
+ };
+ instance.componentWillReceiveProps(nextProps);
+ });
+
+ it('should always reset currPage and currSizePerPage', () => {
+ expect(instance.currPage).toEqual(nextProps.pagination.options.page);
+ expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+ });
+ });
+ });
+
+ describe('handleChangePage', () => {
+ let instance;
+ const newPage = 3;
+
+ describe('should update component correctly', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext());
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangePage(newPage);
+ });
+
+ it('', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ describe('if options.onPageChange is defined', () => {
+ const onPageChange = jest.fn();
+ beforeEach(() => {
+ onPageChange.mockClear();
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ onPageChange
+ }));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangePage(newPage);
+ });
+
+ it('should still update component correctly', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call options.onPageChange correctly', () => {
+ expect(onPageChange).toHaveBeenCalledTimes(1);
+ expect(onPageChange).toHaveBeenCalledWith(newPage, instance.currSizePerPage);
+ });
+ });
+
+ describe('if remote pagination is enable', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination
+ }, true));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance, true);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangePage(newPage);
+ });
+
+ it('should still update component correctly', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+ });
+
+ it('should emit paginationChange event correctly', () => {
+ expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage);
+ });
+ });
+ });
+
+ describe('handleChangeSizePerPage', () => {
+ let instance;
+ const newPage = 2;
+ const newSizePerPage = 15;
+
+ describe('should update component correctly', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext());
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangeSizePerPage(newSizePerPage, newPage);
+ });
+
+ it('', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.currSizePerPage).toEqual(newSizePerPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ describe('if options.onSizePerPageChange is defined', () => {
+ const onSizePerPageChange = jest.fn();
+ beforeEach(() => {
+ onSizePerPageChange.mockClear();
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ onSizePerPageChange
+ }));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangeSizePerPage(newSizePerPage, newPage);
+ });
+
+ it('should still update component correctly', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.currSizePerPage).toEqual(newSizePerPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call options.onSizePerPageChange correctly', () => {
+ expect(onSizePerPageChange).toHaveBeenCalledTimes(1);
+ expect(onSizePerPageChange).toHaveBeenCalledWith(newSizePerPage, newPage);
+ });
+ });
+
+ describe('if remote pagination is enable', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination
+ }, true));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance, true);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleChangeSizePerPage(newSizePerPage, newPage);
+ });
+
+ it('should still update component correctly', () => {
+ expect(instance.currPage).toEqual(newPage);
+ expect(instance.currSizePerPage).toEqual(newSizePerPage);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(0);
+ });
+
+ it('should emit paginationChange event correctly', () => {
+ expect(remoteEmitter.emit).toHaveBeenLastCalledWith('paginationChange', instance.currPage, instance.currSizePerPage);
+ });
+ });
+ });
+
+ describe('when options.page is defined', () => {
+ const page = 3;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ page
+ }));
+ wrapper.render();
+ });
+
+ it('should set correct currPage', () => {
+ expect(wrapper.instance().currPage).toEqual(page);
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.sizePerPage is defined', () => {
+ const sizePerPage = Const.SIZE_PER_PAGE_LIST[2];
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ sizePerPage
+ }));
+ wrapper.render();
+ });
+
+ it('should set correct currSizePerPage', () => {
+ expect(wrapper.instance().currSizePerPage).toEqual(sizePerPage);
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.totalSize is defined', () => {
+ const totalSize = 100;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ totalSize
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.showTotal is defined', () => {
+ const showTotal = true;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ showTotal
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.pageStartIndex is defined', () => {
+ const pageStartIndex = -1;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ pageStartIndex
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.sizePerPageList is defined', () => {
+ const sizePerPageList = [10, 40];
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ sizePerPageList
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.paginationSize is defined', () => {
+ const paginationSize = 10;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ paginationSize
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.withFirstAndLast is defined', () => {
+ const withFirstAndLast = false;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ withFirstAndLast
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.alwaysShowAllBtns is defined', () => {
+ const alwaysShowAllBtns = true;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ alwaysShowAllBtns
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.firstPageText is defined', () => {
+ const firstPageText = '1st';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ firstPageText
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.prePageText is defined', () => {
+ const prePageText = 'PRE';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ prePageText
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.nextPageText is defined', () => {
+ const nextPageText = 'NEXT';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ nextPageText
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.lastPageText is defined', () => {
+ const lastPageText = 'LAST';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ lastPageText
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.firstPageTitle is defined', () => {
+ const firstPageTitle = '1st';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ firstPageTitle
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.prePageTitle is defined', () => {
+ const prePageTitle = 'PRE';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ prePageTitle
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.nextPageTitle is defined', () => {
+ const nextPageTitle = 'NEXT';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ nextPageTitle
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.lastPageTitle is defined', () => {
+ const lastPageTitle = 'nth';
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ lastPageTitle
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.hideSizePerPage is defined', () => {
+ const hideSizePerPage = true;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ hideSizePerPage
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+
+ describe('when options.hidePageListOnlyOnePage is defined', () => {
+ const hidePageListOnlyOnePage = true;
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ hidePageListOnlyOnePage
+ }));
+ wrapper.render();
+ });
+
+ it('should render correctly', () => {
+ const instance = wrapper.instance();
+
+ expect(renderMockComponent).toHaveBeenCalledWith({
+ paginationProps: instance.getPaginationProps(),
+ paginationBaseProps: {
+ pagination: {
+ createContext: expect.any(Function),
+ options: instance.getPaginationProps()
+ },
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ }
+ });
+ });
+ });
+});
From b261c33e37896527f5f5c60793bc7c34ded62ea8 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 1 Dec 2018 17:02:35 +0800
Subject: [PATCH 012/250] implement pageButtonRenderer
---
.../src/page-button.js | 6 ++--
.../src/pagination-list.js | 29 ++++++++++++++-----
.../src/pagination.js | 9 +++++-
.../src/state-context.js | 1 +
.../test/pagination-list.test.js | 18 ++++++++++++
5 files changed, 52 insertions(+), 11 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index 272fa19b4..e2834ee47 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -20,13 +20,14 @@ class PageButton extends Component {
page,
title,
active,
- disabled
+ disabled,
+ className
} = this.props;
const classes = cs({
active,
disabled,
'page-item': true
- });
+ }, className);
return (
@@ -41,6 +42,7 @@ PageButton.propTypes = {
page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
active: PropTypes.bool.isRequired,
disabled: PropTypes.bool.isRequired,
+ className: PropTypes.string,
title: PropTypes.string
};
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
index 805af5323..9954538f6 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
@@ -6,13 +6,21 @@ import PageButton from './page-button';
const PaginatonList = props => (
{
- props.pages.map(pageProps => (
-
);
@@ -24,7 +32,12 @@ PaginatonList.propTypes = {
disable: PropTypes.bool,
title: PropTypes.string
})).isRequired,
- onPageChange: PropTypes.func.isRequired
+ onPageChange: PropTypes.func.isRequired,
+ pageButtonRenderer: PropTypes.func
+};
+
+PaginatonList.defaultProps = {
+ pageButtonRenderer: null
};
export default PaginatonList;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index cf29eb901..7e0511a0f 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) {
const {
showTotal,
dataSize,
+ pageButtonRenderer,
paginationTotalRenderer,
sizePerPageList,
currSizePerPage,
@@ -148,7 +149,11 @@ class Pagination extends pageResolver(Component) {
}
);
@@ -165,6 +170,7 @@ Pagination.propTypes = {
pageStartIndex: PropTypes.number,
paginationSize: PropTypes.number,
showTotal: PropTypes.bool,
+ pageButtonRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
firstPageText: PropTypes.string,
prePageText: PropTypes.string,
@@ -186,6 +192,7 @@ Pagination.defaultProps = {
withFirstAndLast: Const.With_FIRST_AND_LAST,
alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
showTotal: Const.SHOW_TOTAL,
+ pageButtonRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
firstPageText: Const.FIRST_PAGE_TEXT,
prePageText: Const.PRE_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 122b62bb1..de85eac44 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -76,6 +76,7 @@ class StateProvider extends React.Component {
sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
showTotal: options.showTotal,
+ pageButtonRenderer: options.pageButtonRenderer,
paginationTotalRenderer: options.paginationTotalRenderer,
firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
prePageText: options.prePageText || Const.PRE_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
index 054500635..443d43578 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination-list.test.js
@@ -39,4 +39,22 @@ describe('PaginationList', () => {
expect(wrapper.find('ul.react-bootstrap-table-page-btns-ul').length).toBe(1);
expect(wrapper.find(PageButton).length).toBe(pages.length);
});
+
+ describe('when props.pageButtonRenderer is existing', () => {
+ const pageButtonRenderer = jest.fn().mockReturnValue(null);
+ beforeEach(() => {
+ wrapper = shallow(
+
Date: Sat, 1 Dec 2018 18:03:04 +0800
Subject: [PATCH 013/250] implement pageListRenderer
---
.../src/pagination.js | 24 +++++++++++++------
.../src/state-context.js | 1 +
.../test/pagination.test.js | 18 ++++++++++++++
3 files changed, 36 insertions(+), 7 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index 7e0511a0f..e914f933d 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -108,6 +108,7 @@ class Pagination extends pageResolver(Component) {
const {
showTotal,
dataSize,
+ pageListRenderer,
pageButtonRenderer,
paginationTotalRenderer,
sizePerPageList,
@@ -148,13 +149,20 @@ class Pagination extends pageResolver(Component) {
) : null
}
-
+ {
+ pageListRenderer ? pageListRenderer({
+ pages,
+ onPageChange: this.handleChangePage
+ }) : (
+
+ )
+ }
);
}
@@ -170,6 +178,7 @@ Pagination.propTypes = {
pageStartIndex: PropTypes.number,
paginationSize: PropTypes.number,
showTotal: PropTypes.bool,
+ pageListRenderer: PropTypes.func,
pageButtonRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
firstPageText: PropTypes.string,
@@ -192,6 +201,7 @@ Pagination.defaultProps = {
withFirstAndLast: Const.With_FIRST_AND_LAST,
alwaysShowAllBtns: Const.SHOW_ALL_PAGE_BTNS,
showTotal: Const.SHOW_TOTAL,
+ pageListRenderer: null,
pageButtonRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
firstPageText: Const.FIRST_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index de85eac44..33a4b7b81 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -76,6 +76,7 @@ class StateProvider extends React.Component {
sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
showTotal: options.showTotal,
+ pageListRenderer: options.pageListRenderer,
pageButtonRenderer: options.pageButtonRenderer,
paginationTotalRenderer: options.paginationTotalRenderer,
firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
index a9e5d35f8..8c1f9f8c8 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
@@ -109,6 +109,24 @@ describe('Pagination', () => {
});
});
+ describe('when props.pageListRenderer is defined', () => {
+ const pageListRenderer = jest.fn().mockReturnValue(null);
+ beforeEach(() => {
+ pageListRenderer.mockClear();
+ const props = createMockProps({ pageListRenderer });
+ wrapper = shallow(
Date: Sun, 2 Dec 2018 13:32:01 +0800
Subject: [PATCH 014/250] implement sizePerPageOptionRenderer
---
.../src/pagination.js | 4 +++
.../src/size-per-page-dropdown.js | 31 +++++++++++++------
.../src/state-context.js | 1 +
.../test/size-per-page-dropdown.test.js | 19 ++++++++++++
4 files changed, 45 insertions(+), 10 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index e914f933d..d63bc7cee 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -111,6 +111,7 @@ class Pagination extends pageResolver(Component) {
pageListRenderer,
pageButtonRenderer,
paginationTotalRenderer,
+ sizePerPageOptionRenderer,
sizePerPageList,
currSizePerPage,
hideSizePerPage,
@@ -132,6 +133,7 @@ class Pagination extends pageResolver(Component) {
{
className,
variation,
btnContextual,
+ optionRenderer,
currSizePerPage,
onSizePerPageChange
} = props;
@@ -61,14 +62,22 @@ const SizePerPageDropDown = (props) => {
aria-labelledby="pageDropDown"
>
{
- options.map(option => (
-
Date: Sun, 2 Dec 2018 14:33:02 +0800
Subject: [PATCH 015/250] implement sizePerPageRenderer
---
.../src/pagination.js | 56 ++++++++++++-------
.../src/state-context.js | 1 +
.../test/pagination.test.js | 18 ++++++
3 files changed, 56 insertions(+), 19 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index d63bc7cee..92090952b 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -103,18 +103,47 @@ class Pagination extends pageResolver(Component) {
return this.defaultTotal(from, to, size);
};
+ renderSizePerPageDropDown() {
+ const {
+ sizePerPageList,
+ currSizePerPage,
+ hideSizePerPage,
+ sizePerPageRenderer,
+ sizePerPageOptionRenderer
+ } = this.props;
+ const { dropdownOpen: open } = this.state;
+
+ if (sizePerPageList.length > 1 && !hideSizePerPage) {
+ if (sizePerPageRenderer) {
+ return sizePerPageRenderer({
+ options: this.calculateSizePerPageStatus(),
+ currSizePerPage: `${currSizePerPage}`,
+ onSizePerPageChange: this.handleChangeSizePerPage
+ });
+ }
+ return (
+
- {
- sizePerPageList.length > 1 && !hideSizePerPage ?
- (
-
- ) : null
- }
+ { this.renderSizePerPageDropDown() }
{
showTotal ?
this.setTotal(
@@ -182,6 +198,7 @@ Pagination.propTypes = {
showTotal: PropTypes.bool,
pageListRenderer: PropTypes.func,
pageButtonRenderer: PropTypes.func,
+ sizePerPageRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
sizePerPageOptionRenderer: PropTypes.func,
firstPageText: PropTypes.string,
@@ -206,6 +223,7 @@ Pagination.defaultProps = {
showTotal: Const.SHOW_TOTAL,
pageListRenderer: null,
pageButtonRenderer: null,
+ sizePerPageRenderer: null,
paginationTotalRenderer: Const.PAGINATION_TOTAL,
sizePerPageOptionRenderer: null,
firstPageText: Const.FIRST_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index ff8d80671..804fd65d6 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -78,6 +78,7 @@ class StateProvider extends React.Component {
showTotal: options.showTotal,
pageListRenderer: options.pageListRenderer,
pageButtonRenderer: options.pageButtonRenderer,
+ sizePerPageRenderer: options.sizePerPageRenderer,
paginationTotalRenderer: options.paginationTotalRenderer,
sizePerPageOptionRenderer: options.sizePerPageOptionRenderer,
firstPageText: options.firstPageText || Const.FIRST_PAGE_TEXT,
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
index 8c1f9f8c8..54b3fdc7f 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
@@ -127,6 +127,24 @@ describe('Pagination', () => {
});
});
+ describe('when props.sizePerPageRenderer is defined', () => {
+ const sizePerPageRenderer = jest.fn().mockReturnValue(null);
+ beforeEach(() => {
+ sizePerPageRenderer.mockClear();
+ const props = createMockProps({ sizePerPageRenderer });
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ it('should not render SizePerPageDropDown', () => {
+ expect(wrapper.find(SizePerPageDropDown)).toHaveLength(0);
+ });
+
+ it('should call props.sizePerPageRenderer correctly', () => {
+ expect(sizePerPageRenderer).toHaveBeenCalledTimes(1);
+ });
+ });
+
describe('componentWillReceiveProps', () => {
describe('when next props.currSizePerPage is diff than current one', () => {
const nextProps = createMockProps({ currSizePerPage: 20 });
From 5c5241254241d211be95a548b5053e1fbe066431 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 8 Dec 2018 14:36:00 +0800
Subject: [PATCH 016/250] fix remote pagination broken
---
.../src/pagination-list-standalone.js | 53 +++++++++++++++++++
.../src/standalone-adapter.js | 14 +++++
.../src/state-context.js | 6 ++-
3 files changed, 71 insertions(+), 2 deletions(-)
create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/standalone-adapter.js
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js
new file mode 100644
index 000000000..e5b03203d
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-standalone.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import pageResolver from './page-resolver';
+import PaginationList from './pagination-list';
+
+export default class PaginationListStandalone extends pageResolver(React.Component) {
+ constructor(props) {
+ super(props);
+ this.handleChangePage = this.handleChangePage.bind(this);
+ this.state = this.initialState();
+ }
+
+ handleChangePage(newPage) {
+ let page;
+ const {
+ currPage,
+ pageStartIndex,
+ prePageText,
+ nextPageText,
+ lastPageText,
+ firstPageText,
+ onPageChange
+ } = this.props;
+ const { lastPage } = this.state;
+
+ if (newPage === prePageText) {
+ page = this.backToPrevPage();
+ } else if (newPage === nextPageText) {
+ page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
+ } else if (newPage === lastPageText) {
+ page = lastPage;
+ } else if (newPage === firstPageText) {
+ page = pageStartIndex;
+ } else {
+ page = parseInt(newPage, 10);
+ }
+
+ if (page !== currPage) {
+ onPageChange(page);
+ }
+ }
+
+ render() {
+ const { totalPages, lastPage } = this.state;
+ const pages = this.calculatePageStatus(this.calculatePages(totalPages), lastPage);
+
+ return (
+
Date: Sat, 8 Dec 2018 15:18:00 +0800
Subject: [PATCH 017/250] implement PaginationListStandalone
---
.../react-bootstrap-table2-paginator/index.js | 2 +
.../src/page-resolver.js | 13 +--
.../src/pagination-handler.js | 78 ++++++++++++++++++
.../src/pagination-list-adapter.js | 20 +++++
.../src/pagination-list-standalone.js | 57 ++-----------
.../src/pagination.js | 2 +-
.../src/standalone-adapter.js | 4 +-
.../test/page-resolver.test.js | 80 +++++++++----------
.../test/pagination-list-adapter.test.js | 32 ++++++++
.../test/pagination.test.js | 3 +-
.../test/standalone-adapter.test.js | 44 ++++++++++
11 files changed, 229 insertions(+), 106 deletions(-)
create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-handler.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/pagination-list-adapter.test.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/standalone-adapter.test.js
diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js
index 8b20636a3..b399ffab3 100644
--- a/packages/react-bootstrap-table2-paginator/index.js
+++ b/packages/react-bootstrap-table2-paginator/index.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import createBaseContext from './src/state-context';
import createDataContext from './src/data-context';
+import PaginationListStandalone from './src/pagination-list-standalone';
export default (options = {}) => ({
createContext: createDataContext,
@@ -21,3 +22,4 @@ CustomizableProvider.propTypes = {
};
export const PaginationProvider = CustomizableProvider;
+export { PaginationListStandalone };
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index 5146faf54..3c17e9319 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -8,12 +8,6 @@ export default ExtendBase =>
return (currPage - 1) < pageStartIndex ? pageStartIndex : currPage - 1;
}
- goToNextPage() {
- const { currPage } = this.props;
- const { lastPage } = this.state;
- return (currPage + 1) > lastPage ? lastPage : currPage + 1;
- }
-
initialState() {
const totalPages = this.calculateTotalPage();
const lastPage = this.calculateLastPage(totalPages);
@@ -47,8 +41,9 @@ export default ExtendBase =>
}
calculatePages(
- totalPages = this.state.totalPages,
- lastPage = this.state.lastPage) {
+ totalPages,
+ lastPage
+ ) {
const {
currPage,
paginationSize,
@@ -94,7 +89,7 @@ export default ExtendBase =>
return pages;
}
- calculatePageStatus(pages = [], lastPage = this.state.lastPage) {
+ calculatePageStatus(pages = [], lastPage) {
const {
currPage,
pageStartIndex,
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
new file mode 100644
index 000000000..1ffc973e6
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
@@ -0,0 +1,78 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+
+export default WrappedComponent =>
+ class PaginationHandler extends pageResolver(Component) {
+ constructor(props) {
+ super(props);
+ this.handleChangePage = this.handleChangePage.bind(this);
+ this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+ this.state = this.initialState();
+ }
+
+ componentWillReceiveProps(nextProps) {
+ const { dataSize, currSizePerPage } = nextProps;
+ if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
+ const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
+ const lastPage = this.calculateLastPage(totalPages);
+ this.setState({ totalPages, lastPage });
+ }
+ }
+
+ handleChangeSizePerPage(sizePerPage) {
+ const { currSizePerPage, onSizePerPageChange } = this.props;
+ const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
+ let { currPage } = this.props;
+ if (selectedSize !== currSizePerPage) {
+ const newTotalPages = this.calculateTotalPage(selectedSize);
+ const newLastPage = this.calculateLastPage(newTotalPages);
+ if (currPage > newLastPage) currPage = newLastPage;
+ onSizePerPageChange(selectedSize, currPage);
+ }
+ this.closeDropDown();
+ }
+
+ handleChangePage(newPage) {
+ let page;
+ const {
+ currPage,
+ pageStartIndex,
+ prePageText,
+ nextPageText,
+ lastPageText,
+ firstPageText,
+ onPageChange
+ } = this.props;
+ const { lastPage } = this.state;
+
+ if (newPage === prePageText) {
+ page = this.backToPrevPage();
+ } else if (newPage === nextPageText) {
+ page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
+ } else if (newPage === lastPageText) {
+ page = lastPage;
+ } else if (newPage === firstPageText) {
+ page = pageStartIndex;
+ } else {
+ page = parseInt(newPage, 10);
+ }
+ if (page !== currPage) {
+ onPageChange(page);
+ }
+ }
+
+ render() {
+ return (
+ {
});
});
- describe('goToNextPage', () => {
- const props = createMockProps();
-
- describe('when props.currPage is not hitting state.lastPage', () => {
- beforeEach(() => {
- const mockElement = React.createElement(MockComponent, props, null);
- wrapper = shallow(mockElement);
- });
-
- it('should getting previous page correctly', () => {
- const instance = wrapper.instance();
- expect(instance.goToNextPage()).toEqual(props.currPage + 1);
- });
- });
-
- describe('when props.currPage is hitting state.lastpage', () => {
- beforeEach(() => {
- props.currPage = 10;
- const mockElement = React.createElement(MockComponent, props, null);
- wrapper = shallow(mockElement);
- });
-
- it('should always getting page which must eq props.pageStartIndex', () => {
- const instance = wrapper.instance();
- expect(instance.goToNextPage()).toEqual(instance.state.lastPage);
- });
- });
- });
-
describe('calculateFromTo', () => {
const props = createMockProps();
beforeEach(() => {
@@ -192,7 +163,7 @@ describe('PageResolver', () => {
});
describe('calculatePages', () => {
- describe('calculate by state.totalPages and state.lastPage', () => {
+ describe('calculate by totalPages and lastPage', () => {
const props = createMockProps();
beforeEach(() => {
const mockElement = React.createElement(MockComponent, props, null);
@@ -201,7 +172,7 @@ describe('PageResolver', () => {
it('should getting pages list correctly', () => {
const instance = wrapper.instance();
- expect(instance.calculatePages()).toEqual(
+ expect(instance.calculatePages(instance.state.totalPages, instance.state.lastPage)).toEqual(
[props.prePageText, 1, 2, 3, 4, 5, props.nextPageText, props.lastPageText]);
expect(instance.calculatePages(4, 4)).toEqual(
@@ -218,7 +189,9 @@ describe('PageResolver', () => {
currPages.forEach((currPage) => {
props.currPage = currPage + 1;
wrapper = shallow(
Date: Sat, 8 Dec 2018 16:25:59 +0800
Subject: [PATCH 018/250] implement SizePerPageDropdownStandalone
---
.../react-bootstrap-table2-paginator/index.js | 3 +-
.../src/page-resolver.js | 2 +-
.../src/pagination-handler.js | 1 -
.../src/size-per-page-dropdown-adapter.js | 63 ++++++++
.../src/size-per-page-dropdown-standalone.js | 12 ++
.../test/page-resolver.test.js | 2 -
.../test/pagination.test.js | 1 -
.../size-per-page-dropdown-adapter.test.js | 146 ++++++++++++++++++
8 files changed, 224 insertions(+), 6 deletions(-)
create mode 100644 packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-standalone.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown-adapter.test.js
diff --git a/packages/react-bootstrap-table2-paginator/index.js b/packages/react-bootstrap-table2-paginator/index.js
index b399ffab3..1956416d4 100644
--- a/packages/react-bootstrap-table2-paginator/index.js
+++ b/packages/react-bootstrap-table2-paginator/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import createBaseContext from './src/state-context';
import createDataContext from './src/data-context';
import PaginationListStandalone from './src/pagination-list-standalone';
+import SizePerPageDropdownStandalone from './src/size-per-page-dropdown-standalone';
export default (options = {}) => ({
createContext: createDataContext,
@@ -22,4 +23,4 @@ CustomizableProvider.propTypes = {
};
export const PaginationProvider = CustomizableProvider;
-export { PaginationListStandalone };
+export { PaginationListStandalone, SizePerPageDropdownStandalone };
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index 3c17e9319..cb77b179e 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -11,7 +11,7 @@ export default ExtendBase =>
initialState() {
const totalPages = this.calculateTotalPage();
const lastPage = this.calculateLastPage(totalPages);
- return { totalPages, lastPage, dropdownOpen: false };
+ return { totalPages, lastPage };
}
calculateTotalPage(sizePerPage = this.props.currSizePerPage, dataSize = this.props.dataSize) {
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
index 1ffc973e6..fcc9e1121 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
@@ -31,7 +31,6 @@ export default WrappedComponent =>
if (currPage > newLastPage) currPage = newLastPage;
onSizePerPageChange(selectedSize, currPage);
}
- this.closeDropDown();
}
handleChangePage(newPage) {
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
new file mode 100644
index 000000000..88ad6c8d3
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
@@ -0,0 +1,63 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+
+export default WrappedComponent =>
+ class SizePerPageDropdownAdapter extends pageResolver(Component) {
+ constructor(props) {
+ super(props);
+ this.closeDropDown = this.closeDropDown.bind(this);
+ this.toggleDropDown = this.toggleDropDown.bind(this);
+ this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
+ this.state = { dropdownOpen: false };
+ }
+
+ toggleDropDown() {
+ const dropdownOpen = !this.state.dropdownOpen;
+ this.setState(() => ({ dropdownOpen }));
+ }
+
+ closeDropDown() {
+ this.setState(() => ({ dropdownOpen: false }));
+ }
+
+ handleChangeSizePerPage(sizePerPage) {
+ this.props.onSizePerPageChange(sizePerPage);
+ this.closeDropDown();
+ }
+
+ render() {
+ const {
+ sizePerPageList,
+ currSizePerPage,
+ hideSizePerPage,
+ sizePerPageRenderer,
+ sizePerPageOptionRenderer
+ } = this.props;
+ const { dropdownOpen: open } = this.state;
+
+ if (sizePerPageList.length > 1 && !hideSizePerPage) {
+ if (sizePerPageRenderer) {
+ return sizePerPageRenderer({
+ options: this.calculateSizePerPageStatus(),
+ currSizePerPage: `${currSizePerPage}`,
+ onSizePerPageChange: this.handleChangeSizePerPage
+ });
+ }
+ return (
+
Date: Sat, 8 Dec 2018 18:04:05 +0800
Subject: [PATCH 019/250] extract useless function from pagination ro
paginationHandler
---
.../src/pagination-list-adapter.js | 6 +-
.../src/pagination.js | 150 +++--------
.../src/size-per-page-dropdown-adapter.js | 6 +-
.../test/data-context.test.js | 2 +-
.../test/pagination-handler.test.js | 203 +++++++++++++++
.../test/pagination.test.js | 241 ++----------------
6 files changed, 272 insertions(+), 336 deletions(-)
create mode 100644 packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
index a2a8deb54..33c5115b5 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
@@ -2,8 +2,9 @@
import React, { Component } from 'react';
import pageResolver from './page-resolver';
+import PaginationList from './pagination-list';
-export default WrappedComponent =>
+const paginationListAdapter = WrappedComponent =>
class PaginationListAdapter extends pageResolver(Component) {
render() {
const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
@@ -18,3 +19,6 @@ export default WrappedComponent =>
}
};
+
+export const PaginationListWithAdapter = paginationListAdapter(PaginationList);
+export default paginationListAdapter;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index 64b1e6aeb..5b60accc8 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -4,89 +4,13 @@ import cs from 'classnames';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import pageResolver from './page-resolver';
-import SizePerPageDropDown from './size-per-page-dropdown';
-import PaginationList from './pagination-list';
+import paginationHandler from './pagination-handler';
+import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
+import { PaginationListWithAdapter } from './pagination-list-adapter';
import PaginationTotal from './pagination-total';
import Const from './const';
class Pagination extends pageResolver(Component) {
- constructor(props) {
- super(props);
- this.closeDropDown = this.closeDropDown.bind(this);
- this.toggleDropDown = this.toggleDropDown.bind(this);
- this.handleChangePage = this.handleChangePage.bind(this);
- this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
- this.state = this.initialState();
- }
-
- componentWillReceiveProps(nextProps) {
- const { dataSize, currSizePerPage } = nextProps;
- if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
- const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
- const lastPage = this.calculateLastPage(totalPages);
- this.setState({ totalPages, lastPage });
- }
- }
-
- toggleDropDown() {
- const dropdownOpen = !this.state.dropdownOpen;
- this.setState(() => {
- return { dropdownOpen };
- });
- }
-
- closeDropDown() {
- this.setState(() => {
- return { dropdownOpen: false };
- });
- }
-
- handleChangeSizePerPage(sizePerPage) {
- const { currSizePerPage, onSizePerPageChange } = this.props;
- const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
- let { currPage } = this.props;
- if (selectedSize !== currSizePerPage) {
- const newTotalPages = this.calculateTotalPage(selectedSize);
- const newLastPage = this.calculateLastPage(newTotalPages);
- if (currPage > newLastPage) currPage = newLastPage;
- onSizePerPageChange(selectedSize, currPage);
- }
- this.closeDropDown();
- }
-
- handleChangePage(newPage) {
- let page;
- const {
- currPage,
- pageStartIndex,
- prePageText,
- nextPageText,
- lastPageText,
- firstPageText,
- onPageChange
- // keepSizePerPageState
- } = this.props;
- const { lastPage } = this.state;
-
- if (newPage === prePageText) {
- page = this.backToPrevPage();
- } else if (newPage === nextPageText) {
- page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
- } else if (newPage === lastPageText) {
- page = lastPage;
- } else if (newPage === firstPageText) {
- page = pageStartIndex;
- } else {
- page = parseInt(newPage, 10);
- }
-
- // if (keepSizePerPageState) { this.closeDropDown(); }
-
- if (page !== currPage) {
- onPageChange(page);
- }
- }
-
defaultTotal = (from, to, size) => (
1 && !hideSizePerPage) {
- if (sizePerPageRenderer) {
- return sizePerPageRenderer({
- options: this.calculateSizePerPageStatus(),
- currSizePerPage: `${currSizePerPage}`,
- onSizePerPageChange: this.handleChangeSizePerPage
- });
- }
- return (
-
- { this.renderSizePerPageDropDown() }
+
{
showTotal ?
this.setTotal(
@@ -170,13 +78,15 @@ class Pagination extends pageResolver(Component) {
{
pageListRenderer ? pageListRenderer({
pages,
- onPageChange: this.handleChangePage
+ onPageChange
}) : (
)
@@ -239,4 +149,4 @@ Pagination.defaultProps = {
hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE
};
-export default Pagination;
+export default paginationHandler(Pagination);
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
index 88ad6c8d3..a63e5f7b9 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js
@@ -2,8 +2,9 @@
import React, { Component } from 'react';
import pageResolver from './page-resolver';
+import SizePerPageDropDown from './size-per-page-dropdown';
-export default WrappedComponent =>
+const sizePerPageDropdownAdapter = WrappedComponent =>
class SizePerPageDropdownAdapter extends pageResolver(Component) {
constructor(props) {
super(props);
@@ -61,3 +62,6 @@ export default WrappedComponent =>
}
};
+
+export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
+export default sizePerPageDropdownAdapter;
diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
index 6128f7bed..ba920cc19 100644
--- a/packages/react-bootstrap-table2-paginator/test/data-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js
@@ -124,7 +124,7 @@ describe('PaginationDataContext', () => {
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
- expect(pagination.prop('paginationTotalRenderer')).toBeNull();
+ expect(pagination.prop('paginationTotalRenderer')).toBeUndefined();
});
});
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
new file mode 100644
index 000000000..4c295a1ff
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js
@@ -0,0 +1,203 @@
+import React from 'react';
+import sinon from 'sinon';
+import { shallow } from 'enzyme';
+
+import paginationHandler from '../src/pagination-handler';
+
+const MockComponent = () => null;
+const MockComponentWithPaginationHandler = paginationHandler(MockComponent);
+
+describe('paginationHandler', () => {
+ let wrapper;
+ let instance;
+
+ const createMockProps = props => ({
+ dataSize: 100,
+ sizePerPageList: [10, 20, 30, 50],
+ currPage: 1,
+ currSizePerPage: 10,
+ pageStartIndex: 1,
+ paginationSize: 5,
+ withFirstAndLast: true,
+ firstPageText: '<<',
+ prePageText: '<',
+ nextPageText: '>',
+ lastPageText: '>>',
+ alwaysShowAllBtns: false,
+ onPageChange: sinon.stub(),
+ onSizePerPageChange: sinon.stub(),
+ hidePageListOnlyOnePage: false,
+ hideSizePerPage: false,
+ ...props
+ });
+
+ describe('default pagiantion', () => {
+ const props = createMockProps();
+
+ beforeEach(() => {
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ it('should having correct state', () => {
+ expect(instance.state).toBeDefined();
+ expect(instance.state.totalPages).toEqual(instance.calculateTotalPage());
+ expect(instance.state.lastPage).toEqual(
+ instance.calculateLastPage(instance.state.totalPages));
+ });
+
+ it('should rendering PaginationList component successfully', () => {
+ const wrapperedComponent = wrapper.find(MockComponent);
+ expect(wrapperedComponent.length).toBe(1);
+ expect(wrapperedComponent.props().lastPage).toEqual(instance.state.lastPage);
+ expect(wrapperedComponent.props().totalPages).toEqual(instance.state.totalPages);
+ expect(wrapperedComponent.props().onPageChange).toEqual(instance.handleChangePage);
+ expect(wrapperedComponent.props().onSizePerPageChange)
+ .toEqual(instance.handleChangeSizePerPage);
+ });
+ });
+
+ describe('handleChangePage', () => {
+ const props = createMockProps();
+
+ beforeEach(() => {
+ props.currPage = 6;
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ afterEach(() => {
+ props.onPageChange.reset();
+ });
+
+ it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
+ instance.handleChangePage(props.prePageText);
+ expect(props.onPageChange.callCount).toBe(1);
+ expect(props.onPageChange.calledWith(5)).toBeTruthy();
+ });
+
+ it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
+ instance.handleChangePage(props.nextPageText);
+ expect(props.onPageChange.callCount).toBe(1);
+ expect(props.onPageChange.calledWith(7)).toBeTruthy();
+ });
+
+ it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
+ instance.handleChangePage(props.lastPageText);
+ expect(props.onPageChange.callCount).toBe(1);
+ expect(props.onPageChange.calledWith(10)).toBeTruthy();
+ });
+
+ it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
+ instance.handleChangePage(props.firstPageText);
+ expect(props.onPageChange.callCount).toBe(1);
+ expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
+ });
+
+ it('should calling props.onPageChange correctly when new page is a numeric page', () => {
+ const newPage = '8';
+ instance.handleChangePage(newPage);
+ expect(props.onPageChange.callCount).toBe(1);
+ expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
+ });
+
+ it('should not calling props.onPageChange correctly when page is not changed', () => {
+ const newPage = props.currPage;
+ instance.handleChangePage(newPage);
+ expect(props.onPageChange.callCount).toBe(0);
+ });
+ });
+
+ describe('handleChangeSizePerPage', () => {
+ const props = createMockProps();
+
+ beforeEach(() => {
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ it('should always setting state.dropdownOpen to false', () => {
+ instance.handleChangeSizePerPage(10);
+ expect(instance.state.dropdownOpen).toBeFalsy();
+ });
+
+ describe('when new sizePerPage is same as current one', () => {
+ it('should not calling props.onSizePerPageChange callback', () => {
+ instance.handleChangeSizePerPage(10);
+ expect(props.onSizePerPageChange.callCount).toBe(0);
+ });
+ });
+
+ describe('when new sizePerPage is diff than current one', () => {
+ it('should not calling props.onSizePerPageChange callback', () => {
+ instance.handleChangeSizePerPage(30);
+ expect(props.onSizePerPageChange.callCount).toBe(1);
+ });
+
+ describe('and new current page is still in the new lagination list', () => {
+ it('should calling props.onSizePerPageChange with correct argument', () => {
+ expect(props.onSizePerPageChange.calledWith(30, props.currPage));
+ });
+ });
+
+ describe('and new current page is still in the new lagination list', () => {
+ beforeEach(() => {
+ wrapper = shallow(
+
);
+ instance = wrapper.instance();
+ });
+
+ it('should calling props.onSizePerPageChange with correct argument', () => {
+ expect(props.onSizePerPageChange.calledWith(30, 4));
+ });
+ });
+ });
+ });
+
+ describe('componentWillReceiveProps', () => {
+ describe('when next props.currSizePerPage is diff than current one', () => {
+ const nextProps = createMockProps({ currSizePerPage: 20 });
+
+ beforeEach(() => {
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ it('should setting correct state.totalPages', () => {
+ instance.componentWillReceiveProps(nextProps);
+ expect(instance.state.totalPages).toEqual(
+ instance.calculateTotalPage(nextProps.currSizePerPage));
+ });
+
+ it('should setting correct state.lastPage', () => {
+ instance.componentWillReceiveProps(nextProps);
+ const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
+ expect(instance.state.lastPage).toEqual(
+ instance.calculateLastPage(totalPages));
+ });
+ });
+
+ describe('when next props.dataSize is diff than current one', () => {
+ const nextProps = createMockProps({ dataSize: 33 });
+
+ beforeEach(() => {
+ wrapper = shallow(
);
+ instance = wrapper.instance();
+ });
+
+ it('should setting correct state.totalPages', () => {
+ instance.componentWillReceiveProps(nextProps);
+ expect(instance.state.totalPages).toEqual(
+ instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
+ });
+
+ it('should setting correct state.lastPage', () => {
+ instance.componentWillReceiveProps(nextProps);
+ const totalPages = instance.calculateTotalPage(
+ nextProps.currSizePerPage, nextProps.dataSize);
+ expect(instance.state.lastPage).toEqual(
+ instance.calculateLastPage(totalPages));
+ });
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination.test.js b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
index 6091e31a0..2c9ee2085 100644
--- a/packages/react-bootstrap-table2-paginator/test/pagination.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/pagination.test.js
@@ -5,6 +5,7 @@ import { shallow } from 'enzyme';
import SizePerPageDropDown from '../src/size-per-page-dropdown';
import PaginationList from '../src/pagination-list';
import Pagination from '../src/pagination';
+import PaginationTotal from '../src/pagination-total';
describe('Pagination', () => {
let wrapper;
@@ -40,7 +41,7 @@ describe('Pagination', () => {
it('should rendering correctly', () => {
expect(wrapper.length).toBe(1);
- expect(wrapper.hasClass('react-bootstrap-table-pagination')).toBeTruthy();
+ expect(wrapper.dive().hasClass('react-bootstrap-table-pagination')).toBeTruthy();
expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(0);
});
@@ -51,50 +52,6 @@ describe('Pagination', () => {
instance.calculateLastPage(instance.state.totalPages));
expect(instance.state.dropdownOpen).toBeFalsy();
});
-
- it('should rendering PaginationList component successfully', () => {
- const paginationList = wrapper.find(PaginationList);
- const pageList = instance.calculatePages(instance.state.totalPages, instance.state.lastPage);
- expect(paginationList.length).toBe(1);
- expect(paginationList.prop('pages')).toEqual(instance.calculatePageStatus(pageList, instance.state.lastPage));
- expect(paginationList.prop('onPageChange')).toEqual(instance.handleChangePage);
- });
-
- it('should rendering SizePerPageDropDown component successfully', () => {
- const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
- expect(sizePerPageDropDown.length).toBe(1);
-
- expect(sizePerPageDropDown.prop('currSizePerPage')).toEqual(`${props.currSizePerPage}`);
- expect(sizePerPageDropDown.prop('options')).toEqual(instance.calculateSizePerPageStatus());
- expect(sizePerPageDropDown.prop('onSizePerPageChange')).toEqual(instance.handleChangeSizePerPage);
- expect(sizePerPageDropDown.prop('onClick')).toEqual(instance.toggleDropDown);
- });
- });
-
- describe('when props.sizePerPageList is empty array', () => {
- beforeEach(() => {
- const props = createMockProps({ sizePerPageList: [] });
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should not rendering SizePerPageDropDown component', () => {
- const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
- expect(sizePerPageDropDown.length).toBe(0);
- });
- });
-
- describe('when props.hideSizePerPage is true', () => {
- beforeEach(() => {
- const props = createMockProps({ hideSizePerPage: true });
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should not rendering SizePerPageDropDown component', () => {
- const sizePerPageDropDown = wrapper.find(SizePerPageDropDown);
- expect(sizePerPageDropDown.length).toBe(0);
- });
});
describe('when props.hidePageListOnlyOnePage is true', () => {
@@ -105,21 +62,22 @@ describe('Pagination', () => {
});
it('should find react-bootstrap-table-pagination-list-hidden class when only one page', () => {
- expect(wrapper.find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
+ expect(wrapper.dive().find('.react-bootstrap-table-pagination-list-hidden').length).toBe(1);
});
});
describe('when props.pageListRenderer is defined', () => {
- const pageListRenderer = jest.fn().mockReturnValue(null);
+ let pageListRenderer;
beforeEach(() => {
- pageListRenderer.mockClear();
+ pageListRenderer = jest.fn().mockReturnValue(null);
const props = createMockProps({ pageListRenderer });
wrapper = shallow(
);
+ wrapper.render();
instance = wrapper.instance();
});
it('should not render PaginationList', () => {
- expect(wrapper.find(PaginationList)).toHaveLength(0);
+ expect(wrapper.dive().find(PaginationList)).toHaveLength(0);
});
it('should call props.pageListRenderer correctly', () => {
@@ -128,16 +86,17 @@ describe('Pagination', () => {
});
describe('when props.sizePerPageRenderer is defined', () => {
- const sizePerPageRenderer = jest.fn().mockReturnValue(null);
+ let sizePerPageRenderer;
beforeEach(() => {
- sizePerPageRenderer.mockClear();
+ sizePerPageRenderer = jest.fn().mockReturnValue(null);
const props = createMockProps({ sizePerPageRenderer });
wrapper = shallow(
);
+ wrapper.render();
instance = wrapper.instance();
});
it('should not render SizePerPageDropDown', () => {
- expect(wrapper.find(SizePerPageDropDown)).toHaveLength(0);
+ expect(wrapper.dive().find(SizePerPageDropDown)).toHaveLength(0);
});
it('should call props.sizePerPageRenderer correctly', () => {
@@ -145,180 +104,36 @@ describe('Pagination', () => {
});
});
- describe('componentWillReceiveProps', () => {
- describe('when next props.currSizePerPage is diff than current one', () => {
- const nextProps = createMockProps({ currSizePerPage: 20 });
-
- beforeEach(() => {
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should setting correct state.totalPages', () => {
- instance.componentWillReceiveProps(nextProps);
- expect(instance.state.totalPages).toEqual(
- instance.calculateTotalPage(nextProps.currSizePerPage));
- });
-
- it('should setting correct state.lastPage', () => {
- instance.componentWillReceiveProps(nextProps);
- const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage);
- expect(instance.state.lastPage).toEqual(
- instance.calculateLastPage(totalPages));
- });
- });
-
- describe('when next props.dataSize is diff than current one', () => {
- const nextProps = createMockProps({ dataSize: 33 });
-
- beforeEach(() => {
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should setting correct state.totalPages', () => {
- instance.componentWillReceiveProps(nextProps);
- expect(instance.state.totalPages).toEqual(
- instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize));
- });
-
- it('should setting correct state.lastPage', () => {
- instance.componentWillReceiveProps(nextProps);
- const totalPages = instance.calculateTotalPage(
- nextProps.currSizePerPage, nextProps.dataSize);
- expect(instance.state.lastPage).toEqual(
- instance.calculateLastPage(totalPages));
- });
- });
- });
-
- describe('toggleDropDown', () => {
+ describe('when props.showTotal is true', () => {
beforeEach(() => {
- const props = createMockProps();
+ const props = createMockProps({ showTotal: true });
wrapper = shallow(
);
+ wrapper.render();
instance = wrapper.instance();
});
- it('should setting state.dropdownOpen as true when it is false', () => {
- instance.toggleDropDown();
- expect(instance.state.dropdownOpen).toBeTruthy();
+ it('should render PaginationTotal correctly', () => {
+ expect(wrapper.dive().find(PaginationTotal)).toHaveLength(1);
});
- it('should setting state.dropdownOpen as false when it is true', () => {
- instance.toggleDropDown();
- instance.toggleDropDown();
- expect(instance.state.dropdownOpen).toBeFalsy();
- });
- });
+ describe('if props.paginationTotalRenderer is defined', () => {
+ let paginationTotalRenderer;
- describe('closeDropDown', () => {
- beforeEach(() => {
- const props = createMockProps();
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should always setting state.dropdownOpen as false', () => {
- instance.closeDropDown();
- expect(instance.state.dropdownOpen).toBeFalsy();
- instance.closeDropDown();
- expect(instance.state.dropdownOpen).toBeFalsy();
- });
- });
-
- describe('handleChangeSizePerPage', () => {
- const props = createMockProps();
-
- beforeEach(() => {
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should always setting state.dropdownOpen to false', () => {
- instance.handleChangeSizePerPage(10);
- expect(instance.state.dropdownOpen).toBeFalsy();
- });
-
- describe('when new sizePerPage is same as current one', () => {
- it('should not calling props.onSizePerPageChange callback', () => {
- instance.handleChangeSizePerPage(10);
- expect(props.onSizePerPageChange.callCount).toBe(0);
- });
- });
-
- describe('when new sizePerPage is diff than current one', () => {
- it('should not calling props.onSizePerPageChange callback', () => {
- instance.handleChangeSizePerPage(30);
- expect(props.onSizePerPageChange.callCount).toBe(1);
+ beforeEach(() => {
+ paginationTotalRenderer = jest.fn();
+ const props = createMockProps({ showTotal: true, paginationTotalRenderer });
+ wrapper = shallow(
);
+ wrapper.render();
+ instance = wrapper.instance();
});
- describe('and new current page is still in the new lagination list', () => {
- it('should calling props.onSizePerPageChange with correct argument', () => {
- expect(props.onSizePerPageChange.calledWith(30, props.currPage));
- });
+ it('should not render PaginationTotal', () => {
+ expect(wrapper.dive().find(PaginationTotal)).toHaveLength(0);
});
- describe('and new current page is still in the new lagination list', () => {
- beforeEach(() => {
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- it('should calling props.onSizePerPageChange with correct argument', () => {
- expect(props.onSizePerPageChange.calledWith(30, 4));
- });
+ it('should call props.paginationTotalRenderer correctly', () => {
+ expect(paginationTotalRenderer).toHaveBeenCalledTimes(1);
});
});
});
-
- describe('handleChangePage', () => {
- const props = createMockProps();
-
- beforeEach(() => {
- props.currPage = 6;
- wrapper = shallow(
);
- instance = wrapper.instance();
- });
-
- afterEach(() => {
- props.onPageChange.reset();
- });
-
- it('should calling props.onPageChange correctly when new page is eq props.prePageText', () => {
- instance.handleChangePage(props.prePageText);
- expect(props.onPageChange.callCount).toBe(1);
- expect(props.onPageChange.calledWith(5)).toBeTruthy();
- });
-
- it('should calling props.onPageChange correctly when new page is eq props.nextPageText', () => {
- instance.handleChangePage(props.nextPageText);
- expect(props.onPageChange.callCount).toBe(1);
- expect(props.onPageChange.calledWith(7)).toBeTruthy();
- });
-
- it('should calling props.onPageChange correctly when new page is eq props.lastPageText', () => {
- instance.handleChangePage(props.lastPageText);
- expect(props.onPageChange.callCount).toBe(1);
- expect(props.onPageChange.calledWith(10)).toBeTruthy();
- });
-
- it('should calling props.onPageChange correctly when new page is eq props.firstPageText', () => {
- instance.handleChangePage(props.firstPageText);
- expect(props.onPageChange.callCount).toBe(1);
- expect(props.onPageChange.calledWith(props.pageStartIndex)).toBeTruthy();
- });
-
- it('should calling props.onPageChange correctly when new page is a numeric page', () => {
- const newPage = '8';
- instance.handleChangePage(newPage);
- expect(props.onPageChange.callCount).toBe(1);
- expect(props.onPageChange.calledWith(parseInt(newPage, 10))).toBeTruthy();
- });
-
- it('should not calling props.onPageChange correctly when page is not changed', () => {
- const newPage = props.currPage;
- instance.handleChangePage(newPage);
- expect(props.onPageChange.callCount).toBe(0);
- });
- });
});
From 91816fcc0129d1a7f6a74d9ebfe9ccd73f2f967b Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Fri, 21 Dec 2018 17:48:20 +0800
Subject: [PATCH 020/250] add stories for custom pagination
---
.../examples/pagination/custom-page-button.js | 106 +++++++++++
.../examples/pagination/custom-page-list.js | 78 ++++++++
.../pagination/custom-size-per-page-option.js | 96 ++++++++++
.../pagination/custom-size-per-page.js | 89 ++++++++++
.../pagination/fully-custom-pagination.js | 166 ++++++++++++++++++
.../pagination/standalone-pagination-list.js | 102 +++++++++++
.../pagination/standalone-size-per-page.js | 102 +++++++++++
.../stories/index.js | 16 +-
8 files changed, 754 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js
new file mode 100644
index 000000000..4898f60ca
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-button.js
@@ -0,0 +1,106 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageButtonRenderer = ({
+ page,
+ active,
+ disable,
+ title,
+ onPageChange
+}) => {
+ const handleClick = (e) => {
+ e.preventDefault();
+ onPageChange(page);
+ };
+ const activeStyle = {};
+ if (active) {
+ activeStyle.backgroundColor = 'black';
+ activeStyle.color = 'white';
+ } else {
+ activeStyle.backgroundColor = 'gray';
+ activeStyle.color = 'black';
+ }
+ if (typeof page === 'string') {
+ activeStyle.backgroundColor = 'white';
+ activeStyle.color = 'black';
+ }
+ return (
+
+ { page }
+
+ );
+};
+
+const options = {
+ pageButtonRenderer
+};
+
+
+ { page }
+
+ );
+};
+
+const options = {
+ pageButtonRenderer
+};
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js
new file mode 100644
index 000000000..2198aa5e2
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list.js
@@ -0,0 +1,78 @@
+/* eslint react/prefer-stateless-function: 0 */
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+// ...
+
+const pageListRenderer = ({
+ pages,
+ onPageChange
+}) => {
+ const pageWithoutIndication = pages.filter(p => typeof p.page !== 'string');
+ return (
+
+ {
+ pageWithoutIndication.map(p => (
+ onPageChange(p.page) }>{ p.page }
+ ))
+ }
+
+ );
+};
+
+const options = {
+ pageListRenderer
+};
+
+
+ {
+ pageWithoutIndication.map(p => (
+ onPageChange(p.page) }>{ p.page }
+ ))
+ }
+
+ );
+};
+
+const options = {
+ pageListRenderer
+};
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js
new file mode 100644
index 000000000..362bee65b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page-option.js
@@ -0,0 +1,96 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageOptionRenderer = ({
+ text,
+ page,
+ onSizePerPageChange
+}) => (
+
+ {
+ e.preventDefault();
+ onSizePerPageChange(page);
+ } }
+ style={ { color: 'red' } }
+ >
+ { text }
+
+
+);
+
+const options = {
+ sizePerPageOptionRenderer
+};
+
+
+ {
+ e.preventDefault();
+ onSizePerPageChange(page);
+ } }
+ style={ { color: 'red' } }
+ >
+ { text }
+
+
+);
+
+const options = {
+ sizePerPageOptionRenderer
+};
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js
new file mode 100644
index 000000000..a8bbf4296
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-size-per-page.js
@@ -0,0 +1,89 @@
+/* eslint react/prop-types: 0 */
+/* eslint jsx-a11y/href-no-hash: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+// ...
+
+const sizePerPageRenderer = ({
+ options,
+ currSizePerPage,
+ onSizePerPageChange
+}) => (
+
+ {
+ options.map((option) => {
+ const isSelect = currSizePerPage === \`$\{option.page}\`;
+ return (
+ onSizePerPageChange(option.page) }
+ className={ \`btn $\{isSelect ? 'btn-secondary' : 'btn-warning'}\` }
+ >
+ { option.text }
+
+ );
+ })
+ }
+
+);
+
+const options = {
+ sizePerPageRenderer
+};
+
+
+ {
+ options.map(option => (
+ onSizePerPageChange(option.page) }
+ className={ `btn ${currSizePerPage === `${option.page}` ? 'btn-secondary' : 'btn-warning'}` }
+ >
+ { option.text }
+
+ ))
+ }
+
+);
+
+const options = {
+ sizePerPageRenderer
+};
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
new file mode 100644
index 000000000..a2aa739ed
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
@@ -0,0 +1,166 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+
+class FullyCustomPagination extends React.Component {
+ handleNextPage = ({
+ page,
+ onPageChange
+ }) => () => {
+ onPageChange(page + 1);
+ }
+
+ handlePrevPage = ({
+ page,
+ onPageChange
+ }) => () => {
+ onPageChange(page - 1);
+ }
+
+ handleSizePerPage = ({
+ page,
+ onSizePerPageChange
+ }, newSizePerPage) => {
+ onSizePerPageChange(newSizePerPage, page);
+ }
+
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+ Next Page
+ Prev Page
+ this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10
+ this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25
+
+
+
+
{ sourceCode }
+
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+ Next Page
+ Prev Page
+ this.handleSizePerPage(paginationProps, 10) }>Size Per Page: 10
+ this.handleSizePerPage(paginationProps, 25) }>Size Per Page: 25
+
+
+
+
{ sourceCode }
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+ )
+ }
+
+`;
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandalonePaginationList extends React.Component {
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+ )
+ }
+
+
{ sourceCode }
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+
+ )
+ }
+
+`;
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+// const pagination = paginationFactory(options);
+
+export default class StandaloneSizePerPage extends React.Component {
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationBaseProps
+ }) => (
+
+
+ )
+ }
+
+
{ sourceCode }
+
Date: Sat, 22 Dec 2018 15:55:02 +0800
Subject: [PATCH 021/250] paginationBaseProps -> paginationTableProps
---
.../pagination/fully-custom-pagination.js | 8 ++--
.../pagination/standalone-pagination-list.js | 8 ++--
.../pagination/standalone-size-per-page.js | 8 ++--
.../src/state-context.js | 2 +-
.../test/state-context.test.js | 40 +++++++++----------
5 files changed, 33 insertions(+), 33 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
index a2aa739ed..cde3a436e 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/fully-custom-pagination.js
@@ -70,7 +70,7 @@ class FullyCustomPagination extends React.Component {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
@@ -87,7 +87,7 @@ class FullyCustomPagination extends React.Component {
keyField="id"
data={ products }
columns={ columns }
- { ...paginationBaseProps }
+ { ...paginationTableProps }
/>
)
@@ -136,7 +136,7 @@ export default class FullyCustomPagination extends React.Component {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
@@ -153,7 +153,7 @@ export default class FullyCustomPagination extends React.Component {
keyField="id"
data={ products }
columns={ columns }
- { ...paginationBaseProps }
+ { ...paginationTableProps }
/>
)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js
index bec241ef7..e23301911 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-list.js
@@ -45,7 +45,7 @@ const options = {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
)
@@ -79,7 +79,7 @@ export default class StandalonePaginationList extends React.Component {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
index 66ecb6fb1..e49b4f150 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
@@ -45,7 +45,7 @@ const options = {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
)
@@ -79,7 +79,7 @@ export default class StandaloneSizePerPage extends React.Component {
{
({
paginationProps,
- paginationBaseProps
+ paginationTableProps
}) => (
)
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 6f34905d2..758dd9509 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -151,7 +151,7 @@ class StateProvider extends React.Component {
{
expect(renderMockComponent).toHaveBeenCalledTimes(1);
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -338,7 +338,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -369,7 +369,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -396,7 +396,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -423,7 +423,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -450,7 +450,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -477,7 +477,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -504,7 +504,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -531,7 +531,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -558,7 +558,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -585,7 +585,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -612,7 +612,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -639,7 +639,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -666,7 +666,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -693,7 +693,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -720,7 +720,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -747,7 +747,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -774,7 +774,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -801,7 +801,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
@@ -828,7 +828,7 @@ describe('PaginationStateContext', () => {
expect(renderMockComponent).toHaveBeenCalledWith({
paginationProps: instance.getPaginationProps(),
- paginationBaseProps: {
+ paginationTableProps: {
pagination: {
createContext: expect.any(Function),
options: instance.getPaginationProps()
From 83dc888d172a484ea5ff98a50a683d68c6f284c1 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 22 Dec 2018 15:56:14 +0800
Subject: [PATCH 022/250] patch docs for new pagination
---
README.md | 4 -
docs/migration.md | 2 -
.../README.md | 186 +++++++++++++++++-
3 files changed, 185 insertions(+), 7 deletions(-)
diff --git a/README.md b/README.md
index 221c07457..ca053501d 100644
--- a/README.md
+++ b/README.md
@@ -28,10 +28,6 @@ See [getting started](https://react-bootstrap-table.github.io/react-bootstrap-ta
See `react-bootstrap-table2` [storybook](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html).
-## Roadmap
-
-See [release plans](https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2018/01/24/release-plan.html).
-
## Development
Please check the [development guide](./docs/development.md).
diff --git a/docs/migration.md b/docs/migration.md
index ffe78616b..7f5b10ddb 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -113,8 +113,6 @@ Please see [available pagination configurations](https://react-bootstrap-table.g
Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/package/react-bootstrap-table2-paginator) firstly.
-No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
-
## Table Search
ï¼´he usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
diff --git a/packages/react-bootstrap-table2-paginator/README.md b/packages/react-bootstrap-table2-paginator/README.md
index ff0c917a6..b3d30ebd6 100644
--- a/packages/react-bootstrap-table2-paginator/README.md
+++ b/packages/react-bootstrap-table2-paginator/README.md
@@ -37,4 +37,188 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
## Customization
-See [pagination props](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)
\ No newline at end of file
+### Basic Customization
+
+`react-bootstrap-table2` give some simple ways to customize something like text, styling etc, following is all the props we support for basic customization:
+
+* [paginationSize](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationsize-number)
+* [sizePerPageList](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagelist-array)
+* [withFirstAndLast](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationwithfirstandlast-bool)
+* [alwaysShowAllBtns](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationalwaysshowallbtns-bool)
+* [firstPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetext-any)
+* [prePageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetext-any)
+* [nextPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetext-any)
+* [lastPageText](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetext-any)
+* [firstPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationfirstpagetitle-any)
+* [prePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationprepagetitle-any)
+* [nextPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationnextpagetitle-any)
+* [lastPageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationlastpagetitle-any)
+* [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool)
+* [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool)
+* [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool)
+
+You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
+
+### Advance Customization
+
+Sometime, you may feel above props is not satisfied with your requirement, don't worry, we provide following renderer for each part of pagination:
+
+* [pageListRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagelistrenderer-function)
+* [pageButtonRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpagebuttonrenderer-function)
+* [sizePerPageRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpagerenderer-function)
+* [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
+* [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
+
+### Professional
+
+If you want to customize the pagination component completely, you may get interesting on following solution:
+
+* Standalone
+* Non-standalone
+
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+
+#### Import PaginationProvider
+
+```js
+import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
+
+```
+
+#### Declare custom and totalSize in pagination option:
+
+```js
+const paginationOption = {
+ custom: true,
+ totalSize: products.length
+};
+```
+
+#### Render PaginationProvider
+
+```js
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+ .....
+ )
+ }
+
+```
+
+`PaginationProvider` actually is a wrapper for the concumser of react context, so that now you have to get the props from context provide then render to your compoennt and `BootstrapTable`:
+
+* `paginationProps`: this include everything about pagination, you will use it when you render standalone component or your custom component.
+* `paginationTableProps`: you don't need to know about this, but you have to render this as props to `BootstrapTable`.
+
+So far, your customization pagination is supposed to look like it:
+```js
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+ )
+ }
+
+```
+
+Now, you have to choose, your built-in standalne components or you customize all of them by yourself:
+
+#### Use Standalone Component
+`react-bootstrap-table2-paginator` provider two standalone components:
+
+* Size Per Page Dropdwn Standalone
+* Pagination List Standalone
+
+When render each standalone, you just need to pass the `paginationProps` props to standalone component:
+
+```js
+import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+ )
+ }
+
+```
+
+That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
+
+#### Customization Everything
+
+If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
+
+```js
+page,
+sizePerPage,
+pageStartIndex,
+hidePageListOnlyOnePage,
+hideSizePerPage,
+alwaysShowAllBtns,
+withFirstAndLast,
+dataSize,
+sizePerPageList,
+paginationSize,
+showTotal,
+pageListRenderer,
+pageButtonRenderer,
+sizePerPageRenderer,
+paginationTotalRenderer,
+sizePerPageOptionRenderer,
+firstPageText,
+prePageText,
+nextPageText,
+lastPageText,
+prePageTitle,
+nextPageTitle,
+firstPageTitle,
+lastPageTitle,
+onPageChange,
+onSizePerPageChange
+```
+
+In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer.
+
+* `page`: Current page.
+* `sizePerPage`: Current size per page.
+* `onPageChange`: Call it when you nede to change page. This function accept one number argument which indicate the new page
+* `onSizePerPageChange`: Call it when you nede to change size per page. This function accept two number argument which indicate the new sizePerPage and new page
+
+[Here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Fully%20Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) is a online example.
From c2a30cb716b91336ac543194ff9d1d345438a1c5 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 23 Dec 2018 19:44:26 +0800
Subject: [PATCH 023/250] fix #725
---
.../react-bootstrap-table2/src/contexts/row-expand-context.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 6ba6b9589..9c038ab5f 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -23,10 +23,10 @@ class RowExpandProvider extends React.Component {
}
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
- if (this.props.expandRow.nonExpandable.includes(rowKey)) {
+ const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
+ if (nonExpandable && nonExpandable.includes(rowKey)) {
return;
}
- const { data, keyField, expandRow: { onExpand, onlyOneExpanding } } = this.props;
let currExpanded = [...this.state.expanded];
From 0ca8e54ce2bf0e96139c88eb156af35a63c45a18 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 23 Dec 2018 20:30:41 +0800
Subject: [PATCH 024/250] Publish
- react-bootstrap-table-next@1.4.4
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index df97e8716..8c01385ce 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "1.4.3",
+ "version": "1.4.4",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 6c0fc2748c3c9e5231428728996a206faf14bd0d Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Tue, 25 Dec 2018 23:38:34 +0800
Subject: [PATCH 025/250] Publish
- react-bootstrap-table2-example@1.0.13
- react-bootstrap-table2-paginator@2.0.0
- react-bootstrap-table-next@2.0.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index bc00de469..82a39c63b 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.12",
+ "version": "1.0.13",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 423396413..dd3f6d143 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "1.0.4",
+ "version": "2.0.0",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 8c01385ce..b4408f4c5 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "1.4.4",
+ "version": "2.0.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 32e455e65f5772ac3a808a086d73f7aada345e90 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 5 Jan 2019 14:37:07 +0800
Subject: [PATCH 026/250] add remote standalone pagination story
---
.../remote-standalone-pagination.js | 190 ++++++++++++++++++
.../stories/index.js | 4 +-
2 files changed, 193 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js
new file mode 100644
index 000000000..cb5609b4a
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/remote-standalone-pagination.js
@@ -0,0 +1,190 @@
+/* eslint react/no-multi-comp: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+// ...
+const RemotePagination = ({ data, page, sizePerPage, onTableChange, totalSize }) => (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+
+
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+
+
Current Page: { paginationProps.page }
+
Current SizePerPage: { paginationProps.sizePerPage }
+
+
+
+
+
{ sourceCode }
+
Date: Sat, 5 Jan 2019 16:09:12 +0800
Subject: [PATCH 027/250] fix #719 (#741)
---
.../src/row/should-updater.js | 13 ++++++
.../src/row/simple-row.js | 3 +-
.../test/row/should-updater.test.js | 44 +++++++++++++++++++
3 files changed, 59 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/row/should-updater.js b/packages/react-bootstrap-table2/src/row/should-updater.js
index 7756b739f..813dbb5dd 100644
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -20,6 +20,19 @@ export default ExtendBase =>
);
}
+ // Only use for simple-row
+ shouldUpdateByColumnsForSimpleCheck(nextProps) {
+ if (this.props.columns.length !== nextProps.columns.length) {
+ return true;
+ }
+ for (let i = 0; i < this.props.columns.length; i += 1) {
+ if (this.props.columns[i].hidden !== nextProps.columns[i].hidden) {
+ return true;
+ }
+ }
+ return false;
+ }
+
shouldUpdatedByNormalProps(nextProps) {
const shouldUpdate =
this.props.rowIndex !== nextProps.rowIndex ||
diff --git a/packages/react-bootstrap-table2/src/row/simple-row.js b/packages/react-bootstrap-table2/src/row/simple-row.js
index 83aff662c..96ca92f18 100644
--- a/packages/react-bootstrap-table2/src/row/simple-row.js
+++ b/packages/react-bootstrap-table2/src/row/simple-row.js
@@ -15,7 +15,8 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
shouldComponentUpdate(nextProps) {
this.shouldUpdateRowContent = false;
- this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+ this.shouldUpdateRowContent =
+ this.shouldUpdateChild(nextProps) || this.shouldUpdateByColumnsForSimpleCheck(nextProps);
if (this.shouldUpdateRowContent) return true;
return this.shouldUpdatedBySelfProps(nextProps);
diff --git a/packages/react-bootstrap-table2/test/row/should-updater.test.js b/packages/react-bootstrap-table2/test/row/should-updater.test.js
index ab1ca0562..1f5fefd8a 100644
--- a/packages/react-bootstrap-table2/test/row/should-updater.test.js
+++ b/packages/react-bootstrap-table2/test/row/should-updater.test.js
@@ -104,6 +104,50 @@ describe('Row shouldUpdater', () => {
});
});
+ describe('shouldUpdateByColumnsForSimpleCheck', () => {
+ describe('when nextProps.columns.length is not eq props.columns.length', () => {
+ beforeEach(() => {
+ props = {
+ columns: [{ dataField: 'price', text: 'Price' }]
+ };
+ wrapper = shallow(
Date: Sat, 5 Jan 2019 17:00:52 +0800
Subject: [PATCH 028/250] fix #729 (#742)
---
.../react-bootstrap-table2-paginator/src/page-resolver.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index cb77b179e..b9134d956 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -135,8 +135,8 @@ export default ExtendBase =>
calculateSizePerPageStatus() {
const { sizePerPageList } = this.props;
return sizePerPageList.map((_sizePerPage) => {
- const pageText = _sizePerPage.text || _sizePerPage;
- const pageNumber = _sizePerPage.value || _sizePerPage;
+ const pageText = typeof _sizePerPage.text !== 'undefined' ? _sizePerPage.text : _sizePerPage;
+ const pageNumber = typeof _sizePerPage.value !== 'undefined' ? _sizePerPage.value : _sizePerPage;
return {
text: `${pageText}`,
page: pageNumber
From 22cc79961f155d20ec34ff2d78b0d02060adcdd1 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 5 Jan 2019 20:45:18 +0800
Subject: [PATCH 029/250] fix #715 (#743)
---
.../examples/column-filter/filter-hooks.js | 57 +++++++++++++++++++
.../stories/index.js | 4 +-
.../src/context.js | 4 ++
.../test/context.test.js | 31 +++++++++-
4 files changed, 93 insertions(+), 3 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
new file mode 100644
index 000000000..db3b2bf9e
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
@@ -0,0 +1,57 @@
+/* eslint no-console: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: filterVal => console.log(`Filter Value: ${filterVal}`)
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: filterVal => console.log(\`Filter Value: $\{filterVal}\`)
+ })
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 169a235da..56735cb92 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -74,6 +74,7 @@ import ProgrammaticallyMultiSelectFilter from 'examples/column-filter/programmat
import CustomFilter from 'examples/column-filter/custom-filter';
import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
+import FilterHooks from 'examples/column-filter/filter-hooks';
// work on rows
import RowStyleTable from 'examples/rows/row-style';
@@ -274,7 +275,8 @@ storiesOf('Column Filter', module)
.add('Custom Filter', () =>
@@ -225,6 +226,32 @@ describe('FilterContext', () => {
});
});
+ describe('if filter.props.onFilter is defined', () => {
+ const filterVal = '3';
+ const onFilter = jest.fn();
+ const customColumns = columns.map((column, i) => {
+ if (i === 1) {
+ return {
+ ...column,
+ filter: textFilter({ onFilter })
+ };
+ }
+ return column;
+ });
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext(false, customColumns));
+ wrapper.render();
+ instance = wrapper.instance();
+ });
+
+ it('should call filter.props.onFilter correctly', () => {
+ instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+ expect(onFilter).toHaveBeenCalledTimes(1);
+ expect(onFilter).toHaveBeenCalledWith(filterVal);
+ });
+ });
+
describe('combination', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
From 782c630e58a269c3ea3d7050d63c95f1a034a26b Mon Sep 17 00:00:00 2001
From: Allen
Date: Sun, 6 Jan 2019 14:47:22 +0800
Subject: [PATCH 030/250] fix #734, fix #620 (#745)
---
.../src/op/csv.js | 10 ++++++++--
.../statelessOp.js | 6 ++----
.../src/bootstrap-table.js | 5 +----
.../src/contexts/index.js | 12 +++++++++--
.../src/contexts/selection-context.js | 8 --------
.../test/bootstrap-table.test.js | 20 -------------------
6 files changed, 21 insertions(+), 40 deletions(-)
diff --git a/packages/react-bootstrap-table2-toolkit/src/op/csv.js b/packages/react-bootstrap-table2-toolkit/src/op/csv.js
index 5f05a4e56..47a63399d 100644
--- a/packages/react-bootstrap-table2-toolkit/src/op/csv.js
+++ b/packages/react-bootstrap-table2-toolkit/src/op/csv.js
@@ -25,13 +25,19 @@ export default Base =>
let data;
if (typeof source !== 'undefined') {
data = source;
+ } else if (options.exportAll) {
+ data = this.props.data;
} else {
- data = options.exportAll ? this.props.data : this.getData();
+ const payload = {};
+ this.tableExposedAPIEmitter.emit('get.table.data', payload);
+ data = payload.result;
}
// filter data
if (options.onlyExportSelection) {
- const selections = this.getSelected();
+ const payload = {};
+ this.tableExposedAPIEmitter.emit('get.selected.rows', payload);
+ const selections = payload.result;
data = data.filter(row => !!selections.find(sel => row[keyField] === sel));
}
const content = transform(data, meta, this._.get, options);
diff --git a/packages/react-bootstrap-table2-toolkit/statelessOp.js b/packages/react-bootstrap-table2-toolkit/statelessOp.js
index 6c248c1a3..85444bf14 100644
--- a/packages/react-bootstrap-table2-toolkit/statelessOp.js
+++ b/packages/react-bootstrap-table2-toolkit/statelessOp.js
@@ -2,9 +2,7 @@ import Operation from './src/op';
export default Base =>
class StatelessOperation extends Operation.csvOperation(Base) {
- registerExposedAPI = (...exposedFuncs) => {
- exposedFuncs.forEach((func) => {
- this[func.name] = func;
- });
+ registerExposedAPI = (tableExposedAPIEmitter) => {
+ this.tableExposedAPIEmitter = tableExposedAPIEmitter;
}
};
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 8bcd7c12c..c77c107ef 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -14,13 +14,10 @@ class BootstrapTable extends PropsBaseResolver(Component) {
constructor(props) {
super(props);
this.validateProps();
- if (props.registerExposedAPI) {
- props.registerExposedAPI(this.getData);
- }
}
// Exposed APIs
- getData() {
+ getData = () => {
return this.visibleRows();
}
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 12bfb9a7c..7caf60ccc 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -1,6 +1,8 @@
/* eslint no-return-assign: 0 */
+/* eslint no-param-reassign: 0 */
/* eslint class-methods-use-this: 0 */
import React, { Component } from 'react';
+import EventEmitter from 'events';
import _ from '../utils';
import createDataContext from './data-context';
import createSortContext from './sort-context';
@@ -16,6 +18,13 @@ const withContext = Base =>
super(props);
this.DataContext = createDataContext();
+ if (props.registerExposedAPI) {
+ const exposedAPIEmitter = new EventEmitter();
+ exposedAPIEmitter.on('get.table.data', payload => payload.result = this.table.getData());
+ exposedAPIEmitter.on('get.selected.rows', payload => payload.result = this.selectionContext.getSelected());
+ props.registerExposedAPI(exposedAPIEmitter);
+ }
+
if (props.columns.filter(col => col.sort).length > 0) {
this.SortContext = createSortContext(
dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
@@ -255,9 +264,8 @@ const withContext = Base =>
}
render() {
- const { keyField, columns, bootstrap4, registerExposedAPI } = this.props;
+ const { keyField, columns, bootstrap4 } = this.props;
const baseProps = { keyField, columns };
- if (registerExposedAPI) baseProps.registerExposedAPI = registerExposedAPI;
let base = this.renderBase();
diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js
index 2bdd3216e..9c44cff46 100644
--- a/packages/react-bootstrap-table2/src/contexts/selection-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js
@@ -14,14 +14,6 @@ class SelectionProvider extends React.Component {
keyField: PropTypes.string.isRequired
}
- constructor(props) {
- super(props);
- if (props.registerExposedAPI) {
- const getSelected = () => this.getSelected();
- props.registerExposedAPI(getSelected);
- }
- }
-
state = { selected: this.props.selectRow.selected || [] };
componentWillReceiveProps(nextProps) {
diff --git a/packages/react-bootstrap-table2/test/bootstrap-table.test.js b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
index 23986a8d5..a543111a3 100644
--- a/packages/react-bootstrap-table2/test/bootstrap-table.test.js
+++ b/packages/react-bootstrap-table2/test/bootstrap-table.test.js
@@ -60,26 +60,6 @@ describe('BootstrapTable', () => {
});
});
- describe('when props.registerExposedAPI is defined', () => {
- const registerExposedAPI = jest.fn();
- beforeEach(() => {
- registerExposedAPI.mockClear();
- wrapper = shallow(
-
Date: Sun, 6 Jan 2019 16:25:02 +0800
Subject: [PATCH 031/250] fix #636 (#746)
---
docs/row-expand.md | 12 +++
.../row-expand/expand-column-position.js | 76 +++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 6 +-
packages/react-bootstrap-table2/src/const.js | 4 +-
packages/react-bootstrap-table2/src/header.js | 68 ++++++++------
.../src/row/aggregate-row.js | 92 +++++++++++--------
.../test/contexts/index.test.js | 27 ++++++
.../test/header.test.js | 28 ++++++
.../test/row/aggregate-row.test.js | 22 +++++
10 files changed, 272 insertions(+), 65 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-expand/expand-column-position.js
diff --git a/docs/row-expand.md b/docs/row-expand.md
index ce710dee8..025d03d41 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -15,6 +15,7 @@
* [showExpandColumn](#showExpandColumn)
* [onlyOneExpanding](#onlyOneExpanding)
* [expandByColumnOnly](#expandByColumnOnly)
+* [expandColumnPosition](#expandColumnPosition)
* [expandColumnRenderer](#expandColumnRenderer)
* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
@@ -153,3 +154,14 @@ const expandRow = {
expandByColumnOnly: true
};
```
+
+### expandRow.expandColumnPosition - [String]
+Default is `left`. You can give this as `right` for rendering expand column in the right side.
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ showExpandColumn: true,
+ expandColumnPosition: 'right'
+};
+```
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expand-column-position.js b/packages/react-bootstrap-table2-example/examples/row-expand/expand-column-position.js
new file mode 100644
index 000000000..8b07b34fe
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/expand-column-position.js
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow = {
+ renderer: row => (
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+
{ \`This Expand row is belong to rowKey $\{row.id}\` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 56735cb92..046154938 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -142,6 +142,7 @@ import ExpandColumn from 'examples/row-expand/expand-column';
import OnlyExpandByColumn from 'examples/row-expand/expand-by-column-only.js';
import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
+import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
import ExpandHooks from 'examples/row-expand/expand-hooks';
// pagination
@@ -349,6 +350,7 @@ storiesOf('Row Expand', module)
.add('Only Expand by Indicator', () =>
-
);
diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js
index dfba8b569..96b7dbeb5 100644
--- a/packages/react-bootstrap-table2/src/row/aggregate-row.js
+++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js
@@ -1,3 +1,4 @@
+/* eslint class-methods-use-this: 0 */
/* eslint react/prop-types: 0 */
/* eslint no-plusplus: 0 */
import React from 'react';
@@ -8,6 +9,7 @@ import SelectionCell from '../row-selection/selection-cell';
import shouldUpdater from './should-updater';
import eventDelegater from './event-delegater';
import RowPureContent from './row-pure-content';
+import Const from '../const';
export default class RowAggregator extends shouldUpdater(eventDelegater(React.Component)) {
static propTypes = {
@@ -43,6 +45,12 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
return this.shouldUpdateRowContent;
}
+ isRenderExpandColumnInLeft(
+ expandColumnPosition = Const.INDICATOR_POSITION_LEFT
+ ) {
+ return expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
+ }
+
render() {
const {
row,
@@ -64,7 +72,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
} = this.props;
const key = _.get(row, keyField);
const { hideSelectColumn, clickToSelect } = selectRow;
- const { showExpandColumn } = expandRow;
+ const { showExpandColumn, expandColumnPosition } = expandRow;
const newAttrs = this.delegate({ ...attrs });
if (clickToSelect || !!expandRow.renderer) {
@@ -73,47 +81,59 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
let tabIndexStart = (rowIndex * visibleColumnSize) + 1;
+ const childrens = [(
+
- {
- showExpandColumn ? (
-
);
}
diff --git a/packages/react-bootstrap-table2/test/contexts/index.test.js b/packages/react-bootstrap-table2/test/contexts/index.test.js
index 76caecbcf..737fcb995 100644
--- a/packages/react-bootstrap-table2/test/contexts/index.test.js
+++ b/packages/react-bootstrap-table2/test/contexts/index.test.js
@@ -225,4 +225,31 @@ describe('Context', () => {
expect(wrapper.instance().PaginationContext).toBeDefined();
});
});
+
+ describe('if registerExposedAPI props is defined', () => {
+ const registerExposedAPI = jest.fn();
+ beforeEach(() => {
+ const PaginationContext = React.createContext();
+ const paginator = {
+ createContext: jest.fn().mockReturnValue({
+ Provider: PaginationContext.Provider,
+ Consumer: PaginationContext.Consumer
+ })
+ };
+ wrapper = shallow(
+
+
+
+ );
+ });
+
+ it('should render expansion column correctly', () => {
+ const header = wrapper.find(Header).children();
+ expect(header.children().children().last().find(ExpandHeaderCell)).toHaveLength(1);
+ });
+ });
});
});
diff --git a/packages/react-bootstrap-table2/test/row/aggregate-row.test.js b/packages/react-bootstrap-table2/test/row/aggregate-row.test.js
index 76aa6256d..b314470db 100644
--- a/packages/react-bootstrap-table2/test/row/aggregate-row.test.js
+++ b/packages/react-bootstrap-table2/test/row/aggregate-row.test.js
@@ -9,6 +9,7 @@ import bindExpansion from '../../src/row-expand/row-consumer';
import ExpandCell from '../../src/row-expand/expand-cell';
import SelectionCell from '../../src/row-selection/selection-cell';
import RowAggregator from '../../src/row/aggregate-row';
+import Const from '../../src/const';
describe('Row Aggregator', () => {
let wrapper;
@@ -157,6 +158,27 @@ describe('Row Aggregator', () => {
expect(expandCell.props().expanded).toEqual(rowAggregator.props().expanded);
});
});
+
+ describe('if props.expandRow.showExpandColumn is true but props.expandRow.expandColumnPosition is "right"', () => {
+ beforeEach(() => {
+ const expandRow = {
+ renderer: jest.fn(),
+ showExpandColumn: true,
+ expandColumnPosition: Const.INDICATOR_POSITION_RIGHT
+ };
+ wrapper = mount(
+
+
+ );
+ });
+
+ it('should render expansion column correctly', () => {
+ rowAggregator = wrapper.find(RowAggregator);
+ expect(rowAggregator).toHaveLength(1);
+ expect(rowAggregator.children().children().last().type()).toEqual(ExpandCell);
+ });
+ });
});
describe('createClickEventHandler', () => {
From 416fcf08d4ca92cb27a43c799d5f3666f94c56db Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 6 Jan 2019 17:06:20 +0800
Subject: [PATCH 032/250] Publish
- react-bootstrap-table2-example@1.0.14
- react-bootstrap-table2-filter@1.1.1
- react-bootstrap-table2-paginator@2.0.1
- react-bootstrap-table2-toolkit@1.1.2
- react-bootstrap-table-next@2.0.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 82a39c63b..debe40238 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.13",
+ "version": "1.0.14",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 1c8f4fcbb..e845714c7 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.0",
+ "version": "1.1.1",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index dd3f6d143..bd68a2d77 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 371e490d0..4bd5da7d7 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.1.1",
+ "version": "1.1.2",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index b4408f4c5..fe23195c3 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From bd2ce5abf09180647ac3309e65e8225e3e233b1d Mon Sep 17 00:00:00 2001
From: Eduardo Reveles
Date: Thu, 6 Dec 2018 15:05:41 -0600
Subject: [PATCH 033/250] Add table footer
---
.../examples/footer/column-align-table.js | 52 ++++++++++++++
.../examples/footer/column-format-table.js | 67 +++++++++++++++++++
.../examples/footer/footer-class-table.js | 61 +++++++++++++++++
.../examples/footer/function-footer.js | 52 ++++++++++++++
.../examples/footer/simple-footer.js | 52 ++++++++++++++
.../stories/index.js | 18 ++++-
.../stories/stylesheet/columns/_index.scss | 6 +-
.../src/bootstrap-table.js | 58 +++++++++-------
.../react-bootstrap-table2/src/footer-cell.js | 64 ++++++++++++++++++
packages/react-bootstrap-table2/src/footer.js | 41 ++++++++++++
.../test/footer.test.js | 61 +++++++++++++++++
11 files changed, 505 insertions(+), 27 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/function-footer.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
create mode 100644 packages/react-bootstrap-table2/src/footer-cell.js
create mode 100644 packages/react-bootstrap-table2/src/footer.js
create mode 100644 packages/react-bootstrap-table2/test/footer.test.js
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
new file mode 100644
index 000000000..bb57fc6ae
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
@@ -0,0 +1,52 @@
+/* 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',
+ footerAlign: 'center',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footerAlign: (column, colIndex) => 'right',
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footerAlign: 'center',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footerAlign: (column, colIndex) => 'right',
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
new file mode 100644
index 000000000..26fbbc08b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
@@ -0,0 +1,67 @@
+/* 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();
+
+function priceFormatter(column, colIndex) {
+ return (
+
+ $$ {column.text} $$
+
+ );
+}
+
+const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3',
+ footerFormatter: priceFormatter
+ }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+function priceFormatter(column, colIndex) {
+ return (
+ $$ { column.text } $$
+ {sourceCode}
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js b/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
new file mode 100644
index 000000000..3f3cd62f7
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/footer-class-table.js
@@ -0,0 +1,61 @@
+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',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+ }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+ }
+ ];
+
+
+ {sourceCode}
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/function-footer.js b/packages/react-bootstrap-table2-example/examples/footer/function-footer.js
new file mode 100644
index 000000000..f30fe974b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/function-footer.js
@@ -0,0 +1,52 @@
+/* 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',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+ }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+ }];
+
+
+ {sourceCode}
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js b/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
new file mode 100644
index 000000000..b15e862d5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/simple-footer.js
@@ -0,0 +1,52 @@
+/* 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',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+ }
+];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [
+// omit...
+{
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+ }];
+
+
+ {sourceCode}
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 046154938..c2b6186b1 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -45,6 +45,13 @@ import HeaderColumnStyleTable from 'examples/header-columns/column-style-table';
import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
import HeaderClassTable from 'examples/header-columns/header-class-table';
+// footer
+import SimpleFooter from 'examples/footer/simple-footer';
+import FunctionFooter from 'examples/footer/function-footer';
+import FooterClassTable from 'examples/footer/footer-class-table';
+import FooterColumnFormatTable from 'examples/footer/column-format-table';
+import FooterColumnAlignTable from 'examples/footer/column-align-table';
+
// column filter
import TextFilter from 'examples/column-filter/text-filter';
import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-default-value';
@@ -199,8 +206,7 @@ import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.
// import bootstrap style by given version
import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
-storiesOf('Welcome', module)
- .add('react bootstrap table 2 ', () =>
- { this.renderTable() }
-
- );
+ return {this.renderTable()} ;
}
return this.renderTable();
}
@@ -59,19 +57,25 @@ class BootstrapTable extends PropsBaseResolver(Component) {
const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
- const tableClass = cs('table', {
- 'table-striped': striped,
- 'table-hover': hover,
- 'table-bordered': bordered,
- [(bootstrap4 ? 'table-sm' : 'table-condensed')]: condensed
- }, classes);
+ const tableClass = cs(
+ 'table',
+ {
+ 'table-striped': striped,
+ 'table-hover': hover,
+ 'table-bordered': bordered,
+ [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
+ },
+ classes
+ );
+
+ const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
- const tableCaption = (caption && { caption } );
+ const tableCaption = caption && {caption} ;
return (
- { tableCaption }
+ {tableCaption}
+ {hasFooter && (
+
+ )}
);
@@ -109,9 +116,12 @@ BootstrapTable.propTypes = {
data: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
bootstrap4: PropTypes.bool,
- remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
- pagination: PropTypes.bool
- })]),
+ remote: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.shape({
+ pagination: PropTypes.bool
+ })
+ ]),
noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
striped: PropTypes.bool,
bordered: PropTypes.bool,
@@ -121,10 +131,7 @@ BootstrapTable.propTypes = {
classes: PropTypes.string,
wrapperClasses: PropTypes.string,
condensed: PropTypes.bool,
- caption: PropTypes.oneOfType([
- PropTypes.node,
- PropTypes.string
- ]),
+ caption: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
pagination: PropTypes.object,
filter: PropTypes.object,
cellEdit: PropTypes.object,
@@ -168,10 +175,13 @@ BootstrapTable.propTypes = {
rowEvents: PropTypes.object,
rowClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
headerClasses: PropTypes.string,
- defaultSorted: PropTypes.arrayOf(PropTypes.shape({
- dataField: PropTypes.string.isRequired,
- order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
- })),
+ footerClasses: PropTypes.string,
+ defaultSorted: PropTypes.arrayOf(
+ PropTypes.shape({
+ dataField: PropTypes.string.isRequired,
+ order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
+ })
+ ),
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]),
overlay: PropTypes.func,
onTableChange: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/footer-cell.js b/packages/react-bootstrap-table2/src/footer-cell.js
new file mode 100644
index 000000000..2995f4aa7
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/footer-cell.js
@@ -0,0 +1,64 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import cs from 'classnames';
+import PropTypes from 'prop-types';
+
+import _ from './utils';
+
+const FooterCell = (props) => {
+ const { index, column, columnData } = props;
+
+ const {
+ footer,
+ footerTitle,
+ footerAlign,
+ footerFormatter,
+ footerEvents,
+ footerClasses,
+ footerStyle,
+ footerAttrs
+ } = column;
+
+ const cellAttrs = {
+ ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
+ ...footerEvents
+ };
+
+ let text = '';
+ if (_.isString(footer)) {
+ text = footer;
+ } else if (_.isFunction(footer)) {
+ text = footer(columnData, column, index);
+ }
+
+ let cellStyle = {};
+ const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
+
+ if (footerStyle) {
+ cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
+ cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
+ }
+
+ if (footerTitle) {
+ cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
+ }
+
+ if (footerAlign) {
+ cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
+ }
+
+ if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
+ if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+
+ const children = footerFormatter ? footerFormatter(column, index) : text;
+
+ return React.createElement('th', cellAttrs, children);
+};
+
+FooterCell.propTypes = {
+ columnData: PropTypes.array,
+ index: PropTypes.number,
+ column: PropTypes.object
+};
+
+export default FooterCell;
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
new file mode 100644
index 000000000..38b2bded6
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -0,0 +1,41 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import FooterCell from './footer-cell';
+import _ from './utils';
+
+const Footer = (props) => {
+ const { data, className, columns } = props;
+
+ return (
+
+
+ {columns.map((column, i) => {
+ if (column.footer === undefined || column.footer === null || column.hidden) {
+ return false;
+ }
+
+ const columnData = _.pluck(data, column.dataField);
+
+ return (
+
+
+ );
+};
+
+Footer.propTypes = {
+ data: PropTypes.array,
+ className: PropTypes.string,
+ columns: PropTypes.array
+};
+
+export default Footer;
diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js
new file mode 100644
index 000000000..9f1024b01
--- /dev/null
+++ b/packages/react-bootstrap-table2/test/footer.test.js
@@ -0,0 +1,61 @@
+/* eslint no-unused-vars: 0 */
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import Footer from '../src/footer';
+import FooterCell from '../src/footer-cell';
+
+describe('Footer', () => {
+ let wrapper;
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'ID',
+ footer: 'Footer 1'
+ },
+ {
+ dataField: 'name',
+ text: 'Name',
+ footer: (columnData, column) => 'Footer 2'
+ }
+ ];
+
+ const data = [
+ {
+ id: 1,
+ name: 'A'
+ },
+ {
+ id: 2,
+ name: 'B'
+ }
+ ];
+
+ const keyField = 'id';
+
+ describe('simplest header', () => {
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('tr').length).toBe(1);
+ expect(wrapper.find(FooterCell).length).toBe(columns.length);
+ });
+ });
+
+ describe('className prop is exists', () => {
+ const className = 'test-class';
+
+ beforeEach(() => {
+ wrapper = shallow();
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find(`.${className}`).length).toBe(1);
+ });
+ });
+});
From 78d5164056b0e1d6da23e75a7ef18f1ca873f7a8 Mon Sep 17 00:00:00 2001
From: Eduardo Reveles
Date: Wed, 12 Dec 2018 20:14:37 -0600
Subject: [PATCH 034/250] add more examples to storybook
---
.../examples/footer/column-align-table.js | 3 +-
.../examples/footer/column-attrs-table.js | 54 +++++++++++++
.../examples/footer/column-class-table.js | 60 +++++++++++++++
.../examples/footer/column-event-table.js | 56 ++++++++++++++
.../examples/footer/column-style-table.js | 76 +++++++++++++++++++
.../examples/footer/column-title-table.js | 53 +++++++++++++
.../stories/index.js | 14 +++-
.../stories/stylesheet/columns/_index.scss | 4 +-
.../src/bootstrap-table.js | 50 ++++++------
9 files changed, 339 insertions(+), 31 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-attrs-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
create mode 100644 packages/react-bootstrap-table2-example/examples/footer/column-title-table.js
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
index bb57fc6ae..df77d04fc 100644
--- a/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-align-table.js
@@ -38,7 +38,8 @@ const columns = [{
footer: 'Footer 2'
}, {
dataField: 'price',
- text: 'Product Price'
+ text: 'Product Price',
+ footer: 'Footer 3'
}];
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
new file mode 100644
index 000000000..60bc9e64c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-class-table.js
@@ -0,0 +1,60 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2',
+ footerClasses: 'demo-row-odd'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3',
+ footerClasses: (column, colIndex) => {
+ if (colIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2',
+ footerClasses: 'demo-row-odd'
+ }, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3',
+ footerClasses: (column, colIndex) => {
+ if (colIndex % 2 === 0) return 'demo-row-even';
+ return 'demo-row-odd';
+ }
+ }];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
new file mode 100644
index 000000000..6837eee0f
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
@@ -0,0 +1,56 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+ footerEvents: {
+ onClick: () => alert('Click on Product ID footer column')
+ },
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footerEvents: {
+ onClick: () => alert('Click on Product ID footer column')
+ },
+ footer: 'Footer 1'
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+ }, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+ }];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
new file mode 100644
index 000000000..52939f16c
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-style-table.js
@@ -0,0 +1,76 @@
+/* eslint no-unused-vars: 0 */
+/* eslint no-alert: 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',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2',
+ footerStyle: {
+ backgroundColor: '#c8e6c9'
+ }
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3',
+ footerStyle: (column, colIndex) => {
+ if (colIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2',
+ footerStyle: {
+ backgroundColor: '#c8e6c9'
+ }
+ }, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3',
+ footerStyle: (column, colIndex) => {
+ if (colIndex % 2 === 0) {
+ return {
+ backgroundColor: '#81c784'
+ };
+ }
+ return {
+ backgroundColor: '#c8e6c9'
+ };
+ }
+ }];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js
new file mode 100644
index 000000000..f6efed948
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-title-table.js
@@ -0,0 +1,53 @@
+/* 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',
+ footerTitle: true,
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footerTitle: (column, colIndex) => `this is custom title for ${column.text}`,
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footerTitle: true,
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footerTitle: (column, colIndex) => \`this is custom title for \${column.text}\`,
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+}];
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index c2b6186b1..855287d75 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -51,6 +51,11 @@ import FunctionFooter from 'examples/footer/function-footer';
import FooterClassTable from 'examples/footer/footer-class-table';
import FooterColumnFormatTable from 'examples/footer/column-format-table';
import FooterColumnAlignTable from 'examples/footer/column-align-table';
+import FooterColumnTitleTable from 'examples/footer/column-title-table.js';
+import FooterColumnEventsTable from 'examples/footer/column-event-table.js';
+import FooterColumnClassTable from 'examples/footer/column-class-table.js';
+import FooterColumnStyleTable from 'examples/footer/column-style-table.js';
+import FooterColumnAttrsTable from 'examples/footer/column-attrs-table.js';
// column filter
import TextFilter from 'examples/column-filter/text-filter';
@@ -296,9 +301,14 @@ storiesOf('Footer', module)
.addDecorator(bootstrapStyle())
.add('Simple Footer', () => {this.renderTable()} ;
+ return (
+
+ { this.renderTable() }
+
+ );
}
return this.renderTable();
}
@@ -57,25 +61,21 @@ class BootstrapTable extends PropsBaseResolver(Component) {
const tableWrapperClass = cs('react-bootstrap-table', wrapperClasses);
- const tableClass = cs(
- 'table',
- {
- 'table-striped': striped,
- 'table-hover': hover,
- 'table-bordered': bordered,
- [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
- },
- classes
- );
+ const tableClass = cs('table', {
+ 'table-striped': striped,
+ 'table-hover': hover,
+ 'table-bordered': bordered,
+ [bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
+ }, classes);
const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
- const tableCaption = caption && {caption} ;
+ const tableCaption = (caption && { caption } );
return (
- {tableCaption}
+ { tableCaption }
Date: Wed, 16 Jan 2019 00:11:27 -0600
Subject: [PATCH 035/250] fix error
---
packages/react-bootstrap-table2/src/bootstrap-table.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 343fda5c8..37ced35bf 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -103,7 +103,11 @@ class BootstrapTable extends PropsBaseResolver(Component) {
rowEvents={ rowEvents }
/>
{hasFooter && (
-
+
)}
From 16f89989f0132dee0f1c985e067bb8cfbbccc5dc Mon Sep 17 00:00:00 2001
From: Martins Linde
Date: Sun, 20 Jan 2019 08:03:24 +0200
Subject: [PATCH 036/250] Allow null date when clearing date filter with
getFilter function (#759)
* fix date filter's getFilter function to accept empty value for clearing
* syntax improvements from ESlint
---
.../react-bootstrap-table2-filter/src/components/date.js | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index be6ecd5bb..5a6b1aa59 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -42,10 +42,11 @@ class DateFilter extends Component {
// export onFilter function to allow users to access
if (getFilter) {
getFilter((filterVal) => {
- this.dateFilterComparator.value = filterVal.comparator;
- this.inputDate.value = dateParser(filterVal.date);
+ const nullableFilterVal = filterVal || { date: null, comparator: null };
+ this.dateFilterComparator.value = nullableFilterVal.comparator;
+ this.inputDate.value = nullableFilterVal.date ? dateParser(nullableFilterVal.date) : null;
- this.applyFilter(filterVal.date, filterVal.comparator);
+ this.applyFilter(nullableFilterVal.date, nullableFilterVal.comparator);
});
}
}
From 7c79b6498528a414a9813eed38a5140a5645c052 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 14:07:05 +0800
Subject: [PATCH 037/250] enhance clear filter story
---
.../column-filter/clear-all-filters.js | 34 +++++++++++++++----
.../src/utils/common.js | 1 +
2 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
index e1acb62b0..3e2a25bfa 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
@@ -1,13 +1,14 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { stockGenerator } from 'utils/common';
-const products = productsGenerator(8);
+const products = stockGenerator(8);
let nameFilter;
let priceFilter;
+let stockDateFilter;
const columns = [{
dataField: 'id',
@@ -22,25 +23,36 @@ const columns = [{
})
}, {
dataField: 'price',
- text: 'Product Price',
+ text: 'Price',
filter: textFilter({
getFilter: (filter) => {
priceFilter = filter;
}
})
+}, {
+ dataField: 'inStockDate',
+ text: 'InStock Date',
+ formatter: cell => cell.toString(),
+ filter: dateFilter({
+ getFilter: (filter) => {
+ stockDateFilter = filter;
+ }
+ })
}];
const handleClick = () => {
nameFilter('');
priceFilter('');
+ stockDateFilter();
};
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
let nameFilter;
let priceFilter;
+let stockDateFilter;
const columns = [{
dataField: 'id',
@@ -55,17 +67,27 @@ const columns = [{
})
}, {
dataField: 'price',
- text: 'Product Price',
+ text: 'Price',
filter: textFilter({
getFilter: (filter) => {
priceFilter = filter;
}
})
+}, {
+ dataField: 'inStockDate',
+ text: 'InStock Date',
+ formatter: cell => cell.toString(),
+ filter: dateFilter({
+ getFilter: (filter) => {
+ stockDateFilter = filter;
+ }
+ })
}];
const handleClick = () => {
nameFilter('');
priceFilter('');
+ stockDateFilter();
};
export default () => (
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index a9dff13a9..67b2f6946 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -70,6 +70,7 @@ export const stockGenerator = (quantity = 5) =>
Array.from({ length: quantity }, (value, index) => ({
id: index,
name: `Todo item ${index}`,
+ price: Math.floor((Math.random() * 2) + 1),
inStockDate:
new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
}));
From bb071c98f938787bf8f9c4616d4a6a882b5a9371 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 14:19:12 +0800
Subject: [PATCH 038/250] fix typo
---
packages/react-bootstrap-table2/test/footer.test.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js
index 9f1024b01..2a7cc0ac1 100644
--- a/packages/react-bootstrap-table2/test/footer.test.js
+++ b/packages/react-bootstrap-table2/test/footer.test.js
@@ -34,7 +34,7 @@ describe('Footer', () => {
const keyField = 'id';
- describe('simplest header', () => {
+ describe('simplest footer', () => {
beforeEach(() => {
wrapper = shallow();
});
From 1bf3fa50db8ce8976f302bf4936acc886a6fc834 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 15:40:51 +0800
Subject: [PATCH 039/250] patch docs for table footer
---
docs/columns.md | 166 +++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 165 insertions(+), 1 deletion(-)
diff --git a/docs/columns.md b/docs/columns.md
index 34b10c018..3474e6d3a 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -30,6 +30,14 @@ Available properties in a column object:
* [headerAttrs](#headerAttrs)
* [headerSortingClasses](#headerSortingClasses)
* [headerSortingStyle](#headerSortingStyle)
+* [footer](#footer)
+* [footerFormatter](#footerFormatter)
+* [footerClasses](#footerClasses)
+* [footerStyle](#footerStyle)
+* [footerTitle](#footerTitle)
+* [footerEvents](#footerEvents)
+* [footerAlign](#footerAlign)
+* [footerAttrs](#footerAttrs)
* [editable](#editable)
* [validator](#validator)
* [editCellStyle](#editCellStyle)
@@ -302,7 +310,7 @@ A new `Object` will be the result of element headerStyle.
A new `String` will be the result of element title.
## column.headerTitle - [Bool | Function]
-`headerTitle` is only for the title on header column, default is disable. The usage almost same as [`column.title`](#title),
+Configure the title on header column, default is disable. The usage almost same as [`column.title`](#title),
```js
{
@@ -518,6 +526,162 @@ const sortingHeaderStyle = {
};
```
+### footer - [String | Function]
+Give a string to render the string value on the footer column.
+
+```js
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footerAlign: 'center',
+ footer: 'Footer 1'
+}, .....];
+```
+
+This prop also accept a function:
+
+```js
+{
+ dataField: 'price',
+ text: 'Product Price',
+ footer: column => column.reduce((acc, item) => acc + item, 0)
+}
+```
+
+## column.footerFormatter - [Function]
+`footerFormatter` allow you to customize the table footer column and only accept a callback function which take two arguments and a JSX/String are expected for return.
+
+* `column`
+* `columnIndex`
+
+## column.footerClasses - [String | Function]
+It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
+
+```js
+{
+ // omit...
+ footerClasses: 'id-custom-cell'
+}
+```
+Furthermore, it also accept a callback function which takes 2 arguments and a `String` is expect to return:
+
+```js
+{
+ footerClasses: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## column.footerStyle - [Object | Function]
+Customized the inline-style on table footer column:
+
+```js
+{
+ // omit...
+ footerStyle: { backgroundColor: 'green' }
+}
+```
+
+Moreover, it also accept a callback function which takes **2** arguments and an `Object` is expect to return:
+
+```js
+{
+ footerStyle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## column.footerTitle - [Bool | Function]
+Configure the title on footer column, default is disable. The usage is almost same as [`column.title`](#title),
+
+```js
+{
+ // omit...
+ footerTitle: true
+}
+```
+
+It's also available to custom via a callback function:
+```js
+{
+ footerTitle: function callback(column, colIndex) { ... }
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## column.footerEvents - [Object]
+`footerEvents` same as [`column.events`](#events) but it is for footer column:
+
+```js
+{
+ // omit...
+ footerEvents: {
+ onClick: e => { ... }
+ }
+}
+```
+
+## column.footerAlign - [String | Function]
+It's almost same as [`column.align`](#align), but it's for the [CSS text-align](https://www.w3schools.com/cssref/pr_text_text-align.asp) on footer column.
+
+```js
+{
+ // omit...
+ footerAlign: 'center'
+}
+```
+
+Also, you can custom the align by a callback function:
+
+```js
+{
+ // omit...
+ footerAlign: (column, colIndex) => {
+ // column is an object and perform itself
+ // return custom title here
+ }
+}
+```
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
+## column.footerAttrs - [Object | Function]
+`footerAttrs` is similar to [`column.attrs`](#attrs) but it works for footer column.
+```js
+{
+ // omit...
+ footerAttrs: {
+ title: 'bar',
+ 'data-test': 'foo'
+ }
+}
+```
+
+Additionally, customize the header attributes by a **2** arguments callback function:
+
+```js
+{
+ // omit...
+ footerAttrs: (column, colIndex) => ({
+ // return customized HTML attribute here
+ })
+}
+```
+
+**Parameters**
+* `column`: The value of current column.
+* `colIndex`: The index of the current `column` being processed in `BootstrapTable`.
+
## column.editable - [Bool | Function]
`column.editable` default is true, means every column is editable if you configure [`cellEdit`](./README.md#cellEdit). But you can disable some columns editable via setting `false`.
From 1c68892a7b877931e5296069809bb8646f23ee76 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 17:15:54 +0800
Subject: [PATCH 040/250] fix #751
---
.../react-bootstrap-table2-toolkit/context.js | 8 ++-
.../src/search/SearchBar.js | 72 ++++++++++++-------
.../src/search/clear-button.js | 20 ++++++
.../src/search/index.js | 3 +-
4 files changed, 74 insertions(+), 29 deletions(-)
create mode 100644 packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index 0bf29b853..c1664c383 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/packages/react-bootstrap-table2-toolkit/context.js
@@ -46,6 +46,7 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
};
this._ = null;
+ this.onClear = this.onClear.bind(this);
this.onSearch = this.onSearch.bind(this);
this.setDependencyModules = this.setDependencyModules.bind(this);
}
@@ -56,6 +57,10 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
}
}
+ onClear() {
+ this.setState({ searchText: '' });
+ }
+
/**
*
* @param {*} _
@@ -87,7 +92,8 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
{
};
};
-const SearchBar = ({
- delay,
- onSearch,
- className,
- style,
- placeholder,
- searchText,
- ...rest
-}) => {
- let input;
- const debounceCallback = handleDebounce(() => {
- onSearch(input.value);
- }, delay);
-
- return (
- { text }
+);
+
+ClearButton.propTypes = {
+ onClear: PropTypes.func.isRequired,
+ text: PropTypes.string
+};
+
+ClearButton.defaultProps = {
+ text: 'Clear'
+};
+
+export default ClearButton;
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/index.js b/packages/react-bootstrap-table2-toolkit/src/search/index.js
index c9058978a..7f92f433c 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/index.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/index.js
@@ -1,3 +1,4 @@
import SearchBar from './SearchBar';
+import ClearSearchButton from './clear-button';
-export default { SearchBar };
+export default { SearchBar, ClearSearchButton };
From 029cd3ab6fb1cebc2eced870678d40646e634190 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 17:16:44 +0800
Subject: [PATCH 041/250] add story for #751
---
.../examples/search/clear-search-button.js | 86 +++++++++++++++++++
.../stories/index.js | 2 +
2 files changed, 88 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/search/clear-search-button.js
diff --git a/packages/react-bootstrap-table2-example/examples/search/clear-search-button.js b/packages/react-bootstrap-table2-example/examples/search/clear-search-button.js
new file mode 100644
index 000000000..efc4511ec
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/search/clear-search-button.js
@@ -0,0 +1,86 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
{ sourceCode }
+
Date: Sun, 20 Jan 2019 17:20:41 +0800
Subject: [PATCH 042/250] patch docs for clear search button
---
docs/migration.md | 2 +-
.../react-bootstrap-table2-toolkit/README.md | 28 ++++++++++++++++++-
2 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/docs/migration.md b/docs/migration.md
index 7f5b10ddb..4f379f804 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -118,7 +118,7 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
- [x] Custom search component and position
- [x] Custom search value
-- [ ] Clear search
+- [x] Clear search
- [ ] Multiple search
- [ ] Strict search
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index bfcce9958..dcf773874 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -95,8 +95,34 @@ If you want to search on the formatted data, you are supposed to enable this pro
```
+### Clear Search Button
+We have a built-in clear search function which allow user clear search status via clicking button:
+
+```js
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+
+
+ {
+ props => (
+
+
+ )
+ }
+
+```
+
## Export CSV
-There are two step to enable the export CSV functionality:
+There are two steps to enable the export CSV functionality:
1. Give `exportCSV` prop as `true` on `ToolkitProvider`.
2. Render `ExportCSVButton` with `csvProps`. The position of `ExportCSVButton` is depends on you.
From 408a004f582d4fe7dc290c0f1340347294cb314b Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 20 Jan 2019 22:50:11 +0800
Subject: [PATCH 043/250] Publish
- react-bootstrap-table2-example@1.0.15
- react-bootstrap-table2-filter@1.1.2
- react-bootstrap-table2-toolkit@1.2.0
- react-bootstrap-table-next@2.1.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index debe40238..f3bd7c125 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.14",
+ "version": "1.0.15",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index e845714c7..940482dfd 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.1",
+ "version": "1.1.2",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 4bd5da7d7..9ea253b1c 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.1.2",
+ "version": "1.2.0",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index fe23195c3..b2dcc773d 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8bef7eb34861ca6ef0bc37c5774239f237a922fc Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Wed, 6 Feb 2019 15:15:26 +0800
Subject: [PATCH 044/250] fix #672
---
packages/react-bootstrap-table2/src/body.js | 42 +++++++++++++++------
1 file changed, 30 insertions(+), 12 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
index a32a82e57..2d445fc26 100644
--- a/packages/react-bootstrap-table2/src/body.js
+++ b/packages/react-bootstrap-table2/src/body.js
@@ -15,9 +15,36 @@ import withRowExpansion from './row-expand/row-consumer';
class Body extends React.Component {
constructor(props) {
super(props);
- if (props.cellEdit.createContext) {
- this.EditingCell = props.cellEdit.createEditingCell(_, props.cellEdit.options.onStartEdit);
+ const {
+ keyField,
+ visibleColumnSize,
+ cellEdit,
+ selectRow,
+ expandRow
+ } = props;
+
+ // Construct Editing Cell Component
+ if (cellEdit.createContext) {
+ this.EditingCell = cellEdit.createEditingCell(_, cellEdit.options.onStartEdit);
}
+
+ // Construct Row Component
+ let RowComponent = SimpleRow;
+ const selectRowEnabled = selectRow.mode !== Const.ROW_SELECT_DISABLED;
+ const expandRowEnabled = !!expandRow.renderer;
+
+ if (expandRowEnabled) {
+ RowComponent = withRowExpansion(RowAggregator, visibleColumnSize);
+ }
+
+ if (selectRowEnabled) {
+ RowComponent = withRowSelection(expandRowEnabled ? RowComponent : RowAggregator);
+ }
+
+ if (cellEdit.createContext) {
+ RowComponent = cellEdit.withRowLevelCellEdit(RowComponent, selectRowEnabled, keyField, _);
+ }
+ this.RowComponent = RowComponent;
}
render() {
@@ -46,21 +73,12 @@ class Body extends React.Component {
}
content =
Date: Wed, 6 Feb 2019 18:05:53 +0800
Subject: [PATCH 045/250] fix #778
---
.../src/context.js | 19 ++--
.../test/context.test.js | 21 ++++-
.../src/state-context.js | 27 +++++-
.../test/state-context.test.js | 89 ++++++++++++++-----
.../src/contexts/index.js | 1 +
5 files changed, 126 insertions(+), 31 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index e82e53ecf..8d375ca1c 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -17,7 +17,8 @@ export default (
class FilterProvider extends React.Component {
static propTypes = {
data: PropTypes.array.isRequired,
- columns: PropTypes.array.isRequired
+ columns: PropTypes.array.isRequired,
+ listenerForPagination: PropTypes.object
}
constructor(props) {
@@ -25,6 +26,9 @@ export default (
this.currFilters = {};
this.onFilter = this.onFilter.bind(this);
this.onExternalFilter = this.onExternalFilter.bind(this);
+ this.state = {
+ data: props.data
+ };
}
componentDidMount() {
@@ -68,7 +72,12 @@ export default (
filter.props.onFilter(filterVal);
}
- this.forceUpdate();
+ const { listenerForPagination, data } = this.props;
+ const result = filters(data, this.props.columns, _)(this.currFilters);
+ if (listenerForPagination) {
+ listenerForPagination.emit('filterChanged', result.length);
+ }
+ this.setState({ data: result });
};
}
@@ -79,13 +88,9 @@ export default (
}
render() {
- let { data } = this.props;
- if (!isRemoteFiltering()) {
- data = filters(data, this.props.columns, _)(this.currFilters);
- }
return (
{
function shallowContext(
enableRemote = false,
- tableColumns = columns
+ tableColumns = columns,
+ listenerForPagination,
) {
mockBase.mockReset();
handleFilterChange.mockReset();
@@ -59,6 +60,7 @@ describe('FilterContext', () => {
{
@@ -252,6 +254,23 @@ describe('FilterContext', () => {
});
});
+ describe('when props.listenerForPagination is defined', () => {
+ const filterVal = '3';
+ const newDataLength = 0;
+ const listenerForPagination = { emit: jest.fn() };
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext(false, columns, listenerForPagination));
+ wrapper.render();
+ instance = wrapper.instance();
+ });
+
+ it('should call listenerForPagination.emit correctly', () => {
+ instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
+ expect(listenerForPagination.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
+ });
+ });
+
describe('combination', () => {
beforeEach(() => {
wrapper = shallow(shallowContext());
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 758dd9509..ae5f26a73 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -2,7 +2,9 @@
/* eslint react/require-default-props: 0 */
/* eslint no-lonely-if: 0 */
import React from 'react';
+import EventEmitter from 'events';
import Const from './const';
+import { alignPage } from './page';
const StateContext = React.createContext();
@@ -10,6 +12,7 @@ class StateProvider extends React.Component {
constructor(props) {
super(props);
this.handleChangePage = this.handleChangePage.bind(this);
+ this.handleDataSizeChange = this.handleDataSizeChange.bind(this);
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
let currPage;
@@ -36,7 +39,10 @@ class StateProvider extends React.Component {
}
this.currPage = currPage;
+ this.dataSize = options.totalSize;
this.currSizePerPage = currSizePerPage;
+ this.filterListener = new EventEmitter();
+ this.filterListener.on('filterChanged', this.handleDataSizeChange);
}
componentWillReceiveProps(nextProps) {
@@ -51,7 +57,7 @@ class StateProvider extends React.Component {
getPaginationProps = () => {
const { pagination: { options }, bootstrap4 } = this.props;
- const { currPage, currSizePerPage } = this;
+ const { currPage, currSizePerPage, dataSize } = this;
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
@@ -72,7 +78,7 @@ class StateProvider extends React.Component {
hideSizePerPage,
alwaysShowAllBtns,
withFirstAndLast,
- dataSize: options.totalSize,
+ dataSize,
sizePerPageList: options.sizePerPageList || Const.SIZE_PER_PAGE_LIST,
paginationSize: options.paginationSize || Const.PAGINATION_SIZE,
showTotal: options.showTotal,
@@ -106,6 +112,20 @@ class StateProvider extends React.Component {
return e.result;
};
+ handleDataSizeChange(newDataSize) {
+ const { pagination: { options } } = this.props;
+ const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
+ Const.PAGE_START_INDEX : options.pageStartIndex;
+ this.dataSize = newDataSize;
+ this.currPage = alignPage(
+ newDataSize,
+ this.currPage,
+ this.currSizePerPage,
+ pageStartIndex
+ );
+ this.forceUpdate();
+ }
+
handleChangePage(currPage) {
const { currSizePerPage } = this;
const { pagination: { options } } = this.props;
@@ -153,7 +173,8 @@ class StateProvider extends React.Component {
paginationProps,
paginationTableProps: {
pagination,
- setPaginationRemoteEmitter: this.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: this.setPaginationRemoteEmitter,
+ listenerForPagination: this.filterListener
}
} }
>
diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
index 828c6679f..956b4bab0 100644
--- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
@@ -91,6 +91,10 @@ describe('PaginationStateContext', () => {
expect(wrapper.instance().currSizePerPage).toEqual(Const.SIZE_PER_PAGE_LIST[0]);
});
+ it('should have correct dataSize', () => {
+ expect(wrapper.instance().dataSize).toEqual(options.totalSize);
+ });
+
it('should get correct pagination props', () => {
const instance = wrapper.instance();
expect(wrapper.length).toBe(1);
@@ -102,7 +106,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -182,6 +187,31 @@ describe('PaginationStateContext', () => {
});
});
+ describe('handleDataSizeChange', () => {
+ let instance;
+ const newTotalSize = 8;
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ ...defaultPagination,
+ page: 3
+ }));
+ instance = wrapper.instance();
+ setRemotePaginationEmitter(instance);
+ jest.spyOn(instance, 'forceUpdate');
+ instance.handleDataSizeChange(newTotalSize);
+ });
+
+ it('should update dataSize correctly', () => {
+ expect(instance.dataSize).toEqual(newTotalSize);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+
+ it('should update currPage correctly if page list shrink', () => {
+ expect(instance.currPage).toEqual(Const.PAGE_START_INDEX);
+ expect(instance.forceUpdate).toHaveBeenCalledTimes(1);
+ });
+ });
+
describe('handleChangePage', () => {
let instance;
const newPage = 3;
@@ -343,7 +373,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -374,7 +405,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -401,7 +433,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -428,7 +461,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -455,7 +489,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -482,7 +517,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -509,7 +545,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -536,7 +573,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -563,7 +601,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -590,7 +629,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -617,7 +657,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -644,7 +685,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -671,7 +713,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -698,7 +741,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -725,7 +769,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -752,7 +797,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -779,7 +825,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -806,7 +853,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
@@ -833,7 +881,8 @@ describe('PaginationStateContext', () => {
createContext: expect.any(Function),
options: instance.getPaginationProps()
},
- setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter
+ setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
+ listenerForPagination: instance.filterListener
}
});
});
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 7caf60ccc..6a3258952 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -237,6 +237,7 @@ const withContext = Base =>
{ ...baseProps }
ref={ n => this.filterContext = n }
data={ rootProps.getData() }
+ listenerForPagination={ this.props.listenerForPagination }
>
{
From 4506a3dea26941e18f0b254933ad4225649b19b9 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Wed, 6 Feb 2019 18:06:08 +0800
Subject: [PATCH 046/250] add story for #778
---
.../custome-page-list-with-filter.js | 92 +++++++++++++++++++
.../stories/index.js | 4 +-
2 files changed, 95 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
new file mode 100644
index 000000000..9c7279db3
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
@@ -0,0 +1,92 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(21);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ filter: textFilter({})
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ filter: textFilter({})
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}];
+
+
+
PaginationProvider will care the data size change. You dont do anything
+
+ { contentTable }
+
+
{ sourceCode }
+
Date: Wed, 6 Feb 2019 22:56:31 +0800
Subject: [PATCH 047/250] fix #445
---
.../src/context.js | 5 +--
.../test/context.test.js | 35 +++++++++++++++++++
2 files changed, 38 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 8d375ca1c..a430d94a1 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -68,12 +68,13 @@ export default (
return;
}
+ let result;
if (filter.props.onFilter) {
- filter.props.onFilter(filterVal);
+ result = filter.props.onFilter(filterVal);
}
const { listenerForPagination, data } = this.props;
- const result = filters(data, this.props.columns, _)(this.currFilters);
+ result = result || filters(data, this.props.columns, _)(this.currFilters);
if (listenerForPagination) {
listenerForPagination.emit('filterChanged', result.length);
}
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index 7382f4bf8..b94ea00c7 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -254,6 +254,41 @@ describe('FilterContext', () => {
});
});
+ describe('if filter.props.onFilter is defined and return an undefined data', () => {
+ const mockReturn = [{
+ id: 1,
+ name: 'A'
+ }];
+ const filterVal = 'A';
+ const onFilter = jest.fn().mockReturnValue(mockReturn);
+ const customColumns = columns.map((column, i) => {
+ if (i === 1) {
+ return {
+ ...column,
+ filter: textFilter({ onFilter })
+ };
+ }
+ return column;
+ });
+
+ beforeEach(() => {
+ wrapper = shallow(shallowContext(false, customColumns));
+ wrapper.render();
+ instance = wrapper.instance();
+ });
+
+ it('should call filter.props.onFilter correctly', () => {
+ instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+ expect(onFilter).toHaveBeenCalledTimes(1);
+ expect(onFilter).toHaveBeenCalledWith(filterVal);
+ });
+
+ it('should set state.data correctly', () => {
+ instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
+ expect(instance.state.data).toEqual(mockReturn);
+ });
+ });
+
describe('when props.listenerForPagination is defined', () => {
const filterVal = '3';
const newDataLength = 0;
From 8fb5364cc2f3221f3d7b44d81a0d567e6b1889f7 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Wed, 6 Feb 2019 22:56:53 +0800
Subject: [PATCH 048/250] add story for #445
---
.../column-filter/custom-filter-logic.js | 81 +++++++++++++++++++
.../stories/index.js | 4 +-
2 files changed, 84 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
new file mode 100644
index 000000000..906d9d0f8
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
@@ -0,0 +1,81 @@
+/* eslint eqeqeq: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+ filterByPrice = filterVal =>
+ products.filter(product => product.price == filterVal);
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+ }, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: this.filterByPrice
+ })
+ }];
+
+ return (
+
+
+ );
+ }
+}
+`;
+
+export default class Table extends React.Component {
+ filterByPrice = filterVal =>
+ products.filter(product => product.price == filterVal);
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+ }, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+ onFilter: this.filterByPrice
+ })
+ }];
+
+ return (
+
+
Implement a eq filter on product price column
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 9f8fd5d2d..5061f63bd 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -87,6 +87,7 @@ import CustomFilter from 'examples/column-filter/custom-filter';
import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
import FilterHooks from 'examples/column-filter/filter-hooks';
+import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
// work on rows
import RowStyleTable from 'examples/rows/row-style';
@@ -290,7 +291,8 @@ storiesOf('Column Filter', module)
.add('Advance Custom Filter', () =>
Date: Thu, 7 Feb 2019 13:56:42 +0800
Subject: [PATCH 049/250] fix wrong storyb code
---
.../custome-page-list-with-filter.js | 67 +++++++++++++++----
1 file changed, 54 insertions(+), 13 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
index 9c7279db3..eefd780c4 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
@@ -3,7 +3,6 @@ import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
-import cellEditFactory from 'react-bootstrap-table2-editor';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -22,19 +21,62 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
-import paginationFactory from 'react-bootstrap-table2-paginator';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
-const columns = [{
- dataField: 'id',
- text: 'Product ID',
- filter: textFilter({})
-}, {
- dataField: 'name',
- text: 'Product Name',
- filter: textFilter()
-}];
+class Table extends React.Component {
+ render() {
+ const options = {
+ custom: true,
+ paginationSize: 4,
+ pageStartIndex: 1,
+ firstPageText: 'First',
+ prePageText: 'Back',
+ nextPageText: 'Next',
+ lastPageText: 'Last',
+ nextPageTitle: 'First page',
+ prePageTitle: 'Pre page',
+ firstPageTitle: 'Next page',
+ lastPageTitle: 'Last page',
+ showTotal: true,
+ totalSize: products.length
+ };
+ const contentTable = ({ paginationProps, paginationTableProps }) => (
+
+ );
-
+
PaginationProvider will care the data size change. You dont do anything
+
+ { contentTable }
+
+
{ sourceCode }
+
From 903dd2e5c82f7d15d44a9421b4c2da88c51b1cae Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Thu, 7 Feb 2019 15:34:03 +0800
Subject: [PATCH 050/250] rename listenerForPagination -> dataChangeListener
---
.../src/context.js | 8 ++--
.../test/context.test.js | 14 +++----
.../src/state-context.js | 6 +--
.../test/state-context.test.js | 40 +++++++++----------
4 files changed, 34 insertions(+), 34 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index a430d94a1..0fcfa88f0 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -18,7 +18,7 @@ export default (
static propTypes = {
data: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
- listenerForPagination: PropTypes.object
+ dataChangeListener: PropTypes.object
}
constructor(props) {
@@ -73,10 +73,10 @@ export default (
result = filter.props.onFilter(filterVal);
}
- const { listenerForPagination, data } = this.props;
+ const { dataChangeListener, data } = this.props;
result = result || filters(data, this.props.columns, _)(this.currFilters);
- if (listenerForPagination) {
- listenerForPagination.emit('filterChanged', result.length);
+ if (dataChangeListener) {
+ dataChangeListener.emit('filterChanged', result.length);
}
this.setState({ data: result });
};
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index b94ea00c7..20bba40d4 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -46,7 +46,7 @@ describe('FilterContext', () => {
function shallowContext(
enableRemote = false,
tableColumns = columns,
- listenerForPagination,
+ dataChangeListener,
) {
mockBase.mockReset();
handleFilterChange.mockReset();
@@ -60,7 +60,7 @@ describe('FilterContext', () => {
{
@@ -289,20 +289,20 @@ describe('FilterContext', () => {
});
});
- describe('when props.listenerForPagination is defined', () => {
+ describe('when props.dataChangeListener is defined', () => {
const filterVal = '3';
const newDataLength = 0;
- const listenerForPagination = { emit: jest.fn() };
+ const dataChangeListener = { emit: jest.fn() };
beforeEach(() => {
- wrapper = shallow(shallowContext(false, columns, listenerForPagination));
+ wrapper = shallow(shallowContext(false, columns, dataChangeListener));
wrapper.render();
instance = wrapper.instance();
});
- it('should call listenerForPagination.emit correctly', () => {
+ it('should call dataChangeListener.emit correctly', () => {
instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
- expect(listenerForPagination.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
+ expect(dataChangeListener.emit).toHaveBeenCalledWith('filterChanged', newDataLength);
});
});
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index ae5f26a73..3b9e7a38e 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -41,8 +41,8 @@ class StateProvider extends React.Component {
this.currPage = currPage;
this.dataSize = options.totalSize;
this.currSizePerPage = currSizePerPage;
- this.filterListener = new EventEmitter();
- this.filterListener.on('filterChanged', this.handleDataSizeChange);
+ this.dataChangeListener = new EventEmitter();
+ this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
}
componentWillReceiveProps(nextProps) {
@@ -174,7 +174,7 @@ class StateProvider extends React.Component {
paginationTableProps: {
pagination,
setPaginationRemoteEmitter: this.setPaginationRemoteEmitter,
- listenerForPagination: this.filterListener
+ dataChangeListener: this.dataChangeListener
}
} }
>
diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
index 956b4bab0..d6cbc0927 100644
--- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
@@ -107,7 +107,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -374,7 +374,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -406,7 +406,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -434,7 +434,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -462,7 +462,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -490,7 +490,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -518,7 +518,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -546,7 +546,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -574,7 +574,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -602,7 +602,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -630,7 +630,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -658,7 +658,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -686,7 +686,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -714,7 +714,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -742,7 +742,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -770,7 +770,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -798,7 +798,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -826,7 +826,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -854,7 +854,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
@@ -882,7 +882,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- listenerForPagination: instance.filterListener
+ dataChangeListener: instance.filterListener
}
});
});
From 63c2630f46959df7d867ad8d9f62331aa52e4fb4 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Thu, 7 Feb 2019 15:44:15 +0800
Subject: [PATCH 051/250] fix same issue #778, but for search
---
.../custom-page-list-with-search.js | 139 ++++++++++++++++++
.../stories/index.js | 4 +-
.../src/search/context.js | 43 +++---
.../src/contexts/index.js | 3 +-
4 files changed, 169 insertions(+), 20 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
new file mode 100644
index 000000000..87d5d74e7
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
@@ -0,0 +1,139 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(21);
+const { SearchBar } = Search;
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+ render() {
+ const options = {
+ custom: true,
+ paginationSize: 4,
+ pageStartIndex: 1,
+ firstPageText: 'First',
+ prePageText: 'Back',
+ nextPageText: 'Next',
+ lastPageText: 'Last',
+ nextPageTitle: 'First page',
+ prePageTitle: 'Pre page',
+ firstPageTitle: 'Next page',
+ lastPageTitle: 'Last page',
+ showTotal: true,
+ totalSize: products.length
+ };
+ const contentTable = ({ paginationProps, paginationTableProps }) => (
+
+ );
+
+ return (
+
+
PaginationProvider will care the data size change. You dont do anything
+
+ { contentTable }
+
+
{ sourceCode }
+
+
+
+ {
+ toolkitprops => (
+
+
+ )
+ }
+
+
+
+
PaginationProvider will care the data size change. You dont do anything
+
+ { contentTable }
+
+
{ sourceCode }
+
+
{ this.props.children }
);
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 6a3258952..4367ae154 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -217,6 +217,7 @@ const withContext = Base =>
ref={ n => this.searchContext = n }
data={ rootProps.getData(filterProps) }
searchText={ this.props.search.searchText }
+ dataChangeListener={ this.props.dataChangeListener }
>
{
@@ -237,7 +238,7 @@ const withContext = Base =>
{ ...baseProps }
ref={ n => this.filterContext = n }
data={ rootProps.getData() }
- listenerForPagination={ this.props.listenerForPagination }
+ dataChangeListener={ this.props.dataChangeListener }
>
{
From d7f84a9da5aa3d6aa4ca47aa27a214427d013d77 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Feb 2019 18:01:53 +0800
Subject: [PATCH 052/250] fix remote filter/search broken when pagination
enabled
---
packages/react-bootstrap-table2-filter/src/context.js | 8 ++++++++
.../react-bootstrap-table2-paginator/src/state-context.js | 1 +
.../react-bootstrap-table2-toolkit/src/search/context.js | 5 +++++
3 files changed, 14 insertions(+)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 0fcfa88f0..f3edd1fd9 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -37,6 +37,14 @@ export default (
}
}
+ componentWillReceiveProps(nextProps) {
+ if (isRemoteFiltering()) {
+ this.setState({
+ data: nextProps.data
+ });
+ }
+ }
+
onFilter(column, filterType, initialize = false) {
return (filterVal) => {
// watch out here if migration to context API, #334
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 3b9e7a38e..91159f614 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -52,6 +52,7 @@ class StateProvider extends React.Component {
if (this.isRemotePagination() || custom) {
this.currPage = nextProps.pagination.options.page;
this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+ this.dataSize = nextProps.pagination.options.totalSize;
}
}
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index 11f3b7a44..270a15dc8 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -1,6 +1,7 @@
/* eslint react/prop-types: 0 */
/* eslint react/require-default-props: 0 */
/* eslint no-continue: 0 */
+/* eslint no-lonely-if: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -44,6 +45,10 @@ export default (options = {
data: result
});
}
+ } else {
+ if (isRemoteSearch()) {
+ this.setState({ data: nextProps.data });
+ }
}
}
From cacc28e1bc6c8e96dfaf38c40874278fba5abf21 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Feb 2019 20:28:28 +0800
Subject: [PATCH 053/250] fix test cases
---
.../test/state-context.test.js | 49 ++++++++++---------
1 file changed, 27 insertions(+), 22 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
index d6cbc0927..bc4a91c2f 100644
--- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js
@@ -107,7 +107,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -154,7 +154,7 @@ describe('PaginationStateContext', () => {
setRemotePaginationEmitter(instance, true);
nextProps = {
data,
- pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5 } }
+ pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } }
};
instance.componentWillReceiveProps(nextProps);
});
@@ -162,6 +162,7 @@ describe('PaginationStateContext', () => {
it('should always reset currPage and currSizePerPage', () => {
expect(instance.currPage).toEqual(nextProps.pagination.options.page);
expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+ expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize);
});
});
@@ -175,7 +176,10 @@ describe('PaginationStateContext', () => {
setRemotePaginationEmitter(instance, true);
nextProps = {
data,
- pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, custom: true } }
+ pagination: {
+ ...defaultPagination,
+ options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 }
+ }
};
instance.componentWillReceiveProps(nextProps);
});
@@ -183,6 +187,7 @@ describe('PaginationStateContext', () => {
it('should always reset currPage and currSizePerPage', () => {
expect(instance.currPage).toEqual(nextProps.pagination.options.page);
expect(instance.currSizePerPage).toEqual(nextProps.pagination.options.sizePerPage);
+ expect(instance.dataSize).toEqual(nextProps.pagination.options.totalSize);
});
});
});
@@ -374,7 +379,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -406,7 +411,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -434,7 +439,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -462,7 +467,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -490,7 +495,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -518,7 +523,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -546,7 +551,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -574,7 +579,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -602,7 +607,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -630,7 +635,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -658,7 +663,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -686,7 +691,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -714,7 +719,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -742,7 +747,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -770,7 +775,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -798,7 +803,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -826,7 +831,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -854,7 +859,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
@@ -882,7 +887,7 @@ describe('PaginationStateContext', () => {
options: instance.getPaginationProps()
},
setPaginationRemoteEmitter: instance.setPaginationRemoteEmitter,
- dataChangeListener: instance.filterListener
+ dataChangeListener: expect.any(Object)
}
});
});
From 3cd8efffb93e6f18d4da4f8bf1a49701dccd0b7c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Feb 2019 21:07:26 +0800
Subject: [PATCH 054/250] Publish
- react-bootstrap-table2-example@1.0.16
- react-bootstrap-table2-filter@1.1.3
- react-bootstrap-table2-paginator@2.0.2
- react-bootstrap-table2-toolkit@1.2.1
- react-bootstrap-table-next@2.1.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index f3bd7c125..e57a4de7e 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.15",
+ "version": "1.0.16",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 940482dfd..d9d4d3e9b 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.2",
+ "version": "1.1.3",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index bd68a2d77..92cd8afaf 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.1",
+ "version": "2.0.2",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 9ea253b1c..9326f107c 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.2.0",
+ "version": "1.2.1",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index b2dcc773d..6ce53cf5e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.1.0",
+ "version": "2.1.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 052284a1634241c2e2521d7d57ffd2e5e1240726 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 16 Feb 2019 16:18:33 +0800
Subject: [PATCH 055/250] fix #791 (#796)
---
...oad-data-on-the-fly-with-default-filter.js | 70 ++++++++++++++++
...oad-data-on-the-fly-with-default-search.js | 80 +++++++++++++++++++
.../data/load-data-on-the-fly-with-filter.js | 68 ++++++++++++++++
...a-on-the-fly-with-pagination-and-filter.js | 72 +++++++++++++++++
.../data/load-data-on-the-fly-with-search.js | 80 +++++++++++++++++++
.../stories/index.js | 15 ++++
.../src/context.js | 28 ++++---
.../src/search/context.js | 16 +++-
8 files changed, 416 insertions(+), 13 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js
create mode 100644 packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-search.js
create mode 100644 packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-filter.js
create mode 100644 packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-pagination-and-filter.js
create mode 100644 packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-search.js
diff --git a/packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js b/packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js
new file mode 100644
index 000000000..60c8a2288
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/data/load-data-on-the-fly-with-default-filter.js
@@ -0,0 +1,70 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import { productsGenerator } from 'utils/common';
+
+const ProductList = (props) => {
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID'
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ defaultValue: '1'
+ })
+ },
+ {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+ }
+ ];
+
+ return (
+
+
Products
+
+
Products
+
+ {
+ toolkitprops => (
+
+
+ )
+ }
+
+
+
Products
+
+
Products
+
+
Products
+
+ {
+ toolkitprops => (
+
+
+ )
+ }
+
+
{
for (let cidx = 0; cidx < columns.length; cidx += 1) {
const column = columns[cidx];
From 3156e01dd63597a49121b5470e72b9c8186ef2a7 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 16 Feb 2019 16:26:26 +0800
Subject: [PATCH 056/250] fix #788 (#797)
---
.../src/bootstrap-table.js | 2 +
packages/react-bootstrap-table2/src/footer.js | 59 +++++++++++-----
.../test/footer.test.js | 69 ++++++++++++++++++-
3 files changed, 109 insertions(+), 21 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 37ced35bf..0df430c5f 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -106,6 +106,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
)}
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
index 38b2bded6..2c29994ec 100644
--- a/packages/react-bootstrap-table2/src/footer.js
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -2,31 +2,52 @@
import React from 'react';
import PropTypes from 'prop-types';
+import Const from './const';
import FooterCell from './footer-cell';
import _ from './utils';
const Footer = (props) => {
- const { data, className, columns } = props;
+ const { data, className, columns, selectRow, expandRow } = props;
+ const SelectionFooterCellComp = () =>
- {columns.map((column, i) => {
- if (column.footer === undefined || column.footer === null || column.hidden) {
- return false;
- }
-
- const columnData = _.pluck(data, column.dataField);
-
- return (
-
);
@@ -35,7 +56,9 @@ const Footer = (props) => {
Footer.propTypes = {
data: PropTypes.array,
className: PropTypes.string,
- columns: PropTypes.array
+ columns: PropTypes.array,
+ selectRow: PropTypes.object,
+ expandRow: PropTypes.object
};
export default Footer;
diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js
index 2a7cc0ac1..3812a49ec 100644
--- a/packages/react-bootstrap-table2/test/footer.test.js
+++ b/packages/react-bootstrap-table2/test/footer.test.js
@@ -1,8 +1,9 @@
/* eslint no-unused-vars: 0 */
import 'jsdom-global/register';
import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { shallow, render } from 'enzyme';
+import Const from '../src/const';
import Footer from '../src/footer';
import FooterCell from '../src/footer-cell';
@@ -32,11 +33,29 @@ describe('Footer', () => {
}
];
+ const selectRow = {
+ mode: Const.ROW_SELECT_DISABLED,
+ selected: [],
+ hideSelectColumn: true
+ };
+ const expandRow = {
+ renderer: undefined,
+ expanded: [],
+ nonExpandable: []
+ };
+
const keyField = 'id';
describe('simplest footer', () => {
beforeEach(() => {
- wrapper = shallow();
+ wrapper = shallow(
+
+ );
});
it('should render successfully', () => {
@@ -50,7 +69,15 @@ describe('Footer', () => {
const className = 'test-class';
beforeEach(() => {
- wrapper = shallow();
+ wrapper = shallow(
+
+ );
});
it('should render successfully', () => {
@@ -58,4 +85,40 @@ describe('Footer', () => {
expect(wrapper.find(`.${className}`).length).toBe(1);
});
});
+
+ describe('when selecrRow prop is enable', () => {
+ beforeEach(() => {
+ wrapper = render(
+
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('th').length).toBe(columns.length + 1);
+ });
+ });
+
+ describe('when expandRow prop is enable', () => {
+ beforeEach(() => {
+ wrapper = render(
+
+ );
+ });
+
+ it('should render successfully', () => {
+ expect(wrapper.length).toBe(1);
+ expect(wrapper.find('th').length).toBe(columns.length + 1);
+ });
+ });
});
From 8e142de332639b19531d97146eb6e37f3939adae Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 16 Feb 2019 17:11:10 +0800
Subject: [PATCH 057/250] Publish
- react-bootstrap-table2-example@1.0.17
- react-bootstrap-table2-filter@1.1.4
- react-bootstrap-table2-toolkit@1.2.2
- react-bootstrap-table-next@2.1.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index e57a4de7e..227992aa5 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.16",
+ "version": "1.0.17",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index d9d4d3e9b..cbd228b0c 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.3",
+ "version": "1.1.4",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 9326f107c..b16333232 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.2.1",
+ "version": "1.2.2",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 6ce53cf5e..bb35f739e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.1.1",
+ "version": "2.1.2",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From d9ff201373f11e0209ef79dc4de08a16e3650e5c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 Feb 2019 14:55:17 +0800
Subject: [PATCH 058/250] fix #723
---
docs/migration.md | 2 +-
.../react-bootstrap-table2-toolkit/README.md | 42 ++++-
.../react-bootstrap-table2-toolkit/context.js | 42 ++++-
.../react-bootstrap-table2-toolkit/index.js | 1 +
.../src/column-toggle/index.js | 3 +
.../src/column-toggle/toggle-list.js | 50 ++++++
.../src/contexts/column-context.js | 39 +++++
.../src/contexts/index.js | 42 +++++
packages/react-bootstrap-table2/src/footer.js | 2 +-
packages/react-bootstrap-table2/src/header.js | 31 ++--
.../src/row/row-pure-content.js | 151 +++++++++---------
.../test/contexts/column-context.test.js | 104 ++++++++++++
.../test/contexts/index.test.js | 57 +++++++
.../test/header.test.js | 23 ---
.../test/row/row-pure-content.test.js | 27 ----
15 files changed, 461 insertions(+), 155 deletions(-)
create mode 100644 packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js
create mode 100644 packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js
create mode 100644 packages/react-bootstrap-table2/src/contexts/column-context.js
create mode 100644 packages/react-bootstrap-table2/test/contexts/column-context.test.js
diff --git a/docs/migration.md b/docs/migration.md
index 4f379f804..89f50882c 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -23,7 +23,7 @@ Currently, **I still can't implement all the mainly features in legacy `react-bo
* [`react-bootstrap-table2-overlay`](https://www.npmjs.com/package/react-bootstrap-table2-overlay)
* Overlay/Loading Addons
* [`react-bootstrap-table2-toolkit`](https://www.npmjs.com/package/react-bootstrap-table2-toolkit)
- * Table Toolkits, like search, csv etc.
+ * Table Toolkits, like search, csv, column toggle etc.
This can help your application with less bundled size and also help `react-bootstrap-table2` have clean design to avoid handling to much logic in kernel module(SRP). Hence, which means you probably need to install above addons when you need specific features.
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index dcf773874..78fb3a001 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -2,9 +2,15 @@
`react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
-In the future, this toolkit will support other feature like row delete, insert etc. Right now we only support Table Search and CSV export.
+In the future, this toolkit will support other feature like row delete, insert etc. Right now we only following features:
+
+* Table Search
+* Export CSV
+* Column Toggle
**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
+**[Live Demo For Export CSV](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Export%20CSV&selectedStory=Basic%20Export%20CSV)**
+**[Live Demo For Column Toggle](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Toggle&selectedStory=Basic%20Column%20Toggle)**
**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
@@ -168,4 +174,36 @@ Default is `true`.
Default is `true`. `false` will only export current data which display on table.
#### onlyExportSelection - [bool]
-Default is `false`. `true` will only export the data which is selected.
\ No newline at end of file
+Default is `false`. `true` will only export the data which is selected.
+
+## Column Toggle
+
+Let's see how to render the column toggle in your react component:
+
+```js
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+
+ {
+ props => (
+
+
+```
+
+> `columnToggleProps` props have enough information to let you custom the toggle list: [demo]([Live Demo For Export CSV](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Export%20CSV&selectedStory=Custom%20Column%20Toggle))
+
+If you want to have default visibility on specified column, you can just give `true` or `false` on `column.hidden`.
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index c1664c383..322106e9d 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/packages/react-bootstrap-table2-toolkit/context.js
@@ -1,13 +1,14 @@
+/* eslint no-param-reassign: 0 */
import React from 'react';
import PropTypes from 'prop-types';
-import statelessDrcorator from './statelessOp';
+import statelessDecorator from './statelessOp';
-import createContext from './src/search/context';
+import createSearchContext from './src/search/context';
const ToolkitContext = React.createContext();
-class ToolkitProvider extends statelessDrcorator(React.Component) {
+class ToolkitProvider extends statelessDecorator(React.Component) {
static propTypes = {
keyField: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
@@ -42,13 +43,22 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
constructor(props) {
super(props);
- this.state = {
- searchText: typeof props.search === 'object' ? (props.search.defaultSearch || '') : ''
- };
+ const state = {};
this._ = null;
this.onClear = this.onClear.bind(this);
this.onSearch = this.onSearch.bind(this);
+ this.onColumnToggle = this.onColumnToggle.bind(this);
this.setDependencyModules = this.setDependencyModules.bind(this);
+
+ if (props.columnToggle) {
+ state.columnToggle = props.columns
+ .reduce((obj, column) => {
+ obj[column.dataField] = !column.hidden;
+ return obj;
+ }, {});
+ }
+ state.searchText = typeof props.search === 'object' ? (props.search.defaultSearch || '') : '';
+ this.state = state;
}
onSearch(searchText) {
@@ -61,6 +71,14 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
this.setState({ searchText: '' });
}
+ onColumnToggle(dataField) {
+ const { columnToggle } = this.state;
+ columnToggle[dataField] = !columnToggle[dataField];
+ this.setState(({
+ ...this.state,
+ columnToggle
+ }));
+ }
/**
*
* @param {*} _
@@ -84,10 +102,15 @@ class ToolkitProvider extends statelessDrcorator(React.Component) {
};
if (this.props.search) {
baseProps.search = {
- searchContext: createContext(this.props.search),
+ searchContext: createSearchContext(this.props.search),
searchText: this.state.searchText
};
}
+ if (this.props.columnToggle) {
+ baseProps.columnToggle = {
+ toggles: this.state.columnToggle
+ };
+ }
return (
diff --git a/packages/react-bootstrap-table2-toolkit/index.js b/packages/react-bootstrap-table2-toolkit/index.js
index f9553ac00..a5ea3814f 100644
--- a/packages/react-bootstrap-table2-toolkit/index.js
+++ b/packages/react-bootstrap-table2-toolkit/index.js
@@ -5,3 +5,4 @@ export default ToolkitProvider;
export const ToolkitContext = Context;
export { default as Search } from './src/search';
export { default as CSVExport } from './src/csv';
+export { default as ColumnToggle } from './src/column-toggle';
diff --git a/packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js b/packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js
new file mode 100644
index 000000000..afc5dae86
--- /dev/null
+++ b/packages/react-bootstrap-table2-toolkit/src/column-toggle/index.js
@@ -0,0 +1,3 @@
+import ToggleList from './toggle-list';
+
+export default { ToggleList };
diff --git a/packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js b/packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js
new file mode 100644
index 000000000..b5039f879
--- /dev/null
+++ b/packages/react-bootstrap-table2-toolkit/src/column-toggle/toggle-list.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ToggleList = ({
+ columns,
+ onColumnToggle,
+ toggles,
+ contextual,
+ className,
+ btnClassName
+}) => (
+
+ {
+ columns
+ .map(column => ({
+ ...column,
+ toggle: toggles[column.dataField]
+ }))
+ .map(column => (
+ onColumnToggle(column.dataField) }
+ >
+ { column.text }
+
+ ))
+ }
+
+);
+
+ToggleList.propTypes = {
+ columns: PropTypes.array.isRequired,
+ toggles: PropTypes.object.isRequired,
+ onColumnToggle: PropTypes.func.isRequired,
+ btnClassName: PropTypes.string,
+ className: PropTypes.string,
+ contextual: PropTypes.string
+};
+
+ToggleList.defaultProps = {
+ btnClassName: '',
+ className: '',
+ contextual: 'primary'
+};
+
+export default ToggleList;
diff --git a/packages/react-bootstrap-table2/src/contexts/column-context.js b/packages/react-bootstrap-table2/src/contexts/column-context.js
new file mode 100644
index 000000000..70ff45443
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/contexts/column-context.js
@@ -0,0 +1,39 @@
+/* eslint react/prop-types: 0 */
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default () => {
+ const ColumnManagementContext = React.createContext();
+
+ class ColumnManagementProvider extends React.Component {
+ static propTypes = {
+ columns: PropTypes.array.isRequired,
+ toggles: PropTypes.object
+ }
+
+ static defaultProps = {
+ toggles: null
+ }
+
+ render() {
+ let toggleColumn;
+ const { columns, toggles } = this.props;
+ if (toggles) {
+ toggleColumn = columns.filter(column => toggles[column.dataField]);
+ } else {
+ toggleColumn = columns.filter(column => !column.hidden);
+ }
+ return (
+
+ { this.props.children }
+
+ );
+ }
+ }
+
+ return {
+ Provider: ColumnManagementProvider,
+ Consumer: ColumnManagementContext.Consumer
+ };
+};
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 4367ae154..3288d0a12 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -5,6 +5,7 @@ import React, { Component } from 'react';
import EventEmitter from 'events';
import _ from '../utils';
import createDataContext from './data-context';
+import createColumnMgtContext from './column-context';
import createSortContext from './sort-context';
import SelectionContext from './selection-context';
import RowExpandContext from './row-expand-context';
@@ -30,6 +31,13 @@ const withContext = Base =>
dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
}
+ if (
+ props.columnToggle ||
+ props.columns.filter(col => col.hidden).length > 0
+ ) {
+ this.ColumnManagementContext = createColumnMgtContext();
+ }
+
if (props.selectRow) {
this.SelectionContext = SelectionContext;
}
@@ -83,6 +91,7 @@ const withContext = Base =>
searchProps,
sortProps,
paginationProps,
+ columnToggleProps
) => (
+
+ {
+ columnToggleProps => base(
+ rootProps,
+ filterProps,
+ searchProps,
+ sortProps,
+ paginationProps,
+ columnToggleProps
+ )
+ }
+
+
+ );
+ }
+
renderWithSelectionCtx(base, baseProps) {
return (
rootProps,
@@ -271,6 +309,10 @@ const withContext = Base =>
let base = this.renderBase();
+ if (this.ColumnManagementContext) {
+ base = this.renderWithColumnManagementCtx(base, baseProps);
+ }
+
if (this.SelectionContext) {
base = this.renderWithSelectionCtx(base, baseProps);
}
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
index 2c29994ec..1097d3cfa 100644
--- a/packages/react-bootstrap-table2/src/footer.js
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -16,7 +16,7 @@ const Footer = (props) => {
) => expandColumnPosition === Const.INDICATOR_POSITION_LEFT;
const childrens = columns.map((column, i) => {
- if (column.footer === undefined || column.footer === null || column.hidden) {
+ if (column.footer === undefined || column.footer === null) {
return false;
}
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index 26068523a..bf77637dc 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -39,24 +39,21 @@ const Header = (props) => {
const childrens = [
columns.map((column, i) => {
- if (!column.hidden) {
- const currSort = column.dataField === sortField;
- const isLastSorting = column.dataField === sortField;
+ const currSort = column.dataField === sortField;
+ const isLastSorting = column.dataField === sortField;
- return (
- |
- );
+ if (tabIndexStart !== -1) {
+ cellAttrs.tabIndex = tabIndex++;
}
- return false;
+
+ return (
+ |
+ );
});
}
}
diff --git a/packages/react-bootstrap-table2/test/contexts/column-context.test.js b/packages/react-bootstrap-table2/test/contexts/column-context.test.js
new file mode 100644
index 000000000..8781542a3
--- /dev/null
+++ b/packages/react-bootstrap-table2/test/contexts/column-context.test.js
@@ -0,0 +1,104 @@
+import 'jsdom-global/register';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import BootstrapTable from '../../src/bootstrap-table';
+import createColumnManagementContext from '../../src/contexts/column-context';
+
+describe('ColumnManagementContext', () => {
+ let wrapper;
+
+ const data = [{
+ id: 1,
+ name: 'A'
+ }, {
+ id: 2,
+ name: 'B'
+ }];
+
+ const columns = [{
+ dataField: 'id',
+ text: 'ID'
+ }, {
+ dataField: 'name',
+ text: 'Name'
+ }];
+
+ const mockBase = jest.fn((props => (
+
+
+ {
+ columnToggleProps => mockBase(columnToggleProps)
+ }
+
+
+ );
+ }
+
+ describe('default render', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext());
+ wrapper.render();
+ });
+
+ it('should have correct Provider property after calling createColumnManagementContext', () => {
+ expect(ColumnManagementContext.Provider).toBeDefined();
+ });
+
+ it('should have correct Consumer property after calling createColumnManagementContext', () => {
+ expect(ColumnManagementContext.Consumer).toBeDefined();
+ });
+ });
+
+ describe('when toggles props exist', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ toggles: {
+ id: true,
+ name: false
+ }
+ }));
+ });
+
+ it('should render component with correct columns props', () => {
+ expect(wrapper.prop('value').columns).toHaveLength(columns.length - 1);
+ expect(wrapper.prop('value').columns[0].dataField).toEqual('id');
+ });
+ });
+
+ describe('if there is any column.hidden is true', () => {
+ beforeEach(() => {
+ wrapper = shallow(shallowContext({
+ columns: [{
+ dataField: 'id',
+ text: 'ID'
+ }, {
+ dataField: 'name',
+ text: 'Name',
+ hidden: true
+ }]
+ }));
+ });
+
+ it('should render component with correct columns props', () => {
+ expect(wrapper.prop('value').columns).toHaveLength(columns.length - 1);
+ expect(wrapper.prop('value').columns[0].dataField).toEqual('id');
+ });
+ });
+});
diff --git a/packages/react-bootstrap-table2/test/contexts/index.test.js b/packages/react-bootstrap-table2/test/contexts/index.test.js
index 737fcb995..8ff590e2c 100644
--- a/packages/react-bootstrap-table2/test/contexts/index.test.js
+++ b/packages/react-bootstrap-table2/test/contexts/index.test.js
@@ -47,6 +47,7 @@ describe('Context', () => {
expect(wrapper.instance().CellEditContext).not.toBeDefined();
expect(wrapper.instance().FilterContext).not.toBeDefined();
expect(wrapper.instance().PaginationContext).not.toBeDefined();
+ expect(wrapper.instance().ColumnManagementContext).not.toBeDefined();
});
it('should render correctly', () => {
@@ -77,6 +78,57 @@ describe('Context', () => {
expect(wrapper.instance().CellEditContext).not.toBeDefined();
expect(wrapper.instance().FilterContext).not.toBeDefined();
expect(wrapper.instance().PaginationContext).not.toBeDefined();
+ expect(wrapper.instance().ColumnManagementContext).not.toBeDefined();
+ });
+ });
+
+ describe('if thers\'s any column hidden', () => {
+ beforeEach(() => {
+ const columnsWithHidden = [{
+ dataField: keyField,
+ text: 'ID'
+ }, {
+ dataField: 'name',
+ text: 'Name',
+ hidden: true
+ }];
+ wrapper = shallow(
+
Date: Sun, 17 Feb 2019 14:55:44 +0800
Subject: [PATCH 059/250] add stories for #723
---
.../examples/bootstrap4/column-toggle.js | 81 +++++++++++
.../column-toggle/custom-toggle-list.js | 135 ++++++++++++++++++
.../column-toggle/default-visibility.js | 81 +++++++++++
.../examples/column-toggle/index.js | 81 +++++++++++
.../column-toggle/styling-toggle-list.js | 91 ++++++++++++
.../stories/index.js | 17 ++-
6 files changed, 485 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js
create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/custom-toggle-list.js
create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/default-visibility.js
create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/index.js
create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/styling-toggle-list.js
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js
new file mode 100644
index 000000000..2060fddcb
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/column-toggle.js
@@ -0,0 +1,81 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ {
+ props => (
+
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
+ {
+ columns
+ .map(column => ({
+ ...column,
+ toggle: toggles[column.dataField]
+ }))
+ .map(column => (
+ onColumnToggle(column.dataField) }
+ >
+ { column.text }
+
+ ))
+ }
+
+);
+
+
+ {
+ props => (
+
+
+`;
+
+const CustomToggleList = ({
+ columns,
+ onColumnToggle,
+ toggles
+}) => (
+
+ {
+ columns
+ .map(column => ({
+ ...column,
+ toggle: toggles[column.dataField]
+ }))
+ .map(column => (
+ onColumnToggle(column.dataField) }
+ >
+ { column.text }
+
+ ))
+ }
+
+);
+
+export default () => (
+
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
+ {
+ props => (
+
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
+ {
+ props => (
+
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
+ {
+ props => (
+
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
Date: Sun, 17 Feb 2019 15:25:32 +0800
Subject: [PATCH 060/250] fix #793
---
docs/row-selection.md | 2 +-
.../src/row-selection/selection-cell.js | 4 +++-
.../test/row-selection/selection-cell.test.js | 3 ++-
3 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/docs/row-selection.md b/docs/row-selection.md
index c8b97e33e..b72ceea6f 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -176,7 +176,7 @@ Provide a callback function which allow you to custom the checkbox/radio box. Th
```js
const selectRow = {
mode: 'checkbox',
- selectionRenderer: ({ mode, checked, disabled }) => (
+ selectionRenderer: ({ mode, checked, disabled, rowIndex }) => (
// ....
)
};
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index 3d6f0231b..3c4da5656 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -63,6 +63,7 @@ export default class SelectionCell extends Component {
selected,
disabled,
tabIndex,
+ rowIndex,
selectionRenderer
} = this.props;
@@ -78,7 +79,8 @@ export default class SelectionCell extends Component {
selectionRenderer ? selectionRenderer({
mode: inputType,
checked: selected,
- disabled
+ disabled,
+ rowIndex
}) : (
Date: Sun, 17 Feb 2019 17:17:56 +0800
Subject: [PATCH 061/250] exclude examples from coverage
---
package.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/package.json b/package.json
index f4fc48723..37859fdbd 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,8 @@
"jest": {
"collectCoverageFrom": [
"packages/*/src/**/*.js",
- "packages/*/index.js"
+ "packages/*/index.js",
+ "!packages/react-bootstrap-table2-example/**/*.js"
],
"roots": [
"/packages"
From 2932b8a1b8763b13fef1f27ff7024bef797aa60f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 Feb 2019 17:18:40 +0800
Subject: [PATCH 062/250] fix #795
---
.../README.md | 31 +++++++++-----
.../react-bootstrap-table2-paginator/index.js | 3 +-
.../src/pagination-total-adapter.js | 24 +++++++++++
.../src/pagination-total-standalone.js | 11 +++++
.../src/pagination-total.js | 22 +++++++---
.../src/pagination.js | 41 +++++++------------
.../src/size-per-page-dropdown-adapter.js | 2 +-
.../test/pagination-total-adapter.test.js | 34 +++++++++++++++
.../test/pagination.test.js | 17 +++-----
9 files changed, 129 insertions(+), 56 deletions(-)
create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js
create mode 100644 packages/react-bootstrap-table2-paginator/src/pagination-total-standalone.js
create mode 100644 packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js
diff --git a/packages/react-bootstrap-table2-paginator/README.md b/packages/react-bootstrap-table2-paginator/README.md
index b3d30ebd6..ede90404d 100644
--- a/packages/react-bootstrap-table2-paginator/README.md
+++ b/packages/react-bootstrap-table2-paginator/README.md
@@ -69,23 +69,23 @@ Sometime, you may feel above props is not satisfied with your requirement, don't
* [sizePerPageOptionRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationsizeperpageoptionrenderer-function)
* [paginationTotalRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationpaginationtotalrenderer-function)
-### Professional
+### Fully Customization
-If you want to customize the pagination component completely, you may get interesting on following solution:
+If you want to customize the pagination component completely, you may get interesting on following solutions:
* Standalone
* Non-standalone
-`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and you will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
+`react-bootstrap-table2-paginator` have a `PaginationProvider` which is a react context and that will be easier to customize the pagination components under the scope of `PaginationProvider`. Let's introduce it step by step:
-#### Import PaginationProvider
+#### 1. Import PaginationProvider
```js
import paginationFactory, { PaginationProvider } from 'react-bootstrap-table2-paginator';
```
-#### Declare custom and totalSize in pagination option:
+#### 2. Declare custom and totalSize in pagination option:
```js
const paginationOption = {
@@ -94,7 +94,7 @@ const paginationOption = {
};
```
-#### Render PaginationProvider
+#### 3. Render PaginationProvider
```js
```
-Now, you have to choose, your built-in standalne components or you customize all of them by yourself:
+Now, you have to choose which solution you like: standalone or non-standalone ?
-#### Use Standalone Component
-`react-bootstrap-table2-paginator` provider two standalone components:
+#### 4.1 Use Standalone Component
+`react-bootstrap-table2-paginator` provider three standalone components:
* Size Per Page Dropdwn Standalone
* Pagination List Standalone
+* Pagination Total Standalone
When render each standalone, you just need to pass the `paginationProps` props to standalone component:
```js
-import paginationFactory, { PaginationProvider, PaginationListStandalone, SizePerPageDropdownStandalone } from 'react-bootstrap-table2-paginator';
+import paginationFactory, {
+ PaginationProvider,
+ PaginationListStandalone,
+ SizePerPageDropdownStandalone,
+ PaginationTotalStandalone
+} from 'react-bootstrap-table2-paginator';
({
createContext: createDataContext,
@@ -23,4 +24,4 @@ CustomizableProvider.propTypes = {
};
export const PaginationProvider = CustomizableProvider;
-export { PaginationListStandalone, SizePerPageDropdownStandalone };
+export { PaginationListStandalone, SizePerPageDropdownStandalone, PaginationTotalStandalone };
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js
new file mode 100644
index 000000000..2c990f0c2
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-total-adapter.js
@@ -0,0 +1,24 @@
+/* eslint react/prop-types: 0 */
+import React, { Component } from 'react';
+
+import pageResolver from './page-resolver';
+import PaginationTotal from './pagination-total';
+
+const paginationTotalAdapter = WrappedComponent =>
+ class PaginationTotalAdapter extends pageResolver(Component) {
+ render() {
+ const [from, to] = this.calculateFromTo();
+ return (
+
- Showing rows { props.from } to { props.to } of { props.dataSize }
-
-);
+const PaginationTotal = (props) => {
+ if (props.paginationTotalRenderer) {
+ return props.paginationTotalRenderer(props.from, props.to, props.dataSize);
+ }
+ return (
+
+ Showing rows { props.from } to { props.to } of { props.dataSize }
+
+ );
+};
PaginationTotal.propTypes = {
from: PropTypes.number.isRequired,
to: PropTypes.number.isRequired,
- dataSize: PropTypes.number.isRequired
+ dataSize: PropTypes.number.isRequired,
+ paginationTotalRenderer: PropTypes.func
+};
+
+PaginationTotal.defaultProps = {
+ paginationTotalRenderer: undefined
};
export default PaginationTotal;
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index 5b60accc8..fa2bd8646 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -5,30 +5,16 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import pageResolver from './page-resolver';
import paginationHandler from './pagination-handler';
-import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
+import { SizePerPageDropdownWithAdapter } from './size-per-page-dropdown-adapter';
import { PaginationListWithAdapter } from './pagination-list-adapter';
-import PaginationTotal from './pagination-total';
+import { PaginationTotalWithAdapter } from './pagination-total-adapter';
import Const from './const';
class Pagination extends pageResolver(Component) {
- defaultTotal = (from, to, size) => (
-
-
{
showTotal ?
- this.setTotal(
- from,
- to,
- dataSize,
- paginationTotalRenderer
- ) : null
+
: null
}
{
@@ -83,6 +69,9 @@ class Pagination extends pageResolver(Component) {
};
-export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
+export const SizePerPageDropdownWithAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
export default sizePerPageDropdownAdapter;
diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js
new file mode 100644
index 000000000..cef94c9f1
--- /dev/null
+++ b/packages/react-bootstrap-table2-paginator/test/pagination-total-adapter.test.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import paginationTotalAdapter from '../src/pagination-total-adapter';
+
+
+const MockComponent = () => null;
+
+const PaginationTotalAdapter = paginationTotalAdapter(MockComponent);
+
+describe('paginationTotalAdapter', () => {
+ let wrapper;
+
+ const props = {
+ dataSize: 20,
+ currPage: 1,
+ currSizePerPage: 10,
+ paginationTotalRenderer: jest.fn()
+ };
+
+ describe('render', () => {
+ beforeEach(() => {
+ wrapper = shallow(
);
const props = createMockProps({ showTotal: true, paginationTotalRenderer });
- wrapper = shallow(
Date: Sun, 17 Feb 2019 17:19:02 +0800
Subject: [PATCH 063/250] add story for PaginationTotalStandalone
---
.../pagination/standalone-pagination-total.js | 107 ++++++++++++++++++
.../stories/index.js | 2 +
2 files changed, 109 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js
new file mode 100644
index 000000000..d726c8990
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-pagination-total.js
@@ -0,0 +1,107 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(87);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationTotalStandalone, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+ )
+ }
+
+`;
+
+const options = {
+ custom: true,
+ totalSize: products.length
+};
+
+export default class StandalonePaginationList extends React.Component {
+ render() {
+ return (
+
+
+ {
+ ({
+ paginationProps,
+ paginationTableProps
+ }) => (
+
+ )
+ }
+
+
{ sourceCode }
+
Date: Wed, 20 Feb 2019 23:08:26 +0800
Subject: [PATCH 064/250] Publish
- react-bootstrap-table2-example@1.0.18
- react-bootstrap-table2-paginator@2.0.3
- react-bootstrap-table2-toolkit@1.3.0
- react-bootstrap-table-next@2.2.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 227992aa5..885e74407 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.17",
+ "version": "1.0.18",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 92cd8afaf..43cad208f 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.2",
+ "version": "2.0.3",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index b16333232..e72478ef1 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.2.2",
+ "version": "1.3.0",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index bb35f739e..5bec5845d 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.1.2",
+ "version": "2.2.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8e940112f5a7d85d63d006f5d3bf0c6cf39808aa Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 23 Feb 2019 16:13:40 +0800
Subject: [PATCH 065/250] fix #811
---
packages/react-bootstrap-table2-filter/src/context.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 019013faa..f54e3275e 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -40,7 +40,7 @@ export default (
componentWillReceiveProps(nextProps) {
let nextData = nextProps.data;
- if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.props.data)) {
+ if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
nextData = this.doFilter(nextProps);
}
this.setState({
From d84fd5c80122b03dc9e1988ac11388c954cdbaa0 Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Sat, 23 Feb 2019 22:40:05 +0200
Subject: [PATCH 066/250] CSS Animation for row expansion
---
packages/react-bootstrap-table2/package.json | 1 +
.../src/contexts/row-expand-context.js | 25 ++++++++++++-----
.../src/row-expand/expand-row.js | 27 +++++++++++++++----
.../src/row-expand/row-consumer.js | 6 +++--
.../style/react-bootstrap-table2.scss | 25 +++++++++++++----
5 files changed, 65 insertions(+), 19 deletions(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 5bec5845d..b698a9312 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,6 +37,7 @@
],
"dependencies": {
"classnames": "2.2.5",
+ "react-transition-group": "^2.5.3",
"underscore": "1.9.1"
},
"peerDependencies": {
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 9c038ab5f..ba21d12a7 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -10,9 +10,10 @@ class RowExpandProvider extends React.Component {
children: PropTypes.node.isRequired,
data: PropTypes.array.isRequired,
keyField: PropTypes.string.isRequired
- }
+ };
- state = { expanded: this.props.expandRow.expanded || [] };
+ state = { expanded: this.props.expandRow.expanded || [],
+ isClosing: this.props.expandRow.isClosing || [] };
componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
@@ -22,6 +23,10 @@ class RowExpandProvider extends React.Component {
}
}
+ onClosed = (closedRow) => {
+ this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
+ };
+
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
if (nonExpandable && nonExpandable.includes(rowKey)) {
@@ -29,11 +34,15 @@ class RowExpandProvider extends React.Component {
}
let currExpanded = [...this.state.expanded];
+ let isClosing = [...this.state.isClosing];
if (expanded) {
- if (onlyOneExpanding) currExpanded = [rowKey];
- else currExpanded.push(rowKey);
+ if (onlyOneExpanding) {
+ isClosing = isClosing.concat(currExpanded);
+ currExpanded = [rowKey];
+ } else currExpanded.push(rowKey);
} else {
+ isClosing.push(rowKey);
currExpanded = currExpanded.filter(value => value !== rowKey);
}
@@ -41,8 +50,8 @@ class RowExpandProvider extends React.Component {
const row = dataOperator.getRowByRowId(data, keyField, rowKey);
onExpand(row, expanded, rowIndex, e);
}
- this.setState(() => ({ expanded: currExpanded }));
- }
+ this.setState(() => ({ expanded: currExpanded, isClosing }));
+ };
handleAllRowExpand = (e, expandAll) => {
const {
@@ -68,7 +77,7 @@ class RowExpandProvider extends React.Component {
}
this.setState(() => ({ expanded: currExpanded }));
- }
+ };
render() {
const { data, keyField } = this.props;
@@ -78,6 +87,8 @@ class RowExpandProvider extends React.Component {
...this.props.expandRow,
nonExpandable: this.props.expandRow.nonExpandable,
expanded: this.state.expanded,
+ isClosing: this.state.isClosing,
+ onClosed: this.onClosed,
isAnyExpands: dataOperator.isAnyExpands(data, keyField, this.state.expanded),
onRowExpand: this.handleRowExpand,
onAllRowExpand: this.handleAllRowExpand
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 0a896287f..9505e8567 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -1,18 +1,35 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { CSSTransition } from 'react-transition-group';
-const ExpandRow = ({ children, ...rest }) => (
-
- { children }
+const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
+
+
+
+
+ { children }
+
+
+
);
ExpandRow.propTypes = {
- children: PropTypes.node
+ children: PropTypes.node,
+ expanded: PropTypes.bool,
+ onClosed: PropTypes.func
};
ExpandRow.defaultProps = {
- children: null
+ children: null,
+ expanded: false,
+ onClosed: null
};
export default ExpandRow;
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 77f5e36db..92c21e727 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -8,8 +8,8 @@ export default (Component, visibleColumnSize) => {
const key = props.value;
const expanded = expandRow.expanded.includes(key);
+ const isClosing = expandRow.isClosing.includes(key);
const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
-
return [
{
expandable={ expandable }
expandRow={ { ...expandRow } }
/>,
- expanded ? expandRow.onClosed(key) }
>
{ expandRow.renderer(props.row) }
: null
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index 5974e45e3..6ec20e191 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -68,10 +68,6 @@
text-align: center;
}
- tr.expanding-row {
- padding: 5px;
- }
-
td.react-bootstrap-table-editing-cell {
.animated {
animation-fill-mode: both;
@@ -161,4 +157,23 @@
animation-name: bounceOut;
}
}
-}
\ No newline at end of file
+ .reset-expansion-style{
+ padding: 0 8px 0 8px;
+ }
+ .row-expand-slide-appear{
+ max-height: 0;
+ overflow: hidden;
+ }
+ .row-expand-slide-appear-active{
+ max-height: 1000px;
+ transition: max-height 3s linear;
+ }
+ .row-expand-slide-exit{
+ max-height: 1000px;
+ }
+ .row-expand-slide-exit-active{
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 400ms cubic-bezier(0, 0.95, 0, 0.95)
+ }
+}
From d26c13b9beafc0fa7e4c79c5c96a68dbbbab3726 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 14:11:05 +0800
Subject: [PATCH 067/250] fix #815
---
packages/react-bootstrap-table2/src/contexts/index.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 3288d0a12..d735c1ab5 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -294,6 +294,7 @@ const withContext = Base =>
return rootProps => (
this.cellEditContext = n }
selectRow={ this.props.selectRow }
cellEdit={ this.props.cellEdit }
data={ rootProps.getData() }
From c01f45a719702ad44a3b22c70291927962e7eee0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 14:56:27 +0800
Subject: [PATCH 068/250] fix #789
---
.../src/contexts/selection-context.js | 45 ++++++++---------
.../test/contexts/selection-context.test.js | 49 ++++++++++---------
2 files changed, 48 insertions(+), 46 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js
index 9c44cff46..573c54fac 100644
--- a/packages/react-bootstrap-table2/src/contexts/selection-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js
@@ -14,26 +14,27 @@ class SelectionProvider extends React.Component {
keyField: PropTypes.string.isRequired
}
- state = { selected: this.props.selectRow.selected || [] };
+ constructor(props) {
+ super(props);
+ this.selected = props.selectRow.selected || [];
+ }
componentWillReceiveProps(nextProps) {
if (nextProps.selectRow) {
- this.setState(() => ({
- selected: nextProps.selectRow.selected || this.state.selected
- }));
+ this.selected = nextProps.selectRow.selected || this.selected;
}
}
// exposed API
getSelected() {
- return this.state.selected;
+ return this.selected;
}
handleRowSelect = (rowKey, checked, rowIndex, e) => {
const { data, keyField, selectRow: { mode, onSelect } } = this.props;
const { ROW_SELECT_SINGLE } = Const;
- let currSelected = [...this.state.selected];
+ let currSelected = [...this.selected];
let result = true;
if (onSelect) {
@@ -41,18 +42,17 @@ class SelectionProvider extends React.Component {
result = onSelect(row, checked, rowIndex, e);
}
- this.setState(() => {
- if (result === true || result === undefined) {
- if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
- currSelected = [rowKey];
- } else if (checked) { // when select mode is checkbox
- currSelected.push(rowKey);
- } else {
- currSelected = currSelected.filter(value => value !== rowKey);
- }
+ if (result === true || result === undefined) {
+ if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
+ currSelected = [rowKey];
+ } else if (checked) { // when select mode is checkbox
+ currSelected.push(rowKey);
+ } else {
+ currSelected = currSelected.filter(value => value !== rowKey);
}
- return { selected: currSelected };
- });
+ }
+ this.selected = currSelected;
+ this.forceUpdate();
}
handleAllRowsSelect = (e, isUnSelect) => {
@@ -64,7 +64,7 @@ class SelectionProvider extends React.Component {
nonSelectable
}
} = this.props;
- const { selected } = this.state;
+ const { selected } = this;
let currSelected;
@@ -81,7 +81,7 @@ class SelectionProvider extends React.Component {
dataOperator.getSelectedRows(
data,
keyField,
- isUnSelect ? this.state.selected : currSelected
+ isUnSelect ? selected : currSelected
),
e
);
@@ -89,7 +89,8 @@ class SelectionProvider extends React.Component {
currSelected = result;
}
}
- this.setState(() => ({ selected: currSelected }));
+ this.selected = currSelected;
+ this.forceUpdate();
}
render() {
@@ -99,7 +100,7 @@ class SelectionProvider extends React.Component {
} = getSelectionSummary(
this.props.data,
this.props.keyField,
- this.state.selected
+ this.selected
);
let checkedStatus;
@@ -113,7 +114,7 @@ class SelectionProvider extends React.Component {
{
expect(SelectionContext.Consumer).toBeDefined();
});
- it('should have correct state.data', () => {
- expect(wrapper.state().selected).toEqual([]);
+ it('should have correct this.selected', () => {
+ expect(wrapper.instance().selected).toEqual([]);
});
it('should pass correct sort props to children element', () => {
expect(wrapper.length).toBe(1);
expect(mockBase).toHaveBeenCalledWith({
...defaultSelectRow,
- selected: wrapper.state().selected,
+ selected: wrapper.instance().selected,
onRowSelect: wrapper.instance().handleRowSelect,
onAllRowsSelect: wrapper.instance().handleAllRowsSelect,
allRowsNotSelected: true,
@@ -104,8 +104,8 @@ describe('DataContext', () => {
});
});
- it('should have correct state.selected', () => {
- expect(wrapper.state().selected).toEqual(newSelectRow.selected);
+ it('should have correct this.selected', () => {
+ expect(wrapper.instance().selected).toEqual(newSelectRow.selected);
});
describe('if nextProps.selectRow is not existing', () => {
@@ -120,8 +120,8 @@ describe('DataContext', () => {
});
});
- it('should keep origin state.selected', () => {
- expect(wrapper.state().selected).toEqual(defaultSelected);
+ it('should keep origin this.selected', () => {
+ expect(wrapper.instance().selected).toEqual(defaultSelected);
});
});
@@ -131,8 +131,8 @@ describe('DataContext', () => {
wrapper.instance().componentWillReceiveProps({});
});
- it('should not set state.selected', () => {
- expect(wrapper.state().selected).toEqual([]);
+ it('should not set this.selected', () => {
+ expect(wrapper.instance().selected).toEqual([]);
});
});
});
@@ -148,8 +148,8 @@ describe('DataContext', () => {
wrapper = shallow(shallowContext(selectRow));
});
- it('should have correct state.data', () => {
- expect(wrapper.state().selected).toEqual(selectRow.selected);
+ it('should have correct this.selected', () => {
+ expect(wrapper.instance().selected).toEqual(selectRow.selected);
});
});
@@ -164,12 +164,12 @@ describe('DataContext', () => {
wrapper = shallow(shallowContext(selectRow));
});
- it('should set state.selected correctly', () => {
+ it('should set this.selected correctly', () => {
wrapper.instance().handleRowSelect(firstSelectedRow, true, rowIndex);
- expect(wrapper.state('selected')).toEqual([firstSelectedRow]);
+ expect(wrapper.instance().selected).toEqual([firstSelectedRow]);
wrapper.instance().handleRowSelect(secondSelectedRow, true, rowIndex);
- expect(wrapper.state('selected')).toEqual([secondSelectedRow]);
+ expect(wrapper.instance().selected).toEqual([secondSelectedRow]);
});
});
@@ -178,18 +178,19 @@ describe('DataContext', () => {
wrapper = shallow(shallowContext());
});
- it('should set state.selected correctly', () => {
+ it('should set this.selected correctly', () => {
wrapper.instance().handleRowSelect(firstSelectedRow, true, rowIndex);
- expect(wrapper.state('selected')).toEqual(expect.arrayContaining([firstSelectedRow]));
+ expect(wrapper.instance().selected).toEqual(expect.arrayContaining([firstSelectedRow]));
wrapper.instance().handleRowSelect(secondSelectedRow, true, rowIndex);
- expect(wrapper.state('selected')).toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
+ expect(wrapper.instance().selected)
+ .toEqual(expect.arrayContaining([firstSelectedRow, secondSelectedRow]));
wrapper.instance().handleRowSelect(firstSelectedRow, false, rowIndex);
- expect(wrapper.state('selected')).toEqual(expect.arrayContaining([secondSelectedRow]));
+ expect(wrapper.instance().selected).toEqual(expect.arrayContaining([secondSelectedRow]));
wrapper.instance().handleRowSelect(secondSelectedRow, false, rowIndex);
- expect(wrapper.state('selected')).toEqual([]);
+ expect(wrapper.instance().selected).toEqual([]);
});
});
@@ -220,8 +221,8 @@ describe('DataContext', () => {
wrapper.instance().handleAllRowsSelect(e, false);
});
- it('should set state.selected correctly', () => {
- expect(wrapper.state('selected')).toEqual(data.map(d => d[keyField]));
+ it('should set this.selected correctly', () => {
+ expect(wrapper.instance().selected).toEqual(data.map(d => d[keyField]));
});
describe('when selectRow.onSelectAll is defined', () => {
@@ -237,7 +238,7 @@ describe('DataContext', () => {
it('should call selectRow.onSelectAll correctly', () => {
expect(onSelectAll).toHaveBeenCalledWith(
true,
- dataOperator.getSelectedRows(data, keyField, wrapper.state('selected')),
+ dataOperator.getSelectedRows(data, keyField, wrapper.instance().selected),
e
);
});
@@ -253,8 +254,8 @@ describe('DataContext', () => {
wrapper.instance().handleAllRowsSelect(e, true);
});
- it('should set state.selected correctly', () => {
- expect(wrapper.state('selected')).toEqual([]);
+ it('should set this.selected correctly', () => {
+ expect(wrapper.instance().selected).toEqual([]);
});
describe('when selectRow.onSelectAll is defined', () => {
From bf0c5c43a2e88ea1fa38c8d5f3e8fcedae53f528 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 15:50:13 +0800
Subject: [PATCH 069/250] fix #735
---
packages/react-bootstrap-table2/src/cell.js | 3 ++
.../react-bootstrap-table2/test/cell.test.js | 41 +++++++++++++++++++
2 files changed, 44 insertions(+)
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index 46b10ea53..d09f689f6 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -23,7 +23,10 @@ class Cell extends eventDelegater(Component) {
if (shouldUpdate) return true;
+ // if (nextProps.formatter)
+
shouldUpdate =
+ nextProps.column.formatter ? !_.isEqual(this.props.row, nextProps.row) : false ||
this.props.column.hidden !== nextProps.column.hidden ||
this.props.rowIndex !== nextProps.rowIndex ||
this.props.columnIndex !== nextProps.columnIndex ||
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index 1187c1390..d0ceb950f 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/packages/react-bootstrap-table2/test/cell.test.js
@@ -218,6 +218,47 @@ describe('Cell', () => {
});
});
+ describe('when props.row is change', () => {
+ describe('and column.formatter is enable', () => {
+ const column = { dataField: 'name', text: 'Product Name', formatter: () => 123 };
+ beforeEach(() => {
+ props = {
+ row,
+ columnIndex: 1,
+ rowIndex: 1,
+ tabIndex: 5,
+ column
+ };
+ wrapper = shallow(
+ | );
+ });
+
+ it('should return true', () => {
+ nextProps = { ...props, row: { ...row, alert: 'test' } };
+ expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(true);
+ });
+ });
+ describe('but column.formatter is disable', () => {
+ const column = { dataField: 'name', text: 'Product Name' };
+ beforeEach(() => {
+ props = {
+ row,
+ columnIndex: 1,
+ rowIndex: 1,
+ tabIndex: 5,
+ column
+ };
+ wrapper = shallow(
+ | );
+ });
+
+ it('should return true', () => {
+ nextProps = { ...props, row: { ...row, alert: 'test' } };
+ expect(wrapper.instance().shouldComponentUpdate(nextProps)).toBe(false);
+ });
+ });
+ });
+
describe('if column.isDummyField is true', () => {
describe('when content is change', () => {
const column = { dataField: '', text: 'Product Name', isDummyField: true };
From 09f21e81303e37ae1f1a12aeacaae237ee3fac2c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 16:11:38 +0800
Subject: [PATCH 070/250] allow to custom className on clear search and export
csv button
---
.../examples/bootstrap4/toolkits.js | 90 +++++++++++++++++++
.../stories/index.js | 4 +-
.../src/csv/button.js | 4 +-
.../src/search/clear-button.js | 9 +-
4 files changed, 102 insertions(+), 5 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js
new file mode 100644
index 000000000..4313cf068
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/toolkits.js
@@ -0,0 +1,90 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search, CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar, ClearSearchButton } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+
+ {
+ props => (
+
+
Input something at below input field:
+ Export CSV!!
+
+ )
+ }
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
Input something at below input field:
+ Export CSV!!
+
+ )
+ }
+
+
{ sourceCode }
+
onExport() }
{ ...rest }
>
@@ -26,7 +28,7 @@ ExportCSVButton.propTypes = {
style: PropTypes.object
};
ExportCSVButton.defaultProps = {
- className: 'react-bs-table-csv-btn btn btn-default',
+ className: '',
style: {}
};
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js b/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
index 291f900af..f01adaffc 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/clear-button.js
@@ -3,18 +3,21 @@ import PropTypes from 'prop-types';
const ClearButton = ({
onClear,
- text
+ text,
+ className
}) => (
- { text }
+ { text }
);
ClearButton.propTypes = {
onClear: PropTypes.func.isRequired,
+ className: PropTypes.string,
text: PropTypes.string
};
ClearButton.defaultProps = {
- text: 'Clear'
+ text: 'Clear',
+ className: ''
};
export default ClearButton;
From 3ffccce1fe3e48234c45919411424d2c7fa0bb73 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 16:20:44 +0800
Subject: [PATCH 071/250] fix #817
---
.../examples/cell-edit/custom-editor-table.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js
index a75a98a7b..8b548a557 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/custom-editor-table.js
@@ -18,6 +18,11 @@ class QualityRanger extends React.Component {
static defaultProps = {
value: 0
}
+
+ componentDidMount() {
+ this.range.focus();
+ }
+
getValue() {
return parseInt(this.range.value, 10);
}
From 6cac7f6dc850c6c5ae373c7254a90db58cb12a0a Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Feb 2019 17:01:52 +0800
Subject: [PATCH 072/250] Publish
- react-bootstrap-table2-example@1.0.19
- react-bootstrap-table2-filter@1.1.5
- react-bootstrap-table2-toolkit@1.3.1
- react-bootstrap-table-next@3.0.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 885e74407..b15950e50 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.18",
+ "version": "1.0.19",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index cbd228b0c..ba6e2598a 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.4",
+ "version": "1.1.5",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index e72478ef1..742301107 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.3.0",
+ "version": "1.3.1",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 5bec5845d..d091c2186 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "2.2.0",
+ "version": "3.0.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 33c026c7e2fe6f24431fff0ece653c7fe94b3c42 Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Mon, 25 Feb 2019 13:01:42 +0200
Subject: [PATCH 073/250] Added original padding without breaking the animation
---
packages/react-bootstrap-table2/src/row-expand/expand-row.js | 4 +++-
.../react-bootstrap-table2/style/react-bootstrap-table2.scss | 5 ++++-
2 files changed, 7 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 9505e8567..3699adae7 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -13,7 +13,9 @@ const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
onExited={ onClosed }
>
- { children }
+
+ { children }
+
diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
index 6ec20e191..e2a0895b9 100644
--- a/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
+++ b/packages/react-bootstrap-table2/style/react-bootstrap-table2.scss
@@ -158,7 +158,10 @@
}
}
.reset-expansion-style{
- padding: 0 8px 0 8px;
+ padding: 0;
+ }
+ .row-expansion-style{
+ padding: 8px;
}
.row-expand-slide-appear{
max-height: 0;
From b4973c826c09a26633f2ceaec016dc93a830c5ab Mon Sep 17 00:00:00 2001
From: Sartaj Singh Baveja
Date: Wed, 6 Mar 2019 06:28:41 -0800
Subject: [PATCH 074/250] Minor update to docs (#841)
---
docs/cell-edit.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/cell-edit.md b/docs/cell-edit.md
index cc56f6c35..e1b4ab56e 100644
--- a/docs/cell-edit.md
+++ b/docs/cell-edit.md
@@ -69,7 +69,7 @@ const cellEdit: {
// omit...
beforeSaveCell(oldValue, newValue, row, column, done) {
setTimeout(() => {
- if (confirm('Do you want to accep this change?')) {
+ if (confirm('Do you want to accept this change?')) {
done(); // contine to save the changes
} else {
done(false); // reject the changes
From e9f08d278d8e70df8ddbbcd533a8478070cf25de Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Mar 2019 15:52:10 +0800
Subject: [PATCH 075/250] fix #826
---
.../pagination-with-dynamic-data.js | 150 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/data-context.js | 7 +-
.../src/page.js | 14 +-
.../src/state-context.js | 3 +-
.../test/page.test.js | 132 +++++++++++++--
6 files changed, 295 insertions(+), 13 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js b/packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js
new file mode 100644
index 000000000..cdd6f3d66
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/pagination/pagination-with-dynamic-data.js
@@ -0,0 +1,150 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class BookList extends React.Component {
+ state = {
+ books: [
+ { id: '1', name: 'Book 1' },
+ { id: '2', name: 'Book 2' },
+ { id: '3', name: 'Book 3' },
+ { id: '4', name: 'Book 4' },
+ { id: '5', name: 'Book 5' },
+ { id: '6', name: 'Book 6' }
+ ]
+ };
+
+ deleteBookWithId = () => {
+ const lastOneId = this.state.books.length;
+ const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+ this.setState({ books: updatedBooks });
+ };
+
+ addBook = () => {
+ const lastOneId = this.state.books.length + 1;
+ this.setState({ books: [...this.state.books, {
+ id: \`$\{lastOneId}\`, name: \`Book $\{lastOneId}\`
+ }] });
+ }
+
+ render() {
+ const options = {
+ // pageStartIndex: 0,
+ sizePerPage: 5,
+ hideSizePerPage: true,
+ hidePageListOnlyOnePage: true
+ };
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ Cell: row => (
+
+ { row.value }
+
+ )
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name'
+ }
+ ];
+
+ return (
+
+ this.deleteBookWithId() }>
+ delete last one book
+
+ this.addBook() }>
+ Add a book to the end
+
+ { sourceCode }
+
+ );
+ }
+`;
+
+export default class BookList extends React.Component {
+ state = {
+ books: [
+ { id: '1', name: 'Book 1' },
+ { id: '2', name: 'Book 2' },
+ { id: '3', name: 'Book 3' },
+ { id: '4', name: 'Book 4' },
+ { id: '5', name: 'Book 5' },
+ { id: '6', name: 'Book 6' },
+ { id: '7', name: 'Book 6' },
+ { id: '8', name: 'Book 6' },
+ { id: '9', name: 'Book 6' },
+ { id: '10', name: 'Book 6' },
+ { id: '11', name: 'Book 6' }
+ ]
+ };
+
+ deleteBookWithId = () => {
+ const lastOneId = this.state.books.length;
+ const updatedBooks = this.state.books.filter(m => m.id !== lastOneId.toString());
+ this.setState({ books: updatedBooks });
+ };
+
+ addBook = () => {
+ const lastOneId = this.state.books.length + 1;
+ this.setState({ books: [...this.state.books, {
+ id: `${lastOneId}`, name: `Book ${lastOneId}`
+ }] });
+ }
+
+ render() {
+ const options = {
+ // pageStartIndex: 0,
+ sizePerPage: 5,
+ hideSizePerPage: true,
+ hidePageListOnlyOnePage: true
+ };
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ Cell: row => (
+
+ { row.value }
+
+ )
+ },
+ {
+ dataField: 'name',
+ text: 'Product Name'
+ }
+ ];
+
+ return (
+
+ this.deleteBookWithId() }>
+ delete last one book
+
+ this.addBook() }>
+ Add a book to the end
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 39be4b758..cc97704b6 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -163,6 +163,7 @@ import ExpandHooks from 'examples/row-expand/expand-hooks';
// pagination
import PaginationTable from 'examples/pagination';
import PaginationHooksTable from 'examples/pagination/pagination-hooks';
+import PaginationWithDynamicData from 'examples/pagination/pagination-with-dynamic-data';
import CustomPaginationTable from 'examples/pagination/custom-pagination';
import CustomPageButtonTable from 'examples/pagination/custom-page-button';
import CustomSizePerPageOptionTable from 'examples/pagination/custom-size-per-page-option';
@@ -404,6 +405,7 @@ storiesOf('Pagination', module)
.addDecorator(bootstrapStyle())
.add('Basic Pagination Table', () =>
Date: Sat, 9 Mar 2019 18:18:20 +0800
Subject: [PATCH 076/250] fix #830
---
.../custome-page-list-with-filter.js | 72 +++++++++++++++----
.../src/utils/common.js | 6 +-
.../src/context.js | 30 ++++----
.../test/context.test.js | 4 +-
.../src/state-context.js | 12 +++-
5 files changed, 88 insertions(+), 36 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
index eefd780c4..1997d376e 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js
@@ -3,28 +3,70 @@ import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
-import { productsGenerator } from 'utils/common';
+import { productsQualityGenerator } from 'utils/common';
-const products = productsGenerator(21);
+const products = productsQualityGenerator(21);
+
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
const columns = [{
dataField: 'id',
- text: 'Product ID',
- filter: textFilter({})
+ text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name',
filter: textFilter()
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions,
+ defaultValue: 0
+ })
}];
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
-import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions,
+ defaultValue: 0
+ })
+}];
class Table extends React.Component {
+ state = { products }
+
+ loadData = () => {
+ this.setState({ products: productsQualityGenerator(40, 7) });
+ }
+
render() {
const options = {
custom: true,
@@ -39,10 +81,11 @@ class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
- totalSize: products.length
+ totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
+
Load Another Data
@@ -50,10 +93,9 @@ class Table extends React.Component {
striped
hover
keyField="id"
- data={ products }
+ data={ this.state.products }
columns={ columns }
filter={ filterFactory() }
- cellEdit={ cellEditFactory() }
{ ...paginationTableProps }
/>
@@ -72,7 +114,6 @@ class Table extends React.Component {
>
{ contentTable }
-
{ sourceCode }
);
}
@@ -80,6 +121,12 @@ class Table extends React.Component {
`;
export default class Table extends React.Component {
+ state = { products }
+
+ loadData = () => {
+ this.setState({ products: productsQualityGenerator(40, 7) });
+ }
+
render() {
const options = {
custom: true,
@@ -94,10 +141,11 @@ export default class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
- totalSize: products.length
+ totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
+
Load Another Data
@@ -105,7 +153,7 @@ export default class Table extends React.Component {
striped
hover
keyField="id"
- data={ products }
+ data={ this.state.products }
columns={ columns }
filter={ filterFactory() }
{ ...paginationTableProps }
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index 67b2f6946..beea31b88 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -29,10 +29,10 @@ export const withOnSale = rows => rows.map((row) => {
return row;
});
-export const productsQualityGenerator = (quantity = 5) =>
+export const productsQualityGenerator = (quantity = 5, factor = 0) =>
Array.from({ length: quantity }, (value, index) => ({
- id: index,
- name: `Item name ${index}`,
+ id: index + factor,
+ name: `Item name ${index + factor}`,
quality: index % 3
}));
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index f54e3275e..e35711fd5 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -27,9 +27,8 @@ export default (
this.onFilter = this.onFilter.bind(this);
this.doFilter = this.doFilter.bind(this);
this.onExternalFilter = this.onExternalFilter.bind(this);
- this.state = {
- data: props.data
- };
+ this.data = props.data;
+ this.isEmitDataChange = false;
}
componentDidMount() {
@@ -39,13 +38,10 @@ export default (
}
componentWillReceiveProps(nextProps) {
- let nextData = nextProps.data;
- if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
- nextData = this.doFilter(nextProps);
+ // let nextData = nextProps.data;
+ if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
+ this.doFilter(nextProps, undefined, this.isEmitDataChange);
}
- this.setState({
- data: nextData
- });
}
onFilter(column, filterType, initialize = false) {
@@ -83,9 +79,7 @@ export default (
if (filter.props.onFilter) {
result = filter.props.onFilter(filterVal);
}
-
- result = this.doFilter(this.props, result);
- this.setState({ data: result });
+ this.doFilter(this.props, result);
};
}
@@ -95,21 +89,25 @@ export default (
};
}
- doFilter(props, customResult) {
+ doFilter(props, customResult, ignoreEmitDataChange = false) {
let result = customResult;
const { dataChangeListener, data, columns } = props;
result = result || filters(data, columns, _)(this.currFilters);
- if (dataChangeListener) {
+ this.data = result;
+ if (dataChangeListener && !ignoreEmitDataChange) {
+ this.isEmitDataChange = true;
dataChangeListener.emit('filterChanged', result.length);
+ } else {
+ this.isEmitDataChange = false;
+ this.forceUpdate();
}
- return result;
}
render() {
return (
{
expect(onFilter).toHaveBeenCalledWith(filterVal);
});
- it('should set state.data correctly', () => {
+ it('should set data correctly', () => {
instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
- expect(instance.state.data).toEqual(mockReturn);
+ expect(instance.data).toEqual(mockReturn);
});
});
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index 83fb4da39..3f616cbfd 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -50,9 +50,15 @@ class StateProvider extends React.Component {
// user should align the page when the page is not fit to the data size when remote enable
if (this.isRemotePagination() || custom) {
- this.currPage = nextProps.pagination.options.page;
- this.currSizePerPage = nextProps.pagination.options.sizePerPage;
- this.dataSize = nextProps.pagination.options.totalSize;
+ if (typeof nextProps.pagination.options.page !== 'undefined') {
+ this.currPage = nextProps.pagination.options.page;
+ }
+ if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
+ this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+ }
+ if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
+ this.dataSize = nextProps.pagination.options.totalSize;
+ }
}
}
From e44782f2224bfa7076679600bef26bcca76ef3d9 Mon Sep 17 00:00:00 2001
From: Norbert Nemeth
Date: Sat, 9 Mar 2019 11:46:04 +0100
Subject: [PATCH 077/250] fix #863 - expanded row column span does not update
(#837)
---
packages/react-bootstrap-table2/src/body.js | 3 +--
.../react-bootstrap-table2/src/row-expand/row-consumer.js | 4 ++--
2 files changed, 3 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/body.js b/packages/react-bootstrap-table2/src/body.js
index 2d445fc26..a14e1b8cd 100644
--- a/packages/react-bootstrap-table2/src/body.js
+++ b/packages/react-bootstrap-table2/src/body.js
@@ -17,7 +17,6 @@ class Body extends React.Component {
super(props);
const {
keyField,
- visibleColumnSize,
cellEdit,
selectRow,
expandRow
@@ -34,7 +33,7 @@ class Body extends React.Component {
const expandRowEnabled = !!expandRow.renderer;
if (expandRowEnabled) {
- RowComponent = withRowExpansion(RowAggregator, visibleColumnSize);
+ RowComponent = withRowExpansion(RowAggregator);
}
if (selectRowEnabled) {
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 77f5e36db..7578d6df6 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -3,7 +3,7 @@ import React from 'react';
import ExpandRow from './expand-row';
import ExpansionContext from '../contexts/row-expand-context';
-export default (Component, visibleColumnSize) => {
+export default (Component) => {
const renderWithExpansion = (props, expandRow) => {
const key = props.value;
@@ -20,7 +20,7 @@ export default (Component, visibleColumnSize) => {
/>,
expanded ?
{ expandRow.renderer(props.row) }
: null
From 4b8b8b261e7f31608b83a70411ac38c768485cff Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Mar 2019 22:31:24 +0800
Subject: [PATCH 078/250] update story
---
.../custom-page-list-with-search.js | 56 +++++++++++++------
1 file changed, 38 insertions(+), 18 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
index 87d5d74e7..257a25bd0 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js
@@ -7,7 +7,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
-const products = productsGenerator(21);
+const products = productsGenerator(40);
const { SearchBar } = Search;
const columns = [{
@@ -24,6 +24,12 @@ import paginationFactory, { PaginationProvider, PaginationListStandalone } from
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
class Table extends React.Component {
+ state = { products }
+
+ loadData = () => {
+ this.setState({ products: productsGenerator(17) });
+ }
+
render() {
const options = {
custom: true,
@@ -38,25 +44,32 @@ class Table extends React.Component {
firstPageTitle: 'Next page',
lastPageTitle: 'Last page',
showTotal: true,
- totalSize: products.length
+ totalSize: this.state.products.length
};
const contentTable = ({ paginationProps, paginationTableProps }) => (
+
Load Another Data
-
+
+ {
+ toolkitprops => (
+
+
+ )
+ }
+
+
Load Another Data
{
From 3af30a02659ad81b39952ce845af2abbf0cd71f4 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 9 Mar 2019 22:35:49 +0800
Subject: [PATCH 079/250] fix #840
---
.../examples/pagination/standalone-size-per-page.js | 1 +
.../src/size-per-page-dropdown-adapter.js | 1 +
2 files changed, 2 insertions(+)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
index e49b4f150..40526a212 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
@@ -84,6 +84,7 @@ export default class StandaloneSizePerPage extends React.Component {
}
return (
Date: Sat, 9 Mar 2019 23:01:21 +0800
Subject: [PATCH 080/250] fix #835
---
.../react-bootstrap-table2-paginator/README.md | 13 +++++++++++++
.../react-bootstrap-table2-toolkit/README.md | 17 +++++++++++++++++
2 files changed, 30 insertions(+)
diff --git a/packages/react-bootstrap-table2-paginator/README.md b/packages/react-bootstrap-table2-paginator/README.md
index ede90404d..e5dc52b16 100644
--- a/packages/react-bootstrap-table2-paginator/README.md
+++ b/packages/react-bootstrap-table2-paginator/README.md
@@ -190,6 +190,19 @@ import paginationFactory, {
That's it!! The benifit for using standalone is you can much easier to render the standalone component in any posistion. In the future, we will implement more featue like applying `style`, `className` etc on standalone components.
+##### Customizable props for `PaginationListStandalone`
+* N/A
+
+##### Customizable props for `SizePerPageDropdownStandalone`
+* `open`: `true` to make dropdown show.
+* `hidden`: `true` to hide the size per page dropdown.
+* `btnContextual`: Set the button contextual
+* `variation`: Variation for dropdown, available value is `dropdown` and `dropup`.
+* `className`: Custom the class on size per page dropdown
+
+##### Customizable props for `SizePerPageDropdownStandalone`
+* N/A
+
#### 4.2 Customization Everything
If you choose to custom the pagination component by yourself, the `paginationProps` will be important for you. Becasue you have to know for example how to change page or what's the current page etc. Hence, following is all the props in `paginationProps` object:
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index 78fb3a001..c85accc50 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -67,6 +67,19 @@ const { SearchBar } = Search;
3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you.
+### `SearchBar` Props
+#### className - [string]
+Custom the class on input element.
+
+#### placeholder - [string]
+Custom the placeholder on input element.
+
+#### style - [object]
+Custom the style on input element.
+
+#### delay = [number]
+milionsecond for debounce user input.
+
### Search Options
#### defaultSearch - [string]
@@ -127,6 +140,8 @@ const { SearchBar, ClearSearchButton } = Search;
```
+-----
+
## Export CSV
There are two steps to enable the export CSV functionality:
@@ -176,6 +191,8 @@ Default is `true`. `false` will only export current data which display on table.
#### onlyExportSelection - [bool]
Default is `false`. `true` will only export the data which is selected.
+-----
+
## Column Toggle
Let's see how to render the column toggle in your react component:
From 956f1cef4db45eea3f85b33085bdf93d89776c13 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 10 Mar 2019 13:38:21 +0800
Subject: [PATCH 081/250] Publish
- react-bootstrap-table2-example@1.0.20
- react-bootstrap-table2-filter@1.1.6
- react-bootstrap-table2-paginator@2.0.4
- react-bootstrap-table2-toolkit@1.3.2
- react-bootstrap-table-next@3.0.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index b15950e50..d197b493a 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.19",
+ "version": "1.0.20",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index ba6e2598a..32d0ab530 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.5",
+ "version": "1.1.6",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 43cad208f..5e7f8ec23 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.3",
+ "version": "2.0.4",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 742301107..d1a4261e8 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.3.1",
+ "version": "1.3.2",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index d091c2186..fb5814f9f 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.0.0",
+ "version": "3.0.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8f304a849f7840cfedcddf9e5ee7143788adc74a Mon Sep 17 00:00:00 2001
From: Yassien <11986226+YassienW@users.noreply.github.com>
Date: Sat, 16 Mar 2019 19:03:22 +0200
Subject: [PATCH 082/250] Animation now works with custom expand management
---
.../src/contexts/row-expand-context.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index ba21d12a7..601c338e4 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -17,8 +17,16 @@ class RowExpandProvider extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
+ const isClosing = this.state.expanded.reduce((acc, cur) => {
+ if (!nextProps.expandRow.expanded.includes(cur)) {
+ acc.push(cur);
+ }
+ return acc;
+ }, []);
+ this.setState(() => ({ expanded: nextProps.expandRow.expanded, isClosing }));
+ } else {
this.setState(() => ({
- expanded: nextProps.expandRow.expanded || this.state.expanded
+ expanded: this.state.expanded
}));
}
}
From 7642bfa1a343705238238155f460dab5e0137886 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 Mar 2019 13:29:17 +0800
Subject: [PATCH 083/250] fix #849
---
packages/react-bootstrap-table2-filter/src/context.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index e35711fd5..78b73d151 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -41,6 +41,8 @@ export default (
// let nextData = nextProps.data;
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
this.doFilter(nextProps, undefined, this.isEmitDataChange);
+ } else {
+ this.data = nextProps.data;
}
}
From f80e1ea66c8529e7b6589c6423454092923d0906 Mon Sep 17 00:00:00 2001
From: henning-kvinnesland
<39047273+henning-kvinnesland@users.noreply.github.com>
Date: Sun, 17 Mar 2019 06:30:21 +0100
Subject: [PATCH 084/250] Fix typo. (#856)
`chagne` => `change`
---
docs/row-expand.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/row-expand.md b/docs/row-expand.md
index 025d03d41..08198fad7 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -2,7 +2,7 @@
# Row expand
`react-bootstrap-table2` supports the row expand feature. By passing prop `expandRow` to enable this functionality.
-> Default is click to expand/collapse a row. In addition, we don't support any way to chagne this mechanism!
+> Default is click to expand/collapse a row. In addition, we don't support any way to change this mechanism!
## Required
* [renderer (**required**)](#renderer)
From b93c683f176d05f2c9113210b9c6b0e196c7c859 Mon Sep 17 00:00:00 2001
From: henning-kvinnesland
<39047273+henning-kvinnesland@users.noreply.github.com>
Date: Sun, 17 Mar 2019 06:30:35 +0100
Subject: [PATCH 085/250] Fix typo. (#855)
`to cusom the sort caret` => `to customize the sort-caret`
---
docs/columns.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/columns.md b/docs/columns.md
index 3474e6d3a..55a4003e6 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -164,7 +164,7 @@ Enable the column sort via a `true` value given.
```
## column.sortCaret - [Function]
-Use`column.sortCaret` to custom the sort caret. This callback function accept two arguments: `order` and `column`
+Use`column.sortCaret` to customize the sort caret. This callback function accept two arguments: `order` and `column`
```js
{
From d0e70f72460c807b900d5462c23a8dc8f468c3c8 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 Mar 2019 14:42:33 +0800
Subject: [PATCH 086/250] fix #852
---
.../examples/csv/export-only-filtered.js | 102 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/context.js | 4 +
.../react-bootstrap-table2-toolkit/README.md | 5 +
.../react-bootstrap-table2-toolkit/context.js | 1 +
.../src/op/csv.js | 7 +-
.../src/search/context.js | 4 +
.../src/contexts/index.js | 9 ++
8 files changed, 133 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js
diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js b/packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js
new file mode 100644
index 000000000..b5b9af186
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/csv/export-only-filtered.js
@@ -0,0 +1,102 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator(150);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const { SearchBar } = Search;
+const { ExportCSVButton } = CSVExport;
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+
+ {
+ props => (
+
+ Export CSV!!
+
+`;
+
+export default () => (
+
+
Export all the filtered/searched rows
+
+ {
+ props => (
+
+ Export CSV!!
+
+
{ sourceCode }
+
Date: Sun, 17 Mar 2019 16:30:39 +0800
Subject: [PATCH 087/250] fix #817
---
packages/react-bootstrap-table2/src/row/should-updater.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/row/should-updater.js b/packages/react-bootstrap-table2/src/row/should-updater.js
index 813dbb5dd..bcef92e71 100644
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -8,7 +8,8 @@ export default ExtendBase =>
return (
nextProps.editingRowIdx === nextProps.rowIndex ||
(this.props.editingRowIdx === nextProps.rowIndex &&
- nextProps.editingRowIdx === null)
+ nextProps.editingRowIdx === null) ||
+ this.props.editingRowIdx === nextProps.rowIndex
);
}
From 06d87299a3b08b7e110b78a042da5d6b610fc530 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 18 Mar 2019 00:31:24 +0800
Subject: [PATCH 088/250] Publish
- react-bootstrap-table2-example@1.0.21
- react-bootstrap-table2-filter@1.1.7
- react-bootstrap-table2-toolkit@1.4.0
- react-bootstrap-table-next@3.0.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index d197b493a..4be3b2f27 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.20",
+ "version": "1.0.21",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 32d0ab530..f4f95f04a 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.6",
+ "version": "1.1.7",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index d1a4261e8..0b00d98ef 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.3.2",
+ "version": "1.4.0",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index fb5814f9f..214fbb93e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.0.1",
+ "version": "3.0.2",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From a6ccafcc75b96e040dd4bc02bf9557f210935216 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Mar 2019 16:55:56 +0800
Subject: [PATCH 089/250] fix #866
---
packages/react-bootstrap-table2/src/row/should-updater.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/row/should-updater.js b/packages/react-bootstrap-table2/src/row/should-updater.js
index bcef92e71..c61ae5e15 100644
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -27,7 +27,7 @@ export default ExtendBase =>
return true;
}
for (let i = 0; i < this.props.columns.length; i += 1) {
- if (this.props.columns[i].hidden !== nextProps.columns[i].hidden) {
+ if (!_.isEqual(this.props.columns[i], nextProps.columns[i])) {
return true;
}
}
From 7f1b7a6c9777159ba5957d1f2b6b3e8df3496ca2 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 24 Mar 2019 20:52:26 +0800
Subject: [PATCH 090/250] fix #838
---
.../src/page-resolver.js | 32 +++++++++++++++----
1 file changed, 25 insertions(+), 7 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index b9134d956..9afbc53eb 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -56,7 +56,7 @@ export default ExtendBase =>
alwaysShowAllBtns
} = this.props;
- let pages;
+ let pages = [];
let endPage = totalPages;
if (endPage <= 0) return [];
@@ -68,24 +68,42 @@ export default ExtendBase =>
startPage = endPage - paginationSize + 1;
}
- if (startPage !== pageStartIndex && totalPages > paginationSize && withFirstAndLast) {
+ if (alwaysShowAllBtns) {
+ if (withFirstAndLast) {
+ pages = [firstPageText, prePageText];
+ } else {
+ pages = [prePageText];
+ }
+ }
+
+ if (startPage !== pageStartIndex &&
+ totalPages > paginationSize &&
+ withFirstAndLast &&
+ pages.length === 0
+ ) {
pages = [firstPageText, prePageText];
- } else if (totalPages > 1 || alwaysShowAllBtns) {
+ } else if (totalPages > 1 && pages.length === 0) {
pages = [prePageText];
- } else {
- pages = [];
}
for (let i = startPage; i <= endPage; i += 1) {
if (i >= pageStartIndex) pages.push(i);
}
- if (endPage <= lastPage && pages.length > 1) {
+ if (alwaysShowAllBtns || (endPage <= lastPage && pages.length > 1)) {
pages.push(nextPageText);
}
- if (endPage !== lastPage && withFirstAndLast) {
+ if ((endPage !== lastPage && withFirstAndLast) || (withFirstAndLast && alwaysShowAllBtns)) {
pages.push(lastPageText);
}
+
+ // if ((endPage <= lastPage && pages.length > 1) || alwaysShowAllBtns) {
+ // pages.push(nextPageText);
+ // }
+ // if (endPage !== lastPage && withFirstAndLast) {
+ // pages.push(lastPageText);
+ // }
+
return pages;
}
From 196ae3329585ebb7e4623a21657293a18435e71c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 25 Mar 2019 23:07:22 +0800
Subject: [PATCH 091/250] fix #859
---
.../examples/columns/dummy-column-table.js | 301 ++++++++++--------
packages/react-bootstrap-table2/src/cell.js | 2 +-
2 files changed, 168 insertions(+), 135 deletions(-)
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
index 10b694861..2e76f0849 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/dummy-column-table.js
@@ -11,141 +11,13 @@ const products = [
{ 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 };
+ this.state = { products, count: 0 };
}
toggleInStock = () => {
@@ -163,17 +35,96 @@ class ProductList extends React.Component {
};
render() {
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ formatter: (cell, row, rowIndex, extraData) => (
+
+ ID: {row.id}
+ state: {extraData}
+
+ ),
+ formatExtraData: this.state.count
+ },
+ {
+ 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
+
+ );
+ }
+ }
+ ];
+
return (
-
Products
+ Action 1 and Action 2 are dummy column
+
+ Toggle item 13 stock status
+
+ this.setState(() => ({ count: this.state.count + 1 })) }
+ >
+ Click me to Increase counter
+
- Toggle item 13 stock status
-
+ { sourceCode }
);
}
@@ -183,7 +134,7 @@ class ProductList extends React.Component {
class ProductList extends React.Component {
constructor(props) {
super(props);
- this.state = { products };
+ this.state = { products, count: 0 };
}
toggleInStock = () => {
@@ -200,13 +151,95 @@ class ProductList extends React.Component {
this.setState(curr => ({ ...curr, products: newProducts }));
};
+ counter = () => {
+ this.setState(curr => ({ ...curr, count: this.state.count + 1 }));
+ }
+
render() {
+ const columns = [
+ {
+ dataField: 'id',
+ text: 'Product ID',
+ formatter: (cell, row, rowIndex, extraData) => (
+
+ ID: {row.id}
+ Counter: {extraData}
+
+ ),
+ formatExtraData: this.state.count
+ },
+ {
+ 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
+
+ );
+ }
+ }
+ ];
+
return (
Action 1 and Action 2 are dummy column
Toggle item 13 stock status
+
+ Click me to Increase counter
+
Date: Tue, 26 Mar 2019 20:41:04 +0800
Subject: [PATCH 092/250] Publish
- react-bootstrap-table2-example@1.0.22
- react-bootstrap-table2-paginator@2.0.5
- react-bootstrap-table-next@3.0.3
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 4be3b2f27..c244ccec2 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.21",
+ "version": "1.0.22",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 5e7f8ec23..a252f5bbc 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.4",
+ "version": "2.0.5",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 214fbb93e..61e0c183e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.0.2",
+ "version": "3.0.3",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 0edf9c88912db030745b3efcb9fec1929b7652e2 Mon Sep 17 00:00:00 2001
From: Alek Lefebvre
Date: Sun, 31 Mar 2019 03:17:57 -0400
Subject: [PATCH 093/250] fix #808 (#874)
---
packages/react-bootstrap-table2-editor/README.md | 10 +++++-----
.../examples/cell-edit/date-editor-table.js | 4 ++--
.../src/components/date.js | 2 +-
packages/react-bootstrap-table2-filter/src/filter.js | 12 ++++++------
4 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
index 55d6c1d60..f5d98aa98 100644
--- a/packages/react-bootstrap-table2-editor/README.md
+++ b/packages/react-bootstrap-table2-editor/README.md
@@ -132,7 +132,7 @@ const columns = [
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
},
editor: {
type: Type.DATE
@@ -173,16 +173,16 @@ If you feel above predefined editors are not satisfied to your requirement, you
* `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc.
* `value`: Current cell value
-* `row`: Current row data
-* `column`: Current column definition
-* `rowIndex`: Current row index
+* `row`: Current row data
+* `column`: Current column definition
+* `rowIndex`: Current row index
* `columnIndex`: Current column index
> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor
> Note when you want to save value, you can call **editorProps.onUpdate** function
-Following is a short example:
+Following is a short example:
```js
class QualityRanger extends React.Component {
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
index d166c941a..465970d23 100644
--- a/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/date-editor-table.js
@@ -23,7 +23,7 @@ const columns = [{
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return `${('0' + dateObj.getDate()).slice(-2)}/${('0' + (dateObj.getMonth() + 1)).slice(-2)}/${dateObj.getFullYear()}`;
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
},
editor: {
type: Type.DATE
@@ -48,7 +48,7 @@ const columns = [{
if (typeof cell !== 'object') {
dateObj = new Date(cell);
}
- return \`$\{('0' + dateObj.getDate()).slice(-2)}/$\{('0' + (dateObj.getMonth() + 1)).slice(-2)}/$\{dateObj.getFullYear()}\`;
+ return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
},
editor: {
type: Type.DATE
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 5a6b1aa59..45717ae9d 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -18,7 +18,7 @@ const legalComparators = [
];
function dateParser(d) {
- return `${d.getFullYear()}-${('0' + (d.getMonth() + 1)).slice(-2)}-${('0' + d.getDate()).slice(-2)}`;
+ return `${d.getUTCFullYear()}-${('0' + (d.getUTCMonth() + 1)).slice(-2)}-${('0' + d.getUTCDate()).slice(-2)}`;
}
class DateFilter extends Component {
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 07454c4cb..de615770e 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -98,9 +98,9 @@ export const filterByDate = _ => (
customFilterValue
) => {
if (!date || !comparator) return data;
- const filterDate = date.getDate();
- const filterMonth = date.getMonth();
- const filterYear = date.getFullYear();
+ const filterDate = date.getUTCDate();
+ const filterMonth = date.getUTCMonth();
+ const filterYear = date.getUTCFullYear();
return data.filter((row) => {
let valid = true;
@@ -114,9 +114,9 @@ export const filterByDate = _ => (
cell = new Date(cell);
}
- const targetDate = cell.getDate();
- const targetMonth = cell.getMonth();
- const targetYear = cell.getFullYear();
+ const targetDate = cell.getUTCDate();
+ const targetMonth = cell.getUTCMonth();
+ const targetYear = cell.getUTCFullYear();
switch (comparator) {
From 9f47fa009c2b1266e152d08b4a48c201233e58fa Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 31 Mar 2019 15:33:43 +0800
Subject: [PATCH 094/250] lock version
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 72a3170ec..10c281ae1 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,7 +37,7 @@
],
"dependencies": {
"classnames": "2.2.5",
- "react-transition-group": "^2.5.3",
+ "react-transition-group": "2.5.3",
"underscore": "1.9.1"
},
"peerDependencies": {
From 497bf44192a99a0a6612317200aa940d0f1a12ab Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Tue, 2 Apr 2019 21:33:49 +0800
Subject: [PATCH 095/250] Publish
- react-bootstrap-table2-editor@1.2.3
- react-bootstrap-table2-example@1.0.23
- react-bootstrap-table2-filter@1.1.8
- react-bootstrap-table-next@3.1.0
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index c072c6f88..23d18370f 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.2.2",
+ "version": "1.2.3",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index c244ccec2..bc76bb71b 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.22",
+ "version": "1.0.23",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index f4f95f04a..465662f55 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.7",
+ "version": "1.1.8",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index f6c22a554..c85cc55ff 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.0.3",
+ "version": "3.1.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 955ee17939d88deefc8a8bfb8ac7066e87d64ac9 Mon Sep 17 00:00:00 2001
From: Jay Staudt
Date: Tue, 2 Apr 2019 14:09:20 -0400
Subject: [PATCH 096/250] wrap filter components with labels and hidden text
---
.../src/components/date.js | 44 +++++++++++--------
.../src/components/multiselect.js | 28 +++++++-----
.../src/components/number.js | 38 ++++++++++------
.../src/components/select.js | 26 ++++++-----
.../src/components/text.js | 26 ++++++-----
5 files changed, 97 insertions(+), 65 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 45717ae9d..a2d1b442a 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,24 +132,32 @@ class DateFilter extends Component {
className={ `filter date-filter ${className}` }
style={ style }
>
- this.dateFilterComparator = n }
- style={ comparatorStyle }
- className={ `date-filter-comparator form-control ${comparatorClassName}` }
- onChange={ this.onChangeComparator }
- defaultValue={ defaultValue ? defaultValue.comparator : '' }
- >
- { this.getComparatorOptions() }
-
-
+ Filter comparator
+ this.dateFilterComparator = n }
+ id={`date-filter-comparator-${ column.text }`}
+ style={ comparatorStyle }
+ className={ `date-filter-comparator form-control ${comparatorClassName}` }
+ onChange={ this.onChangeComparator }
+ defaultValue={ defaultValue ? defaultValue.comparator : '' }
+ >
+ { this.getComparatorOptions() }
+
+
+
+ Enter ${ column.text }
+
);
}
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 5f4623bd1..8d658ca7e 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -111,18 +111,22 @@ class MultiSelectFilter extends Component {
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
return (
- this.selectInput = n }
- style={ style }
- multiple
- className={ selectClass }
- onChange={ this.filter }
- onClick={ e => e.stopPropagation() }
- defaultValue={ defaultValue !== undefined ? defaultValue : '' }
- >
- { this.getOptions() }
-
+
+ Filter by {column.text}
+ this.selectInput = n }
+ id={`multiselect-filter-column-${column.text}`}
+ style={ style }
+ multiple
+ className={ selectClass }
+ onChange={ this.filter }
+ onClick={ e => e.stopPropagation() }
+ defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+ >
+ { this.getOptions() }
+
+
);
}
}
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 447eed20d..5968b621c 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,38 +170,50 @@ class NumberFilter extends Component {
return (
e.stopPropagation() }
- className={ `filter number-filter ${className}` }
+ className={`filter number-filter ${className}`}
style={ style }
>
- this.numberFilterComparator = n }
- style={ comparatorStyle }
- className={ `number-filter-comparator form-control ${comparatorClassName}` }
- onChange={ this.onChangeComparator }
- defaultValue={ defaultValue ? defaultValue.comparator : '' }
- >
- { this.getComparatorOptions() }
-
+
+ Filter comparator
+ this.numberFilterComparator = n }
+ style={ comparatorStyle }
+ id={`number-filter-comparator-${ column.text }`}
+ className={`number-filter-comparator form-control ${comparatorClassName}`}
+ onChange={ this.onChangeComparator }
+ defaultValue={ defaultValue ? defaultValue.comparator : '' }
+ >
+ { this.getComparatorOptions() }
+
+
{
- options ?
+ options ?
+
+ {`Select ${column.text}`}
this.numberFilter = n }
+ id={`number-filter-column-${ column.text }`}
style={ numberStyle }
className={ selectClass }
onChange={ this.onChangeNumberSet }
defaultValue={ defaultValue ? defaultValue.number : '' }
>
{ this.getNumberOptions() }
- :
+
+ :
+
+ {`Enter ${ column.text }`}
}
);
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 973bdb31b..c9089b74b 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,17 +136,21 @@ class SelectFilter extends Component {
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
return (
- this.selectInput = n }
- style={ style }
- className={ selectClass }
- onChange={ this.filter }
- onClick={ e => e.stopPropagation() }
- defaultValue={ defaultValue !== undefined ? defaultValue : '' }
- >
- { this.getOptions() }
-
+
+ Filter by { column.text }
+ this.selectInput = n }
+ id={`select-filter-column-${ column.text }`}
+ style={ style }
+ className={ selectClass }
+ onChange={ this.filter }
+ onClick={ e => e.stopPropagation() }
+ defaultValue={ defaultValue !== undefined ? defaultValue : '' }
+ >
+ { this.getOptions() }
+
+
);
}
}
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index a17c3ea05..f76d07f99 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -94,17 +94,21 @@ class TextFilter extends Component {
// stopPropagation for onClick event is try to prevent sort was triggered.
return (
-
+ Filter by {text}
+
);
}
}
From ba7512969e026df3c8b48e1389f8225c300c6b87 Mon Sep 17 00:00:00 2001
From: Jay Staudt
Date: Tue, 2 Apr 2019 14:09:53 -0400
Subject: [PATCH 097/250] add non-redundant titles to page buttons
---
packages/react-bootstrap-table2-paginator/src/page-button.js | 2 +-
.../react-bootstrap-table2-paginator/test/page-button.test.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index e2834ee47..94a4d6d77 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -30,7 +30,7 @@ class PageButton extends Component {
}, className);
return (
-
+
{ page }
);
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 4e3d800ba..25c51d6fd 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
const title = 'aTitle';
beforeEach(() => {
wrapper = shallow(
-
Date: Tue, 2 Apr 2019 14:10:14 -0400
Subject: [PATCH 098/250] wrap search bar with label and hidden text
---
.../src/search/SearchBar.js | 33 +++++++++++--------
1 file changed, 20 insertions(+), 13 deletions(-)
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index f51f09c9d..9ade3094b 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -54,20 +54,25 @@ class SearchBar extends React.Component {
const {
className,
style,
- placeholder
+ placeholder,
+ tableId,
} = this.props;
return (
-
+ Search this table
+
);
}
}
@@ -78,7 +83,8 @@ SearchBar.propTypes = {
placeholder: PropTypes.string,
style: PropTypes.object,
delay: PropTypes.number,
- searchText: PropTypes.string
+ searchText: PropTypes.string,
+ tableId: PropTypes.string
};
SearchBar.defaultProps = {
@@ -86,7 +92,8 @@ SearchBar.defaultProps = {
style: {},
placeholder: 'Search',
delay: 250,
- searchText: ''
+ searchText: '',
+ tableId: 0
};
export default SearchBar;
From 1a1f6969cb898d0a5f5d01b8e6c64e7759d5bf68 Mon Sep 17 00:00:00 2001
From: Jay Staudt
Date: Tue, 2 Apr 2019 14:42:47 -0400
Subject: [PATCH 099/250] adjustments via eslint
---
.../src/components/date.js | 10 +--
.../src/components/multiselect.js | 4 +-
.../src/components/number.js | 62 +++++++++----------
.../src/components/select.js | 4 +-
.../src/components/text.js | 4 +-
.../src/page-button.js | 2 +-
.../test/page-button.test.js | 2 +-
.../src/search/SearchBar.js | 8 +--
8 files changed, 48 insertions(+), 48 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index a2d1b442a..25a7fddcd 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,11 +132,11 @@ class DateFilter extends Component {
className={ `filter date-filter ${className}` }
style={ style }
>
-
+
Filter comparator
this.dateFilterComparator = n }
- id={`date-filter-comparator-${ column.text }`}
+ id={ `date-filter-comparator-${text}` }
style={ comparatorStyle }
className={ `date-filter-comparator form-control ${comparatorClassName}` }
onChange={ this.onChangeComparator }
@@ -145,11 +145,11 @@ class DateFilter extends Component {
{ this.getComparatorOptions() }
-
- Enter ${ column.text }
+
+ Enter ${ text }
+
Filter by {column.text}
this.selectInput = n }
- id={`multiselect-filter-column-${column.text}`}
+ id={ `multiselect-filter-column-${column.text}` }
style={ style }
multiple
className={ selectClass }
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 5968b621c..843a06bb6 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,16 +170,16 @@ class NumberFilter extends Component {
return (
e.stopPropagation() }
- className={`filter number-filter ${className}`}
+ className={ `filter number-filter ${className}` }
style={ style }
>
-
+
Filter comparator
this.numberFilterComparator = n }
style={ comparatorStyle }
- id={`number-filter-comparator-${ column.text }`}
- className={`number-filter-comparator form-control ${comparatorClassName}`}
+ id={ `number-filter-comparator-${column.text}` }
+ className={ `number-filter-comparator form-control ${comparatorClassName}` }
onChange={ this.onChangeComparator }
defaultValue={ defaultValue ? defaultValue.comparator : '' }
>
@@ -187,33 +187,33 @@ class NumberFilter extends Component {
{
- options ?
-
- {`Select ${column.text}`}
- this.numberFilter = n }
- id={`number-filter-column-${ column.text }`}
- style={ numberStyle }
- className={ selectClass }
- onChange={ this.onChangeNumberSet }
- defaultValue={ defaultValue ? defaultValue.number : '' }
- >
- { this.getNumberOptions() }
-
- :
-
- {`Enter ${ column.text }`}
-
+ options ?
+
+ {`Select ${column.text}`}
+ this.numberFilter = n }
+ id={ `number-filter-column-${column.text}` }
+ style={ numberStyle }
+ className={ selectClass }
+ onChange={ this.onChangeNumberSet }
+ defaultValue={ defaultValue ? defaultValue.number : '' }
+ >
+ { this.getNumberOptions() }
+
+ :
+
+ {`Enter ${column.text}`}
+
}
);
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index c9089b74b..b2d69736b 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,12 +136,12 @@ class SelectFilter extends Component {
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
return (
-
+
Filter by { column.text }
this.selectInput = n }
- id={`select-filter-column-${ column.text }`}
+ id={ `select-filter-column-${column.text}` }
style={ style }
className={ selectClass }
onChange={ this.filter }
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index f76d07f99..a4268c462 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -94,13 +94,13 @@ class TextFilter extends Component {
// stopPropagation for onClick event is try to prevent sort was triggered.
return (
-
+
Filter by {text}
+
{ page }
);
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 25c51d6fd..087b270a3 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
const title = 'aTitle';
beforeEach(() => {
wrapper = shallow(
-
- Search this table
+
+ Search this table
Date: Tue, 2 Apr 2019 14:53:52 -0400
Subject: [PATCH 100/250] revert page-button title
---
packages/react-bootstrap-table2-paginator/src/page-button.js | 2 +-
.../react-bootstrap-table2-paginator/test/page-button.test.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index c81b8e226..e2834ee47 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -30,7 +30,7 @@ class PageButton extends Component {
}, className);
return (
-
+
{ page }
);
diff --git a/packages/react-bootstrap-table2-paginator/test/page-button.test.js b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
index 087b270a3..4e3d800ba 100644
--- a/packages/react-bootstrap-table2-paginator/test/page-button.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/page-button.test.js
@@ -105,7 +105,7 @@ describe('PageButton', () => {
const title = 'aTitle';
beforeEach(() => {
wrapper = shallow(
-
Date: Sun, 7 Apr 2019 14:03:42 +0800
Subject: [PATCH 103/250] no inline-block on label element
---
.../.storybook/webpack.config.js | 9 ++++++++-
.../react-bootstrap-table2-example/stories/index.js | 1 +
.../src/components/date.js | 5 ++++-
.../src/components/multiselect.js | 5 ++++-
.../src/components/number.js | 10 ++++++++--
.../src/components/select.js | 5 ++++-
.../src/components/text.js | 5 ++++-
.../style/react-bootstrap-table2-filter.scss | 4 ++++
.../src/search/SearchBar.js | 5 ++++-
.../style/react-bootstrap-table2-toolkit.scss | 3 +++
10 files changed, 44 insertions(+), 8 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
index a3995c834..75e6df681 100644
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
const storyPath = path.join(__dirname, '../stories');
const examplesPath = path.join(__dirname, '../examples');
const srcPath = path.join(__dirname, '../src');
@@ -43,7 +44,13 @@ const loaders = [{
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
- include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+ include: [
+ storyPath,
+ sourceStylePath,
+ paginationStylePath,
+ filterStylePath,
+ toolkitStylePath
+ ],
}, {
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000',
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 9fc20d1e6..d35cbcbbd 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -229,6 +229,7 @@ import 'stories/stylesheet/storybook.scss';
import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';
// import bootstrap style by given version
import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 25a7fddcd..578f55829 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -132,7 +132,10 @@ class DateFilter extends Component {
className={ `filter date-filter ${className}` }
style={ style }
>
-
+
Filter comparator
this.dateFilterComparator = n }
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index e4c1f3ea6..2de86f9d6 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -111,7 +111,10 @@ class MultiSelectFilter extends Component {
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
return (
-
+
Filter by {column.text}
-
+
Filter comparator
this.numberFilterComparator = n }
@@ -188,7 +191,10 @@ class NumberFilter extends Component {
{
options ?
-
+
{`Select ${column.text}`}
this.numberFilter = n }
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index b2d69736b..3f7471be0 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -136,7 +136,10 @@ class SelectFilter extends Component {
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
return (
-
+
Filter by { column.text }
+
Filter by {text}
+
Search this table
Date: Sun, 7 Apr 2019 14:31:43 +0800
Subject: [PATCH 104/250] optimize selection option equals
---
.../react-bootstrap-table2-filter/src/components/select.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 4c486b39a..db5348a2c 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -17,8 +17,9 @@ function optionsEquals(currOpts, prevOpts) {
return false;
}
}
+ return true;
}
- return currOpts.length === prevOpts.length;
+ return false;
}
const keys = Object.keys(currOpts);
for (let i = 0; i < keys.length; i += 1) {
From 363a43251ffc99cd54a2c4e89ee271ad8501e407 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 7 Apr 2019 16:49:03 +0800
Subject: [PATCH 105/250] fix #891
---
docs/README.md | 17 ++
.../examples/data/data-change-listener.js | 151 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/data-context.js | 3 +
.../src/bootstrap-table.js | 9 ++
.../src/contexts/index.js | 1 +
6 files changed, 183 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/data/data-change-listener.js
diff --git a/docs/README.md b/docs/README.md
index 3fc1c5828..dc12d3aeb 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -33,6 +33,7 @@
* [pagination](#pagination)
* [filter](#filter)
* [onTableChange](#onTableChange)
+* [onDataSizeChange](#onDataSizeChange)
### keyField(**required**) - [String]
Tells `react-bootstrap-table2` which column is unique.
@@ -317,4 +318,20 @@ Following is a shape of `newState`
newValue
}
}
+```
+
+### onDataSizeChange - [Function]
+This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
+
+* `dataSize`: The new data size
+
+```js
+handleDataChange = ({ dataSize }) => {
+ this.setState({ rowCount: dataSize });
+}
+
+
+
Row Count:{ this.state.rowCount }
+ { sourceCode }
+
+ );
+ }
+`;
+
+const sourceCode2 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+class Case2 extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { rowCount: products.length };
+ }
+
+ handleDataChange = ({ dataSize }) => {
+ this.setState({ rowCount: dataSize });
+ }
+
+ render() {
+ return (
+
+
Row Count:{ this.state.rowCount }
+ { sourceCode }
+
+ );
+ }
+`;
+
+const products1 = productsGenerator(8);
+class WithoutPaginationCase extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { rowCount: products1.length };
+ }
+
+ handleDataChange = ({ dataSize }) => {
+ this.setState({ rowCount: dataSize });
+ }
+
+ render() {
+ return (
+
+
Without Pagination Case
+ Row Count:{ this.state.rowCount }
+ { sourceCode2 }
+
+ );
+ }
+}
+
+const products2 = productsGenerator(88);
+class WithPaginationCase extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { rowCount: products2.length };
+ }
+
+ handleDataChange = ({ dataSize }) => {
+ this.setState({ rowCount: dataSize });
+ }
+
+ render() {
+ return (
+
+
Without Pagination Case
+ Row Count:{ this.state.rowCount }
+ { sourceCode1 }
+
+ );
+ }
+}
+
+export default () => (
+
+
+);
+
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index d35cbcbbd..9bd79b81b 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -217,6 +217,7 @@ import RemoteCellEdit from 'examples/remote/remote-celledit';
import RemoteAll from 'examples/remote/remote-all';
// data
+import DataChangeListener from 'examples/data/data-change-listener';
import LoadDataWithFilter from 'examples/data/load-data-on-the-fly-with-filter';
import LoadDataWithDefaultFilter from 'examples/data/load-data-on-the-fly-with-default-filter';
import LoadDataWithSearch from 'examples/data/load-data-on-the-fly-with-search';
@@ -467,6 +468,7 @@ storiesOf('Remote', module)
storiesOf('Data', module)
.addDecorator(bootstrapStyle())
+ .add('Data Change Listener', () =>
{
From 160dede41254f4d47aa985cfda720271ad784270 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 7 Apr 2019 17:33:00 +0800
Subject: [PATCH 106/250] fix #898
---
.../src/contexts/row-expand-context.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 601c338e4..0c4789aa8 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -17,13 +17,17 @@ class RowExpandProvider extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
+ const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
const isClosing = this.state.expanded.reduce((acc, cur) => {
- if (!nextProps.expandRow.expanded.includes(cur)) {
+ if (!nextExpanded.includes(cur)) {
acc.push(cur);
}
return acc;
}, []);
- this.setState(() => ({ expanded: nextProps.expandRow.expanded, isClosing }));
+ this.setState(() => ({
+ expanded: nextExpanded,
+ isClosing
+ }));
} else {
this.setState(() => ({
expanded: this.state.expanded
From e2e6c51d40a2fd78ec9fdd42c8e5b9ec0646b78a Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 15 Apr 2019 19:45:38 +0800
Subject: [PATCH 107/250] Publish
- react-bootstrap-table2-example@1.0.24
- react-bootstrap-table2-filter@1.1.9
- react-bootstrap-table2-paginator@2.0.6
- react-bootstrap-table2-toolkit@1.4.1
- react-bootstrap-table-next@3.1.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index bc76bb71b..f8306b295 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.23",
+ "version": "1.0.24",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 465662f55..08bc8a8bb 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.8",
+ "version": "1.1.9",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index a252f5bbc..bdb0c22d5 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.5",
+ "version": "2.0.6",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 0b00d98ef..d5fcf969d 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.4.0",
+ "version": "1.4.1",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index c85cc55ff..32f7e8e2e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.0",
+ "version": "3.1.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8fa10e3b6f3d4b440fe70c292a821e58c166689c Mon Sep 17 00:00:00 2001
From: Utkarsh Gupta <2012uec1641@mnit.ac.in>
Date: Sat, 27 Apr 2019 11:07:09 +0530
Subject: [PATCH 108/250] Added missed attribute (#913)
You missed 'onlyOneExpanding: true' in the source code.
---
.../examples/row-expand/expand-only-one.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js
index 4ef5bc415..c3033760c 100644
--- a/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/expand-only-one.js
@@ -43,6 +43,7 @@ const columns = [{
}];
const expandRow = {
+ onlyOneExpanding: true,
renderer: row => (
{ \`This Expand row is belong to rowKey $\{row.id}\` }
From 067006eb72e0434ad51cc5c88d5f7d1b67bd3a83 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 13:46:24 +0800
Subject: [PATCH 109/250] fix #920
---
.../examples/basic/exposed-function.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js b/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js
index 6ea656d2a..562ae4872 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/exposed-function.js
@@ -45,8 +45,12 @@ class ExposedFunctionTable extends React.Component {
console.log(this.node.table.props.data);
}
+ handleGetCurrentData = () => {
+ console.log(this.node.table.props.data);
+ }
+
handleGetSelectedData = () => {
- console.log(this.node.selectionContext.state.selected);
+ console.log(this.node.selectionContext.selected);
}
handleGetExpandedData = () => {
@@ -117,7 +121,7 @@ export default class ExposedFunctionTable extends React.Component {
}
handleGetSelectedData = () => {
- console.log(this.node.selectionContext.state.selected);
+ console.log(this.node.selectionContext.selected);
}
handleGetExpandedData = () => {
From ce7e05d7f9644318bfc3ae3d4fad5753f8410df8 Mon Sep 17 00:00:00 2001
From: Kirill
Date: Sat, 27 Apr 2019 08:53:47 +0300
Subject: [PATCH 110/250] Fix default prop tableId for SearchBar (#914)
---
packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index 64e148fd8..b95092b78 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -96,7 +96,7 @@ SearchBar.defaultProps = {
placeholder: 'Search',
delay: 250,
searchText: '',
- tableId: 0
+ tableId: '0'
};
export default SearchBar;
From 0f37fae23d9c038299de7a1f17b08f91fcabc4da Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 14:32:09 +0800
Subject: [PATCH 111/250] fix #899
---
docs/row-selection.md | 26 ++++
.../examples/row-selection/header-style.js | 111 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 3 +-
.../row-selection/selection-header-cell.js | 16 ++-
5 files changed, 155 insertions(+), 3 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/header-style.js
diff --git a/docs/row-selection.md b/docs/row-selection.md
index b72ceea6f..4615a4336 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -20,6 +20,7 @@
* [hideSelectAll](#hideSelectAll)
* [selectionRenderer](#selectionRenderer)
* [selectionHeaderRenderer](#selectionHeaderRenderer)
+* [headerColumnStyle](#headerColumnStyle)
### selectRow.mode - [String]
@@ -198,6 +199,31 @@ const selectRow = {
> By default, `react-bootstrap-table2` will help you to handle the click event, it's not necessary to handle again by developer.
+
+### selectRow.headerColumnStyle - [Object | Function]
+A way to custome the selection header cell. `headerColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ headerColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ headerColumnStyle: (status) => (
+ // status available value is checked, indeterminate and unchecked
+ return { backgroundColor: 'blue' };
+ )
+};
+```
+
### selectRow.onSelect - [Function]
This callback function will be called when a row is select/unselect and pass following three arguments:
`row`, `isSelect`, `rowIndex` and `e`.
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/header-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/header-style.js
new file mode 100644
index 000000000..5db7718fa
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/header-style.js
@@ -0,0 +1,111 @@
+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(2);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ headerColumnStyle: {
+ backgroundColor: 'blue'
+ }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ headerColumnStyle: {
+ backgroundColor: 'blue'
+ }
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 9bd79b81b..d11abfb9c 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -142,6 +142,7 @@ import SelectionWithExpansionTable from 'examples/row-selection/selection-with-e
import SelectionNoDataTable from 'examples/row-selection/selection-no-data';
import SelectionStyleTable from 'examples/row-selection/selection-style';
import SelectionClassTable from 'examples/row-selection/selection-class';
+import HeaderStyleTable from 'examples/row-selection/header-style';
import HideSelectAllTable from 'examples/row-selection/hide-select-all';
import CustomSelectionTable from 'examples/row-selection/custom-selection';
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
@@ -385,6 +386,7 @@ storiesOf('Row Selection', module)
.add('Selection without Data', () =>
{
From 737922a5a4b0b613571d30077fb2ac434a2e0b2f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 14:58:36 +0800
Subject: [PATCH 112/250] fix #904
---
packages/react-bootstrap-table2-toolkit/src/csv/exporter.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
index cb967b502..4d4c5cdf0 100644
--- a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
+++ b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
@@ -42,7 +42,7 @@ export const transform = (
cellContent = m.formatter(cellContent, row, rowIndex, m.formatExtraData);
}
if (m.type === String) {
- return `"${cellContent}"`;
+ return `"${`${cellContent}`.replace(/"/g, '""')}"`;
}
return cellContent;
}).join(separator)).join('\n');
From 36fa9b8630b24f3628113a37be1c6306b5f1018c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 15:38:07 +0800
Subject: [PATCH 113/250] fix #908
---
.../react-bootstrap-table2/src/contexts/row-expand-context.js | 3 ++-
packages/react-bootstrap-table2/src/store/rows.js | 3 ++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 0c4789aa8..eef22a7ee 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -2,6 +2,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import dataOperator from '../store/operators';
+import _ from '../utils';
const RowExpandContext = React.createContext();
@@ -81,7 +82,7 @@ class RowExpandProvider extends React.Component {
if (expandAll) {
currExpanded = expanded.concat(dataOperator.expandableKeys(data, keyField, nonExpandable));
} else {
- currExpanded = expanded.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
+ currExpanded = expanded.filter(s => typeof data.find(d => _.get(d, keyField) === s) === 'undefined');
}
if (onExpandAll) {
diff --git a/packages/react-bootstrap-table2/src/store/rows.js b/packages/react-bootstrap-table2/src/store/rows.js
index c57de061c..089c5f87a 100644
--- a/packages/react-bootstrap-table2/src/store/rows.js
+++ b/packages/react-bootstrap-table2/src/store/rows.js
@@ -1,4 +1,5 @@
+import _ from '../utils';
-export const matchRow = (keyField, id) => row => row[keyField] === id;
+export const matchRow = (keyField, id) => row => _.get(row, keyField) === id;
export const getRowByRowId = (data, keyField, id) => data.find(matchRow(keyField, id));
From 6168bd7532524edfa8d59b034bbccd5f7328ca55 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 16:11:55 +0800
Subject: [PATCH 114/250] fix #905
---
packages/react-bootstrap-table2/src/cell.js | 21 +++++++--------------
1 file changed, 7 insertions(+), 14 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index ba1e55111..c3684bd20 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -8,7 +8,7 @@ import _ from './utils';
class Cell extends eventDelegater(Component) {
constructor(props) {
super(props);
- this.handleEditingCell = this.handleEditingCell.bind(this);
+ this.createHandleEditingCell = this.createHandleEditingCell.bind(this);
}
shouldComponentUpdate(nextProps) {
@@ -43,17 +43,10 @@ class Cell extends eventDelegater(Component) {
return shouldUpdate;
}
- handleEditingCell(e) {
- const { column, onStart, rowIndex, columnIndex, clickToEdit, dbclickToEdit } = this.props;
- const { events } = column;
- if (events) {
- if (clickToEdit) {
- const customClick = events.onClick;
- if (_.isFunction(customClick)) customClick(e);
- } else if (dbclickToEdit) {
- const customDbClick = events.onDoubleClick;
- if (_.isFunction(customDbClick)) customDbClick(e);
- }
+ createHandleEditingCell = originFunc => (e) => {
+ const { onStart, rowIndex, columnIndex, clickToEdit, dbclickToEdit } = this.props;
+ if ((clickToEdit || dbclickToEdit) && _.isFunction(originFunc)) {
+ originFunc(e);
}
if (onStart) {
onStart(rowIndex, columnIndex);
@@ -85,9 +78,9 @@ class Cell extends eventDelegater(Component) {
}
if (clickToEdit && editable) {
- attrs.onClick = this.handleEditingCell;
+ attrs.onClick = this.createHandleEditingCell(attrs.onClick);
} else if (dbclickToEdit && editable) {
- attrs.onDoubleClick = this.handleEditingCell;
+ attrs.onDoubleClick = this.createHandleEditingCell(attrs.onDoubleClick);
}
return (
From 6bc54ef3ec8dcfe04f94807dd4601ab8420170d8 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Apr 2019 16:52:03 +0800
Subject: [PATCH 115/250] fix test fail
---
packages/react-bootstrap-table2/test/cell.test.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2/test/cell.test.js b/packages/react-bootstrap-table2/test/cell.test.js
index d0ceb950f..a1c7a3a89 100644
--- a/packages/react-bootstrap-table2/test/cell.test.js
+++ b/packages/react-bootstrap-table2/test/cell.test.js
@@ -124,10 +124,10 @@ describe('Cell', () => {
onClick: sinon.stub()
};
});
- it('should calling custom onClick callback also', () => {
+
+ it('should call onStart correctly', () => {
wrapper.find('td').simulate('click');
expect(onStartCallBack.callCount).toBe(1);
- expect(column.events.onClick.callCount).toBe(1);
});
});
});
@@ -164,10 +164,10 @@ describe('Cell', () => {
onDoubleClick: sinon.stub()
};
});
- it('should calling custom onDoubleClick callback also', () => {
+
+ it('should call onStart correctly', () => {
wrapper.find('td').simulate('doubleclick');
expect(onStartCallBack.callCount).toBe(1);
- expect(column.events.onDoubleClick.callCount).toBe(1);
});
});
});
From 8a7c1def5bc7454dc199f205409d37298530fda0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 29 Apr 2019 21:20:42 +0800
Subject: [PATCH 116/250] Publish
- react-bootstrap-table2-example@1.0.25
- react-bootstrap-table2-toolkit@1.4.2
- react-bootstrap-table-next@3.1.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index f8306b295..f48c610a9 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.24",
+ "version": "1.0.25",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index d5fcf969d..8fdbef002 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.4.1",
+ "version": "1.4.2",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 32f7e8e2e..2aeca65d0 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.1",
+ "version": "3.1.2",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 1e164bb3f420b4dcce56868fe4f859ae367faee0 Mon Sep 17 00:00:00 2001
From: Bhathiya Perera
Date: Sun, 12 May 2019 05:53:14 +0100
Subject: [PATCH 117/250] Update row-selection.md (#937)
---
docs/row-selection.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/row-selection.md b/docs/row-selection.md
index 4615a4336..18dd99171 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -1,6 +1,6 @@
# Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will append a new selection column at first.
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
## Required
* [mode (**required**)](#mode)
From 7c259cd1eef96cec8e69abaa4cfbfaa173f239d3 Mon Sep 17 00:00:00 2001
From: Rita Zhao
Date: Sat, 11 May 2019 21:58:53 -0700
Subject: [PATCH 118/250] Add aria-label to search input (#931)
---
packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index b95092b78..70909e065 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -69,6 +69,7 @@ class SearchBar extends React.Component {
id={ `search-bar-${tableId}` }
type="text"
style={ style }
+ aria-label="enter text you want to search"
onKeyUp={ () => this.onKeyup() }
onChange={ this.onChangeValue }
className={ `form-control ${className}` }
From 55eea6f337c3cd14006c6d604fad94da821e7cda Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 19 May 2019 16:11:50 +0800
Subject: [PATCH 119/250] try to fix #916
---
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/yarn.lock | 7 ++++---
2 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 8fdbef002..ff7078570 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -45,6 +45,6 @@
"react-dom": "^16.3.0"
},
"dependencies": {
- "file-saver": "1.3.8"
+ "file-saver": "2.0.2"
}
}
diff --git a/packages/react-bootstrap-table2-toolkit/yarn.lock b/packages/react-bootstrap-table2-toolkit/yarn.lock
index bcdf61c6b..efb0947ab 100644
--- a/packages/react-bootstrap-table2-toolkit/yarn.lock
+++ b/packages/react-bootstrap-table2-toolkit/yarn.lock
@@ -2,6 +2,7 @@
# yarn lockfile v1
-file-saver@1.3.8:
- version "1.3.8"
- resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
+file-saver@2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.2.tgz#06d6e728a9ea2df2cce2f8d9e84dfcdc338ec17a"
+ integrity sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw==
From 036c3fdc3241af70c634cb104385115075685079 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 19 May 2019 16:21:14 +0800
Subject: [PATCH 120/250] fix #940
---
.../react-bootstrap-table2-overlay/index.js | 8 +-
.../package.json | 2 +-
.../react-bootstrap-table2-overlay/yarn.lock | 468 ++++++++++++------
3 files changed, 315 insertions(+), 163 deletions(-)
diff --git a/packages/react-bootstrap-table2-overlay/index.js b/packages/react-bootstrap-table2-overlay/index.js
index 04bc73d69..221fdb299 100644
--- a/packages/react-bootstrap-table2-overlay/index.js
+++ b/packages/react-bootstrap-table2-overlay/index.js
@@ -11,10 +11,10 @@ export default options => loading =>
componentDidMount() {
if (loading) {
const { wrapper } = this.overlay;
- const masker = wrapper.firstChild;
- const headerDOM = wrapper.parentElement.querySelector('thead');
- const bodyDOM = wrapper.parentElement.querySelector('tbody');
- const captionDOM = wrapper.parentElement.querySelector('caption');
+ const masker = wrapper.current.firstChild;
+ const headerDOM = wrapper.current.parentElement.querySelector('thead');
+ const bodyDOM = wrapper.current.parentElement.querySelector('tbody');
+ const captionDOM = wrapper.current.parentElement.querySelector('caption');
let marginTop = window.getComputedStyle(headerDOM).height;
if (captionDOM) {
diff --git a/packages/react-bootstrap-table2-overlay/package.json b/packages/react-bootstrap-table2-overlay/package.json
index d0ff1e6ac..b2806888b 100644
--- a/packages/react-bootstrap-table2-overlay/package.json
+++ b/packages/react-bootstrap-table2-overlay/package.json
@@ -37,7 +37,7 @@
}
],
"dependencies": {
- "react-loading-overlay": "0.2.8"
+ "react-loading-overlay": "1.0.1"
},
"peerDependencies": {
"prop-types": "^15.0.0",
diff --git a/packages/react-bootstrap-table2-overlay/yarn.lock b/packages/react-bootstrap-table2-overlay/yarn.lock
index f40152b2c..9df21814d 100644
--- a/packages/react-bootstrap-table2-overlay/yarn.lock
+++ b/packages/react-bootstrap-table2-overlay/yarn.lock
@@ -2,199 +2,351 @@
# yarn lockfile v1
-asap@~2.0.3:
- version "2.0.6"
- resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
-base64-js@^1.0.2:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
-
-buffer@^5.0.3:
- version "5.0.8"
- resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+"@babel/helper-module-imports@^7.0.0":
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+ integrity sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==
dependencies:
- base64-js "^1.0.2"
- ieee754 "^1.1.4"
+ "@babel/types" "^7.0.0"
-chain-function@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2":
+ version "7.4.4"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
+ integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
+ dependencies:
+ regenerator-runtime "^0.13.2"
-core-js@^1.0.0:
- version "1.2.7"
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+"@babel/types@^7.0.0":
+ version "7.4.4"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
+ integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
+ dependencies:
+ esutils "^2.0.2"
+ lodash "^4.17.11"
+ to-fast-properties "^2.0.0"
+
+"@emotion/cache@^10.0.9":
+ version "10.0.9"
+ resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
+ integrity sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==
+ dependencies:
+ "@emotion/sheet" "0.9.2"
+ "@emotion/stylis" "0.8.3"
+ "@emotion/utils" "0.11.1"
+ "@emotion/weak-memoize" "0.2.2"
+
+"@emotion/hash@0.7.1":
+ version "0.7.1"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
+ integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
+
+"@emotion/memoize@0.7.1":
+ version "0.7.1"
+ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
+ integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
+
+"@emotion/serialize@^0.11.6":
+ version "0.11.6"
+ resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.6.tgz#78be8b9ee9ff49e0196233ba6ec1c1768ba1e1fc"
+ integrity sha512-n4zVv2qGLmspF99jaEUwnMV0fnEGsyUMsC/8KZKUSUTZMYljHE+j+B6rSD8PIFtaUIhHaxCG2JawN6L+OgLN0Q==
+ dependencies:
+ "@emotion/hash" "0.7.1"
+ "@emotion/memoize" "0.7.1"
+ "@emotion/unitless" "0.7.3"
+ "@emotion/utils" "0.11.1"
+ csstype "^2.5.7"
+
+"@emotion/sheet@0.9.2":
+ version "0.9.2"
+ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
+ integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
+
+"@emotion/stylis@0.8.3":
+ version "0.8.3"
+ resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
+ integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
+
+"@emotion/unitless@0.7.3":
+ version "0.7.3"
+ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
+ integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
+
+"@emotion/utils@0.11.1":
+ version "0.11.1"
+ resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628"
+ integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==
+
+"@emotion/weak-memoize@0.2.2":
+ version "0.2.2"
+ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
+ integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
+
+argparse@^1.0.7:
+ version "1.0.10"
+ resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+ integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+ dependencies:
+ sprintf-js "~1.0.2"
-css-color-keywords@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+babel-plugin-emotion@^10.0.9:
+ version "10.0.9"
+ resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.9.tgz#04a0404d5a4084d5296357a393d344c0f8303ae4"
+ integrity sha512-IfWP12e9/wHtWHxVTzD692Nbcmrmcz2tip7acp6YUqtrP7slAyr5B+69hyZ8jd55GsyNSZwryNnmuDEVe0j+7w==
+ dependencies:
+ "@babel/helper-module-imports" "^7.0.0"
+ "@emotion/hash" "0.7.1"
+ "@emotion/memoize" "0.7.1"
+ "@emotion/serialize" "^0.11.6"
+ babel-plugin-macros "^2.0.0"
+ babel-plugin-syntax-jsx "^6.18.0"
+ convert-source-map "^1.5.0"
+ escape-string-regexp "^1.0.5"
+ find-root "^1.1.0"
+ source-map "^0.5.7"
+
+babel-plugin-macros@^2.0.0:
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz#4a119ac2c2e19b458c259b9accd7ee34fd57ec6f"
+ integrity sha512-xN3KhAxPzsJ6OQTktCanNpIFnnMsCV+t8OloKxIL72D6+SUZYFn9qfklPgef5HyyDtzYZqqb+fs1S12+gQY82Q==
+ dependencies:
+ "@babel/runtime" "^7.4.2"
+ cosmiconfig "^5.2.0"
+ resolve "^1.10.0"
+
+babel-plugin-syntax-jsx@^6.18.0:
+ version "6.18.0"
+ resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
+ integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
+
+caller-callsite@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+ integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+ dependencies:
+ callsites "^2.0.0"
-css-to-react-native@^2.0.3:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
+caller-path@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+ integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
dependencies:
- css-color-keywords "^1.0.0"
- fbjs "^0.8.5"
- postcss-value-parser "^3.3.0"
+ caller-callsite "^2.0.0"
-dom-helpers@^3.2.0:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
+callsites@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+ integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
-encoding@^0.1.11:
- version "0.1.12"
- resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+convert-source-map@^1.5.0:
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+ integrity sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==
dependencies:
- iconv-lite "~0.4.13"
+ safe-buffer "~5.1.1"
-fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
- version "0.8.16"
- resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+cosmiconfig@^5.2.0:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+ integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
+ dependencies:
+ import-fresh "^2.0.0"
+ is-directory "^0.3.1"
+ js-yaml "^3.13.1"
+ parse-json "^4.0.0"
+
+create-emotion@^10.0.9:
+ version "10.0.9"
+ resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.9.tgz#290c2036126171c9566fa24f49c9241d54625138"
+ integrity sha512-sLKD4bIiTs8PpEqr5vlCoV5lsYE4QOBYEUWaD0R+VGRMCvBKHmYlvLJXsL99Kdc4YEFAFwipi2bbncnvv6UxRg==
dependencies:
- core-js "^1.0.0"
- isomorphic-fetch "^2.1.1"
- loose-envify "^1.0.0"
- object-assign "^4.1.0"
- promise "^7.1.1"
- setimmediate "^1.0.5"
- ua-parser-js "^0.7.9"
+ "@emotion/cache" "^10.0.9"
+ "@emotion/serialize" "^0.11.6"
+ "@emotion/sheet" "0.9.2"
+ "@emotion/utils" "0.11.1"
+
+csstype@^2.5.7:
+ version "2.6.4"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
+ integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
+
+dom-helpers@^3.4.0:
+ version "3.4.0"
+ resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+ integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+ dependencies:
+ "@babel/runtime" "^7.1.2"
-has-flag@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+emotion@^10.0.1:
+ version "10.0.9"
+ resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.9.tgz#2c37598af13df31dcd35a1957eaa8830f368c066"
+ integrity sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==
+ dependencies:
+ babel-plugin-emotion "^10.0.9"
+ create-emotion "^10.0.9"
-hoist-non-react-statics@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+error-ex@^1.3.1:
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+ integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+ dependencies:
+ is-arrayish "^0.2.1"
-iconv-lite@~0.4.13:
- version "0.4.19"
- resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+escape-string-regexp@^1.0.5:
+ version "1.0.5"
+ resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+ integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-ieee754@^1.1.4:
- version "1.1.8"
- resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+esprima@^4.0.0:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+ integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
-is-function@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+esutils@^2.0.2:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+ integrity sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=
-is-plain-object@^2.0.1:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
- dependencies:
- isobject "^3.0.1"
-
-is-stream@^1.0.1:
+find-root@^1.1.0:
version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
-isobject@^3.0.1:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+ resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+ integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-isomorphic-fetch@^2.1.1:
- version "2.2.1"
- resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+import-fresh@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+ integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
dependencies:
- node-fetch "^1.0.1"
- whatwg-fetch ">=0.10.0"
-
-js-tokens@^3.0.0:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
-loose-envify@^1.0.0, loose-envify@^1.3.1:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+ caller-path "^2.0.0"
+ resolve-from "^3.0.0"
+
+is-arrayish@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+ integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
+
+is-directory@^0.3.1:
+ version "0.3.1"
+ resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+ integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
+
+"js-tokens@^3.0.0 || ^4.0.0":
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+ integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+ version "3.13.1"
+ resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+ integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
dependencies:
- js-tokens "^3.0.0"
-
-node-fetch@^1.0.1:
- version "1.7.3"
- resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+ argparse "^1.0.7"
+ esprima "^4.0.0"
+
+json-parse-better-errors@^1.0.1:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
+ integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+
+lodash@^4.17.11:
+ version "4.17.11"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
+ integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+
+loose-envify@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+ integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
dependencies:
- encoding "^0.1.11"
- is-stream "^1.0.1"
+ js-tokens "^3.0.0 || ^4.0.0"
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-postcss-value-parser@^3.3.0:
- version "3.3.0"
- resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
-
-promise@^7.1.1:
- version "7.3.1"
- resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+parse-json@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+ integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
dependencies:
- asap "~2.0.3"
-
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6:
- version "15.6.0"
- resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+ error-ex "^1.3.1"
+ json-parse-better-errors "^1.0.1"
+
+path-parse@^1.0.6:
+ version "1.0.6"
+ resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
+ integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+
+prop-types@^15.6.2:
+ version "15.7.2"
+ resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+ integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
dependencies:
- fbjs "^0.8.16"
- loose-envify "^1.3.1"
+ loose-envify "^1.4.0"
object-assign "^4.1.1"
+ react-is "^16.8.1"
-react-loading-overlay@0.2.8:
- version "0.2.8"
- resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-0.2.8.tgz#c1c5531c9cfa4be6caca6b9aa0c1eb19e22b03fe"
- dependencies:
- prop-types "^15.5.10"
- react-transition-group "^1.2.1"
- styled-components "^2.1.2"
-
-react-transition-group@^1.2.1:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
- dependencies:
- chain-function "^1.0.0"
- dom-helpers "^3.2.0"
- loose-envify "^1.3.1"
- prop-types "^15.5.6"
- warning "^3.0.0"
+react-is@^16.8.1:
+ version "16.8.6"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
+ integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
-setimmediate@^1.0.5:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+react-lifecycles-compat@^3.0.4:
+ version "3.0.4"
+ resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+ integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
-styled-components@^2.1.2:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.4.tgz#dd87fd3dafd359e7a0d570aec1bd07d691c0b5a2"
+react-loading-overlay@1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/react-loading-overlay/-/react-loading-overlay-1.0.1.tgz#ee3b1ad56c45bb2f1ba46d4820ba0d06cd319a91"
+ integrity sha512-aUjtZ8tNXBSx+MbD2SQs0boPbeTAGTh+I5U9nWjDzMasKlYr58RJpr57c8W7uApeLpOkAGbInExRi6GamNC2bA==
dependencies:
- buffer "^5.0.3"
- css-to-react-native "^2.0.3"
- fbjs "^0.8.9"
- hoist-non-react-statics "^1.2.0"
- is-function "^1.0.1"
- is-plain-object "^2.0.1"
- prop-types "^15.5.4"
- stylis "^3.4.0"
- supports-color "^3.2.3"
-
-stylis@^3.4.0:
- version "3.4.5"
- resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
-
-supports-color@^3.2.3:
- version "3.2.3"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+ emotion "^10.0.1"
+ prop-types "^15.6.2"
+ react-transition-group "^2.5.0"
+
+react-transition-group@^2.5.0:
+ version "2.9.0"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+ integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
dependencies:
- has-flag "^1.0.0"
+ dom-helpers "^3.4.0"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+ react-lifecycles-compat "^3.0.4"
-ua-parser-js@^0.7.9:
- version "0.7.17"
- resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
+regenerator-runtime@^0.13.2:
+ version "0.13.2"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
+ integrity sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==
-warning@^3.0.0:
+resolve-from@^3.0.0:
version "3.0.0"
- resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
- dependencies:
- loose-envify "^1.0.0"
+ resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+ integrity sha1-six699nWiBvItuZTM17rywoYh0g=
-whatwg-fetch@>=0.10.0:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
+resolve@^1.10.0:
+ version "1.11.0"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
+ integrity sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==
+ dependencies:
+ path-parse "^1.0.6"
+
+safe-buffer@~5.1.1:
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+ integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+source-map@^0.5.7:
+ version "0.5.7"
+ resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+ integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
+
+sprintf-js@~1.0.2:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+ integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+to-fast-properties@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+ integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
From a1457dfe5900bc6071d450ab58d60e1fa3bd8133 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 19 May 2019 16:28:36 +0800
Subject: [PATCH 121/250] fix #929
---
packages/react-bootstrap-table2/src/header-cell.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 12700821b..773a939c3 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -40,7 +40,8 @@ const HeaderCell = (props) => {
const cellAttrs = {
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
- ...headerEvents
+ ...headerEvents,
+ tabIndex: index + 1
};
let sortSymbol;
From 2c6cc915f0285d62961a7b5b3cbf1348ac4fcbb0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 19 May 2019 17:05:32 +0800
Subject: [PATCH 122/250] fix #932
---
.../src/row-selection/selection-cell.js | 6 ++----
.../test/row-selection/selection-cell.test.js | 10 +++++-----
2 files changed, 7 insertions(+), 9 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index 3c4da5656..5e8b27c58 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -43,12 +43,10 @@ export default class SelectionCell extends Component {
selected,
onRowSelect,
disabled,
- rowIndex,
- clickToSelect
+ rowIndex
} = this.props;
-
+ e.stopPropagation();
if (disabled) return;
- if (clickToSelect) return;
const checked = inputType === Const.ROW_SELECT_SINGLE
? true
diff --git a/packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js b/packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js
index 85a6c0067..ce332e33a 100644
--- a/packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js
+++ b/packages/react-bootstrap-table2/test/row-selection/selection-cell.test.js
@@ -147,7 +147,7 @@ describe('
Date: Sun, 19 May 2019 21:19:50 +0800
Subject: [PATCH 123/250] Publish
- react-bootstrap-table2-overlay@2.0.0
- react-bootstrap-table2-toolkit@2.0.0
- react-bootstrap-table-next@3.1.3
---
packages/react-bootstrap-table2-overlay/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-overlay/package.json b/packages/react-bootstrap-table2-overlay/package.json
index b2806888b..1a5f07608 100644
--- a/packages/react-bootstrap-table2-overlay/package.json
+++ b/packages/react-bootstrap-table2-overlay/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-overlay",
- "version": "1.0.0",
+ "version": "2.0.0",
"description": "it's a loading overlay addons for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index ff7078570..29970a08f 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "1.4.2",
+ "version": "2.0.0",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 2aeca65d0..213640aca 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.2",
+ "version": "3.1.3",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From e31b5eb691ecbc2265d7e37fc582ce77998684b8 Mon Sep 17 00:00:00 2001
From: Bill Parrott
Date: Mon, 3 Jun 2019 09:26:15 -0500
Subject: [PATCH 124/250] set tabindex to 0 for table headers; fixes #955
---
packages/react-bootstrap-table2/src/header-cell.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 773a939c3..708800b56 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -41,7 +41,7 @@ const HeaderCell = (props) => {
const cellAttrs = {
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
...headerEvents,
- tabIndex: index + 1
+ tabIndex: 0
};
let sortSymbol;
From 4ec02b294afa876155088fc7140c2f13ec2b0aa2 Mon Sep 17 00:00:00 2001
From: Bill Parrott
Date: Wed, 5 Jun 2019 07:13:35 -0500
Subject: [PATCH 125/250] set tabindex to 0 for table headers; fixes #955
(#965)
---
packages/react-bootstrap-table2/src/header-cell.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 773a939c3..708800b56 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -41,7 +41,7 @@ const HeaderCell = (props) => {
const cellAttrs = {
..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
...headerEvents,
- tabIndex: index + 1
+ tabIndex: 0
};
let sortSymbol;
From 1cd31dc54cdc310bfaf8e1e8fbf1168e8ab663b2 Mon Sep 17 00:00:00 2001
From: William Laugesen
Date: Fri, 7 Jun 2019 17:18:50 +1200
Subject: [PATCH 126/250] Added Prop to csv/exporter.js to allow overriding of
the Blob's default type (#958)
---
packages/react-bootstrap-table2-toolkit/README.md | 3 +++
packages/react-bootstrap-table2-toolkit/context.js | 1 +
packages/react-bootstrap-table2-toolkit/src/csv/exporter.js | 5 +++--
packages/react-bootstrap-table2-toolkit/src/op/csv.js | 1 +
4 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index a470133dd..444d10e94 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -185,6 +185,9 @@ Default is `false`. Give true to avoid to attach the csv header.
#### noAutoBOM - [bool]
Default is `true`.
+#### blobType - [string]
+Default is `text/plain;charset=utf-8`. Change to update the blob type of the exported file.
+
#### exportAll - [bool]
Default is `true`. `false` will only export current data which display on table.
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index 838f63474..2a585e615 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/packages/react-bootstrap-table2-toolkit/context.js
@@ -29,6 +29,7 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
separator: PropTypes.string,
ignoreHeader: PropTypes.bool,
noAutoBOM: PropTypes.bool,
+ blobType: PropTypes.string,
exportAll: PropTypes.bool,
onlyExportFiltered: PropTypes.bool,
onlyExportSelection: PropTypes.bool
diff --git a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
index 4d4c5cdf0..193933c9a 100644
--- a/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
+++ b/packages/react-bootstrap-table2-toolkit/src/csv/exporter.js
@@ -54,11 +54,12 @@ export const save = (
content,
{
noAutoBOM,
- fileName
+ fileName,
+ blobType
}
) => {
FileSaver.saveAs(
- new Blob([content], { type: 'text/plain;charset=utf-8' }),
+ new Blob([content], { type: blobType }),
fileName,
noAutoBOM
);
diff --git a/packages/react-bootstrap-table2-toolkit/src/op/csv.js b/packages/react-bootstrap-table2-toolkit/src/op/csv.js
index 76f5135fb..57245591d 100644
--- a/packages/react-bootstrap-table2-toolkit/src/op/csv.js
+++ b/packages/react-bootstrap-table2-toolkit/src/op/csv.js
@@ -5,6 +5,7 @@ const csvDefaultOptions = {
separator: ',',
ignoreHeader: false,
noAutoBOM: true,
+ blobType: 'text/plain;charset=utf-8',
exportAll: true,
onlyExportSelection: false
};
From 4d76d88e9ad84295f6b9554d32dbcbb3a2687354 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 8 Jun 2019 13:11:49 +0800
Subject: [PATCH 127/250] fix #945 (#967)
---
.../react-bootstrap-table2-editor/README.md | 45 ++++-
.../src/dropdown-editor.js | 26 ++-
...pdown-editor-with-dynamic-options-table.js | 155 ++++++++++++++++++
.../stories/index.js | 2 +
4 files changed, 222 insertions(+), 6 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js
diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
index f5d98aa98..b4e6b99aa 100644
--- a/packages/react-bootstrap-table2-editor/README.md
+++ b/packages/react-bootstrap-table2-editor/README.md
@@ -89,7 +89,10 @@ const columns = [
In the following, we go though all the predefined editors:
### Dropdown Editor
-Dropdown editor give a select menu to choose a data from a list, the `editor.options` is required property for dropdown editor.
+Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop.
+
+#### editor.options
+This is most simple case for assign the dropdown options data directly.
```js
import { Type } from 'react-bootstrap-table2-editor';
@@ -119,6 +122,46 @@ const columns = [
}];
```
+#### editor.getOptions
+It is much flexible which accept a function and you can assign the dropdown options dynamically.
+
+There are two case for `getOptions`:
+
+* *Synchronous*: Just return the options array in `getOptions` callback function
+* *Asynchronous*: Call `setOptions` function argument when you get the options from remote.
+
+
+```js
+// Synchronous
+
+const columns = [
+ ..., {
+ dataField: 'type',
+ text: 'Job Type',
+ editor: {
+ type: Type.SELECT,
+ getOptions: () => [.....]
+ }
+}];
+
+// Asynchronous
+
+const columns = [
+ ..., {
+ dataField: 'type',
+ text: 'Job Type',
+ editor: {
+ type: Type.SELECT,
+ getOptions: (setOptions) => {
+ setTimeout(() => setOptions([...]), 1500);
+ }
+ }
+}];
+
+```
+
+[here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example.
+
### Date Editor
Date editor is use `{ label }
))
}
@@ -52,13 +65,16 @@ DropDownEditor.propTypes = {
label: PropTypes.string,
value: PropTypes.any
}))
- ]).isRequired,
- didMount: PropTypes.func
+ ]),
+ didMount: PropTypes.func,
+ getOptions: PropTypes.func
};
DropDownEditor.defaultProps = {
className: '',
defaultValue: '',
style: {},
- didMount: undefined
+ options: [],
+ didMount: undefined,
+ getOptions: undefined
};
export default DropDownEditor;
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js
new file mode 100644
index 000000000..715346ba4
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/dropdown-editor-with-dynamic-options-table.js
@@ -0,0 +1,155 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator().map(j => ({
+ ...j,
+ type2: j.type
+}));
+
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name'
+}, {
+ dataField: 'owner',
+ text: 'Job Owner'
+}, {
+ dataField: 'type',
+ text: 'Job Type1',
+ editor: {
+ type: Type.SELECT,
+ getOptions: () => [{
+ value: 'A',
+ label: 'A'
+ }, {
+ value: 'B',
+ label: 'B'
+ }, {
+ value: 'C',
+ label: 'C'
+ }, {
+ value: 'D',
+ label: 'D'
+ }, {
+ value: 'E',
+ label: 'E'
+ }]
+ }
+}, {
+ dataField: 'type2',
+ text: 'Job Type2',
+ editor: {
+ type: Type.SELECT,
+ getOptions: (setOptions) => {
+ setTimeout(() => {
+ setOptions([{
+ value: 'A',
+ label: 'A'
+ }, {
+ value: 'B',
+ label: 'B'
+ }, {
+ value: 'C',
+ label: 'C'
+ }, {
+ value: 'D',
+ label: 'D'
+ }, {
+ value: 'E',
+ label: 'E'
+ }]);
+ }, 2000);
+ }
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name'
+}, {
+ dataField: 'owner',
+ text: 'Job Owner'
+}, {
+ dataField: 'type',
+ text: 'Job Type1',
+ editor: {
+ type: Type.SELECT,
+ getOptions: () => [{
+ value: 'A',
+ label: 'A'
+ }, {
+ value: 'B',
+ label: 'B'
+ }, {
+ value: 'C',
+ label: 'C'
+ }, {
+ value: 'D',
+ label: 'D'
+ }, {
+ value: 'E',
+ label: 'E'
+ }]
+ }
+}, {
+ dataField: 'type2',
+ text: 'Job Type2',
+ editor: {
+ type: Type.SELECT,
+ getOptions: (setOptions) => {
+ setTimeout(() => {
+ setOptions([{
+ value: 'A',
+ label: 'A'
+ }, {
+ value: 'B',
+ label: 'B'
+ }, {
+ value: 'C',
+ label: 'C'
+ }, {
+ value: 'D',
+ label: 'D'
+ }, {
+ value: 'E',
+ label: 'E'
+ }]);
+ }, 2000);
+ }
+ }
+}];
+
+
+
Dropdown Editor with Dynamic Options
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index d11abfb9c..ef179e0ce 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -125,6 +125,7 @@ import EditorStyleTable from 'examples/cell-edit/editor-style-table';
import EditorClassTable from 'examples/cell-edit/editor-class-table';
import DBClickEditWithSelection from 'examples/cell-edit/dbclick-to-edit-with-selection-table';
import DropdownEditorTable from 'examples/cell-edit/dropdown-editor-table';
+import DropdownEditorWithDynamicOptionsTable from 'examples/cell-edit/dropdown-editor-with-dynamic-options-table';
import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
import DateEditorTable from 'examples/cell-edit/date-editor-table';
@@ -368,6 +369,7 @@ storiesOf('Cell Editing', module)
.add('Custom Editor Style', () =>
Date: Sat, 8 Jun 2019 16:47:00 +0800
Subject: [PATCH 128/250] fix #946
---
docs/row-selection.md | 11 ++++
.../selection-column-position.js | 59 +++++++++++++++++++
.../stories/index.js | 4 +-
.../src/bootstrap-table.js | 6 +-
packages/react-bootstrap-table2/src/footer.js | 14 +++--
packages/react-bootstrap-table2/src/header.js | 14 +++--
.../src/row/aggregate-row.js | 19 +++---
7 files changed, 108 insertions(+), 19 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js
diff --git a/docs/row-selection.md b/docs/row-selection.md
index 18dd99171..b885d0495 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -16,6 +16,7 @@
* [clickToEdit](#clickToEdit)
* [onSelect](#onSelect)
* [onSelectAll](#onSelectAll)
+* [selectColumnPosition](#selectColumnPosition)
* [hideSelectColumn](#hideSelectColumn)
* [hideSelectAll](#hideSelectAll)
* [selectionRenderer](#selectionRenderer)
@@ -275,6 +276,16 @@ const selectRow = {
};
```
+### selectRow.selectColumnPosition - [String]
+Default is `left`. You can give this as `right` for rendering selection column in the right side.
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnPosition: 'right'
+};
+```
+
### selectRow.hideSelectColumn - [Bool]
Default is `false`, if you don't want to have a selection column, give this prop as `true`
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js b/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js
new file mode 100644
index 000000000..efe73380d
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/selection-column-position.js
@@ -0,0 +1,59 @@
+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'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnPosition: 'right'
+};
+
+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'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnPosition: 'right'
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index ef179e0ce..d297cf9cf 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -150,6 +150,7 @@ import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
import SelectionHooks from 'examples/row-selection/selection-hooks';
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
+import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
// work on row expand
import BasicRowExpand from 'examples/row-expand';
@@ -394,7 +395,8 @@ storiesOf('Row Selection', module)
.add('Selection Background Color', () =>
Date: Sat, 8 Jun 2019 17:19:39 +0800
Subject: [PATCH 129/250] fix #947
---
docs/row-selection.md | 37 ++++++
.../row-selection/select-column-style.js | 110 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 1 +
.../src/row-selection/selection-cell.js | 20 +++-
5 files changed, 167 insertions(+), 3 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
diff --git a/docs/row-selection.md b/docs/row-selection.md
index b885d0495..af2d16a5f 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -22,6 +22,7 @@
* [selectionRenderer](#selectionRenderer)
* [selectionHeaderRenderer](#selectionHeaderRenderer)
* [headerColumnStyle](#headerColumnStyle)
+* [selectColumnStyle](#selectColumnStyle)
### selectRow.mode - [String]
@@ -225,6 +226,42 @@ const selectRow = {
};
```
+### selectRow.selectColumnStyle - [Object | Function]
+A way to custome the selection cell. `selectColumnStyle` not only accept a simple style object but also a callback function for more flexible customization:
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: { backgroundColor: 'blue' }
+};
+```
+
+### Callback Function
+If a callback function present, you can get below information to custom the selection cell:
+
+* `checked`: Whether current row is seleccted or not
+* `disabled`: Whether current row is disabled or not
+* `rowIndex`: Current row index
+* `rowKey`: Current row key
+
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ selectColumnStyle: ({
+ checked,
+ disabled,
+ rowIndex,
+ rowKey
+ }) => (
+ // ....
+ return { backgroundColor: 'blue' };
+ )
+};
+```
+
### selectRow.onSelect - [Function]
This callback function will be called when a row is select/unselect and pass following three arguments:
`row`, `isSelect`, `rowIndex` and `e`.
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
new file mode 100644
index 000000000..fd1e23776
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/select-column-style.js
@@ -0,0 +1,110 @@
+/* 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(2);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow1 = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: {
+ backgroundColor: 'grey'
+ }
+};
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const columns = ...
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ selectColumnStyle: {
+ backgroundColor: 'grey'
+ }
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index d297cf9cf..2c71fac6e 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -150,6 +150,7 @@ import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
import SelectionHooks from 'examples/row-selection/selection-hooks';
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
+import SelectionColumnStyleTable from 'examples/row-selection/select-column-style';
import SelectionColumnPositionTable from 'examples/row-selection/selection-column-position';
// work on row expand
@@ -396,6 +397,7 @@ storiesOf('Row Selection', module)
.add('Not Selectabled Rows', () =>
{
From 40c5ae745907d0d1ef38dd77966ab80895b2e5b4 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 10 Jun 2019 20:53:14 +0800
Subject: [PATCH 130/250] Publish
- react-bootstrap-table2-editor@1.2.4
- react-bootstrap-table2-example@1.0.26
- react-bootstrap-table2-toolkit@2.0.1
- react-bootstrap-table-next@3.1.4
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index 23d18370f..b8171170b 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.2.3",
+ "version": "1.2.4",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index f48c610a9..d08286211 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.25",
+ "version": "1.0.26",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 29970a08f..edbf5b2fe 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "2.0.0",
+ "version": "2.0.1",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 213640aca..b5af58a15 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.3",
+ "version": "3.1.4",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 4cf6e65abc7777428d4b7d357b07b3bf3a8698ae Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 22 Jun 2019 13:50:50 +0800
Subject: [PATCH 131/250] fix #979
---
packages/react-bootstrap-table2/src/row/aggregate-row.js | 4 ++--
packages/react-bootstrap-table2/src/row/should-updater.js | 5 +++++
packages/react-bootstrap-table2/src/row/simple-row.js | 3 +--
3 files changed, 8 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js
index 3a151dbda..f0d918768 100644
--- a/packages/react-bootstrap-table2/src/row/aggregate-row.js
+++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js
@@ -37,10 +37,10 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
this.props.selectable !== nextProps.selectable ||
this.shouldUpdatedBySelfProps(nextProps)
) {
- this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
return true;
}
- this.shouldUpdateRowContent = this.shouldUpdateChild(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
return this.shouldUpdateRowContent;
}
diff --git a/packages/react-bootstrap-table2/src/row/should-updater.js b/packages/react-bootstrap-table2/src/row/should-updater.js
index c61ae5e15..fb1f1bed8 100644
--- a/packages/react-bootstrap-table2/src/row/should-updater.js
+++ b/packages/react-bootstrap-table2/src/row/should-updater.js
@@ -48,4 +48,9 @@ export default ExtendBase =>
return this.shouldUpdateByCellEditing(nextProps) ||
this.shouldUpdatedByNormalProps(nextProps);
}
+
+ shouldRowContentUpdate(nextProps) {
+ return this.shouldUpdateChild(nextProps) ||
+ this.shouldUpdateByColumnsForSimpleCheck(nextProps);
+ }
};
diff --git a/packages/react-bootstrap-table2/src/row/simple-row.js b/packages/react-bootstrap-table2/src/row/simple-row.js
index 96ca92f18..0ad992f00 100644
--- a/packages/react-bootstrap-table2/src/row/simple-row.js
+++ b/packages/react-bootstrap-table2/src/row/simple-row.js
@@ -15,8 +15,7 @@ class SimpleRow extends shouldUpdater(eventDelegater(Component)) {
shouldComponentUpdate(nextProps) {
this.shouldUpdateRowContent = false;
- this.shouldUpdateRowContent =
- this.shouldUpdateChild(nextProps) || this.shouldUpdateByColumnsForSimpleCheck(nextProps);
+ this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
if (this.shouldUpdateRowContent) return true;
return this.shouldUpdatedBySelfProps(nextProps);
From 31724fec7fb3c2a7db1115580600ec9676728b08 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 22 Jun 2019 13:51:04 +0800
Subject: [PATCH 132/250] add story for #979
---
.../row-expand-with-formatted-dummy-column.js | 188 ++++++++++++++++++
.../stories/index.js | 4 +-
2 files changed, 191 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js
diff --git a/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js b/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js
new file mode 100644
index 000000000..a7a7ea33b
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/columns/row-expand-with-formatted-dummy-column.js
@@ -0,0 +1,188 @@
+/* eslint no-param-reassign: 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class DummyColumnWithRowExpand extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hoverIdx: null
+ };
+ }
+
+ expandRow = {
+ renderer: () => (
+ Content
+ ),
+ showExpandColumn: true,
+ expandByColumnOnly: true
+ };
+
+ actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+ if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ rowEvents = {
+ onMouseEnter: (e, row, rowIndex) => {
+ this.setState({ hoverIdx: rowIndex });
+ },
+ onMouseLeave: () => {
+ this.setState({ hoverIdx: null });
+ }
+ }
+
+ rowStyle = (row, rowIndex) => {
+ row.index = rowIndex;
+ const style = {};
+ if (rowIndex % 2 === 0) {
+ style.backgroundColor = 'transparent';
+ } else {
+ style.backgroundColor = 'rgba(54, 163, 173, .10)';
+ }
+ style.borderTop = 'none';
+
+ return style;
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name'
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }, {
+ text: '',
+ isDummyField: true,
+ formatter: this.actionFormater,
+ formatExtraData: { hoverIdx: this.state.hoverIdx },
+ headerStyle: { width: '50px' },
+ style: { height: '30px' }
+ }];
+ return (
+
+
+ );
+ }
+}
+`;
+
+export default class DummyColumnWithRowExpand extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ hoverIdx: null
+ };
+ }
+
+ expandRow = {
+ renderer: () => (
+ Content
+ ),
+ showExpandColumn: true,
+ expandByColumnOnly: true
+ };
+
+ actionFormater = (cell, row, rowIndex, { hoverIdx }) => {
+ if ((hoverIdx !== null || hoverIdx !== undefined) && hoverIdx === rowIndex) {
+ return (
+
+ );
+ }
+ return (
+
+ );
+ }
+
+ rowEvents = {
+ onMouseEnter: (e, row, rowIndex) => {
+ this.setState({ hoverIdx: rowIndex });
+ },
+ onMouseLeave: () => {
+ this.setState({ hoverIdx: null });
+ }
+ }
+
+ rowStyle = (row, rowIndex) => {
+ row.index = rowIndex;
+ const style = {};
+ if (rowIndex % 2 === 0) {
+ style.backgroundColor = 'transparent';
+ } else {
+ style.backgroundColor = 'rgba(54, 163, 173, .10)';
+ }
+ style.borderTop = 'none';
+
+ return style;
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+ }, {
+ dataField: 'name',
+ text: 'Product Name'
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }, {
+ isDummyField: true,
+ text: '',
+ formatter: this.actionFormater,
+ formatExtraData: { hoverIdx: this.state.hoverIdx },
+ headerStyle: { width: '50px' },
+ style: { height: '30px' }
+ }];
+ return (
+
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 2c71fac6e..732c5b22e 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -35,6 +35,7 @@ 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';
+import RowExpandWithFormattedDummyColumn from 'examples/columns/row-expand-with-formatted-dummy-column.js';
// work on header columns
import HeaderColumnFormatTable from 'examples/header-columns/column-format-table';
@@ -273,7 +274,8 @@ storiesOf('Work on Columns', module)
.add('Customize Column Class', () =>
Date: Sat, 22 Jun 2019 14:45:53 +0800
Subject: [PATCH 133/250] fix #971 (#986)
---
.../src/components/multiselect.js | 14 ++++++++++++--
1 file changed, 12 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 2de86f9d6..66ad4a017 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -18,8 +18,18 @@ function optionsEquals(currOpts, prevOpts) {
return Object.keys(currOpts).length === Object.keys(prevOpts).length;
}
-const getSelections = container =>
- Array.from(container.selectedOptions).map(item => item.value);
+const getSelections = (container) => {
+ if (container.selectedOptions) {
+ return Array.from(container.selectedOptions).map(item => item.value);
+ }
+ const selections = [];
+ const totalLen = container.options.length;
+ for (let i = 0; i < totalLen; i += 1) {
+ const option = container.options.item(i);
+ if (option.selected) selections.push(option.value);
+ }
+ return selections;
+};
class MultiSelectFilter extends Component {
constructor(props) {
From a1a59f941999ca7f213f9fcf5e5226f8dd2d7e72 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 22 Jun 2019 15:24:28 +0800
Subject: [PATCH 134/250] fix #980 (#987)
---
.../react-bootstrap-table2/src/cell-event-delegater.js | 4 +++-
.../src/contexts/row-expand-context.js | 4 ++--
.../react-bootstrap-table2/src/props-resolver/index.js | 2 +-
.../react-bootstrap-table2/src/row-expand/row-consumer.js | 7 ++++---
.../src/row-selection/row-consumer.js | 4 ++--
packages/react-bootstrap-table2/src/row/event-delegater.js | 2 +-
packages/react-bootstrap-table2/src/store/expand.js | 2 +-
packages/react-bootstrap-table2/src/store/selection.js | 4 ++--
8 files changed, 16 insertions(+), 13 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/cell-event-delegater.js b/packages/react-bootstrap-table2/src/cell-event-delegater.js
index 41e0f7103..14c2fa062 100644
--- a/packages/react-bootstrap-table2/src/cell-event-delegater.js
+++ b/packages/react-bootstrap-table2/src/cell-event-delegater.js
@@ -1,3 +1,5 @@
+import _ from './utils';
+
const events = [
'onClick',
'onDoubleClick',
@@ -23,7 +25,7 @@ export default ExtendBase =>
delegate(attrs = {}) {
const newAttrs = { ...attrs };
Object.keys(attrs).forEach((attr) => {
- if (events.includes(attr)) {
+ if (_.contains(events, attr)) {
newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
}
});
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index eef22a7ee..e1c5e471e 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -20,7 +20,7 @@ class RowExpandProvider extends React.Component {
if (nextProps.expandRow) {
const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
const isClosing = this.state.expanded.reduce((acc, cur) => {
- if (!nextExpanded.includes(cur)) {
+ if (!_.contains(nextExpanded, cur)) {
acc.push(cur);
}
return acc;
@@ -42,7 +42,7 @@ class RowExpandProvider extends React.Component {
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
- if (nonExpandable && nonExpandable.includes(rowKey)) {
+ if (nonExpandable && _.contains(nonExpandable, rowKey)) {
return;
}
diff --git a/packages/react-bootstrap-table2/src/props-resolver/index.js b/packages/react-bootstrap-table2/src/props-resolver/index.js
index 92ae62dd2..5e18b2787 100644
--- a/packages/react-bootstrap-table2/src/props-resolver/index.js
+++ b/packages/react-bootstrap-table2/src/props-resolver/index.js
@@ -22,7 +22,7 @@ export default ExtendBase =>
if (!hiddenRows || hiddenRows.length === 0) return data;
return data.filter((row) => {
const key = _.get(row, keyField);
- return !hiddenRows.includes(key);
+ return !_.contains(hiddenRows, key);
});
}
};
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 724b5d2c2..e0decc49c 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -1,15 +1,16 @@
/* eslint react/prop-types: 0 */
import React from 'react';
import ExpandRow from './expand-row';
+import _ from '../utils';
import ExpansionContext from '../contexts/row-expand-context';
export default (Component) => {
const renderWithExpansion = (props, expandRow) => {
const key = props.value;
- const expanded = expandRow.expanded.includes(key);
- const isClosing = expandRow.isClosing.includes(key);
- const expandable = !expandRow.nonExpandable || !expandRow.nonExpandable.includes(key);
+ const expanded = _.contains(expandRow.expanded, key);
+ const isClosing = _.contains(expandRow.isClosing, key);
+ const expandable = !expandRow.nonExpandable || !_.contains(expandRow.nonExpandable, key);
return [
{
const renderWithSelection = (props, selectRow) => {
const key = props.value;
- const selected = selectRow.selected.includes(key);
- const selectable = !selectRow.nonSelectable || !selectRow.nonSelectable.includes(key);
+ const selected = _.contains(selectRow.selected, key);
+ const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
let {
style,
diff --git a/packages/react-bootstrap-table2/src/row/event-delegater.js b/packages/react-bootstrap-table2/src/row/event-delegater.js
index 0a17aa2c7..a6a1a1f93 100644
--- a/packages/react-bootstrap-table2/src/row/event-delegater.js
+++ b/packages/react-bootstrap-table2/src/row/event-delegater.js
@@ -74,7 +74,7 @@ export default ExtendBase =>
delegate(attrs = {}) {
const newAttrs = { ...attrs };
Object.keys(attrs).forEach((attr) => {
- if (events.includes(attr)) {
+ if (_.contains(events, attr)) {
newAttrs[attr] = this.createDefaultEventHandler(attrs[attr]);
}
});
diff --git a/packages/react-bootstrap-table2/src/store/expand.js b/packages/react-bootstrap-table2/src/store/expand.js
index 31feb0a92..ceefae717 100644
--- a/packages/react-bootstrap-table2/src/store/expand.js
+++ b/packages/react-bootstrap-table2/src/store/expand.js
@@ -20,7 +20,7 @@ export const expandableKeys = (data, keyField, skips = []) => {
return data.map(row => _.get(row, keyField));
}
return data
- .filter(row => !skips.includes(_.get(row, keyField)))
+ .filter(row => !_.contains(skips, _.get(row, keyField)))
.map(row => _.get(row, keyField));
};
diff --git a/packages/react-bootstrap-table2/src/store/selection.js b/packages/react-bootstrap-table2/src/store/selection.js
index af6a8c12a..38ecd5fba 100644
--- a/packages/react-bootstrap-table2/src/store/selection.js
+++ b/packages/react-bootstrap-table2/src/store/selection.js
@@ -29,7 +29,7 @@ export const selectableKeys = (data, keyField, skips = []) => {
return data.map(row => _.get(row, keyField));
}
return data
- .filter(row => !skips.includes(_.get(row, keyField)))
+ .filter(row => !_.contains(skips, _.get(row, keyField)))
.map(row => _.get(row, keyField));
};
@@ -37,7 +37,7 @@ export const unSelectableKeys = (selected, skips = []) => {
if (skips.length === 0) {
return [];
}
- return selected.filter(x => skips.includes(x));
+ return selected.filter(x => _.contains(skips, x));
};
export const getSelectedRows = (data, keyField, selected) =>
From 7382010822f9d96c7ab6abad9878695e2e07850f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 22 Jun 2019 15:47:21 +0800
Subject: [PATCH 135/250] fix #970
---
.../examples/pagination/custom-pagination.js | 2 +-
.../react-bootstrap-table2-paginator/src/page-button.js | 6 +++++-
.../src/pagination-list.js | 6 +++++-
.../react-bootstrap-table2-paginator/src/pagination.js | 8 ++++----
4 files changed, 15 insertions(+), 7 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
index 4ea5164c1..f45690497 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
@@ -74,7 +74,7 @@ const options = {
// hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
firstPageText: 'First',
prePageText: 'Back',
- nextPageText: 'Next',
+ nextPageText: Next ,
lastPageText: 'Last',
nextPageTitle: 'First page',
prePageTitle: 'Pre page',
diff --git a/packages/react-bootstrap-table2-paginator/src/page-button.js b/packages/react-bootstrap-table2-paginator/src/page-button.js
index e2834ee47..d3a81fb8d 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-button.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-button.js
@@ -39,7 +39,11 @@ class PageButton extends Component {
PageButton.propTypes = {
onPageChange: PropTypes.func.isRequired,
- page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+ page: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.number,
+ PropTypes.string
+ ]).isRequired,
active: PropTypes.bool.isRequired,
disabled: PropTypes.bool.isRequired,
className: PropTypes.string,
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list.js b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
index 9954538f6..d9454c67c 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list.js
@@ -27,7 +27,11 @@ const PaginatonList = props => (
PaginatonList.propTypes = {
pages: PropTypes.arrayOf(PropTypes.shape({
- page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ page: PropTypes.oneOfType([
+ PropTypes.node,
+ PropTypes.number,
+ PropTypes.string
+ ]),
active: PropTypes.bool,
disable: PropTypes.bool,
title: PropTypes.string
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index fa2bd8646..d96764225 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -100,10 +100,10 @@ Pagination.propTypes = {
sizePerPageRenderer: PropTypes.func,
paginationTotalRenderer: PropTypes.func,
sizePerPageOptionRenderer: PropTypes.func,
- firstPageText: PropTypes.string,
- prePageText: PropTypes.string,
- nextPageText: PropTypes.string,
- lastPageText: PropTypes.string,
+ firstPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ prePageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ nextPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+ lastPageText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
nextPageTitle: PropTypes.string,
prePageTitle: PropTypes.string,
firstPageTitle: PropTypes.string,
From 5e8bb3426a57cbbb720fb2e675b06486822f835c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Tue, 25 Jun 2019 23:13:31 +0800
Subject: [PATCH 136/250] Publish
- react-bootstrap-table2-example@1.0.27
- react-bootstrap-table2-filter@1.1.10
- react-bootstrap-table2-paginator@2.0.7
- react-bootstrap-table-next@3.1.5
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index d08286211..d2f3a6e93 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.26",
+ "version": "1.0.27",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 08bc8a8bb..21e22f0a0 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.9",
+ "version": "1.1.10",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index bdb0c22d5..4f700ceea 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.6",
+ "version": "2.0.7",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index b5af58a15..07119c6a1 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.4",
+ "version": "3.1.5",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 46258b0264240f1e050db303740b597680b86ec2 Mon Sep 17 00:00:00 2001
From: Gena M
Date: Sat, 13 Jul 2019 08:57:03 +0300
Subject: [PATCH 137/250] Update README, overlayFactory example (#997)
Update example of usage `overlayFactory` according to "react-loading-overlay" documentation.
---
docs/README.md | 11 +++++++++--
.../examples/loading-overlay/table-overlay.js | 9 +++++++--
2 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/docs/README.md b/docs/README.md
index dc12d3aeb..20bbd13bf 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -98,7 +98,14 @@ import overlayFactory from 'react-bootstrap-table2-overlay';
Actually, `react-bootstrap-table-overlay` is depends on [`react-loading-overlay`](https://github.com/derrickpelletier/react-loading-overlay) and `overlayFactory` just a factory function and you can pass any props which available for `react-loading-overlay`:
```js
-overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+overlay={
+ overlayFactory({
+ spinner: true,
+ styles: {
+ overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'})
+ }
+ })
+}
```
### caption - [String | Node]
@@ -334,4 +341,4 @@ handleDataChange = ({ dataSize }) => {
onDataSizeChange={ handleDataChange }
....
/>
-```
\ No newline at end of file
+```
diff --git a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
index efd296cc8..13ce1b120 100644
--- a/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
+++ b/packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js
@@ -36,7 +36,7 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
columns={ columns }
pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
onTableChange={ onTableChange }
- overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+ overlay={ overlayFactory({ spinner: true, styles: { overlay: (base) => ({...base, background: 'rgba(255, 0, 0, 0.5)'}) } }) }
/>
{ sourceCode }
@@ -101,7 +101,12 @@ const RemotePagination = ({ loading, data, page, sizePerPage, onTableChange, tot
columns={ columns }
pagination={ paginationFactory({ page, sizePerPage, totalSize }) }
onTableChange={ onTableChange }
- overlay={ overlayFactory({ spinner: true, background: 'rgba(192,192,192,0.3)' }) }
+ overlay={
+ overlayFactory({
+ spinner: true,
+ styles: { overlay: base => ({ ...base, background: 'rgba(255, 0, 0, 0.5)' }) }
+ })
+ }
/>
{ sourceCode }
From 92f14491777688d9b6b8d2ce76fcb28e40f53f08 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 13 Jul 2019 15:27:55 +0800
Subject: [PATCH 138/250] fix #1004
---
docs/columns.md | 5 +
.../src/context.js | 7 +-
.../cell-edit/cell-edit-with-data-type.js | 123 ++++++++++++++++++
.../src/utils/common.js | 3 +-
.../stories/index.js | 4 +-
packages/react-bootstrap-table2/src/const.js | 6 +-
.../react-bootstrap-table2/src/header-cell.js | 6 +
.../src/store/operators.js | 4 +-
.../react-bootstrap-table2/src/store/type.js | 18 +++
9 files changed, 169 insertions(+), 7 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js
create mode 100644 packages/react-bootstrap-table2/src/store/type.js
diff --git a/docs/columns.md b/docs/columns.md
index 55a4003e6..906536ef4 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -11,6 +11,7 @@ Available properties in a column object:
* [hidden](#hidden)
* [formatter](#formatter)
* [formatExtraData](#formatExtraData)
+* [type](#type)
* [sort](#sort)
* [sortFunc](#sortFunc)
* [sortCaret](#sortCaret)
@@ -132,6 +133,10 @@ The third argument: `components` have following specified properties:
## column.formatExtraData - [Any]
It's only used for [`column.formatter`](#formatter), you can define any value for it and will be passed as fourth argument for [`column.formatter`](#formatter) callback function.
+## column.type - [String]
+Specify the data type on column. Available value so far is `string`, `number`, `bool` and `date`. Default is `string`.
+`column.type` can be used when you enable the cell editing and want to save your cell data with correct data type.
+
## column.sort - [Bool]
Enable the column sort via a `true` value given.
diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index e9317e2f1..ea3c1f0d1 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/packages/react-bootstrap-table2-editor/src/context.js
@@ -56,12 +56,13 @@ export default (
}
handleCellUpdate(row, column, newValue) {
+ const newValueWithType = dataOperator.typeConvert(column.type, newValue);
const { cellEdit } = this.props;
const { beforeSaveCell } = cellEdit.options;
const oldValue = _.get(row, column.dataField);
const beforeSaveCellDone = (result = true) => {
if (result) {
- this.doUpdate(row, column, newValue);
+ this.doUpdate(row, column, newValueWithType);
} else {
this.escapeEditing();
}
@@ -69,7 +70,7 @@ export default (
if (_.isFunction(beforeSaveCell)) {
const result = beforeSaveCell(
oldValue,
- newValue,
+ newValueWithType,
row,
column,
beforeSaveCellDone
@@ -78,7 +79,7 @@ export default (
return;
}
}
- this.doUpdate(row, column, newValue);
+ this.doUpdate(row, column, newValueWithType);
}
doUpdate(row, column, newValue) {
diff --git a/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js
new file mode 100644
index 000000000..28a064bd6
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/cell-edit/cell-edit-with-data-type.js
@@ -0,0 +1,123 @@
+/* eslint prefer-template: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory, { Type } from 'react-bootstrap-table2-editor';
+import Code from 'components/common/code-block';
+import { stockGenerator } from 'utils/common';
+
+const products = stockGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Stock ID'
+}, {
+ dataField: 'name',
+ text: 'Stock Name'
+}, {
+ dataField: 'price',
+ text: 'Price',
+ type: 'number'
+}, {
+ dataField: 'visible',
+ text: 'Visible?',
+ type: 'bool',
+ editor: {
+ type: Type.CHECKBOX,
+ value: 'true:false'
+ }
+}, {
+ dataField: 'inStockDate',
+ text: 'Stock Date',
+ type: 'date',
+ formatter: (cell) => {
+ let dateObj = cell;
+ if (typeof cell !== 'object') {
+ dateObj = new Date(cell);
+ }
+ return `${('0' + dateObj.getUTCDate()).slice(-2)}/${('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/${dateObj.getUTCFullYear()}`;
+ },
+ editor: {
+ type: Type.DATE
+ }
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import cellEditFactory from 'react-bootstrap-table2-editor';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Stock ID'
+}, {
+ dataField: 'name',
+ text: 'Stock Name'
+}, {
+ dataField: 'price',
+ text: 'Price',
+ type: 'number'
+}, {
+ dataField: 'visible',
+ text: 'Visible?',
+ type: 'bool',
+ editor: {
+ type: Type.CHECKBOX,
+ value: 'true:false'
+ }
+}, {
+ dataField: 'inStockDate',
+ text: 'Stock Date',
+ type: 'date',
+ formatter: (cell) => {
+ let dateObj = cell;
+ if (typeof cell !== 'object') {
+ dateObj = new Date(cell);
+ }
+ return \`$\{('0' + dateObj.getUTCDate()).slice(-2)}/$\{('0' + (dateObj.getUTCMonth() + 1)).slice(-2)}/$\{dateObj.getUTCFullYear()}\`;
+ },
+ editor: {
+ type: Type.DATE
+ }
+}];
+
+function afterSaveCell(oldValue, newValue) {
+ console.log('--after save cell--');
+ console.log('New Value was apply as');
+ console.log(newValue);
+ console.log(\`and the type is $\{typeof newValue}\`);
+}
+
+
+
Save Cell Value with Specified Data Type
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index beea31b88..f6baec2f8 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -69,8 +69,9 @@ const endDate = new Date();
export const stockGenerator = (quantity = 5) =>
Array.from({ length: quantity }, (value, index) => ({
id: index,
- name: `Todo item ${index}`,
+ name: `Stock Name ${index}`,
price: Math.floor((Math.random() * 2) + 1),
+ visible: Math.random() > 0.5,
inStockDate:
new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
}));
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 732c5b22e..2add873a0 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -131,6 +131,7 @@ import TextareaEditorTable from 'examples/cell-edit/textarea-editor-table';
import CheckboxEditorTable from 'examples/cell-edit/checkbox-editor-table';
import DateEditorTable from 'examples/cell-edit/date-editor-table';
import CustomEditorTable from 'examples/cell-edit/custom-editor-table';
+import CellEditorWithDataType from 'examples/cell-edit/cell-edit-with-data-type';
// work on row selection
import SingleSelectionTable from 'examples/row-selection/single-selection';
@@ -377,7 +378,8 @@ storiesOf('Cell Editing', module)
.add('Textarea Editor', () =>
Date: Sat, 13 Jul 2019 16:28:48 +0800
Subject: [PATCH 139/250] fix #993
---
docs/row-expand.md | 22 ++++
.../row-expand/parent-row-classname.js | 106 ++++++++++++++++++
.../stories/index.js | 4 +-
.../stories/stylesheet/row-expand/_index.scss | 7 ++
.../stories/stylesheet/storybook.scss | 1 +
.../src/bootstrap-table.js | 3 +-
.../src/row-expand/row-consumer.js | 9 ++
7 files changed, 150 insertions(+), 2 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js
create mode 100644 packages/react-bootstrap-table2-example/stories/stylesheet/row-expand/_index.scss
diff --git a/docs/row-expand.md b/docs/row-expand.md
index 08198fad7..b448a8f12 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -18,6 +18,7 @@
* [expandColumnPosition](#expandColumnPosition)
* [expandColumnRenderer](#expandColumnRenderer)
* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [parentClassName](#parentClassName)
### expandRow.renderer - [Function]
@@ -165,3 +166,24 @@ const expandRow = {
expandColumnPosition: 'right'
};
```
+
+### expandRow.parentClassName - [String | Function]
+Apply the custom class name on parent row of expanded row. For example:
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ parentClassName: 'foo'
+};
+```
+Below case is more flexible way to custom the class name:
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ parentClassName: (isExpanded, row, rowIndex) => {
+ if (rowIndex > 2) return 'foo';
+ return 'bar';
+ }
+};
+```
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js b/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js
new file mode 100644
index 000000000..d384c3742
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/parent-row-classname.js
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow1 = {
+ parentClassName: 'parent-expand-foo',
+ renderer: row => (
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
.....
+ )
+};
+
+...
+ )
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 2add873a0..848458fd2 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -165,6 +165,7 @@ import ExpandOnlyOne from 'examples/row-expand/expand-only-one';
import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
import ExpandHooks from 'examples/row-expand/expand-hooks';
+import ParentRowClassName from 'examples/row-expand/parent-row-classname';
// pagination
import PaginationTable from 'examples/pagination';
@@ -414,7 +415,8 @@ storiesOf('Row Expand', module)
.add('Expand Only One Row at The Same Time', () => {
expanded={ expanded }
expandable={ expandable }
expandRow={ { ...expandRow } }
+ className={ cs(props.className, parentClassName) }
/>,
expanded || isClosing ?
Date: Sun, 21 Jul 2019 16:07:26 +0800
Subject: [PATCH 140/250] fix #1007
---
.../column-filter/custom-filter-logic.js | 18 +++++++++++++-----
1 file changed, 13 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
index 906d9d0f8..540c38b05 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
@@ -12,8 +12,12 @@ import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
class Table extends React.Component {
- filterByPrice = filterVal =>
- products.filter(product => product.price == filterVal);
+ filterByPrice = (filterVal) => {
+ if (filterVal) {
+ return products.filter(product => product.price == filterVal);
+ }
+ return products;
+ }
render() {
const columns = [{
@@ -46,8 +50,12 @@ class Table extends React.Component {
`;
export default class Table extends React.Component {
- filterByPrice = filterVal =>
- products.filter(product => product.price == filterVal);
+ filterByPrice = (filterVal) => {
+ if (filterVal) {
+ return products.filter(product => product.price == filterVal);
+ }
+ return products;
+ }
render() {
const columns = [{
@@ -67,7 +75,7 @@ export default class Table extends React.Component {
return (
-
Implement a eq filter on product price column
+
Implement Custom Filter
Date: Sun, 21 Jul 2019 16:45:11 +0800
Subject: [PATCH 141/250] fix #1014
---
packages/react-bootstrap-table2/src/row/aggregate-row.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-bootstrap-table2/src/row/aggregate-row.js b/packages/react-bootstrap-table2/src/row/aggregate-row.js
index f0d918768..613bb774a 100644
--- a/packages/react-bootstrap-table2/src/row/aggregate-row.js
+++ b/packages/react-bootstrap-table2/src/row/aggregate-row.js
@@ -35,6 +35,7 @@ export default class RowAggregator extends shouldUpdater(eventDelegater(React.Co
this.props.expanded !== nextProps.expanded ||
this.props.expandable !== nextProps.expandable ||
this.props.selectable !== nextProps.selectable ||
+ this.props.selectRow.hideSelectColumn !== nextProps.selectRow.hideSelectColumn ||
this.shouldUpdatedBySelfProps(nextProps)
) {
this.shouldUpdateRowContent = this.shouldRowContentUpdate(nextProps);
From db22bb9adbbd965c9f060f8e6f77d5fb2591f362 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 21 Jul 2019 16:52:28 +0800
Subject: [PATCH 142/250] fix #1015
---
docs/row-expand.md | 3 ++-
.../examples/row-expand/index.js | 4 ++--
.../react-bootstrap-table2/src/row-expand/row-consumer.js | 2 +-
3 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/docs/row-expand.md b/docs/row-expand.md
index b448a8f12..0110fa1f0 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -26,12 +26,13 @@ Specify the content of expand row, `react-bootstrap-table2` will pass a row obje
#### values
* **row**
+* **rowIndex**
#### examples
```js
const expandRow = {
- renderer: row => (
+ renderer: (row, rowIndex) => (
{ `This Expand row is belong to rowKey ${row.id}` }
You can render anything here, also you can add additional data on every row object
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/index.js b/packages/react-bootstrap-table2-example/examples/row-expand/index.js
index 0a089046e..eb21023c7 100644
--- a/packages/react-bootstrap-table2-example/examples/row-expand/index.js
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/index.js
@@ -18,9 +18,9 @@ const columns = [{
}];
const expandRow = {
- renderer: row => (
+ renderer: (row, rowIndex) => (
-
{ `This Expand row is belong to rowKey ${row.id}` }
+
{ `This Expand row is belong to rowKey ${row.id} and index: ${rowIndex}` }
You can render anything here, also you can add additional data on every row object
expandRow.renderer callback will pass the origin row object to you
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 47dffbc32..8f30dc11e 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -34,7 +34,7 @@ export default (Component) => {
expanded={ expanded }
onClosed={ () => expandRow.onClosed(key) }
>
- { expandRow.renderer(props.row) }
+ { expandRow.renderer(props.row, props.rowIndex) }
: null
];
};
From 72f7333a3409a3aa697d2afd6221ecc4b112f03c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 22 Jul 2019 20:14:49 +0800
Subject: [PATCH 143/250] Publish
- react-bootstrap-table2-editor@1.3.0
- react-bootstrap-table2-example@1.0.28
- react-bootstrap-table-next@3.1.6
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index b8171170b..ad90e18ff 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.2.4",
+ "version": "1.3.0",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index d2f3a6e93..8891616dc 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.27",
+ "version": "1.0.28",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 07119c6a1..001219366 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.5",
+ "version": "3.1.6",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 9af61b54b1b54cec9c6685384be280860e7bdde4 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 22 Jul 2019 20:22:09 +0800
Subject: [PATCH 144/250] Publish
- react-bootstrap-table2-editor@1.3.1
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index ad90e18ff..afcfcdcd9 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.3.0",
+ "version": "1.3.1",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
From 6530ff1570fdc5c168af7bf71bccdfcdc34b7e12 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 22 Jul 2019 20:22:38 +0800
Subject: [PATCH 145/250] Publish
- react-bootstrap-table-next@3.1.7
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 001219366..14cedf852 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.6",
+ "version": "3.1.7",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 423769c1349034a5988e8a94b0b5b8831fd7cc2d Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 27 Jul 2019 16:19:52 +0800
Subject: [PATCH 146/250] fix #1007 (#1032)
---
.../column-filter/custom-filter-logic.js | 8 ++---
.../src/context.js | 15 +++-------
.../src/filter.js | 10 ++++++-
.../test/context.test.js | 30 ++-----------------
4 files changed, 19 insertions(+), 44 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
index 540c38b05..25b37bb2c 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
@@ -50,11 +50,11 @@ class Table extends React.Component {
`;
export default class Table extends React.Component {
- filterByPrice = (filterVal) => {
+ filterByPrice = (filterVal, data) => {
if (filterVal) {
- return products.filter(product => product.price == filterVal);
+ return data.filter(product => product.price == filterVal);
}
- return products;
+ return data;
}
render() {
@@ -75,7 +75,7 @@ export default class Table extends React.Component {
return (
-
Implement Custom Filter
+
Implement a eq price filter
(currFilters) => {
const filterObj = currFilters[dataField];
filterFn = factory(filterObj.filterType);
let filterValue;
+ let customFilter;
for (let i = 0; i < columns.length; i += 1) {
if (columns[i].dataField === dataField) {
filterValue = columns[i].filterValue;
+ if (columns[i].filter) {
+ customFilter = columns[i].filter.props.onFilter;
+ }
break;
}
}
- result = filterFn(result, dataField, filterObj, filterValue);
+ if (customFilter) {
+ result = customFilter(filterObj.filterVal, result);
+ } else {
+ result = filterFn(result, dataField, filterObj, filterValue);
+ }
});
return result;
};
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index fcad5ddd4..face019d7 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -228,33 +228,7 @@ describe('FilterContext', () => {
});
});
- describe('if filter.props.onFilter is defined', () => {
- const filterVal = '3';
- const onFilter = jest.fn();
- const customColumns = columns.map((column, i) => {
- if (i === 1) {
- return {
- ...column,
- filter: textFilter({ onFilter })
- };
- }
- return column;
- });
-
- beforeEach(() => {
- wrapper = shallow(shallowContext(false, customColumns));
- wrapper.render();
- instance = wrapper.instance();
- });
-
- it('should call filter.props.onFilter correctly', () => {
- instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
- expect(onFilter).toHaveBeenCalledTimes(1);
- expect(onFilter).toHaveBeenCalledWith(filterVal);
- });
- });
-
- describe('if filter.props.onFilter is defined and return an undefined data', () => {
+ describe('if filter.props.onFilter is defined and return data', () => {
const mockReturn = [{
id: 1,
name: 'A'
@@ -280,7 +254,7 @@ describe('FilterContext', () => {
it('should call filter.props.onFilter correctly', () => {
instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
expect(onFilter).toHaveBeenCalledTimes(1);
- expect(onFilter).toHaveBeenCalledWith(filterVal);
+ expect(onFilter).toHaveBeenCalledWith(filterVal, data);
});
it('should set data correctly', () => {
From 2619a1e424dde860fdb1f5ff6287db6ab90cacba Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 27 Jul 2019 16:37:09 +0800
Subject: [PATCH 147/250] Update issue templates
---
.github/ISSUE_TEMPLATE/bug_report.md | 24 ++++++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 000000000..a41ed84d7
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily and handle it effectively
From b50dc95e0660a5d4d13e52f746b46f1a0bbd92a3 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 27 Jul 2019 16:41:44 +0800
Subject: [PATCH 148/250] Update issue templates
---
.github/ISSUE_TEMPLATE/bug_report.md | 2 +-
.github/ISSUE_TEMPLATE/feature_request.md | 23 +++++++++++++++++++++++
2 files changed, 24 insertions(+), 1 deletion(-)
create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index a41ed84d7..49d515ed9 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -8,7 +8,7 @@ assignees: AllenFang
---
**Describe the bug**
-A clear and concise description of what the bug is.
+A clear and concise description of what the bug is. In addition, please search issues before you open a report to make sure there's no any duplicated report
**To Reproduce**
Steps to reproduce the behavior:
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 000000000..9ab483b61
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,23 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Is this feature requested before?**
+Please search issues to make sure to create feature which is never report yet.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
From c59b96343607aa36820daab03c61ba90e60cbc64 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sat, 27 Jul 2019 16:43:54 +0800
Subject: [PATCH 149/250] Update issue templates
---
.github/ISSUE_TEMPLATE/i-have-a-question.md | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
create mode 100644 .github/ISSUE_TEMPLATE/i-have-a-question.md
diff --git a/.github/ISSUE_TEMPLATE/i-have-a-question.md b/.github/ISSUE_TEMPLATE/i-have-a-question.md
new file mode 100644
index 000000000..d05d43578
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/i-have-a-question.md
@@ -0,0 +1,17 @@
+---
+name: I have a question
+about: I have a question
+title: ''
+labels: ''
+assignees: AllenFang
+
+---
+
+**Question**
+A clear and concise description of you question. In addition, please search issues before you open a question to make sure there's no any duplicated questions.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**codesandbox**
+Please give a simple and minimal example on https://codesandbox.io so that we can reproduce it easily.
From 856e63d524736de350bd219c6c818d259cd3fed0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 27 Jul 2019 17:11:11 +0800
Subject: [PATCH 150/250] fix #1027
---
.../react-bootstrap-table2-editor/README.md | 4 +-
.../src/dropdown-editor.js | 10 ++-
.../src/editing-cell.js | 2 +-
...pdown-editor-with-dynamic-options-table.js | 73 +++++++++++--------
4 files changed, 53 insertions(+), 36 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md
index b4e6b99aa..cda2e0a59 100644
--- a/packages/react-bootstrap-table2-editor/README.md
+++ b/packages/react-bootstrap-table2-editor/README.md
@@ -140,7 +140,7 @@ const columns = [
text: 'Job Type',
editor: {
type: Type.SELECT,
- getOptions: () => [.....]
+ getOptions: (setOptions, { row, column }) => [.....]
}
}];
@@ -152,7 +152,7 @@ const columns = [
text: 'Job Type',
editor: {
type: Type.SELECT,
- getOptions: (setOptions) => {
+ getOptions: (setOptions, { row, column }) => {
setTimeout(() => setOptions([...]), 1500);
}
}
diff --git a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js
index a54bc4d62..b019e2ea6 100644
--- a/packages/react-bootstrap-table2-editor/src/dropdown-editor.js
+++ b/packages/react-bootstrap-table2-editor/src/dropdown-editor.js
@@ -8,7 +8,13 @@ class DropDownEditor extends Component {
super(props);
let options = props.options;
if (props.getOptions) {
- options = props.getOptions(this.setOptions.bind(this)) || [];
+ options = props.getOptions(
+ this.setOptions.bind(this),
+ {
+ row: props.row,
+ column: props.column
+ }
+ ) || [];
}
this.state = { options };
}
@@ -54,6 +60,8 @@ class DropDownEditor extends Component {
}
DropDownEditor.propTypes = {
+ row: PropTypes.object.isRequired,
+ column: PropTypes.object.isRequired,
defaultValue: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js
index 7c693b127..2a0d85b0d 100644
--- a/packages/react-bootstrap-table2-editor/src/editing-cell.js
+++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js
@@ -201,7 +201,7 @@ export default (_, onStartEdit) =>
if (_.isFunction(column.editorRenderer)) {
editor = column.editorRenderer(editorProps, value, row, column, rowIndex, columnIndex);
} else if (isDefaultEditorDefined && column.editor.type === EDITTYPE.SELECT) {
- editor =
Date: Sat, 27 Jul 2019 17:11:59 +0800
Subject: [PATCH 151/250] fix wrong example code
---
.../examples/column-filter/custom-filter-logic.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
index 25b37bb2c..a861f5af1 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js
@@ -12,11 +12,11 @@ import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
class Table extends React.Component {
- filterByPrice = (filterVal) => {
+ filterByPrice = (filterVal, data) => {
if (filterVal) {
- return products.filter(product => product.price == filterVal);
+ return data.filter(product => product.price == filterVal);
}
- return products;
+ return data;
}
render() {
From 0c2863d63c38f1e527e320ab2187c467372947b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micka=C3=ABl=20Gauvin?=
Date: Sat, 3 Aug 2019 09:49:09 +0200
Subject: [PATCH 152/250] Update multiselect.js (#1025)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
applyFilter should take the entire selection and not just the first element of the sélection
---
.../react-bootstrap-table2-filter/src/components/multiselect.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-filter/src/components/multiselect.js b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
index 66ad4a017..ae8714e2a 100644
--- a/packages/react-bootstrap-table2-filter/src/components/multiselect.js
+++ b/packages/react-bootstrap-table2-filter/src/components/multiselect.js
@@ -65,7 +65,7 @@ class MultiSelectFilter extends Component {
needFilter = true;
}
if (needFilter) {
- this.applyFilter(this.selectInput.value);
+ this.applyFilter(getSelections(this.selectInput));
}
}
From c53d2612d40295d0f4398634d89849da97c563b0 Mon Sep 17 00:00:00 2001
From: Peperoncino <2wua4nlyi@gmail.com>
Date: Sat, 3 Aug 2019 16:49:54 +0900
Subject: [PATCH 153/250] Fromatted Value => Formatted Value (#1038)
---
packages/react-bootstrap-table2-example/stories/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 848458fd2..93ca8c481 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -443,7 +443,7 @@ storiesOf('Table Search', module)
.add('Default Search Table', () =>
Date: Sat, 10 Aug 2019 13:45:02 +0800
Subject: [PATCH 154/250] fix #1030
---
.../column-toggle-with-filter.js | 94 +++++++++++++++++++
.../stories/index.js | 4 +-
.../src/components/date.js | 30 ++++--
.../src/components/multiselect.js | 13 ++-
.../src/components/number.js | 31 +++++-
.../src/components/select.js | 15 ++-
.../src/components/text.js | 11 ++-
.../src/context.js | 3 +-
.../src/bootstrap-table.js | 1 +
.../react-bootstrap-table2/src/header-cell.js | 11 ++-
packages/react-bootstrap-table2/src/header.js | 3 +
11 files changed, 197 insertions(+), 19 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js
diff --git a/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js b/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js
new file mode 100644
index 000000000..e67541d8a
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-toggle/column-toggle-with-filter.js
@@ -0,0 +1,94 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ToggleList } = ColumnToggle;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ 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';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import ToolkitProvider, { ColumnToggle } from 'react-bootstrap-table2-toolkit';
+
+const { ToggleList } = ColumnToggle;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ sort: true,
+ filter: textFilter()
+}];
+
+
+ {
+ props => (
+
+
+`;
+
+export default () => (
+
+
Table will keep the filter/sort state when column toggle
+
+ {
+ props => (
+
+
+
{ sourceCode }
+
{ this.props.children }
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index b2ac582c8..42d419e48 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -91,6 +91,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
sortOrder={ this.props.sortOrder }
onSort={ this.props.onSort }
onFilter={ this.props.onFilter }
+ currFilters={ this.props.currFilters }
onExternalFilter={ this.props.onExternalFilter }
selectRow={ selectRow }
expandRow={ expandRow }
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 332150712..18f69c0be 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -18,6 +18,7 @@ const HeaderCell = (props) => {
sortOrder,
isLastSorting,
onFilter,
+ currFilters,
onExternalFilter
} = props;
@@ -99,7 +100,14 @@ const HeaderCell = (props) => {
const onCustomFilter = onExternalFilter(column, filter.props.type);
filterElm = filterRenderer(onCustomFilter, column);
} else if (filter) {
- filterElm =
Date: Sat, 10 Aug 2019 14:37:40 +0800
Subject: [PATCH 155/250] fix test cases for #1030
---
.../test/components/select.test.js | 2 +-
.../react-bootstrap-table2-filter/test/context.test.js | 7 ++++---
packages/react-bootstrap-table2/test/header-cell.test.js | 4 +++-
3 files changed, 8 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/test/components/select.test.js b/packages/react-bootstrap-table2-filter/test/components/select.test.js
index 80d30d7a3..baec4d910 100644
--- a/packages/react-bootstrap-table2-filter/test/components/select.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/select.test.js
@@ -25,7 +25,7 @@ describe('Select Filter', () => {
2: 'Unknown'
};
- afterEach(() => {
+ beforeEach(() => {
onFilter.reset();
onFilterFirstReturn.reset();
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index face019d7..7b15a28d2 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -94,7 +94,8 @@ describe('FilterContext', () => {
expect(mockBase).toHaveBeenCalledWith({
data,
onFilter: wrapper.instance().onFilter,
- onExternalFilter: wrapper.instance().onExternalFilter
+ onExternalFilter: wrapper.instance().onExternalFilter,
+ currFilters: wrapper.instance().currFilters
});
});
});
@@ -103,7 +104,6 @@ describe('FilterContext', () => {
beforeEach(() => {
wrapper = shallow(shallowContext(true));
wrapper.render();
- wrapper.instance().currFilters = { price: { filterVal: 20, filterType: FILTER_TYPE.TEXT } };
});
it('should pass original data without internal filtering', () => {
@@ -111,7 +111,8 @@ describe('FilterContext', () => {
expect(mockBase).toHaveBeenCalledWith({
data,
onFilter: wrapper.instance().onFilter,
- onExternalFilter: wrapper.instance().onExternalFilter
+ onExternalFilter: wrapper.instance().onExternalFilter,
+ currFilters: wrapper.instance().currFilters
});
});
});
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index b0c45254d..fa3861de7 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -728,7 +728,9 @@ describe('HeaderCell', () => {
Filter
}
};
- wrapper = shallow(
Date: Sat, 10 Aug 2019 07:38:59 +0100
Subject: [PATCH 156/250] Update README.md (#1047)
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index ca053501d..290d5ee78 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# react-bootstrap-table2
[](https://travis-ci.org/react-bootstrap-table/react-bootstrap-table2)
-Rebuilt of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
+Rebuild of [react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table)
> Note that `react-bootstrap-table2`'s npm module name is [**`react-bootstrap-table-next`**](https://www.npmjs.com/package/react-bootstrap-table-next) due to the name being already taken.
From 08ec8a9f65c2a7dbb00fc54b62359472b864e00c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 10 Aug 2019 14:51:26 +0800
Subject: [PATCH 157/250] fix #1044
---
packages/react-bootstrap-table2/src/store/type.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/store/type.js b/packages/react-bootstrap-table2/src/store/type.js
index b5084e666..5b9849838 100644
--- a/packages/react-bootstrap-table2/src/store/type.js
+++ b/packages/react-bootstrap-table2/src/store/type.js
@@ -1,7 +1,7 @@
import Const from '../const';
export const typeConvert = (type, value) => {
- if (!type || type === Const.TYPE_STRING) {
+ if (type === Const.TYPE_STRING) {
return String(value);
} else if (type === Const.TYPE_NUMBER) {
return Number(value);
From 1a44ce0ea61d90d140910b5464ae4bb9140c479c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 10 Aug 2019 15:05:53 +0800
Subject: [PATCH 158/250] fix #1051
---
.../style/react-bootstrap-table2-paginator.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss b/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss
index a99007e6b..e2fb0a7a8 100644
--- a/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss
+++ b/packages/react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss
@@ -1,6 +1,6 @@
.react-bootstrap-table-page-btns-ul {
float: right;
- margin-top: 0px;
+ margin-top: 0px !important;
}
.react-bootstrap-table-pagination-list-hidden {
From 110744f4cb9d38db1f2a0a74335a278f5adcf485 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 12 Aug 2019 21:07:14 +0800
Subject: [PATCH 159/250] Publish
- react-bootstrap-table2-editor@1.3.2
- react-bootstrap-table2-example@1.0.29
- react-bootstrap-table2-filter@1.1.11
- react-bootstrap-table2-paginator@2.0.8
- react-bootstrap-table-next@3.1.8
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index afcfcdcd9..2f5df7c78 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.3.1",
+ "version": "1.3.2",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 8891616dc..f38f1c97f 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.28",
+ "version": "1.0.29",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 21e22f0a0..e2b298e77 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.10",
+ "version": "1.1.11",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 4f700ceea..f89402048 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.7",
+ "version": "2.0.8",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 14cedf852..4655e03fc 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.7",
+ "version": "3.1.8",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From eb204f65261da47f479eab9d1417e06c57ff7f39 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 18 Aug 2019 17:04:17 +0800
Subject: [PATCH 160/250] fix #1060
---
packages/react-bootstrap-table2-filter/src/filter.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 0e2a72a74..8769e4fd6 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -234,6 +234,7 @@ export const filters = (data, columns, _) => (currFilters) => {
let result = data;
let filterFn;
Object.keys(currFilters).forEach((dataField) => {
+ let currentResult;
const filterObj = currFilters[dataField];
filterFn = factory(filterObj.filterType);
let filterValue;
@@ -248,9 +249,12 @@ export const filters = (data, columns, _) => (currFilters) => {
}
}
if (customFilter) {
- result = customFilter(filterObj.filterVal, result);
- } else {
+ currentResult = customFilter(filterObj.filterVal, result);
+ }
+ if (typeof currentResult === 'undefined') {
result = filterFn(result, dataField, filterObj, filterValue);
+ } else {
+ result = currentResult;
}
});
return result;
From 43b5eeb74f9cf700dfa6dff0a87e967b6ac0cf43 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 19 Aug 2019 21:17:00 +0800
Subject: [PATCH 161/250] fix #1062
---
packages/react-bootstrap-table2/src/cell.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-bootstrap-table2/src/cell.js b/packages/react-bootstrap-table2/src/cell.js
index c3684bd20..d72a68fb9 100644
--- a/packages/react-bootstrap-table2/src/cell.js
+++ b/packages/react-bootstrap-table2/src/cell.js
@@ -28,6 +28,7 @@ class Cell extends eventDelegater(Component) {
shouldUpdate =
(nextProps.column.formatter ? !_.isEqual(this.props.row, nextProps.row) : false) ||
this.props.column.hidden !== nextProps.column.hidden ||
+ this.props.column.isDummyField !== nextProps.column.isDummyField ||
this.props.rowIndex !== nextProps.rowIndex ||
this.props.columnIndex !== nextProps.columnIndex ||
this.props.className !== nextProps.className ||
From 70827eecd6f6cb791d8b14b1a53a5413d1131400 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 19 Aug 2019 21:28:22 +0800
Subject: [PATCH 162/250] fix #1061
---
packages/react-bootstrap-table2/src/contexts/index.js | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 1df8d6ca4..1793dfbd2 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -91,6 +91,13 @@ const withContext = Base =>
this.PaginationContext = nextProps.pagination.createContext(
this.isRemotePagination, this.handleRemotePageChange);
}
+ if (!nextProps.cellEdit && this.props.cellEdit) {
+ this.CellEditContext = null;
+ }
+ if (nextProps.cellEdit && !this.props.cellEdit) {
+ this.CellEditContext = nextProps.cellEdit.createContext(
+ _, dataOperator, this.isRemoteCellEdit, this.handleRemoteCellChange);
+ }
}
renderBase() {
From 23cb0bb317e41ec97e36148c926526af61b361c8 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 24 Aug 2019 13:22:04 +0800
Subject: [PATCH 163/250] fix #1054
---
.../react-bootstrap-table2-filter/README.md | 22 ++++++-
.../src/components/select.js | 62 ++++++++++++-------
2 files changed, 59 insertions(+), 25 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index b38007ec0..46097baee 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -115,7 +115,9 @@ const qualityFilter = selectFilter({
// omit...
```
-> Note, the selectOptions can be an array also:
+> Note, the selectOptions can be an array or a function which return an array:
+
+### Array as options
```js
const selectOptions = [
@@ -133,6 +135,24 @@ const columns = [
})
}];
```
+### Function as options
+
+```js
+const selectOptions = [
+ { value: 0, label: 'good' },
+ { value: 1, label: 'Bad' },
+ { value: 2, label: 'unknown' }
+];
+const columns = [
+ ..., {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+ filter: selectFilter({
+ options: () => selectOptions
+ })
+}];
+```
The benifit is `react-bootstrap-table2` will render the select options by the order of array.
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 7b83827cc..7b49a8c68 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -1,6 +1,7 @@
/* eslint react/require-default-props: 0 */
/* eslint no-return-assign: 0 */
/* eslint react/no-unused-prop-types: 0 */
+/* eslint class-methods-use-this: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { LIKE, EQ } from '../comparison';
@@ -44,7 +45,8 @@ class SelectFilter extends Component {
constructor(props) {
super(props);
this.filter = this.filter.bind(this);
- const isSelected = getOptionValue(props.options, this.getDefaultValue()) !== undefined;
+ this.options = this.getOptions(props);
+ const isSelected = getOptionValue(this.options, this.getDefaultValue()) !== undefined;
this.state = { isSelected };
}
@@ -69,19 +71,30 @@ class SelectFilter extends Component {
componentDidUpdate(prevProps) {
let needFilter = false;
- if (this.props.defaultValue !== prevProps.defaultValue) {
+ const {
+ column,
+ onFilter,
+ defaultValue
+ } = this.props;
+ const nextOptions = this.getOptions(this.props);
+ if (defaultValue !== prevProps.defaultValue) {
needFilter = true;
- } else if (!optionsEquals(this.props.options, prevProps.options)) {
+ } else if (!optionsEquals(nextOptions, this.options)) {
+ this.options = nextOptions;
needFilter = true;
}
if (needFilter) {
const value = this.selectInput.value;
if (value) {
- this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
+ onFilter(column, FILTER_TYPE.SELECT)(value);
}
}
}
+ getOptions(props) {
+ return typeof props.options === 'function' ? props.options(props.column) : props.options;
+ }
+
getDefaultValue() {
const { filterState, defaultValue } = this.props;
if (filterState && typeof filterState.filterVal !== 'undefined') {
@@ -90,25 +103,6 @@ class SelectFilter extends Component {
return defaultValue;
}
- getOptions() {
- const optionTags = [];
- const { options, placeholder, column, withoutEmptyOption } = this.props;
- if (!withoutEmptyOption) {
- optionTags.push((
- { placeholder || `Select ${column.text}...` }
- ));
- }
- if (Array.isArray(options)) {
- options.forEach(({ value, label }) =>
- optionTags.push({ label } ));
- } else {
- Object.keys(options).forEach(key =>
- optionTags.push({ options[key] } )
- );
- }
- return optionTags;
- }
-
cleanFiltered() {
const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : '';
this.setState(() => ({ isSelected: value !== '' }));
@@ -128,6 +122,26 @@ class SelectFilter extends Component {
this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
}
+ renderOptions() {
+ const optionTags = [];
+ const { options } = this;
+ const { placeholder, column, withoutEmptyOption } = this.props;
+ if (!withoutEmptyOption) {
+ optionTags.push((
+ { placeholder || `Select ${column.text}...` }
+ ));
+ }
+ if (Array.isArray(options)) {
+ options.forEach(({ value, label }) =>
+ optionTags.push({ label } ));
+ } else {
+ Object.keys(options).forEach(key =>
+ optionTags.push({ options[key] } )
+ );
+ }
+ return optionTags;
+ }
+
render() {
const {
style,
@@ -163,7 +177,7 @@ class SelectFilter extends Component {
onClick={ e => e.stopPropagation() }
defaultValue={ this.getDefaultValue() || '' }
>
- { this.getOptions() }
+ { this.renderOptions() }
);
From 47f6340a998a96ebafb2a356553269ba5349c714 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 24 Aug 2019 13:22:14 +0800
Subject: [PATCH 164/250] story for #1054
---
.../select-filter-option-type.js | 150 ++++++++++++++++++
.../stories/index.js | 2 +
2 files changed, 152 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js
new file mode 100644
index 000000000..5591d4a86
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js
@@ -0,0 +1,150 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsQualityGenerator } from 'utils/common';
+
+const products = productsQualityGenerator(6);
+
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
+const selectOptionsArr = [{
+ value: 0,
+ label: 'good'
+}, {
+ value: 1,
+ label: 'Bad'
+}, {
+ value: 2,
+ label: 'unknown'
+}];
+
+const columns1 = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions
+ })
+}];
+
+const columns2 = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+ filter: selectFilter({
+ options: selectOptionsArr
+ })
+}];
+
+const columns3 = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '',
+ filter: selectFilter({
+ options: () => selectOptionsArr
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+// Object map options
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
+// Array options
+const selectOptionsArr = [{
+ value: 0,
+ label: 'good'
+}, {
+ value: 1,
+ label: 'Bad'
+}, {
+ value: 2,
+ label: 'unknown'
+}];
+
+const columns1 = [..., {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions
+ })
+}];
+
+
Options as an object
+ Options as an array
+ Options as a function which return an array
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 6acd9b910..0dc719601 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -68,6 +68,7 @@ import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSens
import CustomTextFilter from 'examples/column-filter/custom-text-filter';
import CustomFilterValue from 'examples/column-filter/custom-filter-value';
import SelectFilter from 'examples/column-filter/select-filter';
+import ConfigureSelectFilterOptions from 'examples/column-filter/select-filter-option-type';
import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order';
@@ -300,6 +301,7 @@ storiesOf('Column Filter', module)
.add('Text Filter with Case Sensitive', () =>
Date: Sat, 24 Aug 2019 14:04:49 +0800
Subject: [PATCH 165/250] add story and docs for #1067
---
docs/columns.md | 4 +
.../examples/search/searchable-column.js | 87 +++++++++++++++++++
.../stories/index.js | 2 +
.../react-bootstrap-table2/src/header-cell.js | 3 +-
4 files changed, 95 insertions(+), 1 deletion(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/search/searchable-column.js
diff --git a/docs/columns.md b/docs/columns.md
index 906536ef4..525ec4d30 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -49,6 +49,7 @@ Available properties in a column object:
* [editorRenderer](#editorRenderer)
* [filter](#filter)
* [filterValue](#filterValue)
+* [searchable](#searchable)
* [csvType](#csvType)
* [csvFormatter](#csvFormatter)
* [csvText](#csvText)
@@ -917,6 +918,9 @@ A final `String` value you want to be filtered.
}
```
+## column.searchable - [Boolean]
+Default the column is searchable. Give `false` to disable search functionality on specified column.
+
## column.csvType - [Object]
Default is `String`. Currently, the available value is `String` and `Number`. If `Number` assigned, the cell value will not wrapped with double quote.
diff --git a/packages/react-bootstrap-table2-example/examples/search/searchable-column.js b/packages/react-bootstrap-table2-example/examples/search/searchable-column.js
new file mode 100644
index 000000000..dc9b29340
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/search/searchable-column.js
@@ -0,0 +1,87 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ searchable: false
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ searchable: false
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ searchable: false
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ searchable: false
+}];
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+
Column name and price is unsearchable
+
+
{ sourceCode }
+
Date: Sat, 24 Aug 2019 14:59:36 +0800
Subject: [PATCH 166/250] fix #1006
---
.../react-bootstrap-table2/src/bootstrap-table.js | 1 +
.../src/row-expand/expand-row.js | 11 +++++++----
.../src/row-expand/row-consumer.js | 6 ++++++
3 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 42d419e48..692c29f3b 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -191,6 +191,7 @@ BootstrapTable.propTypes = {
Const.INDICATOR_POSITION_LEFT,
Const.INDICATOR_POSITION_RIGHT
]),
+ className: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
parentClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
}),
rowStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-row.js b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
index 3699adae7..140ce9036 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-row.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-row.js
@@ -1,10 +1,11 @@
+import cs from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';
-const ExpandRow = ({ children, expanded, onClosed, ...rest }) => (
+const ExpandRow = ({ children, expanded, onClosed, className, ...rest }) => (
-
+
(
ExpandRow.propTypes = {
children: PropTypes.node,
expanded: PropTypes.bool,
- onClosed: PropTypes.func
+ onClosed: PropTypes.func,
+ className: PropTypes.string
};
ExpandRow.defaultProps = {
children: null,
expanded: false,
- onClosed: null
+ onClosed: null,
+ className: ''
};
export default ExpandRow;
diff --git a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
index 8f30dc11e..0db8b64bf 100644
--- a/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-expand/row-consumer.js
@@ -8,6 +8,7 @@ import ExpansionContext from '../contexts/row-expand-context';
export default (Component) => {
const renderWithExpansion = (props, expandRow) => {
let parentClassName = '';
+ let className = '';
const key = props.value;
const expanded = _.contains(expandRow.expanded, key);
@@ -17,6 +18,10 @@ export default (Component) => {
parentClassName = _.isFunction(expandRow.parentClassName) ?
expandRow.parentClassName(expanded, props.row, props.rowIndex) :
(expandRow.parentClassName || '');
+
+ className = _.isFunction(expandRow.className) ?
+ expandRow.className(expanded, props.row, props.rowIndex) :
+ (expandRow.className || '');
}
return [
@@ -33,6 +38,7 @@ export default (Component) => {
colSpan={ props.visibleColumnSize }
expanded={ expanded }
onClosed={ () => expandRow.onClosed(key) }
+ className={ className }
>
{ expandRow.renderer(props.row, props.rowIndex) }
: null
From 056957b0b5fa700c307d31f506a206a9310c497f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 24 Aug 2019 14:59:49 +0800
Subject: [PATCH 167/250] add story for #1006
---
.../row-expand/expanding-row-classname.js | 106 ++++++++++++++++++
.../stories/index.js | 4 +-
.../stories/stylesheet/row-expand/_index.scss | 4 +-
3 files changed, 111 insertions(+), 3 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js
diff --git a/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js
new file mode 100644
index 000000000..c6e977dd2
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-expand/expanding-row-classname.js
@@ -0,0 +1,106 @@
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { productsExpandRowsGenerator } from 'utils/common';
+
+const products = productsExpandRowsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const expandRow1 = {
+ className: 'expanding-foo',
+ renderer: row => (
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
.....
+ )
+};
+
+...
+ )
+};
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index e9012a549..283278c48 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -167,6 +167,7 @@ import CustomExpandColumn from 'examples/row-expand/custom-expand-column';
import ExpandColumnPosition from 'examples/row-expand/expand-column-position';
import ExpandHooks from 'examples/row-expand/expand-hooks';
import ParentRowClassName from 'examples/row-expand/parent-row-classname';
+import ExpandingRowClassName from 'examples/row-expand/expanding-row-classname';
// pagination
import PaginationTable from 'examples/pagination';
@@ -420,7 +421,8 @@ storiesOf('Row Expand', module)
.add('Custom Expand Indicator', () =>
Date: Sat, 24 Aug 2019 14:59:58 +0800
Subject: [PATCH 168/250] docs for #1006
---
docs/row-expand.md | 22 ++++++++++++++++++++++
1 file changed, 22 insertions(+)
diff --git a/docs/row-expand.md b/docs/row-expand.md
index 0110fa1f0..a4b49d528 100644
--- a/docs/row-expand.md
+++ b/docs/row-expand.md
@@ -18,6 +18,7 @@
* [expandColumnPosition](#expandColumnPosition)
* [expandColumnRenderer](#expandColumnRenderer)
* [expandHeaderColumnRenderer](#expandHeaderColumnRenderer)
+* [className](#className)
* [parentClassName](#parentClassName)
### expandRow.renderer - [Function]
@@ -168,6 +169,27 @@ const expandRow = {
};
```
+### expandRow.className - [String | Function]
+Apply the custom class name on the expanding row. For example:
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ className: 'foo'
+};
+```
+following usage is more flexible way for customing the class name:
+
+```js
+const expandRow = {
+ renderer: (row) => ...,
+ className: (isExpanded, row, rowIndex) => {
+ if (rowIndex > 2) return 'foo';
+ return 'bar';
+ }
+};
+```
+
### expandRow.parentClassName - [String | Function]
Apply the custom class name on parent row of expanded row. For example:
From bb42514e56d0f9ec2c6480ac3fd49c61f01090ae Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 25 Aug 2019 21:56:08 +0800
Subject: [PATCH 169/250] Publish
- react-bootstrap-table2-example@1.0.30
- react-bootstrap-table2-filter@1.1.12
- react-bootstrap-table-next@3.1.9
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index f38f1c97f..eeccdd780 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.29",
+ "version": "1.0.30",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index e2b298e77..8f0cae0b2 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.11",
+ "version": "1.1.12",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 4655e03fc..1338c4d53 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.8",
+ "version": "3.1.9",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 7c8bf00cdeb44490de7b4dd0ef9c0ed553e6edd7 Mon Sep 17 00:00:00 2001
From: Bill Parrott
Date: Wed, 28 Aug 2019 15:32:22 -0500
Subject: [PATCH 170/250] execute react-codemod on entire codebase to remove
warnings on React 16.9.x
---
packages/react-bootstrap-table2-editor/src/context.js | 4 +++-
.../react-bootstrap-table2-editor/src/editing-cell.js | 7 ++++---
.../react-bootstrap-table2-editor/test/context.test.js | 8 ++++----
.../react-bootstrap-table2-filter/src/components/text.js | 3 ++-
packages/react-bootstrap-table2-filter/src/context.js | 3 ++-
.../test/components/text.test.js | 2 +-
.../react-bootstrap-table2-paginator/src/data-context.js | 5 +++--
.../src/pagination-handler.js | 7 ++++---
.../react-bootstrap-table2-paginator/src/state-context.js | 3 ++-
.../test/data-context.test.js | 4 ++--
.../test/pagination-handler.test.js | 8 ++++----
.../test/state-context.test.js | 4 ++--
.../src/search/SearchBar.js | 3 ++-
.../react-bootstrap-table2-toolkit/src/search/context.js | 3 ++-
packages/react-bootstrap-table2/src/bootstrap-table.js | 3 ++-
.../react-bootstrap-table2/src/contexts/data-context.js | 3 ++-
packages/react-bootstrap-table2/src/contexts/index.js | 7 ++++---
.../src/contexts/row-expand-context.js | 3 ++-
.../src/contexts/selection-context.js | 3 ++-
.../test/contexts/data-context.test.js | 2 +-
.../test/contexts/selection-context.test.js | 6 +++---
21 files changed, 53 insertions(+), 38 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index ea3c1f0d1..7394070fa 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/packages/react-bootstrap-table2-editor/src/context.js
@@ -16,6 +16,7 @@ export default (
static propTypes = {
data: PropTypes.array.isRequired,
selectRow: PropTypes.object,
+ // eslint-disable-next-line react/no-unused-prop-types
options: PropTypes.shape({
mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
onErrorMessageDisappear: PropTypes.func,
@@ -43,7 +44,8 @@ export default (
};
}
- componentWillReceiveProps(nextProps) {
+ // eslint-disable-next-line camelcase, react/sort-comp
+ UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.cellEdit && isRemoteCellEdit()) {
if (nextProps.cellEdit.options.errorMessage) {
this.setState(() => ({
diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js
index 2a0d85b0d..0fdfac3c3 100644
--- a/packages/react-bootstrap-table2-editor/src/editing-cell.js
+++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js
@@ -15,7 +15,7 @@ import EditorIndicator from './editor-indicator';
import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
export default (_, onStartEdit) =>
- class EditingCell extends Component {
+ (class EditingCell extends Component {
static propTypes = {
row: PropTypes.object.isRequired,
rowIndex: PropTypes.number.isRequired,
@@ -51,7 +51,8 @@ export default (_, onStartEdit) =>
};
}
- componentWillReceiveProps({ message }) {
+ // eslint-disable-next-line camelcase, react/sort-comp
+ UNSAFE_componentWillReceiveProps({ message }) {
if (_.isDefined(message)) {
this.createTimer();
this.setState(() => ({
@@ -223,4 +224,4 @@ export default (_, onStartEdit) =>
);
}
- };
+ });
diff --git a/packages/react-bootstrap-table2-editor/test/context.test.js b/packages/react-bootstrap-table2-editor/test/context.test.js
index 57b56bfd9..65e9d2ced 100644
--- a/packages/react-bootstrap-table2-editor/test/context.test.js
+++ b/packages/react-bootstrap-table2-editor/test/context.test.js
@@ -117,7 +117,7 @@ describe('CellEditContext', () => {
wrapper = shallow(shallowContext());
wrapper.setState(initialState);
wrapper.render();
- wrapper.instance().componentWillReceiveProps({});
+ wrapper.instance().UNSAFE_componentWillReceiveProps({});
});
it('should not set state.message', () => {
@@ -138,7 +138,7 @@ describe('CellEditContext', () => {
wrapper = shallow(shallowContext());
wrapper.setState(initialState);
wrapper.render();
- wrapper.instance().componentWillReceiveProps({
+ wrapper.instance().UNSAFE_componentWillReceiveProps({
cellEdit: cellEditFactory(defaultCellEdit)
});
});
@@ -164,7 +164,7 @@ describe('CellEditContext', () => {
wrapper = shallow(shallowContext(defaultCellEdit, true));
wrapper.setState(initialState);
wrapper.render();
- wrapper.instance().componentWillReceiveProps({
+ wrapper.instance().UNSAFE_componentWillReceiveProps({
cellEdit: cellEditFactory({
...defaultCellEdit,
errorMessage: message
@@ -190,7 +190,7 @@ describe('CellEditContext', () => {
beforeEach(() => {
wrapper = shallow(shallowContext(defaultCellEdit, true));
wrapper.setState(initialState);
- wrapper.instance().componentWillReceiveProps({
+ wrapper.instance().UNSAFE_componentWillReceiveProps({
cellEdit: cellEditFactory({ ...defaultCellEdit })
});
wrapper.update();
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index a359a9506..5bbf401a9 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -41,7 +41,8 @@ class TextFilter extends Component {
}
}
- componentWillReceiveProps(nextProps) {
+ // eslint-disable-next-line camelcase, react/sort-comp
+ UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.defaultValue !== this.props.defaultValue) {
this.applyFilter(nextProps.defaultValue);
}
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 013be6e6d..44824eead 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -37,7 +37,8 @@ export default (
}
}
- componentWillReceiveProps(nextProps) {
+ // eslint-disable-next-line camelcase, react/sort-comp
+ UNSAFE_componentWillReceiveProps(nextProps) {
// let nextData = nextProps.data;
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
this.doFilter(nextProps, this.isEmitDataChange);
diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js
index fbc849f7b..fbb2200e8 100644
--- a/packages/react-bootstrap-table2-filter/test/components/text.test.js
+++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js
@@ -144,7 +144,7 @@ describe('Text Filter', () => {
Date: Sat, 31 Aug 2019 14:18:55 +0800
Subject: [PATCH 171/250] refine #1073
---
.../src/context.js | 5 +--
.../src/editing-cell.js | 14 ++++----
.../src/components/text.js | 10 +++---
.../src/context.js | 20 +++++------
.../src/pagination-handler.js | 6 ++--
.../src/state-context.js | 36 +++++++++----------
.../src/search/SearchBar.js | 10 +++---
.../src/search/context.js | 22 ++++++------
.../src/bootstrap-table.js | 2 +-
.../src/contexts/data-context.js | 10 +++---
.../src/contexts/index.js | 6 ++--
.../src/contexts/row-expand-context.js | 10 +++---
.../src/contexts/selection-context.js | 12 +++----
13 files changed, 82 insertions(+), 81 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js
index 7394070fa..30f5e6ae0 100644
--- a/packages/react-bootstrap-table2-editor/src/context.js
+++ b/packages/react-bootstrap-table2-editor/src/context.js
@@ -1,5 +1,8 @@
+/* eslint disable-next-line: 0 */
/* eslint react/prop-types: 0 */
/* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
+/* eslint react/no-unused-prop-types: 0 */
import React from 'react';
import PropTypes from 'prop-types';
import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const';
@@ -16,7 +19,6 @@ export default (
static propTypes = {
data: PropTypes.array.isRequired,
selectRow: PropTypes.object,
- // eslint-disable-next-line react/no-unused-prop-types
options: PropTypes.shape({
mode: PropTypes.oneOf([CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT]).isRequired,
onErrorMessageDisappear: PropTypes.func,
@@ -44,7 +46,6 @@ export default (
};
}
- // eslint-disable-next-line camelcase, react/sort-comp
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.cellEdit && isRemoteCellEdit()) {
if (nextProps.cellEdit.options.errorMessage) {
diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js
index 0fdfac3c3..e72999852 100644
--- a/packages/react-bootstrap-table2-editor/src/editing-cell.js
+++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js
@@ -2,6 +2,7 @@
/* eslint no-return-assign: 0 */
/* eslint class-methods-use-this: 0 */
/* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */
+/* eslint camelcase: 0 */
import React, { Component } from 'react';
import cs from 'classnames';
import PropTypes from 'prop-types';
@@ -15,7 +16,7 @@ import EditorIndicator from './editor-indicator';
import { TIME_TO_CLOSE_MESSAGE, EDITTYPE } from './const';
export default (_, onStartEdit) =>
- (class EditingCell extends Component {
+ class EditingCell extends Component {
static propTypes = {
row: PropTypes.object.isRequired,
rowIndex: PropTypes.number.isRequired,
@@ -51,7 +52,10 @@ export default (_, onStartEdit) =>
};
}
- // eslint-disable-next-line camelcase, react/sort-comp
+ componentWillUnmount() {
+ this.clearTimer();
+ }
+
UNSAFE_componentWillReceiveProps({ message }) {
if (_.isDefined(message)) {
this.createTimer();
@@ -61,10 +65,6 @@ export default (_, onStartEdit) =>
}
}
- componentWillUnmount() {
- this.clearTimer();
- }
-
clearTimer() {
if (this.indicatorTimer) {
clearTimeout(this.indicatorTimer);
@@ -224,4 +224,4 @@ export default (_, onStartEdit) =>
);
}
- });
+ };
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index 5bbf401a9..b02e6d542 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -1,6 +1,7 @@
/* eslint react/require-default-props: 0 */
/* eslint react/prop-types: 0 */
/* eslint no-return-assign: 0 */
+/* eslint camelcase: 0 */
import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
@@ -41,17 +42,16 @@ class TextFilter extends Component {
}
}
- // eslint-disable-next-line camelcase, react/sort-comp
+ componentWillUnmount() {
+ this.cleanTimer();
+ }
+
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.defaultValue !== this.props.defaultValue) {
this.applyFilter(nextProps.defaultValue);
}
}
- componentWillUnmount() {
- this.cleanTimer();
- }
-
filter(e) {
e.stopPropagation();
this.cleanTimer();
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 44824eead..f9be85f18 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -1,5 +1,6 @@
/* eslint react/prop-types: 0 */
/* eslint react/require-default-props: 0 */
+/* eslint camelcase: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -37,16 +38,6 @@ export default (
}
}
- // eslint-disable-next-line camelcase, react/sort-comp
- UNSAFE_componentWillReceiveProps(nextProps) {
- // let nextData = nextProps.data;
- if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
- this.doFilter(nextProps, this.isEmitDataChange);
- } else {
- this.data = nextProps.data;
- }
- }
-
onFilter(column, filterType, initialize = false) {
return (filterVal) => {
// watch out here if migration to context API, #334
@@ -91,6 +82,15 @@ export default (
return this.data;
}
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ // let nextData = nextProps.data;
+ if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
+ this.doFilter(nextProps, this.isEmitDataChange);
+ } else {
+ this.data = nextProps.data;
+ }
+ }
+
doFilter(props, ignoreEmitDataChange = false) {
const { dataChangeListener, data, columns } = props;
const result = filters(data, columns, _)(this.currFilters);
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
index 00e67dfb5..412258b11 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js
@@ -1,10 +1,11 @@
/* eslint react/prop-types: 0 */
+/* eslint camelcase: 0 */
import React, { Component } from 'react';
import pageResolver from './page-resolver';
export default WrappedComponent =>
- (class PaginationHandler extends pageResolver(Component) {
+ class PaginationHandler extends pageResolver(Component) {
constructor(props) {
super(props);
this.handleChangePage = this.handleChangePage.bind(this);
@@ -12,7 +13,6 @@ export default WrappedComponent =>
this.state = this.initialState();
}
- // eslint-disable-next-line camelcase, react/sort-comp
UNSAFE_componentWillReceiveProps(nextProps) {
const { dataSize, currSizePerPage } = nextProps;
if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
@@ -74,5 +74,5 @@ export default WrappedComponent =>
/>
);
}
- });
+ };
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index df52fadb4..b1079ef6e 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -1,6 +1,7 @@
/* eslint react/prop-types: 0 */
/* eslint react/require-default-props: 0 */
/* eslint no-lonely-if: 0 */
+/* eslint camelcase: 0 */
import React from 'react';
import EventEmitter from 'events';
import Const from './const';
@@ -45,24 +46,6 @@ class StateProvider extends React.Component {
this.dataChangeListener.on('filterChanged', this.handleDataSizeChange);
}
- // eslint-disable-next-line camelcase, react/sort-comp
- UNSAFE_componentWillReceiveProps(nextProps) {
- const { custom } = nextProps.pagination.options;
-
- // user should align the page when the page is not fit to the data size when remote enable
- if (this.isRemotePagination() || custom) {
- if (typeof nextProps.pagination.options.page !== 'undefined') {
- this.currPage = nextProps.pagination.options.page;
- }
- if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
- this.currSizePerPage = nextProps.pagination.options.sizePerPage;
- }
- if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
- this.dataSize = nextProps.pagination.options.totalSize;
- }
- }
- }
-
getPaginationProps = () => {
const { pagination: { options }, bootstrap4 } = this.props;
const { currPage, currSizePerPage, dataSize } = this;
@@ -114,6 +97,23 @@ class StateProvider extends React.Component {
getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter;
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { custom } = nextProps.pagination.options;
+
+ // user should align the page when the page is not fit to the data size when remote enable
+ if (this.isRemotePagination() || custom) {
+ if (typeof nextProps.pagination.options.page !== 'undefined') {
+ this.currPage = nextProps.pagination.options.page;
+ }
+ if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
+ this.currSizePerPage = nextProps.pagination.options.sizePerPage;
+ }
+ if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
+ this.dataSize = nextProps.pagination.options.totalSize;
+ }
+ }
+ }
+
isRemotePagination = () => {
const e = {};
this.remoteEmitter.emit('isRemotePagination', e);
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index fba26dccb..9bef75f32 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint no-return-assign: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -34,11 +35,6 @@ class SearchBar extends React.Component {
};
}
- // eslint-disable-next-line camelcase, react/sort-comp
- UNSAFE_componentWillReceiveProps(nextProps) {
- this.setState({ value: nextProps.searchText });
- }
-
onChangeValue = (e) => {
this.setState({ value: e.target.value });
}
@@ -51,6 +47,10 @@ class SearchBar extends React.Component {
debounceCallback();
}
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ this.setState({ value: nextProps.searchText });
+ }
+
render() {
const {
className,
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index fd7474eb5..50dafc4a5 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -3,6 +3,7 @@
/* eslint no-continue: 0 */
/* eslint no-lonely-if: 0 */
/* eslint class-methods-use-this: 0 */
+/* eslint camelcase: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -35,7 +36,16 @@ export default (options = {
this.state = { data: initialData };
}
- // eslint-disable-next-line camelcase, react/sort-comp
+ getSearched() {
+ return this.state.data;
+ }
+
+ triggerListener(result) {
+ if (this.props.dataChangeListener) {
+ this.props.dataChangeListener.emit('filterChanged', result.length);
+ }
+ }
+
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.searchText !== this.props.searchText) {
if (isRemoteSearch()) {
@@ -60,16 +70,6 @@ export default (options = {
}
}
- getSearched() {
- return this.state.data;
- }
-
- triggerListener(result) {
- if (this.props.dataChangeListener) {
- this.props.dataChangeListener.emit('filterChanged', result.length);
- }
- }
-
search(props) {
const { data, columns } = props;
const searchText = props.searchText.toLowerCase();
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index f2e490ae6..338a428fb 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint arrow-body-style: 0 */
import React, { Component } from 'react';
@@ -18,7 +19,6 @@ class BootstrapTable extends PropsBaseResolver(Component) {
this.validateProps();
}
- // eslint-disable-next-line camelcase, react/sort-comp
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.onDataSizeChange && !nextProps.pagination) {
if (nextProps.data.length !== this.props.data.length) {
diff --git a/packages/react-bootstrap-table2/src/contexts/data-context.js b/packages/react-bootstrap-table2/src/contexts/data-context.js
index ca01393d9..1e207d866 100644
--- a/packages/react-bootstrap-table2/src/contexts/data-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/data-context.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
@@ -12,11 +13,6 @@ export default () => {
state = { data: this.props.data };
- // eslint-disable-next-line camelcase, react/sort-comp
- UNSAFE_componentWillReceiveProps(nextProps) {
- this.setState(() => ({ data: nextProps.data }));
- }
-
getData = (filterProps, searchProps, sortProps, paginationProps) => {
if (paginationProps) return paginationProps.data;
else if (sortProps) return sortProps.data;
@@ -25,6 +21,10 @@ export default () => {
return this.props.data;
}
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ this.setState(() => ({ data: nextProps.data }));
+ }
+
render() {
return (
- (class BootstrapTableContainer extends remoteResolver(Component) {
+ class BootstrapTableContainer extends remoteResolver(Component) {
constructor(props) {
super(props);
this.DataContext = createDataContext();
@@ -83,7 +84,6 @@ const withContext = Base =>
}
}
- // eslint-disable-next-line camelcase, react/sort-comp
UNSAFE_componentWillReceiveProps(nextProps) {
if (!nextProps.pagination && this.props.pagination) {
this.PaginationContext = null;
@@ -375,6 +375,6 @@ const withContext = Base =>
);
}
- });
+ };
export default withContext;
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index 46273c7e4..fb1aed05a 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint react/prop-types: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -16,7 +17,10 @@ class RowExpandProvider extends React.Component {
state = { expanded: this.props.expandRow.expanded || [],
isClosing: this.props.expandRow.isClosing || [] };
- // eslint-disable-next-line camelcase, react/sort-comp
+ onClosed = (closedRow) => {
+ this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
+ };
+
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
@@ -37,10 +41,6 @@ class RowExpandProvider extends React.Component {
}
}
- onClosed = (closedRow) => {
- this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) });
- };
-
handleRowExpand = (rowKey, expanded, rowIndex, e) => {
const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props;
if (nonExpandable && _.contains(nonExpandable, rowKey)) {
diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js
index a973536f0..31a0e4321 100644
--- a/packages/react-bootstrap-table2/src/contexts/selection-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint react/prop-types: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -19,18 +20,17 @@ class SelectionProvider extends React.Component {
this.selected = props.selectRow.selected || [];
}
- // eslint-disable-next-line camelcase, react/sort-comp
+ // exposed API
+ getSelected() {
+ return this.selected;
+ }
+
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.selectRow) {
this.selected = nextProps.selectRow.selected || this.selected;
}
}
- // exposed API
- getSelected() {
- return this.selected;
- }
-
handleRowSelect = (rowKey, checked, rowIndex, e) => {
const { data, keyField, selectRow: { mode, onSelect } } = this.props;
const { ROW_SELECT_SINGLE } = Const;
From 00b1558df0710267b4c3cb2ce788ac647796d52e Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Sep 2019 14:44:18 +0800
Subject: [PATCH 172/250] fix #1078
---
.../examples/search/custom-match-function.js | 116 ++++++++++++++++++
.../stories/index.js | 4 +-
.../react-bootstrap-table2-toolkit/README.md | 27 ++++
.../src/search/context.js | 20 ++-
4 files changed, 162 insertions(+), 5 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/search/custom-match-function.js
diff --git a/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js b/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js
new file mode 100644
index 000000000..afcccd111
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js
@@ -0,0 +1,116 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+// Implement startWith instead of contain
+function customMatchFunc({
+ searchText,
+ value,
+ column,
+ row
+}) {
+ if (typeof value !== 'undefined') {
+ return value.startsWith(searchText);
+ }
+ return false;
+}
+
+export default () => (
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
{ sourceCode }
+
+
Custom a search match function by startWith instead of contain
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
{ sourceCode }
+
+ // ...
+
+```
+
+> Notes: You have to return `true` when your match logic is positive and vice versa.
+
#### searchFormatted - [bool]
If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index 50dafc4a5..ec94da7a3 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -8,7 +8,8 @@ import React from 'react';
import PropTypes from 'prop-types';
export default (options = {
- searchFormatted: false
+ searchFormatted: false,
+ onColumnMatch: null
}) => (
_,
isRemoteSearch,
@@ -83,11 +84,22 @@ export default (options = {
} else if (column.filterValue) {
targetValue = column.filterValue(targetValue, row);
}
- if (targetValue !== null && typeof targetValue !== 'undefined') {
- targetValue = targetValue.toString().toLowerCase();
- if (targetValue.indexOf(searchText) > -1) {
+ if (options.onColumnMatch) {
+ if (options.onColumnMatch({
+ searchText,
+ value: targetValue,
+ column,
+ row
+ })) {
return true;
}
+ } else {
+ if (targetValue !== null && typeof targetValue !== 'undefined') {
+ targetValue = targetValue.toString().toLowerCase();
+ if (targetValue.indexOf(searchText) > -1) {
+ return true;
+ }
+ }
}
}
return false;
From ec1f96cd1fbac3f08164f6dc922cb41272640e79 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Sep 2019 15:56:13 +0800
Subject: [PATCH 173/250] fix #1082
---
docs/columns.md | 37 ++++++++-
.../examples/sort/custom-sort-value.js | 78 +++++++++++++++++++
.../src/utils/common.js | 5 ++
.../stories/index.js | 2 +
.../react-bootstrap-table2/src/store/sort.js | 11 ++-
5 files changed, 129 insertions(+), 4 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js
diff --git a/docs/columns.md b/docs/columns.md
index 525ec4d30..723367bc3 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -13,6 +13,7 @@ Available properties in a column object:
* [formatExtraData](#formatExtraData)
* [type](#type)
* [sort](#sort)
+* [sortValue](#sortValue)
* [sortFunc](#sortFunc)
* [sortCaret](#sortCaret)
* [onSort](#onSort)
@@ -141,8 +142,42 @@ Specify the data type on column. Available value so far is `string`, `number`, `
## column.sort - [Bool]
Enable the column sort via a `true` value given.
+## column.sortValue - [Function]
+`column.sortValue` only work when `column.sort` enabled. This prop allow you to replace the value when table sorting.
+
+For example, consider following data:
+
+```js
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const data = [{id: 1, type: 2}, {id: 2, type: 1}, {id: 3, type:0}];
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'type',
+ text: 'Job Type'
+ sort: true,
+ formatter: (cell, row) => types[cell]
+}]
+```
+
+In above case, when user try to sort Job Type column which will sort the original value: 0, 1, 2 but we display the type name via [`column.formatter`](#formatter), which will lead confuse because we are sorting by type value instead of type name. So `sortValue` is a way for you to decide what kind of value should be adopted when sorting on a specify column:
+
+```js
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'type',
+ text: 'Job Type'
+ sort: true,
+ formatter: (cell, row) => types[cell],
+ sortValue: (cell, row) => types[cell] // we use type name to sort.
+}]
+```
+
## column.sortFunc - [Function]
-`column.sortFunc` only work when `column.sort` is enable. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
+`column.sortFunc` only work when `column.sort` enabled. `sortFunc` allow you to define your sorting algorithm. This callback function accept six arguments:
```js
{
diff --git a/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js
new file mode 100644
index 000000000..74e7f84d5
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/custom-sort-value.js
@@ -0,0 +1,78 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import Code from 'components/common/code-block';
+import { jobsGenerator1 } from 'utils/common';
+
+const jobs = jobsGenerator1(8);
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name'
+}, {
+ dataField: 'owner',
+ text: 'Job Owner'
+}, {
+ dataField: 'type',
+ text: 'Job Type',
+ sort: true,
+ formatter: (cell, row) => types[cell],
+ sortValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+ dataField: 'id',
+ text: 'Job ID'
+}, {
+ dataField: 'name',
+ text: 'Job Name'
+}, {
+ dataField: 'owner',
+ text: 'Job Owner'
+}, {
+ dataField: 'type',
+ text: 'Job Type',
+ sort: true,
+ formatter: (cell, row) => types[cell],
+ sortValue: (cell, row) => types[cell]
+}];
+
+
+ Change Data
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index f6baec2f8..5592779d7 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -29,6 +29,11 @@ export const withOnSale = rows => rows.map((row) => {
return row;
});
+export const withRandomPrice = rows => rows.map((row) => {
+ row.price = Math.floor((Math.random() * 10) + 2000);
+ return row;
+});
+
export const productsQualityGenerator = (quantity = 5, factor = 0) =>
Array.from({ length: quantity }, (value, index) => ({
id: index + factor,
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index c58f70a16..5587d0b80 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -104,6 +104,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
import DefaultSortTable from 'examples/sort/default-sort-table';
import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
import SortEvents from 'examples/sort/sort-events';
+import CustomSortValue from 'examples/sort/custom-sort-value';
import CustomSortTable from 'examples/sort/custom-sort-table';
import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
import HeaderSortingClassesTable from 'examples/sort/header-sorting-classes';
@@ -357,6 +358,7 @@ storiesOf('Sort Table', module)
.add('Default Sort Table', () =>
Date: Sat, 7 Sep 2019 16:14:06 +0800
Subject: [PATCH 174/250] fix #1077
---
docs/columns.md | 2 +-
.../header-columns/column-event-table.js | 4 +-
.../src/cell-event-delegater.js | 4 +-
.../react-bootstrap-table2/src/header-cell.js | 207 +++++++++---------
4 files changed, 111 insertions(+), 106 deletions(-)
diff --git a/docs/columns.md b/docs/columns.md
index 723367bc3..8770eb64f 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -456,7 +456,7 @@ If the events is not listed above, the callback function will only pass the `eve
{
// omit...
headerEvents: {
- onClick: e => { ... }
+ onClick: (e, column, columnIndex) => { ... }
}
}
```
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
index d4394a7a0..3312b39b5 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
@@ -12,7 +12,7 @@ const columns = [{
dataField: 'id',
text: 'Product ID',
headerEvents: {
- onClick: () => alert('Click on Product ID header column')
+ onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
}
}, {
dataField: 'name',
@@ -29,7 +29,7 @@ const columns = [{
dataField: 'id',
text: 'Product ID',
headerEvents: {
- onClick: () => alert('Click on Product ID header column')
+ onClick: (e, column, columnIndex) => alert('Click on Product ID header column')
}
}, {
dataField: 'name',
diff --git a/packages/react-bootstrap-table2/src/cell-event-delegater.js b/packages/react-bootstrap-table2/src/cell-event-delegater.js
index 14c2fa062..689f2c117 100644
--- a/packages/react-bootstrap-table2/src/cell-event-delegater.js
+++ b/packages/react-bootstrap-table2/src/cell-event-delegater.js
@@ -17,8 +17,8 @@ export default ExtendBase =>
createDefaultEventHandler(cb) {
return (e) => {
- const { column, columnIndex } = this.props;
- cb(e, column, columnIndex);
+ const { column, columnIndex, index } = this.props;
+ cb(e, column, typeof columnIndex !== 'undefined' ? columnIndex : index);
};
}
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index f2b51062c..22c3fca3d 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -7,119 +7,124 @@ import Const from './const';
import SortSymbol from './sort/symbol';
import SortCaret from './sort/caret';
import _ from './utils';
+import eventDelegater from './cell-event-delegater';
+
+
+class HeaderCell extends eventDelegater(React.Component) {
+ render() {
+ const {
+ column,
+ index,
+ onSort,
+ sorting,
+ sortOrder,
+ isLastSorting,
+ onFilter,
+ currFilters,
+ onExternalFilter
+ } = this.props;
+
+ const {
+ text,
+ sort,
+ sortCaret,
+ filter,
+ filterRenderer,
+ headerTitle,
+ headerAlign,
+ headerFormatter,
+ headerEvents,
+ headerClasses,
+ headerStyle,
+ headerAttrs,
+ headerSortingClasses,
+ headerSortingStyle
+ } = column;
+
+ const delegateEvents = this.delegate(headerEvents);
+
+ const cellAttrs = {
+ ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
+ ...delegateEvents,
+ tabIndex: 0
+ };
+ let sortSymbol;
+ let filterElm;
+ let cellStyle = {};
+ let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
-const HeaderCell = (props) => {
- const {
- column,
- index,
- onSort,
- sorting,
- sortOrder,
- isLastSorting,
- onFilter,
- currFilters,
- onExternalFilter
- } = props;
-
- const {
- text,
- sort,
- sortCaret,
- filter,
- filterRenderer,
- headerTitle,
- headerAlign,
- headerFormatter,
- headerEvents,
- headerClasses,
- headerStyle,
- headerAttrs,
- headerSortingClasses,
- headerSortingStyle
- } = column;
-
- const cellAttrs = {
- ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
- ...headerEvents,
- tabIndex: 0
- };
-
- let sortSymbol;
- let filterElm;
- let cellStyle = {};
- let cellClasses = _.isFunction(headerClasses) ? headerClasses(column, index) : headerClasses;
-
- if (headerStyle) {
- cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
- cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
- }
-
- if (headerTitle) {
- cellAttrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text;
- }
+ if (headerStyle) {
+ cellStyle = _.isFunction(headerStyle) ? headerStyle(column, index) : headerStyle;
+ cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
+ }
- if (headerAlign) {
- cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
- }
+ if (headerTitle) {
+ cellAttrs.title = _.isFunction(headerTitle) ? headerTitle(column, index) : text;
+ }
- if (sort) {
- const customClick = cellAttrs.onClick;
- cellAttrs.onClick = (e) => {
- onSort(column);
- if (_.isFunction(customClick)) customClick(e);
- };
- cellAttrs.className = cs(cellAttrs.className, 'sortable');
+ if (headerAlign) {
+ cellStyle.textAlign = _.isFunction(headerAlign) ? headerAlign(column, index) : headerAlign;
+ }
- if (sorting) {
- sortSymbol = sortCaret ? sortCaret(sortOrder, column) :
Date: Sat, 7 Sep 2019 16:27:18 +0800
Subject: [PATCH 175/250] enhance footer event
---
docs/columns.md | 2 +-
.../examples/footer/column-event-table.js | 4 +-
.../react-bootstrap-table2/src/footer-cell.js | 83 ++++++++++---------
3 files changed, 47 insertions(+), 42 deletions(-)
diff --git a/docs/columns.md b/docs/columns.md
index 8770eb64f..6d77335a5 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -666,7 +666,7 @@ It's also available to custom via a callback function:
{
// omit...
footerEvents: {
- onClick: e => { ... }
+ onClick: (e, column, columnIndex) => { ... }
}
}
```
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
index 6837eee0f..943c680fe 100644
--- a/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-event-table.js
@@ -12,7 +12,7 @@ const columns = [{
dataField: 'id',
text: 'Product ID',
footerEvents: {
- onClick: () => alert('Click on Product ID footer column')
+ onClick: (e, column, columnIndex) => alert(`Click on Product ID header column, columnIndex: ${columnIndex}`)
},
footer: 'Footer 1'
}, {
@@ -32,7 +32,7 @@ const columns = [{
dataField: 'id',
text: 'Product ID',
footerEvents: {
- onClick: () => alert('Click on Product ID footer column')
+ onClick: (e, column, columnIndex) => alert('Click on Product ID footer column')
},
footer: 'Footer 1'
}, {
diff --git a/packages/react-bootstrap-table2/src/footer-cell.js b/packages/react-bootstrap-table2/src/footer-cell.js
index 2995f4aa7..e47ad0ae0 100644
--- a/packages/react-bootstrap-table2/src/footer-cell.js
+++ b/packages/react-bootstrap-table2/src/footer-cell.js
@@ -4,56 +4,61 @@ import cs from 'classnames';
import PropTypes from 'prop-types';
import _ from './utils';
+import eventDelegater from './cell-event-delegater';
-const FooterCell = (props) => {
- const { index, column, columnData } = props;
+class FooterCell extends eventDelegater(React.Component) {
+ render() {
+ const { index, column, columnData } = this.props;
- const {
- footer,
- footerTitle,
- footerAlign,
- footerFormatter,
- footerEvents,
- footerClasses,
- footerStyle,
- footerAttrs
- } = column;
+ const {
+ footer,
+ footerTitle,
+ footerAlign,
+ footerFormatter,
+ footerEvents,
+ footerClasses,
+ footerStyle,
+ footerAttrs
+ } = column;
- const cellAttrs = {
- ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
- ...footerEvents
- };
+ const delegateEvents = this.delegate(footerEvents);
+ const cellAttrs = {
+ ...(_.isFunction(footerAttrs) ? footerAttrs(column, index) : footerAttrs),
+ ...delegateEvents
+ };
- let text = '';
- if (_.isString(footer)) {
- text = footer;
- } else if (_.isFunction(footer)) {
- text = footer(columnData, column, index);
- }
- let cellStyle = {};
- const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
+ let text = '';
+ if (_.isString(footer)) {
+ text = footer;
+ } else if (_.isFunction(footer)) {
+ text = footer(columnData, column, index);
+ }
- if (footerStyle) {
- cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
- cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
- }
+ let cellStyle = {};
+ const cellClasses = _.isFunction(footerClasses) ? footerClasses(column, index) : footerClasses;
- if (footerTitle) {
- cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
- }
+ if (footerStyle) {
+ cellStyle = _.isFunction(footerStyle) ? footerStyle(column, index) : footerStyle;
+ cellStyle = cellStyle ? { ...cellStyle } : cellStyle;
+ }
- if (footerAlign) {
- cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
- }
+ if (footerTitle) {
+ cellAttrs.title = _.isFunction(footerTitle) ? footerTitle(column, index) : text;
+ }
- if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
- if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
+ if (footerAlign) {
+ cellStyle.textAlign = _.isFunction(footerAlign) ? footerAlign(column, index) : footerAlign;
+ }
- const children = footerFormatter ? footerFormatter(column, index) : text;
+ if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
+ if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
- return React.createElement('th', cellAttrs, children);
-};
+ const children = footerFormatter ? footerFormatter(column, index) : text;
+
+ return React.createElement('th', cellAttrs, children);
+ }
+}
FooterCell.propTypes = {
columnData: PropTypes.array,
From cf5b24e9e8ea9920b9a815bd10610c54b1c4c4a6 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 8 Sep 2019 15:31:51 +0800
Subject: [PATCH 176/250] Publish
- react-bootstrap-table2-editor@1.4.0
- react-bootstrap-table2-example@1.0.31
- react-bootstrap-table2-filter@1.2.0
- react-bootstrap-table2-paginator@2.1.0
- react-bootstrap-table2-toolkit@2.1.0
- react-bootstrap-table-next@3.2.0
---
packages/react-bootstrap-table2-editor/package.json | 2 +-
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
6 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/react-bootstrap-table2-editor/package.json b/packages/react-bootstrap-table2-editor/package.json
index 2f5df7c78..8eb8e1460 100644
--- a/packages/react-bootstrap-table2-editor/package.json
+++ b/packages/react-bootstrap-table2-editor/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-editor",
- "version": "1.3.2",
+ "version": "1.4.0",
"description": "it's the editor addon for react-bootstrap-table2",
"main": "./lib/index.js",
"scripts": {
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index eeccdd780..aba2f83c1 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.30",
+ "version": "1.0.31",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 8f0cae0b2..17ea0ffe5 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.1.12",
+ "version": "1.2.0",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index f89402048..8b05145c6 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.0.8",
+ "version": "2.1.0",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index edbf5b2fe..273d43a1b 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "2.0.1",
+ "version": "2.1.0",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 1338c4d53..4d99583d2 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.1.9",
+ "version": "3.2.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 569aa0195e2197fc4971e8fb67dbd776a2d87987 Mon Sep 17 00:00:00 2001
From: ebfg <4307253+ebfg@users.noreply.github.com>
Date: Sun, 15 Sep 2019 02:36:10 -0400
Subject: [PATCH 177/250] Note in defaultSorted docs that only one column is
supported. #1083 (#1088)
---
docs/README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/docs/README.md b/docs/README.md
index 20bbd13bf..79e591f6d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -208,6 +208,8 @@ const defaultSorted = [{
}];
```
+**Note**: Only the first column is sorted currently, see #1083.
+
### defaultSortDirection - [String]
Default sort direction when user click on header column at first time, available value is `asc` and `desc`. Default is `desc`.
From 4aaf140de5314f9bf38111b506658529c500ae6c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 29 Sep 2019 15:06:11 +0800
Subject: [PATCH 178/250] fix wrong story code
---
.../examples/csv/export-custom-data.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js b/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js
index 50da9b782..929a9a298 100644
--- a/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js
+++ b/packages/react-bootstrap-table2-example/examples/csv/export-custom-data.js
@@ -36,11 +36,12 @@ const columns = [{
const MyExportCSV = (props) => {
const handleClick = () => {
- props.onExport();
+ // passing my custom data
+ props.onExport(products.filter(r => r.id > 2));
};
return (
- Export to CSV
+ Only export Product ID bigger than 2
);
};
From b2121fdf24b557de33068b8b13ba853f758bee02 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 29 Sep 2019 16:19:36 +0800
Subject: [PATCH 179/250] fix #1099 #1101
---
packages/react-bootstrap-table2/src/header-cell.js | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 22c3fca3d..41cf6ef4c 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -43,10 +43,14 @@ class HeaderCell extends eventDelegater(React.Component) {
const delegateEvents = this.delegate(headerEvents);
+ const customAttrs = _.isFunction(headerAttrs)
+ ? headerAttrs(column, index)
+ : (headerAttrs || {});
+
const cellAttrs = {
- ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
+ ...customAttrs,
...delegateEvents,
- tabIndex: 0
+ tabIndex: _.isDefined(customAttrs.tabIndex) ? customAttrs.tabIndex : 0
};
let sortSymbol;
From 1b9bd6337090e938e6a438b29096fda6802fcc1a Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 29 Sep 2019 16:30:49 +0800
Subject: [PATCH 180/250] fix #1104
---
.../react-bootstrap-table2/src/contexts/selection-context.js | 3 ++-
packages/react-bootstrap-table2/src/store/selection.js | 2 +-
2 files changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js
index 31a0e4321..65f8d9ca8 100644
--- a/packages/react-bootstrap-table2/src/contexts/selection-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js
@@ -3,6 +3,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Const from '../const';
+import _ from '../utils';
import dataOperator from '../store/operators';
import { getSelectionSummary } from '../store/selection';
@@ -72,7 +73,7 @@ class SelectionProvider extends React.Component {
if (!isUnSelect) {
currSelected = selected.concat(dataOperator.selectableKeys(data, keyField, nonSelectable));
} else {
- currSelected = selected.filter(s => typeof data.find(d => d[keyField] === s) === 'undefined');
+ currSelected = selected.filter(s => typeof data.find(d => _.get(d, keyField) === s) === 'undefined');
}
let result;
diff --git a/packages/react-bootstrap-table2/src/store/selection.js b/packages/react-bootstrap-table2/src/store/selection.js
index 38ecd5fba..1e562c641 100644
--- a/packages/react-bootstrap-table2/src/store/selection.js
+++ b/packages/react-bootstrap-table2/src/store/selection.js
@@ -9,7 +9,7 @@ export const getSelectionSummary = (
let allRowsSelected = data.length > 0;
let allRowsNotSelected = true;
- const rowKeys = data.map(d => d[keyField]);
+ const rowKeys = data.map(d => _.get(d, keyField));
for (let i = 0; i < rowKeys.length; i += 1) {
const curr = rowKeys[i];
if (typeof selected.find(x => x === curr) === 'undefined') {
From 18caf0ac8df5dfdfe0a68ff19e244c9036820e2f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 29 Sep 2019 16:36:32 +0800
Subject: [PATCH 181/250] try to fix #1085 and #1098
---
packages/react-bootstrap-table2/src/store/selection.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/store/selection.js b/packages/react-bootstrap-table2/src/store/selection.js
index 1e562c641..ca30cb31f 100644
--- a/packages/react-bootstrap-table2/src/store/selection.js
+++ b/packages/react-bootstrap-table2/src/store/selection.js
@@ -2,7 +2,7 @@ import _ from '../utils';
import { getRowByRowId } from './rows';
export const getSelectionSummary = (
- data,
+ data = [],
keyField,
selected = []
) => {
@@ -24,7 +24,7 @@ export const getSelectionSummary = (
};
};
-export const selectableKeys = (data, keyField, skips = []) => {
+export const selectableKeys = (data = [], keyField, skips = []) => {
if (skips.length === 0) {
return data.map(row => _.get(row, keyField));
}
@@ -40,6 +40,6 @@ export const unSelectableKeys = (selected, skips = []) => {
return selected.filter(x => _.contains(skips, x));
};
-export const getSelectedRows = (data, keyField, selected) =>
+export const getSelectedRows = (data = [], keyField, selected) =>
selected.map(k => getRowByRowId(data, keyField, k)).filter(x => !!x);
From be916d81a3c4e0a54aae8e7c622174ea8f94bac6 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 30 Sep 2019 13:04:37 +0800
Subject: [PATCH 182/250] Publish
- react-bootstrap-table2-example@1.0.32
- react-bootstrap-table-next@3.2.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index aba2f83c1..92294caac 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.31",
+ "version": "1.0.32",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 4d99583d2..49397f855 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.2.0",
+ "version": "3.2.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From def898f636c1a12b0534f66b3793ef4feb189788 Mon Sep 17 00:00:00 2001
From: "Mark J. Lehman"
Date: Sat, 12 Oct 2019 22:22:46 -0700
Subject: [PATCH 183/250] Avoid exact version lock for classnames (#1107)
Fixes #732
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 37859fdbd..2f5a73525 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
"webpack-dev-server": "2.7.1"
},
"dependencies": {
- "classnames": "2.2.5",
+ "classnames": "^2.2.5",
"prop-types": "15.5.10",
"react": "16.4.0",
"react-dom": "16.4.0",
From 970f7c0d15c605b1a609994b6b98993131f11b1a Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 13 Oct 2019 13:30:40 +0800
Subject: [PATCH 184/250] update yarn lock file
---
yarn.lock | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index b20bdb4a3..eb017e352 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1686,9 +1686,10 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
-classnames@2.2.5:
- version "2.2.5"
- resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+classnames@^2.2.5:
+ version "2.2.6"
+ resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+ integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-css@4.1.9, clean-css@4.1.x:
version "4.1.9"
From 45b133579b2c52f1cfcdf7076bea84defae9af26 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 26 Oct 2019 14:22:44 +0800
Subject: [PATCH 185/250] fix #1124
---
packages/react-bootstrap-table2/src/bootstrap-table.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 338a428fb..06c225b41 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -135,7 +135,7 @@ BootstrapTable.propTypes = {
remote: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
pagination: PropTypes.bool
})]),
- noDataIndication: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ noDataIndication: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
striped: PropTypes.bool,
bordered: PropTypes.bool,
hover: PropTypes.bool,
From 9190cfc6d90e09d445a517770ac796a4f90650e4 Mon Sep 17 00:00:00 2001
From: Ali Ogaili
Date: Wed, 28 Aug 2019 15:32:35 +0400
Subject: [PATCH 186/250] fix
https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/1005
---
.../src/bootstrap-table.js | 22 +++++-
packages/react-bootstrap-table2/src/const.js | 4 +-
.../src/filters-cell.js | 41 +++++++++++
.../react-bootstrap-table2/src/filters.js | 68 +++++++++++++++++++
packages/react-bootstrap-table2/src/header.js | 9 ---
.../test/header-cell.test.js | 32 ++++-----
6 files changed, 147 insertions(+), 29 deletions(-)
create mode 100644 packages/react-bootstrap-table2/src/filters-cell.js
create mode 100644 packages/react-bootstrap-table2/src/filters.js
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 06c225b41..efe1f2f32 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
import cs from 'classnames';
import Header from './header';
+import Filters from './filters';
import Caption from './caption';
import Body from './body';
import Footer from './footer';
@@ -77,6 +78,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
[bootstrap4 ? 'table-sm' : 'table-condensed']: condensed
}, classes);
+ const hasFilters = columns.some(col => col.filter || col.filterRenderer);
+
const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
const tableCaption = (caption && { caption } );
@@ -91,12 +94,20 @@ class BootstrapTable extends PropsBaseResolver(Component) {
sortField={ this.props.sortField }
sortOrder={ this.props.sortOrder }
onSort={ this.props.onSort }
- onFilter={ this.props.onFilter }
- currFilters={ this.props.currFilters }
- onExternalFilter={ this.props.onExternalFilter }
selectRow={ selectRow }
expandRow={ expandRow }
/>
+ {hasFilters && (
+
+ {filterColumns}
+
+ );
+};
+
+Filters.propTypes = {
+ columns: PropTypes.array.isRequired,
+ onFilter: PropTypes.func,
+ position: PropTypes.oneOf([
+ Const.FILTERS_POSITION_TOP,
+ Const.FILTERS_POSITION_BOTTOM
+ ]),
+ currFilters: PropTypes.object,
+ onExternalFilter: PropTypes.func,
+ className: PropTypes.string
+};
+
+Filters.defaultProps = {
+ position: Const.FILTERS_POSITION_TOP
+};
+
+export default Filters;
diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js
index 4360b2c7b..a8f31b149 100644
--- a/packages/react-bootstrap-table2/src/header.js
+++ b/packages/react-bootstrap-table2/src/header.js
@@ -14,12 +14,9 @@ const Header = (props) => {
className,
columns,
onSort,
- onFilter,
sortField,
sortOrder,
selectRow,
- currFilters,
- onExternalFilter,
expandRow
} = props;
@@ -50,9 +47,6 @@ const Header = (props) => {
column={ column }
onSort={ onSort }
sorting={ currSort }
- onFilter={ onFilter }
- currFilters={ currFilters }
- onExternalFilter={ onExternalFilter }
sortOrder={ sortOrder }
isLastSorting={ isLastSorting }
/>);
@@ -87,12 +81,9 @@ const Header = (props) => {
Header.propTypes = {
columns: PropTypes.array.isRequired,
onSort: PropTypes.func,
- onFilter: PropTypes.func,
sortField: PropTypes.string,
sortOrder: PropTypes.string,
selectRow: PropTypes.object,
- currFilters: PropTypes.object,
- onExternalFilter: PropTypes.func,
className: PropTypes.string,
expandRow: PropTypes.object
};
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index fa3861de7..c7ea73650 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -148,7 +148,7 @@ describe('HeaderCell', () => {
it('should call custom headerFormatter correctly', () => {
expect(formatter.callCount).toBe(1);
expect(formatter.calledWith(
- column, index, { sortElement: undefined, filterElement: undefined })).toBe(true);
+ column, index, { sortElement: undefined })).toBe(true);
});
});
@@ -738,14 +738,14 @@ describe('HeaderCell', () => {
expect(wrapper.find('th').length).toBe(1);
});
- it('should render filter correctly', () => {
- expect(wrapper.find(Filter).length).toBe(1);
- expect(wrapper.find(Filter).props()).toEqual({
- column,
- onFilter,
- ...filterProps
- });
- });
+ // it('should render filter correctly', () => {
+ // expect(wrapper.find(Filter).length).toBe(1);
+ // expect(wrapper.find(Filter).props()).toEqual({
+ // column,
+ // onFilter,
+ // ...filterProps
+ // });
+ // });
});
describe('when column.filter and column.filterRenderer is defined', () => {
@@ -775,12 +775,12 @@ describe('HeaderCell', () => {
expect(wrapper.find('th').length).toBe(1);
});
- it('should render filter correctly', () => {
- expect(wrapper.find(Filter).length).toBe(1);
- });
-
- it('should call filterRenderer function correctly', () => {
- expect(filterRenderer).toHaveBeenCalledTimes(1);
- });
+ // it('should render filter correctly', () => {
+ // expect(wrapper.find(Filter).length).toBe(1);
+ // });
+ //
+ // it('should call filterRenderer function correctly', () => {
+ // expect(filterRenderer).toHaveBeenCalledTimes(1);
+ // });
});
});
From aad2ad3823a63c8701d8af4949b0358f06ba2f48 Mon Sep 17 00:00:00 2001
From: Ali Ogaili
Date: Wed, 28 Aug 2019 16:30:13 +0400
Subject: [PATCH 187/250] Fix eslint errors.
---
packages/react-bootstrap-table2/src/filters-cell.js | 13 ++++++++++---
1 file changed, 10 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/filters-cell.js b/packages/react-bootstrap-table2/src/filters-cell.js
index e19a57fcc..4dc501cc3 100644
--- a/packages/react-bootstrap-table2/src/filters-cell.js
+++ b/packages/react-bootstrap-table2/src/filters-cell.js
@@ -3,7 +3,10 @@ import PropTypes from 'prop-types';
import _ from './utils';
const FiltersCell = (props) => {
- const { index, column, onExternalFilter, currFilters, onFilter } = props;
+ const {
+ index, column, onExternalFilter,
+ currFilters, onFilter
+ } = props;
const { filterRenderer, filter } = column;
let filterElm;
const cellAttrs = {};
@@ -32,10 +35,14 @@ const FiltersCell = (props) => {
FiltersCell.propTypes = {
index: PropTypes.number.isRequired,
- column: PropTypes.object,
+ column: PropTypes.object.isRequired,
+ currFilters: PropTypes.object.isRequired,
onFilter: PropTypes.func,
- currFilters: PropTypes.object,
onExternalFilter: PropTypes.func
};
+FiltersCell.defaultProps = {
+ onFilter: () => { },
+ onExternalFilter: () => { }
+}
export default FiltersCell;
From 83c9d69e27a80d2377fa2898a415b795a27a98fd Mon Sep 17 00:00:00 2001
From: Ali Ogaili
Date: Wed, 28 Aug 2019 16:35:30 +0400
Subject: [PATCH 188/250] More eslint errors fixing.
---
packages/react-bootstrap-table2/src/filters-cell.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/filters-cell.js b/packages/react-bootstrap-table2/src/filters-cell.js
index 4dc501cc3..a0fcb9712 100644
--- a/packages/react-bootstrap-table2/src/filters-cell.js
+++ b/packages/react-bootstrap-table2/src/filters-cell.js
@@ -44,5 +44,6 @@ FiltersCell.propTypes = {
FiltersCell.defaultProps = {
onFilter: () => { },
onExternalFilter: () => { }
-}
+};
+
export default FiltersCell;
From 909a6e211efb97325a01394e469f3f3b5b5bc848 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 26 Oct 2019 15:23:14 +0800
Subject: [PATCH 189/250] close #1005
---
docs/README.md | 4 +
.../examples/column-filter/filter-position.js | 93 +++++++++++++++++++
.../examples/column-filter/text-filter.js | 12 ++-
.../stories/index.js | 2 +
.../react-bootstrap-table2-filter/README.md | 26 ++++++
.../src/bootstrap-table.js | 17 +++-
packages/react-bootstrap-table2/src/const.js | 1 +
.../react-bootstrap-table2/src/filters.js | 15 +--
.../react-bootstrap-table2/src/header-cell.js | 29 +++---
packages/react-bootstrap-table2/src/header.js | 20 +++-
10 files changed, 192 insertions(+), 27 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
diff --git a/docs/README.md b/docs/README.md
index 79e591f6d..0ec844235 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -32,6 +32,7 @@
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
* [filter](#filter)
+* [filterPosition](filterPosition)
* [onTableChange](#onTableChange)
* [onDataSizeChange](#onDataSizeChange)
@@ -329,6 +330,9 @@ Following is a shape of `newState`
}
```
+### filterPosition - [String]
+Available value is `inline`, `top` and `bottom`, default is `inline`. This prop decide where `react-bootstrap-table` render column filter.
+
### onDataSizeChange - [Function]
This callback function will be called only when data size change by search/filter etc. This function have one argument which is an object contains below props:
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
new file mode 100644
index 000000000..431db8d3a
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
@@ -0,0 +1,93 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+const sourceCode1 = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter()
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+
+ { sourceCode1 }
+ { sourceCode2 }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
index 19eab4702..c3789be40 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
@@ -8,14 +8,17 @@ const products = productsGenerator(8);
const columns = [{
dataField: 'id',
- text: 'Product ID'
+ text: 'Product ID',
+ footer: 'hello'
}, {
dataField: 'name',
text: 'Product Name',
+ footer: 'hello',
filter: textFilter()
}, {
dataField: 'price',
text: 'Product Price',
+ footer: 'hello',
filter: textFilter()
}];
@@ -39,6 +42,11 @@ const columns = [{
(
data={ products }
columns={ columns }
filter={ filterFactory() }
+ filterPosition="bottom"
+ selectRow={ selectRow }
/>
{ sourceCode }
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5587d0b80..e617969ba 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -92,6 +92,7 @@ import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
import FilterHooks from 'examples/column-filter/filter-hooks';
import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
+import FilterPosition from 'examples/column-filter/filter-position';
// work on rows
import RowStyleTable from 'examples/rows/row-style';
@@ -314,6 +315,7 @@ storiesOf('Column Filter', module)
.add('Number Filter with Default Value', () =>
{filterColumns}
-
+
);
};
Filters.propTypes = {
columns: PropTypes.array.isRequired,
onFilter: PropTypes.func,
- position: PropTypes.oneOf([
+ filterPosition: PropTypes.oneOf([
Const.FILTERS_POSITION_TOP,
+ Const.FILTERS_POSITION_INLINE,
Const.FILTERS_POSITION_BOTTOM
]),
currFilters: PropTypes.object,
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 41cf6ef4c..8552c5345 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -21,6 +21,7 @@ class HeaderCell extends eventDelegater(React.Component) {
isLastSorting,
onFilter,
currFilters,
+ filterPosition,
onExternalFilter
} = this.props;
@@ -104,18 +105,20 @@ class HeaderCell extends eventDelegater(React.Component) {
if (cellClasses) cellAttrs.className = cs(cellAttrs.className, cellClasses);
if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle;
- if (filterRenderer) {
- const onCustomFilter = onExternalFilter(column, filter.props.type);
- filterElm = filterRenderer(onCustomFilter, column);
- } else if (filter) {
- filterElm = (
-
Date: Sat, 9 Nov 2019 14:49:42 +0800
Subject: [PATCH 190/250] fix test cases
---
.../test/header-cell.test.js | 47 ++++++++++++-------
1 file changed, 29 insertions(+), 18 deletions(-)
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index c7ea73650..465bde1f8 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -148,7 +148,7 @@ describe('HeaderCell', () => {
it('should call custom headerFormatter correctly', () => {
expect(formatter.callCount).toBe(1);
expect(formatter.calledWith(
- column, index, { sortElement: undefined })).toBe(true);
+ column, index, { sortElement: undefined, filterElement: undefined })).toBe(true);
});
});
@@ -729,7 +729,13 @@ describe('HeaderCell', () => {
}
};
wrapper = shallow(
-
Date: Sat, 9 Nov 2019 15:03:03 +0800
Subject: [PATCH 191/250] Publish
- react-bootstrap-table2-example@1.0.33
- react-bootstrap-table2-filter@1.3.0
- react-bootstrap-table-next@3.3.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 92294caac..838b4de70 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.32",
+ "version": "1.0.33",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 17ea0ffe5..59de9c12d 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.2.0",
+ "version": "1.3.0",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 49397f855..c73215b91 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.2.1",
+ "version": "3.3.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From defcd04b526da60bbb19d8a99ddde1d3e86e02d4 Mon Sep 17 00:00:00 2001
From: Ymbere Xavier
Date: Sun, 27 Oct 2019 23:01:05 -0300
Subject: [PATCH 192/250] Update bootstrap-table and row-consumer
Add new props to the bootstrap-table, nonSelectableStyle and
nonSelectableClasses
Update row-consume in order to support custom styles and classes
for non selectable rows
---
.../src/bootstrap-table.js | 2 ++
.../src/row-selection/row-consumer.js | 17 +++++++++++++++++
2 files changed, 19 insertions(+)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index 338a428fb..21fd65be3 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -166,6 +166,8 @@ BootstrapTable.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
classes: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
nonSelectable: PropTypes.array,
+ nonSelectableStyle: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+ nonSelectableClasses: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
bgColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
hideSelectColumn: PropTypes.bool,
selectionRenderer: PropTypes.func,
diff --git a/packages/react-bootstrap-table2/src/row-selection/row-consumer.js b/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
index a8b14dba2..ff8d6feac 100644
--- a/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
+++ b/packages/react-bootstrap-table2/src/row-selection/row-consumer.js
@@ -9,6 +9,7 @@ export default (Component) => {
const key = props.value;
const selected = _.contains(selectRow.selected, key);
const selectable = !selectRow.nonSelectable || !_.contains(selectRow.nonSelectable, key);
+ const notSelectable = _.contains(selectRow.nonSelectable, key);
let {
style,
@@ -38,6 +39,22 @@ export default (Component) => {
}
}
+ if (notSelectable) {
+ const notSelectableStyle = _.isFunction(selectRow.nonSelectableStyle)
+ ? selectRow.nonSelectableStyle(props.row, props.rowIndex)
+ : selectRow.nonSelectableStyle;
+
+ const notSelectableClasses = _.isFunction(selectRow.nonSelectableClasses)
+ ? selectRow.nonSelectableClasses(props.row, props.rowIndex)
+ : selectRow.nonSelectableClasses;
+
+ style = {
+ ...style,
+ ...notSelectableStyle
+ };
+ className = cs(className, notSelectableClasses) || undefined;
+ }
+
return (
Date: Sun, 27 Oct 2019 23:07:33 -0300
Subject: [PATCH 193/250] Update row-selection.md documentation
Add `nonSelectableStyle` documentation
Add `nonSelectableClasses` documentation
---
docs/row-selection.md | 56 ++++++++++++++++++++++++++++++++++++++++---
1 file changed, 53 insertions(+), 3 deletions(-)
diff --git a/docs/row-selection.md b/docs/row-selection.md
index af2d16a5f..dce1f9f07 100644
--- a/docs/row-selection.md
+++ b/docs/row-selection.md
@@ -1,6 +1,6 @@
# Row selection
-`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
+`react-bootstrap-table2` supports the row selection feature. By passing prop `selectRow` to enable row selection. When you enable this feature, `react-bootstrap-table2` will prepend a new selection column.
## Required
* [mode (**required**)](#mode)
@@ -11,6 +11,8 @@
* [classes)](#classes)
* [bgColor](#bgColor)
* [nonSelectable)](#nonSelectable)
+* [nonSelectableStyle](#nonSelectableStyle)
+* [nonSelectableClasses](#nonSelectableClasses)
* [clickToSelect)](#clickToSelect)
* [clickToExpand)](#clickToExpand)
* [clickToEdit](#clickToEdit)
@@ -139,6 +141,54 @@ const selectRow = {
};
```
+### selectRow.nonSelectableStyle - [Object | Function]
+This prop allow you to customize the non selectable rows. `selectRow.nonSelectableStyle` accepts an style object
+and a callback function for more flexible customization.
+
+### Style Object
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableStyle: (row, rowIndex) => { return ...; }
+};
+```
+
+### selectRow.nonSelectableClasses - [String | Function]
+This prop allow you to set a custom class for the non selectable rows, or use a callback function for more
+flexible customization
+
+### String
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableClasses: 'my-class'
+};
+```
+
+### Callback Function
+
+```js
+const selectRow = {
+ mode: 'checkbox',
+ nonSelectable: [1, 3 ,5],
+ nonSelectableClasses: (row, rowIndex) => { return ...; }
+};
+```
+
### selectRow.clickToSelect - [Bool]
Allow user to select row by clicking on the row.
@@ -149,7 +199,7 @@ const selectRow = {
};
```
-> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
+> Note: When you also enable [cellEdit](./cell-edit.md), the `selectRow.clickToSelect` will deactivate the functionality of cell editing
> If you want to click on row to select row and edit cell simultaneously, you are suppose to enable [`selectRow.clickToEdit`](#clickToEdit)
### selectRow.clickToExpand - [Bool]
@@ -307,7 +357,7 @@ const selectRow = {
mode: 'checkbox',
onSelectAll: (isSelect, rows, e) => {
if (isSelect && SOME_CONDITION) {
- return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
+ return [1, 3, 4]; // finally, key 1, 3, 4 will being selected
}
}
};
From d4ffc11f7e536b050d3e231b121ddadef836d896 Mon Sep 17 00:00:00 2001
From: Ymbere Xavier
Date: Sun, 27 Oct 2019 23:08:58 -0300
Subject: [PATCH 194/250] Update storybook with the new props examples
---
.../non-selectable-rows-class.js | 61 +++++++++++++++++++
.../non-selectable-rows-style.js | 61 +++++++++++++++++++
.../stories/index.js | 4 ++
3 files changed, 126 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
create mode 100644 packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
new file mode 100644
index 000000000..a1a8df7da
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-class.js
@@ -0,0 +1,61 @@
+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'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+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'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableClasses: 'row-index-bigger-than-2101'
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
new file mode 100644
index 000000000..d3fd7f0fd
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/row-selection/non-selectable-rows-style.js
@@ -0,0 +1,61 @@
+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'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+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'
+}];
+
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true,
+ nonSelectable: [0, 2, 4],
+ nonSelectableStyle: { backgroundColor: 'gray' }
+};
+
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 5587d0b80..43baae62f 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -151,6 +151,8 @@ import HeaderStyleTable from 'examples/row-selection/header-style';
import HideSelectAllTable from 'examples/row-selection/hide-select-all';
import CustomSelectionTable from 'examples/row-selection/custom-selection';
import NonSelectableRowsTable from 'examples/row-selection/non-selectable-rows';
+import NonSelectableRowsStyleTable from 'examples/row-selection/non-selectable-rows-style';
+import NonSelectableRowsClassTable from 'examples/row-selection/non-selectable-rows-class';
import SelectionBgColorTable from 'examples/row-selection/selection-bgcolor';
import SelectionHooks from 'examples/row-selection/selection-hooks';
import HideSelectionColumnTable from 'examples/row-selection/hide-selection-column';
@@ -408,6 +410,8 @@ storiesOf('Row Selection', module)
.add('Custom Selection', () =>
Date: Sat, 16 Nov 2019 14:11:16 +0800
Subject: [PATCH 195/250] fix #1146
---
packages/react-bootstrap-table2/src/row-expand/expand-cell.js | 2 +-
.../react-bootstrap-table2/src/row-expand/expand-header-cell.js | 2 +-
.../react-bootstrap-table2/src/row-selection/selection-cell.js | 2 +-
.../src/row-selection/selection-header-cell.js | 2 +-
.../row-selection/__snapshots__/selection-cell.test.js.snap | 1 +
5 files changed, 5 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-cell.js b/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
index 4b5903dd9..c3c2dda28 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-cell.js
@@ -44,7 +44,7 @@ export default class ExpandCell extends Component {
if (tabIndex !== -1) attrs.tabIndex = tabIndex;
return (
-
+
{
expandColumnRenderer ? expandColumnRenderer({
expandable,
diff --git a/packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js b/packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js
index e30fd9a32..0ed9c1449 100644
--- a/packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js
+++ b/packages/react-bootstrap-table2/src/row-expand/expand-header-cell.js
@@ -28,7 +28,7 @@ export default class ExpansionHeaderCell extends Component {
};
return (
-
+
{
expandHeaderColumnRenderer ?
expandHeaderColumnRenderer({ isAnyExpands }) :
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index d7f8ec816..f53753cff 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -86,7 +86,7 @@ export default class SelectionCell extends Component {
{
({ bootstrap4 }) => (
-
+
{
selectionRenderer ? selectionRenderer({
mode: inputType,
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
index 5d65ce3b2..0ae8c05e0 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-header-cell.js
@@ -112,7 +112,7 @@ export default class SelectionHeaderCell extends Component {
);
}
return (
- { content }
+ { content }
);
}
}
diff --git a/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap b/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap
index 2f5e4dc74..dbe235dcf 100644
--- a/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap
+++ b/packages/react-bootstrap-table2/test/row-selection/__snapshots__/selection-cell.test.js.snap
@@ -2,6 +2,7 @@
exports[`
Date: Sat, 16 Nov 2019 14:59:15 +0800
Subject: [PATCH 197/250] Publish
- react-bootstrap-table2-example@1.0.34
- react-bootstrap-table-next@3.3.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 838b4de70..2bbf5534a 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.33",
+ "version": "1.0.34",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index c73215b91..de773fb02 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.0",
+ "version": "3.3.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 4a340c714bb6006a30c447eeba4fd44ceca1e379 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 23 Nov 2019 14:35:45 +0800
Subject: [PATCH 198/250] fix #1168
---
.../src/props-resolver/column-resolver.js | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
index 11fb65262..b747c73dd 100644
--- a/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
+++ b/packages/react-bootstrap-table2/src/props-resolver/column-resolver.js
@@ -1,7 +1,13 @@
export default ExtendBase =>
class ColumnResolver extends ExtendBase {
visibleColumnSize(includeSelectColumn = true) {
- let columnLen = this.props.columns.filter(c => !c.hidden).length;
+ let columnLen;
+ if (this.props.columnToggle && this.props.columnToggle.toggles) {
+ const columns = this.props.columnToggle.toggles;
+ columnLen = Object.keys(columns).filter(name => columns[name]).length;
+ } else {
+ columnLen = this.props.columns.filter(c => !c.hidden).length;
+ }
if (!includeSelectColumn) return columnLen;
if (this.props.selectRow && !this.props.selectRow.hideSelectColumn) {
columnLen += 1;
From 8ecdbf611bf7e715d95511a731032d5028759799 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 23 Nov 2019 15:56:14 +0800
Subject: [PATCH 199/250] fix #1169
---
.../examples/column-filter/filter-position.js | 21 ++++++
.../src/bootstrap-table.js | 2 +
.../react-bootstrap-table2/src/filters.js | 51 ++++++++------
packages/react-bootstrap-table2/src/footer.js | 66 +++++++------------
.../src/row/row-template.js | 48 ++++++++++++++
.../test/footer.test.js | 6 +-
6 files changed, 131 insertions(+), 63 deletions(-)
create mode 100644 packages/react-bootstrap-table2/src/row/row-template.js
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
index 431db8d3a..661ef3dba 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-position.js
@@ -71,6 +71,23 @@ const columns = [{
/>
`;
+const selectRow = {
+ mode: 'checkbox',
+ clickToSelect: true
+};
+
+const expandRow = {
+ renderer: row => (
+
+
{ `This Expand row is belong to rowKey ${row.id}` }
+
You can render anything here, also you can add additional data on every row object
+
expandRow.renderer callback will pass the origin row object to you
+
(
columns={ columns }
filter={ filterFactory() }
filterPosition="top"
+ expandRow={ expandRow }
+ selectRow={ selectRow }
/>
{ sourceCode1 }
(
columns={ columns }
filter={ filterFactory() }
filterPosition="bottom"
+ expandRow={ expandRow }
+ selectRow={ selectRow }
/>
{ sourceCode2 }
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index d93252e1f..a69e3967e 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -111,6 +111,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
currFilters={ this.props.currFilters }
filterPosition={ this.props.filterPosition }
onExternalFilter={ this.props.onExternalFilter }
+ selectRow={ selectRow }
+ expandRow={ expandRow }
/>
)}
{
const {
@@ -12,28 +13,33 @@ const Filters = (props) => {
currFilters,
filterPosition,
onExternalFilter,
- className
+ className,
+ selectRow,
+ expandRow
} = props;
- const filterColumns = [];
- let showFiltersRow = false;
+ function renderContent() {
+ const filterColumns = [];
+ let showFiltersRow = false;
- columns.forEach((column, i) => {
- filterColumns.push( {
: 'table-footer-group'
} }
>
- {filterColumns}
+
);
};
@@ -60,7 +71,9 @@ Filters.propTypes = {
]),
currFilters: PropTypes.object,
onExternalFilter: PropTypes.func,
- className: PropTypes.string
+ className: PropTypes.string,
+ selectRow: PropTypes.object,
+ expandRow: PropTypes.object
};
Filters.defaultProps = {
diff --git a/packages/react-bootstrap-table2/src/footer.js b/packages/react-bootstrap-table2/src/footer.js
index 5cb542d8f..84040df83 100644
--- a/packages/react-bootstrap-table2/src/footer.js
+++ b/packages/react-bootstrap-table2/src/footer.js
@@ -2,57 +2,41 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Const from './const';
+import RowTemplate from './row/row-template';
import FooterCell from './footer-cell';
import _ from './utils';
const Footer = (props) => {
const { data, className, columns, selectRow, expandRow } = props;
- const SelectionFooterCellComp = () =>
-
- { childrens }
-
+
);
};
diff --git a/packages/react-bootstrap-table2/src/row/row-template.js b/packages/react-bootstrap-table2/src/row/row-template.js
new file mode 100644
index 000000000..7aa468337
--- /dev/null
+++ b/packages/react-bootstrap-table2/src/row/row-template.js
@@ -0,0 +1,48 @@
+/* eslint react/require-default-props: 0 */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Const from '../const';
+
+const RowTemplate = (props) => {
+ const {
+ renderContent,
+ selectRow,
+ expandRow,
+ cellEl,
+ ...rest
+ } = props;
+
+ const isRenderFunctionColumnInLeft = (
+ position = Const.INDICATOR_POSITION_LEFT
+ ) => position === Const.INDICATOR_POSITION_LEFT;
+
+ const childrens = renderContent() || [];
+
+ if (selectRow && selectRow.hideSelectColumn !== true) {
+ if (isRenderFunctionColumnInLeft(selectRow.selectColumnPosition)) {
+ childrens.unshift(React.createElement(cellEl, { key: 'selection' }));
+ } else {
+ childrens.push(React.createElement(cellEl, { key: 'selection' }));
+ }
+ }
+
+ if (expandRow.showExpandColumn) {
+ if (isRenderFunctionColumnInLeft(expandRow.expandColumnPosition)) {
+ childrens.unshift(React.createElement(cellEl, { key: 'expansion' }));
+ } else {
+ childrens.push(React.createElement(cellEl, { key: 'expansion' }));
+ }
+ }
+
+ return { childrens } ;
+};
+
+RowTemplate.propTypes = {
+ renderContent: PropTypes.func.isRequired,
+ cellEl: PropTypes.string.isRequired,
+ selectRow: PropTypes.object,
+ expandRow: PropTypes.object
+};
+
+export default RowTemplate;
diff --git a/packages/react-bootstrap-table2/test/footer.test.js b/packages/react-bootstrap-table2/test/footer.test.js
index 3812a49ec..8d651d64c 100644
--- a/packages/react-bootstrap-table2/test/footer.test.js
+++ b/packages/react-bootstrap-table2/test/footer.test.js
@@ -48,7 +48,7 @@ describe('Footer', () => {
describe('simplest footer', () => {
beforeEach(() => {
- wrapper = shallow(
+ wrapper = render(
{
it('should render successfully', () => {
expect(wrapper.length).toBe(1);
expect(wrapper.find('tr').length).toBe(1);
- expect(wrapper.find(FooterCell).length).toBe(columns.length);
+ expect(wrapper.find('th').length).toBe(columns.length);
});
});
@@ -86,7 +86,7 @@ describe('Footer', () => {
});
});
- describe('when selecrRow prop is enable', () => {
+ describe('when selectRow prop is enable', () => {
beforeEach(() => {
wrapper = render(
Date: Mon, 2 Dec 2019 19:55:23 +0800
Subject: [PATCH 200/250] Publish
- react-bootstrap-table2-example@1.0.35
- react-bootstrap-table-next@3.3.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 2bbf5534a..67e3c1176 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.34",
+ "version": "1.0.35",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index de773fb02..a0dbf8221 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.1",
+ "version": "3.3.2",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 1d1356582461c6229ca77d03cb106310f20320e3 Mon Sep 17 00:00:00 2001
From: Ymbere Xavier
Date: Wed, 4 Dec 2019 01:50:26 -0200
Subject: [PATCH 201/250] Add new prop to Caption component
Add new prop of Caption component in order to check if
bootstrap is in use
---
packages/react-bootstrap-table2/src/bootstrap-table.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index a69e3967e..9c2c79162 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -83,7 +83,9 @@ class BootstrapTable extends PropsBaseResolver(Component) {
const hasFooter = _.filter(columns, col => _.has(col, 'footer')).length > 0;
- const tableCaption = (caption && { caption } );
+ const tableCaption = (
+ caption && { caption }
+ );
return (
From b99a277595f2991ea5a4a6247e2f26f59eda86f2 Mon Sep 17 00:00:00 2001
From: Ymbere Xavier
Date: Wed, 4 Dec 2019 01:44:07 -0200
Subject: [PATCH 202/250] Fix issue with caption on bootstrap 4
Add new prop to check if bootstrap is used
Update component in order to return a custom caption when bootstrap4
is in use
---
packages/react-bootstrap-table2/src/caption.js | 12 +++++++++---
1 file changed, 9 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/caption.js b/packages/react-bootstrap-table2/src/caption.js
index 972d9298d..79706a6b1 100644
--- a/packages/react-bootstrap-table2/src/caption.js
+++ b/packages/react-bootstrap-table2/src/caption.js
@@ -4,16 +4,22 @@ import PropTypes from 'prop-types';
const Caption = (props) => {
if (!props.children) return null;
- return (
- { props.children }
+
+ const caption = props.bootstrap4 ? (
+ {props.children}
+ ) : (
+ {props.children}
);
+
+ return caption;
};
Caption.propTypes = {
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.string
- ])
+ ]),
+ bootstrap4: PropTypes.bool
};
export default Caption;
From ae34c44547f623ed6a86c9b9efc0af2e9eb4d3f9 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Thu, 5 Dec 2019 20:42:05 +0800
Subject: [PATCH 203/250] fix wrong story example code
---
.../examples/csv/custom-csv.js | 11 +++++++++--
1 file changed, 9 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/csv/custom-csv.js b/packages/react-bootstrap-table2-example/examples/csv/custom-csv.js
index a78d8b064..1fe5e9b40 100644
--- a/packages/react-bootstrap-table2-example/examples/csv/custom-csv.js
+++ b/packages/react-bootstrap-table2-example/examples/csv/custom-csv.js
@@ -40,7 +40,13 @@ const columns = [{
keyField="id"
data={ products }
columns={ columns }
- exportCSV
+ exportCSV={ {
+ fileName: 'custom.csv',
+ separator: '|',
+ ignoreHeader: true,
+ noAutoBOM: false,
+ blobType: 'text/csv;charset=ansi'
+ } }
>
{
props => (
@@ -64,7 +70,8 @@ export default () => (
fileName: 'custom.csv',
separator: '|',
ignoreHeader: true,
- noAutoBOM: false
+ noAutoBOM: false,
+ blobType: 'text/csv;charset=ansi'
} }
>
{
From 76f479540058ffcde3f741770b89baaa81bb54da Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Dec 2019 13:29:19 +0800
Subject: [PATCH 204/250] add story for caption table for bootstrap4
---
.../examples/bootstrap4/caption-table.js | 49 +++++++++++++++++++
.../stories/index.js | 2 +
2 files changed, 51 insertions(+)
create mode 100644 packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js
diff --git a/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js b/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js
new file mode 100644
index 000000000..1c23a3c0f
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/bootstrap4/caption-table.js
@@ -0,0 +1,49 @@
+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'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+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'
+}];
+
+const CaptionElement = () => Component as Header ;
+
+Component as Header ;
+
+export default () => (
+
+ { sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index bb587b088..059e85cfd 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -18,6 +18,7 @@ import TabIndexCellTable from 'examples/basic/tabindex-column';
// bootstrap 4
import Bootstrap4DefaultSortTable from 'examples/bootstrap4/sort';
+import Bootstrap4CaptionTable from 'examples/bootstrap4/caption-table';
import Bootstrap4RowSelectionTable from 'examples/bootstrap4/row-selection';
import Bootstrap4PaginationTable from 'examples/bootstrap4/pagination';
import Bootstrap4ColumnToggleTable from 'examples/bootstrap4/column-toggle';
@@ -268,6 +269,7 @@ storiesOf('Basic Table', module)
storiesOf('Bootstrap 4', module)
.addDecorator(bootstrapStyle(BOOTSTRAP_VERSION.FOUR))
.add('Sort table with bootstrap 4', () =>
Date: Sat, 7 Dec 2019 14:29:20 +0800
Subject: [PATCH 205/250] fix #1188
---
.../examples/csv/export-footer.js | 92 +++++++++++++++++++
.../stories/index.js | 4 +-
.../react-bootstrap-table2-toolkit/README.md | 3 +
.../react-bootstrap-table2-toolkit/context.js | 1 +
.../src/csv/exporter.js | 24 ++++-
.../src/op/csv.js | 3 +-
6 files changed, 121 insertions(+), 6 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/csv/export-footer.js
diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-footer.js b/packages/react-bootstrap-table2-example/examples/csv/export-footer.js
new file mode 100644
index 000000000..aab08aeda
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/csv/export-footer.js
@@ -0,0 +1,92 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { ExportCSVButton } = CSVExport;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: '',
+ footerFormatter: column => column.text
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: columnData => columnData.reduce((acc, item) => acc + item, 0)
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { CSVExport } from 'react-bootstrap-table2-toolkit';
+
+const { ExportCSVButton } = CSVExport;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ footer: 'Footer 1'
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ footer: 'Footer 2'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ footer: 'Footer 3'
+}];
+
+
+ {
+ props => (
+
+ Export CSV!!
+
+`;
+
+export default () => (
+
+
+ {
+ props => (
+
+ Export CSV!!
+
+
{ sourceCode }
+
Date: Sat, 7 Dec 2019 16:01:35 +0800
Subject: [PATCH 206/250] fix #1180
---
docs/README.md | 14 +++
.../examples/sort/sort-management.js | 118 ++++++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 4 +
.../src/contexts/index.js | 1 +
.../src/contexts/sort-context.js | 44 +++++--
6 files changed, 173 insertions(+), 10 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/sort/sort-management.js
diff --git a/docs/README.md b/docs/README.md
index 0ec844235..319d9fc41 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -28,6 +28,7 @@
* [rowClasses](#rowClasses)
* [rowEvents](#rowEvents)
* [hiddenRows](#hiddenRows)
+* [sort](#sort)
* [defaultSorted](#defaultSorted)
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
@@ -199,6 +200,19 @@ const hiddenRows = [1, 4];
sort - [Object]
+Two cases you probably need to configure `sort` prop:
+
+#### Manage sorting state
+You can give `dataField` and `order` to specify the sorting state in table, For example
+
+```js
+
+```
+
+#### One-time sorting configuration
+**TBD**
+
### defaultSorted - [Array]
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
diff --git a/packages/react-bootstrap-table2-example/examples/sort/sort-management.js b/packages/react-bootstrap-table2-example/examples/sort/sort-management.js
new file mode 100644
index 000000000..32a5e01ce
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/sort-management.js
@@ -0,0 +1,118 @@
+/* eslint no-console: 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 sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+
+class SortManagement extends React.Component {
+ state = {
+ field: null,
+ order: null
+ }
+
+ handleSort = (field, order) => {
+ this.setState({
+ field,
+ order
+ });
+ }
+
+ handleSortById = () => {
+ this.setState({
+ field: 'id',
+ order: 'desc'
+ });
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }];
+ return (
+
+ Sort By ID
+ { sourceCode }
+
+ );
+ }
+}
+`;
+
+export default class SortManagement extends React.Component {
+ state = {
+ field: null,
+ order: null
+ }
+
+ handleSort = (field, order) => {
+ this.setState({
+ field,
+ order
+ });
+ }
+
+ handleSortById = () => {
+ this.setState({
+ field: 'id',
+ order: 'desc'
+ });
+ }
+
+ render() {
+ const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'name',
+ text: 'Product Name',
+ sort: true,
+ onSort: this.handleSort
+ }, {
+ dataField: 'price',
+ text: 'Product Price'
+ }];
+ return (
+
+ Sort By ID
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 829a35820..be5a76bb5 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -106,6 +106,7 @@ import EnableSortTable from 'examples/sort/enable-sort-table';
import DefaultSortTable from 'examples/sort/default-sort-table';
import DefaultSortDirectionTable from 'examples/sort/default-sort-direction';
import SortEvents from 'examples/sort/sort-events';
+import SortManagement from 'examples/sort/sort-management';
import CustomSortValue from 'examples/sort/custom-sort-value';
import CustomSortTable from 'examples/sort/custom-sort-table';
import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -365,6 +366,7 @@ storiesOf('Sort Table', module)
.add('Default Sort Table', () =>
diff --git a/packages/react-bootstrap-table2/src/contexts/sort-context.js b/packages/react-bootstrap-table2/src/contexts/sort-context.js
index 033d99ad8..e419093bb 100644
--- a/packages/react-bootstrap-table2/src/contexts/sort-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/sort-context.js
@@ -1,3 +1,4 @@
+/* eslint camelcase: 0 */
/* eslint react/require-default-props: 0 */
import React from 'react';
import PropTypes from 'prop-types';
@@ -19,6 +20,10 @@ export default (
dataField: PropTypes.string.isRequired,
order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
})),
+ sort: PropTypes.shape({
+ dataField: PropTypes.string,
+ order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
+ }),
defaultSortDirection: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC])
}
@@ -26,19 +31,14 @@ export default (
super(props);
let sortOrder;
let sortColumn;
- const { columns, defaultSorted, defaultSortDirection } = props;
+ const { defaultSorted, defaultSortDirection, sort } = props;
if (defaultSorted && defaultSorted.length > 0) {
- const sortField = defaultSorted[0].dataField;
sortOrder = defaultSorted[0].order || defaultSortDirection;
- const sortColumns = columns.filter(col => col.dataField === sortField);
- if (sortColumns.length > 0) {
- sortColumn = sortColumns[0];
-
- if (sortColumn.onSort) {
- sortColumn.onSort(sortField, sortOrder);
- }
- }
+ sortColumn = this.initSort(defaultSorted[0].dataField, sortOrder);
+ } else if (sort && sort.dataField && sort.order) {
+ sortOrder = sort.order;
+ sortColumn = this.initSort(sort.dataField, sortOrder);
}
this.state = { sortOrder, sortColumn };
}
@@ -50,6 +50,30 @@ export default (
}
}
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ const { sort, columns } = nextProps;
+ if (sort && sort.dataField && sort.order) {
+ this.setState({
+ sortOrder: sort.order,
+ sortColumn: columns.find(col => col.dataField === sort.dataField)
+ });
+ }
+ }
+
+ initSort(sortField, sortOrder) {
+ let sortColumn;
+ const { columns } = this.props;
+ const sortColumns = columns.filter(col => col.dataField === sortField);
+ if (sortColumns.length > 0) {
+ sortColumn = sortColumns[0];
+
+ if (sortColumn.onSort) {
+ sortColumn.onSort(sortField, sortOrder);
+ }
+ }
+ return sortColumn;
+ }
+
handleSort = (column) => {
const sortOrder = dataOperator.nextOrder(column, this.state, this.props.defaultSortDirection);
From a07b2da00a0e4703557c6ee5c7a74ff7df732a64 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Dec 2019 16:40:26 +0800
Subject: [PATCH 207/250] fix #1144
---
docs/README.md | 10 +-
.../sort/one-time-sort-configuration.js | 98 +++++++++++++++++++
.../stories/index.js | 2 +
.../src/bootstrap-table.js | 5 +-
.../src/contexts/sort-context.js | 7 +-
.../react-bootstrap-table2/src/header-cell.js | 11 ++-
packages/react-bootstrap-table2/src/header.js | 5 +-
7 files changed, 130 insertions(+), 8 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js
diff --git a/docs/README.md b/docs/README.md
index 319d9fc41..1637a6b3b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -211,7 +211,15 @@ You can give `dataField` and `order` to specify the sorting state in table, For
```
#### One-time sorting configuration
-**TBD**
+In earily version, we only can configure [`sortCaret`](./columns.md#sortCaret) and [`sortFunc` ](./columns.md#sortFunc) per column. But they are same in most of cases.
+So here we give you a chance to just setup these prop in one time.
+
+```js
+
+```
### defaultSorted - [Array]
`defaultSorted` accept an object array which allow you to define the default sort columns when first render.
diff --git a/packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js b/packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js
new file mode 100644
index 000000000..93e012e80
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/sort/one-time-sort-configuration.js
@@ -0,0 +1,98 @@
+/* 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
+}, {
+ 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
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+class OnetimeSortConfiguration extends React.Component {
+ sortFunc = (a, b, order, dataField) => {
+ if (order === 'asc') {
+ return b - a;
+ }
+ return a - b; // desc
+ }
+
+ render() {
+ const sortOption = {
+ // No need to configure sortFunc per column
+ sortFunc: this.sortFunc,
+ // No need to configure sortCaret per column
+ sortCaret: (order, column) => {
+ if (!order) return ( Desc/Asc );
+ else if (order === 'asc') return ( Desc/Asc );
+ else if (order === 'desc') return ( Desc /Asc );
+ return null;
+ }
+ };
+
+ return (
+
+ Change Data
+ { sourceCode }
+
+ );
+ }
+}
+`;
+
+export default class OnetimeSortConfiguration extends React.Component {
+ sortFunc = (a, b, order, dataField) => {
+ if (order === 'asc') {
+ return b - a;
+ }
+ return a - b; // desc
+ }
+
+ render() {
+ const sortOption = {
+ sortFunc: this.sortFunc,
+ sortCaret: (order, column) => {
+ if (!order) return ( Desc/Asc );
+ else if (order === 'asc') return ( Desc/Asc );
+ else if (order === 'desc') return ( Desc /Asc );
+ return null;
+ }
+ };
+
+ return (
+
+
Reverse Sorting Table
+ { sourceCode }
+
+ );
+ }
+}
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index be5a76bb5..9bca826bf 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -107,6 +107,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 SortManagement from 'examples/sort/sort-management';
+import OneTimeSortConfiguration from 'examples/sort/one-time-sort-configuration';
import CustomSortValue from 'examples/sort/custom-sort-value';
import CustomSortTable from 'examples/sort/custom-sort-table';
import CustomSortCaretTable from 'examples/sort/custom-sort-caret';
@@ -367,6 +368,7 @@ storiesOf('Sort Table', module)
.add('Default Sort Direction Table', () =>
Date: Sat, 7 Dec 2019 17:24:55 +0800
Subject: [PATCH 208/250] Publish
- react-bootstrap-table2-example@1.0.36
- react-bootstrap-table2-toolkit@2.1.1
- react-bootstrap-table-next@3.3.3
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 67e3c1176..b1c014265 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.35",
+ "version": "1.0.36",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 273d43a1b..203a9f64e 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "2.1.0",
+ "version": "2.1.1",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index a0dbf8221..beada73da 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.2",
+ "version": "3.3.3",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From e4589eb358e45e92eff11e1691282cd00b539f58 Mon Sep 17 00:00:00 2001
From: "Mark J. Lehman"
Date: Mon, 9 Dec 2019 03:46:10 -0800
Subject: [PATCH 209/250] Update package.json (#1189)
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 1338c4d53..a1717cd04 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -36,7 +36,7 @@
}
],
"dependencies": {
- "classnames": "2.2.5",
+ "classnames": "^2.2.5",
"react-transition-group": "2.5.3",
"underscore": "1.9.1"
},
From b8c9712e91da15507c44426d2cf9b7678490a6b7 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Mon, 9 Dec 2019 20:01:09 +0800
Subject: [PATCH 210/250] fix wrong story code
---
.../examples/csv/export-footer.js | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/csv/export-footer.js b/packages/react-bootstrap-table2-example/examples/csv/export-footer.js
index aab08aeda..25f9dbcc5 100644
--- a/packages/react-bootstrap-table2-example/examples/csv/export-footer.js
+++ b/packages/react-bootstrap-table2-example/examples/csv/export-footer.js
@@ -48,11 +48,7 @@ const columns = [{
data={ products }
columns={ columns }
exportCSV={ {
- fileName: 'custom.csv',
- separator: '|',
- ignoreHeader: true,
- noAutoBOM: false,
- blobType: 'text/csv;charset=ansi'
+ ignoreFooter: false
} }
>
{
From 87caa371334562fcf6fde23e355b767a1498ce2c Mon Sep 17 00:00:00 2001
From: Michael-Hanley
Date: Sat, 8 Feb 2020 01:29:56 -0800
Subject: [PATCH 211/250] Adds onKeyUp event to header for sort
---
packages/react-bootstrap-table2/src/header-cell.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index 51729be6b..f49b16f1c 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -77,6 +77,12 @@ class HeaderCell extends eventDelegater(React.Component) {
if (sort) {
const customClick = cellAttrs.onClick;
+ cellAttrs.onKeyUp = (e) => {
+ if (e.key === 'Enter') {
+ onSort(column);
+ if (_.isFunction(customClick)) customClick(e);
+ }
+ };
cellAttrs.onClick = (e) => {
onSort(column);
if (_.isFunction(customClick)) customClick(e);
From 20fb662ca329bda175c2220f507686514520bd35 Mon Sep 17 00:00:00 2001
From: Michael-Hanley
Date: Sat, 8 Feb 2020 10:47:12 -0800
Subject: [PATCH 212/250] Adds tests for the KeyUp event on header
---
.../test/header-cell.test.js | 14 ++++++++++++++
1 file changed, 14 insertions(+)
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index 465bde1f8..aaa25138f 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -393,12 +393,26 @@ describe('HeaderCell', () => {
it('should have onClick event on header cell', () => {
expect(wrapper.find('th').prop('onClick')).toBeDefined();
});
+
+ it('should have onKeyUp event on header cell', () => {
+ expect(wrapper.find('th').prop('onKeyUp')).toBeDefined();
+ });
it('should trigger onSort callback when click on header cell', () => {
wrapper.find('th').simulate('click');
expect(onSortCallBack.callCount).toBe(1);
});
+ it('should trigger onSort callback when keyup Enter on header cell', () => {
+ wrapper.find('th').simulate('keyup', {key: 'Enter'});
+ expect(onSortCallBack.callCount).toBe(1);
+ });
+
+ it('should not trigger onSort callback when keyup key is not Enter on header cell', () => {
+ wrapper.find('th').simulate('keyup', {key: 'test-key'});
+ expect(onSortCallBack.callCount).toBe(0);
+ });
+
describe('and sorting prop is false', () => {
it('header should render SortSymbol as default', () => {
expect(wrapper.find(SortSymbol).length).toBe(1);
From 3d4c28a1ad5448546fd8d00179922a2696a6ef47 Mon Sep 17 00:00:00 2001
From: Michael-Hanley
Date: Sat, 8 Feb 2020 11:25:40 -0800
Subject: [PATCH 213/250] fix linting issues
---
packages/react-bootstrap-table2/test/header-cell.test.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index aaa25138f..a5437f7db 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -393,7 +393,7 @@ describe('HeaderCell', () => {
it('should have onClick event on header cell', () => {
expect(wrapper.find('th').prop('onClick')).toBeDefined();
});
-
+
it('should have onKeyUp event on header cell', () => {
expect(wrapper.find('th').prop('onKeyUp')).toBeDefined();
});
@@ -404,12 +404,12 @@ describe('HeaderCell', () => {
});
it('should trigger onSort callback when keyup Enter on header cell', () => {
- wrapper.find('th').simulate('keyup', {key: 'Enter'});
+ wrapper.find('th').simulate('keyup', { key: 'Enter' });
expect(onSortCallBack.callCount).toBe(1);
});
it('should not trigger onSort callback when keyup key is not Enter on header cell', () => {
- wrapper.find('th').simulate('keyup', {key: 'test-key'});
+ wrapper.find('th').simulate('keyup', { key: 'test-key' });
expect(onSortCallBack.callCount).toBe(0);
});
From 5cc7882e4cf1490b6f094cd9cccbba01aabb1233 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 9 Feb 2020 14:46:13 +0800
Subject: [PATCH 214/250] fix #1234
---
packages/react-bootstrap-table2/src/contexts/index.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 6f18b7256..e59a5c741 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -85,6 +85,12 @@ const withContext = Base =>
}
UNSAFE_componentWillReceiveProps(nextProps) {
+ if (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) {
+ this.SortContext = createSortContext(
+ dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
+ } else {
+ this.SortContext = null;
+ }
if (!nextProps.pagination && this.props.pagination) {
this.PaginationContext = null;
}
From 7162728b4536c97f6a42fb712c8082d387947a09 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 9 Feb 2020 15:09:16 +0800
Subject: [PATCH 215/250] fix #1233
---
.../react-bootstrap-table2-toolkit/context.js | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js
index ef736e87a..3ca25e739 100644
--- a/packages/react-bootstrap-table2-toolkit/context.js
+++ b/packages/react-bootstrap-table2-toolkit/context.js
@@ -64,6 +64,24 @@ class ToolkitProvider extends statelessDecorator(React.Component) {
this.state = state;
}
+ // eslint-disable-next-line camelcase
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ let columnToggle = this.state.columnToggle;
+ if (nextProps.columnToggle) {
+ columnToggle = nextProps.columns
+ .reduce((obj, column) => {
+ obj[column.dataField] = !column.hidden;
+ return obj;
+ }, {});
+ } else {
+ columnToggle = null;
+ }
+ this.setState({
+ ...this.state,
+ columnToggle
+ });
+ }
+
onSearch(searchText) {
if (searchText !== this.state.searchText) {
this.setState({ searchText });
From 7b593a783c2f6eba485b6bb3725d8360b34b7470 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 9 Feb 2020 15:41:16 +0800
Subject: [PATCH 216/250] fix #1231
---
docs/README.md | 4 ++++
.../examples/basic/customized-id-classes.js | 8 ++++++++
.../stories/stylesheet/base-table/_index.scss | 2 +-
packages/react-bootstrap-table2/src/body.js | 5 +++--
packages/react-bootstrap-table2/src/bootstrap-table.js | 6 +++++-
packages/react-bootstrap-table2/src/header.js | 6 ++++--
6 files changed, 25 insertions(+), 6 deletions(-)
diff --git a/docs/README.md b/docs/README.md
index 1637a6b3b..d622a8848 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -21,6 +21,7 @@
* [classes](#classes)
* [wrapperClasses](#wrapperClasses)
* [headerClasses](#headerClasses)
+* [headerWrapperClasses](#headerWrapperClasses)
* [cellEdit](#cellEdit)
* [selectRow](#selectRow)
* [expandRow](#expandRow)
@@ -137,6 +138,9 @@ Customize class on the outer element which wrap up the `table` element.
### headerClasses - [String]
Customize class on the header row(`tr`).
+### headerWrapperClasses - [String]
+Customize class on the `thead`.
+
### cellEdit - [Object]
Makes table cells editable, please see [cellEdit definition](./cell-edit.md) for more detail.
diff --git a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
index fae4bf723..63ec718d9 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/customized-id-classes.js
@@ -33,6 +33,8 @@ const columns = [{
Customized table className
Customized thead className
+ Customized tbody className
+ Customized wrapper className
{ content }
+ { content }
);
}
}
diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js
index fd0d81737..21d55a36d 100644
--- a/packages/react-bootstrap-table2/src/bootstrap-table.js
+++ b/packages/react-bootstrap-table2/src/bootstrap-table.js
@@ -94,6 +94,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
)}
{
currFilters,
onExternalFilter,
filterPosition,
- globalSortCaret
+ globalSortCaret,
+ wrapperClasses
} = props;
let SelectionHeaderCellComp = () => null;
@@ -80,7 +81,7 @@ const Header = (props) => {
}
return (
-
+
{ childrens }
@@ -99,6 +100,7 @@ Header.propTypes = {
onExternalFilter: PropTypes.func,
globalSortCaret: PropTypes.func,
className: PropTypes.string,
+ wrapperClasses: PropTypes.string,
expandRow: PropTypes.object,
filterPosition: PropTypes.oneOf([
Const.FILTERS_POSITION_TOP,
From 1aa4bbc487b5b8797e0e9415b018db01484c83fa Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 9 Feb 2020 16:15:16 +0800
Subject: [PATCH 217/250] Publish
- react-bootstrap-table2-example@1.0.37
- react-bootstrap-table2-toolkit@2.1.2
- react-bootstrap-table-next@3.3.4
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index b1c014265..cda09b470 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.36",
+ "version": "1.0.37",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index 203a9f64e..c9625d1e2 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "2.1.1",
+ "version": "2.1.2",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 625f697b4..0ea54d320 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.3",
+ "version": "3.3.4",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 2b44965882cfe9fbfb814a4a2aa45f2e433e3ce4 Mon Sep 17 00:00:00 2001
From: Michael-Hanley
Date: Sun, 9 Feb 2020 12:32:24 -0800
Subject: [PATCH 218/250] Add aria-label to headers for ADA
---
.../react-bootstrap-table2/src/header-cell.js | 1 +
.../test/header-cell.test.js | 1641 +++++++++--------
2 files changed, 831 insertions(+), 811 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js
index f49b16f1c..0ea0a82ca 100644
--- a/packages/react-bootstrap-table2/src/header-cell.js
+++ b/packages/react-bootstrap-table2/src/header-cell.js
@@ -77,6 +77,7 @@ class HeaderCell extends eventDelegater(React.Component) {
if (sort) {
const customClick = cellAttrs.onClick;
+ cellAttrs['aria-label'] = sorting ? `${text} sort ${sortOrder}` : `${text} sortable`;
cellAttrs.onKeyUp = (e) => {
if (e.key === 'Enter') {
onSort(column);
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index a5437f7db..b0307a531 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -1,811 +1,830 @@
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-import Const from '../src/const';
-import SortCaret from '../src/sort/caret';
-import SortSymbol from '../src/sort/symbol';
-import HeaderCell from '../src/header-cell';
-
-describe('HeaderCell', () => {
- let wrapper;
- const index = 1;
-
- describe('simplest header cell', () => {
- const column = {
- dataField: 'id',
- text: 'ID'
- };
-
- beforeEach(() => {
- wrapper = shallow({ column.text } );
- const formatter = sinon.stub()
- .withArgs(column, index)
- .returns(formatterResult);
- column.headerFormatter = formatter;
-
- beforeEach(() => {
- wrapper = shallow(test
;
- let column;
-
- beforeEach(() => {
- onFilter.mockClear();
- column = {
- dataField: 'id',
- text: 'ID',
- filter: {
- props: filterProps,
- Filter
- }
- };
- wrapper = shallow(
- test
;
- const filterRenderer = jest.fn().mockReturnValue({ column.text } );
+ const formatter = sinon.stub()
+ .withArgs(column, index)
+ .returns(formatterResult);
+ column.headerFormatter = formatter;
+
+ beforeEach(() => {
+ wrapper = shallow(test
;
+ let column;
+
+ beforeEach(() => {
+ onFilter.mockClear();
+ column = {
+ dataField: 'id',
+ text: 'ID',
+ filter: {
+ props: filterProps,
+ Filter
+ }
+ };
+ wrapper = shallow(
+ test
;
+ const filterRenderer = jest.fn().mockReturnValue(
Date: Sun, 9 Feb 2020 12:42:20 -0800
Subject: [PATCH 219/250] Swap crlf to lf
---
.../test/header-cell.test.js | 1660 ++++++++---------
1 file changed, 830 insertions(+), 830 deletions(-)
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index b0307a531..023928c3c 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -1,830 +1,830 @@
-import React from 'react';
-import sinon from 'sinon';
-import { shallow } from 'enzyme';
-
-import Const from '../src/const';
-import SortCaret from '../src/sort/caret';
-import SortSymbol from '../src/sort/symbol';
-import HeaderCell from '../src/header-cell';
-
-describe('HeaderCell', () => {
- let wrapper;
- const index = 1;
-
- describe('simplest header cell', () => {
- const column = {
- dataField: 'id',
- text: 'ID'
- };
-
- beforeEach(() => {
- wrapper = shallow({ column.text } );
- const formatter = sinon.stub()
- .withArgs(column, index)
- .returns(formatterResult);
- column.headerFormatter = formatter;
-
- beforeEach(() => {
- wrapper = shallow(test
;
- let column;
-
- beforeEach(() => {
- onFilter.mockClear();
- column = {
- dataField: 'id',
- text: 'ID',
- filter: {
- props: filterProps,
- Filter
- }
- };
- wrapper = shallow(
- test
;
- const filterRenderer = jest.fn().mockReturnValue({ column.text } );
+ const formatter = sinon.stub()
+ .withArgs(column, index)
+ .returns(formatterResult);
+ column.headerFormatter = formatter;
+
+ beforeEach(() => {
+ wrapper = shallow(test
;
+ let column;
+
+ beforeEach(() => {
+ onFilter.mockClear();
+ column = {
+ dataField: 'id',
+ text: 'ID',
+ filter: {
+ props: filterProps,
+ Filter
+ }
+ };
+ wrapper = shallow(
+ test
;
+ const filterRenderer = jest.fn().mockReturnValue(
Date: Sun, 9 Feb 2020 12:55:10 -0800
Subject: [PATCH 220/250] Fix linting issue
---
packages/react-bootstrap-table2/test/header-cell.test.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/test/header-cell.test.js b/packages/react-bootstrap-table2/test/header-cell.test.js
index 023928c3c..b1a7f4332 100644
--- a/packages/react-bootstrap-table2/test/header-cell.test.js
+++ b/packages/react-bootstrap-table2/test/header-cell.test.js
@@ -375,7 +375,6 @@ describe('HeaderCell', () => {
wrapper = shallow(
Date: Wed, 12 Feb 2020 23:27:58 -0800
Subject: [PATCH 221/250] Fix `onSort is not a function` issue
---
packages/react-bootstrap-table2/src/contexts/index.js | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index e59a5c741..19449e73b 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -85,11 +85,11 @@ const withContext = Base =>
}
UNSAFE_componentWillReceiveProps(nextProps) {
- if (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) {
+ if (nextProps.columns.filter(col => col.sort).length <= 0) {
+ this.SortContext = null;
+ } else if (!this.SortContext) {
this.SortContext = createSortContext(
dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
- } else {
- this.SortContext = null;
}
if (!nextProps.pagination && this.props.pagination) {
this.PaginationContext = null;
From 1ae9b8a5d9ce122e67b993c7a6e3d255ebf0f3e0 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 16 Feb 2020 22:26:04 +0800
Subject: [PATCH 222/250] Publish
- react-bootstrap-table-next@3.3.5
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 0ea54d320..fcf5d312e 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.4",
+ "version": "3.3.5",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 44222da2962e8cfb9f4e96800fdfab8aa085bc03 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 23 Feb 2020 16:41:52 +0800
Subject: [PATCH 223/250] close #1215
---
docs/columns.md | 1 +
.../examples/footer/column-format-table.js | 4 ++--
packages/react-bootstrap-table2/src/footer-cell.js | 2 +-
3 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/docs/columns.md b/docs/columns.md
index 6d77335a5..5636c26ac 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -594,6 +594,7 @@ This prop also accept a function:
* `column`
* `columnIndex`
+* `props`: It's an object and contain `text` property only.
## column.footerClasses - [String | Function]
It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:
diff --git a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
index 26fbbc08b..ccd85bfd7 100644
--- a/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/footer/column-format-table.js
@@ -7,7 +7,7 @@ import { productsGenerator } from 'utils/common';
const products = productsGenerator();
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
return (
$$ {column.text} $$
@@ -37,7 +37,7 @@ const columns = [
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
-function priceFormatter(column, colIndex) {
+function priceFormatter(column, colIndex, { text }) {
return (
$$ { column.text } $$
Date: Sun, 23 Feb 2020 16:56:47 +0800
Subject: [PATCH 224/250] fix #1260
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index fcf5d312e..fa5d6e74f 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -37,7 +37,7 @@
],
"dependencies": {
"classnames": "^2.2.5",
- "react-transition-group": "2.5.3",
+ "react-transition-group": "^4.2.0",
"underscore": "1.9.1"
},
"peerDependencies": {
From 1f738068f29bb283d21dca6ee428736a9a274b1e Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 23 Feb 2020 20:09:47 +0800
Subject: [PATCH 225/250] fix #1221
---
.../column-filter/clear-all-filters.js | 30 ++++++++++++++++---
.../src/utils/common.js | 1 +
.../src/context.js | 5 +++-
.../src/filter.js | 29 +++++++++++-------
.../test/context.test.js | 1 +
5 files changed, 51 insertions(+), 15 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
index 3e2a25bfa..c15f560a8 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js
@@ -1,13 +1,20 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
-import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
+import filterFactory, { textFilter, dateFilter, selectFilter } from 'react-bootstrap-table2-filter';
import Code from 'components/common/code-block';
import { stockGenerator } from 'utils/common';
const products = stockGenerator(8);
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
let nameFilter;
let priceFilter;
+let qualityFilter;
let stockDateFilter;
const columns = [{
@@ -19,7 +26,19 @@ const columns = [{
filter: textFilter({
getFilter: (filter) => {
nameFilter = filter;
- }
+ },
+ onFilter: filterVal => console.log(`Filter product name ${filterVal}`)
+ })
+}, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions,
+ getFilter: (filter) => {
+ qualityFilter = filter;
+ },
+ onFilter: filterVal => console.log(`Filter quality ${filterVal}`)
})
}, {
dataField: 'price',
@@ -27,7 +46,8 @@ const columns = [{
filter: textFilter({
getFilter: (filter) => {
priceFilter = filter;
- }
+ },
+ onFilter: filterVal => console.log(`Filter Price: ${filterVal}`)
})
}, {
dataField: 'inStockDate',
@@ -36,13 +56,15 @@ const columns = [{
filter: dateFilter({
getFilter: (filter) => {
stockDateFilter = filter;
- }
+ },
+ onFilter: filterVal => console.log(`Filter date: ${filterVal}`)
})
}];
const handleClick = () => {
nameFilter('');
priceFilter('');
+ qualityFilter('');
stockDateFilter();
};
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
index 5592779d7..131e30877 100644
--- a/packages/react-bootstrap-table2-example/src/utils/common.js
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -77,6 +77,7 @@ export const stockGenerator = (quantity = 5) =>
name: `Stock Name ${index}`,
price: Math.floor((Math.random() * 2) + 1),
visible: Math.random() > 0.5,
+ quality: index % 3,
inStockDate:
new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
}));
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index f9be85f18..64f2d195f 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -25,6 +25,7 @@ export default (
constructor(props) {
super(props);
this.currFilters = {};
+ this.clearFilters = {};
this.onFilter = this.onFilter.bind(this);
this.doFilter = this.doFilter.bind(this);
this.onExternalFilter = this.onExternalFilter.bind(this);
@@ -42,6 +43,7 @@ export default (
return (filterVal) => {
// watch out here if migration to context API, #334
const currFilters = Object.assign({}, this.currFilters);
+ this.clearFilters = {};
const { dataField, filter } = column;
const needClearFilters =
@@ -51,6 +53,7 @@ export default (
if (needClearFilters) {
delete currFilters[dataField];
+ this.clearFilters = { [dataField]: { clear: true, filterVal } };
} else {
// select default comparator is EQ, others are LIKE
const {
@@ -93,7 +96,7 @@ export default (
doFilter(props, ignoreEmitDataChange = false) {
const { dataChangeListener, data, columns } = props;
- const result = filters(data, columns, _)(this.currFilters);
+ const result = filters(data, columns, _)(this.currFilters, this.clearFilters);
this.data = result;
if (dataChangeListener && !ignoreEmitDataChange) {
this.isEmitDataChange = true;
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 8769e4fd6..7aad77bc3 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -229,14 +229,13 @@ export const filterFactory = _ => (filterType) => {
return filterFn;
};
-export const filters = (data, columns, _) => (currFilters) => {
+export const filters = (data, columns, _) => (currFilters, clearFilters = {}) => {
const factory = filterFactory(_);
+ const filterState = { ...clearFilters, ...currFilters };
let result = data;
let filterFn;
- Object.keys(currFilters).forEach((dataField) => {
+ Object.keys(filterState).forEach((dataField) => {
let currentResult;
- const filterObj = currFilters[dataField];
- filterFn = factory(filterObj.filterType);
let filterValue;
let customFilter;
for (let i = 0; i < columns.length; i += 1) {
@@ -248,13 +247,23 @@ export const filters = (data, columns, _) => (currFilters) => {
break;
}
}
- if (customFilter) {
- currentResult = customFilter(filterObj.filterVal, result);
- }
- if (typeof currentResult === 'undefined') {
- result = filterFn(result, dataField, filterObj, filterValue);
+
+ if (clearFilters[dataField] && customFilter) {
+ currentResult = customFilter(clearFilters[dataField].filterVal, result);
+ if (typeof currentResult !== 'undefined') {
+ result = currentResult;
+ }
} else {
- result = currentResult;
+ const filterObj = filterState[dataField];
+ filterFn = factory(filterObj.filterType);
+ if (customFilter) {
+ currentResult = customFilter(filterObj.filterVal, result);
+ }
+ if (typeof currentResult === 'undefined') {
+ result = filterFn(result, dataField, filterObj, filterValue);
+ } else {
+ result = currentResult;
+ }
}
});
return result;
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index 7b15a28d2..eccef3063 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -171,6 +171,7 @@ describe('FilterContext', () => {
filterVals.forEach((filterVal) => {
instance.onFilter(columns[1], FILTER_TYPE.TEXT)(filterVal);
expect(Object.keys(instance.currFilters)).toHaveLength(0);
+ expect(Object.keys(instance.clearFilters)).toHaveLength(1);
});
});
});
From 6d7a4c478314b55b0a90551c6a83296991a387a6 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Mar 2020 14:34:09 +0800
Subject: [PATCH 226/250] fix #1269
---
.../examples/column-filter/text-filter.js | 5 +++--
.../src/components/date.js | 18 +++++++++++------
.../src/components/multiselect.js | 10 +++++++---
.../src/components/number.js | 20 ++++++++++++-------
.../src/components/select.js | 10 +++++++---
.../src/components/text.js | 14 ++++++++-----
6 files changed, 51 insertions(+), 26 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
index c3789be40..58dc30828 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js
@@ -14,7 +14,9 @@ const columns = [{
dataField: 'name',
text: 'Product Name',
footer: 'hello',
- filter: textFilter()
+ filter: textFilter({
+ id: 'identify'
+ })
}, {
dataField: 'price',
text: 'Product Price',
@@ -54,7 +56,6 @@ export default () => (
data={ products }
columns={ columns }
filter={ filterFactory() }
- filterPosition="bottom"
selectRow={ selectRow }
/>
{ sourceCode }
diff --git a/packages/react-bootstrap-table2-filter/src/components/date.js b/packages/react-bootstrap-table2-filter/src/components/date.js
index 3d8ff4536..54bb761ea 100644
--- a/packages/react-bootstrap-table2-filter/src/components/date.js
+++ b/packages/react-bootstrap-table2-filter/src/components/date.js
@@ -128,8 +128,9 @@ class DateFilter extends Component {
render() {
const {
+ id,
placeholder,
- column: { text },
+ column: { dataField, text },
style,
comparatorStyle,
dateStyle,
@@ -138,6 +139,9 @@ class DateFilter extends Component {
dateClassName
} = this.props;
+ const comparatorElmId = `date-filter-comparator-${dataField}${id ? `-${id}` : ''}`;
+ const inputElmId = `date-filter-column-${dataField}${id ? `-${id}` : ''}`;
+
return (
e.stopPropagation() }
@@ -146,12 +150,12 @@ class DateFilter extends Component {
>
Filter comparator
this.dateFilterComparator = n }
- id={ `date-filter-comparator-${text}` }
+ id={ comparatorElmId }
style={ comparatorStyle }
className={ `date-filter-comparator form-control ${comparatorClassName}` }
onChange={ this.onChangeComparator }
@@ -160,11 +164,11 @@ class DateFilter extends Component {
{ this.getComparatorOptions() }
-
+
Enter ${ text }
Filter by {column.text}
this.selectInput = n }
- id={ `multiselect-filter-column-${column.text}` }
+ id={ elmId }
style={ style }
multiple
className={ selectClass }
@@ -157,6 +159,7 @@ MultiSelectFilter.propTypes = {
onFilter: PropTypes.func.isRequired,
column: PropTypes.object.isRequired,
options: PropTypes.object.isRequired,
+ id: PropTypes.string,
filterState: PropTypes.object,
comparator: PropTypes.oneOf([LIKE, EQ]),
placeholder: PropTypes.string,
@@ -174,7 +177,8 @@ MultiSelectFilter.defaultProps = {
className: '',
withoutEmptyOption: false,
comparator: EQ,
- caseSensitive: true
+ caseSensitive: true,
+ id: null
};
export default MultiSelectFilter;
diff --git a/packages/react-bootstrap-table2-filter/src/components/number.js b/packages/react-bootstrap-table2-filter/src/components/number.js
index 7abea580e..3d04a0ed7 100644
--- a/packages/react-bootstrap-table2-filter/src/components/number.js
+++ b/packages/react-bootstrap-table2-filter/src/components/number.js
@@ -170,6 +170,7 @@ class NumberFilter extends Component {
render() {
const { isSelected } = this.state;
const {
+ id,
column,
options,
style,
@@ -188,6 +189,9 @@ class NumberFilter extends Component {
${!isSelected ? 'placeholder-selected' : ''}
`;
+ const comparatorElmId = `number-filter-comparator-${column.dataField}${id ? `-${id}` : ''}`;
+ const inputElmId = `number-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
+
return (
e.stopPropagation() }
@@ -196,13 +200,13 @@ class NumberFilter extends Component {
>
Filter comparator
this.numberFilterComparator = n }
style={ comparatorStyle }
- id={ `number-filter-comparator-${column.text}` }
+ id={ comparatorElmId }
className={ `number-filter-comparator form-control ${comparatorClassName}` }
onChange={ this.onChangeComparator }
defaultValue={ this.getDefaultComparator() }
@@ -214,12 +218,12 @@ class NumberFilter extends Component {
options ?
{`Select ${column.text}`}
this.numberFilter = n }
- id={ `number-filter-column-${column.text}` }
+ id={ inputElmId }
style={ numberStyle }
className={ selectClass }
onChange={ this.onChangeNumberSet }
@@ -228,11 +232,11 @@ class NumberFilter extends Component {
{ this.getNumberOptions() }
:
-
+
{`Enter ${column.text}`}
Filter by { column.text }
this.selectInput = n }
- id={ `select-filter-column-${column.text}` }
+ id={ elmId }
style={ style }
className={ selectClass }
onChange={ this.filter }
@@ -187,6 +189,7 @@ class SelectFilter extends Component {
SelectFilter.propTypes = {
onFilter: PropTypes.func.isRequired,
column: PropTypes.object.isRequired,
+ id: PropTypes.string,
filterState: PropTypes.object,
options: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
comparator: PropTypes.oneOf([LIKE, EQ]),
@@ -205,7 +208,8 @@ SelectFilter.defaultProps = {
className: '',
withoutEmptyOption: false,
comparator: EQ,
- caseSensitive: true
+ caseSensitive: true,
+ id: null
};
export default SelectFilter;
diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js
index b02e6d542..256aca37a 100644
--- a/packages/react-bootstrap-table2-filter/src/components/text.js
+++ b/packages/react-bootstrap-table2-filter/src/components/text.js
@@ -88,8 +88,9 @@ class TextFilter extends Component {
render() {
const {
+ id,
placeholder,
- column: { text },
+ column: { dataField, text },
style,
className,
onFilter,
@@ -100,18 +101,19 @@ class TextFilter extends Component {
...rest
} = this.props;
- // stopPropagation for onClick event is try to prevent sort was triggered.
+ const elmId = `text-filter-column-${dataField}${id ? `-${id}` : ''}`;
+
return (
Filter by {text}
Date: Sat, 7 Mar 2020 15:02:05 +0800
Subject: [PATCH 227/250] update README
---
packages/react-bootstrap-table2-filter/README.md | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index 78720441a..7d83e1fb7 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -64,7 +64,8 @@ const priceFilter = textFilter({
comparator: Comparator.EQ, // default is Comparator.LIKE
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
style: { ... }, // your custom styles on input
- delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
+ delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
+ id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});
// omit...
@@ -110,6 +111,7 @@ const qualityFilter = selectFilter({
comparator: Comparator.LIKE, // default is Comparator.EQ
style: { ... }, // your custom styles on input
withoutEmptyOption: true // hide the default select option
+ id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});
// omit...
@@ -197,6 +199,7 @@ const qualityFilter = multiSelectFilter({
comparator: Comparator.LIKE, // default is Comparator.EQ
style: { ... }, // your custom styles on input
withoutEmptyOption: true // hide the default select option
+ id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
});
// omit...
@@ -236,6 +239,7 @@ const numberFilter = numberFilter({
numberStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on number input/select
numberClassName: 'custom-number-class', // custom the class on ber input/select
defaultValue: { number: 2103, comparator: Comparator.GT } // default value
+ id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
})
// omit...
@@ -275,6 +279,7 @@ const dateFilter = dateFilter({
dateStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on date input
dateClassName: 'custom-date-class', // custom the class on date input
defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT } // default value
+ id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
})
// omit...
From 094c907c438472e4e617b8d8e455e0aa8793be0f Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Mar 2020 15:17:38 +0800
Subject: [PATCH 228/250] fix #1261
---
.../src/pagination.js | 2 ++
.../src/size-per-page-dropdown-adapter.js | 2 ++
.../src/size-per-page-dropdown.js | 12 +++++++++---
.../src/state-context.js | 3 ++-
.../react-bootstrap-table2/src/contexts/index.js | 1 +
5 files changed, 16 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination.js b/packages/react-bootstrap-table2-paginator/src/pagination.js
index d96764225..fe3c1cb34 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination.js
@@ -13,6 +13,7 @@ import Const from './const';
class Pagination extends pageResolver(Component) {
render() {
const {
+ tableId,
currPage,
pageStartIndex,
showTotal,
@@ -43,6 +44,7 @@ class Pagination extends pageResolver(Component) {
render() {
const {
+ tableId,
sizePerPageList,
currSizePerPage,
hideSizePerPage,
@@ -56,6 +57,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
onClick={ this.toggleDropDown }
onBlur={ this.closeDropDown }
open={ open }
+ tableId={ tableId }
/>
);
}
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
index e7588b304..df3f278c6 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
@@ -9,6 +9,7 @@ const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
const SizePerPageDropDown = (props) => {
const {
open,
+ tableId,
hidden,
onClick,
onBlur,
@@ -30,6 +31,8 @@ const SizePerPageDropDown = (props) => {
className,
);
+ const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
+
return (
{
@@ -39,7 +42,8 @@ const SizePerPageDropDown = (props) => {
className={ dropdownClasses }
>
{
{
options.map((option) => {
@@ -93,6 +97,7 @@ SizePerPageDropDown.propTypes = {
onClick: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired,
onSizePerPageChange: PropTypes.func.isRequired,
+ tableId: PropTypes.string,
open: PropTypes.bool,
hidden: PropTypes.bool,
btnContextual: PropTypes.string,
@@ -106,7 +111,8 @@ SizePerPageDropDown.defaultProps = {
btnContextual: 'btn-default btn-secondary',
variation: 'dropdown',
className: '',
- optionRenderer: null
+ optionRenderer: null,
+ tableId: null
};
diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js
index b1079ef6e..096eb737a 100644
--- a/packages/react-bootstrap-table2-paginator/src/state-context.js
+++ b/packages/react-bootstrap-table2-paginator/src/state-context.js
@@ -47,7 +47,7 @@ class StateProvider extends React.Component {
}
getPaginationProps = () => {
- const { pagination: { options }, bootstrap4 } = this.props;
+ const { pagination: { options }, bootstrap4, tableId } = this.props;
const { currPage, currSizePerPage, dataSize } = this;
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
@@ -62,6 +62,7 @@ class StateProvider extends React.Component {
return {
...options,
bootstrap4,
+ tableId,
page: currPage,
sizePerPage: currSizePerPage,
pageStartIndex,
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 19449e73b..9ebaaa43c 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -226,6 +226,7 @@ const withContext = Base =>
isRemotePagination={ this.isRemotePagination }
remoteEmitter={ this.remoteEmitter }
onDataSizeChange={ this.props.onDataSizeChange }
+ tableId={ this.props.id }
>
{
From 02cdbb5338e438c4b748143a3a9494a34aa5b04d Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 7 Mar 2020 15:42:05 +0800
Subject: [PATCH 229/250] Publish
- react-bootstrap-table2-example@1.0.38
- react-bootstrap-table2-filter@1.3.1
- react-bootstrap-table2-paginator@2.1.1
- react-bootstrap-table-next@4.0.0
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index cda09b470..1687b9b8f 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.37",
+ "version": "1.0.38",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 59de9c12d..2c340a884 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.3.0",
+ "version": "1.3.1",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 8b05145c6..81322d209 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.1.0",
+ "version": "2.1.1",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index fa5d6e74f..104e49158 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "3.3.5",
+ "version": "4.0.0",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From a3f8cfc01827bbcac858a3c2e5061717b0c864c8 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 14 Mar 2020 17:20:20 +0800
Subject: [PATCH 230/250] fix #1278
---
.../examples/pagination/custom-pagination.js | 2 ++
.../react-bootstrap-table2-paginator/README.md | 4 +++-
.../src/page-resolver.js | 8 ++++++--
.../src/pagination-list-adapter.js | 14 ++++++++++++--
.../src/pagination.js | 2 ++
5 files changed, 25 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
index f45690497..078f75934 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/custom-pagination.js
@@ -47,6 +47,7 @@ const options = {
lastPageTitle: 'Last page',
showTotal: true,
paginationTotalRenderer: customTotal,
+ disablePageTitle: true,
sizePerPageList: [{
text: '5', value: 5
}, {
@@ -82,6 +83,7 @@ const options = {
lastPageTitle: 'Last page',
showTotal: true,
paginationTotalRenderer: customTotal,
+ disablePageTitle: true,
sizePerPageList: [{
text: '5', value: 5
}, {
diff --git a/packages/react-bootstrap-table2-paginator/README.md b/packages/react-bootstrap-table2-paginator/README.md
index e5dc52b16..8936ef62f 100644
--- a/packages/react-bootstrap-table2-paginator/README.md
+++ b/packages/react-bootstrap-table2-paginator/README.md
@@ -56,6 +56,7 @@ import paginationFactory from 'react-bootstrap-table2-paginator';
* [hideSizePerPage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidesizeperpage-bool)
* [hidePageListOnlyOnePage](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationhidepagelistonlyonepage-bool)
* [showTotal](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationshowtotal-bool)
+* [disablePageTitle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html#paginationdisablepagetitle-bool)
You can check [this online demo](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Pagination&selectedStory=Custom%20Pagination&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel) for above props usage.
@@ -233,7 +234,8 @@ nextPageTitle,
firstPageTitle,
lastPageTitle,
onPageChange,
-onSizePerPageChange
+onSizePerPageChange,
+disablePageTitle
```
In most of case, `page`, `sizePerPage`, `onPageChange` and `onSizePerPageChange` are most important things for developer.
diff --git a/packages/react-bootstrap-table2-paginator/src/page-resolver.js b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
index 9afbc53eb..cb02c880e 100644
--- a/packages/react-bootstrap-table2-paginator/src/page-resolver.js
+++ b/packages/react-bootstrap-table2-paginator/src/page-resolver.js
@@ -107,7 +107,7 @@ export default ExtendBase =>
return pages;
}
- calculatePageStatus(pages = [], lastPage) {
+ calculatePageStatus(pages = [], lastPage, disablePageTitle = false) {
const {
currPage,
pageStartIndex,
@@ -146,7 +146,11 @@ export default ExtendBase =>
title = `${page}`;
}
- return { page, active, disabled, title };
+ const pageResult = { page, active, disabled };
+ if (!disablePageTitle) {
+ pageResult.title = title;
+ }
+ return pageResult;
});
}
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
index 33c5115b5..c121277bf 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
@@ -7,8 +7,18 @@ import PaginationList from './pagination-list';
const paginationListAdapter = WrappedComponent =>
class PaginationListAdapter extends pageResolver(Component) {
render() {
- const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
- const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
+ const {
+ lastPage,
+ totalPages,
+ pageButtonRenderer,
+ onPageChange,
+ disablePageTitle
+ } = this.props;
+ const pages = this.calculatePageStatus(
+ this.calculatePages(totalPages, lastPage),
+ lastPage,
+ disablePageTitle
+ );
return (
Date: Sat, 14 Mar 2020 17:39:13 +0800
Subject: [PATCH 231/250] fix #1279
---
.../src/pagination-list-adapter.js | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
index c121277bf..fb9c642b4 100644
--- a/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
+++ b/packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js
@@ -12,13 +12,17 @@ const paginationListAdapter = WrappedComponent =>
totalPages,
pageButtonRenderer,
onPageChange,
- disablePageTitle
+ disablePageTitle,
+ hidePageListOnlyOnePage
} = this.props;
const pages = this.calculatePageStatus(
this.calculatePages(totalPages, lastPage),
lastPage,
disablePageTitle
);
+ if (totalPages === 1 && hidePageListOnlyOnePage) {
+ return null;
+ }
return (
Date: Sun, 15 Mar 2020 15:24:33 +0800
Subject: [PATCH 232/250] fix #1280
---
.../pagination/standalone-size-per-page.js | 3 +-
.../src/bootstrap.js | 6 -
.../src/data-context.js | 18 ++-
.../src/pagination.js | 6 +-
.../src/size-per-page-dropdown-adapter.js | 2 +
.../src/size-per-page-dropdown.js | 106 +++++++++---------
6 files changed, 67 insertions(+), 74 deletions(-)
delete mode 100644 packages/react-bootstrap-table2-paginator/src/bootstrap.js
diff --git a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
index 40526a212..477c0a204 100644
--- a/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
+++ b/packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js
@@ -74,6 +74,7 @@ export default class StandaloneSizePerPage extends React.Component {
return (
{
@@ -84,7 +85,7 @@ export default class StandaloneSizePerPage extends React.Component {
{
if (!this.props.pagination.options.custom) {
const {
- bootstrap4,
page: currPage,
sizePerPage: currSizePerPage,
dataSize,
...rest
} = this.getPaginationProps();
return (
-
-
+
render() {
const {
tableId,
+ bootstrap4,
sizePerPageList,
currSizePerPage,
hideSizePerPage,
@@ -58,6 +59,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
onBlur={ this.closeDropDown }
open={ open }
tableId={ tableId }
+ bootstrap4={ bootstrap4 }
/>
);
}
diff --git a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
index df3f278c6..779f2415c 100644
--- a/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
+++ b/packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js
@@ -1,7 +1,6 @@
import React from 'react';
import cs from 'classnames';
import PropTypes from 'prop-types';
-import { BootstrapContext } from './bootstrap';
import SizePerPageOption from './size-per-page-option';
const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
@@ -16,6 +15,7 @@ const SizePerPageDropDown = (props) => {
options,
className,
variation,
+ bootstrap4,
btnContextual,
optionRenderer,
currSizePerPage,
@@ -34,60 +34,54 @@ const SizePerPageDropDown = (props) => {
const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
return (
-
- {
- ({ bootstrap4 }) => (
-
-
- { currSizePerPage }
- { ' ' }
- {
- bootstrap4 ? null : (
-
-
- )
- }
-
-
- {
- options.map((option) => {
- if (optionRenderer) {
- return optionRenderer({
- ...option,
- onSizePerPageChange
- });
- }
- return (
-
-
- )
- }
-
+
+
+ { currSizePerPage }
+ { ' ' }
+ {
+ bootstrap4 ? null : (
+
+
+ )
+ }
+
+
+ {
+ options.map((option) => {
+ if (optionRenderer) {
+ return optionRenderer({
+ ...option,
+ onSizePerPageChange
+ });
+ }
+ return (
+
+
);
};
@@ -97,6 +91,7 @@ SizePerPageDropDown.propTypes = {
onClick: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired,
onSizePerPageChange: PropTypes.func.isRequired,
+ bootstrap4: PropTypes.bool,
tableId: PropTypes.string,
open: PropTypes.bool,
hidden: PropTypes.bool,
@@ -112,6 +107,7 @@ SizePerPageDropDown.defaultProps = {
variation: 'dropdown',
className: '',
optionRenderer: null,
+ bootstrap4: false,
tableId: null
};
From 8db68e679862c0a2d5264d55cff27f9dc33cd804 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 15 Mar 2020 16:13:15 +0800
Subject: [PATCH 233/250] fix test
---
.../test/size-per-page-dropdown.test.js | 46 +++++++------------
1 file changed, 16 insertions(+), 30 deletions(-)
diff --git a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js
index 8e1b964b4..d78fe61da 100644
--- a/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js
+++ b/packages/react-bootstrap-table2-paginator/test/size-per-page-dropdown.test.js
@@ -5,12 +5,6 @@ import { shallow } from 'enzyme';
import SizePerPageOption from '../src/size-per-page-option';
import SizePerPageDropDown from '../src/size-per-page-dropdown';
-const shallowWithContext = (elem, context = {}) => {
- const wrapper = shallow(elem);
- const Children = wrapper.props().children(context);
- return shallow(Children);
-};
-
describe('SizePerPageDropDown', () => {
let wrapper;
const currSizePerPage = '25';
@@ -34,9 +28,8 @@ describe('SizePerPageDropDown', () => {
describe('default SizePerPageDropDown component', () => {
beforeEach(() => {
- wrapper = shallowWithContext(
-
Date: Sun, 15 Mar 2020 16:30:34 +0800
Subject: [PATCH 234/250] Publish
- react-bootstrap-table2-example@1.0.39
- react-bootstrap-table2-paginator@2.1.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-paginator/package.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 1687b9b8f..133c294bd 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.38",
+ "version": "1.0.39",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-paginator/package.json b/packages/react-bootstrap-table2-paginator/package.json
index 81322d209..308aed561 100644
--- a/packages/react-bootstrap-table2-paginator/package.json
+++ b/packages/react-bootstrap-table2-paginator/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-paginator",
- "version": "2.1.1",
+ "version": "2.1.2",
"description": "it's the pagination addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
From 51fbb1e8c2fc7f27b8bc723e892ccdd33b1dd6fe Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 12 Apr 2020 14:39:11 +0800
Subject: [PATCH 235/250] fix #1324
---
.../examples/column-filter/filter-hooks.js | 14 +++++++++--
.../react-bootstrap-table2-filter/README.md | 25 +++++++++++++++++++
.../src/context.js | 5 +++-
.../src/contexts/index.js | 1 +
4 files changed, 42 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
index db3b2bf9e..18dc82df2 100644
--- a/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/filter-hooks.js
@@ -41,16 +41,26 @@ const columns = [{
})
}];
-
{ sourceCode }
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index 7d83e1fb7..697aa9f99 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -361,3 +361,28 @@ Default filter is rendered inside the table column header, but you can choose to
filterPosition="bottom"
/>
```
+
+## Configuration
+
+`filterFactory` is a factory function for initializing some internal config. Below is available options for `filterFactory`:
+
+### afterFilter
+This hook function will be called with two arguments(new filter result and filter object) when filtering completed.
+
+```js
+function afterFilter(newResult, newFilters) {
+ console.log(newResult);
+ console.log(newFilters);
+}
+
+export default () => (
+
+
+);
+```
\ No newline at end of file
diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js
index 64f2d195f..c48779282 100644
--- a/packages/react-bootstrap-table2-filter/src/context.js
+++ b/packages/react-bootstrap-table2-filter/src/context.js
@@ -95,8 +95,11 @@ export default (
}
doFilter(props, ignoreEmitDataChange = false) {
- const { dataChangeListener, data, columns } = props;
+ const { dataChangeListener, data, columns, filter } = props;
const result = filters(data, columns, _)(this.currFilters, this.clearFilters);
+ if (filter.afterFilter) {
+ filter.afterFilter(result, this.currFilters);
+ }
this.data = result;
if (dataChangeListener && !ignoreEmitDataChange) {
this.isEmitDataChange = true;
diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js
index 9ebaaa43c..68c74e086 100644
--- a/packages/react-bootstrap-table2/src/contexts/index.js
+++ b/packages/react-bootstrap-table2/src/contexts/index.js
@@ -302,6 +302,7 @@ const withContext = Base =>
{ ...baseProps }
ref={ n => this.filterContext = n }
data={ rootProps.getData() }
+ filter={ this.props.filter.options || {} }
dataChangeListener={ this.props.dataChangeListener }
>
From 54df96c60fe14b4926a032db5dae3ea1702d8325 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 12 Apr 2020 14:40:40 +0800
Subject: [PATCH 236/250] fix #1312
---
docs/columns.md | 1 +
packages/react-bootstrap-table2/src/cell-event-delegater.js | 3 ++-
packages/react-bootstrap-table2/src/row/event-delegater.js | 3 ++-
3 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/docs/columns.md b/docs/columns.md
index 5636c26ac..1749b8916 100644
--- a/docs/columns.md
+++ b/docs/columns.md
@@ -437,6 +437,7 @@ You can assign any [HTML Event](https://www.w3schools.com/tags/ref_eventattribut
* onMouseEnter
* onMouseLeave
* onContextMenu
+* onAuxClick
```js
{
diff --git a/packages/react-bootstrap-table2/src/cell-event-delegater.js b/packages/react-bootstrap-table2/src/cell-event-delegater.js
index 689f2c117..62c77c382 100644
--- a/packages/react-bootstrap-table2/src/cell-event-delegater.js
+++ b/packages/react-bootstrap-table2/src/cell-event-delegater.js
@@ -5,7 +5,8 @@ const events = [
'onDoubleClick',
'onMouseEnter',
'onMouseLeave',
- 'onContextMenu'
+ 'onContextMenu',
+ 'onAuxClick'
];
export default ExtendBase =>
diff --git a/packages/react-bootstrap-table2/src/row/event-delegater.js b/packages/react-bootstrap-table2/src/row/event-delegater.js
index a6a1a1f93..d98a0dafd 100644
--- a/packages/react-bootstrap-table2/src/row/event-delegater.js
+++ b/packages/react-bootstrap-table2/src/row/event-delegater.js
@@ -6,7 +6,8 @@ const events = [
'onDoubleClick',
'onMouseEnter',
'onMouseLeave',
- 'onContextMenu'
+ 'onContextMenu',
+ 'onAuxClick'
];
export default ExtendBase =>
From 52062dd00f7503720468085ee034bb6775d57a8c Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 18 Apr 2020 13:24:41 +0800
Subject: [PATCH 237/250] Publish
- react-bootstrap-table2-example@1.0.40
- react-bootstrap-table2-filter@1.3.2
- react-bootstrap-table-next@4.0.1
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 133c294bd..128977cd6 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.39",
+ "version": "1.0.40",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index 2c340a884..fc1875c5e 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.3.1",
+ "version": "1.3.2",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 104e49158..5851d1cce 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "4.0.0",
+ "version": "4.0.1",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8647c6c684adf1b2192dc8980b9ebb5a5f1ce74d Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sat, 18 Apr 2020 13:37:44 +0800
Subject: [PATCH 238/250] fix test cases
---
packages/react-bootstrap-table2-filter/test/context.test.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/react-bootstrap-table2-filter/test/context.test.js b/packages/react-bootstrap-table2-filter/test/context.test.js
index eccef3063..248ed88d1 100644
--- a/packages/react-bootstrap-table2-filter/test/context.test.js
+++ b/packages/react-bootstrap-table2-filter/test/context.test.js
@@ -55,11 +55,13 @@ describe('FilterContext', () => {
jest.fn().mockReturnValue(enableRemote),
handleFilterChange
);
+ const filterOptions = {};
return (
From 42a972b6dcd40a56a60ceef96f4f3d076f280959 Mon Sep 17 00:00:00 2001
From: CYBAI
Date: Wed, 6 May 2020 16:31:33 +0900
Subject: [PATCH 239/250] Refactor `filterByNumber` to return the result of
comparator directly
Doing the same operation of comparator might be more straightforward and
we don't need to declare a `valid` variable.
---
.../src/filter.js | 35 +++++--------------
1 file changed, 8 insertions(+), 27 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 7aad77bc3..4df32805b 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -39,55 +39,36 @@ export const filterByNumber = _ => (
) => (
data.filter((row) => {
if (number === '' || !comparator) return true;
- let valid = true;
let cell = _.get(row, dataField);
+
if (customFilterValue) {
cell = customFilterValue(cell, row);
}
switch (comparator) {
case EQ: {
- if (cell != number) {
- valid = false;
- }
- break;
+ return cell == number;
}
case GT: {
- if (cell <= number) {
- valid = false;
- }
- break;
+ return cell > number;
}
case GE: {
- if (cell < number) {
- valid = false;
- }
- break;
+ return cell >= number;
}
case LT: {
- if (cell >= number) {
- valid = false;
- }
- break;
+ return cell < number;
}
case LE: {
- if (cell > number) {
- valid = false;
- }
- break;
+ return cell <= number;
}
case NE: {
- if (cell == number) {
- valid = false;
- }
- break;
+ return cell != number;
}
default: {
console.error('Number comparator provided is not supported');
- break;
+ return true;
}
}
- return valid;
})
);
From b8ac424e4e3d37565995ef635663baca63e8ab22 Mon Sep 17 00:00:00 2001
From: CYBAI
Date: Wed, 6 May 2020 16:34:00 +0900
Subject: [PATCH 240/250] Return the filter function directly in filterFactory
---
.../src/filter.js | 20 +++++++------------
1 file changed, 7 insertions(+), 13 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/src/filter.js b/packages/react-bootstrap-table2-filter/src/filter.js
index 4df32805b..924e00982 100644
--- a/packages/react-bootstrap-table2-filter/src/filter.js
+++ b/packages/react-bootstrap-table2-filter/src/filter.js
@@ -189,25 +189,19 @@ export const filterByArray = _ => (
};
export const filterFactory = _ => (filterType) => {
- let filterFn;
switch (filterType) {
- case FILTER_TYPE.TEXT:
- case FILTER_TYPE.SELECT:
- filterFn = filterByText(_);
- break;
case FILTER_TYPE.MULTISELECT:
- filterFn = filterByArray(_);
- break;
+ return filterByArray(_);
case FILTER_TYPE.NUMBER:
- filterFn = filterByNumber(_);
- break;
+ return filterByNumber(_);
case FILTER_TYPE.DATE:
- filterFn = filterByDate(_);
- break;
+ return filterByDate(_);
+ case FILTER_TYPE.TEXT:
+ case FILTER_TYPE.SELECT:
default:
- filterFn = filterByText(_);
+ // Use `text` filter as default filter
+ return filterByText(_);
}
- return filterFn;
};
export const filters = (data, columns, _) => (currFilters, clearFilters = {}) => {
From 380358da3dcd7608a3d574a9b2945d0231b43ade Mon Sep 17 00:00:00 2001
From: cybai
Date: Sun, 17 May 2020 13:48:41 +0900
Subject: [PATCH 241/250] Fix storybook live demo url (#1366)
---
packages/react-bootstrap-table2-filter/README.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index 697aa9f99..70f45914f 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -2,7 +2,7 @@
`react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there's a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:
-**[Live Demo For Column Filter](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/gh-pages-src/storybook/index.html?selectedKind=Column%20Filter)**
+**[Live Demo For Column Filter](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter)**
**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html)**
@@ -385,4 +385,4 @@ export default () => (
/>
);
-```
\ No newline at end of file
+```
From 2aef4eb7005880594645211aad0fd5320abb65f6 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 May 2020 13:10:33 +0800
Subject: [PATCH 242/250] fix #1377
---
.../src/contexts/row-expand-context.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
index fb1aed05a..7b7172a5e 100644
--- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
+++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js
@@ -23,13 +23,16 @@ class RowExpandProvider extends React.Component {
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.expandRow) {
- const nextExpanded = nextProps.expandRow.expanded || this.state.expanded;
+ let nextExpanded = [...(nextProps.expandRow.expanded || this.state.expanded)];
+ const { nonExpandable = [] } = nextProps.expandRow;
+ nextExpanded = nextExpanded.filter(rowId => !_.contains(nonExpandable, rowId));
const isClosing = this.state.expanded.reduce((acc, cur) => {
if (!_.contains(nextExpanded, cur)) {
acc.push(cur);
}
return acc;
}, []);
+
this.setState(() => ({
expanded: nextExpanded,
isClosing
From ba9ea8e3a39050ff61dbe95baa6014f0f23228ca Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 17 May 2020 14:06:19 +0800
Subject: [PATCH 243/250] fix #1365
---
.../examples/search/search-hook.js | 91 +++++++++++++++++++
.../stories/index.js | 2 +
.../react-bootstrap-table2-toolkit/README.md | 16 ++++
.../src/search/context.js | 8 +-
4 files changed, 115 insertions(+), 2 deletions(-)
create mode 100644 packages/react-bootstrap-table2-example/examples/search/search-hook.js
diff --git a/packages/react-bootstrap-table2-example/examples/search/search-hook.js b/packages/react-bootstrap-table2-example/examples/search/search-hook.js
new file mode 100644
index 000000000..3abbe3bca
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/search/search-hook.js
@@ -0,0 +1,91 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const afterSearch = (newResult) => {
+ console.log(newResult);
+};
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+`;
+
+const afterSearch = (newResult) => {
+ console.log(newResult);
+};
+
+export default () => (
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
{ sourceCode }
+
console.log(newResult)
+ } }
+>
+ // ...
+
+```
+
### Clear Search Button
We have a built-in clear search function which allow user clear search status via clicking button:
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index ec94da7a3..9f34c92ab 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
export default (options = {
searchFormatted: false,
+ afterSearch: null,
onColumnMatch: null
}) => (
_,
@@ -32,7 +33,7 @@ export default (options = {
handleRemoteSearchChange(this.props.searchText);
} else {
initialData = this.search(props);
- this.triggerListener(initialData);
+ this.triggerListener(initialData, true);
}
this.state = { data: initialData };
}
@@ -41,7 +42,10 @@ export default (options = {
return this.state.data;
}
- triggerListener(result) {
+ triggerListener(result, skipInit) {
+ if (options.afterSearch && !skipInit) {
+ options.afterSearch(result);
+ }
if (this.props.dataChangeListener) {
this.props.dataChangeListener.emit('filterChanged', result.length);
}
From e7de262425d4bdbe3cbdaaf7eed1c18aebfc5d8d Mon Sep 17 00:00:00 2001
From: Michael Potter
Date: Sun, 17 May 2020 00:12:30 -0700
Subject: [PATCH 244/250] Update keyField/data props Documentation (#1362)
I added more info to the descriptions of the keyField and data props of
the Table component. I also added an example of what these properties
might look like for a sample dataset.
I had trouble figuring these out, and had to find a medium post about
this library to understand how the input data should be formatted, and I
had to read the source code to understand what the keyField was for. I
think having better descriptions of these props will be helpful to
users.
---
docs/README.md | 27 ++++++++++++++++++++++++++-
1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/docs/README.md b/docs/README.md
index d622a8848..9bc4ff181 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -39,11 +39,36 @@
* [onDataSizeChange](#onDataSizeChange)
### keyField(**required**) - [String]
-Tells `react-bootstrap-table2` which column is unique.
+Tells `react-bootstrap-table2` which column of the data is unique. This should be the name of a property that is unique for each item in your dataset
### data(**required**) - [Array]
Provides data for your table. It accepts a single Array object.
+Each item in this array is an object that represents a row in the table. Each "Row" object should have a key-value pair for each column in the table, whose key matches that column's dataField value.
+
+For example, if your column definitions look like:
+
+```js
+columns = [
+ { dataField: 'id', text: 'Id' },
+ { dataField: 'name', text: 'Name' },
+ { dataField: 'animal', text: 'Animal' },
+]
+```
+
+Then your data might look like:
+
+```js
+data = [
+ { id: 1, name: 'George', animal: 'Monkey' }
+ { id: 2, name: 'Jeffrey', animal: 'Giraffe' }
+ { id: 3, name: 'Alice', animal: 'Giraffe' }
+ { id: 4, name: 'Alice', animal: 'Tiger' }
+]
+```
+
+And your "keyField" would be `id`
+
### columns(**required**) - [Object]
Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
From 24d0d0e7c739ffc82ddc1d9169187ce4e24ef5ac Mon Sep 17 00:00:00 2001
From: Bill Parrott
Date: Sun, 17 May 2020 02:14:00 -0500
Subject: [PATCH 245/250] [aria-label-prop] change aria-label to
aria-labelledby to eliminate redundancy and make it configurable (#1359)
---
packages/react-bootstrap-table2-toolkit/README.md | 3 +++
.../src/search/SearchBar.js | 15 ++++++++++-----
2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index f7c53ec01..948f34eb6 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -80,6 +80,9 @@ Custom the style on input element.
#### delay = [number]
milionsecond for debounce user input.
+#### srText = [string]
+Customize the screen reader text for the search input. (Default: "Search this table")
+
### Search Options
#### defaultSearch - [string]
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
index 9bef75f32..fac666a8e 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js
@@ -56,7 +56,8 @@ class SearchBar extends React.Component {
className,
style,
placeholder,
- tableId
+ tableId,
+ srText
} = this.props;
return (
@@ -64,13 +65,15 @@ class SearchBar extends React.Component {
htmlFor={ `search-bar-${tableId}` }
className="search-label"
>
- Search this table
+
+ { srText }
+
Date: Sun, 17 May 2020 02:15:38 -0500
Subject: [PATCH 246/250] apply changes to develop branch instead of master
(#1358)
---
.../react-bootstrap-table2/src/row-selection/selection-cell.js | 3 ++-
.../test/row-selection/selection-cell.test.js | 3 ++-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
index f53753cff..ff20f1eca 100644
--- a/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
+++ b/packages/react-bootstrap-table2/src/row-selection/selection-cell.js
@@ -92,7 +92,8 @@ export default class SelectionCell extends Component {
mode: inputType,
checked: selected,
disabled,
- rowIndex
+ rowIndex,
+ rowKey
}) : (
Date: Sun, 17 May 2020 15:36:50 +0800
Subject: [PATCH 247/250] Publish
- react-bootstrap-table2-example@1.0.41
- react-bootstrap-table2-filter@1.3.3
- react-bootstrap-table2-toolkit@2.1.3
- react-bootstrap-table-next@4.0.2
---
packages/react-bootstrap-table2-example/package.json | 2 +-
packages/react-bootstrap-table2-filter/package.json | 2 +-
packages/react-bootstrap-table2-toolkit/package.json | 2 +-
packages/react-bootstrap-table2/package.json | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/react-bootstrap-table2-example/package.json b/packages/react-bootstrap-table2-example/package.json
index 128977cd6..0c4b58ca0 100644
--- a/packages/react-bootstrap-table2-example/package.json
+++ b/packages/react-bootstrap-table2-example/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-example",
- "version": "1.0.40",
+ "version": "1.0.41",
"description": "",
"main": "index.js",
"private": true,
diff --git a/packages/react-bootstrap-table2-filter/package.json b/packages/react-bootstrap-table2-filter/package.json
index fc1875c5e..4db71b8b2 100644
--- a/packages/react-bootstrap-table2-filter/package.json
+++ b/packages/react-bootstrap-table2-filter/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-filter",
- "version": "1.3.2",
+ "version": "1.3.3",
"description": "it's a column filter addon for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2-toolkit/package.json b/packages/react-bootstrap-table2-toolkit/package.json
index c9625d1e2..08d69af7f 100644
--- a/packages/react-bootstrap-table2-toolkit/package.json
+++ b/packages/react-bootstrap-table2-toolkit/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table2-toolkit",
- "version": "2.1.2",
+ "version": "2.1.3",
"description": "The toolkit for react-bootstrap-table2",
"main": "./lib/index.js",
"repository": {
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 5851d1cce..75373a7b2 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "4.0.1",
+ "version": "4.0.2",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {
From 8b6992bea5fbbb856d95cde5b7861f40a915083e Mon Sep 17 00:00:00 2001
From: CYBAI
Date: Sat, 23 May 2020 23:31:18 +0900
Subject: [PATCH 248/250] Get value from key first; if not existing, try
recursive get
Due to splitting object field by dot (.), when an user provides a data
which key has a dot, it will cause an issue for an `undefined` data
which looks like not rendered.
So, to solve this, we should try to get the object value from the key
first. If it's not defined or null, then we will try to do the original
recursive way to get value.
---
packages/react-bootstrap-table2/src/utils.js | 5 +++++
packages/react-bootstrap-table2/test/utils.test.js | 4 +++-
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/utils.js b/packages/react-bootstrap-table2/src/utils.js
index ac8dd5ad3..df7a3d7a5 100644
--- a/packages/react-bootstrap-table2/src/utils.js
+++ b/packages/react-bootstrap-table2/src/utils.js
@@ -12,6 +12,11 @@ function splitNested(str) {
}
function get(target, field) {
+ const directGet = target[field];
+ if (directGet !== undefined && directGet !== null) {
+ return directGet;
+ }
+
const pathArray = splitNested(field);
let result;
try {
diff --git a/packages/react-bootstrap-table2/test/utils.test.js b/packages/react-bootstrap-table2/test/utils.test.js
index 89d9ff18f..dcf8e2efd 100644
--- a/packages/react-bootstrap-table2/test/utils.test.js
+++ b/packages/react-bootstrap-table2/test/utils.test.js
@@ -10,7 +10,8 @@ describe('Utils', () => {
city: {
name: 'B'
}
- }
+ },
+ 'person.name': 'John Doe'
};
it('should return correct data', () => {
@@ -19,6 +20,7 @@ describe('Utils', () => {
expect(_.get(data, 'address.city.name')).toEqual(data.address.city.name);
expect(_.get(data, 'address.notExist')).toEqual(undefined);
expect(_.get(data, 'address.not.exist')).toEqual(undefined);
+ expect(_.get(data, 'person.name')).toEqual(data['person.name']);
});
});
From 695c2f9e9f703daf9622c0bd8ac7f457c34f3140 Mon Sep 17 00:00:00 2001
From: Allen
Date: Sun, 31 May 2020 15:10:17 +0800
Subject: [PATCH 249/250] fix #1384 (#1386)
---
packages/react-bootstrap-table2/src/utils.js | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/src/utils.js b/packages/react-bootstrap-table2/src/utils.js
index df7a3d7a5..23d3cc21a 100644
--- a/packages/react-bootstrap-table2/src/utils.js
+++ b/packages/react-bootstrap-table2/src/utils.js
@@ -11,6 +11,14 @@ function splitNested(str) {
.split('.');
}
+function contains(list, value) {
+ if (_.includes) {
+ return _.includes(list, value);
+ }
+
+ return list.indexOf(value) > -1;
+}
+
function get(target, field) {
const directGet = target[field];
if (directGet !== undefined && directGet !== null) {
@@ -88,4 +96,12 @@ function debounce(func, wait, immediate) {
};
}
-export default Object.assign(_, { get, set, isDefined, isEmptyObject, sleep, debounce });
+export default Object.assign(_, {
+ get,
+ set,
+ isDefined,
+ isEmptyObject,
+ sleep,
+ debounce,
+ contains
+});
From ef22dc47ebeb985b28980001f806eeb01a687973 Mon Sep 17 00:00:00 2001
From: AllenFang
Date: Sun, 31 May 2020 15:17:04 +0800
Subject: [PATCH 250/250] Publish
- react-bootstrap-table-next@4.0.3
---
packages/react-bootstrap-table2/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-bootstrap-table2/package.json b/packages/react-bootstrap-table2/package.json
index 75373a7b2..c803f26e3 100644
--- a/packages/react-bootstrap-table2/package.json
+++ b/packages/react-bootstrap-table2/package.json
@@ -1,6 +1,6 @@
{
"name": "react-bootstrap-table-next",
- "version": "4.0.2",
+ "version": "4.0.3",
"description": "Next generation of react-bootstrap-table",
"main": "./lib/index.js",
"repository": {