chore: clean up

Author: zombieJ

src/InputNumber.tsx

@@ -14,7 +14,6 @@ import useCursor from './hooks/useCursor';
 import StepHandler from './StepHandler';
 import { getDecupleSteps } from './utils/numberUtil';
 
-import { BaseInputProps } from '@rc-component/input/lib/interface';
 import { useEvent } from '@rc-component/util';
 import { triggerFocus, type InputFocusOptions } from '@rc-component/util/lib/DOM/focus';
 import useFrame from './hooks/useFrame';
@@ -51,7 +50,7 @@ const getDecimalIfValidate = (value: ValueType) => {
   return decimal.isInvalidate() ? null : decimal;
 };
 
-type SemanticName = 'actions' | 'input' | 'action';
+type SemanticName = 'root' | 'actions' | 'input' | 'action' | 'prefix' | 'suffix';
 export interface InputNumberProps<T extends ValueType = ValueType>
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
@@ -75,10 +74,8 @@ export interface InputNumberProps<T extends ValueType = ValueType>
   controls?: boolean;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
-  addonBefore?: React.ReactNode;
-  addonAfter?: React.ReactNode;
-  classNames?: BaseInputProps['classNames'] & Partial<Record<SemanticName, string>>;
-  styles?: BaseInputProps['styles'] & Partial<Record<SemanticName, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticName, string>>;
+  styles?: Partial<Record<SemanticName, React.CSSProperties>>;
 
   // Customize handler node
   upHandler?: React.ReactNode;
@@ -619,14 +616,14 @@ const InputNumber = React.forwardRef<InputNumberRef, InputNumberProps>((props, r
   return (
     <div
       ref={rootRef}
-      className={clsx(prefixCls, `${prefixCls}-mode-${mode}`, className, {
+      className={clsx(prefixCls, `${prefixCls}-mode-${mode}`, className, classNames?.root, {
         [`${prefixCls}-focused`]: focus,
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-readonly`]: readOnly,
         [`${prefixCls}-not-a-number`]: decimalValue.isNaN(),
         [`${prefixCls}-out-of-range`]: !decimalValue.isInvalidate() && !isInRange(decimalValue),
       })}
-      style={style}
+      style={{ ...styles?.root, ...style }}
       onFocus={() => {
         setFocus(true);
       }}

tests/baseInput.test.tsx

@@ -4,13 +4,15 @@ import InputNumber from '../src';
 describe('InputNumber.Semantic', () => {
   it('support classNames and styles', () => {
     const testClassNames = {
+      root: 'test-root',
       prefix: 'test-prefix',
       input: 'test-input',
       suffix: 'test-suffix',
       actions: 'test-actions',
       action: 'test-action',
     };
     const testStyles = {
+      root: { color: 'orange' },
       prefix: { color: 'red' },
       input: { color: 'blue' },
       suffix: { color: 'green' },
@@ -27,16 +29,19 @@ describe('InputNumber.Semantic', () => {
       />,
     );
 
+    const root = container.querySelector('.rc-input-number')!;
     const input = container.querySelector('input')!;
     const prefix = container.querySelector('.rc-input-number-prefix')!;
     const suffix = container.querySelector('.rc-input-number-suffix')!;
     const actions = container.querySelector('.rc-input-number-actions')!;
     const action = container.querySelector('.rc-input-number-action')!;
+    expect(root).toHaveClass(testClassNames.root);
     expect(input).toHaveClass(testClassNames.input);
     expect(prefix).toHaveClass(testClassNames.prefix);
     expect(suffix).toHaveClass(testClassNames.suffix);
     expect(actions).toHaveClass(testClassNames.actions);
     expect(action).toHaveClass(testClassNames.action);
+    expect(root).toHaveStyle(testStyles.root);
     expect(prefix).toHaveStyle(testStyles.prefix);
     expect(input).toHaveStyle(testStyles.input);
     expect(suffix).toHaveStyle(testStyles.suffix);