/** @module react-aiot/components/Creatable */
import classNames from 'classnames';
import { Tooltip } from '.';
/**
* A creatable button is next to the headline. The use case for
* a creatable button is for example the "Create folder" button.
*
* @param {object} props Properties
* @param {boolean} [props.visible=true] Determines to show the creatable button
* @param {string} props.type The type (also data-aio-type to the button DOMElement)
* @param {string} [props.cssClasses] The cssClasses for the button DOMElement
* @param {boolean} [props.isCreatableLinkDisabled] If true the button is disabled
* @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 {React.Element} [props.icon] The icon before the label
* @param {React.Element|string} [props.label] The label for the button
* @param {module:react-aiot/components/Creatable#onClick} [props.onClick]
* @returns React.Element
*/
export default ({
visible = true,
type,
cssClasses,
isCreatableLinkDisabled,
toolTipTitle,
toolTipText,
icon,
label,
/**
* The creatable button is pressed.
*
* @callback module:react-aiot/components/Creatable#onClick
* @param {string} type The creatable type
*/
onClick
}) => {
if (!visible) return null;
const className = classNames(cssClasses, {
'aiot-disabled': isCreatableLinkDisabled
}), body = <button data-aio-type={ type } className={ className } onClick={ () => onClick && onClick(type) }>
{ icon } { label }
</button>;
return toolTipTitle
? <Tooltip title={ toolTipTitle } content={ toolTipText }>{ body }</Tooltip>
: body;
};