GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-31 05:03:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Revert

Browse Source
This commit is contained in:
Valerie Rutsch 2022-03-16 21:22:13 -05:00
parent 097ad6fae5
commit 2570bc1404
1 changed files with 73 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
lib/ui/src/components/sidebar/Sidebar.tsx
View File

@ -88,8 +88,8 @@ export interface SidebarProps {
enableShortcuts?: boolean;
}
export const Sidebar: FunctionComponent<SidebarProps> = React.memo((props) => {
const {
export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
({
storyId = null,
refId = DEFAULT_REF_ID,
stories: storiesHash,
@ -99,78 +99,78 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo((props) => {
menuHighlighted = false,
enableShortcuts = true,
refs = {},
} = props;
}) => {
const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories;
const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]);
const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories;
const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]);
const adaptedRefs = useMemo(() => {
return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => {
if (ref.stories) {
acc[id] = {
...ref,
stories: collapseFn(ref.stories),
};
} else {
acc[id] = ref;
}
return acc;
}, {});
}, [DOCS_MODE, refs]);
const adaptedRefs = useMemo(() => {
return Object.entries(refs).reduce((acc: Refs, [id, ref]: [string, ComposedRef]) => {
if (ref.stories) {
acc[id] = {
...ref,
stories: collapseFn(ref.stories),
};
} else {
acc[id] = ref;
}
return acc;
}, {});
}, [DOCS_MODE, refs]);
const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs);
const isLoading = !dataset.hash[DEFAULT_REF_ID].ready;
const lastViewedProps = useLastViewed(selected);
const dataset = useCombination(stories, storiesConfigured, storiesFailed, adaptedRefs);
const isLoading = !dataset.hash[DEFAULT_REF_ID].ready;
const lastViewedProps = useLastViewed(selected);
return (
<Container className="container sidebar-container">
<CustomScrollArea vertical>
<StyledSpaced row={1.6}>
<Heading
className="sidebar-header"
menuHighlighted={menuHighlighted}
menu={menu}
skipLinkHref="#storybook-preview-wrapper"
/>
return (
<Container className="container sidebar-container">
<CustomScrollArea vertical>
<StyledSpaced row={1.6}>
<Heading
className="sidebar-header"
menuHighlighted={menuHighlighted}
menu={menu}
skipLinkHref="#storybook-preview-wrapper"
/>
<Search
dataset={dataset}
isLoading={isLoading}
enableShortcuts={enableShortcuts}
{...lastViewedProps}
>
{({
query,
results,
isBrowsing,
closeMenu,
getMenuProps,
getItemProps,
highlightedIndex,
}) => (
<Swap condition={isBrowsing}>
<Explorer
dataset={dataset}
selected={selected}
isLoading={isLoading}
isBrowsing={isBrowsing}
/>
<SearchResults
query={query}
results={results}
closeMenu={closeMenu}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
enableShortcuts={enableShortcuts}
isLoading={isLoading}
/>
</Swap>
)}
</Search>
</StyledSpaced>
</CustomScrollArea>
</Container>
);
});
<Search
dataset={dataset}
isLoading={isLoading}
enableShortcuts={enableShortcuts}
{...lastViewedProps}
>
{({
query,
results,
isBrowsing,
closeMenu,
getMenuProps,
getItemProps,
highlightedIndex,
}) => (
<Swap condition={isBrowsing}>
<Explorer
dataset={dataset}
selected={selected}
isLoading={isLoading}
isBrowsing={isBrowsing}
/>
<SearchResults
query={query}
results={results}
closeMenu={closeMenu}
getMenuProps={getMenuProps}
getItemProps={getItemProps}
highlightedIndex={highlightedIndex}
enableShortcuts={enableShortcuts}
isLoading={isLoading}
/>
</Swap>
)}
</Search>
</StyledSpaced>
</CustomScrollArea>
</Container>
);
}
);