-
-
Save arunoda/fb3859840ff616cc5ea0fa3ef8e3f358 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import addons from '@kadira/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}/> | |
), | |
}) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I was following the storybook addon tutorial https://storybook.js.org/addons/writing-addons/ which references this gist. I had to change addons import at top from
to
to get it to work. Might be worth changing that top import since that package is no longer active