Skip to content

Commit

Permalink
Completely avoid re-rendering the preview iframe (#631)
Browse files Browse the repository at this point in the history
When manager re-rendered there is a chance that this component is
rerendered. That makes the iframe to load again. So the complete story
is remounted. This is not preferred except when changing stories.
  • Loading branch information
roonyh authored and arunoda committed Nov 28, 2016
1 parent b0a6f9e commit ceebfc5
Showing 1 changed file with 23 additions and 8 deletions.
31 changes: 23 additions & 8 deletions src/client/manager/preview.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Component } from 'react';

const iframeStyle = {
width: '100%',
Expand All @@ -8,13 +8,28 @@ const iframeStyle = {
padding: 0,
};

const Preview = ({ url }) => (
<iframe
id="storybook-preview-iframe"
style={iframeStyle}
src={url}
/>
);
class Preview extends Component {
/* eslint-disable class-methods-use-this */
shouldComponentUpdate() {
// When the manager is re-rendered, due to changes in the layout (going full screen / changing
// addon panel to right) Preview section will update. If its re-rendered the whole html page
// inside the html is re-rendered making the story to re-mount.
// We dont have to re-render this component for any reason since changes are communicated to
// story using the channel and necessary changes are done by it.
return false;
}
/* eslint-enable class-methods-use-this */

render() {
return (
<iframe
id="storybook-preview-iframe"
style={iframeStyle}
src={this.props.url}
/>
);
}
}

Preview.propTypes = {
url: React.PropTypes.string,
Expand Down

0 comments on commit ceebfc5

Please sign in to comment.