Skip to content

Commit

Permalink
Merge pull request #14172 from storybookjs/fix-renderLabel-key-warning
Browse files Browse the repository at this point in the history
UI: Fix React unique key warning when using renderLabel
  • Loading branch information
shilman authored Mar 9, 2021
2 parents 0bb9a4f + 63c8287 commit 05078ff
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 16 deletions.
23 changes: 10 additions & 13 deletions lib/api/src/lib/stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export interface Root {
isComponent: false;
isRoot: true;
isLeaf: false;
label?: React.ReactNode;
renderLabel?: (item: Root) => React.ReactNode;
startCollapsed?: boolean;
}

Expand All @@ -34,7 +34,7 @@ export interface Group {
isComponent: boolean;
isRoot: false;
isLeaf: false;
label?: React.ReactNode;
renderLabel?: (item: Group) => React.ReactNode;
// MDX docs-only stories are "Group" type
parameters?: {
docsOnly?: boolean;
Expand All @@ -53,7 +53,7 @@ export interface Story {
isComponent: boolean;
isRoot: false;
isLeaf: true;
label?: React.ReactNode;
renderLabel?: (item: Story) => React.ReactNode;
parameters?: {
fileName: string;
options: {
Expand Down Expand Up @@ -186,19 +186,19 @@ export const transformStoriesRawToStoriesHash = (
}

if (root.length && index === 0) {
const rootElement: Root = {
list.push({
id,
name,
depth: index,
children: [],
isComponent: false,
isLeaf: false,
isRoot: true,
renderLabel,
startCollapsed: collapsedRoots.includes(id),
};
list.push({ ...rootElement, label: renderLabel?.(rootElement) });
});
} else {
const groupElement: Group = {
list.push({
id,
name,
parent,
Expand All @@ -207,14 +207,11 @@ export const transformStoriesRawToStoriesHash = (
isComponent: false,
isLeaf: false,
isRoot: false,
renderLabel,
parameters: {
docsOnly: parameters?.docsOnly,
viewMode: parameters?.viewMode,
},
};
list.push({
...groupElement,
label: renderLabel?.(groupElement),
});
}

Expand All @@ -233,15 +230,15 @@ export const transformStoriesRawToStoriesHash = (
});
});

const story: Story = {
acc[item.id] = {
...item,
depth: rootAndGroups.length,
parent: rootAndGroups[rootAndGroups.length - 1].id,
isLeaf: true,
isComponent: false,
isRoot: false,
renderLabel,
};
acc[item.id] = { ...story, label: renderLabel?.(story) };

return acc;
}, {} as StoriesHash);
Expand Down
6 changes: 3 additions & 3 deletions lib/ui/src/components/sidebar/Tree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ const Node = React.memo<NodeProps>(
onSelectStoryId(item.id);
}}
>
{item.label || item.name}
{item.renderLabel?.(item) || item.name}
</LeafNode>
);
}
Expand All @@ -162,7 +162,7 @@ const Node = React.memo<NodeProps>(
}}
>
<CollapseIcon isExpanded={isExpanded} />
{item.label || item.name}
{item.renderLabel?.(item) || item.name}
</CollapseButton>
{isExpanded && (
<Action
Expand Down Expand Up @@ -205,7 +205,7 @@ const Node = React.memo<NodeProps>(
if (item.isComponent && !isExpanded) onSelectStoryId(item.id);
}}
>
{item.label || item.name}
{item.renderLabel?.(item) || item.name}
</BranchNode>
);
}
Expand Down

0 comments on commit 05078ff

Please sign in to comment.