demo: simplify

ant-design · Aug 1, 2024 · ea67c3e · ea67c3e
1 parent ad5b2b2
commit ea67c3e
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 43 deletions.
diff --git a/components/bubble/demo/markdown.tsx b/components/bubble/demo/markdown.tsx
@@ -4,43 +4,44 @@ import { UserOutlined } from '@ant-design/icons';
 import markdownit from 'markdown-it';
 import { Bubble } from '@ant-design/x';
 import type { BubbleProps } from '@ant-design/x';
-
-const sentences = [
-  '# Title \n An enterprise-class UI design language and React UI library. \n ...丨',
-  '# 标题 \n 企业级产品设计体系，创造高效愉悦的工作体验。\n ...丨',
-];
+import { Typography } from 'antd';
 
 const md = markdownit({ html: true, breaks: true });
 
-const useLoopSentence = () => {
-  const [index, setIndex] = React.useState<number>(0);
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
-  React.useEffect(() => {
-    timerRef.current = setTimeout(
-      () => setIndex((prevState) => (prevState ? 0 : 1)),
-      sentences[index].length * 100 + 1000,
-    );
-    return () => clearTimeout(timerRef.current);
-  }, [index]);
-  return sentences[index];
-};
+const text = `
+> Render as markdown content to show rich text!
 
-const contentRender: BubbleProps['contentRender'] = (content) => {
-  if (!content) {
-    return null;
-  }
-  return <span dangerouslySetInnerHTML={{ __html: md.render(content) }} />;
-};
+Link: [Ant Design X](https://x.ant.design)
+`.trim();
+
+const contentRender: BubbleProps['messageRender'] = (content) => (
+  <Typography>
+    <div dangerouslySetInnerHTML={{ __html: md.render(content) }} />
+  </Typography>
+);
 
 const App = () => {
-  const content = useLoopSentence();
+  const [renderKey, setRenderKey] = React.useState(0);
+
+  React.useEffect(() => {
+    const id = setTimeout(
+      () => {
+        setRenderKey((prev) => prev + 1);
+      },
+      text.length * 100 + 2000,
+    );
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [renderKey]);
 
   return (
-    <div style={{ height: 100 }}>
+    <div style={{ height: 100 }} key={renderKey}>
       <Bubble
         typing
-        content={content}
-        contentRender={contentRender}
+        content={text}
+        messageRender={contentRender}
         avatar={{ icon: <UserOutlined /> }}
       />
     </div>

diff --git a/components/bubble/demo/typing.tsx b/components/bubble/demo/typing.tsx
@@ -2,27 +2,29 @@ import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { Bubble } from '@ant-design/x';
 
-const sentences = ['Feel free to use Ant Design !', '欢迎使用 Ant Design！'];
+const text = 'Ant Design X love you!';
+
+const App = () => {
+  const [renderKey, setRenderKey] = React.useState(0);
 
-const useLoopSentence = () => {
-  const [index, setIndex] = React.useState<number>(0);
-  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
   React.useEffect(() => {
-    timerRef.current = setTimeout(
-      () => setIndex((prevState) => (prevState ? 0 : 1)),
-      sentences[index].length * 100 + 1000,
+    const id = setTimeout(
+      () => {
+        setRenderKey((prev) => prev + 1);
+      },
+      text.length * 100 + 2000,
     );
-    return () => clearTimeout(timerRef.current);
-  }, [index]);
-  return sentences[index];
-};
 
-const App = () => {
-  const content = useLoopSentence();
+    return () => {
+      clearTimeout(id);
+    };
+  }, [renderKey]);
+
   return (
     <Bubble
-      content={content}
-      typing={{ step: 1, interval: 100 }}
+      key={renderKey}
+      content={text}
+      typing={{ step: 2, interval: 100 }}
       avatar={{ icon: <UserOutlined /> }}
     />
   );

diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts
@@ -27,5 +27,5 @@ export interface BubbleProps extends React.HTMLAttributes<HTMLDivElement> {
   loading?: boolean;
   typing?: boolean | TypingOption;
   content: string;
-  messageRender?: (content?: string) => React.ReactNode;
+  messageRender?: (content: string) => React.ReactNode;
 }