refactor: BubbleProps

ant-design · Jan 7, 2025 · 140b1b3 · 140b1b3
1 parent bf011dd
commit 140b1b3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/components/bubble/Bubble.tsx b/components/bubble/Bubble.tsx
@@ -6,7 +6,7 @@ import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
 import useTypedEffect from './hooks/useTypedEffect';
 import useTypingConfig from './hooks/useTypingConfig';
-import type { BubbleProps } from './interface';
+import type { BubbleContentType, BubbleProps } from './interface';
 import Loading from './loading';
 import useStyle from './style';
 
@@ -213,10 +213,14 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   );
 };
 
+type ForwardBubbleType = <T extends BubbleContentType = BubbleContentType>(
+  props: BubbleProps<T> & { ref?: React.Ref<BubbleRef> },
+) => React.ReactElement;
+
 const ForwardBubble = React.forwardRef(Bubble);
 
 if (process.env.NODE_ENV !== 'production') {
   ForwardBubble.displayName = 'Bubble';
 }
 
-export default ForwardBubble;
+export default ForwardBubble as ForwardBubbleType;
diff --git a/components/bubble/demo/gpt-vis.tsx b/components/bubble/demo/gpt-vis.tsx
@@ -20,7 +20,9 @@ Here’s a visualization of Haidilao's food delivery revenue from 2013 to 2022.
 \`\`\`
 `;
 
-const RenderMarkdown: BubbleProps['messageRender'] = (content) => <GPTVis>{content}</GPTVis>;
+const RenderMarkdown: BubbleProps<string>['messageRender'] = (content) => (
+  <GPTVis>{content}</GPTVis>
+);
 
 const App = () => {
   const [rerenderKey, setRerenderKey] = React.useState(0);

diff --git a/components/bubble/demo/markdown.tsx b/components/bubble/demo/markdown.tsx
@@ -14,7 +14,7 @@ const text = `
 Link: [Ant Design X](https://x.ant.design)
 `.trim();
 
-const renderMarkdown: BubbleProps['messageRender'] = (content) => (
+const renderMarkdown: BubbleProps<string>['messageRender'] = (content) => (
   <Typography>
     {/* biome-ignore lint/security/noDangerouslySetInnerHtml: used in demo */}
     <div dangerouslySetInnerHTML={{ __html: md.render(content) }} />

diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
@@ -1,4 +1,5 @@
 import type { AvatarProps } from 'antd';
+import type { AnyObject } from '../_util/type';
 
 export interface TypingOption {
   /**
@@ -17,9 +18,10 @@ export interface TypingOption {
 
 type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
 
-type BubbleContentType = React.ReactNode | object;
+export type BubbleContentType = React.ReactNode | AnyObject;
 
-export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+export interface BubbleProps<T extends BubbleContentType = BubbleContentType>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   prefixCls?: string;
   rootClassName?: string;
   styles?: Partial<Record<SemanticType, React.CSSProperties>>;
@@ -28,8 +30,8 @@ export interface BubbleProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   placement?: 'start' | 'end';
   loading?: boolean;
   typing?: boolean | TypingOption;
-  content?: BubbleContentType;
-  messageRender?: (content: BubbleContentType) => React.ReactNode;
+  content?: T;
+  messageRender?: (content: T) => React.ReactNode;
   loadingRender?: () => React.ReactNode;
   variant?: 'filled' | 'borderless' | 'outlined' | 'shadow';
   shape?: 'round' | 'corner';