[web] FlowView and ContentView

1 files changed, 70 insertions, 0 deletions

diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
new file mode 100644
index 00000000..b0297dcc
--- /dev/null
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -0,0 +1,70 @@
+import React, { PropTypes } from 'react'
+import ContentLoader from './ContentLoader'
+import { MessageUtils } from '../../flow/utils.js'
+
+const views = [ViewAuto, ViewImage, ViewJSON, ViewRaw]
+
+ViewImage.regex = /^image\/(png|jpe?g|gif|vnc.microsoft.icon|x-icon)$/i
+ViewImage.matches = msg => ViewImage.regex.test(MessageUtils.getContentType(msg))
+
+ViewImage.propTypes = {
+    flow: PropTypes.object.isRequired,
+    message: PropTypes.object.isRequired,
+}
+
+export function ViewImage({ flow, message }) {
+    return (
+        <div className="flowview-image">
+            <img src={MessageUtils.getContentURL(flow, message)} alt="preview" className="img-thumbnail"/>
+        </div>
+    )
+}
+
+ViewRaw.textView = true
+ViewRaw.matches = () => true
+
+ViewRaw.propTypes = {
+    content: React.PropTypes.string.isRequired,
+}
+
+export function ViewRaw({ content }) {
+    return <pre>{content}</pre>
+}
+
+ViewJSON.textView = true
+ViewJSON.regex = /^application\/json$/i
+ViewJSON.matches = msg => ViewJSON.regex.test(MessageUtils.getContentType(msg))
+
+ViewJSON.propTypes = {
+    content: React.PropTypes.string.isRequired,
+}
+
+export function ViewJSON({ content }) {
+    let json = content
+    try {
+        json = JSON.stringify(JSON.parse(content), null, 2);
+    } catch (e) {
+        // @noop
+    }
+    return <pre>{json}</pre>
+}
+
+
+ViewAuto.matches = () => false
+ViewAuto.findView = msg => views.find(v => v.matches(msg)) || views[views.length - 1]
+
+ViewAuto.propTypes = {
+    message: React.PropTypes.object.isRequired,
+    flow: React.PropTypes.object.isRequired,
+}
+
+export function ViewAuto({ message, flow }) {
+    const View = ViewAuto.findView(message)
+    if (View.textView) {
+        return <ContentLoader message={message} flow={flow}><View content="" /></ContentLoader>
+    } else {
+        return <View message={message} flow={flow} />
+    }
+}
+
+export default views