Skip to content

Commit 649cc31

Browse files
coding-icecoding-ice
committed
feat: add prop direction
1 parent b89cb0e commit 649cc31

File tree

8 files changed

+187
-0
lines changed

8 files changed

+187
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
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+
| direction | direction 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‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,22 @@
2424
list-style: none;
2525
}
2626

27+
&-flex {
28+
display: flex;
29+
}
30+
31+
&-start {
32+
justify-content: start;
33+
}
34+
35+
&-center {
36+
justify-content: center;
37+
}
38+
39+
&-end {
40+
justify-content: end;
41+
}
42+
2743
&::after {
2844
display: block;
2945
clear: both;

‎docs/demo/direction.md‎

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

‎docs/examples/direction.tsx‎

Lines changed: 13 additions & 0 deletions
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 direction="start" />
8+
<Pagination direction="center" />
9+
<Pagination direction="end" />
10+
</>
11+
);
12+
13+
export default App;

‎src/Pagination.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
5151

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

558559
const cls = classNames(prefixCls, className, {
560+
[`${prefixCls}-flex`]: !!direction,
561+
[`${prefixCls}-start`]: direction === 'start',
562+
[`${prefixCls}-center`]: direction === 'center',
563+
[`${prefixCls}-end`]: direction === 'end',
559564
[`${prefixCls}-simple`]: simple,
560565
[`${prefixCls}-disabled`]: disabled,
561566
});

‎src/interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export interface PaginationData {
3131
defaultPageSize: number;
3232

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

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

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -960,6 +960,128 @@ exports[`Example controlled 1`] = `
960960
</div>
961961
`;
962962

963+
exports[`Example direction 1`] = `
964+
<div>
965+
<ul
966+
class="rc-pagination rc-pagination-flex rc-pagination-start"
967+
>
968+
<li
969+
aria-disabled="true"
970+
class="rc-pagination-prev rc-pagination-disabled"
971+
title="上一页"
972+
>
973+
<button
974+
aria-label="prev page"
975+
class="rc-pagination-item-link"
976+
disabled=""
977+
type="button"
978+
/>
979+
</li>
980+
<li
981+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
982+
tabindex="0"
983+
title="1"
984+
>
985+
<a
986+
rel="nofollow"
987+
>
988+
1
989+
</a>
990+
</li>
991+
<li
992+
aria-disabled="true"
993+
class="rc-pagination-next rc-pagination-disabled"
994+
title="下一页"
995+
>
996+
<button
997+
aria-label="next page"
998+
class="rc-pagination-item-link"
999+
disabled=""
1000+
type="button"
1001+
/>
1002+
</li>
1003+
</ul>
1004+
<ul
1005+
class="rc-pagination rc-pagination-flex rc-pagination-center"
1006+
>
1007+
<li
1008+
aria-disabled="true"
1009+
class="rc-pagination-prev rc-pagination-disabled"
1010+
title="上一页"
1011+
>
1012+
<button
1013+
aria-label="prev page"
1014+
class="rc-pagination-item-link"
1015+
disabled=""
1016+
type="button"
1017+
/>
1018+
</li>
1019+
<li
1020+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
1021+
tabindex="0"
1022+
title="1"
1023+
>
1024+
<a
1025+
rel="nofollow"
1026+
>
1027+
1
1028+
</a>
1029+
</li>
1030+
<li
1031+
aria-disabled="true"
1032+
class="rc-pagination-next rc-pagination-disabled"
1033+
title="下一页"
1034+
>
1035+
<button
1036+
aria-label="next page"
1037+
class="rc-pagination-item-link"
1038+
disabled=""
1039+
type="button"
1040+
/>
1041+
</li>
1042+
</ul>
1043+
<ul
1044+
class="rc-pagination rc-pagination-flex rc-pagination-end"
1045+
>
1046+
<li
1047+
aria-disabled="true"
1048+
class="rc-pagination-prev rc-pagination-disabled"
1049+
title="上一页"
1050+
>
1051+
<button
1052+
aria-label="prev page"
1053+
class="rc-pagination-item-link"
1054+
disabled=""
1055+
type="button"
1056+
/>
1057+
</li>
1058+
<li
1059+
class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
1060+
tabindex="0"
1061+
title="1"
1062+
>
1063+
<a
1064+
rel="nofollow"
1065+
>
1066+
1
1067+
</a>
1068+
</li>
1069+
<li
1070+
aria-disabled="true"
1071+
class="rc-pagination-next rc-pagination-disabled"
1072+
title="下一页"
1073+
>
1074+
<button
1075+
aria-label="next page"
1076+
class="rc-pagination-item-link"
1077+
disabled=""
1078+
type="button"
1079+
/>
1080+
</li>
1081+
</ul>
1082+
</div>
1083+
`;
1084+
9631085
exports[`Example itemRender 1`] = `
9641086
<div>
9651087
<ul

‎tests/index.test.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,27 @@ describe('Other props', () => {
321321
});
322322
});
323323

324+
describe('should support direction props', () => {
325+
it('should support direction to start', () => {
326+
const { container } = render(<Pagination direction="start" />);
327+
expect(
328+
container.querySelector('.rc-pagination-flex.rc-pagination-start'),
329+
).toBeTruthy();
330+
});
331+
it('should support direction to center', () => {
332+
const { container } = render(<Pagination direction="center" />);
333+
expect(
334+
container.querySelector('.rc-pagination-flex.rc-pagination-center'),
335+
).toBeTruthy();
336+
});
337+
it('should support direction to end', () => {
338+
const { container } = render(<Pagination direction="end" />);
339+
expect(
340+
container.querySelector('.rc-pagination-flex.rc-pagination-end'),
341+
).toBeTruthy();
342+
});
343+
});
344+
324345
it('disabled', () => {
325346
const { container, getByRole } = render(
326347
<Pagination

0 commit comments

Comments
 (0)