From 3efb68ce6f264d8d1c74cb0c4161112da69733f2 Mon Sep 17 00:00:00 2001
From: muxin <434980373@qq.com>
Date: Tue, 13 Jun 2023 20:55:39 +0800
Subject: [PATCH] refactor:  rc-input-number refactored with baseInput 
 (#42762)

* refactor: refactor with BaseInput

* chore: bump rc-mentions & rc-textarea

* test: update snapshots

* test: update snapshots

* chore: bump rc-input

* fix: bump rc-input

* test: update snapshot

* test: update snapshot penta

* test: update snapshot

* fix: optimize function props

* test: update test

* test: update test

* test: update test

* fix: delete useless className

* feat: let baseInput cal class

* chore: bump rc-input-number

* test: update test

* Revert "test: update test"

This reverts commit a44b35a7447b8a282abccd32640d47510a2963fa.

* test: update snapshot

* test: update snapshot

* test: update snapshot

* chore: bump rc-input-number

* chore: bump rc-input-number & rc-mentions

---------

Co-authored-by: MadCcc <1075746765@qq.com>
---
 .../input-number/__tests__/prefix.test.tsx    |   2 +-
 components/input-number/index.tsx             | 153 ++++++------------
 package.json                                  |   8 +-
 3 files changed, 58 insertions(+), 105 deletions(-)

diff --git a/components/input-number/__tests__/prefix.test.tsx b/components/input-number/__tests__/prefix.test.tsx
index 2588e1d2ed..de367d8c10 100644
--- a/components/input-number/__tests__/prefix.test.tsx
+++ b/components/input-number/__tests__/prefix.test.tsx
@@ -18,7 +18,7 @@ describe('prefix', () => {
     const { container } = render(<InputNumber prefix={<i>123</i>} />);
 
     const mockFocus = jest.spyOn(container.querySelector('input')!, 'focus');
-    fireEvent.mouseUp(container.querySelector('i')!);
+    fireEvent.click(container.querySelector('i')!);
     expect(mockFocus).toHaveBeenCalled();
   });
 });
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index b08cbe483b..976c12c4db 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
 import * as React from 'react';
-import { cloneElement } from '../_util/reactNode';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import ConfigProvider, { ConfigContext } from '../config-provider';
@@ -33,7 +32,6 @@ export interface InputNumberProps<T extends ValueType = ValueType>
 const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
-  const [focused, setFocus] = React.useState(false);
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   React.useImperativeHandle(ref, () => inputRef.current!);
@@ -89,9 +87,6 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
 
   const mergedSize = useSize((ctx) => compactSize ?? customizeSize ?? ctx);
 
-  const hasPrefix = prefix != null || hasFeedback;
-  const hasAddon = !!(addonBefore || addonAfter);
-
   // ===================== Disabled =====================
   const disabled = React.useContext(DisabledContext);
   const mergedDisabled = customDisabled ?? disabled;
@@ -107,115 +102,73 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
     getStatusClassNames(prefixCls, mergedStatus),
     compactItemClassnames,
     hashId,
-    className,
-    !hasPrefix && !hasAddon && rootClassName,
   );
+  const wrapperClassName = `${prefixCls}-group`;
 
