66 lines
1.5 KiB
React
66 lines
1.5 KiB
React
import React from 'react';
|
||
import './Button.css';
|
||
|
||
/**
|
||
* Aurora Admin Button（React）
|
||
* 对齐 button.json 契约：
|
||
* - type: primary | default | text | link | danger
|
||
* - size: large | default | small
|
||
* - disabled / loading / icon / children
|
||
*/
|
||
const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };
|
||
|
||
export default function Button({
|
||
type = 'default',
|
||
size = 'default',
|
||
disabled = false,
|
||
loading = false,
|
||
icon = '',
|
||
text = '',
|
||
className = '',
|
||
children,
|
||
onClick,
|
||
...rest
|
||
}) {
|
||
const isDisabled = disabled || loading;
|
||
|
||
const classes = [
|
||
'btn',
|
||
`btn-${type}`,
|
||
sizeMap[size],
|
||
isDisabled && !loading ? 'btn-disabled' : '',
|
||
loading ? 'is-loading' : '',
|
||
className
|
||
].filter(Boolean).join(' ');
|
||
|
||
const handleClick = (e) => {
|
||
if (isDisabled) return;
|
||
onClick && onClick(e);
|
||
};
|
||
|
||
return (
|
||
<button className={classes} disabled={isDisabled} onClick={handleClick} {...rest}>
|
||
{loading && <span className="spinner" aria-hidden="true" />}
|
||
{!loading && icon && (
|
||
<svg
|
||
className="btn-icon"
|
||
width="16" height="16"
|
||
viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
|
||
>
|
||
<path d={icon} />
|
||
</svg>
|
||
)}
|
||
<span className="btn-label">{children || text}</span>
|
||
</button>
|
||
);
|
||
}
|
||
|
||
/*
|
||
用法示例：
|
||
import Button from './Button';
|
||
|
||
<Button type="primary" size="large" onClick={save}>保存</Button>
|
||
<Button type="danger" loading>删除中</Button>
|
||
<Button type="default" icon="M12 5v14M5 12h14">新建</Button>
|
||
*/
|