Source: node_modules/react-aiot/src/components/Toolbar.js

/** @module react-aiot/components/Toolbar */
import React from 'react';
import { ToolbarButton, Spin } from '.';

/**
 * Renders the toolbar with {@link module:react-aiot/components/ToolbarButton|Toolbar buttons}. If <code>props.activeButton</code> is
 * set all other <code>ToolbarButton</code>`s are disabled expect the <code>props.backButton</code> - then the user clicks on the cancel button (<code>props.backButton.label</code>)
 * and the <code>onCancel</code> callback of the ToolbarButton gets executed.
 * 
 * <p>If the ToolbarButton has a valid <code>onSave</code> callback the toolbar has an additional save button (<code>props.backButton.save</code>)
 * - then the user clicks on the save button and the callback gets executed.</p>
 * 
 * @param {object} props Properties
 * @param {boolean} [props.isToolbarActive] If true the toolbar buttons are enabled
 * @param {boolean} [props.isToolbarBusy] If true the toolbar is overlayed with a spinning loader
 * @param {object<key,object>} [props.buttons] The toolbar buttons (see {@link module:react-aiot/components/ToolbarButton|ToolbarButton})
 * @param {object} [props.backButton] The toolbar back button (see {@link module:react-aiot/components/ToolbarButton|ToolbarButton})
 * @param {React.Element|string} [props.backButton.label] This label represents the cancel button
 * @param {React.Element|string} [props.backButton.save] This label represents the save button
 * @param {string} [props.activeButton] The active toolbar button (must match the same as the object key of the button)
 * @extends React.Component
 */
export default class Toolbar extends React.Component {
    handleCancelClick = cancelNode => {
        const originalNode = this.props.buttons[this.props.activeButton];
        originalNode && originalNode.onCancel && originalNode.onCancel(cancelNode, originalNode);
    }
    
    render() {
        const { isToolbarActive, isToolbarBusy, buttons, backButton, activeButton } = this.props, activeActions = [],
            hasActionButtonSave = activeButton && buttons[activeButton].onSave;
        
        activeButton && activeActions.push(
            <ToolbarButton key="activeButtonCancel" content={ backButton.label } onClick={ this.handleCancelClick } />);
        hasActionButtonSave && activeActions.push(
            <ToolbarButton key="activeButtonSave" content={ backButton.save } onClick={ hasActionButtonSave } />);
            
        return <Spin spinning={ isToolbarBusy } size="small">
            <div className="aiot-toolbar">
            	<div className="aiot-toolbar-items">
            	    { activeButton ? activeActions : Object.keys(buttons).map(key => {
            	        return <ToolbarButton key={ key } {...buttons[key]}
            	            disabled={ !isToolbarActive ? true : buttons[key].disabled } />;
            	    } ) }
            	</div>
            	<div className="clear"></div>
            </div>
        </Spin>;
    }
}