GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding currentBackground for @addon/background

Browse Source
This commit is contained in:
Wei-Wei Wu 2018-04-01 02:06:46 -07:00
parent 2675c19144
commit 5b6d0a7738
2 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
addons/background/src/BackgroundPanel.js
View File

@ -72,11 +72,11 @@ export default class BackgroundPanel extends Component {
this.channel = addons.getChannel();
}
this.state = { backgrounds: [] };
this.state = { backgrounds: [], currentBackground: null };
this.channel.on('background-set', backgrounds => {
this.setState({ backgrounds });
const currentBackground = api.getQueryParam('background');
const currentBackground = api.getQueryParam('background') || this.state.currentBackground;
if (currentBackground) {
this.updateIframe(currentBackground);
@ -106,6 +106,7 @@ export default class BackgroundPanel extends Component {
}
setBackgroundFromSwatch = background => {
this.updateCurrentBackground(background);
this.updateIframe(background);
this.props.api.setQueryParams({ background });
};
@ -114,6 +115,12 @@ export default class BackgroundPanel extends Component {
this.iframe.style.background = background;
}
updateCurrentBackground(background) {
this.setState({
currentBackground: background,
});
}
render() {
const backgrounds = [...this.state.backgrounds];

15
addons/background/src/__tests__/BackgroundPanel.js
View File

@ -129,4 +129,19 @@ describe('Background Panel', () => {
background: backgrounds[0].value,
});
});
it('should persist the current background color in state', () => {
const SpiedChannel = new EventEmitter();
const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
backgroundPanel.setState({ backgrounds }); // force re-render
expect(backgroundPanel.state('currentBackground')).toEqual(null);
backgroundPanel
.find('h4')
.first()
.simulate('click');
expect(backgroundPanel.state('currentBackground')).toEqual(backgrounds[0].value);
});
});