From 373b294e2613f1597c2e268eafbe37b5b59a13e0 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Wed, 7 Apr 2021 10:40:33 +0800 Subject: [PATCH 1/7] feat: support max length --- README.md | 13 ++++++++++--- src/InputNumber.tsx | 9 +++++++-- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 231a1b61..8d664dfd 100644 --- a/README.md +++ b/README.md @@ -232,13 +232,20 @@ online example: https://input-number.vercel.app/ Specifies the inputmode of input + + maxLength + number + + input max length + ## Keyboard Navigation -* When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by `step` -* With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by `10 * step` -* With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by `0.1 * step` + +- When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by `step` +- With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by `10 * step` +- With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by `0.1 * step` ## Test Case diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index b8524c82..2143802f 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -67,6 +67,7 @@ export interface InputNumberProps // useTouch: boolean; // size?: ISize; + maxLength?: number; } const InputNumber = React.forwardRef( @@ -92,6 +93,7 @@ const InputNumber = React.forwardRef( formatter, precision, decimalSeparator, + maxLength, onChange, onInput, @@ -336,8 +338,11 @@ const InputNumber = React.forwardRef( }; // >>> Input - const onInternalInput: React.ChangeEventHandler = (e) => { + const onInternalInput: React.ChangeEventHandler = e => { let inputStr = e.target.value; + if (maxLength) { + inputStr = inputStr.slice(0, maxLength); + } // optimize for chinese input experience // https://github.com/ant-design/ant-design/issues/8196 @@ -404,7 +409,7 @@ const InputNumber = React.forwardRef( } }; - const onKeyDown: React.KeyboardEventHandler = (event) => { + const onKeyDown: React.KeyboardEventHandler = event => { const { which } = event; userTypingRef.current = true; From 3afcbfbdc4b0a2d1f058a140180ab344b2cb5dad Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Thu, 8 Apr 2021 10:50:17 +0800 Subject: [PATCH 2/7] Update input.test.tsx --- tests/input.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/input.test.tsx b/tests/input.test.tsx index c2a395b8..7749275a 100644 --- a/tests/input.test.tsx +++ b/tests/input.test.tsx @@ -80,6 +80,11 @@ describe('InputNumber.Input', () => { expect(wrapper.getInputValue()).toEqual(''); }); + it('max length', () => { + const wrapper = prepareWrapper('333333', { maxLength: 3 }, true); + expect(wrapper.getInputValue()).toEqual('333'); + }); + it('blur on default input', () => { const onChange = jest.fn(); const wrapper = mount(); From 7f479e112d0f881ffc155aa3daa4cc4956909d60 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Thu, 8 Apr 2021 10:51:00 +0800 Subject: [PATCH 3/7] Update src/InputNumber.tsx Co-authored-by: Amumu --- src/InputNumber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 2143802f..2df979cf 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -340,7 +340,7 @@ const InputNumber = React.forwardRef( // >>> Input const onInternalInput: React.ChangeEventHandler = e => { let inputStr = e.target.value; - if (maxLength) { + if (maxLength >= 0) { inputStr = inputStr.slice(0, maxLength); } From 971b777ecd3b76359a0b226c57fc82decd7ea87e Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Thu, 8 Apr 2021 10:53:47 +0800 Subject: [PATCH 4/7] Update InputNumber.tsx --- src/InputNumber.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 2df979cf..7ee6ad97 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -340,7 +340,7 @@ const InputNumber = React.forwardRef( // >>> Input const onInternalInput: React.ChangeEventHandler = e => { let inputStr = e.target.value; - if (maxLength >= 0) { + if (maxLength > 0) { inputStr = inputStr.slice(0, maxLength); } From 7e5c598084d557401dd4b302ed132fd91aaf4d1b Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Thu, 8 Apr 2021 11:00:02 +0800 Subject: [PATCH 5/7] Update input.test.tsx --- tests/input.test.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/tests/input.test.tsx b/tests/input.test.tsx index 7749275a..e67a7599 100644 --- a/tests/input.test.tsx +++ b/tests/input.test.tsx @@ -80,11 +80,16 @@ describe('InputNumber.Input', () => { expect(wrapper.getInputValue()).toEqual(''); }); - it('max length', () => { + it('max length 3', () => { const wrapper = prepareWrapper('333333', { maxLength: 3 }, true); expect(wrapper.getInputValue()).toEqual('333'); }); + it('max length 0', () => { + const wrapper = prepareWrapper('333333', { maxLength: 0 }, true); + expect(wrapper.getInputValue()).toEqual('333333'); + }); + it('blur on default input', () => { const onChange = jest.fn(); const wrapper = mount(); From aa6cea04a97efdba37e2ceed2cdd0c5ff5bab931 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Thu, 8 Apr 2021 12:51:13 +0800 Subject: [PATCH 6/7] Update input.test.tsx --- tests/input.test.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/tests/input.test.tsx b/tests/input.test.tsx index e67a7599..b2fdaf1a 100644 --- a/tests/input.test.tsx +++ b/tests/input.test.tsx @@ -90,6 +90,14 @@ describe('InputNumber.Input', () => { expect(wrapper.getInputValue()).toEqual('333333'); }); + it('control max length', () => { + const wrapper = mount(); + wrapper.focusInput(); + + wrapper.changeValue('1234'); + expect(wrapper.getInputValue()).toEqual('123'); + }); + it('blur on default input', () => { const onChange = jest.fn(); const wrapper = mount(); From 76d2bf84b367cbdf13373395c995dc9d3587e5a4 Mon Sep 17 00:00:00 2001 From: Tom Xu Date: Tue, 13 Apr 2021 11:41:27 +0800 Subject: [PATCH 7/7] Update input.test.tsx --- tests/input.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/input.test.tsx b/tests/input.test.tsx index b2fdaf1a..d445f939 100644 --- a/tests/input.test.tsx +++ b/tests/input.test.tsx @@ -91,8 +91,9 @@ describe('InputNumber.Input', () => { }); it('control max length', () => { - const wrapper = mount(); + const wrapper = mount(); wrapper.focusInput(); + expect(wrapper.getInputValue()).toEqual('1234'); wrapper.changeValue('1234'); expect(wrapper.getInputValue()).toEqual('123');