diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..33b1999c --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,15 @@ +# These are supported funding model platforms + +github: ant-design # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: ant-design # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry +polar: # Replace with a single Polar username +buy_me_a_coffee: # Replace with a single Buy Me a Coffee username +thanks_dev: # Replace with a single thanks.dev username +custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index dbee7374..5735e2d2 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -1,113 +1,6 @@ -name: CI - -on: - push: - branches: [master] - pull_request: - branches: [master] - +name: ✅ test +on: [push, pull_request] jobs: - setup: - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@master - - - uses: actions/setup-node@v1 - with: - node-version: '18' - - - name: cache package-lock.json - uses: actions/cache@v2 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: create package-lock.json - run: npm i --package-lock-only --ignore-scripts - - - name: hack for singe file - run: | - if [ ! -d "package-temp-dir" ]; then - mkdir package-temp-dir - fi - cp package-lock.json package-temp-dir - - name: cache node_modules - id: node_modules_cache_id - uses: actions/cache@v2 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: install - if: steps.node_modules_cache_id.outputs.cache-hit != 'true' - run: npm ci - - lint: - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@master - - - name: restore cache from package-lock.json - uses: actions/cache@v2 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: restore cache from node_modules - uses: actions/cache@v2 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: lint - run: npm run lint - - needs: setup - - compile: - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@master - - - name: restore cache from package-lock.json - uses: actions/cache@v2 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: restore cache from node_modules - uses: actions/cache@v2 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: compile - run: npm run compile - - needs: setup - - coverage: - runs-on: ubuntu-latest - steps: - - name: checkout - uses: actions/checkout@master - - - name: restore cache from package-lock.json - uses: actions/cache@v2 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: restore cache from node_modules - uses: actions/cache@v2 - with: - path: node_modules - key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }} - - - name: coverage - run: npm test -- --coverage && bash <(curl -s https://codecov.io/bash) - - needs: setup \ No newline at end of file + test: + uses: react-component/rc-test/.github/workflows/test.yml@main + secrets: inherit \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5c55b6f1..36e64185 100644 --- a/.gitignore +++ b/.gitignore @@ -42,3 +42,5 @@ docs-dist # dumi .dumi/tmp .dumi/tmp-production + +bun.lockb \ No newline at end of file diff --git a/.husky/pre-commit b/.husky/pre-commit index d24fdfc6..c27d8893 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -npx lint-staged +lint-staged diff --git a/README.md b/README.md index efc21403..43e3062a 100644 --- a/README.md +++ b/README.md @@ -52,34 +52,36 @@ ReactDOM.render(, container); ## API -| Parameter | Description | Type | Default | -| ---------------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -| disabled | disable pagination | Bool | - | -| defaultCurrent | uncontrolled current page | Number | 1 | -| current | current page | Number | undefined | -| total | items total count | Number | 0 | -| defaultPageSize | default items per page | Number | 10 | -| pageSize | items per page | Number | 10 | -| onChange | page change callback | Function(current, pageSize) | - | -| showSizeChanger | show pageSize changer | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise | -| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 | -| pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '50', '100'] | -| onShowSizeChange | pageSize change callback | Function(current, size) | - | -| hideOnSinglePage | hide on single page | Bool | false | -| showPrevNextJumpers | show jump-prev, jump-next | Bool | true | -| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} | -| showTotal | show total records and range | Function(total, [from, to]) | - | -| className | className of pagination | String | - | -| simple | when set, show simple pager | Object | null | -| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) | -| style | the style of pagination | Object | {} | -| showLessItems | show less page items | Bool | false | -| showTitle | show page items title | Bool | true | -| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | | -| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | +// prettier-ignore +| 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 | +| defaultPageSize | default items per page | Number | 10 | +| pageSize | items per page | Number | 10 | +| onChange | page change callback | Function(current, pageSize) | - | +| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `false` when total less than `totalBoundaryShowSizeChanger`, `true` when otherwise | +| totalBoundaryShowSizeChanger | when total larger than it, `showSizeChanger` will be true | number | 50 | +| pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '50', '100'] | +| onShowSizeChange | pageSize change callback | Function(current, size) | - | +| hideOnSinglePage | hide on single page | Bool | false | +| showPrevNextJumpers | show jump-prev, jump-next | Bool | true | +| showQuickJumper | show quick goto jumper | Bool / Object | false / {goButton: true} | +| showTotal | show total records and range | Function(total, [from, to]) | - | +| className | className of pagination | String | - | +| simple | when set, show simple pager | Bool / { readOnly?: boolean; } | - | +| locale | to set l10n config | Object | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) | +| style | the style of pagination | Object | {} | +| showLessItems | show less page items | Bool | false | +| showTitle | show page items title | Bool | true | +| itemRender | custom page item renderer | Function(current, type: 'page' \| 'prev' \| 'next' \| 'jump-prev' \| 'jump-next', element): React.ReactNode \| `(current, type, element) => element` | | +| prevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| nextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| jumpPrevIcon | specify the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| jumpNextIcon | specify the default next icon | ReactNode \| (props: PaginationProps) => ReactNode | | ## License diff --git a/assets/index.less b/assets/index.less index e84b0e76..64ceac6d 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; @@ -197,7 +210,7 @@ } &-slash { - margin: 0 10px 0 5px; + margin: 0 10px 0 12px; } &-options { @@ -249,14 +262,14 @@ } &-simple &-simple-pager { - display: inline-block; + display: flex; + align-items: center; height: @pagination-item-size-sm; margin-right: 8px; input { box-sizing: border-box; height: 100%; - margin-right: 8px; padding: 0 6px; text-align: center; background-color: @pagination-item-input-bg; diff --git a/bunfig.toml b/bunfig.toml new file mode 100644 index 00000000..80d57b63 --- /dev/null +++ b/bunfig.toml @@ -0,0 +1,2 @@ +[install] +peer = false \ No newline at end of file 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/demo/showSizeChanger.md b/docs/demo/showSizeChanger.md new file mode 100644 index 00000000..bda79137 --- /dev/null +++ b/docs/demo/showSizeChanger.md @@ -0,0 +1,8 @@ +--- +title: showSizeChanger +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/align.tsx b/docs/examples/align.tsx new file mode 100644 index 00000000..609e725c --- /dev/null +++ b/docs/examples/align.tsx @@ -0,0 +1,13 @@ +import '../../assets/index.less'; +import React from 'react'; +import Pagination from '../../src'; + +const App = () => ( + <> + + + + +); + +export default App; diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx index b3299f2c..8eaffc05 100644 --- a/docs/examples/basic.tsx +++ b/docs/examples/basic.tsx @@ -1,6 +1,6 @@ import '../../assets/index.less'; import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; const App = () => ( <> diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx index d1fca6d3..376791f2 100644 --- a/docs/examples/controlled.tsx +++ b/docs/examples/controlled.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; diff --git a/docs/examples/itemRender.tsx b/docs/examples/itemRender.tsx index 9e9a8daf..035c9c2f 100644 --- a/docs/examples/itemRender.tsx +++ b/docs/examples/itemRender.tsx @@ -1,6 +1,6 @@ import '../../assets/index.less'; import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; const itemRender = (current, type, element) => { if (type === 'page') { diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx index 182c195b..20bd423b 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -1,9 +1,8 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Select from 'rc-select'; -import Pagination from 'rc-pagination'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; function onShowSizeChange(current, pageSize) { console.log(current); @@ -18,8 +17,7 @@ function onChange(current, pageSize) { const App = () => ( <>

