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

Merge pull request #14345 from tim-mukhin/feature/-refs]-add-expanded-option

Browse Source 
Composition: Add expanded option to Refs
This commit is contained in:
Michael Shilman 2021-10-13 09:47:22 +08:00 committed by GitHub
commit 00710c4419
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/snippets/common/storybook-main-ref-remote.js.mdx
View File

@ -6,7 +6,8 @@ module.exports={
refs: {
'design-system': {
title: "Storybook Design System",
url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com"
url: "https://5ccbc373887ca40020446347-yldsqjoxzb.chromatic.com",
expanded: false // optional, true by default
}
}
}

11
lib/api/src/modules/refs.ts
View File

@ -42,6 +42,7 @@ export interface ComposedRef {
title?: string;
url: string;
type?: 'auto-inject' | 'unknown' | 'lazy' | 'server-checked';
expanded?: boolean;
stories: StoriesHash;
versions?: Versions;
loginUrl?: string;
@ -53,7 +54,15 @@ export interface ComposedRef {
export type ComposedRefUpdate = Partial<
Pick<
ComposedRef,
'title' | 'type' | 'stories' | 'versions' | 'loginUrl' | 'version' | 'ready' | 'error'
| 'title'
| 'type'
| 'expanded'
| 'stories'
| 'versions'
| 'loginUrl'
| 'version'
| 'ready'
| 'error'
>
>;

3
lib/ui/src/components/sidebar/Refs.tsx
View File

@ -110,6 +110,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = React.memo((props) =>
setHighlighted,
loginUrl,
type,
expanded = true,
ready,
error,
} = props;
@ -124,7 +125,7 @@ export const Ref: FunctionComponent<RefType & RefProps> = React.memo((props) =>
const isAuthRequired = !!loginUrl && length === 0;
const state = getStateType(isLoading, isAuthRequired, isError, isEmpty);
const [isExpanded, setExpanded] = useState<boolean>(true);
const [isExpanded, setExpanded] = useState<boolean>(expanded);
const handleClick = useCallback(() => setExpanded((value) => !value), [setExpanded]);
const setHighlightedItemId = useCallback((itemId: string) => setHighlighted({ itemId, refId }), [