From adc5a43f412c687cea1094bb267f72b66bf08eb0 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 15 Mar 2021 16:15:20 +0800 Subject: [PATCH 1/4] fix: page focus when current not change --- docs/demo/default.md | 2 +- docs/demo/itemRender.md | 2 +- docs/demo/jumper.md | 2 +- docs/demo/jumperWithGoButton.md | 2 +- docs/demo/lessPages.md | 2 +- docs/demo/locale.md | 2 +- docs/demo/more.md | 2 +- docs/demo/showTitle.md | 2 +- docs/demo/showTotal.md | 2 +- docs/demo/simple.md | 2 +- docs/demo/sizer.md | 2 +- docs/demo/stupid.md | 2 +- docs/demo/styles.md | 2 +- docs/examples/{default.js => default.jsx} | 4 ++-- docs/examples/{itemRender.js => itemRender.jsx} | 0 docs/examples/{jumper.js => jumper.jsx} | 0 .../{jumperWithGoButton.js => jumperWithGoButton.jsx} | 0 docs/examples/{lessPages.js => lessPages.jsx} | 0 docs/examples/{locale.js => locale.jsx} | 2 +- docs/examples/{more.js => more.jsx} | 0 docs/examples/{showTitle.js => showTitle.jsx} | 0 docs/examples/{showTotal.js => showTotal.jsx} | 0 docs/examples/{simple.js => simple.jsx} | 0 docs/examples/{sizer.js => sizer.jsx} | 0 docs/examples/{stupid.js => stupid.jsx} | 0 docs/examples/{styles.js => styles.jsx} | 0 src/Pagination.jsx | 5 +++++ 27 files changed, 21 insertions(+), 16 deletions(-) rename docs/examples/{default.js => default.jsx} (88%) rename docs/examples/{itemRender.js => itemRender.jsx} (100%) rename docs/examples/{jumper.js => jumper.jsx} (100%) rename docs/examples/{jumperWithGoButton.js => jumperWithGoButton.jsx} (100%) rename docs/examples/{lessPages.js => lessPages.jsx} (100%) rename docs/examples/{locale.js => locale.jsx} (93%) rename docs/examples/{more.js => more.jsx} (100%) rename docs/examples/{showTitle.js => showTitle.jsx} (100%) rename docs/examples/{showTotal.js => showTotal.jsx} (100%) rename docs/examples/{simple.js => simple.jsx} (100%) rename docs/examples/{sizer.js => sizer.jsx} (100%) rename docs/examples/{stupid.js => stupid.jsx} (100%) rename docs/examples/{styles.js => styles.jsx} (100%) diff --git a/docs/demo/default.md b/docs/demo/default.md index 3c5816ad..8c966c13 100644 --- a/docs/demo/default.md +++ b/docs/demo/default.md @@ -1,3 +1,3 @@ ## default - + diff --git a/docs/demo/itemRender.md b/docs/demo/itemRender.md index d53b1dcc..325dcc6a 100644 --- a/docs/demo/itemRender.md +++ b/docs/demo/itemRender.md @@ -1,3 +1,3 @@ ## itemRender - + diff --git a/docs/demo/jumper.md b/docs/demo/jumper.md index c9e88b5a..e58f514f 100644 --- a/docs/demo/jumper.md +++ b/docs/demo/jumper.md @@ -1,3 +1,3 @@ ## jumper - + diff --git a/docs/demo/jumperWithGoButton.md b/docs/demo/jumperWithGoButton.md index f9f72f1a..f3e52ed1 100644 --- a/docs/demo/jumperWithGoButton.md +++ b/docs/demo/jumperWithGoButton.md @@ -1,3 +1,3 @@ ## jumperWithGoButton - + diff --git a/docs/demo/lessPages.md b/docs/demo/lessPages.md index 02e2e2d1..a0a9b69e 100644 --- a/docs/demo/lessPages.md +++ b/docs/demo/lessPages.md @@ -1,3 +1,3 @@ ## lessPages - + diff --git a/docs/demo/locale.md b/docs/demo/locale.md index 2bc00d5e..d272ffa8 100644 --- a/docs/demo/locale.md +++ b/docs/demo/locale.md @@ -1,3 +1,3 @@ ## locale - + diff --git a/docs/demo/more.md b/docs/demo/more.md index 97d88320..5bafbece 100644 --- a/docs/demo/more.md +++ b/docs/demo/more.md @@ -1,3 +1,3 @@ ## more - + diff --git a/docs/demo/showTitle.md b/docs/demo/showTitle.md index 65669cd5..6fc392cd 100644 --- a/docs/demo/showTitle.md +++ b/docs/demo/showTitle.md @@ -1,3 +1,3 @@ ## showTitle - + diff --git a/docs/demo/showTotal.md b/docs/demo/showTotal.md index 81afa3b1..713b0833 100644 --- a/docs/demo/showTotal.md +++ b/docs/demo/showTotal.md @@ -1,3 +1,3 @@ ## showTotal - + diff --git a/docs/demo/simple.md b/docs/demo/simple.md index e3146039..6bfa089e 100644 --- a/docs/demo/simple.md +++ b/docs/demo/simple.md @@ -1,3 +1,3 @@ ## simple - + diff --git a/docs/demo/sizer.md b/docs/demo/sizer.md index ade2fefe..5f402db7 100644 --- a/docs/demo/sizer.md +++ b/docs/demo/sizer.md @@ -1,3 +1,3 @@ ## sizer - + diff --git a/docs/demo/stupid.md b/docs/demo/stupid.md index 9f20e71e..f8850565 100644 --- a/docs/demo/stupid.md +++ b/docs/demo/stupid.md @@ -1,3 +1,3 @@ ## stupid - + diff --git a/docs/demo/styles.md b/docs/demo/styles.md index 44cc7a16..c1d2766b 100644 --- a/docs/demo/styles.md +++ b/docs/demo/styles.md @@ -1,3 +1,3 @@ ## styles - + diff --git a/docs/examples/default.js b/docs/examples/default.jsx similarity index 88% rename from docs/examples/default.js rename to docs/examples/default.jsx index 02e9eecb..d3e99695 100644 --- a/docs/examples/default.js +++ b/docs/examples/default.jsx @@ -10,7 +10,7 @@ export default class App extends React.Component { }; onChange = page => { - console.log(page); + // console.log(page); this.setState({ current: page, }); @@ -20,7 +20,7 @@ export default class App extends React.Component { return ( ); diff --git a/docs/examples/itemRender.js b/docs/examples/itemRender.jsx similarity index 100% rename from docs/examples/itemRender.js rename to docs/examples/itemRender.jsx diff --git a/docs/examples/jumper.js b/docs/examples/jumper.jsx similarity index 100% rename from docs/examples/jumper.js rename to docs/examples/jumper.jsx diff --git a/docs/examples/jumperWithGoButton.js b/docs/examples/jumperWithGoButton.jsx similarity index 100% rename from docs/examples/jumperWithGoButton.js rename to docs/examples/jumperWithGoButton.jsx diff --git a/docs/examples/lessPages.js b/docs/examples/lessPages.jsx similarity index 100% rename from docs/examples/lessPages.js rename to docs/examples/lessPages.jsx diff --git a/docs/examples/locale.js b/docs/examples/locale.jsx similarity index 93% rename from docs/examples/locale.js rename to docs/examples/locale.jsx index fc9ec122..c48e93b8 100644 --- a/docs/examples/locale.js +++ b/docs/examples/locale.jsx @@ -2,7 +2,7 @@ import React from 'react'; import Select from 'rc-select'; import Pagination from 'rc-pagination'; -import localeInfo from 'rc-pagination/locale/en_US'; +import localeInfo from '../../src/locale/en_US'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; diff --git a/docs/examples/more.js b/docs/examples/more.jsx similarity index 100% rename from docs/examples/more.js rename to docs/examples/more.jsx diff --git a/docs/examples/showTitle.js b/docs/examples/showTitle.jsx similarity index 100% rename from docs/examples/showTitle.js rename to docs/examples/showTitle.jsx diff --git a/docs/examples/showTotal.js b/docs/examples/showTotal.jsx similarity index 100% rename from docs/examples/showTotal.js rename to docs/examples/showTotal.jsx diff --git a/docs/examples/simple.js b/docs/examples/simple.jsx similarity index 100% rename from docs/examples/simple.js rename to docs/examples/simple.jsx diff --git a/docs/examples/sizer.js b/docs/examples/sizer.jsx similarity index 100% rename from docs/examples/sizer.js rename to docs/examples/sizer.jsx diff --git a/docs/examples/stupid.js b/docs/examples/stupid.jsx similarity index 100% rename from docs/examples/stupid.js rename to docs/examples/stupid.jsx diff --git a/docs/examples/styles.js b/docs/examples/styles.jsx similarity index 100% rename from docs/examples/styles.js rename to docs/examples/styles.jsx diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 35fdbbc1..cf4f98d2 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -90,6 +90,11 @@ class Pagination extends React.Component { if (lastCurrentNode && document.activeElement === lastCurrentNode) { lastCurrentNode.blur(); } + } else if (this.paginationNode) { + const activeNode = this.paginationNode.querySelector( + `.${prefixCls}-item-active`, + ); + activeNode?.focus(); } } From c5f5d38312652e4df06e410bdaa9721ce59857d6 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 15 Mar 2021 16:16:53 +0800 Subject: [PATCH 2/4] revert demo --- docs/examples/default.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/examples/default.jsx b/docs/examples/default.jsx index d3e99695..49d50175 100644 --- a/docs/examples/default.jsx +++ b/docs/examples/default.jsx @@ -10,7 +10,6 @@ export default class App extends React.Component { }; onChange = page => { - // console.log(page); this.setState({ current: page, }); @@ -20,7 +19,7 @@ export default class App extends React.Component { return ( ); From be8d790e9512dabd1058937fb2bdfdde5c83fd37 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 15 Mar 2021 16:21:59 +0800 Subject: [PATCH 3/4] fix demo --- docs/examples/default.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/examples/default.jsx b/docs/examples/default.jsx index 49d50175..02e9eecb 100644 --- a/docs/examples/default.jsx +++ b/docs/examples/default.jsx @@ -10,6 +10,7 @@ export default class App extends React.Component { }; onChange = page => { + console.log(page); this.setState({ current: page, }); From 6eb6b1b56a8b0b883fe1b0048a230aee6ff03b7a Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Mon, 15 Mar 2021 16:32:59 +0800 Subject: [PATCH 4/4] fix api --- README.md | 56 +++++++++++++++++++++++----------------------- src/Pagination.jsx | 5 ----- 2 files changed, 28 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 99312467..e2f30109 100644 --- a/README.md +++ b/README.md @@ -40,34 +40,34 @@ 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 | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| nextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| jumpPrevIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | -| jumpNextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| 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 | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| nextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| jumpPrevIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | +| jumpNextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | | ## License diff --git a/src/Pagination.jsx b/src/Pagination.jsx index cf4f98d2..35fdbbc1 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -90,11 +90,6 @@ class Pagination extends React.Component { if (lastCurrentNode && document.activeElement === lastCurrentNode) { lastCurrentNode.blur(); } - } else if (this.paginationNode) { - const activeNode = this.paginationNode.querySelector( - `.${prefixCls}-item-active`, - ); - activeNode?.focus(); } }