150 lines
3.7 KiB
TypeScript
150 lines
3.7 KiB
TypeScript
import type { ElementType, MouseEventHandler } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import type { ComponentSize } from './types';
|
|
|
|
type ButtonType = 'solid' | 'outlined' | 'noborder';
|
|
type ButtonVariant = 'primary' | 'secondary' | 'important';
|
|
type NativeButtonType = 'button' | 'submit' | 'reset';
|
|
|
|
type ButtonProps = {
|
|
label?: string;
|
|
type: ButtonType;
|
|
variant?: ButtonVariant;
|
|
size?: ComponentSize;
|
|
width?: ComponentSize;
|
|
to?: string;
|
|
htmlType?: NativeButtonType;
|
|
onClick?: MouseEventHandler<HTMLElement>;
|
|
disabled?: boolean;
|
|
icon?: ElementType;
|
|
ariaLabel?: string;
|
|
className?: string;
|
|
};
|
|
|
|
const SIZE_CLASS: Record<ComponentSize, string> = {
|
|
sm: 'h-8 px-3 text-xs',
|
|
md: 'h-10 px-4 text-sm',
|
|
lg: 'h-12 px-5 text-base',
|
|
full: 'h-10 px-4 text-sm',
|
|
};
|
|
|
|
const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
|
|
sm: 'h-8 w-8 !p-0',
|
|
md: 'h-10 w-10 !p-0',
|
|
lg: 'h-12 w-12 !p-0',
|
|
full: 'h-10 w-10 !p-0',
|
|
};
|
|
|
|
const ICON_CLASS: Record<ComponentSize, string> = {
|
|
sm: 'h-4 w-4',
|
|
md: 'h-4 w-4',
|
|
lg: 'h-5 w-5',
|
|
full: 'h-4 w-4',
|
|
};
|
|
|
|
const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
|
|
sm: 'h-4 w-4',
|
|
md: 'h-5 w-5',
|
|
lg: 'h-6 w-6',
|
|
full: 'h-5 w-5',
|
|
};
|
|
|
|
const WIDTH_CLASS: Record<ComponentSize, string> = {
|
|
sm: 'max-w-xs',
|
|
md: '',
|
|
lg: 'max-w-md',
|
|
full: 'w-full max-w-none',
|
|
};
|
|
|
|
const TYPE_CLASS: Record<ButtonType, string> = {
|
|
solid: 'btn-solid',
|
|
outlined: 'btn-outlined',
|
|
noborder: 'btn-noborder',
|
|
};
|
|
|
|
const VARIANT_CLASS: Record<ButtonVariant, string> = {
|
|
primary: 'btn-primary',
|
|
secondary: 'btn-secondary',
|
|
important: 'btn-important',
|
|
};
|
|
|
|
function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
|
|
if (variant) {
|
|
return variant;
|
|
}
|
|
|
|
return type === 'solid' ? 'primary' : 'secondary';
|
|
}
|
|
|
|
export function Button({
|
|
label,
|
|
type,
|
|
variant,
|
|
size = 'md',
|
|
width = 'md',
|
|
to,
|
|
htmlType = 'button',
|
|
onClick,
|
|
disabled = false,
|
|
icon: Icon,
|
|
ariaLabel,
|
|
className = '',
|
|
}: Readonly<ButtonProps>) {
|
|
const isIconOnly = Icon != null && !label;
|
|
const resolvedVariant = resolveVariant(type, variant);
|
|
const composedClassName = [
|
|
TYPE_CLASS[type],
|
|
VARIANT_CLASS[resolvedVariant],
|
|
isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
|
|
WIDTH_CLASS[width],
|
|
Icon && label ? 'gap-1.5' : '',
|
|
disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
|
|
className,
|
|
]
|
|
.join(' ')
|
|
.trim();
|
|
const computedAriaLabel = ariaLabel ?? label;
|
|
const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
|
|
const content = (
|
|
<>
|
|
{Icon ? <Icon className={iconClass} aria-hidden="true" /> : null}
|
|
{label ?? null}
|
|
</>
|
|
);
|
|
|
|
const handleLinkClick: MouseEventHandler<HTMLElement> = (event) => {
|
|
if (disabled) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
onClick?.(event);
|
|
};
|
|
|
|
if (to) {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
onClick={handleLinkClick}
|
|
aria-disabled={disabled}
|
|
aria-label={computedAriaLabel}
|
|
tabIndex={disabled ? -1 : undefined}
|
|
className={composedClassName}
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type={htmlType}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
aria-label={computedAriaLabel}
|
|
className={composedClassName}
|
|
>
|
|
{content}
|
|
</button>
|
|
);
|
|
}
|