refactor: rc-input-number refactored with baseInput (#42762) (#43000)

* 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 a44b35a744. * 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>
1 year ago · 5d62e636a1
3 changed files with 58 additions and 105 deletions
--- 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();
  });
 });
--- 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);
 });

--- 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",