Skip to content

Commit 3094ee1

Browse files
afc163afc163
authored
prev and next button should be a button (#282)
close #280
1 parent 3a0ee0d commit 3094ee1

File tree

4 files changed

+65
-45
lines changed

4 files changed

+65
-45
lines changed

‎src/Options.jsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,19 @@ class Options extends React.Component {
1717
return !goInputText || isNaN(goInputText) ? current : Number(goInputText);
1818
}
1919

20-
buildOptionText = value => `${value} ${this.props.locale.items_per_page}`;
20+
buildOptionText = (value) => `${value} ${this.props.locale.items_per_page}`;
2121

22-
changeSize = value => {
22+
changeSize = (value) => {
2323
this.props.changeSize(Number(value));
2424
};
2525

26-
handleChange = e => {
26+
handleChange = (e) => {
2727
this.setState({
2828
goInputText: e.target.value,
2929
});
3030
};
3131

32-
handleBlur = e => {
32+
handleBlur = (e) => {
3333
const { goButton, quickGo, rootPrefixCls } = this.props;
3434
if (goButton) {
3535
return;
@@ -44,7 +44,7 @@ class Options extends React.Component {
4444
quickGo(this.getValidValue());
4545
};
4646

47-
go = e => {
47+
go = (e) => {
4848
const { goInputText } = this.state;
4949
if (goInputText === '') {
5050
return;
@@ -58,11 +58,12 @@ class Options extends React.Component {
5858
};
5959

6060
getPageSizeOptions() {
61-
const {
62-
pageSize,
63-
pageSizeOptions,
64-
} = this.props;
65-
if (pageSizeOptions.some(option => option.toString() === pageSize.toString())) {
61+
const { pageSize, pageSizeOptions } = this.props;
62+
if (
63+
pageSizeOptions.some(
64+
(option) => option.toString() === pageSize.toString(),
65+
)
66+
) {
6667
return pageSizeOptions;
6768
}
6869
return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => {
@@ -117,7 +118,7 @@ class Options extends React.Component {
117118
dropdownMatchSelectWidth={false}
118119
value={(pageSize || pageSizeOptions[0]).toString()}
119120
onChange={this.changeSize}
120-
getPopupContainer={triggerNode => triggerNode.parentNode}
121+
getPopupContainer={(triggerNode) => triggerNode.parentNode}
121122
>
122123
{options}
123124
</Select>
@@ -133,6 +134,7 @@ class Options extends React.Component {
133134
onClick={this.go}
134135
onKeyUp={this.go}
135136
disabled={disabled}
137+
className={`${prefixCls}-quick-jumper-button`}
136138
>
137139
{locale.jump_to_confirm}
138140
</button>

‎src/Pagination.jsx‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,10 +133,15 @@ class Pagination extends React.Component {
133133
* @param {React.ReactNode | React.ComponentType<PaginationProps>} icon received icon.
134134
* @returns {React.ReactNode}
135135
*/
136-
getItemIcon = (icon) => {
136+
getItemIcon = (icon, label) => {
137137
const { prefixCls } = this.props;
138-
// eslint-disable-next-line jsx-a11y/anchor-has-content
139-
let iconNode = icon || <a className={`${prefixCls}-item-link`} />;
138+
let iconNode = icon || (
139+
<button
140+
type="button"
141+
label={label}
142+
className={`${prefixCls}-item-link`}
143+
/>
144+
);
140145
if (typeof icon === 'function') {
141146
iconNode = React.createElement(icon, { ...this.props });
142147
}
@@ -321,7 +326,11 @@ class Pagination extends React.Component {
321326

322327
renderPrev(prevPage) {
323328
const { prevIcon, itemRender } = this.props;
324-
const prevButton = itemRender(prevPage, 'prev', this.getItemIcon(prevIcon));
329+
const prevButton = itemRender(
330+
prevPage,
331+
'prev',
332+
this.getItemIcon(prevIcon, 'prev page'),
333+
);
325334
const disabled = !this.hasPrev();
326335
return isValidElement(prevButton)
327336
? cloneElement(prevButton, { disabled })
@@ -330,7 +339,11 @@ class Pagination extends React.Component {
330339

331340
renderNext(nextPage) {
332341
const { nextIcon, itemRender } = this.props;
333-
const nextButton = itemRender(nextPage, 'next', this.getItemIcon(nextIcon));
342+
const nextButton = itemRender(
343+
nextPage,
344+
'next',
345+
this.getItemIcon(nextIcon, 'next page'),
346+
);
334347
const disabled = !this.hasNext();
335348
return isValidElement(nextButton)
336349
? cloneElement(nextButton, { disabled })

‎tests/index.test.js‎

Lines changed: 9 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ describe('Uncontrolled Pagination', () => {
9090
it('should quick jump to expect page', () => {
9191
const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper');
9292
const input = quickJumper.find('input');
93-
const goButton = quickJumper.find('button');
93+
const goButton = quickJumper.find(
94+
'.rc-pagination-options-quick-jumper-button',
95+
);
9496
input.simulate('change', { target: { value: '2' } });
9597
goButton.simulate('click');
9698
expect(wrapper.state().current).toBe(2);
@@ -213,7 +215,7 @@ describe('Other props', () => {
213215
});
214216

215217
describe('hideOnSinglePage props', () => {
216-
const itemRender = current => <a href={`#${current}`}>{current}</a>;
218+
const itemRender = (current) => <a href={`#${current}`}>{current}</a>;
217219

218220
it('should hide pager if hideOnSinglePage equals true', () => {
219221
const wrapper = mount(
@@ -261,15 +263,10 @@ describe('Other props', () => {
261263
expect(wrapper.find('.rc-pagination-disabled').exists()).toBe(true);
262264
expect(wrapper.find('input').exists()).toBe(true);
263265
expect(wrapper.find(Select).props().disabled).toBe(true);
266+
expect(wrapper.find('input').at(0).getDOMNode().disabled).toBe(true);
264267
expect(
265268
wrapper
266-
.find('input')
267-
.at(0)
268-
.getDOMNode().disabled,
269-
).toBe(true);
270-
expect(
271-
wrapper
272-
.find('button')
269+
.find('.rc-pagination-options-quick-jumper-button')
273270
.at(0)
274271
.getDOMNode().disabled,
275272
).toBe(true);
@@ -339,17 +336,11 @@ describe('current value on onShowSizeChange when total is 0', () => {
339336

340337
it('size changer show logic', () => {
341338
const wrapper1 = mount(
342-
<Pagination
343-
selectComponentClass={Select}
344-
total={50}
345-
/>,
339+
<Pagination selectComponentClass={Select} total={50} />,
346340
);
347341
expect(wrapper1.exists('.rc-pagination-options-size-changer')).toBe(false);
348342
const wrapper2 = mount(
349-
<Pagination
350-
selectComponentClass={Select}
351-
total={51}
352-
/>,
343+
<Pagination selectComponentClass={Select} total={51} />,
353344
);
354345
expect(wrapper2.exists('.rc-pagination-options-size-changer')).toBe(true);
355346
const wrapper3 = mount(
@@ -361,11 +352,7 @@ describe('current value on onShowSizeChange when total is 0', () => {
361352
);
362353
expect(wrapper3.exists('.rc-pagination-options-size-changer')).toBe(false);
363354
const wrapper4 = mount(
364-
<Pagination
365-
selectComponentClass={Select}
366-
showSizeChanger
367-
total={50}
368-
/>,
355+
<Pagination selectComponentClass={Select} showSizeChanger total={50} />,
369356
);
370357
expect(wrapper4.exists('.rc-pagination-options-size-changer')).toBe(true);
371358
});

‎tests/jumper.test.js‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,13 @@ describe('simple quick jumper', () => {
5151
onChange={onChange}
5252
defaultCurrent={1}
5353
total={25}
54-
showQuickJumper={{ goButton: <button type="button">go</button> }}
54+
showQuickJumper={{
55+
goButton: (
56+
<button type="button" className="go-button">
57+
go
58+
</button>
59+
),
60+
}}
5561
showTotal={(total, range) =>
5662
`${range[0]} - ${range[1]} of ${total} items`
5763
}
@@ -67,7 +73,7 @@ describe('simple quick jumper', () => {
6773
it('should quick jump to expect page', () => {
6874
const quickJumper = wrapper.find('.rc-pagination-simple');
6975
const input = quickJumper.find('input');
70-
const goButton = quickJumper.find('button');
76+
const goButton = quickJumper.find('.go-button');
7177
input.simulate('change', { target: { value: '2' } });
7278
goButton.simulate('click');
7379
expect(wrapper.state().current).toBe(2);
@@ -81,7 +87,13 @@ describe('simple quick jumper', () => {
8187
onChange={onChange}
8288
defaultCurrent={1}
8389
total={25}
84-
showQuickJumper={{ goButton: <button type="button">go</button> }}
90+
showQuickJumper={{
91+
goButton: (
92+
<button type="button" className="go-button">
93+
go
94+
</button>
95+
),
96+
}}
8597
showTotal={(total, range) =>
8698
`${range[0]} - ${range[1]} of ${total} items`
8799
}
@@ -92,7 +104,7 @@ describe('simple quick jumper', () => {
92104
it('should quick jump to expect page', () => {
93105
const quickJumper = wrapper.find('.rc-pagination-options-quick-jumper');
94106
const input = quickJumper.find('input');
95-
const goButton = quickJumper.find('button');
107+
const goButton = quickJumper.find('.go-button');
96108
input.simulate('change', { target: { value: '2' } });
97109
goButton.simulate('click');
98110
expect(wrapper.state().current).toBe(2);
@@ -120,7 +132,9 @@ describe('simple quick jumper', () => {
120132
showQuickJumper={{ goButton: true }}
121133
/>,
122134
);
123-
expect(wrapper.find('button').exists()).toBe(true);
135+
expect(
136+
wrapper.find('.rc-pagination-options-quick-jumper-button').exists(),
137+
).toBe(true);
124138
});
125139

126140
it('goButton defaultly hidden', () => {
@@ -132,7 +146,9 @@ describe('simple quick jumper', () => {
132146
showQuickJumper
133147
/>,
134148
);
135-
expect(wrapper.find('button').exists()).toBe(false);
149+
expect(
150+
wrapper.find('.rc-pagination-options-quick-jumper-button').exists(),
151+
).toBe(false);
136152
});
137153

138154
it('goButton could be false', () => {
@@ -144,6 +160,8 @@ describe('simple quick jumper', () => {
144160
showQuickJumper={{ goButton: false }}
145161
/>,
146162
);
147-
expect(wrapper.find('button').exists()).toBe(false);
163+
expect(
164+
wrapper.find('.rc-pagination-options-quick-jumper-button').exists(),
165+
).toBe(false);
148166
});
149167
});

0 commit comments

Comments
 (0)