refactor: hooks of context (#52564)

components/button/button.tsx

@@ -5,7 +5,7 @@ import { useComposeRef } from 'rc-util/lib/ref';
 
 import { devUseWarning } from '../_util/warning';
 import Wave from '../_util/wave';
-import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DisabledContext from '../config-provider/DisabledContext';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
@@ -19,11 +19,10 @@ import type {
   ButtonVariantType,
 } from './buttonHelpers';
 import { isTwoCNChar, isUnBorderedButtonVariant, spaceChildren } from './buttonHelpers';
-import IconWrapper from './IconWrapper';
 import DefaultLoadingIcon from './DefaultLoadingIcon';
+import IconWrapper from './IconWrapper';
 import useStyle from './style';
 import Compact from './style/compact';
-import { useComponentConfig } from '../config-provider/context';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -145,10 +144,17 @@ const InternalCompoundedButton = React.forwardRef<
   const isDanger = mergedColor === 'danger';
   const mergedColorText = isDanger ? 'dangerous' : mergedColor;
 
-  const { getPrefixCls, direction } = useContext(ConfigContext);
-  const contextButton = useComponentConfig('button');
+  const {
+    getPrefixCls,
+    direction,
+    autoInsertSpace: contextAutoInsertSpace,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
+  } = useComponentConfig('button');
 
-  const mergedInsertSpace = autoInsertSpace ?? contextButton.autoInsertSpace ?? true;
+  const mergedInsertSpace = autoInsertSpace ?? contextAutoInsertSpace ?? true;
 
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
@@ -296,15 +302,15 @@ const InternalCompoundedButton = React.forwardRef<
     compactItemClassnames,
     className,
     rootClassName,
-    contextButton.className,
+    contextClassName,
   );
 
-  const fullStyle: React.CSSProperties = { ...contextButton.style, ...customStyle };
+  const fullStyle: React.CSSProperties = { ...contextStyle, ...customStyle };
 
-  const iconClasses = classNames(customClassNames?.icon, contextButton.classNames.icon);
+  const iconClasses = classNames(customClassNames?.icon, contextClassNames.icon);
   const iconStyle: React.CSSProperties = {
     ...(styles?.icon || {}),
-    ...(contextButton.styles.icon || {}),
+    ...(contextStyles.icon || {}),
   };
 
   const iconNode =

components/config-provider/context.ts

@@ -365,6 +365,8 @@ type ComponentReturnType<T extends keyof ConfigComponentProps> = Omit<
 > & {
   classNames: GetClassNamesOrEmptyObject<NonNullable<ConfigComponentProps[T]>>;
   styles: GetStylesOrEmptyObject<NonNullable<ConfigComponentProps[T]>>;
+  getPrefixCls: ConfigConsumerProps['getPrefixCls'];
+  direction: ConfigConsumerProps['direction'];
 };
 
 /**
@@ -377,10 +379,14 @@ type ComponentReturnType<T extends keyof ConfigComponentProps> = Omit<
  */
 export function useComponentConfig<T extends keyof ConfigComponentProps>(propName: T) {
   const context = React.useContext(ConfigContext);
+  const { getPrefixCls, direction } = context;
+
   const propValue = context[propName];
   return {
     classNames: EMPTY_OBJECT,
     styles: EMPTY_OBJECT,
     ...propValue,
+    getPrefixCls,
+    direction,
   } as ComponentReturnType<T>;
 }

components/input/Input.tsx

@@ -10,8 +10,8 @@ import getAllowClear from '../_util/getAllowClear';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
-import { ConfigContext } from '../config-provider';
 import type { Variant } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
@@ -74,7 +74,16 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     deprecated(!('bordered' in props), 'bordered', 'variant');
   }
 
-  const { getPrefixCls, direction, input } = React.useContext(ConfigContext);
+  const {
+    getPrefixCls,
+    direction,
+    allowClear: contextAllowClear,
+    autoComplete: contextAutoComplete,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
+  } = useComponentConfig('input');
 
   const prefixCls = getPrefixCls('input', customizePrefixCls);
   const inputRef = useRef<InputRef>(null);
@@ -143,7 +152,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     </>
   );
 