-  let element = (
+  const element = (
     <RcInputNumber
       ref={inputRef}
       disabled={mergedDisabled}
-      className={inputNumberClass}
+      className={classNames(className, rootClassName)}
       upHandler={upIcon}
       downHandler={downIcon}
       prefixCls={prefixCls}
       readOnly={readOnly}
       controls={controlsTemp}
+      prefix={prefix}
+      suffix={hasFeedback && feedbackIcon}
+      addonAfter={
+        addonAfter && (
+          <NoCompactStyle>
+            <NoFormStyle override status>
+              {addonAfter}
+            </NoFormStyle>
+          </NoCompactStyle>
+        )
+      }
+      addonBefore={
+        addonBefore && (
+          <NoCompactStyle>
+            <NoFormStyle override status>
+              {addonBefore}
+            </NoFormStyle>
+          </NoCompactStyle>
+        )
+      }
+      classNames={{
+        input: inputNumberClass,
+      }}
+      classes={{
+        affixWrapper: classNames(
+          getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback),
+          {
+            [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
+            [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
+            [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+            [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+          },
+          hashId,
+        ),
+        wrapper: classNames(
+          {
+            [`${wrapperClassName}-rtl`]: direction === 'rtl',
+          },
+          hashId,
+        ),
+        group: classNames(
+          {
+            [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
+            [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
+            [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
+          },
+          getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
+          hashId,
+        ),
+      }}
       {...others}
     />
   );
 
-  if (hasPrefix) {
-    const affixWrapperCls = classNames(
-      `${prefixCls}-affix-wrapper`,
-      getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus, hasFeedback),
-      {
-        [`${prefixCls}-affix-wrapper-focused`]: focused,
-        [`${prefixCls}-affix-wrapper-disabled`]: props.disabled,
-        [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
-        [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
-        [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
-        [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
-        [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
-      },
-
-      // className will go to addon wrapper
-      !hasAddon && className,
-      !hasAddon && rootClassName,
-      hashId,
-    );
-
-    element = (
-      <div
-        className={affixWrapperCls}
-        style={props.style}
-        onMouseUp={() => inputRef.current!.focus()}
-      >
-        {prefix && <span className={`${prefixCls}-prefix`}>{prefix}</span>}
-        {cloneElement(element, {
-          style: null,
-          value: props.value,
-          onFocus: (event: React.FocusEvent<HTMLInputElement>) => {
-            setFocus(true);
-            props.onFocus?.(event);
-          },
-          onBlur: (event: React.FocusEvent<HTMLInputElement>) => {
-            setFocus(false);
-            props.onBlur?.(event);
-          },
-        })}
-        {hasFeedback && <span className={`${prefixCls}-suffix`}>{feedbackIcon}</span>}
-      </div>
-    );
-  }
-
-  if (hasAddon) {
-    const wrapperClassName = `${prefixCls}-group`;
-    const addonClassName = `${wrapperClassName}-addon`;
-    const addonBeforeNode = addonBefore ? (
-      <div className={addonClassName}>{addonBefore}</div>
-    ) : null;
-    const addonAfterNode = addonAfter ? <div className={addonClassName}>{addonAfter}</div> : null;
-
-    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, hashId, {
-      [`${wrapperClassName}-rtl`]: direction === 'rtl',
-    });
-
-    const mergedGroupClassName = classNames(
-      `${prefixCls}-group-wrapper`,
-      {
-        [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
-        [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
-        [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
-      },
-      getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
-      hashId,
-      className,
-      rootClassName,
-    );
-    element = (
-      <div className={mergedGroupClassName} style={props.style}>
-        <div className={mergedWrapperClassName}>
-          {addonBeforeNode && (
-            <NoCompactStyle>
-              <NoFormStyle status override>
-                {addonBeforeNode}
-              </NoFormStyle>
-            </NoCompactStyle>
-          )}
-          {cloneElement(element, { style: null, disabled: mergedDisabled })}
-          {addonAfterNode && (
-            <NoCompactStyle>
-              <NoFormStyle status override>
-                {addonAfterNode}
-              </NoFormStyle>
-            </NoCompactStyle>
-          )}
-        </div>
-      </div>
-    );
-  }
-
   return wrapSSR(element);
 });
 
diff --git a/package.json b/package.json
index ac188e75c7..5aa67337ca 100644
--- a/package.json
+++ b/package.json
@@ -130,9 +130,9 @@
     "rc-dropdown": "~4.1.0",
     "rc-field-form": "~1.32.0",
     "rc-image": "~5.17.1",
-    "rc-input": "~1.0.4",
-    "rc-input-number": "~7.4.0",
-    "rc-mentions": "~2.3.0",
+    "rc-input": "~1.1.0",
+    "rc-input-number": "~8.0.0",
+    "rc-mentions": "~2.4.1",
     "rc-menu": "~9.9.2",
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.4",
@@ -148,7 +148,7 @@
     "rc-switch": "~4.1.0",
     "rc-table": "~7.32.1",
     "rc-tabs": "~12.7.0",
-    "rc-textarea": "~1.2.2",
+    "rc-textarea": "~1.3.0",
     "rc-tooltip": "~6.0.0",
     "rc-tree": "~5.7.4",
     "rc-tree-select": "~5.9.0",