Merge pull request #1267 from gzzhanghao/components

[web] Working on components

1 files changed, 28 insertions, 0 deletions

diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
new file mode 100644
index 00000000..df3a5b83
--- /dev/null
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -0,0 +1,28 @@
+import React, { PropTypes } from 'react'
+import classnames from 'classnames'
+import views, { ViewAuto } from './ContentViews'
+
+ViewSelector.propTypes = {
+    active: PropTypes.func.isRequired,
+    message: PropTypes.object.isRequired,
+    onSelectView: PropTypes.func.isRequired,
+}
+
+export default function ViewSelector({ active, message, onSelectView }) {
+    return (
+        <div className="view-selector btn-group btn-group-xs">
+            {views.map(View => (
+                <button
+                    key={View.name}
+                    onClick={() => onSelectView(View)}
+                    className={classnames('btn btn-default', { active: View === active })}>
+                    {View === ViewAuto ? (
+                        `auto: ${ViewAuto.findView(message).name.toLowerCase().replace('view', '')}`
+                    ) : (
+                        View.name.toLowerCase().replace('view', '')
+                    )}
+                </button>
+            ))}
+        </div>
+    )
+}