/** @module react-aiot/components/ToolbarButton */
import classNames from 'classnames';
import React from 'react';
import { Tooltip, Dropdown, Menu } from '.';
/**
* Toolbar button for the {@link module:react-aiot/components/Toolbar|Toolbar} component.
*
* @param {object} props Properties
* @param {boolean} [props.visible=true] Is the element visible?
* @param {React.Element|string} [props.content] The button content
* @param {string} [props.cssClasses] The cssClasses for the link (a) DOMElement
* @param {React.Element|string} [props.toolTipTitle] The tooltip title
* @param {React.Element|string} [props.tooltipText] The tooltip text. If you want to show a tooltip you need to set a toolTipTitle, too.
* @param {boolean} [props.disabled] If true the button can not be clicked
* @param {React.Element} [props.menu] A menu implementation (see https://ant.design/components/menu/). You can wrap an menu item with
* Tooltip (do not forget css class <code>overlayClassName="aiot-toolbar-menu"</code>)
* @param {string} [toolTipPlacement] Placement for the tooltip
* @param {string} [dropdownPlacement] Placement for overlay of the dropdown (menu)
* @extends React.Component
*/
export default class ToolbarButton extends React.Component {
handleClick = e => {
if (!this.props.disabled) {
this.props.onClick && this.props.onClick(this.props);
}
e.preventDefault();
}
render() {
// @TODO <Menu onClick={handleMenuClick}
const { visible = true, content, cssClasses, toolTipTitle, toolTipText, disabled, menu,
toolTipPlacement, dropdownPlacement, modifier } = this.props,
className = classNames(cssClasses, 'aiot-tooltip', {
'aiot-disabled': disabled
}), bodyAttr = { href: '#', className, disabled, onClick: this.handleClick };
if (!visible) {
return null;
}
let body = <a {...bodyAttr}>{ content }</a>;
modifier && (body = modifier(body, this.props));
// Make tooltip
if (toolTipTitle && toolTipText) {
body = <Tooltip placement={ toolTipPlacement ? toolTipPlacement : (menu ? 'rightTop': 'bottom') }
title={ toolTipTitle } content={ toolTipText }>{ body }</Tooltip>;
}
// Make dropdown with menu items
if (menu) {
let overlay = menu;
if (menu.map) {
const overlayMenu = menu.map(({ key, label, toolTipTitle, toolTipText, ...rest }) => {
const menuItem = <Menu.Item key={ key } {...rest}>{ label }</Menu.Item>;
return toolTipTitle && toolTipText
? <Tooltip overlayClassName="aiot-toolbar-menu" placement="rightTop" title={ toolTipTitle } content={ toolTipText }>{ menuItem }</Tooltip>
: menuItem;
});
overlay = <Menu>{ overlayMenu }</Menu>;
}
body = <Dropdown placement={ dropdownPlacement ? dropdownPlacement : 'bottomRight' } overlay={ overlay }>{ body }</Dropdown>;
}
return body;
}
}