diff options
author | Maximilian Hils <git@maximilianhils.com> | 2016-06-17 01:53:02 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-06-17 01:53:02 -0700 |
commit | fcf5dc8728816bae73a175ee021f8a11a1591567 (patch) | |
tree | 56ff25784a659f0e54894ca616e198cfe1a13ea0 /web/src/js/components/ContentView.jsx | |
parent | 78785df16be237bfdbf4ee485639b61f06b4a47e (diff) | |
parent | 034287edcf00eb734cb67e62de58c3bfebf6bb44 (diff) | |
download | mitmproxy-fcf5dc8728816bae73a175ee021f8a11a1591567.tar.gz mitmproxy-fcf5dc8728816bae73a175ee021f8a11a1591567.tar.bz2 mitmproxy-fcf5dc8728816bae73a175ee021f8a11a1591567.zip |
Merge pull request #1267 from gzzhanghao/components
[web] Working on components
Diffstat (limited to 'web/src/js/components/ContentView.jsx')
-rw-r--r-- | web/src/js/components/ContentView.jsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx new file mode 100644 index 00000000..af3bffc1 --- /dev/null +++ b/web/src/js/components/ContentView.jsx @@ -0,0 +1,78 @@ +import React, { Component, PropTypes } from 'react' +import { MessageUtils } from '../flow/utils.js' +import { ViewAuto, ViewImage } from './ContentView/ContentViews' +import * as ContentErrors from './ContentView/ContentErrors' +import ContentLoader from './ContentView/ContentLoader' +import ViewSelector from './ContentView/ViewSelector' + +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) + + this.state = { displayLarge: false, View: ViewAuto } + this.selectView = this.selectView.bind(this) + } + + selectView(View) { + this.setState({ View }) + } + + displayLarge() { + this.setState({ displayLarge: true }) + } + + componentWillReceiveProps(nextProps) { + if (nextProps.message !== this.props.message) { + this.setState({ displayLarge: false, View: ViewAuto }) + } + } + + isContentTooLarge(msg) { + return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2) + } + + render() { + const { flow, message } = this.props + const { displayLarge, View } = this.state + + if (message.contentLength === 0) { + return <ContentErrors.ContentEmpty {...this.props}/> + } + + if (message.contentLength === null) { + return <ContentErrors.ContentMissing {...this.props}/> + } + + if (!displayLarge && this.isContentTooLarge(message)) { + return <ContentErrors.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> + </div> + ) + } +} |