diff options
Diffstat (limited to 'web/src/js/components/ContentView.jsx')
-rw-r--r-- | web/src/js/components/ContentView.jsx | 94 |
1 files changed, 36 insertions, 58 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 9d11ecd9..d6ee5497 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -5,83 +5,61 @@ import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' -import { setContentView } from '../ducks/ui' +import { setContentView, setDisplayLarge } from '../ducks/ui' -class ContentView extends Component { +ContentView.propTypes = { + // It may seem a bit weird at the first glance: + // Every view takes the flow and the message as props, e.g. + // <Auto flow={flow} message={flow.request}/> + flow: React.PropTypes.object.isRequired, + message: React.PropTypes.object.isRequired, +} - static propTypes = { - // It may seem a bit weird at the first glance: - // Every view takes the flow and the message as props, e.g. - // <Auto flow={flow} message={flow.request}/> - flow: React.PropTypes.object.isRequired, - message: React.PropTypes.object.isRequired, - } +ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - constructor(props, context) { - super(props, context) +function ContentView({ flow, message, contentView, selectView, displayLarge }) { - this.state = { displayLarge: false } + if (message.contentLength === 0) { + return <MetaViews.ContentEmpty {...this.props}/> } - displayLarge() { - this.setState({ displayLarge: true }) + if (message.contentLength === null) { + return <MetaViews.ContentMissing {...this.props}/> } - componentWillReceiveProps(nextProps) { - // @todo move to ui ducks - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false }) - } + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return <MetaViews.ContentTooLarge {...this.props} onClick={() => this.props.setDisplayLarge(true)}/> } - isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - } - - render() { - const { flow, message, contentView, selectView } = this.props - const { displayLarge } = this.state - - const View = ContentViews[contentView] + const View = ContentViews[contentView] - if (message.contentLength === 0) { - return <MetaViews.ContentEmpty {...this.props}/> - } - - if (message.contentLength === null) { - return <MetaViews.ContentMissing {...this.props}/> - } - - if (!displayLarge && this.isContentTooLarge(message)) { - return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/> - } - - return ( - <div> - {View.textView ? ( - <ContentLoader flow={flow} message={message}> - <View content="" /> - </ContentLoader> - ) : ( - <View flow={flow} message={message} /> - )} - <div className="view-options text-center"> - <ViewSelector onSelectView={selectView} active={View} message={message}/> - - <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}> - <i className="fa fa-download"/> - </a> - </div> + return ( + <div> + {View.textView ? ( + <ContentLoader flow={flow} message={message}> + <View content="" /> + </ContentLoader> + ) : ( + <View flow={flow} message={message} /> + )} + <div className="view-options text-center"> + <ViewSelector onSelectView={selectView} active={View} message={message}/> + + <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}> + <i className="fa fa-download"/> + </a> </div> - ) - } + </div> + ) } export default connect( state => ({ contentView: state.ui.contentView, + displayLarge: state.ui.displayLarge, }), { selectView: setContentView, + setDisplayLarge, } )(ContentView) |