summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
diff options
context:
space:
mode:
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;