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: Add index to roles function - for BubbleList #500

Merged
merged 11 commits into from
Feb 13, 2025
Merged

feat: Add index to roles function - for BubbleList #500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
34cf16e
feat(BubbleList.tsx, useListData.ts)：更新RolesType类型以包含索引参数
Jan 24, 2025
816e518
fix(bubble): 更新roles属性的类型说明，添加index参数支持
Jan 24, 2025
84a0ea5
Merge branch 'main' into feat/bubble-list-roles
YumoImer Jan 24, 2025
e950ef8
feat(debug.tsx): 添加Bubble.List的测试Demo
Jan 24, 2025
eb0e710
feat: add demo test for BubbleList roles.
Jan 26, 2025
fc5a02a
Merge branch 'main' into feat/bubble-list-roles
YumoImer Jan 26, 2025
faf94c7
chore: Add label for illustration; Run unit tests.
Feb 5, 2025
6d00c5f
Merge branch 'main' into feat/bubble-list-roles
YumoImer Feb 10, 2025
ca74f2b
Revert "chore: Add label for illustration; Run unit tests."
Feb 10, 2025
9944c5d
chore: fix snapshots.
Feb 10, 2025
0347204
Merge branch 'main' into feat/bubble-list-roles
YumoImer Feb 13, 2025
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
2 changes: 1 addition & 1 deletion components/bubble/BubbleList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export type BubbleDataType = BubbleProps & {

export type RoleType = Partial<Omit<BubbleProps, 'content'>>;

export type RolesType = Record<string, RoleType> | ((bubbleDataP: BubbleDataType) => RoleType);
export type RolesType = Record<string, RoleType> | ((bubbleDataP: BubbleDataType, index: number) => RoleType);

export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
prefixCls?: string;
Expand Down
352 changes: 336 additions & 16 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 @@ -1005,6 +1005,294 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =
</div>
</div>
</div>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
List with roles
</span>
</div>
<div
class="ant-flex ant-flex-gap-small"
style="align-self: flex-end;"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Add Bubble
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Scroll To First
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
disabled=""
type="button"
>
<span>
Scroll To Marked index:
</span>
</button>
</div>
<div
class="ant-bubble-list ant-bubble-list-reach-end"
style="max-height: 300px;"
>
<div
class="ant-bubble ant-bubble-end"
role="user"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
user
</div>
<div
class="ant-bubble-content ant-bubble-content-outlined"
style="cursor: pointer;"
>
<div
class="acss-8wqn66"
>
block block block block block block block block block block block block block block block block block block block block block block block block block
</div>
</div>
<div
class="ant-bubble-footer"
>
<span>
# 0
</span>
</div>
</div>
</div>
<div
class="ant-bubble ant-bubble-start"
role="ai"
style="max-width: 600px;"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
ai
</div>
<div
class="ant-bubble-content ant-bubble-content-borderless"
style="cursor: pointer;"
>
longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div
class="ant-bubble-footer"
>
<span>
# 1
</span>
</div>
</div>
</div>
<div
class="ant-bubble ant-bubble-end"
role="user"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
user
</div>
<div
class="ant-bubble-content ant-bubble-content-outlined"
style="cursor: pointer;"
>
<div
class="acss-8wqn66"
>
block block block block block block block block block block block block block block block block block block block block block block block block block
</div>
</div>
<div
class="ant-bubble-footer"
>
<span>
# 2
</span>
</div>
</div>
</div>
<div
class="ant-bubble ant-bubble-start"
role="ai"
style="max-width: 600px;"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
ai
</div>
<div
class="ant-bubble-content ant-bubble-content-borderless"
style="cursor: pointer;"
>
longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div
class="ant-bubble-footer"
>
<span>
# 3
</span>
</div>
</div>
</div>
<div
class="ant-bubble ant-bubble-end"
role="user"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
user
</div>
<div
class="ant-bubble-content ant-bubble-content-outlined"
style="cursor: pointer;"
>
<div
class="acss-8wqn66"
>
block block block block block block block block block block block block block block block block block block block block block block block block block
</div>
</div>
<div
class="ant-bubble-footer"
>
<span>
# 4
</span>
</div>
</div>
</div>
<div
class="ant-bubble ant-bubble-start"
role="ai"
style="max-width: 600px;"
>
<div
class="ant-bubble-avatar"
>
<span
class="ant-avatar ant-avatar-circle ant-avatar-image"
>
<img
src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
/>
</span>
</div>
<div
class="ant-bubble-content-wrapper"
>
<div
class="ant-bubble-header"
>
ai
</div>
<div
class="ant-bubble-content ant-bubble-content-borderless"
style="cursor: pointer;"
>
longgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
<div
class="ant-bubble-footer"
>
<span>
# 5
</span>
</div>
</div>
</div>
</div>
</div>
`;

Expand Down Expand Up @@ -1138,25 +1426,57 @@ exports[`renders components/bubble/demo/list.tsx extend context correctly 1`] =
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
>
<div
class="ant-flex ant-flex-gap-small"
style="align-self: flex-end;"
class="ant-flex ant-flex-justify-space-between ant-flex-gap-small"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
<div
class="ant-flex ant-flex-align-center ant-flex-gap-large"
>
<span>
Add Bubble
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
Use roles as:
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
>
Function
</span>
<span
class="ant-switch-inner-unchecked"
>
Object
</span>
</span>
</button>
</div>
<div
class="ant-flex ant-flex-gap-small"
>
<span>
Scroll To First
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Add Bubble
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
Scroll To First
</span>
</button>
</div>
</div>
<div
class="ant-bubble-list ant-bubble-list-reach-end"
Expand Down
Loading