From 1784380c336dc27e719387cf5259f47152bf2081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Tue, 10 Dec 2024 16:47:04 +0800 Subject: [PATCH] feat: Add `sizeChangerRender` instead of `selectComponentClass` (#631) * chore: init docs * docs: all cover * test: fix index test * test: fix test * fix: type * test: fix test * chore: update demo * docs: back * test: fix test * test: fix test * chore: fix lint * test: update snapshot --- docs/examples/align.tsx | 2 +- docs/examples/basic.tsx | 2 +- docs/examples/controlled.tsx | 2 +- docs/examples/itemRender.tsx | 2 +- docs/examples/jumper.tsx | 19 +- docs/examples/jumperWithGoButton.tsx | 8 +- docs/examples/lessPages.tsx | 2 +- docs/examples/locale.tsx | 7 +- docs/examples/more.tsx | 2 +- docs/examples/showSizeChanger.tsx | 31 +- docs/examples/showTitle.tsx | 2 +- docs/examples/showTotal.tsx | 2 +- docs/examples/simple.tsx | 12 +- docs/examples/sizer.tsx | 19 +- docs/examples/styles.tsx | 2 +- docs/examples/utils/commonUtil.tsx | 49 ++ jest.config.js | 2 - package.json | 2 +- src/Options.tsx | 167 +++--- src/Pagination.tsx | 6 +- src/interface.ts | 10 +- tests/__snapshots__/demo.test.tsx.snap | 677 +++++++++++----------- tests/__snapshots__/options.test.tsx.snap | 52 +- tests/commonUtil.tsx | 27 + tests/index.test.tsx | 41 +- tests/options.test.tsx | 6 +- tests/simple.test.tsx | 9 +- tests/sizer.test.tsx | 184 +++--- tests/two-pagination.tsx | 8 +- 29 files changed, 753 insertions(+), 601 deletions(-) create mode 100644 docs/examples/utils/commonUtil.tsx create mode 100644 tests/commonUtil.tsx diff --git a/docs/examples/align.tsx b/docs/examples/align.tsx index c902114d..609e725c 100644 --- a/docs/examples/align.tsx +++ b/docs/examples/align.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/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..24202353 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,8 @@ function onChange(current, pageSize) { const App = () => ( <>

默认

- ( total={450} />

禁用

- ( disabled />

单页默认隐藏

- ( total={8} />
- { @@ -20,8 +20,8 @@ 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..61490186 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,8 @@ function onChange(current, pageSize) { } const App = () => ( - ( diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index b086391a..ff9059fc 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -1,7 +1,6 @@ import React from 'react'; -import Pagination from 'rc-pagination'; -import Select from 'rc-select'; import '../../assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; export default () => { const onPageSizeOnChange = (value) => { @@ -10,31 +9,31 @@ export default () => { 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 beeba080..f0c9faf5 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); @@ -32,24 +32,24 @@ export default () => { showTotal={(total) => `Total ${total} items`} />
-
Antd #46671 - ); diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx index 19212bc2..f60f0330 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,30 @@ 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..b40ec64f --- /dev/null +++ b/docs/examples/utils/commonUtil.tsx @@ -0,0 +1,49 @@ +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} - {...(typeof showSizeChanger === 'object' ? showSizeChanger : null)} - className={classNames( - `${prefixCls}-size-changer`, - showSizeChangerClassName, - )} - options={showSizeChangerOptions} - onChange={changeSizeHandle} - > - {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, + })), + }); } + // if (showSizeChanger && Select) { + // const { + // options: showSizeChangerOptions, + // className: showSizeChangerClassName, + // } = + // typeof showSizeChanger === 'object' + // ? showSizeChanger + // : ({} as SelectProps); + // // use showSizeChanger.options if existed, otherwise use pageSizeOptions + // const options = showSizeChangerOptions + // ? undefined + // : getPageSizeOptions().map((opt, i) => ( + // + // {mergeBuildOptionText(opt)} + // + // )); + + // changeSelect = ( + // + // ); + // } + + // >>>>> Quick Go if (quickGo) { if (goButton) { gotoButton = diff --git a/src/Pagination.tsx b/src/Pagination.tsx index fd37018b..410d96c4 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -39,7 +39,7 @@ const Pagination: React.FC = (props) => { prefixCls = 'rc-pagination', selectPrefixCls = 'rc-select', className, - selectComponentClass, + // selectComponentClass, // control current: currentProp, @@ -64,6 +64,7 @@ const Pagination: React.FC = (props) => { simple, showTotal, showSizeChanger = total > totalBoundaryShowSizeChanger, + sizeChangerRender, pageSizeOptions, // render @@ -582,7 +583,7 @@ const Pagination: React.FC = (props) => { locale={locale} rootPrefixCls={prefixCls} disabled={disabled} - selectComponentClass={selectComponentClass} + // selectComponentClass={selectComponentClass} selectPrefixCls={selectPrefixCls} changeSize={changePageSize} pageSize={pageSize} @@ -590,6 +591,7 @@ const Pagination: React.FC = (props) => { quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} showSizeChanger={showSizeChanger} + sizeChangerRender={sizeChangerRender} /> ); diff --git a/src/interface.ts b/src/interface.ts index 6a1d60d3..37ce71fa 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -1,5 +1,5 @@ import type React from 'react'; -import type { SelectProps } from 'rc-select'; +import type { SizeChangerRender } from './Options'; export interface PaginationLocale { // Options @@ -22,7 +22,8 @@ export interface PaginationData { className: string; selectPrefixCls: string; prefixCls: string; - pageSizeOptions: string[] | number[]; + // pageSizeOptions: string[] | number[]; + pageSizeOptions: number[]; current: number; defaultCurrent: number; @@ -33,7 +34,8 @@ export interface PaginationData { hideOnSinglePage: boolean; align: 'start' | 'center' | 'end'; - showSizeChanger: boolean | SelectProps; + showSizeChanger: boolean; + sizeChangerRender?: SizeChangerRender; showLessItems: boolean; showPrevNextJumpers: boolean; showQuickJumper: boolean | object; @@ -45,7 +47,7 @@ export interface PaginationData { style: React.CSSProperties; - selectComponentClass: React.ComponentType; + // selectComponentClass: React.ComponentType; prevIcon: React.ComponentType | React.ReactNode; nextIcon: React.ComponentType | React.ReactNode; jumpPrevIcon: React.ComponentType | React.ReactNode; diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index cab49ac7..4ed03894 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -1649,31 +1649,35 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 20 条/页 + + + + + 20 条/页 +
@@ -1830,32 +1834,36 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 20 条/页 + + + + + 20 条/页 + @@ -1925,31 +1933,35 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -2005,31 +2017,35 @@ exports[`Example jumper 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -2180,31 +2196,35 @@ exports[`Example jumperWithGoButton 1`] = ` class="rc-select-selector" > - - - - 20 条/页 + + + + + 20 条/页 + @@ -2717,31 +2737,35 @@ exports[`Example locale 1`] = ` class="rc-select-selector" > - - - - 20 / page + + + + + 20 / page + @@ -3052,31 +3076,35 @@ exports[`Example showSizeChanger 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -3098,7 +3126,7 @@ exports[`Example showSizeChanger 1`] = ` />
  • @@ -3109,58 +3137,14 @@ exports[`Example showSizeChanger 1`] = `
  • - - 2 - -
    • -
  • - - 3 - -
    • -
  • - - 4 - -
    • -
  • - - 5 - -
    • -
    • @@ -3169,34 +3153,41 @@ exports[`Example showSizeChanger 1`] = ` >
    - - - - 10 条每页 + + + + + 10 条每页 +
    @@ -3892,31 +3883,35 @@ exports[`Example simple 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -3981,31 +3976,35 @@ exports[`Example simple 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -4101,31 +4100,35 @@ exports[`Example sizer 1`] = ` class="rc-select-selector" > - - - - 15 条/页 + + + + + 15 条/页 + @@ -4285,31 +4288,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/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 ( +