From e5bf1e930a5b6ba0b3300b02daf792d65d795202 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 14 Jun 2016 23:52:00 +0800
Subject: [web] FlowView and ContentView

---
 web/src/js/components/ContentView.jsx | 78 +++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 web/src/js/components/ContentView.jsx

(limited to 'web/src/js/components/ContentView.jsx')

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}/>
+                    &nbsp;
+                    <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
+                        <i className="fa fa-download"/>
+                    </a>
+                </div>
+            </div>
+        )
+    }
+}
-- 
cgit v1.2.3