summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
diff options
context:
space:
mode:
authorMichael Lando <ml636r@att.com>2017-02-19 12:57:33 +0200
committerMichael Lando <ml636r@att.com>2017-02-19 13:47:13 +0200
commitefa037d34be7b1570efdc767c79fad8d4005f10e (patch)
treecf1036ba2728dea8a61492b678fa91954e629403 /openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
parentf5f13c4f6b6fe3b4d98e349dfd7db59339803436 (diff)
Add new code new version
Change-Id: Ic02a76313503b526f17c3df29eb387a29fe6a42a Signed-off-by: Michael Lando <ml636r@att.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx73
1 files changed, 73 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
new file mode 100644
index 0000000000..feb0f813ea
--- /dev/null
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import classnames from 'classnames';
+import Collapse from 'react-bootstrap/lib/Collapse.js';
+
+class NavigationSideBar extends React.Component {
+
+ static PropTypes = {
+ activeItemId: React.PropTypes.string.isRequired,
+ onSelect: React.PropTypes.func,
+ onToggle: React.PropTypes.func,
+ groups: React.PropTypes.array
+ };
+
+ render() {
+ let {groups, activeItemId} = this.props;
+
+ return (
+ <div className='navigation-side-content'>
+ {groups.map(group => (
+ <div className='navigation-group' key={group.id}>
+ <div className='group-name'>{group.name}</div>
+ <div className='navigation-group-items'>
+ {
+ group.items && group.items.map(item => this.renderGroupItem(item, activeItemId))
+ }
+ </div>
+ </div>
+ ))}
+ </div>
+ );
+ }
+
+ renderGroupItem(item, activeItemId) {
+ let isGroup = item.items && item.items.length > 0;
+ return (
+ <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})}>
+ <div
+ key={item.id}
+ className={classnames('navigation-group-item-name', {
+ 'selected': item.id === activeItemId,
+ 'disabled': item.disabled,
+ 'bold-name': item.expanded,
+ 'hidden': item.hidden
+ })}
+ onClick={(event) => this.handleItemClicked(event, item)}>
+ {item.name}
+ </div>
+ {isGroup &&
+ <Collapse in={item.expanded}>
+ <div>
+ {item.items.map(item => this.renderGroupItem(item, activeItemId))}
+ </div>
+ </Collapse>
+ }
+ </div>
+ );
+ }
+
+ handleItemClicked(event, item) {
+ event.stopPropagation();
+ if(this.props.onToggle) {
+ this.props.onToggle(this.props.groups, item.id);
+ }
+ if(item.onSelect) {
+ item.onSelect();
+ }
+ if(this.props.onSelect) {
+ this.props.onSelect(item);
+ }
+ }
+}
+
+export default NavigationSideBar;