{this._getInfoHeader()}
{this._getInfoContent()}
{this._getComponentDescription()}
@@ -192,38 +202,36 @@ class Story extends React.Component {
}
_getInfoHeader() {
- if (!this.props.context || !this.props.showHeader) {
+ const { stylesheet } = this.state;
+ const { context, showHeader } = this.props;
+
+ if (!context || !showHeader) {
return null;
}
return (
-
-
{this.props.context.kind}
-
{this.props.context.story}
+
+
{context.kind}
+ {context.story}
);
}
_getInfoContent() {
- if (!this.props.info) {
+ const { info, showInline } = this.props;
+ const { stylesheet } = this.state;
+
+ if (!info) {
return '';
}
- if (React.isValidElement(this.props.info)) {
+ if (React.isValidElement(info)) {
return (
-
- {this.props.info}
-
+
{info}
);
}
- const lines = this.props.info.split('\n');
+ const lines = info.split('\n');
while (lines[0].trim() === '') {
lines.shift();
}
@@ -233,15 +241,16 @@ class Story extends React.Component {
padding = matches[0].length;
}
const source = lines.map(s => s.slice(padding)).join('\n');
- return
{this.marksy(source).tree}
;
+ return
{this.marksy(source).tree}
;
}
_getComponentDescription() {
+ const { context } = this.props;
let retDiv = null;
if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
- if (STORYBOOK_REACT_CLASSES[key].name === this.props.context.story) {
+ if (STORYBOOK_REACT_CLASSES[key].name === context.story) {
retDiv =
{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}
;
}
});
@@ -251,22 +260,25 @@ class Story extends React.Component {
}
_getSourceCode() {
- if (!this.props.showSource) {
- return null;
- }
-
const {
+ showSource,
maxPropsIntoLine,
maxPropObjectKeys,
maxPropArrayLength,
maxPropStringLength,
+ children,
} = this.props;
+ const { stylesheet } = this.state;
+
+ if (!showSource) {
+ return null;
+ }
return (
-
Story Source
+
Story Source
- {React.Children.map(this.props.children, (root, idx) => (
+ {React.Children.map(children, (root, idx) => (
{
+ if (propTables) {
+ propTables.forEach(type => {
types.set(type, true);
});
}
// depth-first traverse and collect types
- const extract = children => {
- if (!children) {
+ const extract = innerChildren => {
+ if (!innerChildren) {
return;
}
- if (Array.isArray(children)) {
- children.forEach(extract);
+ if (Array.isArray(innerChildren)) {
+ innerChildren.forEach(extract);
return;
}
- if (children.props && children.props.children) {
- extract(children.props.children);
+ if (innerChildren.props && innerChildren.props.innerChildren) {
+ extract(innerChildren.props.innerChildren);
}
if (
- typeof children === 'string' ||
- typeof children.type === 'string' ||
- (Array.isArray(this.props.propTablesExclude) && // also ignore excluded types
- ~this.props.propTablesExclude.indexOf(children.type)) // eslint-disable-line no-bitwise
+ typeof innerChildren === 'string' ||
+ typeof innerChildren.type === 'string' ||
+ (Array.isArray(propTablesExclude) && // also ignore excluded types
+ ~propTablesExclude.indexOf(innerChildren.type)) // eslint-disable-line no-bitwise
) {
return;
}
- if (children.type && !types.has(children.type)) {
- types.set(children.type, true);
+ if (innerChildren.type && !types.has(innerChildren.type)) {
+ types.set(innerChildren.type, true);
}
};
// extract components from children
- extract(this.props.children);
+ extract(children);
const array = Array.from(types.keys());
array.sort((a, b) => getName(a) > getName(b));
- const {
- maxPropObjectKeys,
- maxPropArrayLength,
- maxPropStringLength,
- excludedPropTypes,
- } = this.props;
- const propTables = array.map((type, i) => (
+ propTables = array.map((type, i) => (
// eslint-disable-next-line react/no-array-index-key
-
"{getName(type)}" Component
+
"{getName(type)}" Component
- Prop Types
+ Prop Types
{propTables}
- {this.props.code}
+ {code}
);
@@ -52,14 +53,14 @@ Code.defaultProps = {
code: null,
};
-export function Blockquote(props) {
+export function Blockquote({ children }) {
const style = {
fontSize: '1.88em',
fontFamily: 'Menlo, Monaco, "Courier New", monospace',
borderLeft: '8px solid #fafafa',
padding: '1rem',
};
- return {props.children}
;
+ return {children}
;
}
Blockquote.propTypes = { children: PropTypes.node };
diff --git a/addons/info/src/components/markdown/htags.js b/addons/info/src/components/markdown/htags.js
index b0f0df8d652a..50b542e601c4 100644
--- a/addons/info/src/components/markdown/htags.js
+++ b/addons/info/src/components/markdown/htags.js
@@ -11,7 +11,7 @@ const propTypes = {
id: PropTypes.string,
};
-export function H1(props) {
+export function H1({ id, children }) {
const styles = {
...baseFonts,
borderBottom: '1px solid #eee',
@@ -21,8 +21,8 @@ export function H1(props) {
fontSize: '40px',
};
return (
-
))({
display: 'block',
diff --git a/addons/jest/src/hoc/provideJestResult.js b/addons/jest/src/hoc/provideJestResult.js
index a72169a21ee2..f1f327856fc5 100644
--- a/addons/jest/src/hoc/provideJestResult.js
+++ b/addons/jest/src/hoc/provideJestResult.js
@@ -13,6 +13,7 @@ const provideTests = Component =>
}).isRequired,
active: PropTypes.bool,
};
+
static defaultProps = {
active: true,
};
@@ -30,10 +31,12 @@ const provideTests = Component =>
}
componentWillUnmount() {
+ const { channel } = this.props;
+
if (this.stopListeningOnStory) {
this.stopListeningOnStory();
}
- this.props.channel.removeListener('storybook/tests/add_tests', this.onAddTests);
+ channel.removeListener('storybook/tests/add_tests', this.onAddTests);
}
onAddTests = ({ kind, storyName, tests }) => {
diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js
index c74464553233..d5e28fbe9f88 100644
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@@ -27,18 +27,22 @@ export default class Panel extends PureComponent {
this.lastEdit = getTimestamp();
this.loadedFromUrl = false;
}
+
componentDidMount() {
- this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
- this.props.channel.on('addon:knobs:setOptions', this.setOptions);
+ const { channel, api } = this.props;
+ channel.on('addon:knobs:setKnobs', this.setKnobs);
+ channel.on('addon:knobs:setOptions', this.setOptions);
- this.stopListeningOnStory = this.props.api.onStory(() => {
+ this.stopListeningOnStory = api.onStory(() => {
this.setState({ knobs: {} });
- this.props.channel.emit('addon:knobs:reset');
+ channel.emit('addon:knobs:reset');
});
}
componentWillUnmount() {
- this.props.channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
+ const { channel } = this.props;
+
+ channel.removeListener('addon:knobs:setKnobs', this.setKnobs);
this.stopListeningOnStory();
}
@@ -75,7 +79,9 @@ export default class Panel extends PureComponent {
};
reset = () => {
- this.props.channel.emit('addon:knobs:reset');
+ const { channel } = this.props;
+
+ channel.emit('addon:knobs:reset');
};
copy = () => {
@@ -93,7 +99,9 @@ export default class Panel extends PureComponent {
};
emitChange = changedKnob => {
- this.props.channel.emit('addon:knobs:knobChange', changedKnob);
+ const { channel } = this.props;
+
+ channel.emit('addon:knobs:knobChange', changedKnob);
};
handleChange = changedKnob => {
@@ -110,7 +118,9 @@ export default class Panel extends PureComponent {
};
handleClick = knob => {
- this.props.channel.emit('addon:knobs:knobClick', knob);
+ const { channel } = this.props;
+
+ channel.emit('addon:knobs:knobClick', knob);
};
render() {
diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
index 0b07504a8296..109fa3229b6b 100644
--- a/addons/knobs/src/components/PropForm.js
+++ b/addons/knobs/src/components/PropForm.js
@@ -15,14 +15,16 @@ const InvalidType = () =>
Invalid Type;
export default class PropForm extends Component {
makeChangeHandler(name, type) {
+ const { onFieldChange } = this.props;
return value => {
const change = { name, type, value };
- this.props.onFieldChange(change);
+
+ onFieldChange(change);
};
}
render() {
- const { knobs } = this.props;
+ const { knobs, onFieldClick } = this.props;
return (