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 f7cdac6

Browse files
fix pagination broken when bootstrap4
1 parent ec498b4 commit f7cdac6

File tree

7 files changed

+230
-90
lines changed

7 files changed

+230
-90
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
3+
// consider to have a common lib?1
4+
export const BootstrapContext = React.createContext({
5+
bootstrap4: false
6+
});

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

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

77
import Const from './const';
8+
import { BootstrapContext } from './bootstrap';
89
import Pagination from './pagination';
910
import { getByCurrPage, alignPage } from './page';
1011

@@ -123,7 +124,7 @@ export default (
123124

124125
render() {
125126
let { data } = this.props;
126-
const { pagination: { options } } = this.props;
127+
const { pagination: { options }, bootstrap4 } = this.props;
127128
const { currPage, currSizePerPage } = this;
128129
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
129130
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
@@ -148,31 +149,33 @@ export default (
148149
return (
149150
<PaginationContext.Provider value={ { data } }>
150151
{ this.props.children }
151-
<Pagination
152-
key="pagination"
153-
dataSize={ options.totalSize || this.props.data.length }
154-
currPage={ currPage }
155-
currSizePerPage={ currSizePerPage }
156-
onPageChange={ this.handleChangePage }
157-
onSizePerPageChange={ this.handleChangeSizePerPage }
158-
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
159-
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
160-
pageStartIndex={ pageStartIndex }
161-
withFirstAndLast={ withFirstAndLast }
162-
alwaysShowAllBtns={ alwaysShowAllBtns }
163-
hideSizePerPage={ hideSizePerPage }
164-
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
165-
showTotal={ options.showTotal }
166-
paginationTotalRenderer={ options.paginationTotalRenderer }
167-
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
168-
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
169-
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
170-
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
171-
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
172-
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
173-
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
174-
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
175-
/>
152+
<BootstrapContext.Provider value={ { bootstrap4 } }>
153+
<Pagination
154+
key="pagination"
155+
dataSize={ options.totalSize || this.props.data.length }
156+
currPage={ currPage }
157+
currSizePerPage={ currSizePerPage }
158+
onPageChange={ this.handleChangePage }
159+
onSizePerPageChange={ this.handleChangeSizePerPage }
160+
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
161+
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
162+
pageStartIndex={ pageStartIndex }
163+
withFirstAndLast={ withFirstAndLast }
164+
alwaysShowAllBtns={ alwaysShowAllBtns }
165+
hideSizePerPage={ hideSizePerPage }
166+
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
167+
showTotal={ options.showTotal }
168+
paginationTotalRenderer={ options.paginationTotalRenderer }
169+
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
170+
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
171+
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
172+
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
173+
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
174+
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
175+
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
176+
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
177+
/>
178+
</BootstrapContext.Provider>
176179
</PaginationContext.Provider>
177180
);
178181
}

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

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

67
const sizePerPageDefaultClass = 'react-bs-table-sizePerPage-dropdown';
@@ -20,44 +21,60 @@ const SizePerPageDropDown = (props) => {
2021
} = props;
2122

2223
const dropDownStyle = { visibility: hidden ? 'hidden' : 'visible' };
24+
const openClass = open ? 'open show' : '';
2325
const dropdownClasses = cs(
24-
open ? 'open show' : '',
26+
openClass,
2527
sizePerPageDefaultClass,
2628
variation,
2729
className,
2830
);
2931

3032
return (
31-
<span
32-
style={ dropDownStyle }
33-
className={ dropdownClasses }
34-
>
35-
<button
36-
id="pageDropDown"
37-
className={ `btn ${btnContextual} dropdown-toggle` }
38-
data-toggle="dropdown"
39-
aria-expanded={ open }
40-
onClick={ onClick }
41-
onBlur={ onBlur }
42-
>
43-
{ currSizePerPage }
44-
<span>
45-
{ ' ' }
46-
<span className="caret" />
47-
</span>
48-
</button>
49-
<ul className="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
50-
{
51-
options.map(option => (
52-
<SizePerPageOption
53-
{ ...option }
54-
key={ option.text }
55-
onSizePerPageChange={ onSizePerPageChange }
56-
/>
57-
))
58-
}
59-
</ul>
60-
</span>
33+
<BootstrapContext.Consumer>
34+
{
35+
({ bootstrap4 }) => (
36+
<span
37+
style={ dropDownStyle }
38+
className={ dropdownClasses }
39+
>
40+
<button
41+
id="pageDropDown"
42+
className={ `btn ${btnContextual} dropdown-toggle` }
43+
data-toggle="dropdown"
44+
aria-expanded={ open }
45+
onClick={ onClick }
46+
onBlur={ onBlur }
47+
>
48+
{ currSizePerPage }
49+
{ ' ' }
50+
{
51+
bootstrap4 ? null : (
52+
<span>
53+
<span className="caret" />
54+
</span>
55+
)
56+
}
57+
</button>
58+
<ul
59+
className={ `dropdown-menu ${openClass}` }
60+
role="menu"
61+
aria-labelledby="pageDropDown"
62+
>
63+
{
64+
options.map(option => (
65+
<SizePerPageOption
66+
{ ...option }
67+
key={ option.text }
68+
bootstrap4={ bootstrap4 }
69+
onSizePerPageChange={ onSizePerPageChange }
70+
/>
71+
))
72+
}
73+
</ul>
74+
</span>
75+
)
76+
}
77+
</BootstrapContext.Consumer>
6178
);
6279
};
6380

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

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,28 @@ import PropTypes from 'prop-types';
55
const SizePerPageOption = ({
66
text,
77
page,
8-
onSizePerPageChange
9-
}) => (
10-
<li key={ text } role="presentation" className="dropdown-item">
8+
onSizePerPageChange,
9+
bootstrap4
10+
}) => (bootstrap4 ? (
11+
<a
12+
href="#"
13+
tabIndex="-1"
14+
role="menuitem"
15+
className="dropdown-item"
16+
data-page={ page }
17+
onMouseDown={ (e) => {
18+
e.preventDefault();
19+
onSizePerPageChange(page);
20+
} }
21+
>
22+
{ text }
23+
</a>
24+
) : (
25+
<li
26+
key={ text }
27+
role="presentation"
28+
className="dropdown-item"
29+
>
1130
<a
1231
href="#"
1332
tabIndex="-1"
@@ -21,12 +40,17 @@ const SizePerPageOption = ({
2140
{ text }
2241
</a>
2342
</li>
24-
);
43+
));
2544

2645
SizePerPageOption.propTypes = {
2746
text: PropTypes.string.isRequired,
2847
page: PropTypes.number.isRequired,
29-
onSizePerPageChange: PropTypes.func.isRequired
48+
onSizePerPageChange: PropTypes.func.isRequired,
49+
bootstrap4: PropTypes.bool
50+
};
51+
52+
SizePerPageOption.defaultProps = {
53+
bootstrap4: false
3054
};
3155

3256
export default SizePerPageOption;

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

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import { shallow } from 'enzyme';
55
import SizePerPageOption from '../src/size-per-page-option';
66
import SizePerPageDropDown from '../src/size-per-page-dropdown';
77

8+
const shallowWithContext = (elem, context = {}) => {
9+
const wrapper = shallow(elem);
10+
const Children = wrapper.props().children(context);
11+
return shallow(Children);
12+
};
13+
814
describe('SizePerPageDropDown', () => {
915
let wrapper;
1016
const currSizePerPage = '25';
@@ -28,8 +34,9 @@ describe('SizePerPageDropDown', () => {
2834

2935
describe('default SizePerPageDropDown component', () => {
3036
beforeEach(() => {
31-
wrapper = shallow(
32-
<SizePerPageDropDown { ...props } />
37+
wrapper = shallowWithContext(
38+
<SizePerPageDropDown { ...props } />,
39+
{ bootstrap4: false }
3340
);
3441
});
3542

@@ -47,6 +54,7 @@ describe('SizePerPageDropDown', () => {
4754
const option = options[i];
4855
expect(sizePerPage.prop('text')).toEqual(option.text);
4956
expect(sizePerPage.prop('page')).toEqual(option.page);
57+
expect(sizePerPage.prop('bootstrap4')).toBeFalsy();
5058
expect(sizePerPage.prop('onSizePerPageChange')).toEqual(onSizePerPageChange);
5159
});
5260
});
@@ -61,10 +69,52 @@ describe('SizePerPageDropDown', () => {
6169
});
6270
});
6371

72+
describe('when bootstrap4 context is true', () => {
73+
beforeEach(() => {
74+
wrapper = shallowWithContext(
75+
<SizePerPageDropDown { ...props } />,
76+
{ bootstrap4: true }
77+
);
78+
});
79+
80+
it('should rendering SizePerPageDropDown correctly', () => {
81+
expect(wrapper.length).toBe(1);
82+
expect(wrapper.find('button').length).toBe(1);
83+
expect(wrapper.find('button').text()).toEqual(`${currSizePerPage} `);
84+
});
85+
86+
it('should rendering SizePerPageOption successfully', () => {
87+
expect(wrapper.find('ul.dropdown-menu').length).toBe(1);
88+
const sizePerPageOptions = wrapper.find(SizePerPageOption);
89+
expect(sizePerPageOptions.length).toBe(options.length);
90+
sizePerPageOptions.forEach((sizePerPage, i) => {
91+
const option = options[i];
92+
expect(sizePerPage.prop('text')).toEqual(option.text);
93+
expect(sizePerPage.prop('page')).toEqual(option.page);
94+
expect(sizePerPage.prop('bootstrap4')).toBeTruthy();
95+
expect(sizePerPage.prop('onSizePerPageChange')).toEqual(onSizePerPageChange);
96+
});
97+
});
98+
99+
it('no need to render caret', () => {
100+
expect(wrapper.find('.caret')).toHaveLength(0);
101+
});
102+
103+
it('default variation is dropdown', () => {
104+
expect(wrapper.hasClass('dropdown')).toBeTruthy();
105+
});
106+
107+
it('default dropdown is not open', () => {
108+
expect(wrapper.hasClass('open show')).toBeFalsy();
109+
expect(wrapper.find('[aria-expanded=false]').length).toBe(1);
110+
});
111+
});
112+
64113
describe('when open prop is true', () => {
65114
beforeEach(() => {
66-
wrapper = shallow(
67-
<SizePerPageDropDown { ...props } open />
115+
wrapper = shallowWithContext(
116+
<SizePerPageDropDown { ...props } open />,
117+
{ bootstrap4: false }
68118
);
69119
});
70120

@@ -76,8 +126,9 @@ describe('SizePerPageDropDown', () => {
76126

77127
describe('when hidden prop is true', () => {
78128
beforeEach(() => {
79-
wrapper = shallow(
80-
<SizePerPageDropDown { ...props } hidden />
129+
wrapper = shallowWithContext(
130+
<SizePerPageDropDown { ...props } hidden />,
131+
{ bootstrap4: false }
81132
);
82133
});
83134

@@ -89,8 +140,9 @@ describe('SizePerPageDropDown', () => {
89140
describe('when btnContextual prop is defined', () => {
90141
const contextual = 'btn-warning';
91142
beforeEach(() => {
92-
wrapper = shallow(
93-
<SizePerPageDropDown { ...props } btnContextual={ contextual } />
143+
wrapper = shallowWithContext(
144+
<SizePerPageDropDown { ...props } btnContextual={ contextual } />,
145+
{ bootstrap4: false }
94146
);
95147
});
96148

@@ -102,8 +154,9 @@ describe('SizePerPageDropDown', () => {
102154
describe('when variation prop is defined', () => {
103155
const variation = 'dropup';
104156
beforeEach(() => {
105-
wrapper = shallow(
106-
<SizePerPageDropDown { ...props } variation={ variation } />
157+
wrapper = shallowWithContext(
158+
<SizePerPageDropDown { ...props } variation={ variation } />,
159+
{ bootstrap4: false }
107160
);
108161
});
109162

@@ -115,8 +168,9 @@ describe('SizePerPageDropDown', () => {
115168
describe('when className prop is defined', () => {
116169
const className = 'custom-class';
117170
beforeEach(() => {
118-
wrapper = shallow(
119-
<SizePerPageDropDown { ...props } className={ className } />
171+
wrapper = shallowWithContext(
172+
<SizePerPageDropDown { ...props } className={ className } />,
173+
{ bootstrap4: false }
120174
);
121175
});
122176

0 commit comments

Comments
(0)

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