mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-12 04:37:06 +03:00
43 lines
894 B
JavaScript
43 lines
894 B
JavaScript
|
import React from 'react';
|
||
|
import addons from '@storybook/addons';
|
||
|
import styled from 'styled-components';
|
||
|
import { EVENT_ID_DATA, DEFAULT_THEME_STATE } from './constant';
|
||
|
import { Container } from '../../src';
|
||
|
|
||
|
const ContainerStyled = styled(Container)`
|
||
|
> div {
|
||
|
height: 100%;
|
||
|
width: 100%;
|
||
|
|
||
|
> div {
|
||
|
height: 100%;
|
||
|
width: 100%;
|
||
|
overflow-y: auto;
|
||
|
}
|
||
|
}
|
||
|
`;
|
||
|
|
||
|
const channel = addons.getChannel();
|
||
|
|
||
|
class Theme extends React.Component {
|
||
|
state = DEFAULT_THEME_STATE;
|
||
|
|
||
|
componentDidMount() {
|
||
|
channel.on(EVENT_ID_DATA, this.onChannel);
|
||
|
}
|
||
|
|
||
|
componentWillUnmount() {
|
||
|
channel.removeListener(EVENT_ID_DATA, this.onChannel);
|
||
|
}
|
||
|
|
||
|
onChannel = state => {
|
||
|
this.setState(state);
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
return <ContainerStyled themeData={this.state}>{this.props.children}</ContainerStyled>;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const withTheme = story => <Theme>{story()}</Theme>;
|