56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { ActionIcon, FloatingPosition, Group, Tooltip } from '@mantine/core';
|
|
import { ReactNode } from 'react';
|
|
|
|
import { identifierString } from '../../functions/conversion';
|
|
import { notYetImplemented } from '../../functions/notifications';
|
|
|
|
export type ActionButtonProps = {
|
|
icon?: ReactNode;
|
|
text?: string;
|
|
color?: string;
|
|
tooltip?: string;
|
|
variant?: string;
|
|
size?: number | string;
|
|
radius?: number | string;
|
|
disabled?: boolean;
|
|
onClick?: any;
|
|
hidden?: boolean;
|
|
tooltipAlignment?: FloatingPosition;
|
|
};
|
|
|
|
/**
|
|
* Construct a simple action button with consistent styling
|
|
*/
|
|
export function ActionButton(props: ActionButtonProps) {
|
|
const hidden = props.hidden ?? false;
|
|
|
|
return (
|
|
!hidden && (
|
|
<Tooltip
|
|
key={`tooltip-${props.tooltip ?? props.text}`}
|
|
disabled={!props.tooltip && !props.text}
|
|
label={props.tooltip ?? props.text}
|
|
position={props.tooltipAlignment ?? 'left'}
|
|
>
|
|
<ActionIcon
|
|
key={`action-icon-${props.tooltip ?? props.text}`}
|
|
disabled={props.disabled}
|
|
p={17}
|
|
radius={props.radius ?? 'xs'}
|
|
color={props.color}
|
|
size={props.size}
|
|
aria-label={`action-button-${identifierString(
|
|
props.tooltip ?? props.text ?? ''
|
|
)}`}
|
|
onClick={props.onClick ?? notYetImplemented}
|
|
variant={props.variant ?? 'transparent'}
|
|
>
|
|
<Group gap="xs" wrap="nowrap">
|
|
{props.icon}
|
|
</Group>
|
|
</ActionIcon>
|
|
</Tooltip>
|
|
)
|
|
);
|
|
}
|