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.jsx125
1 files changed, 90 insertions, 35 deletions
diff --git a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
index feb0f813ea..3b89137090 100644
--- a/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
+++ b/openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx
@@ -1,9 +1,23 @@
+/*!
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
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,
@@ -11,51 +25,26 @@ class NavigationSideBar extends React.Component {
groups: React.PropTypes.array
};
+ constructor(props) {
+ super(props);
+ this.state = {
+ activeItemId: null
+ };
+ this.handleItemClicked = this.handleItemClicked.bind(this);
+ }
+
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>
+ <NavigationMenu menu={group} activeItemId={activeItemId} onNavigationItemClick={this.handleItemClicked} key={'menu_' + group.id} />
))}
</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) {
@@ -70,4 +59,70 @@ class NavigationSideBar extends React.Component {
}
}
+class NavigationMenu extends React.Component {
+ static PropTypes = {
+ activeItemId: React.PropTypes.string.isRequired,
+ onNavigationItemClick: React.PropTypes.func,
+ menu: React.PropTypes.array
+ };
+
+ render() {
+ const {menu, activeItemId, onNavigationItemClick} = this.props;
+ return (
+ <div className='navigation-group' key={menu.id}>
+ <NavigationMenuHeader title={menu.name} />
+ <NavigationMenuItems items={menu.items} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />
+ </div>);
+ }
+}
+
+function NavigationMenuHeader(props) {
+ return <div className='group-name' data-test-id='navbar-group-name'>{props.title}</div>;
+}
+
+function NavigationMenuItems(props) {
+ const {items, activeItemId, onNavigationItemClick} = props;
+ return (
+ <div className='navigation-group-items'>
+ {
+ items && items.map(item => (<NavigationMenuItem key={'menuItem_' + item.id} item={item} activeItemId={activeItemId} onNavigationItemClick={onNavigationItemClick} />))
+ }
+ </div>
+ );
+}
+
+function NavigationMenuItem(props) {
+ const {onNavigationItemClick, item, activeItemId} = props;
+ const isGroup = item.items && item.items.length > 0;
+ return (
+ <div className={classnames('navigation-group-item', {'selected-item': item.id === activeItemId})} key={'item_' + item.id}>
+ <NavigationLink item={item} activeItemId={activeItemId} onClick={onNavigationItemClick} />
+ {isGroup && <Collapse in={item.expanded} data-test-id={'navigation-group-' + item.id}>
+ <div>
+ {item.items.map(subItem => (<NavigationMenuItem key={'menuItem_' + subItem.id} item={subItem} onNavigationItemClick={onNavigationItemClick} activeItemId={activeItemId} />)) }
+ </div>
+ </Collapse>
+ }
+ </div>
+ );
+}
+
+function NavigationLink(props) {
+ const {item, activeItemId, onClick} = props;
+ return (
+ <div
+ key={'navAction_' + item.id}
+ className={classnames('navigation-group-item-name', {
+ 'selected': item.id === activeItemId,
+ 'disabled': item.disabled,
+ 'bold-name': item.expanded,
+ 'hidden': item.hidden
+ })}
+ onClick={(event) => onClick(event, item)}
+ data-test-id={'navbar-group-item-' + item.id}>
+ {item.name}
+ </div>
+ );
+}
+
export default NavigationSideBar;