From ad5b2b25aadc6ba113f9a2f8f303b0f8aefb3cb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 1 Aug 2024 19:13:37 +0800 Subject: [PATCH] test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 109 +++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 101 ++++++++-------- components/bubble/__tests__/index.test.tsx | 10 +- .../demo/{contentRender.md => markdown.md} | 0 .../demo/{contentRender.tsx => markdown.tsx} | 0 components/bubble/hooks/useTypedEffect.ts | 6 +- components/bubble/index.en-US.md | 4 +- components/bubble/index.tsx | 6 +- components/bubble/index.zh-CN.md | 4 +- components/bubble/interface.ts | 2 +- 10 files changed, 123 insertions(+), 119 deletions(-) rename components/bubble/demo/{contentRender.md => markdown.md} (100%) rename components/bubble/demo/{contentRender.tsx => markdown.tsx} (100%) diff --git a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap index 748cbf74..7d89e8c8 100644 --- a/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -12,7 +12,7 @@ exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context > - Good morning, how are you ? + Good morning, how are you?
- What a beautiful day ! + What a beautiful day!
- Hi, good morning, I'm fine ! + Hi, good morning, I'm fine!
- Thank you ! + Thank you!
@@ -143,50 +141,6 @@ exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] = exports[`renders components/bubble/demo/basic.tsx extend context correctly 2`] = `[]`; -exports[`renders components/bubble/demo/contentRender.tsx extend context correctly 1`] = ` -
-
- - - - - -
-
- -

- -

-
-`; - -exports[`renders components/bubble/demo/contentRender.tsx extend context correctly 2`] = `[]`; - exports[`renders components/bubble/demo/loading.tsx extend context correctly 1`] = `
+
+
+ + + + + +
+
+ # +
+
+
+`; + +exports[`renders components/bubble/demo/markdown.tsx extend context correctly 2`] = ` +[ + "Warning: React does not recognize the \`%s\` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase \`%s\` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s", +] +`; + exports[`renders components/bubble/demo/typing.tsx extend context correctly 1`] = `
- Good morning, how are you ? + Good morning, how are you?
- What a beautiful day ! + What a beautiful day!
- Hi, good morning, I'm fine ! + Hi, good morning, I'm fine!
- Thank you ! + Thank you!
@@ -139,44 +137,6 @@ exports[`renders components/bubble/demo/basic.tsx correctly 1`] = ` `; -exports[`renders components/bubble/demo/contentRender.tsx correctly 1`] = ` -
-
- - - - - -
-
-
-`; - exports[`renders components/bubble/demo/loading.tsx correctly 1`] = `
`; +exports[`renders components/bubble/demo/markdown.tsx correctly 1`] = ` +
+
+
+ + + + + +
+
+ # +
+
+
+`; + exports[`renders components/bubble/demo/typing.tsx correctly 1`] = `
+ > + F +
`; diff --git a/components/bubble/__tests__/index.test.tsx b/components/bubble/__tests__/index.test.tsx index 8a0ff42d..3c5b4a1f 100644 --- a/components/bubble/__tests__/index.test.tsx +++ b/components/bubble/__tests__/index.test.tsx @@ -28,16 +28,16 @@ describe('bubble', () => { expect(element?.textContent).toBe('hello world'); }); - it('Bubble support contentRender', () => { + it('Bubble support messageRender', () => { const { container } = render( {content}} + content="test-messageRender" + messageRender={(content) => {content}} />, ); - const element = container.querySelector('.ant-bubble .test-contentRender'); + const element = container.querySelector('.ant-bubble .test-messageRender'); expect(element).toBeTruthy(); - expect(element?.textContent).toBe('test-contentRender'); + expect(element?.textContent).toBe('test-messageRender'); }); it('Bubble support typing', () => { diff --git a/components/bubble/demo/contentRender.md b/components/bubble/demo/markdown.md similarity index 100% rename from components/bubble/demo/contentRender.md rename to components/bubble/demo/markdown.md diff --git a/components/bubble/demo/contentRender.tsx b/components/bubble/demo/markdown.tsx similarity index 100% rename from components/bubble/demo/contentRender.tsx rename to components/bubble/demo/markdown.tsx diff --git a/components/bubble/hooks/useTypedEffect.ts b/components/bubble/hooks/useTypedEffect.ts index 6d9b5df9..a32d5d86 100644 --- a/components/bubble/hooks/useTypedEffect.ts +++ b/components/bubble/hooks/useTypedEffect.ts @@ -11,16 +11,16 @@ const useTypedEffect = ( typingStep: number, typingInterval: number, ): [typedContent: string, isTyping: boolean] => { - const [typingIndex, setTypingIndex] = React.useState(0); + const [typingIndex, setTypingIndex] = React.useState(1); // Reset typing index when content changed useLayoutEffect(() => { - setTypingIndex(0); + setTypingIndex(1); }, [content, typingEnabled]); // Start typing React.useEffect(() => { - if (typingIndex < content.length) { + if (typingEnabled && typingIndex < content.length) { const id = setTimeout(() => { setTypingIndex((prev) => prev + typingStep); }, typingInterval); diff --git a/components/bubble/index.en-US.md b/components/bubble/index.en-US.md index fc986f79..57ca4bda 100644 --- a/components/bubble/index.en-US.md +++ b/components/bubble/index.en-US.md @@ -20,7 +20,7 @@ Often used when chatting. Placement and avatar Loading Typing effect -Content render +Content render ## API @@ -37,7 +37,7 @@ Common props ref：[Common props](/docs/react/common-props) | loading | Loading state of Message | `boolean` | - | | | typing | Show message with typing motion | `boolean \| { step?: number, interval?: number }` | `false` | | | content | Content of bubble | `string` | - | | -| contentRender | Display cuztomized content | `(content?: string) => ReactNode` | - | | +| messageRender | Display customized content | `(content?: string) => ReactNode` | - | | ## Semantic DOM diff --git a/components/bubble/index.tsx b/components/bubble/index.tsx index 6cf94942..c9ae89df 100644 --- a/components/bubble/index.tsx +++ b/components/bubble/index.tsx @@ -22,7 +22,7 @@ const Bubble: React.FC> = (props) => { loading = false, typing, content = '', - contentRender, + messageRender, ...otherHtmlProps } = props; @@ -46,14 +46,14 @@ const Bubble: React.FC> = (props) => { hashId, cssVarCls, `${prefixCls}-${placement}`, - { [`${prefixCls}-typing`]: isTyping && !loading && !contentRender }, + { [`${prefixCls}-typing`]: isTyping && !loading && !messageRender }, ); // ============================ Avatar ============================ const avatarNode = React.isValidElement(avatar) ? avatar : ; // =========================== Content ============================ - const mergedContent = contentRender ? contentRender(typedContent) : typedContent; + const mergedContent = messageRender ? messageRender(typedContent) : typedContent; // ============================ Render ============================ return wrapCSSVar( diff --git a/components/bubble/index.zh-CN.md b/components/bubble/index.zh-CN.md index 9e19ee8b..6cc46d05 100644 --- a/components/bubble/index.zh-CN.md +++ b/components/bubble/index.zh-CN.md @@ -21,7 +21,7 @@ demo: 支持位置和头像 加载中 打字效果 -自定义渲染 +自定义渲染 ## API @@ -38,7 +38,7 @@ demo: | loading | 聊天内容加载状态 | `boolean` | - | | | typing | 设置聊天内容打字动画 | `boolean \| { step?: number, interval?: number }` | `false` | | | content | 聊天内容 | `string` | - | | -| contentRender | 自定义渲染内容 | `(content?: string) => ReactNode` | - | | +| messageRender | 自定义渲染内容 | `(content?: string) => ReactNode` | - | | ## Semantic DOM diff --git a/components/bubble/interface.ts b/components/bubble/interface.ts index 091119a6..e0684a13 100644 --- a/components/bubble/interface.ts +++ b/components/bubble/interface.ts @@ -27,5 +27,5 @@ export interface BubbleProps extends React.HTMLAttributes { loading?: boolean; typing?: boolean | TypingOption; content: string; - contentRender?: (content?: string) => React.ReactNode; + messageRender?: (content?: string) => React.ReactNode; }