Add component Dropdown

OSBI · Nov 16, 2015 · afe954d · afe954d
1 parent 6c328ec
commit afe954d
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 6 deletions.
diff --git a/src/main/resources/dist/saiku/saiku.min.js b/src/main/resources/dist/saiku/saiku.min.js
diff --git a/src/main/resources/src/js/saiku/components/Dropdown/Dropdown.jsx b/src/main/resources/src/js/saiku/components/Dropdown/Dropdown.jsx
@@ -0,0 +1,27 @@
+'use strict';
+
+var React        = require('react');
+var DropdownItem = require('./DropdownItem');
+
+var Dropdown = React.createClass({
+	render: function() {
+		var item = this.props.item;
+		var dropdownItem;
+
+		if (item && item.dropdown) {
+			dropdownItem = item.dropdown.item.map(function(item) {
+				return <li className={!item.visible ? 'hide' : ''}><a href={item.action}>{item.name}</a></li>;
+			});
+		}
+
+		return (
+			<ul id={item.drop} data-dropdown-content className="f-dropdown" aria-hidden="true">
+				{item.dropdown.item.map(function(item) {
+					return <li className={!item.visible ? 'hide' : ''}><a href={item.action}>{item.name}</a></li>;
+				})}
+			</ul>
+		);
+	}
+});
+
+module.exports = Dropdown;
diff --git a/src/main/resources/src/js/saiku/components/Dropdown/DropdownItem.jsx b/src/main/resources/src/js/saiku/components/Dropdown/DropdownItem.jsx
diff --git a/src/main/resources/src/js/saiku/components/Dropdown/README.md b/src/main/resources/src/js/saiku/components/Dropdown/README.md
@@ -0,0 +1,3 @@
+# react-dropdown
+
+Add options here.
diff --git a/src/main/resources/src/js/saiku/components/Toolbar/Toolbar.jsx b/src/main/resources/src/js/saiku/components/Toolbar/Toolbar.jsx
@@ -4,6 +4,7 @@ var _                 = require('underscore');
 var ToolbarCollection = require('./ToolbarCollection');
 var React             = require('react');
 var ToolbarItem       = require('./ToolbarItem');
+var Dropdown          = require('../Dropdown/Dropdown');
 
 var Toolbar = React.createClass({
 	collection: new ToolbarCollection(),
@@ -27,17 +28,23 @@ var Toolbar = React.createClass({
 	},
 
 	render: function() {
-		var itemNode;
+		var toolbarItem;
+		var dropdown;
 
 		if (this.state && !(_.isEmpty(this.state.models))) {
-			itemNode = this.state.models[0].getItem().map(function(item) {
+			toolbarItem = this.state.models[0].getItem().map(function(item) {
 				return <ToolbarItem item={item} />
 			});
+
+			dropdown = this.state.models[0].getItem().map(function(item) {
+				return item.dropdown ? <Dropdown item={item} /> : null
+			});
 		}
 
 		return (
 			<div className="icon-bar seven-up">
-				{itemNode}
+				{toolbarItem}
+				{dropdown}
 			</div>
 		);
 	}

diff --git a/src/main/resources/src/js/saiku/components/Toolbar/ToolbarItem.jsx b/src/main/resources/src/js/saiku/components/Toolbar/ToolbarItem.jsx
@@ -8,7 +8,7 @@ var ToolbarItem = React.createClass({
 		var isItemVisible = !item.visible ? 'sku-force-hide' : '';
 
 		return (
-			<a className={"item " + isItemVisible}>
+			<a className={"item " + isItemVisible} data-dropdown={item.drop} aria-controls={item.drop} aria-expanded="false">
 				<i className={item.icon}></i>
 			</a>
 		);

diff --git a/src/main/resources/src/js/saiku/components/Toolbar/data.json b/src/main/resources/src/js/saiku/components/Toolbar/data.json
@@ -2,36 +2,63 @@
     "item": [
         {
             "name": "New query",
+            "drop" : "drop1",
             "visible": true,
-            "icon": "fa fa-file"
+            "icon": "fa fa-file",
+            "dropdown": {
+                "visible": true,
+                "item": [
+                    {
+                        "name": "OLAP",
+                        "visible": true,
+                        "action": "#"
+                    },
+                    {
+                        "name": "Report",
+                        "visible": true,
+                        "action": "#"
+                    },
+                    {
+                        "name": "Dashboard",
+                        "visible": true,
+                        "action": "#"
+                    }
+                ]
+            }
         },
         {
             "name": "Open query",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-folder-open"
         },
         {
             "name": "Logout",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-power-off"
         },
         {
             "name": "About",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-info-circle"
         },
         {
             "name": "Admin Console",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-cog"
         },
         {
             "name": "Schema Designer",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-cube"
         },
         {
             "name": "Dashboards",
+            "drop" : null,
             "visible": true,
             "icon": "fa fa-tachometer"
         }