From e14f458c851cd4cb4ba03a2788fb1640919c9115 Mon Sep 17 00:00:00 2001 From: Ajit Bamane Date: Mon, 10 Nov 2025 15:43:24 +0000 Subject: [PATCH 1/4] Add option to specify the input type of QuickJumper --- docs/examples/jumper.tsx | 11 +++++++++++ docs/examples/jumperWithGoButton.tsx | 11 ++++++++++- src/Options.tsx | 4 +++- src/Pagination.tsx | 2 ++ src/interface.ts | 7 ++++++- 5 files changed, 32 insertions(+), 3 deletions(-) diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx index 20bd423b..e281a6e1 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -37,6 +37,17 @@ const App = () => ( total={450} disabled /> +

仅输入数字

+

单页默认隐藏

customize node

确定 }} + showQuickJumper={{ + goButton: , + }} defaultPageSize={20} defaultCurrent={5} onShowSizeChange={this.onShowSizeChange} @@ -36,6 +38,13 @@ class App extends React.Component { defaultCurrent={1} total={50} /> +

input only numbers

+ ); } diff --git a/src/Options.tsx b/src/Options.tsx index 9608697c..6aa7bb84 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -27,6 +27,7 @@ interface OptionsProps { buildOptionText?: (value: number | string) => string; showSizeChanger: boolean; sizeChangerRender?: SizeChangerRender; + inputType?: 'text' | 'number'; } const defaultPageSizeOptions = [10, 20, 50, 100]; @@ -44,6 +45,7 @@ const Options: React.FC = (props) => { buildOptionText, showSizeChanger, sizeChangerRender, + inputType = 'text', } = props; const [goInputText, setGoInputText] = React.useState(''); @@ -158,7 +160,7 @@ const Options: React.FC = (props) => { {locale.jump_to} = (props) => { const prevPage = current - 1 > 0 ? current - 1 : 0; const nextPage = current + 1 < allPages ? current + 1 : allPages; const goButton = showQuickJumper && (showQuickJumper as any).goButton; + const inputType = showQuickJumper && (showQuickJumper as any).inputType; // ================== Simple ================== // FIXME: ts type @@ -596,6 +597,7 @@ const Pagination: React.FC = (props) => { selectPrefixCls={selectPrefixCls} changeSize={changePageSize} pageSize={pageSize} + inputType={inputType} pageSizeOptions={pageSizeOptions} quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} diff --git a/src/interface.ts b/src/interface.ts index b37a0788..e9aefbd9 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -20,6 +20,11 @@ export interface PaginationLocale { type SemanticName = 'item'; +type QuickJumperOptions = { + goButton?: boolean | React.ReactNode; + inputType?: 'text' | 'number'; +}; + export interface PaginationData { styles?: Partial>; classNames?: Partial>; @@ -41,7 +46,7 @@ export interface PaginationData { sizeChangerRender?: SizeChangerRender; showLessItems: boolean; showPrevNextJumpers: boolean; - showQuickJumper: boolean | object; + showQuickJumper: boolean | QuickJumperOptions; showTitle: boolean; simple: boolean | { readOnly?: boolean }; disabled: boolean; From b79c60941aee32a1c858f38ac2ca6bfbae0e4b97 Mon Sep 17 00:00:00 2001 From: Ajit Bamane Date: Mon, 10 Nov 2025 16:24:36 +0000 Subject: [PATCH 2/4] Fix tests --- docs/examples/jumper.tsx | 1 - tests/__snapshots__/demo.test.tsx.snap | 259 +++++++++++++++++++++++++ tests/jumper.test.tsx | 40 ++++ 3 files changed, 299 insertions(+), 1 deletion(-) diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx index e281a6e1..773c5497 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -46,7 +46,6 @@ const App = () => ( onShowSizeChange={onShowSizeChange} onChange={onChange} total={450} - disabled />

单页默认隐藏

+

+ 仅输入数字 +

+

单页默认隐藏

@@ -2322,6 +2507,80 @@ exports[`Example jumperWithGoButton 1`] = ` +

+ input only numbers +

+
    +
  • +
    • +
  • + + + / + + 5 +
    • +
  • +
    • +
  • +
    + 跳至 + + 页 + +
  • + +
    • + + + +
`; diff --git a/tests/jumper.test.tsx b/tests/jumper.test.tsx index 39f0f5fe..4f502a17 100644 --- a/tests/jumper.test.tsx +++ b/tests/jumper.test.tsx @@ -271,3 +271,43 @@ describe('simple quick jumper', () => { ).toBeFalsy(); }); }); + +describe('inputType number', () => { + it('should accept only number', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + const quickJumper = container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + fireEvent.change(input, { target: { value: '42' } }); + expect(input.value).toBe('42'); + }); + + it('should not accept non-number', () => { + const onChange = jest.fn(); + const { container } = render( + , + ); + const quickJumper = container.querySelector( + '.rc-pagination-options-quick-jumper', + ); + const input = quickJumper.querySelector('input'); + fireEvent.change(input, { target: { value: 'abc' } }); + expect(input.value).toBe(''); + }); +}); From 258b733f6c49172b05b211eb54fe45093754dd67 Mon Sep 17 00:00:00 2001 From: Ajit Bamane Date: Mon, 10 Nov 2025 16:32:35 +0000 Subject: [PATCH 3/4] Chore: type fix --- src/Pagination.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Pagination.tsx b/src/Pagination.tsx index 05b38496..a72fcd72 100644 --- a/src/Pagination.tsx +++ b/src/Pagination.tsx @@ -344,7 +344,8 @@ const Pagination: React.FC = (props) => { const prevPage = current - 1 > 0 ? current - 1 : 0; const nextPage = current + 1 < allPages ? current + 1 : allPages; const goButton = showQuickJumper && (showQuickJumper as any).goButton; - const inputType = showQuickJumper && (showQuickJumper as any).inputType; + const inputType = + typeof showQuickJumper === 'object' ? showQuickJumper.inputType : undefined; // ================== Simple ================== // FIXME: ts type From 4e891daddb62131e6b015c8a711a1578dc365083 Mon Sep 17 00:00:00 2001 From: Ajit Bamane Date: Tue, 11 Nov 2025 08:08:36 +0000 Subject: [PATCH 4/4] Fix: change input of quick-jumper to number from text --- docs/examples/jumper.tsx | 10 - docs/examples/jumperWithGoButton.tsx | 11 +- src/Options.tsx | 4 +- src/Pagination.tsx | 3 - src/interface.ts | 7 +- tests/__snapshots__/demo.test.tsx.snap | 267 +--------------------- tests/__snapshots__/options.test.tsx.snap | 2 +- tests/__snapshots__/simple.test.tsx.snap | 6 +- tests/jumper.test.tsx | 4 +- 9 files changed, 13 insertions(+), 301 deletions(-) diff --git a/docs/examples/jumper.tsx b/docs/examples/jumper.tsx index 773c5497..20bd423b 100644 --- a/docs/examples/jumper.tsx +++ b/docs/examples/jumper.tsx @@ -37,16 +37,6 @@ const App = () => ( total={450} disabled /> -

仅输入数字

-

单页默认隐藏

customize node

确定, - }} + showQuickJumper={{ goButton: }} defaultPageSize={20} defaultCurrent={5} onShowSizeChange={this.onShowSizeChange} @@ -38,13 +36,6 @@ class App extends React.Component { defaultCurrent={1} total={50} /> -

input only numbers

- ); } diff --git a/src/Options.tsx b/src/Options.tsx index 6aa7bb84..0517c556 100644 --- a/src/Options.tsx +++ b/src/Options.tsx @@ -27,7 +27,6 @@ interface OptionsProps { buildOptionText?: (value: number | string) => string; showSizeChanger: boolean; sizeChangerRender?: SizeChangerRender; - inputType?: 'text' | 'number'; } const defaultPageSizeOptions = [10, 20, 50, 100]; @@ -45,7 +44,6 @@ const Options: React.FC = (props) => { buildOptionText, showSizeChanger, sizeChangerRender, - inputType = 'text', } = props; const [goInputText, setGoInputText] = React.useState(''); @@ -160,7 +158,7 @@ const Options: React.FC = (props) => { {locale.jump_to} = (props) => { const prevPage = current - 1 > 0 ? current - 1 : 0; const nextPage = current + 1 < allPages ? current + 1 : allPages; const goButton = showQuickJumper && (showQuickJumper as any).goButton; - const inputType = - typeof showQuickJumper === 'object' ? showQuickJumper.inputType : undefined; // ================== Simple ================== // FIXME: ts type @@ -598,7 +596,6 @@ const Pagination: React.FC = (props) => { selectPrefixCls={selectPrefixCls} changeSize={changePageSize} pageSize={pageSize} - inputType={inputType} pageSizeOptions={pageSizeOptions} quickGo={shouldDisplayQuickJumper ? handleChange : null} goButton={gotoButton} diff --git a/src/interface.ts b/src/interface.ts index e9aefbd9..b37a0788 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -20,11 +20,6 @@ export interface PaginationLocale { type SemanticName = 'item'; -type QuickJumperOptions = { - goButton?: boolean | React.ReactNode; - inputType?: 'text' | 'number'; -}; - export interface PaginationData { styles?: Partial>; classNames?: Partial>; @@ -46,7 +41,7 @@ export interface PaginationData { sizeChangerRender?: SizeChangerRender; showLessItems: boolean; showPrevNextJumpers: boolean; - showQuickJumper: boolean | QuickJumperOptions; + showQuickJumper: boolean | object; showTitle: boolean; simple: boolean | { readOnly?: boolean }; disabled: boolean; diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index eff3058e..e2952f0a 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -1687,7 +1687,7 @@ exports[`Example jumper 1`] = ` 跳至 页 @@ -1874,191 +1874,6 @@ exports[`Example jumper 1`] = ` - 页 - - - -

- 仅输入数字 -

-
    -
  • -
    • -
  • - - 1 - -
    • -
  • -
    • -
  • - - 3 - -
    • -
  • - - 4 - -
    • -
  • - - 5 - -
    • -
  • - - 6 - -
    • -
  • - - 7 - -
    • -
  • -
    • -
  • - - 23 - -
    • -
  • -
    • -
  • -
    -
    - - - - - - 20 条/页 - - -
    -
    -
    - 跳至 - @@ -2419,7 +2234,7 @@ exports[`Example jumperWithGoButton 1`] = ` 跳至 页 @@ -2436,80 +2251,6 @@ exports[`Example jumperWithGoButton 1`] = `

    default node

    -
      -
    • -
      • -
    • - - - / - - 5 -
      • -
    • -
      • -
    • -
      - 跳至 - - 页 - -
    • - -
      • - -
    -
    • -
-

- input only numbers -

    @@ -3035,7 +2776,7 @@ exports[`Example locale 1`] = ` Go to Page @@ -4279,7 +4020,7 @@ exports[`Example simple 1`] = ` 跳至 页 diff --git a/tests/__snapshots__/options.test.tsx.snap b/tests/__snapshots__/options.test.tsx.snap index c241a318..c2362d7d 100644 --- a/tests/__snapshots__/options.test.tsx.snap +++ b/tests/__snapshots__/options.test.tsx.snap @@ -50,7 +50,7 @@ exports[`Options should render correctly 1`] = ` 跳至 页 diff --git a/tests/__snapshots__/simple.test.tsx.snap b/tests/__snapshots__/simple.test.tsx.snap index f2bcb51a..5a459978 100644 --- a/tests/__snapshots__/simple.test.tsx.snap +++ b/tests/__snapshots__/simple.test.tsx.snap @@ -7,7 +7,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j 跳至 页 @@ -21,7 +21,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j 跳至 页 @@ -49,7 +49,7 @@ exports[`simple Pagination props: showQuickJumper should render normally quick-j 跳至 页 diff --git a/tests/jumper.test.tsx b/tests/jumper.test.tsx index 4f502a17..ae01ee6a 100644 --- a/tests/jumper.test.tsx +++ b/tests/jumper.test.tsx @@ -51,7 +51,7 @@ describe('Pagination with jumper', () => { relatedTarget.className = 'rc-pagination-item-link'; fireEvent.blur(input, { relatedTarget }); - expect(input).toHaveValue(''); + expect(input).toHaveValue(null); expect(onChange).not.toHaveBeenCalled(); }); @@ -64,7 +64,7 @@ describe('Pagination with jumper', () => { relatedTarget.className = 'rc-pagination-item'; fireEvent.blur(input, { relatedTarget }); - expect(input).toHaveValue(''); + expect(input).toHaveValue(null); expect(onChange).not.toHaveBeenCalled(); });