feat: add prop align

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                                                                                      |

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;

docs/demo/align.md

@@ -0,0 +1,8 @@
+---
+title: align
+nav:
+  title: align
+  path: /align
+---
+
+<code src="../examples/align.tsx"></code>

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;

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,
   });

src/interface.ts

@@ -31,6 +31,7 @@ export interface PaginationData {
   defaultPageSize: number;
 
   hideOnSinglePage: boolean;
+  align: 'start' | 'center' | 'end';
   showSizeChanger: boolean;
   showLessItems: boolean;
   showPrevNextJumpers: boolean;

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

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