UserDetailToolbar.tsx
2.08 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// REQ-USR-001 / REQ-USR-002: 用户单据工具栏（保存/取消/新增 + 占位按钮 + 齿轮，BR12/BR13/BR14/BR15/D8/D10）
import { Button, App as AntdApp } from 'antd';
import {
SaveOutlined,
CloseCircleOutlined,
PlusCircleOutlined,
SettingOutlined,
} from '@ant-design/icons';
import {
TEXT_SAVE,
TEXT_CANCEL,
TEXT_NEW,
TEXT_DELETE,
TEXT_VOID,
TEXT_RESET_PWD,
TEXT_UNVOID,
TEXT_FUNC,
MSG_FUNC_PLACEHOLDER,
} from './constants';
import styles from './UserDetail.module.css';
export interface UserDetailToolbarProps {
mode: 'create' | 'edit';
submitting: boolean;
canSave: boolean;
onSave(): void;
onCancel(): void;
onNew(): void;
}
const PLACEHOLDER_BUTTONS = [TEXT_DELETE, TEXT_VOID, TEXT_RESET_PWD, TEXT_UNVOID, TEXT_FUNC];
export default function UserDetailToolbar({
submitting,
canSave,
onSave,
onCancel,
onNew,
}: UserDetailToolbarProps) {
const { message } = AntdApp.useApp();
const placeholder = () => message.info(MSG_FUNC_PLACEHOLDER);
return (
<div className={styles.toolbar}>
<Button
type="primary"
icon={<SaveOutlined />}
loading={submitting}
disabled={submitting || !canSave}
onClick={() => onSave()}
data-testid="btn-save"
>
{TEXT_SAVE}
</Button>
<Button
type="text"
icon={<CloseCircleOutlined />}
onClick={() => onCancel()}
data-testid="btn-cancel"
>
{TEXT_CANCEL}
</Button>
<Button
type="text"
icon={<PlusCircleOutlined />}
onClick={() => onNew()}
data-testid="btn-new"
>
{TEXT_NEW}
</Button>
{PLACEHOLDER_BUTTONS.map((label) => (
<Button key={label} type="text" onClick={placeholder} data-testid={'btn-ph-' + label}>
{label}
</Button>
))}
<span className={styles.toolbarSpacer} />
<span
className={styles.gear}
data-testid="btn-gear"
role="presentation"
aria-label="设置"
onClick={placeholder}
>
<SettingOutlined />
</span>
</div>
);
}