From 81a0c45c89df2dc94f7d97c4367f0e549495e4d0 Mon Sep 17 00:00:00 2001
From: Jason <jason.daurus@gmail.com>
Date: Thu, 9 Jun 2016 20:34:57 +0800
Subject: [web] header.js -> Header.js

---
 web/src/js/components/Header.js | 56 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 web/src/js/components/Header.js

(limited to 'web/src/js/components/Header.js')

diff --git a/web/src/js/components/Header.js b/web/src/js/components/Header.js
new file mode 100644
index 00000000..7134f7d9
--- /dev/null
+++ b/web/src/js/components/Header.js
@@ -0,0 +1,56 @@
+import React, { Component, PropTypes } from 'react'
+import classnames from 'classnames'
+import { toggleEventLogVisibility } from '../ducks/eventLog'
+import MainMenu from './Header/MainMenu'
+import ViewMenu from './Header/ViewMenu'
+import OptionMenu from './Header/OptionMenu'
+import FileMenu from './Header/FileMenu'
+
+export default class Header extends Component {
+
+    static entries = [MainMenu, ViewMenu, OptionMenu]
+
+    static propTypes = {
+        settings: PropTypes.object.isRequired,
+    }
+
+    constructor(props, context) {
+        super(props, context)
+        this.state = { active: Header.entries[0] }
+    }
+
+    handleClick(active, e) {
+        e.preventDefault()
+        this.props.updateLocation(active.route)
+        this.setState({ active })
+    }
+
+    render() {
+        const { active: Active } = this.state
+        const { settings, updateLocation, query } = this.props
+
+        return (
+            <header>
+                <nav className="nav-tabs nav-tabs-lg">
+                    <FileMenu/>
+                    {Header.entries.map(Entry => (
+                        <a key={Entry.title}
+                           href="#"
+                           className={classnames({ active: Entry === Active })}
+                           onClick={e => this.handleClick(Entry, e)}>
+                            {Entry.title}
+                        </a>
+                    ))}
+                </nav>
+                <div className="menu">
+                    <Active
+                        ref="active"
+                        settings={settings}
+                        updateLocation={updateLocation}
+                        query={query}
+                    />
+                </div>
+            </header>
+        )
+    }
+}
-- 
cgit v1.2.3