/** @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>;
}
}