80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { Link } from '@remix-run/react';
|
|
|
|
type ButtonType = 'primary' | 'default' | 'danger';
|
|
type ButtonSize = 'small' | 'medium' | 'large';
|
|
|
|
interface ButtonProps {
|
|
children: React.ReactNode;
|
|
type?: ButtonType;
|
|
size?: ButtonSize;
|
|
to?: string;
|
|
icon?: string;
|
|
loading?: boolean;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
}
|
|
|
|
export function Button({
|
|
children,
|
|
type = 'default',
|
|
size = 'medium',
|
|
to,
|
|
icon,
|
|
loading = false,
|
|
disabled = false,
|
|
className = '',
|
|
onClick,
|
|
...rest
|
|
}: ButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>) {
|
|
const baseClasses = 'ant-btn';
|
|
|
|
const typeClasses = {
|
|
primary: 'ant-btn-primary',
|
|
default: 'ant-btn-default',
|
|
danger: 'ant-btn-danger'
|
|
};
|
|
|
|
const sizeClasses = {
|
|
small: 'ant-btn-sm',
|
|
medium: '',
|
|
large: 'text-base px-5 py-2.5'
|
|
};
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
typeClasses[type],
|
|
sizeClasses[size],
|
|
(disabled || loading) ? 'opacity-50 cursor-not-allowed' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
// 显示的图标：loading 时显示加载图标，否则显示传入的图标
|
|
const displayIcon = loading ? 'ri-loader-4-line animate-spin' : icon;
|
|
|
|
if (to) {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className={classes}
|
|
{...(rest as any)}
|
|
>
|
|
{displayIcon && <i className={`${displayIcon} mr-1.5`}></i>}
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
className={classes}
|
|
disabled={disabled || loading}
|
|
onClick={onClick}
|
|
{...rest}
|
|
>
|
|
{displayIcon && <i className={`${displayIcon} mr-1.5`}></i>}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|