Skip to content

Commit

Permalink
feat: Bubble support header & footer (#147)
Browse files Browse the repository at this point in the history 
* feat: support header and footer

* docs: of semetic
  • Loading branch information
@zombieJ
zombieJ authored Oct 10, 2024
1 parent f3e49b3 commit f5016e6
Show file tree
Hide file tree
Showing 10 changed files with 392 additions and 31 deletions.
66 changes: 51 additions & 15 deletions components/bubble/Bubble.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
variant = 'filled',
shape,
onTypingComplete,
header,
footer,
...otherHtmlProps
} = props;

Expand Down Expand Up @@ -109,6 +111,54 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
const mergedContent = messageRender ? messageRender(typedContent as any) : typedContent;

// ============================ Render ============================
let fullContent: React.ReactNode = (
<div
style={{
...contextConfig.styles.content,
...styles.content,
}}
className={classnames(
`${prefixCls}-content`,
`${prefixCls}-content-${variant}`,
shape && `${prefixCls}-content-${shape}`,
contextConfig.classNames.content,
classNames.content,
)}
>
{loading ? <Loading prefixCls={prefixCls} /> : (mergedContent as React.ReactNode)}
</div>
);

if (header || footer) {
fullContent = (
<div className={`${prefixCls}-content-wrapper`}>
{header && (
<div
className={classnames(
`${prefixCls}-header`,
contextConfig.classNames.header,
classNames.header,
)}
>
{header}
</div>
)}
{fullContent}
{footer && (
<div
className={classnames(
`${prefixCls}-footer`,
contextConfig.classNames.footer,
classNames.footer,
)}
>
{footer}
</div>
)}
</div>
);
}

return wrapCSSVar(
<div
style={{
Expand Down Expand Up @@ -137,21 +187,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
)}

{/* Content */}
<div
style={{
...contextConfig.styles.content,
...styles.content,
}}
className={classnames(
`${prefixCls}-content`,
`${prefixCls}-content-${variant}`,
shape && `${prefixCls}-content-${shape}`,
contextConfig.classNames.content,
classNames.content,
)}
>
{loading ? <Loading prefixCls={prefixCls} /> : (mergedContent as React.ReactNode)}
</div>
{fullContent}
</div>,
);
};
Expand Down
143 changes: 133 additions & 10 deletions components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context correctly 1`] = `
<div
class="ant-flex css-var-rh ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
class="ant-flex css-var-rj ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-bubble css-var-rh ant-bubble-start"
class="ant-bubble css-var-rj ant-bubble-start"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rh ant-avatar-css-var"
class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rj ant-avatar-css-var"
style="color: #f56a00; background-color: #fde3cf;"
>
<span
Expand Down Expand Up @@ -42,14 +42,14 @@ exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context
</div>
</div>
<div
class="ant-bubble css-var-rh ant-bubble-start"
class="ant-bubble css-var-rj ant-bubble-start"
>
<div
class="ant-bubble-avatar"
style="visibility: hidden;"
>
<span
class="ant-avatar ant-avatar-circle css-var-rh ant-avatar-css-var"
class="ant-avatar ant-avatar-circle css-var-rj ant-avatar-css-var"
>
<span
class="ant-avatar-string"
Expand All @@ -64,13 +64,13 @@ exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context
</div>
</div>
<div
class="ant-bubble css-var-rh ant-bubble-end"
class="ant-bubble css-var-rj ant-bubble-end"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rh ant-avatar-css-var"
class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rj ant-avatar-css-var"
style="color: #fff; background-color: #87d068;"
>
<span
Expand Down Expand Up @@ -101,14 +101,14 @@ exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context
</div>
</div>
<div
class="ant-bubble css-var-rh ant-bubble-end"
class="ant-bubble css-var-rj ant-bubble-end"
>
<div
class="ant-bubble-avatar"
style="visibility: hidden;"
>
<span
class="ant-avatar ant-avatar-circle css-var-rh ant-avatar-css-var"
class="ant-avatar ant-avatar-circle css-var-rj ant-avatar-css-var"
>
<span
class="ant-avatar-string"
Expand All @@ -129,7 +129,7 @@ exports[`renders components/bubble/demo/avatar-and-placement.tsx extend context

exports[`renders components/bubble/demo/basic.tsx extend context correctly 1`] = `
<div
class="ant-bubble css-var-rf ant-bubble-start"
class="ant-bubble css-var-rh ant-bubble-start"
>
<div
class="ant-bubble-content ant-bubble-content-filled"
Expand All @@ -141,6 +141,129 @@ 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/header-and-footer.tsx extend context correctly 1`] = `
<div
class="ant-bubble css-var-rf ant-bubble-start"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-icon css-var-rf ant-avatar-css-var"
>
<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-wrapper"
>
<div
class="ant-bubble-header"
>
Ant Design X
</div>
<div
class="ant-bubble-content ant-bubble-content-filled"
>
Hello, welcome to use Ant Design X! Just ask if you have any questions.
</div>
<div
class="ant-bubble-footer"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center css-var-rf"
style="column-gap: 4px; row-gap: 4px;"
>
<div
class="ant-space-item"
>
<button
class="ant-btn css-var-rf ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="sync"
class="anticon anticon-sync"
role="img"
>
<svg
aria-hidden="true"
data-icon="sync"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
/>
</svg>
</span>
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn css-var-rf ant-btn-default ant-btn-color-default ant-btn-variant-text ant-btn-sm ant-btn-icon-only"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="copy"
class="anticon anticon-copy"
role="img"
>
<svg
aria-hidden="true"
data-icon="copy"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders components/bubble/demo/header-and-footer.tsx extend context correctly 2`] = `[]`;

exports[`renders components/bubble/demo/list.tsx extend context correctly 1`] = `
<div
class="ant-flex css-var-rb ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
Expand Down
Loading

0 comments on commit f5016e6

Please sign in to comment.