@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
107 lines (106 loc) • 5.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../lib/utils';
import { allIcons } from '../icons';
import { ACCESS_LEVEL_HIDDEN, ACCESS_LEVEL_READ_ONLY, } from '../../Utilities/Constants/GeneralConstants';
import { IconComponent, isAdaptableElementIcon, isAdaptableCustomIcon, isAdaptableSystemIcon, } from '../Icon';
import { Box } from '../Flex';
import { NewTooltip } from '../NewTooltip';
export const baseClassName = 'ab-SimpleButton';
const SimpleButton = React.forwardRef((givenProps, theRef) => {
const props = { ...givenProps };
let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type, ...buttonProps } = props;
let adaptableSystemIcon;
if (isAdaptableSystemIcon(icon)) {
adaptableSystemIcon = icon;
}
if (typeof icon === 'string' && allIcons[icon]) {
adaptableSystemIcon = { name: icon };
}
if (adaptableSystemIcon) {
const iconProps = {
icon: adaptableSystemIcon,
};
if (iconSize) {
iconProps.icon = { ...iconProps.icon, size: iconSize };
}
if (typeof buttonProps.color === 'string') {
iconProps.icon = { ...iconProps.icon, style: { color: buttonProps.color } };
}
icon = _jsx(IconComponent, { ...iconProps });
}
if (isAdaptableCustomIcon(icon) || isAdaptableElementIcon(icon)) {
icon = _jsx(IconComponent, { icon: icon });
}
if (icon) {
children =
iconPosition === 'start' ? (_jsxs(React.Fragment, { children: [icon, children] })) : (_jsxs(React.Fragment, { children: [children, icon] }));
}
if (buttonProps.as == 'div') {
buttonProps.tabIndex = buttonProps.tabIndex === undefined ? 0 : buttonProps.tabIndex;
buttonProps.role = buttonProps.role || 'button';
const onKeyDown = buttonProps.onKeyDown;
buttonProps.onKeyDown = (e) => {
const key = e.key;
if (buttonProps.onClick && key === 'Enter') {
buttonProps.onClick(e);
}
if (onKeyDown) {
onKeyDown(e);
}
};
}
if (!buttonProps.as || buttonProps.as === 'button') {
buttonProps.type = type ? type : 'button';
buttonProps.as = 'button';
}
if (accessLevel === ACCESS_LEVEL_HIDDEN) {
return null;
}
if (accessLevel === ACCESS_LEVEL_READ_ONLY) {
disabled = true;
}
const ariaLabel = buttonProps['aria-label'] ||
buttonProps.label ||
tooltip ||
buttonProps.title ||
(buttonProps.key ? `${buttonProps.key}` : undefined);
const extraButtonProps = {};
if (ariaLabel != null && ariaLabel !== '') {
extraButtonProps['aria-label'] = ariaLabel;
}
const btn = (_jsx(Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: cn(baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 'twa:*:z-1', 'twa:[&_svg]:align-middle', 'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${baseClassName}--disabled` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
'twa:text-primary-foreground': tone == 'neutral',
'twa:text-inherit': tone === 'none',
'twa:text-success': tone === 'success',
'twa:text-accent': tone === 'accent',
'twa:text-destructive': tone === 'error',
'twa:text-warn': tone === 'warning',
'twa:text-info': tone === 'info',
}, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
: '', variant === 'outlined'
? 'twa:bg-background twa:border-input-border twa:border'
: '', variant === 'raised'
? {
'twa:text-primary-foreground twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
'twa:bg-success twa:text-success-foreground': tone == 'success',
'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
'twa:bg-transparent': tone == 'none',
'twa:bg-primary twa:text-primary-foreground': tone == 'neutral',
'twa:bg-destructive twa:text-destructive-foreground': tone == 'error',
'twa:bg-warn twa:text-warn-foreground': tone == 'warning',
'twa:bg-info twa:text-info-foreground': tone == 'info',
}
: '', variant === 'outlined' || variant === 'text'
? {
'twa:before:opacity-0 twa:before:transition-opacity twa:before:duration-200': true,
'twa:hover:before:opacity-15 twa:hover:before:bg-current': !disabled,
}
: null, {
'twa:cursor-pointer': !disabled,
'twa:opacity-50': disabled,
}, className), ref: theRef, children: children }));
return tooltip ? _jsx(NewTooltip, { label: tooltip, children: btn }) : btn;
});
export default SimpleButton;