From cb56b9715a1bb2d11ed51702e57fd71a216aba91 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 15:10:57 +0800 Subject: [PATCH 01/12] chore: init docs --- docs/examples/utils/commonUtil.tsx | 40 ++++++++ src/{Options.tsx => Options/index.tsx} | 137 +++++++++++++++---------- src/Pagination.tsx | 6 +- src/interface.ts | 7 +- 4 files changed, 133 insertions(+), 57 deletions(-) create mode 100644 docs/examples/utils/commonUtil.tsx rename src/{Options.tsx => Options/index.tsx} (58%) diff --git a/docs/examples/utils/commonUtil.tsx b/docs/examples/utils/commonUtil.tsx new file mode 100644 index 00000000..81b634b3 --- /dev/null +++ b/docs/examples/utils/commonUtil.tsx @@ -0,0 +1,40 @@ +import type { PaginationProps } from 'rc-pagination'; +import Pagination from 'rc-pagination'; +import Select from 'rc-select'; +import React from 'react'; + +export const sizeChangerRender: PaginationProps['sizeChangerRender'] = ({ + disabled, + size: pageSize, + onSizeChange, + 'aria-label': ariaLabel, + className, + options, +}) => { + return ( + 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..343a4820 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 @@ -33,7 +33,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 +46,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; From 855b3148c0f5b0f13cae9fbc1da62a21aa3136b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 15:16:11 +0800 Subject: [PATCH 02/12] docs: all cover --- docs/examples/jumper.tsx | 17 ++++++------ docs/examples/jumperWithGoButton.tsx | 5 ++-- docs/examples/locale.tsx | 5 ++-- docs/examples/showSizeChanger.tsx | 23 ++++++++-------- docs/examples/simple.tsx | 9 ++++--- docs/examples/sizer.tsx | 17 ++++++------ docs/examples/utils/commonUtil.tsx | 39 +++++++++++++++++----------- 7 files changed, 65 insertions(+), 50 deletions(-) diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx index 182c195b..7f9a2800 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -4,6 +4,7 @@ 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 +19,8 @@ function onChange(current, pageSize) { const App = () => ( <>

默认

- ( total={450} />

禁用

- ( disabled />

单页默认隐藏

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

customize node

- 确定 }} defaultPageSize={20} diff --git a/docs/examples/locale.tsx b/docs/examples/locale.tsx index c48e93b8..3bb2624e 100644 --- a/docs/examples/locale.tsx +++ b/docs/examples/locale.tsx @@ -5,6 +5,7 @@ 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 +18,8 @@ function onChange(current, pageSize) { } const App = () => ( - { const onPageSizeOnChange = (value) => { @@ -10,31 +11,31 @@ export default () => { return ( <> - - - diff --git a/docs/examples/simple.tsx b/docs/examples/simple.tsx index beeba080..df15c487 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import Pagination from 'rc-pagination'; import Select from 'rc-select'; import '../../assets/index.less'; +import PaginationWithSizeChanger from './utils/commonUtil'; export default () => { const [pageIndex, setPageIndex] = useState(1); @@ -32,24 +33,24 @@ export default () => { showTotal={(total) => `Total ${total} items`} />
-
Antd #46671 - ); diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx index 19212bc2..0d462080 100644 --- a/docs/examples/sizer.tsx +++ b/docs/examples/sizer.tsx @@ -4,6 +4,7 @@ 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 +20,30 @@ class App extends React.Component { const { pageSize } = this.state; return (
- - - - { - return ( +export const getSizeChangerRender = (selectProps?: any) => { + const render: PaginationProps['sizeChangerRender'] = ({ + disabled, + size: pageSize, + onSizeChange, + 'aria-label': ariaLabel, + className, + options, + }) => ( triggerNode.parentNode} + aria-label={ariaLabel} + defaultOpen={false} + className={className} + options={options} + onChange={onSizeChange} + /> +); diff --git a/tests/index.test.tsx b/tests/index.test.tsx index c56ffb36..7f5c8e12 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -4,6 +4,7 @@ import Select from 'rc-select'; import React from 'react'; import Pagination from '../src'; import { resetWarned } from 'rc-util/lib/warning'; +import { sizeChangerRender } from './commonUtil'; describe('Default Pagination', () => { let wrapper: RenderResult; @@ -339,7 +340,8 @@ describe('Other props', () => { it('disabled', () => { const { container, getByRole } = render( { beforeEach(() => { wrapper = render( { it('size changer show logic', () => { const wrapper1 = render( - , + , ); expect( wrapper1.container.querySelector('.rc-pagination-options-size-changer'), ).toBeFalsy(); const wrapper2 = render( - , + , ); expect( wrapper2.container.querySelector('.rc-pagination-options-size-changer'), ).toBeTruthy(); const wrapper3 = render( , @@ -447,7 +459,12 @@ describe('current value on onShowSizeChange when total is 0', () => { wrapper3.container.querySelector('.rc-pagination-options-size-changer'), ).toBeFalsy(); const wrapper4 = render( - , + , ); expect( wrapper4.container.querySelector('.rc-pagination-options-size-changer'), @@ -457,7 +474,8 @@ describe('current value on onShowSizeChange when total is 0', () => { it('totalBoundaryShowSizeChanger works', () => { const wrapper1 = render( , @@ -467,7 +485,8 @@ describe('current value on onShowSizeChange when total is 0', () => { ).toBeFalsy(); const wrapper2 = render( , @@ -477,7 +496,8 @@ describe('current value on onShowSizeChange when total is 0', () => { ).toBeTruthy(); const wrapper3 = render( { ).toBeFalsy(); const wrapper4 = render( >>', React); +console.log('Pagination >>>', Pagination); +console.log('Select >>>', Select); +process.exit(0); + describe('simple Pagination', () => { let wrapper: RenderResult; From 81c01e0ae5e8ef85a12f716029eb54292501ce40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 15:55:12 +0800 Subject: [PATCH 04/12] test: fix test --- docs/examples/utils/commonUtil.tsx | 2 +- src/{Options/index.tsx => Options.tsx} | 22 +-- tests/commonUtil.tsx | 2 +- tests/sizer.test.tsx | 184 +++++++++++++------------ 4 files changed, 108 insertions(+), 102 deletions(-) rename src/{Options/index.tsx => Options.tsx} (94%) diff --git a/docs/examples/utils/commonUtil.tsx b/docs/examples/utils/commonUtil.tsx index 5dddc0bf..4497a32b 100644 --- a/docs/examples/utils/commonUtil.tsx +++ b/docs/examples/utils/commonUtil.tsx @@ -19,7 +19,7 @@ export const getSizeChangerRender = (selectProps?: any) => { // optionLabelProp={showSizeChangerOptions ? 'label' : 'children'} // popupMatchSelectWidth={false} dropdownMatchSelectWidth={false} - value={(pageSize || options[0].value).toString()} + value={pageSize || options[0].value} getPopupContainer={(triggerNode) => triggerNode.parentNode} aria-label={ariaLabel} defaultOpen={false} diff --git a/src/Options/index.tsx b/src/Options.tsx similarity index 94% rename from src/Options/index.tsx rename to src/Options.tsx index 38d2349e..54cb784f 100644 --- a/src/Options/index.tsx +++ b/src/Options.tsx @@ -1,16 +1,16 @@ -import type { SelectProps } from 'rc-select'; -import type { OptionProps } from 'rc-select/es/Option'; +// 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 classNames from 'classnames'; import React from 'react'; -import type { PaginationLocale, PaginationProps } from '../interface'; - -interface InternalSelectProps extends SelectProps { - /** - * form antd v5.5.0, popupMatchSelectWidth default is true - */ - popupMatchSelectWidth?: boolean; -} +import type { PaginationLocale } from './interface'; + +// interface InternalSelectProps extends SelectProps { +// /** +// * form antd v5.5.0, popupMatchSelectWidth default is true +// */ +// popupMatchSelectWidth?: boolean; +// } export type SizeChangerRender = (info: { disabled: boolean; diff --git a/tests/commonUtil.tsx b/tests/commonUtil.tsx index 77c06531..7788d5ff 100644 --- a/tests/commonUtil.tsx +++ b/tests/commonUtil.tsx @@ -14,7 +14,7 @@ export const sizeChangerRender: PaginationProps['sizeChangerRender'] = ({ disabled={disabled} showSearch={false} dropdownMatchSelectWidth={false} - value={(pageSize || options[0].value).toString()} + value={pageSize || options[0].value} getPopupContainer={(triggerNode) => triggerNode.parentNode} aria-label={ariaLabel} defaultOpen={false} diff --git a/tests/sizer.test.tsx b/tests/sizer.test.tsx index 9643c507..fd70b71a 100644 --- a/tests/sizer.test.tsx +++ b/tests/sizer.test.tsx @@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Select from 'rc-select'; import Pagination from '../src'; +import { sizeChangerRender } from './commonUtil'; describe('Pagination with sizer', () => { it('should merge custom pageSize to pageSizeOptions', () => { @@ -11,7 +12,8 @@ describe('Pagination with sizer', () => { total={500} pageSize={15} showSizeChanger - selectComponentClass={Select} + // selectComponentClass={Select} + sizeChangerRender={sizeChangerRender} />, ); const select = getByRole('combobox'); @@ -26,7 +28,8 @@ describe('Pagination with sizer', () => { total={500} pageSize={20} showSizeChanger - selectComponentClass={Select} + // selectComponentClass={Select} + sizeChangerRender={sizeChangerRender} />, ); fireEvent.mouseDown(getByRole('combobox')); @@ -39,7 +42,8 @@ describe('Pagination with sizer', () => { total={500} pageSize={45} showSizeChanger - selectComponentClass={Select} + // selectComponentClass={Select} + sizeChangerRender={sizeChangerRender} />, ); fireEvent.mouseDown(getByRole('combobox')); @@ -53,7 +57,8 @@ describe('Pagination with sizer', () => { const onChange = jest.fn(); const { container, getByRole } = render( { it('should contains locale text in selected pageSize when pageSizeOptions are numbers', () => { const { container } = render( { ).toHaveTextContent('20 条/页'); }); - describe('showSizeChanger is object', () => { - const options = [ - { value: '10', label: '10 条每页' }, - { value: '25', label: '25 条每页' }, - { value: '50', label: '50 条每页' }, - { value: '75', label: '75 条每页' }, - { value: '100', label: '100 条每页' }, - ]; + // describe('showSizeChanger is object', () => { + // const options = [ + // { value: '10', label: '10 条每页' }, + // { value: '25', label: '25 条每页' }, + // { value: '50', label: '50 条每页' }, + // { 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('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( - , - ); - 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', () => { + // 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', - }); - }); - }); + // 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 2f17ec67f4aa8da18e86e3815f0d556b96f69817 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 16:03:57 +0800 Subject: [PATCH 05/12] fix: type --- src/Options.tsx | 10 +++++----- src/interface.ts | 3 ++- tests/commonUtil.tsx | 30 ++++++++++++++++-------------- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/Options.tsx b/src/Options.tsx index 54cb784f..cc29ccd4 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -30,11 +30,11 @@ interface OptionsProps { rootPrefixCls: string; selectPrefixCls?: string; pageSize: number; - pageSizeOptions?: (string | number)[]; + pageSizeOptions?: number[]; goButton?: boolean | string; changeSize?: (size: number) => void; quickGo?: (value: number) => void; - buildOptionText?: (value: string | number) => string; + buildOptionText?: (value: number) => string; // selectComponentClass: React.ComponentType> & { // Option?: React.ComponentType>; // }; @@ -43,7 +43,7 @@ interface OptionsProps { sizeChangerRender?: SizeChangerRender; } -const defaultPageSizeOptions = ['10', '20', '50', '100']; +const defaultPageSizeOptions = [10, 20, 50, 100]; const Options: React.FC = (props) => { const { @@ -73,7 +73,7 @@ const Options: React.FC = (props) => { const mergeBuildOptionText = typeof buildOptionText === 'function' ? buildOptionText - : (value: string) => `${value} ${locale.items_per_page}`; + : (value: number) => `${value} ${locale.items_per_page}`; // const changeSizeHandle = (value: number, option) => { // changeSize?.(Number(value)); @@ -119,7 +119,7 @@ const Options: React.FC = (props) => { ) { return pageSizeOptions; } - return pageSizeOptions.concat([pageSize.toString()]).sort((a, b) => { + return pageSizeOptions.concat([pageSize]).sort((a, b) => { const numberA = Number.isNaN(Number(a)) ? 0 : Number(a); const numberB = Number.isNaN(Number(b)) ? 0 : Number(b); return numberA - numberB; diff --git a/src/interface.ts b/src/interface.ts index 343a4820..37ce71fa 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -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; diff --git a/tests/commonUtil.tsx b/tests/commonUtil.tsx index 7788d5ff..7ab44a23 100644 --- a/tests/commonUtil.tsx +++ b/tests/commonUtil.tsx @@ -9,17 +9,19 @@ export const sizeChangerRender: PaginationProps['sizeChangerRender'] = ({ 'aria-label': ariaLabel, className, options, -}) => ( - triggerNode.parentNode} + aria-label={ariaLabel} + defaultOpen={false} + className={className} + options={options} + onChange={onSizeChange} + /> + ); +}; From 3d67bc2725fd322ac94a27b44fe734c7c16209a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 16:08:27 +0800 Subject: [PATCH 06/12] test: fix test --- src/Options.tsx | 4 ++-- tests/simple.test.tsx | 14 ++++++-------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/Options.tsx b/src/Options.tsx index cc29ccd4..6efe6930 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -34,7 +34,7 @@ interface OptionsProps { goButton?: boolean | string; changeSize?: (size: number) => void; quickGo?: (value: number) => void; - buildOptionText?: (value: number) => string; + buildOptionText?: (value: number | string) => string; // selectComponentClass: React.ComponentType> & { // Option?: React.ComponentType>; // }; @@ -73,7 +73,7 @@ const Options: React.FC = (props) => { const mergeBuildOptionText = typeof buildOptionText === 'function' ? buildOptionText - : (value: number) => `${value} ${locale.items_per_page}`; + : (value: string | number) => `${value} ${locale.items_per_page}`; // const changeSizeHandle = (value: number, option) => { // changeSize?.(Number(value)); diff --git a/tests/simple.test.tsx b/tests/simple.test.tsx index 8a18291f..36b493df 100644 --- a/tests/simple.test.tsx +++ b/tests/simple.test.tsx @@ -3,11 +3,7 @@ import { render, fireEvent, createEvent } from '@testing-library/react'; import Select from 'rc-select'; import React, { useState } from 'react'; import Pagination from '../src'; - -console.log('React >>>', React); -console.log('Pagination >>>', Pagination); -console.log('Select >>>', Select); -process.exit(0); +import { sizeChangerRender } from './commonUtil'; describe('simple Pagination', () => { let wrapper: RenderResult; @@ -110,7 +106,8 @@ describe('simple Pagination', () => { total={500} pageSize={15} showSizeChanger - selectComponentClass={Select} + // selectComponentClass={Select} + sizeChangerRender={sizeChangerRender} />, ); fireEvent.mouseDown(getByRole('combobox')); @@ -122,7 +119,8 @@ describe('simple Pagination', () => { const { container, getByRole } = render( { return (
- + Date: Tue, 10 Dec 2024 16:23:27 +0800 Subject: [PATCH 07/12] chore: update demo --- docs/examples/align.tsx | 2 +- docs/examples/basic.tsx | 2 +- docs/examples/controlled.tsx | 2 +- docs/examples/itemRender.tsx | 2 +- docs/examples/jumper.tsx | 2 -- docs/examples/jumperWithGoButton.tsx | 3 +-- docs/examples/lessPages.tsx | 2 +- docs/examples/locale.tsx | 2 -- docs/examples/more.tsx | 2 +- docs/examples/showSizeChanger.tsx | 2 -- docs/examples/showTitle.tsx | 2 +- docs/examples/showTotal.tsx | 2 +- docs/examples/simple.tsx | 3 +-- docs/examples/sizer.tsx | 6 ++---- docs/examples/styles.tsx | 2 +- docs/examples/utils/commonUtil.tsx | 2 +- 16 files changed, 14 insertions(+), 24 deletions(-) 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 7f9a2800..24202353 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -1,7 +1,5 @@ /* 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'; diff --git a/docs/examples/jumperWithGoButton.tsx b/docs/examples/jumperWithGoButton.tsx index 2b1a0462..f63a519f 100644 --- a/docs/examples/jumperWithGoButton.tsx +++ b/docs/examples/jumperWithGoButton.tsx @@ -1,7 +1,6 @@ /* eslint func-names: 0, no-console: 0 */ import React from 'react'; -import Select from 'rc-select'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; import PaginationWithSizeChanger from './utils/commonUtil'; 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 3bb2624e..61490186 100644 --- a/docs/examples/locale.tsx +++ b/docs/examples/locale.tsx @@ -1,7 +1,5 @@ /* 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'; diff --git a/docs/examples/more.tsx b/docs/examples/more.tsx index b8f3039c..2c0937ea 100644 --- a/docs/examples/more.tsx +++ b/docs/examples/more.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/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index cada21a9..8015f9e4 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -1,6 +1,4 @@ import React from 'react'; -import Pagination from 'rc-pagination'; -import Select from 'rc-select'; import '../../assets/index.less'; import PaginationWithSizeChanger from './utils/commonUtil'; 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 df15c487..f0c9faf5 100644 --- a/docs/examples/simple.tsx +++ b/docs/examples/simple.tsx @@ -1,6 +1,5 @@ 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'; diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx index 0d462080..82ff7a52 100644 --- a/docs/examples/sizer.tsx +++ b/docs/examples/sizer.tsx @@ -1,7 +1,5 @@ /* 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'; @@ -28,7 +26,7 @@ class App extends React.Component { defaultCurrent={3} total={40} /> - + /> */}
); } diff --git a/docs/examples/styles.tsx b/docs/examples/styles.tsx index e05597dc..fa85c714 100644 --- a/docs/examples/styles.tsx +++ b/docs/examples/styles.tsx @@ -1,6 +1,6 @@ import '../../assets/index.less'; import React from 'react'; -import Pagination from 'rc-pagination'; +import Pagination from '../../src'; export default () => ( diff --git a/docs/examples/utils/commonUtil.tsx b/docs/examples/utils/commonUtil.tsx index 4497a32b..b40ec64f 100644 --- a/docs/examples/utils/commonUtil.tsx +++ b/docs/examples/utils/commonUtil.tsx @@ -1,5 +1,5 @@ import type { PaginationProps } from 'rc-pagination'; -import Pagination from 'rc-pagination'; +import Pagination from '../../../src'; import Select from 'rc-select'; import React from 'react'; From ea35405c73d9a8bc8f51c8443c5d87b3e4446e0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 16:25:33 +0800 Subject: [PATCH 08/12] docs: back --- docs/examples/sizer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/examples/sizer.tsx b/docs/examples/sizer.tsx index 82ff7a52..f60f0330 100644 --- a/docs/examples/sizer.tsx +++ b/docs/examples/sizer.tsx @@ -26,7 +26,7 @@ class App extends React.Component { defaultCurrent={3} total={40} /> - {/* */} + />
); } From 253d9aae11418ccf25d0fd7a69d27602ddb72aba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 16:32:26 +0800 Subject: [PATCH 09/12] test: fix test --- docs/examples/showSizeChanger.tsx | 8 ++-- tests/__snapshots__/demo.test.tsx.snap | 57 ++++---------------------- 2 files changed, 12 insertions(+), 53 deletions(-) diff --git a/docs/examples/showSizeChanger.tsx b/docs/examples/showSizeChanger.tsx index 8015f9e4..ff9059fc 100644 --- a/docs/examples/showSizeChanger.tsx +++ b/docs/examples/showSizeChanger.tsx @@ -23,13 +23,13 @@ export default () => { />
  • @@ -3109,58 +3109,14 @@ exports[`Example showSizeChanger 1`] = `
  • - - 2 - -
    • -
  • - - 3 - -
    • -
  • - - 4 - -
    • -
  • - - 5 - -
    • -
    • @@ -3169,7 +3125,7 @@ exports[`Example showSizeChanger 1`] = ` >
    From 780415db4982c1eca3f5cdd5a80708db14eb9bc9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 10 Dec 2024 16:33:56 +0800 Subject: [PATCH 10/12] test: fix test --- tests/options.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/tests/options.test.tsx b/tests/options.test.tsx index 747644bc..97abb9d4 100644 --- a/tests/options.test.tsx +++ b/tests/options.test.tsx @@ -1,14 +1,16 @@ import { render } from '@testing-library/react'; -import Select from 'rc-select'; +// import Select from 'rc-select'; import zhCN from '../src/locale/zh_CN'; import Options from '../src/Options'; import * as React from 'react'; +import { sizeChangerRender } from './commonUtil'; const WrapperOptions: React.FC = (props) => ( Date: Tue, 10 Dec 2024 16:38:39 +0800 Subject: [PATCH 11/12] chore: fix lint --- tests/two-pagination.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/tests/two-pagination.tsx b/tests/two-pagination.tsx index 4e2e4f11..f439f6f2 100644 --- a/tests/two-pagination.tsx +++ b/tests/two-pagination.tsx @@ -1,7 +1,7 @@ // import 'rc-select/assets/index.less'; -import Select from 'rc-select'; import React from 'react'; import Pagination from '../src'; +import { sizeChangerRender } from './commonUtil'; class Hello extends React.Component { state = { @@ -22,7 +22,8 @@ class Hello extends React.Component { Date: Tue, 10 Dec 2024 16:43:29 +0800 Subject: [PATCH 12/12] test: update snapshot --- package.json | 2 +- tests/__snapshots__/demo.test.tsx.snap | 626 ++++++++++++---------- tests/__snapshots__/options.test.tsx.snap | 52 +- 3 files changed, 366 insertions(+), 314 deletions(-) diff --git a/package.json b/package.json index 57822d99..5c6bfae0 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "lint-staged": "^15.0.2", "np": "^10.0.5", "prettier": "^3.1.0", - "rc-select": "^14.1.2", + "rc-select": "^14.16.4", "rc-test": "^7.0.15", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index d75a41b6..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 条/页 + @@ -3131,31 +3159,35 @@ exports[`Example showSizeChanger 1`] = ` class="rc-select-selector" > - - - - 10 条每页 + + + + + 10 条每页 + @@ -3851,31 +3883,35 @@ exports[`Example simple 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -3940,31 +3976,35 @@ exports[`Example simple 1`] = ` class="rc-select-selector" > - - - - 10 条/页 + + + + + 10 条/页 + @@ -4060,31 +4100,35 @@ exports[`Example sizer 1`] = ` class="rc-select-selector" > - - - - 15 条/页 + + + + + 15 条/页 + @@ -4244,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 条/页 +