Skip to content

Commit

Permalink
Merge pull request #2951 from m10l/patch-1
Browse files Browse the repository at this point in the history
Update writing addons documentation
  • Loading branch information
Hypnosphi authored Feb 9, 2018
2 parents 4cf44c0 + 8eecd23 commit 0a4f0cf
Showing 1 changed file with 71 additions and 1 deletion.
72 changes: 71 additions & 1 deletion docs/src/pages/addons/writing-addons/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,77 @@ In the above case, it will emit the notes' text to the channel, so our panel can

Then add the following code to the register.js.

See: <https://gist.github.com/arunoda/fb3859840ff616cc5ea0fa3ef8e3f358>
```js
import React from 'react';
import addons from '@storybook/addons';

const styles = {
notesPanel: {
margin: 10,
fontFamily: 'Arial',
fontSize: 14,
color: '#444',
width: '100%',
overflow: 'auto',
}
};

class Notes extends React.Component {
constructor(...args) {
super(...args);
this.state = {text: ''};
this.onAddNotes = this.onAddNotes.bind(this);
}

onAddNotes(text) {
this.setState({text});
}

componentDidMount() {
const { channel, api } = this.props;
// Listen to the notes and render it.
channel.on('kadira/notes/add_notes', this.onAddNotes);

// Clear the current notes on every story change.
this.stopListeningOnStory = api.onStory(() => {
this.onAddNotes('');
});
}

render() {
const { text } = this.state;
const textAfterFormatted = text? text.trim().replace(/\n/g, '<br />') : "";

return (
<div style={styles.notesPanel}>
<div dangerouslySetInnerHTML={{__html: textAfterFormatted}} />
</div>
);
}

// This is some cleanup tasks when the Notes panel is unmounting.
componentWillUnmount() {
if(this.stopListeningOnStory) {
this.stopListeningOnStory();
}

this.unmounted = true;
const { channel, api } = this.props;
channel.removeListener('kadira/notes/add_notes', this.onAddNotes);
}
}

// Register the addon with a unique name.
addons.register('kadira/notes', (api) => {
// Also need to set a unique name to the panel.
addons.addPanel('kadira/notes/panel', {
title: 'Notes',
render: () => (
<Notes channel={addons.getChannel()} api={api}/>
),
})
})
```

It will register our addon and add a panel. In this case, the panel represents a React component called `Notes`. That component has access to the channel and storybook api.

Expand Down

0 comments on commit 0a4f0cf

Please sign in to comment.