mirror of https://github.com/mue/mue.git
57 lines
1.2 KiB
JavaScript
57 lines
1.2 KiB
JavaScript
import React, { forwardRef } from 'react';
|
|
import Tooltip from 'components/Elements/Tooltip/Tooltip';
|
|
|
|
const Button = forwardRef(
|
|
(
|
|
{ icon, label, type, iconPlacement, onClick, active, disabled, tooltipTitle, tooltipKey },
|
|
ref,
|
|
) => {
|
|
let className;
|
|
|
|
switch (type) {
|
|
case 'settings':
|
|
className = 'btn-settings';
|
|
break;
|
|
case 'secondary':
|
|
className = 'btn-secondary';
|
|
break;
|
|
case 'icon':
|
|
className = 'btn-icon';
|
|
break;
|
|
case 'navigation':
|
|
className = 'btn-navigation';
|
|
break;
|
|
case 'collection':
|
|
className = 'btn-collection';
|
|
break;
|
|
default:
|
|
className = 'btn-default';
|
|
}
|
|
|
|
if (iconPlacement === 'right') {
|
|
className += ' flowReverse';
|
|
}
|
|
|
|
if (active) {
|
|
className += ` ${className}-active`;
|
|
}
|
|
|
|
const button = (
|
|
<button className={className} onClick={onClick} ref={ref} disabled={disabled}>
|
|
{icon}
|
|
{label}
|
|
</button>
|
|
);
|
|
|
|
return type === 'icon' ? (
|
|
<Tooltip title={tooltipTitle} key={tooltipKey}>
|
|
{button}
|
|
</Tooltip>
|
|
) : (
|
|
button
|
|
);
|
|
},
|
|
);
|
|
|
|
export { Button as default, Button };
|