Skip to content

Commit

Permalink
refactor: add _key for MemoBubbleListItem
Browse files Browse the repository at this point in the history
  • Loading branch information
@YumoImer
YumoImer committed Feb 10, 2025
1 parent 6de916c commit 914a608
Show file tree
Hide file tree
Showing 3 changed files with 474 additions and 7 deletions.
19 changes: 12 additions & 7 deletions components/bubble/BubbleList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,21 @@ export interface BubbleListProps extends React.HTMLAttributes<HTMLDivElement> {
roles?: RolesType;
}

const BubbleListItem: React.ForwardRefRenderFunction<Record<string, BubbleRef>, BubbleProps> = (
props,
ref,
) => (
interface BubbleListItemProps extends BubbleProps {
_key?: BubbleDataType['key'];
}

const BubbleListItem: React.ForwardRefRenderFunction<
Record<string, BubbleRef>,
BubbleListItemProps
> = ({ _key, ...restProps }, ref) => (
<Bubble
{...props}
{...restProps}
ref={(node) => {
if (node) {
(ref as React.RefObject<Record<string, BubbleRef>>).current[props.id!] = node;
(ref as React.RefObject<Record<string, BubbleRef>>).current[_key!] = node;
} else {
delete (ref as React.RefObject<Record<string, BubbleRef>>).current?.[props.id!];
delete (ref as React.RefObject<Record<string, BubbleRef>>).current?.[_key!];
}
}}
/>
Expand Down Expand Up @@ -200,6 +204,7 @@ const BubbleList: React.ForwardRefRenderFunction<BubbleListRef, BubbleListProps>
<MemoBubbleListItem
{...bubble}
key={key}
_key={key}
ref={bubbleRefs}
typing={initialized ? bubble.typing : false}
/>
Expand Down
288 changes: 288 additions & 0 deletions components/bubble/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1010,6 +1010,294 @@ exports[`renders components/bubble/demo/debug.tsx extend context correctly 1`] =

exports[`renders components/bubble/demo/debug.tsx extend context correctly 2`] = `[]`;

exports[`renders components/bubble/demo/debug-list.tsx extend context correctly 1`] = `
<div
class="ant-app"
>
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap: 16px;"
>
<div
class="ant-flex"
style="gap: 16px;"
>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
unshift bubble
</span>
</button>
<button
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
type="button"
>
<span>
push bubble
</span>
</button>
<div
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
delete bubble
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="#0 - message content"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
0
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
title="#0 - message content"
>
<div
class="ant-select-item-option-content"
>
#0 - message content
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
style="width: 200px;"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-wrap"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-placeholder"
>
scroll to
</span>
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="#0 - message content"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
0
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto; overflow-anchor: none;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
title="#0 - message content"
>
<div
class="ant-select-item-option-content"
>
#0 - message content
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
</div>
<div
class="ant-bubble-list ant-bubble-list-reach-end"
style="height: 300px; overflow: auto;"
>
<div
class="ant-bubble ant-bubble-start"
id="0"
>
<div
class="ant-bubble-content ant-bubble-content-filled"
>
#0 - message content
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders components/bubble/demo/debug-list.tsx extend context correctly 2`] = `[]`;

exports[`renders components/bubble/demo/header-and-footer.tsx extend context correctly 1`] = `
<div
class="ant-bubble ant-bubble-start"
Expand Down
Loading

0 comments on commit 914a608

Please sign in to comment.