feat: add classes (#30)

Author: MadCcc

src/BaseInput.tsx

@@ -26,6 +26,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
     handleReset,
     hidden,
     inputStyle,
+    classes,
   } = props;
 
   const containerRef = useRef<HTMLSpanElement>(null);
@@ -89,6 +90,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       },
       !hasAddon(props) && className,
       affixWrapperClassName,
+      classes?.affixWrapper,
     );
 
     const suffixNode = (suffix || allowClear) && (
@@ -126,12 +128,14 @@ const BaseInput: FC<BaseInputProps> = (props) => {
       `${prefixCls}-wrapper`,
       wrapperCls,
       wrapperClassName,
+      classes?.wrapper,
     );
 
     const mergedGroupClassName = classNames(
       `${prefixCls}-group-wrapper`,
       className,
       groupClassName,
+      classes?.group,
     );
 
     // Need another wrapper for changing display:table to display:inline-block

src/Input.tsx

@@ -36,6 +36,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     showCount,
     type = 'text',
     inputClassName,
+    classes,
     ...rest
   } = props;
 
@@ -125,6 +126,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       'affixWrapperClassName',
       'groupClassName',
       'inputClassName',
+      'classes',
       'wrapperClassName',
       'htmlSize',
     ]);
@@ -142,6 +144,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
             [`${prefixCls}-disabled`]: disabled,
           },
           inputClassName,
+          classes?.input,
           !hasAddon(props) && !hasPrefixSuffix(props) && className,
         )}
         ref={inputRef}
@@ -193,6 +196,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       triggerFocus={focus}
       suffix={getSuffix()}
       disabled={disabled}
+      classes={classes}
     />
   );
 });

src/interface.ts

@@ -14,10 +14,17 @@ export interface CommonInputProps {
   suffix?: ReactNode;
   addonBefore?: ReactNode;
   addonAfter?: ReactNode;
+  classes?: {
+    affixWrapper?: string;
+    group?: string;
+    wrapper?: string;
+  };
+  /** @deprecated Use classes instead */
   affixWrapperClassName?: string;
+  /** @deprecated Use classes instead */
   groupClassName?: string;
+  /** @deprecated Use classes instead */
   wrapperClassName?: string;
-  inputClassName?: string;
   allowClear?: boolean | { clearIcon?: ReactNode };
 }
 
@@ -78,6 +85,11 @@ export interface InputProps
   showCount?: boolean | ShowCountProps;
   autoComplete?: string;
   htmlSize?: number;
+  /** @deprecated Use classes instead */
+  inputClassName?: string;
+  classes?: CommonInputProps['classes'] & {
+    input?: string;
+  };
 }
 
 export interface InputRef {