@pinnacle0/web-ui 0.7.0-beta.4 → 0.7.0-beta.6
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.
- package/core/Table/index.d.ts +3 -2
- package/core/Table/index.js +2 -2
- package/core/Table/index.js.map +1 -1
- package/core/VirtualTable/index.d.ts +5 -14
- package/core/VirtualTable/index.js +40 -11
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/type.d.ts +18 -0
- package/core/VirtualTable/type.js +2 -0
- package/core/VirtualTable/type.js.map +1 -0
- package/package.json +2 -2
package/core/Table/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { ColumnProps as AntColumnsProps, TableProps as AntTableProps } from "antd/es/table";
|
|
2
|
+
import type { ColumnProps as AntColumnsProps, TableProps as AntTableProps, TableRef } from "antd/es/table";
|
|
3
3
|
import type { TableRowSelection } from "antd/es/table/interface";
|
|
4
4
|
import type { StringKey } from "../../internal/type";
|
|
5
5
|
declare enum SortOrder {
|
|
@@ -7,7 +7,7 @@ declare enum SortOrder {
|
|
|
7
7
|
ASC = "ASC"
|
|
8
8
|
}
|
|
9
9
|
type RenderedCell<T extends object> = Exclude<ReturnType<NonNullable<AntColumnsProps<T>["render"]>>, React.ReactNode>;
|
|
10
|
-
export type { TableRowSelection };
|
|
10
|
+
export type { TableRowSelection, TableRef };
|
|
11
11
|
export interface TableColumn<RowType extends object, OrderByFieldType = undefined> {
|
|
12
12
|
title: React.ReactElement | string | number;
|
|
13
13
|
renderData: (record: RowType, index: number) => React.ReactNode | RenderedCell<RowType> | undefined;
|
|
@@ -55,5 +55,6 @@ export interface TableProps<RowType extends object, OrderByFieldType> extends Om
|
|
|
55
55
|
*/
|
|
56
56
|
customizedStorageKey?: string;
|
|
57
57
|
minHeaderHeight?: number;
|
|
58
|
+
tableRef?: React.Ref<TableRef>;
|
|
58
59
|
}
|
|
59
60
|
export declare const Table: <RowType extends object, OrderByFieldType>(props: TableProps<RowType, OrderByFieldType>) => React.JSX.Element;
|
package/core/Table/index.js
CHANGED
|
@@ -19,7 +19,7 @@ const emptyPlaceHolderIconStyle = { display: "block", fontSize: 50, marginBottom
|
|
|
19
19
|
const settingIconContainerStyle = { display: "flex", justifyContent: "flex-end", marginBottom: "7px", marginRight: "5px" };
|
|
20
20
|
const settingIconStyle = { fontSize: "20px" };
|
|
21
21
|
export const Table = ReactUtil.memo("Table", (props) => {
|
|
22
|
-
const { sortConfig, loading, columns, onRow, onRowClick, rowKey, scrollX = "max-content", scrollY, emptyPlaceholder, emptyIcon, emptyText, emptyNodeStyle, dataSource, customizedStorageKey, minHeaderHeight, ...restProps } = props;
|
|
22
|
+
const { sortConfig, loading, columns, onRow, onRowClick, rowKey, scrollX = "max-content", scrollY, emptyPlaceholder, emptyIcon, emptyText, emptyNodeStyle, dataSource, customizedStorageKey, minHeaderHeight, tableRef, ...restProps } = props;
|
|
23
23
|
const [customizationConfig, setCustomizationConfig] = React.useState(getCustomizationConfig(props, getStorageKey(customizedStorageKey)));
|
|
24
24
|
const t = i18n();
|
|
25
25
|
const hasUniqueSortingColumn = () => columns.some(_ => _.sortField === true);
|
|
@@ -93,7 +93,7 @@ export const Table = ReactUtil.memo("Table", (props) => {
|
|
|
93
93
|
canCustomized && (React.createElement("div", { style: settingIconContainerStyle },
|
|
94
94
|
React.createElement(Popover, { trigger: "hover", placement: "bottomLeft", content: renderPopoverContent() },
|
|
95
95
|
React.createElement(SettingOutlined, { style: settingIconStyle })))),
|
|
96
|
-
React.createElement(AntTable, { dataSource: dataSource, tableLayout: "auto", locale: { emptyText: emptyTextNode }, onRow: onAntRow, loading: loading ? { indicator: React.createElement(LoadingOutlined, null) } : false, pagination: false, columns: tableColumns, onChange: onSortChange, rowKey: rowKey === "index" ? rowKeyByIndex : rowKey, scroll: { x: scrollX === "none" ? undefined : scrollX, y: scrollY === "none" ? undefined : scrollY }, ...restProps })));
|
|
96
|
+
React.createElement(AntTable, { ref: tableRef, dataSource: dataSource, tableLayout: "auto", locale: { emptyText: emptyTextNode }, onRow: onAntRow, loading: loading ? { indicator: React.createElement(LoadingOutlined, null) } : false, pagination: false, columns: tableColumns, onChange: onSortChange, rowKey: rowKey === "index" ? rowKeyByIndex : rowKey, scroll: { x: scrollX === "none" ? undefined : scrollX, y: scrollY === "none" ? undefined : scrollY }, ...restProps })));
|
|
97
97
|
});
|
|
98
98
|
const getStorageKey = (customizedStorageKey) => `table-customization-config:${customizedStorageKey || location.pathname}`;
|
|
99
99
|
const getCustomizationConfig = (props, storageKey) => {
|
package/core/Table/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,kBAAkB,MAAM,sCAAsC,CAAC;AACtE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAC,IAAI,EAAC,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AACrC,OAAO,EAAC,OAAO,EAAC,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,gBAAgB,EAAC,MAAM,6BAA6B,CAAC;AAI7D,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAE/C,IAAK,SAGJ;AAHD,WAAK,SAAS;IACV,0BAAa,CAAA;IACb,wBAAW,CAAA;AACf,CAAC,EAHI,SAAS,KAAT,SAAS,QAGb;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/Table/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { TableColumn, TableProps } from "../Table";
|
|
3
2
|
import "./index.less";
|
|
4
|
-
|
|
3
|
+
import type { VirtualTableProps } from "./type";
|
|
4
|
+
export type { TableRowSelection as VirtualTableRowSelection, TableRef as VirtualTableRef } from "../Table";
|
|
5
|
+
export type { VirtualTableProps, VirtualTableColumns } from "./type";
|
|
5
6
|
/**
|
|
6
7
|
* Antd Table's scrollX behaviour is different from scrollY
|
|
7
8
|
*
|
|
@@ -10,20 +11,10 @@ export type { TableRowSelection as VirtualTableRowSelection } from "../Table";
|
|
|
10
11
|
* We cannot use overflow: hidden since it will cause the last few rows to be hidden
|
|
11
12
|
*
|
|
12
13
|
* scrollX:
|
|
13
|
-
* It is the total
|
|
14
|
+
* It is the total of column width of the table
|
|
14
15
|
* If scrollX > all columns width, all columns will be expanded and lose the width property
|
|
15
16
|
* In order to calculate the scrollX, we need to sum up the width of all columns
|
|
16
17
|
*
|
|
17
|
-
*
|
|
18
|
-
* If want to use column without width, must refactor to either pass column width or pass scrollX props
|
|
18
|
+
* If scrollX is not provided, all column must provide width, ref: ./type.ts
|
|
19
19
|
*/
|
|
20
|
-
export interface VirtualTableColumn<RowType extends object> extends Omit<TableColumn<RowType>, "width"> {
|
|
21
|
-
width: number;
|
|
22
|
-
}
|
|
23
|
-
export type VirtualTableColumns<RowType extends object> = VirtualTableColumn<RowType>[];
|
|
24
|
-
export interface VirtualTableProps<RowType extends object> extends Omit<TableProps<RowType, undefined>, "columns" | "scrollX" | "scrollY"> {
|
|
25
|
-
columns: VirtualTableColumn<RowType>[];
|
|
26
|
-
width?: number | string;
|
|
27
|
-
scrollY?: number;
|
|
28
|
-
}
|
|
29
20
|
export declare const VirtualTable: <RowType extends object>(props: VirtualTableProps<RowType>) => React.JSX.Element;
|
|
@@ -4,16 +4,42 @@ import { ReactUtil } from "../../util/ReactUtil";
|
|
|
4
4
|
import { Table } from "../Table";
|
|
5
5
|
import "./index.less";
|
|
6
6
|
import { useResizeObserver } from "../../hooks/useResizeObserver";
|
|
7
|
+
/**
|
|
8
|
+
* Antd Table's scrollX behaviour is different from scrollY
|
|
9
|
+
*
|
|
10
|
+
* scrollY:
|
|
11
|
+
* the height of the scrollable container (ignoring the container height) which will cause overflow
|
|
12
|
+
* We cannot use overflow: hidden since it will cause the last few rows to be hidden
|
|
13
|
+
*
|
|
14
|
+
* scrollX:
|
|
15
|
+
* It is the total of column width of the table
|
|
16
|
+
* If scrollX > all columns width, all columns will be expanded and lose the width property
|
|
17
|
+
* In order to calculate the scrollX, we need to sum up the width of all columns
|
|
18
|
+
*
|
|
19
|
+
* If scrollX is not provided, all column must provide width, ref: ./type.ts
|
|
20
|
+
*/
|
|
7
21
|
export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
|
|
8
|
-
const { dataSource,
|
|
22
|
+
const { dataSource, className, width = "100%", scrollY: propScrollY, emptyPlaceholder, ...restProps } = props;
|
|
9
23
|
const [scrollY, setScrollY] = React.useState(propScrollY ?? 300);
|
|
10
24
|
const [headerHeight, setHeaderHeight] = React.useState(0);
|
|
11
|
-
const containerRef =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
25
|
+
const containerRef = React.useRef(null);
|
|
26
|
+
React.useEffect(() => {
|
|
27
|
+
const parent = containerRef.current?.parentElement;
|
|
28
|
+
if (!parent)
|
|
29
|
+
return;
|
|
30
|
+
const observer = new ResizeObserver((entries) => {
|
|
31
|
+
const parentHeight = entries[0].contentRect.height;
|
|
32
|
+
let newScrollY = Math.max(0, parentHeight - headerHeight);
|
|
33
|
+
if (propScrollY)
|
|
34
|
+
newScrollY = Math.min(newScrollY, propScrollY);
|
|
35
|
+
setScrollY(newScrollY);
|
|
36
|
+
});
|
|
37
|
+
observer.observe(parent);
|
|
38
|
+
return () => {
|
|
39
|
+
observer.unobserve(parent);
|
|
40
|
+
observer.disconnect();
|
|
41
|
+
};
|
|
42
|
+
}, [propScrollY, headerHeight]);
|
|
17
43
|
// Need to listen to header change onMount so we can calculate the scrollY correctly
|
|
18
44
|
const headerRef = useResizeObserver(({ height }) => {
|
|
19
45
|
setHeaderHeight(height);
|
|
@@ -28,17 +54,20 @@ export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
|
|
|
28
54
|
};
|
|
29
55
|
}, [width]);
|
|
30
56
|
const scrollX = React.useMemo(() => {
|
|
31
|
-
|
|
32
|
-
|
|
57
|
+
if ("scrollX" in restProps)
|
|
58
|
+
return restProps.scrollX;
|
|
59
|
+
restProps.columns.reduce((acc, column) => acc + (column.hidden ? 0 : column.width), 0);
|
|
60
|
+
}, [restProps]);
|
|
61
|
+
const emptyElement = React.createElement("div", { style: { height: scrollY } }, emptyPlaceholder || "暂无数据");
|
|
33
62
|
return (React.createElement("div", { ref: containerRef, className: classNames("g-virtual-table", className), style: containerStyle },
|
|
34
63
|
React.createElement(Table
|
|
35
64
|
// @ts-ignore: using our Table component with virtual props from antd
|
|
36
65
|
, {
|
|
37
66
|
// @ts-ignore: using our Table component with virtual props from antd
|
|
38
|
-
virtual: true, dataSource: dataSource,
|
|
67
|
+
virtual: true, dataSource: dataSource,
|
|
39
68
|
/**
|
|
40
69
|
* Antd <Table virtual /> must use number scrollX or number scrollY to work
|
|
41
70
|
*/
|
|
42
|
-
scrollY: scrollY, scrollX: scrollX, emptyPlaceholder:
|
|
71
|
+
scrollY: scrollY, scrollX: scrollX, emptyPlaceholder: emptyElement, ...restProps })));
|
|
43
72
|
});
|
|
44
73
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { TableColumn, TableProps } from "../Table";
|
|
2
|
+
interface TableColumnWithWidth<RowType extends object> extends Omit<TableColumn<RowType>, "width"> {
|
|
3
|
+
width: number;
|
|
4
|
+
}
|
|
5
|
+
export type VirtualTableColumns<RowType extends object, UseScrollX = false> = UseScrollX extends true ? TableColumn<RowType>[] : TableColumnWithWidth<RowType>[];
|
|
6
|
+
interface VirtualTableBaseProps<RowType extends object> extends Omit<TableProps<RowType, undefined>, "columns" | "scrollX" | "scrollY"> {
|
|
7
|
+
width?: number | string;
|
|
8
|
+
scrollY?: number;
|
|
9
|
+
}
|
|
10
|
+
interface VirtualTablePropsWithScrollX<RowType extends object> extends VirtualTableBaseProps<RowType> {
|
|
11
|
+
columns: VirtualTableColumns<RowType, true>;
|
|
12
|
+
scrollX: number;
|
|
13
|
+
}
|
|
14
|
+
interface VirtualTablePropsWithColumnWidth<RowType extends object> extends VirtualTableBaseProps<RowType> {
|
|
15
|
+
columns: VirtualTableColumns<RowType, false>;
|
|
16
|
+
}
|
|
17
|
+
export type VirtualTableProps<RowType extends object> = VirtualTablePropsWithScrollX<RowType> | VirtualTablePropsWithColumnWidth<RowType>;
|
|
18
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/type.ts"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pinnacle0/web-ui",
|
|
3
|
-
"version": "0.7.0-beta.
|
|
3
|
+
"version": "0.7.0-beta.6",
|
|
4
4
|
"author": "Pinnacle",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": [
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"@ant-design/cssinjs": "2.0.1",
|
|
21
21
|
"@ant-design/icons": "6.1.0",
|
|
22
22
|
"@tanstack/react-virtual": "3.13.13",
|
|
23
|
-
"antd": "6.1.
|
|
23
|
+
"antd": "6.1.3",
|
|
24
24
|
"classnames": "2.5.1",
|
|
25
25
|
"dayjs": "1.11.19",
|
|
26
26
|
"rc-picker": "4.11.3"
|