openecomp-ui/src/nfvo-components/panel/NavigationSideBar.jsx

/*!
 * Copyright © 2016-2018 European Support Limited
 *
 * 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 PropTypes from 'prop-types';
import classnames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';

class NavigationSideBar extends React.Component {
    static PropTypes = {
        activeItemId: PropTypes.string.isRequired,
        onSelect: PropTypes.func,
        onToggle: PropTypes.func,
        groups: PropTypes.array,
        disabled: PropTypes.bool
    };

    constructor(props) {
        super(props);
        this.state = {
            activeItemId: null
        };
        this.handleItemClicked = this.handleItemClicked.bind(this);
    }

    render() {
        let { groups, activeItemId, disabled = false } = this.props;

        return (
            <div
                className={`navigation-side-content ${
                    disabled ? 'disabled' : ''
                }`}>
                {groups.map(group => (
                    <NavigationMenu
                        menu={group}
                        activeItemId={activeItemId}
                        onNavigationItemClick={this.handleItemClicked}
                        key={'menu_' + group.id}
                    />
                ))}
            </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);
        }
    }
}

class NavigationMenu extends React.Component {
    static PropTypes = {
        activeItemId: PropTypes.string.isRequired,
        onNavigationItemClick: PropTypes.func,
        menu: 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 getItemDataTestId(itemId) {
    return itemId.split('|')[0];
}
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-' + getItemDataTestId(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;
    // todo should this be button
    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-' + getItemDataTestId(item.id)}>
            {item.name}
        </div>
    );
}

export default NavigationSideBar;