From 6b861f48a5c29e6533a8d45a193bb5a9105b3801 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 28 Apr 2022 13:09:30 +0800 Subject: [PATCH 1/2] fix: blur goto input should came back to `1` close https://github.com/ant-design/ant-design/issues/35118 --- docs/examples/default.jsx | 36 ++++++++++++++---------------------- src/Pagination.jsx | 31 +++++++++++++++---------------- tests/simple.test.js | 26 +++++++++++++++++++++++++- 3 files changed, 54 insertions(+), 39 deletions(-) diff --git a/docs/examples/default.jsx b/docs/examples/default.jsx index 02e9eecb..daa1dc1b 100644 --- a/docs/examples/default.jsx +++ b/docs/examples/default.jsx @@ -1,28 +1,20 @@ -/* eslint func-names: 0, no-console: 0 */ -import React from 'react'; +import React, { useState } from 'react'; import Pagination from 'rc-pagination'; import '../../assets/index.less'; import 'rc-select/assets/index.less'; -export default class App extends React.Component { - state = { - current: 3, +const App = () => { + const [current, setCurrent] = useState(1); + const onChange = page => { + setCurrent(page); }; + return ( + + ); +}; - onChange = page => { - console.log(page); - this.setState({ - current: page, - }); - }; - - render() { - return ( - - ); - } -} +export default App; \ No newline at end of file diff --git a/src/Pagination.jsx b/src/Pagination.jsx index c6a6fd4f..895b3b44 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -253,32 +253,31 @@ class Pagination extends React.Component { } }; - handleChange = (p) => { - const { disabled } = this.props; - - let page = p; + handleChange = (page) => { + const { disabled, onChange } = this.props; + const { pageSize, current, currentInputValue } = this.state; if (this.isValid(page) && !disabled) { const currentPage = calculatePage(undefined, this.state, this.props); + let newPage = page; if (page > currentPage) { - page = currentPage; + newPage = currentPage; } else if (page < 1) { - page = 1; + newPage = 1; } - if (!('current' in this.props)) { this.setState({ - current: page, - currentInputValue: page, + current: newPage, }); } - - const { pageSize } = this.state; - this.props.onChange(page, pageSize); - - return page; + if (newPage !== currentInputValue) { + this.setState({ + currentInputValue: newPage, + }); + } + onChange(newPage, pageSize); + return newPage; } - - return this.state.current; + return current; }; prev = () => { diff --git a/tests/simple.test.js b/tests/simple.test.js index ca90c3a1..fb77d927 100644 --- a/tests/simple.test.js +++ b/tests/simple.test.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { mount } from 'enzyme'; import Pagination from '../src'; @@ -34,6 +34,30 @@ describe('simple Pagination', () => { expect(onChange).toBeCalled(); }); + it('should return to 1 when blur goto input in uncontrol mode', () => { + const component = mount( + , + ); + const input = component.find('.rc-pagination-simple').find('input'); + input.simulate('focus'); + input.simulate('change', { target: { value: '' } }); + input.simulate('blur'); + expect(input.getDOMNode().value).toBe('1'); + }); + + it('should return to 1 when blur goto input in control mode', () => { + const App = () => { + const [current, setCurrent] = useState(1); + return ; + }; + const component = mount(); + const input = component.find('.rc-pagination-simple').find('input'); + input.simulate('focus'); + input.simulate('change', { target: { value: '' } }); + input.simulate('blur'); + expect(input.getDOMNode().value).toBe('1'); + }); + it('default current page is 1', () => { expect(wrapper.state().current).toBe(1); }); From 61a45499fcae35ec3686517e289503d12fd225f0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 28 Apr 2022 16:55:03 +0800 Subject: [PATCH 2/2] update demo file name --- docs/demo/basic.md | 3 +++ docs/demo/controlled.md | 3 +++ docs/demo/default.md | 3 --- docs/demo/simple.md | 2 +- docs/demo/stupid.md | 3 --- docs/examples/basic.jsx | 19 +++++++++++++++++++ docs/examples/{default.jsx => controlled.jsx} | 0 docs/examples/simple.jsx | 18 ++---------------- docs/examples/stupid.jsx | 5 ----- 9 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 docs/demo/basic.md create mode 100644 docs/demo/controlled.md delete mode 100644 docs/demo/default.md delete mode 100644 docs/demo/stupid.md create mode 100644 docs/examples/basic.jsx rename docs/examples/{default.jsx => controlled.jsx} (100%) delete mode 100644 docs/examples/stupid.jsx diff --git a/docs/demo/basic.md b/docs/demo/basic.md new file mode 100644 index 00000000..6bfa089e --- /dev/null +++ b/docs/demo/basic.md @@ -0,0 +1,3 @@ +## simple + + diff --git a/docs/demo/controlled.md b/docs/demo/controlled.md new file mode 100644 index 00000000..8b04ec67 --- /dev/null +++ b/docs/demo/controlled.md @@ -0,0 +1,3 @@ +## default + + diff --git a/docs/demo/default.md b/docs/demo/default.md deleted file mode 100644 index 8c966c13..00000000 --- a/docs/demo/default.md +++ /dev/null @@ -1,3 +0,0 @@ -## default - - diff --git a/docs/demo/simple.md b/docs/demo/simple.md index 6bfa089e..4563544e 100644 --- a/docs/demo/simple.md +++ b/docs/demo/simple.md @@ -1,3 +1,3 @@ -## simple +## stupid diff --git a/docs/demo/stupid.md b/docs/demo/stupid.md deleted file mode 100644 index f8850565..00000000 --- a/docs/demo/stupid.md +++ /dev/null @@ -1,3 +0,0 @@ -## stupid - - diff --git a/docs/examples/basic.jsx b/docs/examples/basic.jsx new file mode 100644 index 00000000..b3299f2c --- /dev/null +++ b/docs/examples/basic.jsx @@ -0,0 +1,19 @@ +import '../../assets/index.less'; +import React from 'react'; +import Pagination from 'rc-pagination'; + +const App = () => ( + <> + + + + + + + + + + +); + +export default App; diff --git a/docs/examples/default.jsx b/docs/examples/controlled.jsx similarity index 100% rename from docs/examples/default.jsx rename to docs/examples/controlled.jsx diff --git a/docs/examples/simple.jsx b/docs/examples/simple.jsx index b3299f2c..a4e6d778 100644 --- a/docs/examples/simple.jsx +++ b/docs/examples/simple.jsx @@ -1,19 +1,5 @@ -import '../../assets/index.less'; import React from 'react'; import Pagination from 'rc-pagination'; +import '../../assets/index.less'; -const App = () => ( - <> - - - - - - - - - - -); - -export default App; +export default () => ; diff --git a/docs/examples/stupid.jsx b/docs/examples/stupid.jsx deleted file mode 100644 index a4e6d778..00000000 --- a/docs/examples/stupid.jsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; -import Pagination from 'rc-pagination'; -import '../../assets/index.less'; - -export default () => ;