默认

- ( total={450} />

禁用

- ( disabled />

单页默认隐藏

- ( total={8} />
- { @@ -20,8 +20,7 @@ class App extends React.Component { return ( <>

customize node

- 确定 }} defaultPageSize={20} diff --git a/docs/examples/lessPages.tsx b/docs/examples/lessPages.tsx index 13116c2b..63831387 100644 --- a/docs/examples/lessPages.tsx +++ b/docs/examples/lessPages.tsx @@ -1,6 +1,6 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import '../../assets/index.less'; const arrowPath = diff --git a/docs/examples/locale.tsx b/docs/examples/locale.tsx index c48e93b8..75b7a2a6 100644 --- a/docs/examples/locale.tsx +++ b/docs/examples/locale.tsx @@ -1,10 +1,9 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Select from 'rc-select'; -import Pagination from 'rc-pagination'; import localeInfo from '../../src/locale/en_US'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; function onShowSizeChange(current, pageSize) { console.log(current); @@ -17,8 +16,7 @@ function onChange(current, pageSize) { } const App = () => ( - ( diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx new file mode 100644 index 00000000..8b592476 --- /dev/null +++ b/docs/examples/showSizeChanger.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import '../../assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; + +export default () => { + const onPageSizeOnChange = (value) => { + console.log(value); + }; + + return ( + <> + + + + + ); +}; diff --git a/docs/examples/showTitle.tsx b/docs/examples/showTitle.tsx index ff581328..d76c713e 100644 --- a/docs/examples/showTitle.tsx +++ b/docs/examples/showTitle.tsx @@ -1,6 +1,6 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import '../../assets/index.less'; class App extends React.Component { diff --git a/docs/examples/showTotal.tsx b/docs/examples/showTotal.tsx index 25cd1c72..b7a7c042 100644 --- a/docs/examples/showTotal.tsx +++ b/docs/examples/showTotal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import '../../assets/index.less'; const App = () => ( diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index 3469f6b9..359cc0f8 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -import Pagination from 'rc-pagination'; -import Select from 'rc-select'; +import Pagination from '../../src'; import '../../assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; export default () => { const [pageIndex, setPageIndex] = useState(1); @@ -16,6 +16,13 @@ export default () => { onChange={setPageIndex} />
+ +

{ showTotal={(total) => `Total ${total} items`} />
-
Antd #46671 - ); diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx index 19212bc2..847a3127 100644 --- a/docs/examples/sizer.tsx +++ b/docs/examples/sizer.tsx @@ -1,9 +1,8 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Select from 'rc-select'; -import Pagination from 'rc-pagination'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; class App extends React.Component { state = { @@ -19,30 +18,26 @@ class App extends React.Component { const { pageSize } = this.state; return (
- - - - ( diff --git a/docs/examples/utils/commonUtil.tsx b/docs/examples/utils/commonUtil.tsx new file mode 100644 index 00000000..b0de150a --- /dev/null +++ b/docs/examples/utils/commonUtil.tsx @@ -0,0 +1,45 @@ +import type { PaginationProps } from 'rc-pagination'; +import Pagination from '../../../src'; +import Select from 'rc-select'; +import React from 'react'; + +export const getSizeChangerRender = (selectProps?: any) => { + const render: PaginationProps['sizeChangerRender'] = ({ + disabled, + size: pageSize, + onSizeChange, + 'aria-label': ariaLabel, + className, + options, + }) => ( + triggerNode.parentNode} - aria-label={locale.page_size} - defaultOpen={false} - > - {options} - - ); + // >>>>> Size Changer + if (showSizeChanger && sizeChangerRender) { + changeSelect = sizeChangerRender({ + disabled, + size: pageSize, + onSizeChange: (nextValue) => { + changeSize?.(Number(nextValue)); + }, + 'aria-label': locale.page_size, + className: `${prefixCls}-size-changer`, + options: getPageSizeOptions().map((opt) => ({ + label: mergeBuildOptionText(opt), + value: opt, + })), + }); } + // >>>>> Quick Go if (quickGo) { if (goButton) { gotoButton = diff --git a/src/Pager.tsx b/src/Pager.tsx index 2d357787..0d1dcc4f 100644 --- a/src/Pager.tsx +++ b/src/Pager.tsx @@ -1,5 +1,5 @@ /* eslint react/prop-types: 0 */ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import React from 'react'; import type { PaginationProps } from './interface'; @@ -8,6 +8,7 @@ export interface PagerProps extends Pick { page: number; active?: boolean; className?: string; + style?: React.CSSProperties; showTitle: boolean; onClick?: (page: number) => void; onKeyPress?: ( @@ -23,6 +24,7 @@ const Pager: React.FC = (props) => { page, active, className, + style, showTitle, onClick, onKeyPress, @@ -30,7 +32,7 @@ const Pager: React.FC = (props) => { } = props; const prefixCls = `${rootPrefixCls}-item`; - const cls = classNames( + const cls = clsx( prefixCls, `${prefixCls}-${page}`, { @@ -54,6 +56,7 @@ const Pager: React.FC = (props) => {
  • element; +const defaultItemRender: PaginationProps['itemRender'] = (_, __, element) => + element; function noop() {} @@ -39,7 +36,8 @@ const Pagination: React.FC = (props) => { prefixCls = 'rc-pagination', selectPrefixCls = 'rc-select', className, - selectComponentClass, + classNames: paginationClassNames, + styles, // control current: currentProp, @@ -51,6 +49,7 @@ const Pagination: React.FC = (props) => { // config hideOnSinglePage, + align, showPrevNextJumpers = true, showQuickJumper, showLessItems, @@ -62,7 +61,8 @@ const Pagination: React.FC = (props) => { disabled, simple, showTotal, - showSizeChanger: showSizeChangerProp, + showSizeChanger = total > totalBoundaryShowSizeChanger, + sizeChangerRender, pageSizeOptions, // render @@ -75,17 +75,20 @@ const Pagination: React.FC = (props) => { const paginationRef = React.useRef(null); - const [pageSize, setPageSize] = useMergedState(10, { - value: pageSizeProp, - defaultValue: defaultPageSize, - }); + const [pageSize, setPageSize] = useControlledState( + defaultPageSize, + pageSizeProp, + ); - const [current, setCurrent] = useMergedState(1, { - value: currentProp, - defaultValue: defaultCurrent, - postState: (c) => - Math.max(1, Math.min(c, calculatePage(undefined, pageSize, total))), - }); + const [internalCurrent, setCurrent] = useControlledState( + defaultCurrent, + currentProp, + ); + + const current = Math.max( + 1, + Math.min(internalCurrent, calculatePage(undefined, pageSize, total)), + ); const [internalInputVal, setInternalInputVal] = React.useState(current); @@ -121,7 +124,7 @@ const Pagination: React.FC = (props) => { /> ); if (typeof icon === 'function') { - iconNode = React.createElement(icon, { ...props }); + iconNode = React.createElement(icon, props); } return iconNode as React.ReactNode; } @@ -224,8 +227,6 @@ const Pagination: React.FC = (props) => { const hasPrev = current > 1; const hasNext = current < calculatePage(undefined, pageSize, total); - const showSizeChanger = - showSizeChangerProp ?? total > totalBoundaryShowSizeChanger; function prevHandle() { if (hasPrev) handleChange(current - 1); @@ -245,8 +246,8 @@ const Pagination: React.FC = (props) => { function runIfEnter( event: React.KeyboardEvent, - callback, - ...restParams + callback: (...args: any[]) => void, + ...restParams: any[] ) { if ( event.key === 'Enter' || @@ -301,7 +302,7 @@ const Pagination: React.FC = (props) => { } } - let jumpPrev: React.ReactElement = null; + let jumpPrev: React.ReactElement = null; const dataOrAriaAttributeProps = pickAttrs(props, { aria: true, @@ -317,7 +318,7 @@ const Pagination: React.FC = (props) => {
    • ); - let jumpNext: React.ReactElement = null; + let jumpNext: React.ReactElement = null; const allPages = calculatePage(undefined, pageSize, total); @@ -336,6 +337,8 @@ const Pagination: React.FC = (props) => { showTitle, itemRender, page: -1, + className: paginationClassNames?.item, + style: styles?.item, }; const prevPage = current - 1 > 0 ? current - 1 : 0; @@ -344,6 +347,7 @@ const Pagination: React.FC = (props) => { // ================== Simple ================== // FIXME: ts type + const isReadOnly = typeof simple === 'object' ? simple.readOnly : !simple; let gotoButton: any = goButton; let simplePager: React.ReactNode = null; @@ -379,16 +383,21 @@ const Pagination: React.FC = (props) => { title={showTitle ? `${current}/${allPages}` : null} className={`${prefixCls}-simple-pager`} > - + {isReadOnly ? ( + internalInputVal + ) : ( + + )} / {allPages} @@ -437,7 +446,7 @@ const Pagination: React.FC = (props) => { onClick={jumpPrevHandle} tabIndex={0} onKeyDown={runIfEnterJumpPrev} - className={classNames(`${prefixCls}-jump-prev`, { + className={clsx(`${prefixCls}-jump-prev`, { [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon, })} > @@ -452,7 +461,7 @@ const Pagination: React.FC = (props) => { onClick={jumpNextHandle} tabIndex={0} onKeyDown={runIfEnterJumpNext} - className={classNames(`${prefixCls}-jump-next`, { + className={clsx(`${prefixCls}-jump-next`, { [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon, })} > @@ -479,7 +488,7 @@ const Pagination: React.FC = (props) => { if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) { pagerList[0] = React.cloneElement(pagerList[0], { - className: classNames( + className: clsx( `${prefixCls}-item-after-jump-prev`, pagerList[0].props.className, ), @@ -491,7 +500,7 @@ const Pagination: React.FC = (props) => { if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) { const lastOne = pagerList[pagerList.length - 1]; pagerList[pagerList.length - 1] = React.cloneElement(lastOne, { - className: classNames( + className: clsx( `${prefixCls}-item-before-jump-next`, lastOne.props.className, ), @@ -517,9 +526,10 @@ const Pagination: React.FC = (props) => { onClick={prevHandle} tabIndex={prevDisabled ? null : 0} onKeyDown={runIfEnterPrev} - className={classNames(`${prefixCls}-prev`, { + className={clsx(`${prefixCls}-prev`, paginationClassNames?.item, { [`${prefixCls}-disabled`]: prevDisabled, })} + style={styles?.item} aria-disabled={prevDisabled} > {prev} @@ -545,9 +555,10 @@ const Pagination: React.FC = (props) => { onClick={nextHandle} tabIndex={nextTabIndex} onKeyDown={runIfEnterNext} - className={classNames(`${prefixCls}-next`, { + className={clsx(`${prefixCls}-next`, paginationClassNames?.item, { [`${prefixCls}-disabled`]: nextDisabled, })} + style={styles?.item} aria-disabled={nextDisabled} > {next} @@ -555,7 +566,10 @@ const Pagination: React.FC = (props) => { ); } - const cls = classNames(prefixCls, className, { + const cls = clsx(prefixCls, className, { + [`${prefixCls}-start`]: align === 'start', + [`${prefixCls}-center`]: align === 'center', + [`${prefixCls}-end`]: align === 'end', [`${prefixCls}-simple`]: simple, [`${prefixCls}-disabled`]: disabled, }); @@ -575,13 +589,14 @@ const Pagination: React.FC = (props) => { locale={locale} rootPrefixCls={prefixCls} disabled={disabled} - selectComponentClass={selectComponentClass} selectPrefixCls={selectPrefixCls} - changeSize={showSizeChanger ? changePageSize : null} + changeSize={changePageSize} pageSize={pageSize} pageSizeOptions={pageSizeOptions} quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} + showSizeChanger={showSizeChanger} + sizeChangerRender={sizeChangerRender} /> ); diff --git a/src/interface.ts b/src/interface.ts index 56838c8e..b37a0788 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,4 +1,5 @@ import type React from 'react'; +import type { SizeChangerRender } from './Options'; export interface PaginationLocale { // Options @@ -17,11 +18,15 @@ export interface PaginationLocale { page_size?: string; } +type SemanticName = 'item'; + export interface PaginationData { + styles?: Partial>; + classNames?: Partial>; className: string; selectPrefixCls: string; prefixCls: string; - pageSizeOptions: string[] | number[]; + pageSizeOptions: number[]; current: number; defaultCurrent: number; @@ -31,19 +36,20 @@ export interface PaginationData { defaultPageSize: number; hideOnSinglePage: boolean; + align: 'start' | 'center' | 'end'; showSizeChanger: boolean; + sizeChangerRender?: SizeChangerRender; showLessItems: boolean; showPrevNextJumpers: boolean; showQuickJumper: boolean | object; showTitle: boolean; - simple: boolean; + simple: boolean | { readOnly?: boolean }; disabled: boolean; locale: PaginationLocale; style: React.CSSProperties; - selectComponentClass: React.ComponentType; prevIcon: React.ComponentType | React.ReactNode; nextIcon: React.ComponentType | React.ReactNode; jumpPrevIcon: React.ComponentType | React.ReactNode; @@ -61,7 +67,6 @@ export interface PaginationProps element: React.ReactNode, ) => React.ReactNode; showTotal?: (total: number, range: [number, number]) => React.ReactNode; - // WAI-ARIA role?: React.AriaRole | undefined; } diff --git a/src/locale/mr_IN.ts b/src/locale/mr_IN.ts new file mode 100644 index 00000000..eec6ec25 --- /dev/null +++ b/src/locale/mr_IN.ts @@ -0,0 +1,20 @@ +import type { PaginationLocale } from '../interface'; + +const locale: PaginationLocale = { + // Options + items_per_page: '/ पृष्ठ', + jump_to: 'यावर जा ', + jump_to_confirm: 'पुष्टी करा', + page: 'पृष्ठ', + + // Pagination + prev_page: 'मागील पृष्ठ', + next_page: 'पुढील पृष्ठ', + prev_5: 'मागील ५ पृष्ठे', + next_5: 'पुढील ५ पृष्ठे', + prev_3: 'मागील ३ पृष्ठे', + next_3: 'पुढील ३ पृष्ठे', + page_size: 'पृष्ठ आकार', +}; + +export default locale; diff --git a/src/locale/sr_Cyrl_RS.js b/src/locale/sr_Cyrl_RS.js new file mode 100644 index 00000000..6a998ea2 --- /dev/null +++ b/src/locale/sr_Cyrl_RS.js @@ -0,0 +1,15 @@ +export default { + // Options.jsx + items_per_page: '/ страни', + jump_to: 'Иди на', + page: '', + + // Pagination.jsx + prev_page: 'Претходна страна', + next_page: 'Следећа страна', + prev_5: 'Претходних 5 Страна', + next_5: 'Следећих 5 Страна', + prev_3: 'Претходних 3 Стране', + next_3: 'Следећих 3 Стране', + page_size: 'Page Size', +}; diff --git a/src/locale/te_IN.ts b/src/locale/te_IN.ts new file mode 100644 index 00000000..ea162c3c --- /dev/null +++ b/src/locale/te_IN.ts @@ -0,0 +1,20 @@ +import type { PaginationLocale } from '../interface'; + +const locale: PaginationLocale = { + //options + items_per_page: '/ పేజీ', + jump_to: 'వెళ్ళండి', + jump_to_confirm: 'నిర్ధారించండి', + page: 'పేజీ', + + //pagination + prev_page: 'మునుపటి పేజీ', + next_page: 'తదుపరి పేజీ', + prev_5: 'మునుపటి 5 పేజీలు', + next_5: 'తదుపరి 5 పేజీలు', + prev_3: 'మునుపటి 3 పేజీలు', + next_3: 'తదుపరి 3 పేజీలు', + page_size: 'పేజీ పరిమాణం', +}; + +export default locale; diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index e31cf30b..19d64736 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`] = `
      - - - - 20 条/页 + + + + + 20 条/页 +
    @@ -1708,32 +1834,36 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 20 条/页 + + + + + 20 条/页 + @@ -1803,31 +1933,35 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -1883,31 +2017,35 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -2058,49 +2196,53 @@ exports[`Example jumperWithGoButton 1`] = ` class="rc-select-selector" > - - - - 20 条/页 - - - -
    - 跳至 - - 页 - -
    + +
    + 跳至 + + 页 + +
    @@ -2129,6 +2271,7 @@ exports[`Example jumperWithGoButton 1`] = ` title="1/5" > - - - - 20 / page + + + + + 20 / page + @@ -2752,6 +2899,304 @@ exports[`Example more 1`] = ` `; +exports[`Example showSizeChanger 1`] = ` +
    + + +
      +
    • +
      • +
    • + + 1 + +
      • +
    • +
      • +
    • +
      +
      + + + + + + 10 条每页 + + +
      +
      +
      • +
    +
    +`; + exports[`Example showTitle 1`] = `
    @@ -3229,6 +3674,7 @@ exports[`Example simple 1`] = ` title="1/5" >
    +
      +
    • +
      • +
    • + 1 + + / + + 5 +
      • +
    • +
      • +
    +
      @@ -3273,6 +3759,7 @@ exports[`Example simple 1`] = ` title="1/5" > - - - - 10 条/页 + + + + + 10 条/页 +
    @@ -3455,6 +3948,7 @@ exports[`Example simple 1`] = ` title="1/5" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -3608,31 +4106,35 @@ exports[`Example sizer 1`] = ` class="rc-select-selector" > - - - - 15 条/页 + + + + + 15 条/页 + @@ -3792,31 +4294,35 @@ exports[`Example sizer 1`] = ` class="rc-select-selector" > - - - - 15 条/页 + + + + + 15 条/页 + diff --git a/tests/__snapshots__/options.test.tsx.snap b/tests/__snapshots__/options.test.tsx.snap index 5824f3f0..c241a318 100644 --- a/tests/__snapshots__/options.test.tsx.snap +++ b/tests/__snapshots__/options.test.tsx.snap @@ -12,31 +12,35 @@ exports[`Options should render correctly 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + diff --git a/tests/__snapshots__/simple.test.tsx.snap b/tests/__snapshots__/simple.test.tsx.snap index 8dee2660..f2bcb51a 100644 --- a/tests/__snapshots__/simple.test.tsx.snap +++ b/tests/__snapshots__/simple.test.tsx.snap @@ -67,3 +67,48 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j `; + +exports[`simple Pagination should support simple is readOnly value 1`] = ` +
    +
      +
    • +
      • +
    • + 1 + + / + + 0 +
      • +
    • +
      • +
    +
    +`; diff --git a/tests/commonUtil.tsx b/tests/commonUtil.tsx new file mode 100644 index 00000000..7ab44a23 --- /dev/null +++ b/tests/commonUtil.tsx @@ -0,0 +1,27 @@ +import Select from 'rc-select'; +import type { PaginationProps } from '../src/interface'; +import React from 'react'; + +export const sizeChangerRender: PaginationProps['sizeChangerRender'] = ({ + disabled, + size: pageSize, + onSizeChange, + 'aria-label': ariaLabel, + className, + options, +}) => { + return ( +