@ecoding/components.antd 0.3.43 → 0.3.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { FilterValue, SorterResult, TableCurrentDataSource, TablePaginationConfig, TableLocale } from 'antd/lib/table/interface';
|
|
3
3
|
import type { ColProps } from 'antd/lib/col';
|
|
4
|
+
interface TableProRef {
|
|
5
|
+
clear: () => void;
|
|
6
|
+
}
|
|
4
7
|
interface IProps {
|
|
5
8
|
className?: string;
|
|
6
9
|
header?: React.ReactNode;
|
|
@@ -30,5 +33,5 @@ interface IProps {
|
|
|
30
33
|
selectChangeHandler?: any;
|
|
31
34
|
locale?: TableLocale;
|
|
32
35
|
}
|
|
33
|
-
declare const
|
|
34
|
-
export default
|
|
36
|
+
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IProps & React.RefAttributes<TableProRef>>>;
|
|
37
|
+
export default _default;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
|
|
1
|
+
import React, { memo, useEffect, useMemo, useRef, useState, useImperativeHandle, forwardRef } from 'react';
|
|
2
2
|
import { Popover, Button, Typography, Table } from 'antd';
|
|
3
3
|
import { FilterOutlined, MenuOutlined } from '@ant-design/icons';
|
|
4
4
|
import TableProColumns from "./columns";
|
|
5
5
|
import { getDelateTargetByClassName } from "../../helpers/dom";
|
|
6
6
|
import FilterHorizontal from "./filters.horizontal";
|
|
7
|
-
const TablePro =
|
|
8
|
-
const
|
|
7
|
+
const TablePro = ({ className, header, buttonArea, filterArea, filters, searchInputArea, loading, rowKey, dataSource, pagination, offsetY, columns, operationColumn, bordered = false, selectChangeHandler, selectType, onChange, expandable, columnsTitle = "显示列", filterTitle = "筛选", locale }, ref) => {
|
|
8
|
+
const tableRef = useRef(null);
|
|
9
9
|
const disColumnRef = useRef([]);
|
|
10
10
|
const [y, setY] = useState('100%');
|
|
11
11
|
const [innerColumns, setColumns] = useState(columns);
|
|
@@ -86,23 +86,27 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, filters, sea
|
|
|
86
86
|
}
|
|
87
87
|
}, [columns]);
|
|
88
88
|
useEffect(() => {
|
|
89
|
-
if (
|
|
90
|
-
const thead =
|
|
89
|
+
if (tableRef.current && innerColumns.length > 0) {
|
|
90
|
+
const thead = tableRef.current.querySelector('thead');
|
|
91
91
|
setTimeout(() => {
|
|
92
92
|
if (offsetY && offsetY > 0) {
|
|
93
|
-
if (
|
|
94
|
-
setY(
|
|
93
|
+
if (tableRef.current) {
|
|
94
|
+
setY(tableRef.current.clientHeight - offsetY);
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
else {
|
|
98
|
-
if (
|
|
99
|
-
|
|
100
|
-
setY(ref.current.clientHeight - (thead.clientHeight && thead.clientHeight + (pagination ? 64 : 20)));
|
|
98
|
+
if (tableRef.current && thead) {
|
|
99
|
+
setY(tableRef.current.clientHeight - (thead.clientHeight && thead.clientHeight + (pagination ? 64 : 20)));
|
|
101
100
|
}
|
|
102
101
|
}
|
|
103
102
|
}, 100);
|
|
104
103
|
}
|
|
105
104
|
}, [header, loading, innerColumns]);
|
|
105
|
+
useImperativeHandle(ref, () => ({
|
|
106
|
+
clear: () => {
|
|
107
|
+
setSelectedRowKeys([]);
|
|
108
|
+
}
|
|
109
|
+
}));
|
|
106
110
|
return (React.createElement("div", { style: flexColumnStyle, className: className || '' },
|
|
107
111
|
header ? header : null,
|
|
108
112
|
filters ? (React.createElement(FilterHorizontal, Object.assign({ y: y, setY: setY }, filters))) : null,
|
|
@@ -118,7 +122,7 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, filters, sea
|
|
|
118
122
|
setOpenColumnFilter(newOpen);
|
|
119
123
|
} },
|
|
120
124
|
React.createElement(Button, { type: "text", icon: React.createElement(MenuOutlined, null) }, columnsTitle))) : null)),
|
|
121
|
-
dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref:
|
|
125
|
+
dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref: tableRef },
|
|
122
126
|
React.createElement(Table, { rowSelection: selectType ? rowSelection : undefined, locale: locale ? locale : undefined, onRow: (record, index) => {
|
|
123
127
|
return {
|
|
124
128
|
onClick: (e) => {
|
|
@@ -133,10 +137,5 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, filters, sea
|
|
|
133
137
|
}, // 点击行
|
|
134
138
|
};
|
|
135
139
|
}, expandable: expandable || undefined, bordered: bordered, rowKey: rowKey, columns: showColumns, dataSource: dataSource, scroll: { y }, loading: loading, pagination: pagination || false, onChange: onChange || undefined }))) : null));
|
|
136
|
-
});
|
|
137
|
-
TablePro.defaultProps = {
|
|
138
|
-
filterTitle: "筛选",
|
|
139
|
-
columnsTitle: "显示列",
|
|
140
|
-
bordered: false
|
|
141
140
|
};
|
|
142
|
-
export default TablePro;
|
|
141
|
+
export default memo(forwardRef(TablePro));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ecoding/components.antd",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.45",
|
|
4
4
|
"author": "cxc",
|
|
5
5
|
"homepage": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"antd": "^5.8.4",
|
|
44
44
|
"axios": "^1.1.2"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "05e5da568460902e58b9a156bd4bf72b4ce33411"
|
|
47
47
|
}
|