Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b55aba6

Browse files
fix #1280 
1 parent ac73e9b commit b55aba6

File tree

6 files changed

+67
-74
lines changed

6 files changed

+67
-74
lines changed

‎packages/react-bootstrap-table2-example/examples/pagination/standalone-size-per-page.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export default class StandaloneSizePerPage extends React.Component {
7474
return (
7575
<div>
7676
<PaginationProvider
77+
bootstrap4
7778
pagination={ paginationFactory(options) }
7879
>
7980
{
@@ -84,7 +85,7 @@ export default class StandaloneSizePerPage extends React.Component {
8485
<div>
8586
<SizePerPageDropdownStandalone
8687
{ ...paginationProps }
87-
btnContextual="btn btn-primary"
88+
btnContextual="btn btn-warning"
8889
/>
8990
<BootstrapTable
9091
keyField="id"

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

Lines changed: 0 additions & 6 deletions
This file was deleted.

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import React from 'react';
55
import PropTypes from 'prop-types';
66

77
import Const from './const';
8-
import { BootstrapContext } from './bootstrap';
98
import Pagination from './pagination';
109
import { getByCurrPage, alignPage } from './page';
1110
import createBaseContext from './state-context';
@@ -57,22 +56,19 @@ class PaginationDataProvider extends Provider {
5756
renderDefaultPagination = () => {
5857
if (!this.props.pagination.options.custom) {
5958
const {
60-
bootstrap4,
6159
page: currPage,
6260
sizePerPage: currSizePerPage,
6361
dataSize,
6462
...rest
6563
} = this.getPaginationProps();
6664
return (
67-
<BootstrapContext.Provider value={ { bootstrap4 } }>
68-
<Pagination
69-
{ ...rest }
70-
key="pagination"
71-
dataSize={ dataSize || this.props.data.length }
72-
currPage={ currPage }
73-
currSizePerPage={ currSizePerPage }
74-
/>
75-
</BootstrapContext.Provider>
65+
<Pagination
66+
{ ...rest }
67+
key="pagination"
68+
dataSize={ dataSize || this.props.data.length }
69+
currPage={ currPage }
70+
currSizePerPage={ currSizePerPage }
71+
/>
7672
);
7773
}
7874
return null;

‎packages/react-bootstrap-table2-paginator/src/pagination.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class Pagination extends pageResolver(Component) {
3131
sizePerPageRenderer,
3232
sizePerPageOptionRenderer,
3333
onSizePerPageChange,
34+
bootstrap4,
3435
...rest
3536
} = this.props;
3637

@@ -44,6 +45,7 @@ class Pagination extends pageResolver(Component) {
4445
<div className="row react-bootstrap-table-pagination">
4546
<div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
4647
<SizePerPageDropdownWithAdapter
48+
bootstrap4={ bootstrap4 }
4749
tableId={ tableId }
4850
sizePerPageList={ sizePerPageList }
4951
currSizePerPage={ currSizePerPage }
@@ -114,11 +116,13 @@ Pagination.propTypes = {
114116
withFirstAndLast: PropTypes.bool,
115117
alwaysShowAllBtns: PropTypes.bool,
116118
hideSizePerPage: PropTypes.bool,
117-
hidePageListOnlyOnePage: PropTypes.bool
119+
hidePageListOnlyOnePage: PropTypes.bool,
120+
bootstrap4: PropTypes.bool
118121
};
119122

120123
Pagination.defaultProps = {
121124
disablePageTitle: false,
125+
bootstrap4: false,
122126
pageStartIndex: Const.PAGE_START_INDEX,
123127
paginationSize: Const.PAGINATION_SIZE,
124128
withFirstAndLast: Const.With_FIRST_AND_LAST,

‎packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
3131
render() {
3232
const {
3333
tableId,
34+
bootstrap4,
3435
sizePerPageList,
3536
currSizePerPage,
3637
hideSizePerPage,
@@ -58,6 +59,7 @@ const sizePerPageDropdownAdapter = WrappedComponent =>
5859
onBlur={ this.closeDropDown }
5960
open={ open }
6061
tableId={ tableId }
62+
bootstrap4={ bootstrap4 }
6163
/>
6264
);
6365
}

‎packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown.js

Lines changed: 51 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import cs from 'classnames';
33
import PropTypes from 'prop-types';
4-
import { BootstrapContext } from './bootstrap';
54
import SizePerPageOption from './size-per-page-option';
65

76
const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
@@ -16,6 +15,7 @@ const SizePerPageDropDown = (props) => {
1615
options,
1716
className,
1817
variation,
18+
bootstrap4,
1919
btnContextual,
2020
optionRenderer,
2121
currSizePerPage,
@@ -34,60 +34,54 @@ const SizePerPageDropDown = (props) => {
3434
const id = tableId ? `${tableId}-pageDropDown` : 'pageDropDown';
3535

3636
return (
37-
<BootstrapContext.Consumer>
38-
{
39-
({ bootstrap4 }) => (
40-
<span
41-
style={ dropDownStyle }
42-
className={ dropdownClasses }
43-
>
44-
<button
45-
id={ id }
46-
type="button"
47-
className={ `btn ${btnContextual} dropdown-toggle` }
48-
data-toggle="dropdown"
49-
aria-expanded={ open }
50-
onClick={ onClick }
51-
onBlur={ onBlur }
52-
>
53-
{ currSizePerPage }
54-
{ ' ' }
55-
{
56-
bootstrap4 ? null : (
57-
<span>
58-
<span className="caret" />
59-
</span>
60-
)
61-
}
62-
</button>
63-
<ul
64-
className={ `dropdown-menu ${openClass}` }
65-
role="menu"
66-
aria-labelledby={ id }
67-
>
68-
{
69-
options.map((option) => {
70-
if (optionRenderer) {
71-
return optionRenderer({
72-
...option,
73-
onSizePerPageChange
74-
});
75-
}
76-
return (
77-
<SizePerPageOption
78-
{ ...option }
79-
key={ option.text }
80-
bootstrap4={ bootstrap4 }
81-
onSizePerPageChange={ onSizePerPageChange }
82-
/>
83-
);
84-
})
85-
}
86-
</ul>
87-
</span>
88-
)
89-
}
90-
</BootstrapContext.Consumer>
37+
<span
38+
style={ dropDownStyle }
39+
className={ dropdownClasses }
40+
>
41+
<button
42+
id={ id }
43+
type="button"
44+
className={ `btn ${btnContextual} dropdown-toggle` }
45+
data-toggle="dropdown"
46+
aria-expanded={ open }
47+
onClick={ onClick }
48+
onBlur={ onBlur }
49+
>
50+
{ currSizePerPage }
51+
{ ' ' }
52+
{
53+
bootstrap4 ? null : (
54+
<span>
55+
<span className="caret" />
56+
</span>
57+
)
58+
}
59+
</button>
60+
<ul
61+
className={ `dropdown-menu ${openClass}` }
62+
role="menu"
63+
aria-labelledby={ id }
64+
>
65+
{
66+
options.map((option) => {
67+
if (optionRenderer) {
68+
return optionRenderer({
69+
...option,
70+
onSizePerPageChange
71+
});
72+
}
73+
return (
74+
<SizePerPageOption
75+
{ ...option }
76+
key={ option.text }
77+
bootstrap4={ bootstrap4 }
78+
onSizePerPageChange={ onSizePerPageChange }
79+
/>
80+
);
81+
})
82+
}
83+
</ul>
84+
</span>
9185
);
9286
};
9387

@@ -97,6 +91,7 @@ SizePerPageDropDown.propTypes = {
9791
onClick: PropTypes.func.isRequired,
9892
onBlur: PropTypes.func.isRequired,
9993
onSizePerPageChange: PropTypes.func.isRequired,
94+
bootstrap4: PropTypes.bool,
10095
tableId: PropTypes.string,
10196
open: PropTypes.bool,
10297
hidden: PropTypes.bool,
@@ -112,6 +107,7 @@ SizePerPageDropDown.defaultProps = {
112107
variation: 'dropdown',
113108
className: '',
114109
optionRenderer: null,
110+
bootstrap4: false,
115111
tableId: null
116112
};
117113

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /