refactor: useXComponentConfig

ant-design · Sep 20, 2024 · 0679f54 · 0679f54
1 parent 1d2000b
commit 0679f54
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 88 deletions.
diff --git a/components/_util/hooks/use-x-component-config.ts b/components/_util/hooks/use-x-component-config.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import XProviderContext from '../../x-provider/context';
+import XProviderContext, { defaultXComponentConfig } from '../../x-provider/context';
 
 import type { XComponentsConfig } from '../../x-provider/context';
 
@@ -8,7 +8,13 @@ const useXComponentConfig = <C extends keyof XComponentsConfig>(
 ): Required<XComponentsConfig>[C] => {
   const xProviderContext = React.useContext(XProviderContext);
 
-  return xProviderContext[component] || {};
+  return React.useMemo(
+    () => ({
+      ...defaultXComponentConfig,
+      ...xProviderContext[component],
+    }),
+    [xProviderContext[component]],
+  );
 };
 
 export default useXComponentConfig;
diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { Avatar } from 'antd';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 import useTypedEffect from './hooks/useTypedEffect';
 import useTypingConfig from './hooks/useTypingConfig';
 import type { BubbleProps } from './interface';
@@ -47,12 +47,12 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   }));
 
   // ============================ Prefix ============================
-  const { direction, getPrefixCls } = useXProvider();
+  const { direction, getPrefixCls } = useXProviderContext();
 
   const prefixCls = getPrefixCls('bubble', customizePrefixCls);
 
   // ===================== Component Config =========================
-  const compConfig = useXComponentConfig('bubble');
+  const contextConfig = useXComponentConfig('bubble');
 
   // ============================ Typing ============================
   const [typingEnabled, typingStep, typingInterval] = useTypingConfig(typing);
