From 36e72f880deb1387d066e45eecd6cc50647bb8a1 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Mon, 29 May 2023 00:13:57 +0800 Subject: [PATCH 01/10] refactor: refactor with Baseinput --- package.json | 1 + src/InputNumber.tsx | 28 ++++++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dbd6d89f..1b392754 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@babel/runtime": "^7.10.1", "@rc-component/mini-decimal": "^1.0.1", "classnames": "^2.2.5", + "rc-input": "^1.0.4", "rc-util": "^5.28.0" }, "devDependencies": { diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index f182de76..6a3196df 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -7,6 +7,7 @@ import getMiniDecimal, { ValueType, } from '@rc-component/mini-decimal'; import classNames from 'classnames'; +import { BaseInput } from 'rc-input'; import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect'; import { composeRef } from 'rc-util/lib/ref'; import * as React from 'react'; @@ -43,7 +44,7 @@ const getDecimalIfValidate = (value: ValueType) => { export interface InputNumberProps extends Omit< React.InputHTMLAttributes, - 'value' | 'defaultValue' | 'onInput' | 'onChange' + 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' > { /** value will show as string */ stringMode?: boolean; @@ -59,6 +60,9 @@ export interface InputNumberProps step?: ValueType; tabIndex?: number; controls?: boolean; + prefix?: React.ReactNode; + addonBefore?: React.ReactNode; + addonAfter?: React.ReactNode; // Customize handler node upHandler?: React.ReactNode; @@ -86,7 +90,7 @@ export interface InputNumberProps // size?: ISize; } -const InputNumber = React.forwardRef( +const InternalInputNumber = React.forwardRef( (props: InputNumberProps, ref: React.Ref) => { const { prefixCls = 'rc-input-number', @@ -575,6 +579,26 @@ const InputNumber = React.forwardRef( ); }, +); + +const InputNumber = React.forwardRef( + (props: InputNumberProps, ref: React.Ref) => { + const { disabled, style, prefixCls, value, prefix, addonBefore, addonAfter, ...rest } = props; + return ( + + } + prefixCls={prefixCls} + value={value} + disabled={disabled} + style={style} + prefix={prefix} + addonAfter={addonAfter} + addonBefore={addonBefore} + /> + ); + }, ) as (( props: React.PropsWithChildren> & { ref?: React.Ref; From 5a97c9e52c92e7bc77237996da6513833434e360 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Mon, 29 May 2023 17:37:42 +0800 Subject: [PATCH 02/10] chore: update package json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1b392754..18007c92 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@babel/runtime": "^7.10.1", "@rc-component/mini-decimal": "^1.0.1", "classnames": "^2.2.5", - "rc-input": "^1.0.4", + "rc-input": "~1.0.4", "rc-util": "^5.28.0" }, "devDependencies": { From ff4bb177a775fd0728c0f09f3ec21e0a6c03174e Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 30 May 2023 16:15:30 +0800 Subject: [PATCH 03/10] test: add tests --- tests/__snapshots__/baseInput.test.tsx.snap | 185 ++++++++++++++++++++ tests/baseInput.test.tsx | 26 +++ 2 files changed, 211 insertions(+) create mode 100644 tests/__snapshots__/baseInput.test.tsx.snap create mode 100644 tests/baseInput.test.tsx diff --git a/tests/__snapshots__/baseInput.test.tsx.snap b/tests/__snapshots__/baseInput.test.tsx.snap new file mode 100644 index 00000000..6afc8b2f --- /dev/null +++ b/tests/__snapshots__/baseInput.test.tsx.snap @@ -0,0 +1,185 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`baseInput addon should render properly 1`] = ` +
+
+ + + + + Addon Before + + +
+
+ + + + + + +
+
+ +
+
+ + +
+
+ + +
+
+ + + + + + +
+
+ +
+
+ + + Addon After + + + + +
+
+`; + +exports[`baseInput prefix should render properly 1`] = ` +
+ + + + Prefix + + +
+
+ + + + + + +
+
+ +
+
+ +
+`; diff --git a/tests/baseInput.test.tsx b/tests/baseInput.test.tsx new file mode 100644 index 00000000..0890d7be --- /dev/null +++ b/tests/baseInput.test.tsx @@ -0,0 +1,26 @@ +import { render } from '@testing-library/react'; +import InputNumber from '../src'; + +describe('baseInput', () => { + it('prefix should render properly', () => { + const prefix = Prefix; + + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it('addon should render properly', () => { + const addonBefore = Addon Before; + const addonAfter = Addon After; + + const { container } = render( +
+ +
+
+ +
, + ); + expect(container).toMatchSnapshot(); + }); +}); From 0d6784210463b2aebc2ffb220d05c10e505a3cad Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Thu, 1 Jun 2023 00:22:53 +0800 Subject: [PATCH 04/10] feat: add classes --- src/InputNumber.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 6a3196df..bdf7e1c9 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -63,6 +63,11 @@ export interface InputNumberProps prefix?: React.ReactNode; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; + classes?: { + affixWrapper?: string; + group?: string; + wrapper?: string; + }; // Customize handler node upHandler?: React.ReactNode; @@ -583,7 +588,8 @@ const InternalInputNumber = React.forwardRef( const InputNumber = React.forwardRef( (props: InputNumberProps, ref: React.Ref) => { - const { disabled, style, prefixCls, value, prefix, addonBefore, addonAfter, ...rest } = props; + const { disabled, style, prefixCls, value, prefix, addonBefore, addonAfter, classes, ...rest } = + props; return ( ); }, From 3cabbe07de6092c75348ba02ef3b2b38e43f260a Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Fri, 2 Jun 2023 09:58:16 +0800 Subject: [PATCH 05/10] chore: bump rc-input --- package.json | 2 +- src/InputNumber.tsx | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 18007c92..3f7e7a5b 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "@babel/runtime": "^7.10.1", "@rc-component/mini-decimal": "^1.0.1", "classnames": "^2.2.5", - "rc-input": "~1.0.4", + "rc-input": "~1.1.0", "rc-util": "^5.28.0" }, "devDependencies": { diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index bdf7e1c9..8ad4fe8f 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -603,6 +603,12 @@ const InputNumber = React.forwardRef( addonAfter={addonAfter} addonBefore={addonBefore} classes={classes} + components={{ + affixWrapper: 'div', + groupWrapper: 'div', + wrapper: 'div', + groupAddon: 'div', + }} /> ); }, From 259d9e3d9a1e733a6fee4052e5b0e1c812a58b70 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Fri, 2 Jun 2023 14:20:29 +0800 Subject: [PATCH 06/10] fix: fix props type --- src/InputNumber.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 8ad4fe8f..2e8188cc 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -44,7 +44,7 @@ const getDecimalIfValidate = (value: ValueType) => { export interface InputNumberProps extends Omit< React.InputHTMLAttributes, - 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' + 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' | 'suffix' > { /** value will show as string */ stringMode?: boolean; @@ -61,6 +61,7 @@ export interface InputNumberProps tabIndex?: number; controls?: boolean; prefix?: React.ReactNode; + suffix?: React.ReactNode; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; classes?: { From d1cba045da01f25a87d94b4582ae89ecbcdb88d0 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Mon, 5 Jun 2023 18:08:06 +0800 Subject: [PATCH 07/10] feat: add triggerFocus --- src/InputNumber.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 2e8188cc..8c4d098e 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -15,6 +15,7 @@ import useCursor from './hooks/useCursor'; import StepHandler from './StepHandler'; import { getDecupleSteps } from './utils/numberUtil'; +import { InputFocusOptions, triggerFocus } from 'rc-input/lib/utils/commonUtils'; import useFrame from './hooks/useFrame'; /** @@ -591,11 +592,26 @@ const InputNumber = React.forwardRef( (props: InputNumberProps, ref: React.Ref) => { const { disabled, style, prefixCls, value, prefix, addonBefore, addonAfter, classes, ...rest } = props; + + const inputFocusRef = React.useRef(null); + + const focus = (option?: InputFocusOptions) => { + if (inputFocusRef.current) { + triggerFocus(inputFocusRef.current, option); + } + }; + return ( + } + triggerFocus={focus} prefixCls={prefixCls} value={value} disabled={disabled} From fd43a554f9545b23db92bc47d2fb9cddcfb4f098 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 6 Jun 2023 10:57:45 +0800 Subject: [PATCH 08/10] fix: delete suffix prop --- src/InputNumber.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index 8c4d098e..d05fe18c 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -45,7 +45,7 @@ const getDecimalIfValidate = (value: ValueType) => { export interface InputNumberProps extends Omit< React.InputHTMLAttributes, - 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' | 'suffix' + 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' > { /** value will show as string */ stringMode?: boolean; @@ -62,7 +62,6 @@ export interface InputNumberProps tabIndex?: number; controls?: boolean; prefix?: React.ReactNode; - suffix?: React.ReactNode; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; classes?: { From f6efec579ef3aa2ce43501a7da857f8bfba53347 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 6 Jun 2023 11:00:19 +0800 Subject: [PATCH 09/10] test: update snapshot --- tests/__snapshots__/baseInput.test.tsx.snap | 28 ++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/tests/__snapshots__/baseInput.test.tsx.snap b/tests/__snapshots__/baseInput.test.tsx.snap index 6afc8b2f..a8e10153 100644 --- a/tests/__snapshots__/baseInput.test.tsx.snap +++ b/tests/__snapshots__/baseInput.test.tsx.snap @@ -3,19 +3,19 @@ exports[`baseInput addon should render properly 1`] = `
- - - Addon Before - +
@@ -59,14 +59,14 @@ exports[`baseInput addon should render properly 1`] = ` />
- - + +

- -
- Addon After - - - + + + `; exports[`baseInput prefix should render properly 1`] = `
-
- + `; From 18678c94b837f7c2c7926061857147081a4ff7c0 Mon Sep 17 00:00:00 2001 From: MuxinFeng <434980373@qq.com> Date: Tue, 6 Jun 2023 19:56:18 +0800 Subject: [PATCH 10/10] fix: cal classNames --- src/InputNumber.tsx | 49 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/src/InputNumber.tsx b/src/InputNumber.tsx index d05fe18c..da68ef05 100644 --- a/src/InputNumber.tsx +++ b/src/InputNumber.tsx @@ -6,7 +6,7 @@ import getMiniDecimal, { validateNumber, ValueType, } from '@rc-component/mini-decimal'; -import classNames from 'classnames'; +import clsx from 'classnames'; import { BaseInput } from 'rc-input'; import { useLayoutUpdateEffect } from 'rc-util/lib/hooks/useLayoutEffect'; import { composeRef } from 'rc-util/lib/ref'; @@ -45,7 +45,7 @@ const getDecimalIfValidate = (value: ValueType) => { export interface InputNumberProps extends Omit< React.InputHTMLAttributes, - 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' + 'value' | 'defaultValue' | 'onInput' | 'onChange' | 'prefix' | 'suffix' > { /** value will show as string */ stringMode?: boolean; @@ -62,6 +62,7 @@ export interface InputNumberProps tabIndex?: number; controls?: boolean; prefix?: React.ReactNode; + suffix?: React.ReactNode; addonBefore?: React.ReactNode; addonAfter?: React.ReactNode; classes?: { @@ -69,6 +70,12 @@ export interface InputNumberProps group?: string; wrapper?: string; }; + classNames?: { + affixWrapper?: string; + group?: string; + wrapper?: string; + input?: string; + }; // Customize handler node upHandler?: React.ReactNode; @@ -114,6 +121,7 @@ const InternalInputNumber = React.forwardRef( keyboard, controls = true, + classNames, stringMode, parser, @@ -537,13 +545,18 @@ const InternalInputNumber = React.forwardRef( // ============================ Render ============================ return (
{ setFocus(true); @@ -589,8 +602,19 @@ const InternalInputNumber = React.forwardRef( const InputNumber = React.forwardRef( (props: InputNumberProps, ref: React.Ref) => { - const { disabled, style, prefixCls, value, prefix, addonBefore, addonAfter, classes, ...rest } = - props; + const { + disabled, + style, + prefixCls, + value, + prefix, + addonBefore, + addonAfter, + classes, + className, + classNames, + ...rest + } = props; const inputFocusRef = React.useRef(null); @@ -606,10 +630,12 @@ const InputNumber = React.forwardRef( } + className={className} triggerFocus={focus} prefixCls={prefixCls} value={value} @@ -619,6 +645,7 @@ const InputNumber = React.forwardRef( addonAfter={addonAfter} addonBefore={addonBefore} classes={classes} + classNames={classNames} components={{ affixWrapper: 'div', groupWrapper: 'div',