GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +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 { DocsContext, DocsContextProps } from './DocsContext';
import { Component, PropsSlot, CURRENT_SELECTION } from './shared';
import { getComponentName } from './utils';
import { PropsExtractor } from '../lib/docgen/types';
import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
@ -69,34 +70,39 @@ const PropsContainer: FunctionComponent<PropsProps> = props => {
const context = useContext(DocsContext);
const { slot, components } = props;
const {
parameters: { components: parametersComponents },
parameters: { subcomponents },
} = context;
const subComponents = components || parametersComponents;
if (!subComponents || typeof subComponents !== 'object') {
let allComponents = components;
if (!allComponents) {
const main = getComponent(props, context);
const mainLabel = getComponentName(main);
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(
label => {
const component = subComponents[label];
return {
label,
table: slot ? slot(context, component) : getComponentProps(component, props, context),
};
}
);
const tabs: { label: string; table: PropsTableProps }[] = [];
Object.entries(allComponents).forEach(([label, component]) => {
tabs.push({
label,
table: slot ? slot(context, component) : getComponentProps(component, props, context),
});
});
return (
<TabsState>
{subProps.map(item => {
const { label, table } = item;
{tabs.map(({ label, table }) => {
if (!table) {
return null;
}
const id = `prop_table_div_${label}`;
return (
<div key={`prop_table_div_${label}`} id={label} title={label}>
<div key={id} id={id} title={label}>
{({ active }: { active: boolean }) =>
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',
parameters: {
component: ButtonGroup,
components: {
'Button Group': ButtonGroup,
subcomponents: {
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
},
@ -152,14 +151,21 @@ multipleComponents.story = {
export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
componentsProps.story = {
subcomponents: {
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
},
parameters: {
docs: {
page: () => (
<>
<Title>Multiple prop tables</Title>
<Description>
Here's what happens when your component has some related components
</Description>
<Props
components={{
'Button Group': ButtonGroup,
'ButtonGroup Custom': ButtonGroup,
'Docgen Button': DocgenButton,
'Base Button': BaseButton,
}}