/
WrapStory.js
40 lines (32 loc) · 1.19 KB
/
WrapStory.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from 'react';
import { ThemeProvider } from 'styled-components'
import { getQueryParam } from '@storybook/client-api';
const currentThemeValueFromUrl = getQueryParam('currentTheme');
export default class WrapStory extends React.Component {
constructor(props) {
super(props)
const keys = Object.keys(props.themes)
this.state = {theme: props.themes[currentThemeValueFromUrl || keys[0]]}
this.updateState = this.updateState.bind(this)
}
componentDidMount() {
this.props.channel.emit('storybook-styled-components:init', this.props.themes)
this.props.channel.on('storybook-styled-components:update', this.updateState)
}
componentWillUnmount() {
this.props.channel.removeListener('storybook-styled-components:init', this.props.themes)
this.props.channel.removeListener('storybook-styled-components:update', this.updateState)
}
componentWillReceiveProps(props) {
this.setState(props)
}
updateState(theme) {
const {themes} = this.props
this.setState({theme: themes[theme]})
}
render() {
const {children} = this.props
const {theme} = this.state
return theme ? <ThemeProvider theme={theme}>{children}</ThemeProvider> : children
}
}