101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import { HTMLMotionProps, motion } from 'framer-motion';
|
|
import { forwardRef, ReactNode } from 'react';
|
|
import { cn } from '@web/src/utils/classname';
|
|
import { LoadingOutlined } from '@ant-design/icons';
|
|
|
|
export interface ButtonProps extends Omit<HTMLMotionProps<"button">, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> {
|
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
isLoading?: boolean;
|
|
leftIcon?: React.ReactNode;
|
|
rightIcon?: React.ReactNode;
|
|
fullWidth?: boolean;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
children?: ReactNode;
|
|
// 添加常用的按钮事件处理器
|
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
|
|
}
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
className,
|
|
variant = 'primary',
|
|
size = 'md',
|
|
isLoading = false,
|
|
disabled,
|
|
leftIcon,
|
|
rightIcon,
|
|
children,
|
|
fullWidth,
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const variants = {
|
|
primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow-sm disabled:bg-gray-400',
|
|
secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:bg-gray-200 disabled:text-gray-500',
|
|
outline: 'border-2 border-gray-300 hover:bg-gray-50 disabled:border-gray-200 disabled:text-gray-400',
|
|
ghost: 'hover:bg-gray-100 disabled:bg-transparent disabled:text-gray-400',
|
|
danger: 'bg-red-600 text-white hover:bg-red-700 disabled:bg-gray-400',
|
|
};
|
|
|
|
const ringColors = {
|
|
primary: 'focus:ring-blue-500',
|
|
secondary: 'focus:ring-gray-500',
|
|
outline: 'focus:ring-gray-400',
|
|
ghost: 'focus:ring-gray-400',
|
|
danger: 'focus:ring-red-500',
|
|
};
|
|
|
|
|
|
const sizes = {
|
|
sm: 'px-3 py-1.5 text-sm',
|
|
md: 'px-4 py-2 text-base',
|
|
lg: 'px-6 py-3 text-lg',
|
|
};
|
|
|
|
return (
|
|
<motion.button
|
|
ref={ref}
|
|
disabled={disabled || isLoading}
|
|
className={cn(
|
|
// Base styles
|
|
'inline-flex items-center justify-center rounded-md font-medium',
|
|
'transition-all duration-200 ease-in-out',
|
|
'focus:outline-none focus:ring-2 focus:ring-offset-2',
|
|
'disabled:opacity-75 disabled:cursor-not-allowed disabled:hover:scale-100',
|
|
// Variant styles
|
|
variants[variant],
|
|
// Ring color based on variant
|
|
ringColors[variant],
|
|
// Size styles
|
|
sizes[size],
|
|
// Full width
|
|
fullWidth && 'w-full',
|
|
className
|
|
)}
|
|
whileTap={{ scale: 0.98 }}
|
|
whileHover={{ scale: 1.01 }}
|
|
{...props}
|
|
>
|
|
{isLoading && (
|
|
<LoadingOutlined className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
|
)}
|
|
{!isLoading && leftIcon && (
|
|
<span className="mr-2 inline-flex">{leftIcon}</span>
|
|
)}
|
|
{children}
|
|
{!isLoading && rightIcon && (
|
|
<span className="ml-2 inline-flex">{rightIcon}</span>
|
|
)}
|
|
</motion.button>
|
|
);
|
|
}
|
|
);
|
|
|
|
Button.displayName = 'Button'; |