diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-07-18 20:59:17 -0700 |
---|---|---|
committer | Maximilian Hils <git@maximilianhils.com> | 2016-07-18 20:59:17 -0700 |
commit | 859bb8c99fbe285f839373c66028910eb5595604 (patch) | |
tree | a319a55af7289aa006e32909fca92c24a436c19e /web/src/js/components/ContentView.jsx | |
parent | 00b0d47db6961849c8a00af3d7805f5d9a9e5e2d (diff) | |
parent | 92026d26ea6d8d9134b2725cf83753ba9e5c3579 (diff) | |
download | mitmproxy-859bb8c99fbe285f839373c66028910eb5595604.tar.gz mitmproxy-859bb8c99fbe285f839373c66028910eb5595604.tar.bz2 mitmproxy-859bb8c99fbe285f839373c66028910eb5595604.zip |
Merge remote-tracking branch 'jason/ui'
Diffstat (limited to 'web/src/js/components/ContentView.jsx')
-rw-r--r-- | web/src/js/components/ContentView.jsx | 108 |
1 files changed, 48 insertions, 60 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx index 1533684e..6a982a5d 100644 --- a/web/src/js/components/ContentView.jsx +++ b/web/src/js/components/ContentView.jsx @@ -1,78 +1,66 @@ import React, { Component, PropTypes } from 'react' +import { connect } from 'react-redux' import { MessageUtils } from '../flow/utils.js' -import { ViewAuto, ViewImage } from './ContentView/ContentViews' +import * as ContentViews from './ContentView/ContentViews' import * as MetaViews from './ContentView/MetaViews' import ContentLoader from './ContentView/ContentLoader' import ViewSelector from './ContentView/ViewSelector' +import { setContentView, setDisplayLarge } from '../ducks/ui' -export default class ContentView extends Component { - - 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, - } - - constructor(props, context) { - super(props, context) +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, +} - this.state = { displayLarge: false, View: ViewAuto } - this.selectView = this.selectView.bind(this) - } +ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2) - selectView(View) { - this.setState({ View }) - } +function ContentView(props) { + const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props - displayLarge() { - this.setState({ displayLarge: true }) + if (message.contentLength === 0) { + return <MetaViews.ContentEmpty {...props}/> } - componentWillReceiveProps(nextProps) { - if (nextProps.message !== this.props.message) { - this.setState({ displayLarge: false, View: ViewAuto }) - } + if (message.contentLength === null) { + return <MetaViews.ContentMissing {...props}/> } - isContentTooLarge(msg) { - return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2) + if (!displayLarge && ContentView.isContentTooLarge(message)) { + return <MetaViews.ContentTooLarge {...props} onClick={() => setDisplayLarge(true)}/> } - render() { - const { flow, message } = this.props - const { displayLarge, View } = this.state + 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}> - <this.state.View content="" /> - </ContentLoader> - ) : ( - <View flow={flow} message={message} /> - )} - <div className="view-options text-center"> - <ViewSelector onSelectView={this.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) |