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(