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

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