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

DocsPage: components => subcomponents

Browse Source
This commit is contained in:
Michael Shilman 2019-11-19 12:23:41 +08:00
parent e82eb54df2
commit 3fe71ad6fc
2 changed files with 31 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
addons/docs/src/blocks/Props.tsx
View File

@ -2,6 +2,7 @@ import React, { FunctionComponent, useContext } from 'react';
import { PropsTable, PropsTableError, PropsTableProps, TabsState } from '@storybook/components'; import { PropsTable, PropsTableError, PropsTableProps, TabsState } from '@storybook/components';
import { DocsContext, DocsContextProps } from './DocsContext'; import { DocsContext, DocsContextProps } from './DocsContext';
import { Component, PropsSlot, CURRENT_SELECTION } from './shared'; import { Component, PropsSlot, CURRENT_SELECTION } from './shared';
import { getComponentName } from './utils';
import { PropsExtractor } from '../lib/docgen/types'; import { PropsExtractor } from '../lib/docgen/types';
import { extractProps as reactExtractProps } from '../frameworks/react/extractProps'; import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
@ -69,34 +70,39 @@ const PropsContainer: FunctionComponent<PropsProps> = props => {
const context = useContext(DocsContext); const context = useContext(DocsContext);
const { slot, components } = props; const { slot, components } = props;
const { const {
parameters: { components: parametersComponents }, parameters: { subcomponents },
} = context; } = context;
const subComponents = components || parametersComponents;
if (!subComponents || typeof subComponents !== 'object') { let allComponents = components;
if (!allComponents) {
const main = getComponent(props, context); const main = getComponent(props, context);
const mainLabel = getComponentName(main);
const mainProps = slot ? slot(context, main) : getComponentProps(main, props, context); const mainProps = slot ? slot(context, main) : getComponentProps(main, props, context);
return mainProps && <PropsTable {...mainProps} />;
if (!subcomponents || typeof subcomponents !== 'object') {
return mainProps && <PropsTable {...mainProps} />;
}
allComponents = { [mainLabel]: main, ...subcomponents };
} }
const subProps: { label: string; table: PropsTableProps }[] = Object.keys(subComponents).map( const tabs: { label: string; table: PropsTableProps }[] = [];
label => { Object.entries(allComponents).forEach(([label, component]) => {
const component = subComponents[label]; tabs.push({
return { label,
label, table: slot ? slot(context, component) : getComponentProps(component, props, context),
table: slot ? slot(context, component) : getComponentProps(component, props, context), });
}; });
}
);
return ( return (
<TabsState> <TabsState>
{subProps.map(item => { {tabs.map(({ label, table }) => {
const { label, table } = item;
if (!table) { if (!table) {
return null; return null;
} }
const id = `prop_table_div_${label}`;
return ( return (
<div key={`prop_table_div_${label}`} id={label} title={label}> <div key={id} id={id} title={label}>
{({ active }: { active: boolean }) => {({ active }: { active: boolean }) =>
active ? <PropsTable key={`prop_table_${label}`} {...table} /> : null active ? <PropsTable key={`prop_table_${label}`} {...table} /> : null
} }

12
examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
View File

@ -131,8 +131,7 @@ multipleComponents.story = {
name: 'Many Components', name: 'Many Components',
parameters: { parameters: {
component: ButtonGroup, component: ButtonGroup,
components: { subcomponents: {
'Button Group': ButtonGroup,
'Docgen Button': DocgenButton, 'Docgen Button': DocgenButton,
'Base Button': BaseButton, 'Base Button': BaseButton,
}, },
@ -152,14 +151,21 @@ multipleComponents.story = {
export const componentsProps = () => <div>Display multiple prop tables in tabs</div>; export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
componentsProps.story = { componentsProps.story = {
subcomponents: {
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
},
parameters: { parameters: {
docs: { docs: {
page: () => ( page: () => (
<> <>
<Title>Multiple prop tables</Title> <Title>Multiple prop tables</Title>
<Description>
Here's what happens when your component has some related components
</Description>
<Props <Props
components={{ components={{
'Button Group': ButtonGroup, 'ButtonGroup Custom': ButtonGroup,
'Docgen Button': DocgenButton, 'Docgen Button': DocgenButton,
'Base Button': BaseButton, 'Base Button': BaseButton,
}} }}