-  const mergedAllowClear = getAllowClear(allowClear ?? input?.allowClear);
+  const mergedAllowClear = getAllowClear(allowClear ?? contextAllowClear);
 
   const [variant, enableVariantCls] = useVariant('input', customVariant, bordered);
 
@@ -151,13 +160,13 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     <RcInput
       ref={composeRef(ref, inputRef)}
       prefixCls={prefixCls}
-      autoComplete={input?.autoComplete}
+      autoComplete={contextAutoComplete}
       {...rest}
       disabled={mergedDisabled}
       onBlur={handleBlur}
       onFocus={handleFocus}
-      style={{ ...input?.style, ...style }}
-      styles={{ ...input?.styles, ...styles }}
+      style={{ ...contextStyle, ...style }}
+      styles={{ ...contextStyles, ...styles }}
       suffix={suffixNode}
       allowClear={mergedAllowClear}
       className={classNames(
@@ -166,7 +175,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
         cssVarCls,
         rootCls,
         compactItemClassnames,
-        input?.className,
+        contextClassName,
       )}
       onChange={handleChange}
       addonBefore={
@@ -185,7 +194,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
       }
       classNames={{
         ...classes,
-        ...input?.classNames,
+        ...contextClassNames,
         input: classNames(
           {
             [`${prefixCls}-sm`]: mergedSize === 'small',
@@ -193,7 +202,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
             [`${prefixCls}-rtl`]: direction === 'rtl',
           },
           classes?.input,
-          input?.classNames?.input,
+          contextClassNames.input,
           hashId,
         ),
         variant: classNames(

components/input/TextArea.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import type { TextAreaRef as RcTextAreaRef, TextAreaProps as RcTextAreaProps } from 'rc-textarea';
+import type { TextAreaProps as RcTextAreaProps, TextAreaRef as RcTextAreaRef } from 'rc-textarea';
 import RcTextArea from 'rc-textarea';
+
 import getAllowClear from '../_util/getAllowClear';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { devUseWarning } from '../_util/warning';
-import { ConfigContext } from '../config-provider';
+import type { Variant } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
 import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
-import type { Variant } from '../config-provider';
 import useVariant from '../form/hooks/useVariants';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
@@ -60,7 +61,16 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
     deprecated(!('bordered' in props), 'bordered', 'variant');
   }
 
-  const { getPrefixCls, direction, textArea } = React.useContext(ConfigContext);
+  const {
+    getPrefixCls,
+    direction,
+    allowClear: contextAllowClear,
+    autoComplete: contextAutoComplete,
+    className: contextClassName,
+    style: contextStyle,
+    classNames: contextClassNames,
+    styles: contextStyles,
+  } = useComponentConfig('textArea');
 
   // ===================== Size =====================
   const mergedSize = useSize(customizeSize);
@@ -96,20 +106,20 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
 
   const [variant, enableVariantCls] = useVariant('textArea', customVariant, bordered);
 
-  const mergedAllowClear = getAllowClear(allowClear ?? textArea?.allowClear);
+  const mergedAllowClear = getAllowClear(allowClear ?? contextAllowClear);
 
   return wrapCSSVar(
     <RcTextArea
-      autoComplete={textArea?.autoComplete}
+      autoComplete={contextAutoComplete}
       {...rest}
-      style={{ ...textArea?.style, ...style }}
-      styles={{ ...textArea?.styles, ...styles }}
+      style={{ ...contextStyle, ...style }}
+      styles={{ ...contextStyles, ...styles }}
       disabled={mergedDisabled}
       allowClear={mergedAllowClear}
-      className={classNames(cssVarCls, rootCls, className, rootClassName, textArea?.className)}
+      className={classNames(cssVarCls, rootCls, className, rootClassName, contextClassName)}
       classNames={{
         ...classes,
-        ...textArea?.classNames,
+        ...contextClassNames,
         textarea: classNames(
           {
             [`${prefixCls}-sm`]: mergedSize === 'small',
@@ -117,7 +127,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
           },
           hashId,
           classes?.textarea,
-          textArea?.classNames?.textarea,
+          contextClassNames.textarea,
         ),
         variant: classNames(
           {