From 53ad26316bd6d4e4a76ae4fc101c817eb08120ea Mon Sep 17 00:00:00 2001
From: ice <49827327+GetWebHB@users.noreply.github.com>
Date: Tue, 14 May 2024 15:36:56 +0800
Subject: [PATCH] feat: add prop direction (#569)
* feat: add prop direction
* refactor(props): direction -> align
* refactor: remove flex class
---------
Co-authored-by: 1999iceweb <1999iceweb@polyhedra.network>
---
README.md | 1 +
assets/index.less | 13 +++
docs/demo/align.md | 8 ++
docs/examples/align.tsx | 13 +++
src/Pagination.tsx | 4 +
src/interface.ts | 1 +
tests/__snapshots__/demo.test.tsx.snap | 122 +++++++++++++++++++++++++
tests/index.test.tsx | 15 +++
8 files changed, 177 insertions(+)
create mode 100644 docs/demo/align.md
create mode 100644 docs/examples/align.tsx
diff --git a/README.md b/README.md
index efc21403..fce836a5 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ ReactDOM.render(, container);
| Parameter | Description | Type | Default |
| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| disabled | disable pagination | Bool | - |
+| align | align of pagination | start \| center \| end | undefined |
| defaultCurrent | uncontrolled current page | Number | 1 |
| current | current page | Number | undefined |
| total | items total count | Number | 0 |
diff --git a/assets/index.less b/assets/index.less
index e84b0e76..aed81e27 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -13,6 +13,7 @@
@pagination-item-input-bg: #fff;
.@{pagination-prefix-cls} {
+ display: flex;
margin: 0;
padding: 0;
font-size: 14px;
@@ -24,6 +25,18 @@
list-style: none;
}
+ &-start {
+ justify-content: start;
+ }
+
+ &-center {
+ justify-content: center;
+ }
+
+ &-end {
+ justify-content: end;
+ }
+
&::after {
display: block;
clear: both;
diff --git a/docs/demo/align.md b/docs/demo/align.md
new file mode 100644
index 00000000..5d8a6660
--- /dev/null
+++ b/docs/demo/align.md
@@ -0,0 +1,8 @@
+---
+title: align
+nav:
+ title: align
+ path: /align
+---
+
+
diff --git a/docs/examples/align.tsx b/docs/examples/align.tsx
new file mode 100644
index 00000000..c902114d
--- /dev/null
+++ b/docs/examples/align.tsx
@@ -0,0 +1,13 @@
+import '../../assets/index.less';
+import React from 'react';
+import Pagination from 'rc-pagination';
+
+const App = () => (
+ <>
+
+
+
+ >
+);
+
+export default App;
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index b3c6763c..28189454 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -51,6 +51,7 @@ const Pagination: React.FC = (props) => {
// config
hideOnSinglePage,
+ align,
showPrevNextJumpers = true,
showQuickJumper,
showLessItems,
@@ -556,6 +557,9 @@ const Pagination: React.FC = (props) => {
}
const cls = classNames(prefixCls, className, {
+ [`${prefixCls}-start`]: align === 'start',
+ [`${prefixCls}-center`]: align === 'center',
+ [`${prefixCls}-end`]: align === 'end',
[`${prefixCls}-simple`]: simple,
[`${prefixCls}-disabled`]: disabled,
});
diff --git a/src/interface.ts b/src/interface.ts
index 56838c8e..be78072a 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -31,6 +31,7 @@ export interface PaginationData {
defaultPageSize: number;
hideOnSinglePage: boolean;
+ align: 'start' | 'center' | 'end';
showSizeChanger: boolean;
showLessItems: boolean;
showPrevNextJumpers: boolean;
diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap
index e31cf30b..3ff98abb 100644
--- a/tests/__snapshots__/demo.test.tsx.snap
+++ b/tests/__snapshots__/demo.test.tsx.snap
@@ -1,5 +1,127 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Example align 1`] = `
+
+
+
+
+
+`;
+
exports[`Example basic 1`] = `
{
});
});
+ describe('should support align props', () => {
+ it('should support align to start', () => {
+ const { container } = render();
+ expect(container.querySelector('.rc-pagination-start')).toBeTruthy();
+ });
+ it('should support align to center', () => {
+ const { container } = render();
+ expect(container.querySelector('.rc-pagination-center')).toBeTruthy();
+ });
+ it('should support align to end', () => {
+ const { container } = render();
+ expect(container.querySelector('.rc-pagination-end')).toBeTruthy();
+ });
+ });
+
it('disabled', () => {
const { container, getByRole } = render(