Skip to content

Commit 5edbc1a

Browse files
hibighibig
committed
style: model list buttons
1 parent a7cfa05 commit 5edbc1a

File tree

24 files changed

+460
-157
lines changed

24 files changed

+460
-157
lines changed

‎config/routes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export default [
8989
name: 'apikeys',
9090
path: '/api-keys',
9191
key: 'apikeys',
92-
icon: 'LockOutlined',
92+
icon: 'KeyOutlined',
9393
component: './api-keys'
9494
},
9595
{

‎src/components/drop-down-buttons/index.tsx

+54-16
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,28 @@ interface DropdownButtonsProps {
1010
items: MenuProps['items'];
1111
size?: 'small' | 'middle' | 'large';
1212
trigger?: Trigger[];
13+
showText?: boolean;
14+
disabled?: boolean;
15+
variant?: 'filled' | 'outlined';
16+
color?: string;
17+
extra?: React.ReactNode;
1318
onSelect: (val: any, item?: any) => void;
1419
}
1520

1621
const DropdownButtons: React.FC<DropdownButtonsProps> = ({
1722
items,
1823
size = 'middle',
1924
trigger = ['hover'],
25+
showText,
26+
disabled,
27+
variant,
28+
color,
29+
extra,
2030
onSelect
2131
}) => {
32+
const headItem = _.head(items);
2233
const intl = useIntl();
34+
2335
const handleMenuClick = (item: any) => {
2436
const selectItem = _.find(items, { key: item.key });
2537
onSelect(item.key, selectItem);
@@ -37,19 +49,20 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
3749
return (
3850
<>
3951
{items?.length === 1 ? (
40-
<Tooltip title={intl.formatMessage({ id: _.head(items)?.label })}>
52+
<Tooltip title={intl.formatMessage({ id: headItem?.label })}>
4153
<Button
4254
className={classNames('dropdown-button', size)}
43-
{..._.head(items)}
44-
icon={_.get(items, '0.icon')}
55+
icon={headItem?.icon}
4556
size={size}
46-
{..._.get(items, '0.props')}
57+
{...headItem?.props}
4758
onClick={handleButtonClick}
4859
></Button>
4960
</Tooltip>
5061
) : (
5162
<Dropdown.Button
63+
disabled={disabled}
5264
trigger={trigger}
65+
type="primary"
5366
dropdownRender={(menus: any) => {
5467
return (
5568
<div
@@ -67,9 +80,10 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
6780
<Button
6881
{...item.props}
6982
type="text"
70-
size="middle"
83+
size={size}
7184
icon={item.icon}
7285
key={item.key}
86+
disabled={item.disabled}
7387
onClick={() => handleMenuClick(item)}
7488
style={{ width: '100%', justifyContent: 'flex-start' }}
7589
>
@@ -81,21 +95,45 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
8195
);
8296
}}
8397
buttonsRender={([leftButton, rightButton]) => [
84-
<Tooltip
85-
title={intl.formatMessage({ id: _.head(items)?.label })}
86-
key="leftButton"
87-
>
88-
<Button
89-
className={classNames('dropdown-button', size)}
90-
onClick={handleButtonClick}
91-
size={size}
92-
icon={_.head(items)?.icon}
93-
></Button>
94-
</Tooltip>,
98+
<>
99+
{showText ? (
100+
<Button
101+
{...headItem?.props}
102+
disabled={headItem?.disabled || disabled}
103+
className={classNames('dropdown-button', size)}
104+
onClick={handleButtonClick}
105+
size={size}
106+
icon={headItem?.icon}
107+
variant={variant}
108+
color={color}
109+
>
110+
{intl.formatMessage({
111+
id: headItem?.label
112+
})}
113+
{extra}
114+
</Button>
115+
) : (
116+
<Tooltip
117+
title={intl.formatMessage({ id: headItem?.label })}
118+
key="leftButton"
119+
>
120+
<Button
121+
{...headItem?.props}
122+
className={classNames('dropdown-button', size)}
123+
onClick={handleButtonClick}
124+
size={size}
125+
icon={headItem?.icon}
126+
disabled={headItem?.disabled}
127+
></Button>
128+
</Tooltip>
129+
)}
130+
</>,
95131
<Button
96132
icon={<MoreOutlined />}
97133
size={size}
98134
key="menu"
135+
variant={variant}
136+
color="default"
99137
className={classNames('dropdown-button', size)}
100138
></Button>
101139
]}

‎src/components/label-selector/wrapper.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@ import React from 'react';
33
import styles from './styles/wrapper.less';
44

55
const Wrapper: React.FC<{
6-
label?: string;
6+
label?: React.ReactNode;
77
description?: React.ReactNode;
8+
labelExtra?: React.ReactNode;
89
children: React.ReactNode;
9-
}> = ({ children, label, description, ...rest }) => {
10+
}> = ({ children, label, description, labelExtra, ...rest }) => {
1011
return (
1112
<div className={styles['wrapper']}>
1213
{label && (
1314
<span className="label">
14-
<LabelInfo label={label} description={description}></LabelInfo>
15+
<LabelInfo
16+
label={label}
17+
description={description}
18+
labelExtra={labelExtra}
19+
></LabelInfo>
1520
</span>
1621
)}
1722
{React.isValidElement(children)

‎src/components/list-input/index.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,26 @@ import ListItem from './list-item';
88

99
interface ListInputProps {
1010
dataList: string[];
11-
label: string;
11+
label: React.ReactNode;
1212
description?: React.ReactNode;
1313
btnText?: string;
1414
options?: Global.HintOptions[];
1515
placeholder?: string;
16+
labelExtra?: React.ReactNode;
1617
onChange: (data: string[]) => void;
1718
}
1819

1920
const ListInput: React.FC<ListInputProps> = (props) => {
2021
const intl = useIntl();
21-
const { dataList, label, description, onChange, btnText, options } = props;
22+
const {
23+
dataList,
24+
label,
25+
description,
26+
onChange,
27+
btnText,
28+
options,
29+
labelExtra
30+
} = props;
2231
const [list, setList] = React.useState<{ value: string; uid: number }[]>([]);
2332
const countRef = React.useRef(0);
2433
const buttonRef = React.useRef<HTMLButtonElement>(null);
@@ -71,7 +80,7 @@ const ListInput: React.FC<ListInputProps> = (props) => {
7180
}, [dataList]);
7281

7382
return (
74-
<Wrapper label={label} description={description}>
83+
<Wrapper label={label} description={description} labelExtra={labelExtra}>
7584
<>
7685
{_.map(list, (item: any, index: number) => {
7786
return (

‎src/components/seal-form/components/label-info.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ interface NoteInfoProps {
77
required?: boolean;
88
label: React.ReactNode;
99
description?: React.ReactNode;
10+
labelExtra?: React.ReactNode;
1011
}
1112
const NoteInfo: React.FC<NoteInfoProps> = (props) => {
12-
const { required, description, label } = props || {};
13+
const { required, description, label, labelExtra } = props || {};
1314
if (!label) return null;
1415

1516
return (
@@ -43,6 +44,7 @@ const NoteInfo: React.FC<NoteInfoProps> = (props) => {
4344
</span>
4445
</>
4546
)}
47+
{labelExtra}
4648
</span>
4749
);
4850
};

‎src/components/seal-form/components/wrapper.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ interface WrapperProps {
1717
variant?: string;
1818
hasPrefix?: boolean;
1919
classList?: string;
20+
labelExtra?: React.ReactNode;
2021
onClick?: () => void;
2122
}
2223

@@ -35,6 +36,7 @@ const Wrapper: React.FC<WrapperProps> = ({
3536
hasPrefix,
3637
noWrapperStyle,
3738
classList,
39+
labelExtra,
3840
onClick
3941
}) => {
4042
return (
@@ -74,6 +76,7 @@ const Wrapper: React.FC<WrapperProps> = ({
7476
label={label}
7577
required={required}
7678
description={description}
79+
labelExtra={labelExtra}
7780
></LabelInfo>
7881
</label>
7982
{extra && <div className={wrapperStyle.extra}>{extra}</div>}

‎src/components/seal-form/seal-input.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
2020
checkStatus,
2121
trim = true,
2222
loading,
23+
labelExtra,
2324
...rest
2425
} = props;
2526
const [isFocus, setIsFocus] = useState(false);
@@ -74,6 +75,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
7475
<Wrapper
7576
status={checkStatus || status}
7677
label={label}
78+
labelExtra={labelExtra}
7779
isFocus={isFocus}
7880
required={required}
7981
description={description}

‎src/components/seal-form/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface SealFormItemProps {
99
addAfter?: React.ReactNode;
1010
allowNull?: boolean;
1111
loading?: React.ReactNode;
12+
labelExtra?: React.ReactNode;
1213
trim?: boolean;
1314
checkStatus?: 'success' | 'error' | 'warning' | '';
1415
}

‎src/components/seal-table/components/table-row.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -53,12 +53,12 @@ const TableRow: React.FC<
5353
childrenDataRef.current = childrenData;
5454
const axiosToken = useRef<any>(null);
5555
const [updateChild, setUpdateChild] = useState(true);
56+
const [currentExpand, setCurrentExpand] = useState(false);
5657

5758
const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
5859
dataList: childrenData,
5960
limit: 100,
6061
setDataList: setChildrenData
61-
// callback: (list) => renderChildren?.(list)
6262
});
6363

6464
useEffect(() => {
@@ -92,7 +92,10 @@ const TableRow: React.FC<
9292
></Empty>
9393
);
9494
}
95-
return renderChildren?.(childrenData, record);
95+
return renderChildren?.(childrenData, {
96+
parent: record,
97+
currentExpanded: currentExpand
98+
});
9699
};
97100

98101
const handlePolling = async () => {
@@ -163,6 +166,7 @@ const TableRow: React.FC<
163166

164167
const handleRowExpand = async () => {
165168
onExpand?.(!expanded, record, record[rowKey]);
169+
setCurrentExpand(!expanded);
166170

167171
if (pollTimer.current) {
168172
clearInterval(pollTimer.current);

‎src/components/seal-table/styles/row-children.less

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
position: relative;
33
display: flex;
44
align-items: center;
5-
min-height: 54px;
6-
padding-block: 5px;
5+
height: 54px;
76
border-radius: var(--border-radius-mdium);
87
transition: all 0.2s ease;
98

‎src/components/seal-table/types.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,10 @@ export interface SealTableProps {
5959
onSort?: (dataIndex: string, order: 'ascend' | 'descend') => void;
6060
onExpand?: (expanded: boolean, record: any, rowKey: any) => void;
6161
onExpandAll?: (expanded: boolean) => void;
62-
renderChildren?: (data: any, parent?: any) => React.ReactNode;
62+
renderChildren?: (
63+
data: any,
64+
options: { parent?: any; [key: string]: any }
65+
) => React.ReactNode;
6366
loadChildren?: (record: any, options?: any) => Promise<any[]>;
6467
loadChildrenAPI?: (record: any) => string;
6568
contentRendered?: () => void;

‎src/components/simple-table/header.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const TableHeader = ({ columns }: TableHeaderProps) => {
1414
{columns.map((column: any, index: number) => {
1515
return (
1616
<th key={index}>
17-
<span className="cell-span">
17+
<span className="cell-span cell-header">
1818
{column.locale
1919
? intl.formatMessage({ id: column.title })
2020
: column.title}

‎src/components/simple-table/index.less

+9-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
}
1717

1818
tr:last-child td {
19-
border-bottom: none;
19+
// border-bottom: none;
2020
}
2121
}
2222

@@ -25,9 +25,17 @@
2525
font-weight: 600;
2626
}
2727

28+
td {
29+
color: var(--color-white-quaternary);
30+
}
31+
2832
.cell-span {
2933
display: flex;
3034
padding: 4px 6px;
3135
min-height: 32px;
3236
}
37+
38+
.cell-header {
39+
font-weight: var(--font-weight-bold);
40+
}
3341
}

‎src/components/simple-table/index.tsx

+24-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,31 @@ import TableHeader from './header';
66
import './index.less';
77
import TableRow from './row';
88

9-
interface ColumnProps {
9+
export interface ColumnProps {
1010
title: string;
1111
key: string;
12-
render?: (data: { dataIndex: string; row: any }) => any;
12+
render?: (data: {
13+
dataIndex: string;
14+
dataList?: any[];
15+
row: any;
16+
rowIndex?: number;
17+
colIndex?: number;
18+
}) => any;
1319
locale?: boolean;
20+
colSpan?: (params: {
21+
row: any;
22+
rowIndex: number;
23+
colIndex: number;
24+
dataIndex: string;
25+
dataList: any[];
26+
}) => number;
27+
rowSpan?: (params: {
28+
row: any;
29+
rowIndex: number;
30+
colIndex: number;
31+
dataIndex: string;
32+
dataList: any[];
33+
}) => number;
1434
}
1535

1636
interface SimpleTableProps {
@@ -42,7 +62,9 @@ const SimpleTabel: React.FC<SimpleTableProps> = (props) => {
4262
return (
4363
<TableRow
4464
row={item}
65+
rowIndex={index}
4566
columns={columns}
67+
dataList={dataSource}
4668
key={rowKey ? item[rowKey] : index}
4769
></TableRow>
4870
);

0 commit comments

Comments
 (0)