Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(bubble): add typing suffix support (#316) #380

Merged
merged 1 commit into from
Dec 20, 2024
Merged

feat(bubble): add typing suffix support (#316) #380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 8 additions & 3 deletions components/bubble/Bubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
const contextConfig = useXComponentConfig('bubble');

// ============================ Typing ============================
const [typingEnabled, typingStep, typingInterval] = useTypingConfig(typing);
const [typingEnabled, typingStep, typingInterval, typingSuffix] = useTypingConfig(typing);

const [typedContent, isTyping] = useTypedEffect(
content,
Expand Down Expand Up @@ -101,7 +101,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
`${prefixCls}-${placement}`,
{
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-typing`]: isTyping && !loading && !messageRender,
[`${prefixCls}-typing`]: isTyping && !loading && !messageRender && !typingSuffix,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ensure that typingSuffix is correctly handled when isTyping is true. If typingSuffix is a React component, ensure it is rendered correctly and does not cause any rendering issues.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话还是不太好理解，有 typingSuffix 应该也是输入中，现在的逻辑是反的。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

// 默认的打字效果：输入中 且 没有配置 typingSuffix
const isDefaultTyping = isTyping && !typingSuffix;

// css
[`${prefixCls}-typing`]: isDefaultTyping && !loading && !messageRender,

改成这样：多一步解释代码，方便后人理解是不好点～

想了下 typingSuffix 确实只代表一个后缀，不代表输入中。或者有啥建议没～

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typing: { suffix: 'x' } API 这么设计的话当然就代表是输入中。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有道理，那感觉这里先不合并，我们后续再议

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

或者 typingSuffix -> customSuffix 怎么样，这样语义是正确的。

[${prefixCls}-typing]: isTyping && !loading && !messageRender && !customSuffix,

然后我在想，先合并我再提 PR 把这改了，因为 feature 是保护分支，不能直接 push

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我先合了，不是很大的问题。

},
);

Expand All @@ -116,7 +116,12 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
if (loading) {
contentNode = loadingRender ? loadingRender() : <Loading prefixCls={prefixCls} />;
} else {
contentNode = mergedContent as React.ReactNode;
contentNode = (
<>
{mergedContent as React.ReactNode}
{isTyping && typingSuffix}
</>
);
}

let fullContent: React.ReactNode = (
Expand Down
36 changes: 36 additions & 0 deletions components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1918,6 +1918,42 @@ exports[`renders components/bubble/demo/typing.tsx extend context correctly 1`]
A
</div>
</div>
<div
class="ant-bubble ant-bubble-start"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-bubble-content ant-bubble-content-filled"
>
A💗
</div>
</div>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
style="align-self: flex-end;"
Expand Down
38 changes: 38 additions & 0 deletions components/bubble/__tests__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1898,6 +1898,44 @@ exports[`renders components/bubble/demo/typing.tsx correctly 1`] = `
A
</div>
</div>
<div
class="ant-bubble ant-bubble-start"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon"
>
<span
aria-label="user"
class="anticon anticon-user"
role="img"
>
<svg
aria-hidden="true"
data-icon="user"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-bubble-content ant-bubble-content-filled"
>
A
<!-- -->
💗
</div>
</div>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
style="align-self:flex-end"
Expand Down
7 changes: 6 additions & 1 deletion components/bubble/demo/typing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Bubble } from '@ant-design/x';
import { Button, Flex } from 'antd';
import React from 'react';

const text = 'Ant Design X love you! ';

Expand All @@ -15,6 +15,11 @@ const App = () => {
typing={{ step: 2, interval: 50 }}
avatar={{ icon: <UserOutlined /> }}
/>
<Bubble
content={text.repeat(repeat)}
typing={{ step: 2, interval: 50, suffix: <>💗</> }}
avatar={{ icon: <UserOutlined /> }}
/>

<Button
style={{ alignSelf: 'flex-end' }}
Expand Down
10 changes: 7 additions & 3 deletions components/bubble/hooks/useTypingConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,25 @@ import * as React from 'react';
import type { BubbleProps, TypingOption } from '../interface';

function useTypingConfig(typing: BubbleProps['typing']) {
return React.useMemo<[enableTyping: boolean, step: number, interval: number]>(() => {
return React.useMemo<
[enableTyping: boolean, step: number, interval: number, suffix: React.ReactNode]
>(() => {
if (!typing) {
return [false, 0, 0];
return [false, 0, 0, null];
}

let baseConfig: Required<TypingOption> = {
step: 1,
interval: 50,
// set default suffix is empty
suffix: null,
};

if (typeof typing === 'object') {
baseConfig = { ...baseConfig, ...typing };
}

return [true, baseConfig.step, baseConfig.interval];
return [true, baseConfig.step, baseConfig.interval, baseConfig.suffix];
}, [typing]);
}

Expand Down
4 changes: 4 additions & 0 deletions components/bubble/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ export interface TypingOption {
* @default 50
*/
interval?: number;
/**
* @default null
*/
suffix?: React.ReactNode;
}

type SemanticType = 'avatar' | 'content' | 'header' | 'footer';
Expand Down
Loading