@@ -74,7 +74,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   const mergedCls = classnames(
     prefixCls,
     rootClassName,
-    compConfig.className,
+    contextConfig.className,
     className,
     hashId,
     cssVarCls,
@@ -95,7 +95,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   return wrapCSSVar(
     <div
       style={{
-        ...compConfig.style,
+        ...contextConfig.style,
         ...style,
       }}
       className={mergedCls}
@@ -106,12 +106,12 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       {avatar && (
         <div
           style={{
-            ...compConfig.styles?.avatar,
+            ...contextConfig.styles.avatar,
             ...styles.avatar,
           }}
           className={classnames(
             `${prefixCls}-avatar`,
-            compConfig.classNames?.avatar,
+            contextConfig.classNames.avatar,
             classNames.avatar,
           )}
         >
@@ -122,12 +122,12 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
       {/* Content */}
       <div
         style={{
-          ...compConfig.styles?.content,
+          ...contextConfig.styles.content,
           ...styles.content,
         }}
         className={classnames(
           `${prefixCls}-content`,
-          compConfig.classNames?.content,
+          contextConfig.classNames.content,
           classNames.content,
         )}
       >

diff --git a/components/bubble/BubbleList.tsx b/components/bubble/BubbleList.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useEvent } from 'rc-util';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 import Bubble, { BubbleContext } from './Bubble';
 import type { BubbleRef } from './Bubble';
 import useListData from './hooks/useListData';
@@ -57,7 +57,7 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
   const bubbleRefs = React.useRef<Record<string, BubbleRef>>({});
 
   // ============================ Prefix ============================
-  const { getPrefixCls } = useXProvider();
+  const { getPrefixCls } = useXProviderContext();
 
   const prefixCls = getPrefixCls('bubble', customizePrefixCls);
   const listPrefixCls = `${prefixCls}-list`;

diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
@@ -11,17 +11,13 @@ export interface TypingOption {
   interval?: number;
 }
 
+type SemanticType = 'avatar' | 'content';
+
 export interface BubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   prefixCls?: string;
   rootClassName?: string;
-  classNames?: {
-    avatar?: string;
-    content?: string;
-  };
-  styles?: {
-    avatar?: React.CSSProperties;
-    content?: React.CSSProperties;
-  };
+  styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+  classNames?: Partial<Record<SemanticType, string>>;
   avatar?: AvatarProps | React.ReactElement;
   placement?: 'start' | 'end';
   loading?: boolean;

diff --git a/components/conversations/index.tsx b/components/conversations/index.tsx
@@ -7,7 +7,7 @@ import ConversationsItem, { type ConversationsItemProps } from './Item';
 
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 import useGroupable from './hooks/useGroupable';
 
 import useStyle from './style';
@@ -116,19 +116,19 @@ const Conversations: React.FC<ConversationsProps> = (props) => {
   const [groupList, enableGroup] = useGroupable(groupable, items);
 
   // ============================ Prefix ============================
-  const { getPrefixCls, direction } = useXProvider();
+  const { getPrefixCls, direction } = useXProviderContext();
 
   const prefixCls = getPrefixCls('conversations', customizePrefixCls);
 
   // ===================== Component Config =========================
-  const compConfig = useXComponentConfig('conversations');
+  const contextConfig = useXComponentConfig('conversations');
 
   // ============================ Style ============================
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedCls = classnames(
     prefixCls,
-    compConfig.className,
+    contextConfig.className,
     className,
     rootClassName,
     hashId,
@@ -152,7 +152,7 @@ const Conversations: React.FC<ConversationsProps> = (props) => {
     <ul
       {...domProps}
       style={{
-        ...compConfig.style,
+        ...contextConfig.style,
         ...style,
       }}
       className={mergedCls}
@@ -164,8 +164,8 @@ const Conversations: React.FC<ConversationsProps> = (props) => {
             info={convInfo}
             prefixCls={prefixCls}
             direction={direction}
-            className={classnames(classNames.item, compConfig.classNames?.item)}
-            style={{ ...compConfig.styles?.item, ...styles.item }}
+            className={classnames(classNames.item, contextConfig.classNames.item)}
+            style={{ ...contextConfig.styles.item, ...styles.item }}
             menu={typeof menu === 'function' ? menu(convInfo) : menu}
             active={mergedActiveKey === convInfo.key}
             onClick={onConversationItemClick}

diff --git a/components/prompts/index.tsx b/components/prompts/index.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import React from 'react';
 
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 
 import useStyle from './style';
 
@@ -85,19 +85,19 @@ const Prompts: React.FC<PromptsProps> = (props) => {
   } = props;
 
   // ============================ PrefixCls ============================
-  const { getPrefixCls, direction } = useXProvider();
+  const { getPrefixCls, direction } = useXProviderContext();
 
   const prefixCls = getPrefixCls('prompts', customizePrefixCls);
 
   // ===================== Component Config =========================
-  const compConfig = useXComponentConfig('prompts');
+  const contextConfig = useXComponentConfig('prompts');
 
   // ============================ Style ============================
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
   const mergedCls = classnames(
     prefixCls,
-    compConfig.className,
+    contextConfig.className,
     className,
     rootClassName,
     hashId,
@@ -109,41 +109,41 @@ const Prompts: React.FC<PromptsProps> = (props) => {
 
   const mergedListCls = classnames(
     `${prefixCls}-list`,
-    compConfig.classNames?.list,
+    contextConfig.classNames.list,
     classNames.list,
     { [`${prefixCls}-list-wrap`]: wrap },
     { [`${prefixCls}-list-vertical`]: vertical },
   );
 
   // ============================ Render ============================
   return wrapCSSVar(
-    <div {...htmlProps} className={mergedCls} style={{ ...style, ...compConfig.style }}>
+    <div {...htmlProps} className={mergedCls} style={{ ...style, ...contextConfig.style }}>
       {/* Title */}
       {title && (
         <Typography.Title
           level={5}
           className={classnames(
             `${prefixCls}-title`,
-            compConfig.classNames?.title,
+            contextConfig.classNames.title,
             classNames.title,
           )}
-          style={{ ...compConfig.styles?.title, ...styles.title }}
+          style={{ ...contextConfig.styles.title, ...styles.title }}
         >
           {title}
         </Typography.Title>
       )}
       {/* Prompt List */}
-      <ul className={mergedListCls} style={{ ...compConfig.styles?.list, ...styles.list }}>
+      <ul className={mergedListCls} style={{ ...contextConfig.styles.list, ...styles.list }}>
         {items?.map((info, index) => (
           <li key={info.key || `key_${index}`}>
             {/* Prompt Item */}
             <Button
               type={info.disabled ? 'default' : 'text'}
-              style={{ ...compConfig.styles?.item, ...styles.item }}
+              style={{ ...contextConfig.styles.item, ...styles.item }}
               disabled={info.disabled}
               className={classnames(
                 `${prefixCls}-item`,
-                compConfig.classNames?.item,
+                contextConfig.classNames.item,
                 classNames.item,
               )}
               onClick={() => onItemClick?.({ data: info })}
@@ -154,10 +154,10 @@ const Prompts: React.FC<PromptsProps> = (props) => {
               <div
                 className={classnames(
                   `${prefixCls}-content`,
-                  compConfig.classNames?.itemContent,
+                  contextConfig.classNames.itemContent,
                   classNames.itemContent,
                 )}
-                style={{ ...compConfig.styles?.itemContent, ...styles.itemContent }}
+                style={{ ...contextConfig.styles.itemContent, ...styles.itemContent }}
               >
                 {/* Label */}
                 {info.label && (

diff --git a/components/sender/index.tsx b/components/sender/index.tsx
@@ -6,7 +6,7 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
 import getValue from 'rc-util/lib/utils/get';
 import React from 'react';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 import { ActionButtonContext } from './components/ActionButton';
 import ClearButton from './components/ClearButton';
 import LoadingButton from './components/LoadingButton';
@@ -88,7 +88,7 @@ const Sender: React.FC<SenderProps> = (props) => {
   } = props;
 
   // ============================= MISC =============================
-  const { direction, getPrefixCls } = useXProvider();
+  const { direction, getPrefixCls } = useXProviderContext();
   const prefixCls = getPrefixCls('sender', customizePrefixCls);
 
   const domProps = pickAttrs(rest, {
@@ -98,13 +98,13 @@ const Sender: React.FC<SenderProps> = (props) => {
   });
 
   // ===================== Component Config =========================
-  const compConfig = useXComponentConfig('sender');
+  const contextConfig = useXComponentConfig('sender');
 
   // ============================ Styles ============================
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const mergedCls = classnames(
     prefixCls,
-    compConfig.className,
+    contextConfig.className,
     className,
     rootClassName,
     hashId,
@@ -192,11 +192,15 @@ const Sender: React.FC<SenderProps> = (props) => {
 
   // ============================ Render ============================
   return wrapCSSVar(
-    <div className={mergedCls} style={{ ...compConfig.style, ...style }}>
+    <div className={mergedCls} style={{ ...contextConfig.style, ...style }}>
       <InputTextArea
         {...domProps}
-        style={{ ...compConfig.styles?.input, ...styles.input }}
-        className={classnames(`${prefixCls}-input`, compConfig.classNames?.input, classNames.input)}
+        style={{ ...contextConfig.styles.input, ...styles.input }}
+        className={classnames(
+          `${prefixCls}-input`,
+          contextConfig.classNames.input,
+          classNames.input,
+        )}
         autoSize={{ maxRows: 8 }}
         value={innerValue}
         onChange={(e) => {
@@ -211,10 +215,10 @@ const Sender: React.FC<SenderProps> = (props) => {
       <div
         className={classnames(
           `${prefixCls}-actions-list`,
-          compConfig.classNames?.actions,
+          contextConfig.classNames.actions,
           classNames.actions,
         )}
-        style={{ ...compConfig.styles?.actions, ...styles.actions }}
+        style={{ ...contextConfig.styles.actions, ...styles.actions }}
       >
         <ActionButtonContext.Provider
           value={{

diff --git a/components/suggestion/index.tsx b/components/suggestion/index.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { useEvent, useMergedState } from 'rc-util';
 import React, { useState } from 'react';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
-import { useXProvider } from '../x-provider';
+import { useXProviderContext } from '../x-provider';
 import useStyle from './style';
 import useActive from './useActive';
 
@@ -35,6 +35,8 @@ export interface SuggestionProps<T = any> {
   items: SuggestionItem[] | ((info?: T) => SuggestionItem[]);
   onSelect?: (value: string) => void;
   block?: boolean;
+  styles?: Partial<Record<string, React.CSSProperties>>;
+  classNames?: Partial<Record<string, string>>;
 }
 
 function Suggestion<T = any>(props: SuggestionProps<T>) {
@@ -52,14 +54,14 @@ function Suggestion<T = any>(props: SuggestionProps<T>) {
   } = props;
 
   // ============================= MISC =============================
-  const { direction, getPrefixCls } = useXProvider();
+  const { direction, getPrefixCls } = useXProviderContext();
   const prefixCls = getPrefixCls('suggestion', customizePrefixCls);
   const itemCls = `${prefixCls}-item`;
 
   const isRTL = direction === 'rtl';
 
   // ===================== Component Config =========================
-  const compConfig = useXComponentConfig('suggestion');
+  const contextConfig = useXComponentConfig('suggestion');
 
   // ============================ Styles ============================
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
@@ -140,15 +142,15 @@ function Suggestion<T = any>(props: SuggestionProps<T>) {
       <div
         className={classnames(
           prefixCls,
-          compConfig.className,
+          contextConfig.className,
           rootClassName,
           className,
           `${prefixCls}-wrapper`,
           hashId,
           cssVarCls,
         )}
         style={{
-          ...compConfig.style,
+          ...contextConfig.style,
           ...style,
         }}
       >