@ecoding/components.antd 0.3.44 → 0.3.46
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,22 +86,30 @@ 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
|
-
setY(
|
|
98
|
+
if (tableRef.current && thead) {
|
|
99
|
+
setY(tableRef.current.clientHeight - (thead.clientHeight && thead.clientHeight + (pagination ? 64 : 20)));
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
}, 100);
|
|
103
103
|
}
|
|
104
104
|
}, [header, loading, innerColumns]);
|
|
105
|
+
useImperativeHandle(ref, () => ({
|
|
106
|
+
clear: () => {
|
|
107
|
+
setSelectedRowKeys([]);
|
|
108
|
+
},
|
|
109
|
+
setSelectedRowKeys: (keys) => {
|
|
110
|
+
setSelectedRowKeys(keys);
|
|
111
|
+
}
|
|
112
|
+
}));
|
|
105
113
|
return (React.createElement("div", { style: flexColumnStyle, className: className || '' },
|
|
106
114
|
header ? header : null,
|
|
107
115
|
filters ? (React.createElement(FilterHorizontal, Object.assign({ y: y, setY: setY }, filters))) : null,
|
|
@@ -117,7 +125,7 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, filters, sea
|
|
|
117
125
|
setOpenColumnFilter(newOpen);
|
|
118
126
|
} },
|
|
119
127
|
React.createElement(Button, { type: "text", icon: React.createElement(MenuOutlined, null) }, columnsTitle))) : null)),
|
|
120
|
-
dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref:
|
|
128
|
+
dataSource ? (React.createElement("div", { style: { height: '100%', overflow: 'hidden' }, ref: tableRef },
|
|
121
129
|
React.createElement(Table, { rowSelection: selectType ? rowSelection : undefined, locale: locale ? locale : undefined, onRow: (record, index) => {
|
|
122
130
|
return {
|
|
123
131
|
onClick: (e) => {
|
|
@@ -132,10 +140,5 @@ const TablePro = memo(({ className, header, buttonArea, filterArea, filters, sea
|
|
|
132
140
|
}, // 点击行
|
|
133
141
|
};
|
|
134
142
|
}, expandable: expandable || undefined, bordered: bordered, rowKey: rowKey, columns: showColumns, dataSource: dataSource, scroll: { y }, loading: loading, pagination: pagination || false, onChange: onChange || undefined }))) : null));
|
|
135
|
-
});
|
|
136
|
-
TablePro.defaultProps = {
|
|
137
|
-
filterTitle: "筛选",
|
|
138
|
-
columnsTitle: "显示列",
|
|
139
|
-
bordered: false
|
|
140
143
|
};
|
|
141
|
-
export default TablePro;
|
|
144
|
+
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.46",
|
|
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": "bc713855b458f888f014acb50aea3040e36fd41e"
|
|
47
47
|
}
|