Skip to content

Commit

Permalink
FIX tool addons, no longer needing a direct reference to the iframe
Browse files Browse the repository at this point in the history
- using global styles instead, which is marginally better
  • Loading branch information
ndelangen committed Feb 1, 2019
1 parent 8fc746a commit a86e25f
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 140 deletions.
122 changes: 62 additions & 60 deletions addons/backgrounds/src/Tool.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
import { document } from 'global';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import memoize from 'memoizerific';

import { logger } from '@storybook/client-logger';
import { SET_STORIES } from '@storybook/core-events';
import { Global } from '@storybook/theming';

import { Popout, Item, Icons, Icon, IconButton, Title, Detail, List } from '@storybook/components';
import * as S from './components';

import { PARAM_KEY } from './constants';

const getIframe = () => document.getElementById('storybook-preview-background');
const iframeId = 'storybook-preview-background';

const getState = (props, state) => {
const getState = memoize(10)((props, state) => {
const data = props.api.getCurrentStoryData();
const list = data && data.parameters && data.parameters[PARAM_KEY];

return list && list.length
? list.reduce(
(acc, { name, value, default: isSelected }) => {
acc.backgrounds.push({ name, value });
acc.items.push({ name, value });

if (isSelected && state.selected !== 'transparent') {
if (!list.find(i => i.value === state.selected)) {
Expand All @@ -30,93 +29,96 @@ const getState = (props, state) => {
return acc;
},
{
backgrounds: [],
items: [],
selected: state.selected,
}
)
: {
backgrounds: [],
items: [],
selected: 'transparent',
};
};

const apply = memoize(1)((value, iframe) => {
if (iframe) {
// eslint-disable-next-line no-param-reassign
iframe.style.background = value;
} else {
logger.error('Cannot find Storybook iframe');
}
});

export default class BackgroundTool extends Component {
constructor(props) {
super(props);

this.state = {
backgrounds: [],
items: [],
selected: 'transparent',
};

this.listener = () => {
this.setState({ selected: null });
};
}

componentDidMount() {
const { api } = this.props;
api.on(SET_STORIES, this.listener);
}

api.on(SET_STORIES, () => {
const { state, props } = this;
this.setState(getState(props, state));
});
componentWillUnmount() {
const { api } = this.props;
api.off(SET_STORIES, this.listener);
}

change = selected => {
this.setState({ selected }, this.apply);
this.setState({ selected });
};

render() {
const { backgrounds, selected } = getState(this.props, this.state);
const iframe = getIframe();

apply(selected, iframe);

return backgrounds.length ? (
<Popout key="backgrounds">
<IconButton key="background" title="Backgrounds">
<Icons icon="photo" />
</IconButton>
{({ hide }) => (
<List>
{selected !== 'transparent' ? (
<Fragment>
const { items, selected } = getState(this.props, this.state);

return items.length ? (
<Fragment>
<Global
styles={{
[`#${iframeId}`]: {
background: selected,
},
}}
/>

<Popout key="backgrounds">
<IconButton key="background" title="Backgrounds">
<Icons icon="photo" />
</IconButton>
{({ hide }) => (
<List>
{selected !== 'transparent' ? (
<Fragment>
<Item
key="clear"
onClick={() => {
hide();
this.change('transparent');
}}
>
<Icon type="undo" />
<Title>Clear</Title>
<Detail>transparent</Detail>
</Item>
</Fragment>
) : null}

{items.map(({ name, value }) => (
<Item
key="clear"
key={name}
onClick={() => {
hide();
this.change('transparent');
this.change(value);
}}
>
<Icon type="undo" />
<Title>Clear</Title>
<Detail>transparent</Detail>
<Icon type={<S.ColorIcon background={value} />} />
<Title>{name}</Title>
<Detail>{value}</Detail>
</Item>
</Fragment>
) : null}

{backgrounds.map(({ name, value }) => (
<Item
key={name}
onClick={() => {
hide();
this.change(value);
}}
>
<Icon type={<S.ColorIcon background={value} />} />
<Title>{name}</Title>
<Detail>{value}</Detail>
</Item>
))}
</List>
)}
</Popout>
))}
</List>
)}
</Popout>
</Fragment>
) : null;
}
}
Expand Down
Loading

0 comments on commit a86e25f

Please sign in to comment.