From db991e2bccc10e8e31fb200cba2a99bf94e83914 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Tue, 5 Jul 2016 22:49:16 +0800
Subject: [web] set display large

---
 web/src/js/components/ContentView.jsx | 94 ++++++++++++++---------------------
 1 file changed, 36 insertions(+), 58 deletions(-)

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

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}/>
-                    &nbsp;
-                    <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}/>
+                &nbsp;
+                <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)
-- 
cgit v1.2.3