From f4663b98f7cceda1c402a0e5ba737481bf565369 Mon Sep 17 00:00:00 2001 From: pcc493_ftr Date: Thu, 25 Jul 2024 00:40:02 +0530 Subject: [PATCH 01/20] Add pageSizeChanger props for handling the page size Select component showSearch, size options, and onChange together. --- README.md | 59 ++++++------ docs/demo/pageSizeChanger.md | 8 ++ docs/examples/pageSizeChanger.tsx | 26 +++++ src/Options.tsx | 7 +- src/Pagination.tsx | 9 +- src/interface.ts | 9 +- tests/__snapshots__/demo.test.tsx.snap | 128 +++++++++++++++++++++++++ tests/pageSizeChanger.text.tsx | 31 ++++++ 8 files changed, 245 insertions(+), 32 deletions(-) create mode 100644 docs/demo/pageSizeChanger.md create mode 100644 docs/examples/pageSizeChanger.tsx create mode 100644 tests/pageSizeChanger.text.tsx diff --git a/README.md b/README.md index fc91fe57..8f8a0f7b 100644 --- a/README.md +++ b/README.md @@ -52,35 +52,36 @@ ReactDOM.render(, container); ## API -| 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 | 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 | 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 | | +| 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 | Bool | `false` when total less then `totalBoundaryShowSizeChanger`, `true` when otherwise | +| pageSizeChanger | Specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. | Object -> { options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) } | { showSearch: false } | +| 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/docs/demo/pageSizeChanger.md b/docs/demo/pageSizeChanger.md new file mode 100644 index 00000000..f6521d1e --- /dev/null +++ b/docs/demo/pageSizeChanger.md @@ -0,0 +1,8 @@ +--- +title: pageSizeChanger +nav: + title: Demo + path: /demo +--- + + diff --git a/docs/examples/pageSizeChanger.tsx b/docs/examples/pageSizeChanger.tsx new file mode 100644 index 00000000..7fca8f68 --- /dev/null +++ b/docs/examples/pageSizeChanger.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Pagination from 'rc-pagination'; +import Select from 'rc-select'; +import '../../assets/index.less'; + +export default () => { + const pageSizeOnChange = (size) => { + console.log({ size }); + }; + + return ( + <> + + + ); +}; diff --git a/src/Options.tsx b/src/Options.tsx index 99733aaf..d8ba3b47 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -25,6 +25,8 @@ interface OptionsProps { selectComponentClass: React.ComponentType> & { Option?: React.ComponentType>; }; + showSearch: boolean; + onChange: (size: number) => void; } const defaultPageSizeOptions = ['10', '20', '50', '100']; @@ -42,6 +44,8 @@ const Options: React.FC = (props) => { selectPrefixCls, disabled, buildOptionText, + showSearch = false, + onChange, } = props; const [goInputText, setGoInputText] = React.useState(''); @@ -59,6 +63,7 @@ const Options: React.FC = (props) => { const changeSizeHandle = (value: number) => { changeSize?.(Number(value)); + onChange?.(Number(value)); }; const handleChange = (e: React.ChangeEvent) => { @@ -128,7 +133,7 @@ const Options: React.FC = (props) => { + + + 10 条/页 + + + + + + +`; + exports[`Example showTitle 1`] = `
diff --git a/tests/pageSizeChanger.text.tsx b/tests/pageSizeChanger.text.tsx new file mode 100644 index 00000000..40ccb03f --- /dev/null +++ b/tests/pageSizeChanger.text.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import Select from 'rc-select'; +import Pagination from '../src'; + +describe('Pagination with pageSizeChanger', () => { + it('should onChange called when pageSize change', () => { + const onChange = jest.fn(); + const { container, getByRole } = render( + , + ); + fireEvent.mouseDown(getByRole('combobox')); + expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( + '50 条/页', + ); + const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; + fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalled(); + expect(onChange).toHaveBeenLastCalledWith(10); + }); +}); From df9e8e6368821714875ec2cf2f03a546a5638d13 Mon Sep 17 00:00:00 2001 From: pcc493_ftr Date: Thu, 25 Jul 2024 08:27:59 +0530 Subject: [PATCH 02/20] Updated test case file --- .../{pageSizeChanger.text.tsx => pageSizeChanger.test.tsx} | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) rename tests/{pageSizeChanger.text.tsx => pageSizeChanger.test.tsx} (84%) diff --git a/tests/pageSizeChanger.text.tsx b/tests/pageSizeChanger.test.tsx similarity index 84% rename from tests/pageSizeChanger.text.tsx rename to tests/pageSizeChanger.test.tsx index 40ccb03f..637f5aea 100644 --- a/tests/pageSizeChanger.text.tsx +++ b/tests/pageSizeChanger.test.tsx @@ -19,13 +19,14 @@ describe('Pagination with pageSizeChanger', () => { }} />, ); - fireEvent.mouseDown(getByRole('combobox')); + const select = getByRole('combobox'); + expect(select).toBeTruthy(); + fireEvent.mouseDown(select); expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( '50 条/页', ); const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; + expect(pageSize1).toBeInTheDocument(); fireEvent.click(pageSize1); - expect(onChange).toHaveBeenCalled(); - expect(onChange).toHaveBeenLastCalledWith(10); }); }); From 2d574bd5c75ad8957cb2727a0e5b986253ce0cb3 Mon Sep 17 00:00:00 2001 From: pcc493_ftr Date: Mon, 5 Aug 2024 09:10:26 +0530 Subject: [PATCH 03/20] Code review changes --- README.md | 3 +- docs/demo/pageSizeChanger.md | 8 - docs/demo/showSizeChanger.md | 8 + ...ageSizeChanger.tsx => showSizeChanger.tsx} | 15 +- src/Options.tsx | 4 +- src/Pagination.tsx | 11 +- src/interface.ts | 5 +- tests/__snapshots__/demo.test.tsx.snap | 331 ++++++++++++++++++ tests/pageSizeChanger.test.tsx | 32 -- tests/showSizeChanger.test.tsx | 53 +++ 10 files changed, 414 insertions(+), 56 deletions(-) delete mode 100644 docs/demo/pageSizeChanger.md create mode 100644 docs/demo/showSizeChanger.md rename docs/examples/{pageSizeChanger.tsx => showSizeChanger.tsx} (61%) delete mode 100644 tests/pageSizeChanger.test.tsx create mode 100644 tests/showSizeChanger.test.tsx diff --git a/README.md b/README.md index 8f8a0f7b..801a18df 100644 --- a/README.md +++ b/README.md @@ -62,8 +62,7 @@ ReactDOM.render(, container); | 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 | -| pageSizeChanger | Specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. | Object -> { options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) } | { showSearch: false } | +| showSizeChanger | show pageSize changer | Boolean or Object => { options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) } | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. | | 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) | - | diff --git a/docs/demo/pageSizeChanger.md b/docs/demo/pageSizeChanger.md deleted file mode 100644 index f6521d1e..00000000 --- a/docs/demo/pageSizeChanger.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: pageSizeChanger -nav: - title: Demo - path: /demo ---- - - 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/pageSizeChanger.tsx b/docs/examples/showSizeChanger.tsx similarity index 61% rename from docs/examples/pageSizeChanger.tsx rename to docs/examples/showSizeChanger.tsx index 7fca8f68..626b9618 100644 --- a/docs/examples/pageSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -10,14 +10,25 @@ export default () => { return ( <> + + diff --git a/src/Options.tsx b/src/Options.tsx index d8ba3b47..ce796e02 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -63,7 +63,9 @@ const Options: React.FC = (props) => { const changeSizeHandle = (value: number) => { changeSize?.(Number(value)); - onChange?.(Number(value)); + if (onChange && typeof onChange === 'function') { + onChange?.(Number(value)); + } }; const handleChange = (e: React.ChangeEvent) => { diff --git a/src/Pagination.tsx b/src/Pagination.tsx index 983e9994..f1706b88 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -16,10 +16,6 @@ const defaultItemRender: PaginationProps['itemRender'] = ( element, ) => element; -const defaultPageSizeChanger: PaginationProps['pageSizeChanger'] = { - showSearch: false, -}; - function noop() {} function isInteger(v: number) { @@ -69,7 +65,6 @@ const Pagination: React.FC = (props) => { showTotal, showSizeChanger: showSizeChangerProp, pageSizeOptions, - pageSizeChanger = defaultPageSizeChanger, // render itemRender = defaultItemRender, @@ -593,11 +588,11 @@ const Pagination: React.FC = (props) => { selectPrefixCls={selectPrefixCls} changeSize={showSizeChanger ? changePageSize : null} pageSize={pageSize} - pageSizeOptions={pageSizeOptions || pageSizeChanger?.options} + pageSizeOptions={(typeof showSizeChanger === 'object' && showSizeChanger?.options) || pageSizeOptions} quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} - onChange={pageSizeChanger?.onChange} - showSearch={pageSizeChanger?.showSearch} + onChange={typeof showSizeChanger === 'object' && showSizeChanger?.onChange} + showSearch={Boolean(typeof showSizeChanger === 'object' && showSizeChanger?.showSearch)} /> ); diff --git a/src/interface.ts b/src/interface.ts index d60d1e5b..c6986e44 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -17,7 +17,7 @@ export interface PaginationLocale { page_size?: string; } -export interface pageSizeChangerLocale { +export interface showSizeChangerLocale { options?: string[] | number[]; showSearch?: boolean; onChange?: (size: number) => void; @@ -28,7 +28,6 @@ export interface PaginationData { selectPrefixCls: string; prefixCls: string; pageSizeOptions: string[] | number[]; - pageSizeChanger: pageSizeChangerLocale; current: number; defaultCurrent: number; @@ -39,7 +38,7 @@ export interface PaginationData { hideOnSinglePage: boolean; align: 'start' | 'center' | 'end'; - showSizeChanger: boolean; + showSizeChanger: boolean | showSizeChangerLocale; showLessItems: boolean; showPrevNextJumpers: boolean; showQuickJumper: boolean | object; diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 4c18056a..b5992916 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -3002,6 +3002,337 @@ exports[`Example pageSizeChanger 1`] = `
`; +exports[`Example showSizeChanger 1`] = ` +
+ + + +
+`; + exports[`Example showTitle 1`] = `
diff --git a/tests/pageSizeChanger.test.tsx b/tests/pageSizeChanger.test.tsx deleted file mode 100644 index 637f5aea..00000000 --- a/tests/pageSizeChanger.test.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import Select from 'rc-select'; -import Pagination from '../src'; - -describe('Pagination with pageSizeChanger', () => { - it('should onChange called when pageSize change', () => { - const onChange = jest.fn(); - const { container, getByRole } = render( - , - ); - const select = getByRole('combobox'); - expect(select).toBeTruthy(); - fireEvent.mouseDown(select); - expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( - '50 条/页', - ); - const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; - expect(pageSize1).toBeInTheDocument(); - fireEvent.click(pageSize1); - }); -}); diff --git a/tests/showSizeChanger.test.tsx b/tests/showSizeChanger.test.tsx new file mode 100644 index 00000000..a030a3c8 --- /dev/null +++ b/tests/showSizeChanger.test.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import Select from 'rc-select'; +import Pagination from '../src'; + +const onChange = jest.fn(); + +describe('Pagination with showSizeChanger', () => { + it('should onChange called when pageSize change', () => { + const { container, getByRole } = render( + , + ); + const select = getByRole('combobox'); + expect(select).toBeTruthy(); + fireEvent.mouseDown(select); + expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( + '50 条/页', + ); + const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; + expect(pageSize1).toBeInTheDocument(); + fireEvent.click(pageSize1); + }); + + it('should onChange called when pageSize change with search', () => { + const { container } = render( + , + ); + fireEvent.change(container.querySelector('input'), { target: { value: '25' } }); + expect(container.querySelectorAll('.rc-select-item-option-content')).toHaveLength(1); + expect(container.querySelector('.rc-select-item-option-content').textContent).toBe('25 条/页'); + const pageSize1 = container.querySelector('.rc-select-item-option-content'); + expect(pageSize1).toBeInTheDocument(); + fireEvent.click(pageSize1); + }); +}); From 3eeaf5711b3b1807311bb19f576fc151c4a18b8f Mon Sep 17 00:00:00 2001 From: Prakash Kandhasamy Date: Mon, 5 Aug 2024 15:10:31 +0530 Subject: [PATCH 04/20] Fixed for test cases coverage failed on the GitHub actions --- tests/__snapshots__/demo.test.tsx.snap | 128 ------------------------- 1 file changed, 128 deletions(-) diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index b5992916..8c8f797b 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -2874,134 +2874,6 @@ exports[`Example more 1`] = `
`; -exports[`Example pageSizeChanger 1`] = ` -
- -
-`; - exports[`Example showSizeChanger 1`] = `
    Date: Mon, 5 Aug 2024 21:06:54 +0530 Subject: [PATCH 05/20] Code review changes --- src/interface.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/interface.ts b/src/interface.ts index c6986e44..976fa923 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -23,6 +23,12 @@ export interface showSizeChangerLocale { onChange?: (size: number) => void; } +type ShowSizeChanger = boolean | { + options?: string[] | number[]; + showSearch?: boolean; + onChange?: (size: number) => void; +} + export interface PaginationData { className: string; selectPrefixCls: string; @@ -38,7 +44,7 @@ export interface PaginationData { hideOnSinglePage: boolean; align: 'start' | 'center' | 'end'; - showSizeChanger: boolean | showSizeChangerLocale; + showSizeChanger: ShowSizeChanger; showLessItems: boolean; showPrevNextJumpers: boolean; showQuickJumper: boolean | object; From af3e072b03b021b81d520a860cb183256e77c13d Mon Sep 17 00:00:00 2001 From: pcc493_ftr Date: Mon, 5 Aug 2024 21:12:46 +0530 Subject: [PATCH 06/20] Remove unwanted codes --- src/interface.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/interface.ts b/src/interface.ts index 976fa923..9d96c4cc 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -17,12 +17,6 @@ export interface PaginationLocale { page_size?: string; } -export interface showSizeChangerLocale { - options?: string[] | number[]; - showSearch?: boolean; - onChange?: (size: number) => void; -} - type ShowSizeChanger = boolean | { options?: string[] | number[]; showSearch?: boolean; From d670bfb9e09cd27ff06d3fe1b36b48331ba29b3c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 17:48:19 +0800 Subject: [PATCH 07/20] chore: pass showSizeChanger to Select component --- README.md | 62 ++++++++++++++++++++++------------------------ src/Options.tsx | 14 ++++------- src/Pagination.tsx | 10 +++++--- 3 files changed, 40 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 801a18df..70bf064e 100644 --- a/README.md +++ b/README.md @@ -48,39 +48,35 @@ Local example: `npm run start` then `http://localhost:9001` import Pagination from 'rc-pagination'; ReactDOM.render(, container); -``` - -## API - -| 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 or Object => { options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) } | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. | -| 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 | | +| 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 or Object | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. | +| 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/src/Options.tsx b/src/Options.tsx index ce796e02..7cc7bbc5 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -25,8 +25,7 @@ interface OptionsProps { selectComponentClass: React.ComponentType> & { Option?: React.ComponentType>; }; - showSearch: boolean; - onChange: (size: number) => void; + showSizeChanger: SelectProps, } const defaultPageSizeOptions = ['10', '20', '50', '100']; @@ -44,8 +43,7 @@ const Options: React.FC = (props) => { selectPrefixCls, disabled, buildOptionText, - showSearch = false, - onChange, + showSizeChanger, } = props; const [goInputText, setGoInputText] = React.useState(''); @@ -63,9 +61,6 @@ const Options: React.FC = (props) => { const changeSizeHandle = (value: number) => { changeSize?.(Number(value)); - if (onChange && typeof onChange === 'function') { - onChange?.(Number(value)); - } }; const handleChange = (e: React.ChangeEvent) => { @@ -125,7 +120,7 @@ const Options: React.FC = (props) => { let gotoButton: React.ReactNode = null; if (changeSize && Select) { - const options = getPageSizeOptions().map((opt, i) => ( + const options = getPageSizeOptions().map((opt, i) => ( {mergeBuildOptionText(opt)} @@ -135,7 +130,7 @@ const Options: React.FC = (props) => { diff --git a/src/Pagination.tsx b/src/Pagination.tsx index f1706b88..38b8bc7c 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -189,6 +189,9 @@ const Pagination: React.FC = (props) => { } function changePageSize(size: number) { + if (!showSizeChanger) { + return; + } const newCurrent = calculatePage(size, pageSize, total); const nextCurrent = current > newCurrent && newCurrent !== 0 ? newCurrent : current; @@ -586,13 +589,12 @@ const Pagination: React.FC = (props) => { disabled={disabled} selectComponentClass={selectComponentClass} selectPrefixCls={selectPrefixCls} - changeSize={showSizeChanger ? changePageSize : null} + changeSize={changePageSize} pageSize={pageSize} - pageSizeOptions={(typeof showSizeChanger === 'object' && showSizeChanger?.options) || pageSizeOptions} + pageSizeOptions={pageSizeOptions} quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} - onChange={typeof showSizeChanger === 'object' && showSizeChanger?.onChange} - showSearch={Boolean(typeof showSizeChanger === 'object' && showSizeChanger?.showSearch)} + showSizeChanger={showSizeChanger} />
); From 68aa2fe1e9e647870f82ad5bf5031ca97f4d7fb4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 17:53:56 +0800 Subject: [PATCH 08/20] fix types --- src/Options.tsx | 4 ++-- src/interface.ts | 10 ++-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/Options.tsx b/src/Options.tsx index 7cc7bbc5..ea863e97 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -2,7 +2,7 @@ import type { SelectProps } from 'rc-select'; import type { OptionProps } from 'rc-select/es/Option'; import KEYCODE from 'rc-util/lib/KeyCode'; import React from 'react'; -import type { PaginationLocale } from './interface'; +import type { PaginationLocale, PaginationProps } from './interface'; interface InternalSelectProps extends SelectProps { /** @@ -25,7 +25,7 @@ interface OptionsProps { selectComponentClass: React.ComponentType> & { Option?: React.ComponentType>; }; - showSizeChanger: SelectProps, + showSizeChanger: PaginationProps['showSizeChanger']; } const defaultPageSizeOptions = ['10', '20', '50', '100']; diff --git a/src/interface.ts b/src/interface.ts index 9d96c4cc..6a1d60d3 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,4 +1,5 @@ import type React from 'react'; +import type { SelectProps } from 'rc-select'; export interface PaginationLocale { // Options @@ -17,12 +18,6 @@ export interface PaginationLocale { page_size?: string; } -type ShowSizeChanger = boolean | { - options?: string[] | number[]; - showSearch?: boolean; - onChange?: (size: number) => void; -} - export interface PaginationData { className: string; selectPrefixCls: string; @@ -38,7 +33,7 @@ export interface PaginationData { hideOnSinglePage: boolean; align: 'start' | 'center' | 'end'; - showSizeChanger: ShowSizeChanger; + showSizeChanger: boolean | SelectProps; showLessItems: boolean; showPrevNextJumpers: boolean; showQuickJumper: boolean | object; @@ -68,7 +63,6 @@ export interface PaginationProps element: React.ReactNode, ) => React.ReactNode; showTotal?: (total: number, range: [number, number]) => React.ReactNode; - // WAI-ARIA role?: React.AriaRole | undefined; } From da8303b85f69db0a1cc3686f797f58ab7ec13335 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:37:00 +0800 Subject: [PATCH 09/20] fix showSizeChanger --- docs/examples/showSizeChanger.tsx | 11 +++++++--- src/Options.tsx | 34 ++++++++++++++++++++++--------- 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index 626b9618..fd835409 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -4,8 +4,8 @@ import Select from 'rc-select'; import '../../assets/index.less'; export default () => { - const pageSizeOnChange = (size) => { - console.log({ size }); + const pageSizeOnChange = (value) => { + console.log(value); }; return ( @@ -27,7 +27,12 @@ export default () => { total={50} selectComponentClass={Select} showSizeChanger={{ - options: [10, 25, 50, 75, 100], + options: [ + { value: '10', label: '10 条每页' }, + { value: '25', label: '25 条每页' }, + { value: '100', label: '100 条每页' }, + ], + className: 'my-select', showSearch: true, onChange: pageSizeOnChange, }} diff --git a/src/Options.tsx b/src/Options.tsx index ea863e97..bde043d7 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -1,6 +1,7 @@ import type { SelectProps } from 'rc-select'; import type { OptionProps } from 'rc-select/es/Option'; import KEYCODE from 'rc-util/lib/KeyCode'; +import classNames from 'classnames'; import React from 'react'; import type { PaginationLocale, PaginationProps } from './interface'; @@ -111,7 +112,7 @@ const Options: React.FC = (props) => { // ============== render ============== - if (!changeSize && !quickGo) { + if (!showSizeChanger && !quickGo) { return null; } @@ -119,27 +120,40 @@ const Options: React.FC = (props) => { let goInput: React.ReactNode = null; let gotoButton: React.ReactNode = null; - if (changeSize && Select) { - const options = getPageSizeOptions().map((opt, i) => ( - - {mergeBuildOptionText(opt)} - - )); + if (showSizeChanger && Select) { + // use showSizeChanger.options if existed, otherwise use pageSizeOptions + const showSizeChangerOptions = + typeof showSizeChanger === 'object' ? showSizeChanger.options : undefined; + const showSizeChangerClassName = + typeof showSizeChanger === 'object' + ? showSizeChanger.className + : undefined; + const options = showSizeChangerOptions + ? undefined + : getPageSizeOptions().map((opt, i) => ( + + {mergeBuildOptionText(opt)} + + )); changeSelect = ( From 1525fd658f9415c992fde7066ab11324f61ad1b0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:39:50 +0800 Subject: [PATCH 10/20] update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 70bf064e..bd64bb16 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ ReactDOM.render(, container); | 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 or Object | `false` when the total is less than `totalBoundaryShowSizeChanger`, `true` otherwise, or specify `options` as sizeChanger selections. `showSearch` in the sizeChanger Select component allows searching the size, with the default value being false. `onChange` returns the size change value only through the callback function. The object should be formatted as: `{ options: ['10', '20', '50', '100'], showSearch: false, onChange: Function(size) }`. The value can be either `true/false` or `{ showSearch: false, options:['10', '20', '50', '100'], onChange: (size: number) => void }`. | +| showSizeChanger | show pageSize changer | boolean \| [SelectProps](https://github.com/react-component/select/blob/561f8b7d69fd5dd2cd7d917c88976cca4e539a9d/src/Select.tsx#L112) | `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) | - | @@ -81,3 +81,4 @@ ReactDOM.render(, container); ## License rc-pagination is released under the MIT license. +``` From e52999f30e86f869c89c0bc777583447880b1e9a Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:41:12 +0800 Subject: [PATCH 11/20] update README.md --- README.md | 65 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index bd64bb16..3f5b84d2 100644 --- a/README.md +++ b/README.md @@ -48,37 +48,44 @@ Local example: `npm run start` then `http://localhost:9001` import Pagination from 'rc-pagination'; 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 | -| 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 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 | 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 | | +``` + +## API + +| 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 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 | 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 rc-pagination is released under the MIT license. + +``` + ``` From b55748745f33aedfc1f4e566df26fb6f8845eae4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:41:34 +0800 Subject: [PATCH 12/20] update README.md --- README.md | 59 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 3f5b84d2..63f9d71b 100644 --- a/README.md +++ b/README.md @@ -52,35 +52,36 @@ ReactDOM.render(, container); ## API -| 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 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 | 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 | | +// 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 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 | 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 From 70d46a334bf920f448343d4f51a0b8f5e68ce94f Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:41:43 +0800 Subject: [PATCH 13/20] update README.md --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index 63f9d71b..378b449f 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,3 @@ ReactDOM.render(, container); ## License rc-pagination is released under the MIT license. - -``` - -``` From e16e8b6aa173188738bf991e237d7beebd308a14 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:43:28 +0800 Subject: [PATCH 14/20] fix eslint --- src/Pagination.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Pagination.tsx b/src/Pagination.tsx index 38b8bc7c..1afc48cd 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -63,7 +63,7 @@ const Pagination: React.FC = (props) => { disabled, simple, showTotal, - showSizeChanger: showSizeChangerProp, + showSizeChanger = total > totalBoundaryShowSizeChanger, pageSizeOptions, // render @@ -228,8 +228,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); From 4c0916c5b062fdb12b8c10be732e318169c08041 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 19:59:05 +0800 Subject: [PATCH 15/20] fix eslint --- src/Options.tsx | 13 +++++------ tests/__snapshots__/demo.test.tsx.snap | 6 +++--- tests/options.test.tsx | 27 +++++++++++------------ tests/showSizeChanger.test.tsx | 30 +++++++++++++++++++------- 4 files changed, 45 insertions(+), 31 deletions(-) diff --git a/src/Options.tsx b/src/Options.tsx index bde043d7..83095082 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -121,13 +121,14 @@ const Options: React.FC = (props) => { let gotoButton: React.ReactNode = null; if (showSizeChanger && Select) { - // use showSizeChanger.options if existed, otherwise use pageSizeOptions - const showSizeChangerOptions = - typeof showSizeChanger === 'object' ? showSizeChanger.options : undefined; - const showSizeChangerClassName = + const { + options: showSizeChangerOptions, + className: showSizeChangerClassName, + } = typeof showSizeChanger === 'object' - ? showSizeChanger.className - : undefined; + ? showSizeChanger + : ({} as SelectProps); + // use showSizeChanger.options if existed, otherwise use pageSizeOptions const options = showSizeChangerOptions ? undefined : getPageSizeOptions().map((opt, i) => ( diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 8c8f797b..cab49ac7 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -3169,7 +3169,7 @@ exports[`Example showSizeChanger 1`] = ` >
- 10 条/页 + 10 条每页
diff --git a/tests/options.test.tsx b/tests/options.test.tsx index 715bb959..747644bc 100644 --- a/tests/options.test.tsx +++ b/tests/options.test.tsx @@ -12,6 +12,7 @@ const WrapperOptions: React.FC = (props) => ( pageSize={10} changeSize={jest.fn()} quickGo={jest.fn()} + showSizeChanger {...props} /> ); @@ -22,19 +23,17 @@ describe('Options', () => { expect(container.firstChild).toMatchSnapshot(); }); - describe('props:buildOptionText', () => { - it('should render correctly', () => { - const mockBuildOptionText = jest - .fn() - .mockImplementation((value) => ( -
buildOptionText-{value}
- )); - const { container } = render( - , - ); - const options = container.querySelector('.custom-options'); - expect(options).toBeTruthy(); - expect(options).toHaveTextContent('buildOptionText-10'); - }); + it('props:buildOptionText should render correctly', () => { + const mockBuildOptionText = jest + .fn() + .mockImplementation((value) => ( +
buildOptionText-{value}
+ )); + const { container } = render( + , + ); + const options = container.querySelector('.custom-options'); + expect(options).toBeTruthy(); + expect(options).toHaveTextContent('buildOptionText-10'); }); }); diff --git a/tests/showSizeChanger.test.tsx b/tests/showSizeChanger.test.tsx index a030a3c8..4916ce91 100644 --- a/tests/showSizeChanger.test.tsx +++ b/tests/showSizeChanger.test.tsx @@ -5,6 +5,14 @@ import Pagination from '../src'; const onChange = jest.fn(); +const options = [ + { value: '10', label: '10 条每页' }, + { value: '25', label: '25 条每页' }, + { value: '50', label: '50 条每页' }, + { value: '75', label: '75 条每页' }, + { value: '100', label: '100 条每页' }, +]; + describe('Pagination with showSizeChanger', () => { it('should onChange called when pageSize change', () => { const { container, getByRole } = render( @@ -13,9 +21,9 @@ describe('Pagination with showSizeChanger', () => { total={500} selectComponentClass={Select} showSizeChanger={{ - options: [10, 25, 50, 75, 100], + options, showSearch: false, - onChange: onChange, + onChange, }} />, ); @@ -23,7 +31,7 @@ describe('Pagination with showSizeChanger', () => { expect(select).toBeTruthy(); fireEvent.mouseDown(select); expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( - '50 条/页', + '50 条每页', ); const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; expect(pageSize1).toBeInTheDocument(); @@ -37,15 +45,21 @@ describe('Pagination with showSizeChanger', () => { total={500} selectComponentClass={Select} showSizeChanger={{ - options: [10, 25, 50, 75, 100], + options, showSearch: false, - onChange: onChange, + onChange, }} />, ); - fireEvent.change(container.querySelector('input'), { target: { value: '25' } }); - expect(container.querySelectorAll('.rc-select-item-option-content')).toHaveLength(1); - expect(container.querySelector('.rc-select-item-option-content').textContent).toBe('25 条/页'); + fireEvent.change(container.querySelector('input'), { + target: { value: '25' }, + }); + expect( + container.querySelectorAll('.rc-select-item-option-content'), + ).toHaveLength(1); + expect( + container.querySelector('.rc-select-item-option-content').textContent, + ).toBe('25 条每页'); const pageSize1 = container.querySelector('.rc-select-item-option-content'); expect(pageSize1).toBeInTheDocument(); fireEvent.click(pageSize1); From 66b5c64a8670630aa272673187cdbe0f67f89cda Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 20:28:11 +0800 Subject: [PATCH 16/20] fix test case --- docs/examples/showSizeChanger.tsx | 7 +++---- package.json | 1 + src/Options.tsx | 7 +++++-- tests/showSizeChanger.test.tsx | 28 ++++++++++++++++++---------- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index fd835409..4456d231 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -4,7 +4,7 @@ import Select from 'rc-select'; import '../../assets/index.less'; export default () => { - const pageSizeOnChange = (value) => { + const onPageSizeOnChange = (value) => { console.log(value); }; @@ -32,9 +32,8 @@ export default () => { { value: '25', label: '25 条每页' }, { value: '100', label: '100 条每页' }, ], - className: 'my-select', - showSearch: true, - onChange: pageSizeOnChange, + showSearch: false, + onChange: onPageSizeOnChange, }} /> diff --git a/package.json b/package.json index b7eef013..c8faa806 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "@rc-component/father-plugin": "^1.0.0", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^15.0.4", + "@testing-library/user-event": "^14.5.2", "@types/jest": "^29.2.2", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", diff --git a/src/Options.tsx b/src/Options.tsx index 83095082..6973b568 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -60,8 +60,11 @@ const Options: React.FC = (props) => { ? buildOptionText : (value: string) => `${value} ${locale.items_per_page}`; - const changeSizeHandle = (value: number) => { + const changeSizeHandle = (value: number, option) => { changeSize?.(Number(value)); + if (typeof showSizeChanger === 'object') { + showSizeChanger.onChange?.(value, option); + } }; const handleChange = (e: React.ChangeEvent) => { @@ -145,7 +148,6 @@ const Options: React.FC = (props) => { optionLabelProp={showSizeChangerOptions ? 'label' : 'children'} popupMatchSelectWidth={false} value={(pageSize || pageSizeOptions[0]).toString()} - onChange={changeSizeHandle} getPopupContainer={(triggerNode) => triggerNode.parentNode} aria-label={locale.page_size} defaultOpen={false} @@ -155,6 +157,7 @@ const Options: React.FC = (props) => { showSizeChangerClassName, )} options={showSizeChangerOptions} + onChange={changeSizeHandle} > {options} diff --git a/tests/showSizeChanger.test.tsx b/tests/showSizeChanger.test.tsx index 4916ce91..d76fef38 100644 --- a/tests/showSizeChanger.test.tsx +++ b/tests/showSizeChanger.test.tsx @@ -1,10 +1,9 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import Select from 'rc-select'; import Pagination from '../src'; -const onChange = jest.fn(); - const options = [ { value: '10', label: '10 条每页' }, { value: '25', label: '25 条每页' }, @@ -15,6 +14,7 @@ const options = [ describe('Pagination with showSizeChanger', () => { it('should onChange called when pageSize change', () => { + const onChange = jest.fn(); const { container, getByRole } = render( { selectComponentClass={Select} showSizeChanger={{ options, - showSearch: false, onChange, }} />, @@ -33,12 +32,16 @@ describe('Pagination with showSizeChanger', () => { expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( '50 条每页', ); - const pageSize1 = container.querySelectorAll('.rc-select-item')[0]; - expect(pageSize1).toBeInTheDocument(); + const pageSize1 = container.querySelectorAll('.rc-select-item')[1]; fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalledWith('25', { + label: '25 条每页', + value: '25', + }); }); - it('should onChange called when pageSize change with search', () => { + it('should onChange called when pageSize change with search', async () => { + const onChange = jest.fn(); const { container } = render( { selectComponentClass={Select} showSizeChanger={{ options, - showSearch: false, + showSearch: true, onChange, }} />, ); - fireEvent.change(container.querySelector('input'), { - target: { value: '25' }, - }); + expect(container.querySelector('input').hasAttribute('readOnly')).toBe( + false, + ); + await userEvent.type(container.querySelector('input'), '25'); expect( container.querySelectorAll('.rc-select-item-option-content'), ).toHaveLength(1); @@ -63,5 +67,9 @@ describe('Pagination with showSizeChanger', () => { const pageSize1 = container.querySelector('.rc-select-item-option-content'); expect(pageSize1).toBeInTheDocument(); fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalledWith('25', { + label: '25 条每页', + value: '25', + }); }); }); From ab723a5d12c33dc7ae0f25b194d8ad2cadc47e56 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 20:31:02 +0800 Subject: [PATCH 17/20] fix test case --- docs/examples/showSizeChanger.tsx | 3 +- tests/showSizeChanger.test.tsx | 75 ------------------------------- tests/sizer.test.tsx | 72 +++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+), 76 deletions(-) delete mode 100644 tests/showSizeChanger.test.tsx diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index 4456d231..b086391a 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -32,7 +32,8 @@ export default () => { { value: '25', label: '25 条每页' }, { value: '100', label: '100 条每页' }, ], - showSearch: false, + className: 'my-select', + showSearch: true, onChange: onPageSizeOnChange, }} /> diff --git a/tests/showSizeChanger.test.tsx b/tests/showSizeChanger.test.tsx deleted file mode 100644 index d76fef38..00000000 --- a/tests/showSizeChanger.test.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import Select from 'rc-select'; -import Pagination from '../src'; - -const options = [ - { value: '10', label: '10 条每页' }, - { value: '25', label: '25 条每页' }, - { value: '50', label: '50 条每页' }, - { value: '75', label: '75 条每页' }, - { value: '100', label: '100 条每页' }, -]; - -describe('Pagination with showSizeChanger', () => { - it('should onChange called when pageSize change', () => { - const onChange = jest.fn(); - const { container, getByRole } = render( - , - ); - const select = getByRole('combobox'); - expect(select).toBeTruthy(); - fireEvent.mouseDown(select); - expect(container.querySelectorAll('.rc-select-item')[2]).toHaveTextContent( - '50 条每页', - ); - const pageSize1 = container.querySelectorAll('.rc-select-item')[1]; - fireEvent.click(pageSize1); - expect(onChange).toHaveBeenCalledWith('25', { - label: '25 条每页', - value: '25', - }); - }); - - it('should onChange called when pageSize change with search', async () => { - const onChange = jest.fn(); - const { container } = render( - , - ); - expect(container.querySelector('input').hasAttribute('readOnly')).toBe( - false, - ); - await userEvent.type(container.querySelector('input'), '25'); - expect( - container.querySelectorAll('.rc-select-item-option-content'), - ).toHaveLength(1); - expect( - container.querySelector('.rc-select-item-option-content').textContent, - ).toBe('25 条每页'); - const pageSize1 = container.querySelector('.rc-select-item-option-content'); - expect(pageSize1).toBeInTheDocument(); - fireEvent.click(pageSize1); - expect(onChange).toHaveBeenCalledWith('25', { - label: '25 条每页', - value: '25', - }); - }); -}); diff --git a/tests/sizer.test.tsx b/tests/sizer.test.tsx index b6832ccc..a710e352 100644 --- a/tests/sizer.test.tsx +++ b/tests/sizer.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import Select from 'rc-select'; import Pagination from '../src'; @@ -82,4 +83,75 @@ describe('Pagination with sizer', () => { container.querySelector('.rc-select-selection-item'), ).toHaveTextContent('20 条/页'); }); + + describe('Pagination with showSizeChanger', () => { + const options = [ + { value: '10', label: '10 条每页' }, + { value: '25', label: '25 条每页' }, + { value: '50', label: '50 条每页' }, + { value: '75', label: '75 条每页' }, + { value: '100', label: '100 条每页' }, + ]; + it('should onChange called when pageSize change', () => { + const onChange = jest.fn(); + const { container, getByRole } = render( + , + ); + const select = getByRole('combobox'); + expect(select).toBeTruthy(); + fireEvent.mouseDown(select); + expect( + container.querySelectorAll('.rc-select-item')[2], + ).toHaveTextContent('50 条每页'); + const pageSize1 = container.querySelectorAll('.rc-select-item')[1]; + fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalledWith('25', { + label: '25 条每页', + value: '25', + }); + }); + + it('should onChange called when pageSize change with search', async () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + expect(container.querySelector('input').hasAttribute('readOnly')).toBe( + false, + ); + await userEvent.type(container.querySelector('input'), '25'); + expect( + container.querySelectorAll('.rc-select-item-option-content'), + ).toHaveLength(1); + expect( + container.querySelector('.rc-select-item-option-content').textContent, + ).toBe('25 条每页'); + const pageSize1 = container.querySelector( + '.rc-select-item-option-content', + ); + expect(pageSize1).toBeInTheDocument(); + fireEvent.click(pageSize1); + expect(onChange).toHaveBeenCalledWith('25', { + label: '25 条每页', + value: '25', + }); + }); + }); }); From c6405f301da43657edb852467f3043bd145a3e5e Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 20:36:05 +0800 Subject: [PATCH 18/20] add test case --- tests/sizer.test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/tests/sizer.test.tsx b/tests/sizer.test.tsx index a710e352..1783287c 100644 --- a/tests/sizer.test.tsx +++ b/tests/sizer.test.tsx @@ -92,6 +92,23 @@ describe('Pagination with sizer', () => { { value: '75', label: '75 条每页' }, { value: '100', label: '100 条每页' }, ]; + + it('showSizeChanger.className should be added to select node', async () => { + const { container } = render( + , + ); + const select = container.querySelector('.rc-select'); + expect(select.className).toContain('custom-class-name'); + expect(select.className).toContain('rc-pagination-options-size-changer'); + }); + it('should onChange called when pageSize change', () => { const onChange = jest.fn(); const { container, getByRole } = render( From fbb1ffdd870fed7198c6eacb3811bc8c4d48861d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 20:43:31 +0800 Subject: [PATCH 19/20] add test case --- src/Pagination.tsx | 3 --- tests/sizer.test.tsx | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/Pagination.tsx b/src/Pagination.tsx index 1afc48cd..fd37018b 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -189,9 +189,6 @@ const Pagination: React.FC = (props) => { } function changePageSize(size: number) { - if (!showSizeChanger) { - return; - } const newCurrent = calculatePage(size, pageSize, total); const nextCurrent = current > newCurrent && newCurrent !== 0 ? newCurrent : current; diff --git a/tests/sizer.test.tsx b/tests/sizer.test.tsx index 1783287c..9643c507 100644 --- a/tests/sizer.test.tsx +++ b/tests/sizer.test.tsx @@ -84,7 +84,7 @@ describe('Pagination with sizer', () => { ).toHaveTextContent('20 条/页'); }); - describe('Pagination with showSizeChanger', () => { + describe('showSizeChanger is object', () => { const options = [ { value: '10', label: '10 条每页' }, { value: '25', label: '25 条每页' }, From f4c6b4bca8c3a89bdaff408b4a9426244cd8f586 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 22 Sep 2024 20:46:55 +0800 Subject: [PATCH 20/20] fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 378b449f..43e3062a 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,7 @@ ReactDOM.render(, container); | 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 then `totalBoundaryShowSizeChanger`, `true` when otherwise | +| 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) | - |