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

Addon-docs: Fix React.forwardedRef/memo props (#8445)

Browse Source 
Addon-docs: Fix React.forwardedRef/memo props
This commit is contained in:
Michael Shilman 2019-10-19 10:10:12 +08:00 committed by GitHub
commit 93d9608493
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
addons/docs/src/lib/getPropDefs.ts
View File

@ -84,5 +84,15 @@ const propsFromPropTypes: PropDefGetter = type => {
return Object.values(props);
};
export const getPropDefs: PropDefGetter = type =>
hasDocgen(type.__docgenInfo) ? propsFromDocgen(type) : propsFromPropTypes(type);
export const getPropDefs: PropDefGetter = type => {
let processedType = type;
if (type.render) {
processedType = type.render().type;
}
if (typeof type.type === 'function') {
processedType = type.type().type;
}
return hasDocgen(processedType.__docgenInfo)
? propsFromDocgen(processedType)
: propsFromPropTypes(processedType);
};

12
examples/official-storybook/stories/addon-docs/forward-ref.stories.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import DocgenButton from '../../components/DocgenButton';
const ForwardedButton = React.forwardRef((props, ref) => <DocgenButton ref={ref} {...props} />);
export default {
title: 'Addons|Docs/ForwardRef',
component: ForwardedButton,
};
export const displaysCorrectly = () => <ForwardedButton>Hello World!</ForwardedButton>;
displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };

12
examples/official-storybook/stories/addon-docs/react-memo.stories.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import DocgenButton from '../../components/DocgenButton';
const ButtonWithMemo = React.memo(props => <DocgenButton {...props} />);
export default {
title: 'Addons|Docs/ButtonWithMemo',
component: ButtonWithMemo,
};
export const displaysCorrectly = () => <ButtonWithMemo>Hello World!</ButtonWithMemo>;
displaysCorrectly.story = { name: 'Displays components with memo correctly' };