@pinnacle0/web-ui 0.7.0-beta.4 → 0.7.0-beta.5
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,7 +1,8 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type { TableColumn, TableProps } from "../Table";
|
|
3
2
|
import "./index.less";
|
|
3
|
+
import type { VirtualTableProps } from "./type";
|
|
4
4
|
export type { TableRowSelection as VirtualTableRowSelection } 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,8 +4,22 @@ 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
25
|
const containerRef = useResizeObserver(({ height }) => {
|
|
@@ -28,14 +42,16 @@ export const VirtualTable = ReactUtil.memo("VirtualTable", function (props) {
|
|
|
28
42
|
};
|
|
29
43
|
}, [width]);
|
|
30
44
|
const scrollX = React.useMemo(() => {
|
|
31
|
-
|
|
32
|
-
|
|
45
|
+
if ("scrollX" in restProps)
|
|
46
|
+
return restProps.scrollX;
|
|
47
|
+
restProps.columns.reduce((acc, column) => acc + (column.hidden ? 0 : column.width), 0);
|
|
48
|
+
}, [restProps]);
|
|
33
49
|
return (React.createElement("div", { ref: containerRef, className: classNames("g-virtual-table", className), style: containerStyle },
|
|
34
50
|
React.createElement(Table
|
|
35
51
|
// @ts-ignore: using our Table component with virtual props from antd
|
|
36
52
|
, {
|
|
37
53
|
// @ts-ignore: using our Table component with virtual props from antd
|
|
38
|
-
virtual: true, dataSource: dataSource,
|
|
54
|
+
virtual: true, dataSource: dataSource,
|
|
39
55
|
/**
|
|
40
56
|
* Antd <Table virtual /> must use number scrollX or number scrollY to work
|
|
41
57
|
*/
|
|
@@ -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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAC,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAC,KAAK,EAAC,MAAM,UAAU,CAAC;AAC/B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAC,iBAAiB,EAAC,MAAM,+BAA+B,CAAC;AAMhE;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,UAAkC,KAAiC;IAC1H,MAAM,EAAC,UAAU,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,GAAG,SAAS,EAAC,GAAG,KAAK,CAAC;IAC5G,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,IAAI,GAAG,CAAC,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAChD,IAAI,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC,CAAC;QACpD,IAAI,WAAW;YAAE,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;QAChE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,oFAAoF;IACpF,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,EAAC,MAAM,EAAC,EAAE,EAAE;QAC7C,eAAe,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,SAAS,CAAC,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,IAAI,CAAC;IACzF,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,OAAO;YACH,KAAK;YACL,MAAM,EAAE,MAAM;SACjB,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,SAAS,IAAI,SAAS;YAAE,OAAO,SAAS,CAAC,OAAO,CAAC;QACrD,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACH,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,cAAc;QAC9F,oBAAC,KAAK;QACF,qEAAqE;;YAArE,qEAAqE;YACrE,OAAO,QACP,UAAU,EAAE,UAAU;YACtB;;eAEG;YACH,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,IAAI,MAAM,KACxC,SAAS,GACf,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { TableColumn, TableProps } from "../Table";
|
|
2
|
+
export 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
|
+
export interface VirtualTablePropsWithScrollX<RowType extends object> extends VirtualTableBaseProps<RowType> {
|
|
11
|
+
columns: VirtualTableColumns<RowType, true>;
|
|
12
|
+
scrollX: number;
|
|
13
|
+
}
|
|
14
|
+
export 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.5",
|
|
4
4
|
"author": "Pinnacle",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"sideEffects": [
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"react": "19.2.1",
|
|
45
45
|
"react-dom": "19.2.1",
|
|
46
46
|
"react-router-dom": "5.3.0",
|
|
47
|
-
"@pinnacle0/
|
|
48
|
-
"@pinnacle0/
|
|
47
|
+
"@pinnacle0/webpack-util": "0.8.22",
|
|
48
|
+
"@pinnacle0/devtool-util": "1.3.9"
|
|
49
49
|
},
|
|
50
50
|
"exports": {
|
|
51
51
|
"./core/*": {
|