Skip to content

Commit 53ad263

Browse files
coding-iceiceweb1999
coding-ice
and
iceweb1999
authored
feat: add prop direction (#569)
* feat: add prop direction * refactor(props): direction -> align * refactor: remove flex class --------- Co-authored-by: 1999iceweb <[email protected]>
1 parent 55fd68e commit 53ad263

File tree

8 files changed

+177
-0
lines changed

8 files changed

+177
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ ReactDOM.render(<Pagination />, container);
5555
| Parameter | Description | Type | Default |
5656
| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
5757
| disabled | disable pagination | Bool | - |
58+
| align | align of pagination | start \| center \| end | undefined |
5859
| defaultCurrent | uncontrolled current page | Number | 1 |
5960
| current | current page | Number | undefined |
6061
| total | items total count | Number | 0 |

‎assets/index.less

+13
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@pagination-item-input-bg: #fff;
1414

1515
.@{pagination-prefix-cls} {
16+
display: flex;
1617
margin: 0;
1718
padding: 0;
1819
font-size: 14px;
@@ -24,6 +25,18 @@
2425
list-style: none;
2526
}
2627

28+
&-start {
29+
justify-content: start;
30+
}
31+
32+
&-center {
33+
justify-content: center;
34+
}
35+
36+
&-end {
37+
justify-content: end;
38+
}
39+
2740
&::after {
2841
display: block;
2942
clear: both;

‎docs/demo/align.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: align
3+
nav:
4+
title: align
5+
path: /align
6+
---
7+
8+
<code src="../examples/align.tsx"></code>

‎docs/examples/align.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import '../../assets/index.less';
2+
import React from 'react';
3+
import Pagination from 'rc-pagination';
4+
5+
const App = () => (
6+
<>
7+
<Pagination align="start" />
8+
<Pagination align="center" />
9+
<Pagination align="end" />
10+
</>
11+
);
12+
13+
export default App;

‎src/Pagination.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
5151

5252
// config
5353
hideOnSinglePage,
54+
align,
5455
showPrevNextJumpers = true,
5556
showQuickJumper,
5657
showLessItems,
@@ -556,6 +557,9 @@ const Pagination: React.FC<PaginationProps> = (props) => {
556557
}
557558

558559
const cls = classNames(prefixCls, className, {
560+
[`${prefixCls}-start`]: align === 'start',
561+
[`${prefixCls}-center`]: align === 'center',
562+
[`${prefixCls}-end`]: align === 'end',
559563
[`${prefixCls}-simple`]: simple,
560564
[`${prefixCls}-disabled`]: disabled,
561565
});

‎src/interface.ts

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface PaginationData {
3131
defaultPageSize: number;
3232

3333
hideOnSinglePage: boolean;
34+
align: 'start' | 'center' | 'end';
3435
showSizeChanger: boolean;
3536
showLessItems: boolean;
3637
showPrevNextJumpers: boolean;

‎tests/__snapshots__/demo.test.tsx.snap

+122
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,127 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Example align 1`] = `
4+
<div>
5+
<ul
6+
class="rc-pagination rc-pagination-start"
7+
>
8+
<li
9+
aria-disabled="true"
10+
class="rc-pagination-prev rc-pagination-disabled"
11+
title="上一页"
12+
>
13+
<button
14+
aria-label="prev page"
15+
class="rc-pagination-item-link"
16+
disabled=""
17+
type="button"
18+
/>
19+
</li>
20+
<li
21+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
22+
tabindex="0"
23+
title="1"
24+
>
25+
<a
26+
rel="nofollow"
27+
>
28+
1
29+
</a>
30+
</li>
31+
<li
32+
aria-disabled="true"
33+
class="rc-pagination-next rc-pagination-disabled"
34+
title="下一页"
35+
>
36+
<button
37+
aria-label="next page"
38+
class="rc-pagination-item-link"
39+
disabled=""
40+
type="button"
41+
/>
42+
</li>
43+
</ul>
44+
<ul
45+
class="rc-pagination rc-pagination-center"
46+
>
47+
<li
48+
aria-disabled="true"
49+
class="rc-pagination-prev rc-pagination-disabled"
50+
title="上一页"
51+
>
52+
<button
53+
aria-label="prev page"
54+
class="rc-pagination-item-link"
55+
disabled=""
56+
type="button"
57+
/>
58+
</li>
59+
<li
60+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
61+
tabindex="0"
62+
title="1"
63+
>
64+
<a
65+
rel="nofollow"
66+
>
67+
1
68+
</a>
69+
</li>
70+
<li
71+
aria-disabled="true"
72+
class="rc-pagination-next rc-pagination-disabled"
73+
title="下一页"
74+
>
75+
<button
76+
aria-label="next page"
77+
class="rc-pagination-item-link"
78+
disabled=""
79+
type="button"
80+
/>
81+
</li>
82+
</ul>
83+
<ul
84+
class="rc-pagination rc-pagination-end"
85+
>
86+
<li
87+
aria-disabled="true"
88+
class="rc-pagination-prev rc-pagination-disabled"
89+
title="上一页"
90+
>
91+
<button
92+
aria-label="prev page"
93+
class="rc-pagination-item-link"
94+
disabled=""
95+
type="button"
96+
/>
97+
</li>
98+
<li
99+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
100+
tabindex="0"
101+
title="1"
102+
>
103+
<a
104+
rel="nofollow"
105+
>
106+
1
107+
</a>
108+
</li>
109+
<li
110+
aria-disabled="true"
111+
class="rc-pagination-next rc-pagination-disabled"
112+
title="下一页"
113+
>
114+
<button
115+
aria-label="next page"
116+
class="rc-pagination-item-link"
117+
disabled=""
118+
type="button"
119+
/>
120+
</li>
121+
</ul>
122+
</div>
123+
`;
124+
3125
exports[`Example basic 1`] = `
4126
<div>
5127
<ul

‎tests/index.test.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,21 @@ describe('Other props', () => {
321321
});
322322
});
323323

324+
describe('should support align props', () => {
325+
it('should support align to start', () => {
326+
const { container } = render(<Pagination align="start" />);
327+
expect(container.querySelector('.rc-pagination-start')).toBeTruthy();
328+
});
329+
it('should support align to center', () => {
330+
const { container } = render(<Pagination align="center" />);
331+
expect(container.querySelector('.rc-pagination-center')).toBeTruthy();
332+
});
333+
it('should support align to end', () => {
334+
const { container } = render(<Pagination align="end" />);
335+
expect(container.querySelector('.rc-pagination-end')).toBeTruthy();
336+
});
337+
});
338+
324339
it('disabled', () => {
325340
const { container, getByRole } = render(
326341
<Pagination

0 commit comments

Comments
 (0)