head-button.tsx
2.49 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
92
93
94
95
96
97
98
99
100
/*
* @Author: zhuqin zq627501913@163.com
* @Date: 2022-06-28 19:30:49
* @LastEditors: zhuqin zq627501913@163.com
* @LastEditTime: 2022-06-30 22:21:12
* @FilePath: \qx-apaas-fe\src\pages\app-view\form\head-button.tsx
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import React from 'react';
import { Button, Space, Menu } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { QxButton, HeaderDropDown } from '@/src/components';
import _ from 'lodash';
import './index.less';
type ButtonOptions = {
code: string;
name: string;
type?:
| 'link'
| 'text'
| 'ghost'
| 'default'
| 'primary'
| 'dashed'
| undefined;
color?: string;
icon?: any;
};
interface HeadButtonProps {
buttons: ButtonOptions[];
handleBtnClick: (item: ButtonOptions) => void;
}
// 超过3个则放入更多操作
const MAX = 3;
const HeadButton: React.FC<HeadButtonProps> = ({
buttons = [],
handleBtnClick = () => {},
}) => {
if (_.isEmpty(buttons)) {
return null;
}
const isOverMax = buttons?.length > MAX + 1;
const isEqualMax = buttons?.length === MAX + 1;
return (
<Space>
{_.take(buttons, isEqualMax ? MAX + 1 : MAX).map((item) => (
<QxButton
key={item.code}
type={item.type}
color={item.color}
icon={item.icon}
onClick={() => {
handleBtnClick(item);
}}
>
{item.name}
</QxButton>
))}
{isOverMax && (
<HeaderDropDown
overlayClassName="head-button-wrap"
placement="bottomRight"
overlay={
<Menu>
{_.drop(buttons || [], MAX).map((item) => (
<Menu.Item key={item.code} title={item.name}>
<QxButton
type={item.type}
color={item.color}
icon={item.icon}
style={{
maxWidth: '10em',
}}
onClick={() => {
handleBtnClick(item);
}}
>
{item.name}
</QxButton>
</Menu.Item>
))}
</Menu>
}
>
<Button>
更多操作 <DownOutlined />
</Button>
</HeaderDropDown>
)}
</Space>
);
};
export default HeadButton;