feat: add prop direction (#569)

* feat: add prop direction * refactor(props): direction -> align * refactor: remove flex class --------- Co-authored-by: 1999iceweb <1999iceweb@polyhedra.network>
react-component · May 14, 2024 · 53ad263 · 53ad263
1 parent 55fd68e
commit 53ad263
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -55,6 +55,7 @@ ReactDOM.render(<Pagination />, 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
@@ -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
@@ -0,0 +1,8 @@
+---
+title: align
+nav:
+  title: align
+  path: /align
+---
+
+<code src="../examples/align.tsx"></code>
diff --git a/docs/examples/align.tsx b/docs/examples/align.tsx
@@ -0,0 +1,13 @@
+import '../../assets/index.less';
+import React from 'react';
+import Pagination from 'rc-pagination';
+
+const App = () => (
+  <>
+    <Pagination align="start" />
+    <Pagination align="center" />
+    <Pagination align="end" />
+  </>
+);
+
+export default App;
diff --git a/src/Pagination.tsx b/src/Pagination.tsx
@@ -51,6 +51,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
     // config
     hideOnSinglePage,
+    align,
     showPrevNextJumpers = true,
     showQuickJumper,
     showLessItems,
@@ -556,6 +557,9 @@ const Pagination: React.FC<PaginationProps> = (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
@@ -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
@@ -1,5 +1,127 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Example align 1`] = `
+<div>
+  <ul
+    class="rc-pagination rc-pagination-start"
+  >
+    <li
+      aria-disabled="true"
+      class="rc-pagination-prev rc-pagination-disabled"
+      title="上一页"
+    >
+      <button
+        aria-label="prev page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      aria-disabled="true"
+      class="rc-pagination-next rc-pagination-disabled"
+      title="下一页"
+    >
+      <button
+        aria-label="next page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+  </ul>
+  <ul
+    class="rc-pagination rc-pagination-center"
+  >
+    <li
+      aria-disabled="true"
+      class="rc-pagination-prev rc-pagination-disabled"
+      title="上一页"
+    >
+      <button
+        aria-label="prev page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      aria-disabled="true"
+      class="rc-pagination-next rc-pagination-disabled"
+      title="下一页"
+    >
+      <button
+        aria-label="next page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+  </ul>
+  <ul
+    class="rc-pagination rc-pagination-end"
+  >
+    <li
+      aria-disabled="true"
+      class="rc-pagination-prev rc-pagination-disabled"
+      title="上一页"
+    >
+      <button
+        aria-label="prev page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+    <li
+      class="rc-pagination-item rc-pagination-item-1 rc-pagination-item-disabled"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      aria-disabled="true"
+      class="rc-pagination-next rc-pagination-disabled"
+      title="下一页"
+    >
+      <button
+        aria-label="next page"
+        class="rc-pagination-item-link"
+        disabled=""
+        type="button"
+      />
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Example basic 1`] = `
 <div>
   <ul

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -321,6 +321,21 @@ describe('Other props', () => {
     });
   });
 
+  describe('should support align props', () => {
+    it('should support align to start', () => {
+      const { container } = render(<Pagination align="start" />);
+      expect(container.querySelector('.rc-pagination-start')).toBeTruthy();
+    });
+    it('should support align to center', () => {
+      const { container } = render(<Pagination align="center" />);
+      expect(container.querySelector('.rc-pagination-center')).toBeTruthy();
+    });
+    it('should support align to end', () => {
+      const { container } = render(<Pagination align="end" />);
+      expect(container.querySelector('.rc-pagination-end')).toBeTruthy();
+    });
+  });
+
   it('disabled', () => {
     const { container, getByRole } = render(
       <Pagination