@pinnacle0/web-ui 0.3.5 → 0.3.8
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/VirtualTable/index.d.ts +3 -1
- package/core/VirtualTable/index.js +57 -35
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/index.less +14 -13
- package/core/VirtualTable/useScrollToEdge.js +11 -8
- package/core/VirtualTable/useScrollToEdge.js.map +1 -1
- package/package.json +1 -1
|
@@ -40,10 +40,12 @@ export interface VirtualTableProps<RowType extends object> {
|
|
|
40
40
|
columns: VirtualTableColumn<RowType>[];
|
|
41
41
|
scrollY: number;
|
|
42
42
|
rowHeight: number | ((rowIndex: number) => number);
|
|
43
|
+
onRowClick?: (record: RowType, rowIndex: number) => number;
|
|
43
44
|
className?: string;
|
|
44
45
|
rowClassName?: string;
|
|
45
46
|
/**
|
|
46
47
|
* if scrollX is not provided, width: 100% will be used
|
|
48
|
+
* if width: 100% is used, please wrap the table with a container
|
|
47
49
|
*/
|
|
48
50
|
scrollX?: number;
|
|
49
51
|
loading?: boolean;
|
|
@@ -54,6 +56,6 @@ export interface VirtualTableProps<RowType extends object> {
|
|
|
54
56
|
*/
|
|
55
57
|
rowKey?: StringKey<RowType> | "index";
|
|
56
58
|
}
|
|
57
|
-
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, scrollY, dataSource, className, rowClassName, loading, emptyPlaceholder, rowSelection, scrollX, rowKey, }: VirtualTableProps<RowType>) => JSX.Element) & {
|
|
59
|
+
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, scrollY, dataSource, className, rowClassName, loading, emptyPlaceholder, rowSelection, onRowClick, scrollX, rowKey, }: VirtualTableProps<RowType>) => JSX.Element) & {
|
|
58
60
|
displayName: string;
|
|
59
61
|
};
|
|
@@ -30,21 +30,28 @@ import { Spin } from "../Spin";
|
|
|
30
30
|
import { useRowSelection } from "./useRowSelection";
|
|
31
31
|
import { useScrollToEdge } from "./useScrollToEdge";
|
|
32
32
|
import "./index.less";
|
|
33
|
-
var headerHeight = 50;
|
|
34
|
-
// TODO/David: handle for different size of scrollbar
|
|
35
|
-
var scrollBarSize = 15;
|
|
36
33
|
export var VirtualTable = Object.assign(function (_a) {
|
|
37
|
-
var columns = _a.columns, rowHeight = _a.rowHeight, scrollY = _a.scrollY, dataSource = _a.dataSource, className = _a.className, rowClassName = _a.rowClassName, loading = _a.loading, emptyPlaceholder = _a.emptyPlaceholder, rowSelection = _a.rowSelection, scrollX = _a.scrollX, _b = _a.rowKey, rowKey = _b === void 0 ? "index" : _b;
|
|
34
|
+
var columns = _a.columns, rowHeight = _a.rowHeight, scrollY = _a.scrollY, dataSource = _a.dataSource, className = _a.className, rowClassName = _a.rowClassName, loading = _a.loading, emptyPlaceholder = _a.emptyPlaceholder, rowSelection = _a.rowSelection, onRowClick = _a.onRowClick, scrollX = _a.scrollX, _b = _a.rowKey, rowKey = _b === void 0 ? "index" : _b;
|
|
38
35
|
var size = dataSource.length;
|
|
39
36
|
var scrollContentRef = React.useRef(null);
|
|
37
|
+
var headersRef = React.useRef(null);
|
|
40
38
|
var estimateSize = React.useCallback(function (rowIndex) { return (typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight); }, [rowHeight]);
|
|
39
|
+
var _c = __read(React.useState([]), 2), colWidths = _c[0], setColWidths = _c[1];
|
|
40
|
+
var _d = __read(React.useState(0), 2), scrollBarSize = _d[0], setScrollBarSize = _d[1];
|
|
41
|
+
var _e = useVirtual({ size: size, parentRef: scrollContentRef, estimateSize: estimateSize }), virtualItems = _e.virtualItems, totalSize = _e.totalSize;
|
|
42
|
+
var _f = useScrollToEdge(scrollContentRef), isScrollToEdge = _f.onScroll, isScrollToLeft = _f.isScrollToLeft, isScrollToRight = _f.isScrollToRight;
|
|
41
43
|
var transformedColumns = useRowSelection({ columns: columns, dataSource: dataSource, rowSelection: rowSelection, rowKey: rowKey });
|
|
42
|
-
var _c = useVirtual({ size: size, parentRef: scrollContentRef, estimateSize: estimateSize }), virtualItems = _c.virtualItems, totalSize = _c.totalSize;
|
|
43
|
-
var _d = useScrollToEdge(scrollContentRef), onScroll = _d.onScroll, isScrollToLeft = _d.isScrollToLeft, isScrollToRight = _d.isScrollToRight;
|
|
44
|
-
var _e = __read(React.useState([]), 2), colWidths = _e[0], setColWidths = _e[1];
|
|
45
|
-
var isColWidthsReady = colWidths.length > 0;
|
|
46
|
-
var headersRef = React.useRef(null);
|
|
47
44
|
var isScrollable = totalSize > scrollY;
|
|
45
|
+
var headerHeight = 50;
|
|
46
|
+
var tableHeight = scrollY + headerHeight;
|
|
47
|
+
var tableBodyHeight = scrollY;
|
|
48
|
+
var emptyElement = emptyPlaceholder || "暂无数据";
|
|
49
|
+
var getScrollBarSize = function () {
|
|
50
|
+
if (scrollContentRef.current) {
|
|
51
|
+
var _a = scrollContentRef.current, clientWidth = _a.clientWidth, offsetWidth = _a.offsetWidth;
|
|
52
|
+
setScrollBarSize(offsetWidth - clientWidth);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
48
55
|
var getColWidths = function () {
|
|
49
56
|
if (headersRef.current) {
|
|
50
57
|
var widths_1 = [];
|
|
@@ -61,6 +68,7 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
61
68
|
var left = [];
|
|
62
69
|
var right = [];
|
|
63
70
|
var leftFixedCols = ArrayUtil.compactMap(transformedColumns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: colWidths[columnIndex] } : null); });
|
|
71
|
+
// the right sticky value stack in reverse direction
|
|
64
72
|
var rightFixedCols = ArrayUtil.compactMap(transformedColumns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: colWidths[columnIndex] } : null); }).reverse();
|
|
65
73
|
leftFixedCols.forEach(function (column, idx) {
|
|
66
74
|
var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
@@ -74,6 +82,7 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
74
82
|
});
|
|
75
83
|
return result;
|
|
76
84
|
}, [colWidths, transformedColumns]);
|
|
85
|
+
// handle the edge position & shadow of the fixed columns
|
|
77
86
|
var getFixedColClassNames = function (fixed, columnIndex) {
|
|
78
87
|
var isFixedClassName = fixed ? "fixed" : "";
|
|
79
88
|
var isLastFixedClassName = fixed && stickyPosition[columnIndex].isLast ? "last" : "";
|
|
@@ -81,14 +90,26 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
81
90
|
var hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
|
|
82
91
|
return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
|
|
83
92
|
};
|
|
84
|
-
|
|
93
|
+
var onScroll = React.useCallback(function () {
|
|
94
|
+
requestAnimationFrame(function () {
|
|
95
|
+
// only trigger in horizontal direction
|
|
96
|
+
if (scrollContentRef.current && headersRef.current && scrollContentRef.current.scrollLeft !== headersRef.current.scrollLeft) {
|
|
97
|
+
isScrollToEdge();
|
|
98
|
+
// sync scrolling in header
|
|
99
|
+
headersRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
}, [isScrollToEdge]);
|
|
103
|
+
React.useEffect(function () {
|
|
104
|
+
isScrollable && !scrollBarSize && getScrollBarSize();
|
|
105
|
+
}, [isScrollable, scrollBarSize]);
|
|
85
106
|
React.useEffect(function () {
|
|
86
107
|
getColWidths();
|
|
87
|
-
}, [
|
|
88
|
-
return (React.createElement("div", { className: ["g-virtual-table", className].join(" "), style: { width: scrollX || "100%", height:
|
|
89
|
-
React.createElement("div", { className: "
|
|
90
|
-
|
|
91
|
-
|
|
108
|
+
}, []);
|
|
109
|
+
return (React.createElement("div", { className: ["g-virtual-table", className].join(" "), style: { width: scrollX || "100%", height: tableHeight } },
|
|
110
|
+
loading && (React.createElement("div", { className: "mask" },
|
|
111
|
+
React.createElement(Spin, { spinning: loading }))),
|
|
112
|
+
React.createElement("div", { className: "scroll-content", ref: scrollContentRef, style: { height: tableBodyHeight, top: headerHeight }, onScroll: onScroll },
|
|
92
113
|
React.createElement("div", { className: "table", style: { height: totalSize } },
|
|
93
114
|
React.createElement("div", { className: "table-headers", ref: headersRef, style: { height: headerHeight, width: scrollX || "100%" } }, transformedColumns.map(function (_a, columnIndex) {
|
|
94
115
|
var title = _a.title, width = _a.width, align = _a.align, fixed = _a.fixed, display = _a.display;
|
|
@@ -101,25 +122,26 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
101
122
|
};
|
|
102
123
|
return (React.createElement("div", { className: __spreadArray(["table-header"], __read(getFixedColClassNames(fixed, columnIndex)), false).join(" "), key: columnIndex, style: headerStyle }, title));
|
|
103
124
|
})),
|
|
104
|
-
React.createElement("div", { className: "table-body"
|
|
105
|
-
?
|
|
106
|
-
:
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
})))
|
|
125
|
+
React.createElement("div", { className: "table-body" }, dataSource.length === 0
|
|
126
|
+
? emptyElement
|
|
127
|
+
: virtualItems.map(function (virtualItem) {
|
|
128
|
+
var rowIndex = virtualItem.index;
|
|
129
|
+
var currentData = dataSource[rowIndex];
|
|
130
|
+
return (React.createElement("div", { key: rowIndex, className: ["table-row", rowClassName, rowIndex % 2 ? "odd" : "even"].join(" "), style: { height: virtualItem.size, transform: "translateY(".concat(virtualItem.start, "px)") }, onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(currentData, rowIndex); } }, transformedColumns.map(function (column, columnIndex) {
|
|
131
|
+
var colSpan = column.colSpan ? column.colSpan(currentData, rowIndex, columnIndex) : 1;
|
|
132
|
+
// handle colspan > 1
|
|
133
|
+
var cellWidth = colSpan > 1 ? colWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : colWidths[columnIndex];
|
|
134
|
+
var renderData = column.display !== "hidden" && column.renderData(currentData, rowIndex);
|
|
135
|
+
// minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
|
|
136
|
+
var isLastColumn = columnIndex === transformedColumns.length - 1;
|
|
137
|
+
return (renderData && (React.createElement("div", { className: __spreadArray(["table-cell"], __read(getFixedColClassNames(column.fixed, columnIndex)), false).join(" "), key: columnIndex, style: {
|
|
138
|
+
height: "100%",
|
|
139
|
+
width: cellWidth - (isLastColumn ? scrollBarSize : 0),
|
|
140
|
+
textAlign: column.align,
|
|
141
|
+
left: column.fixed === "left" ? stickyPosition[columnIndex].value : undefined,
|
|
142
|
+
right: column.fixed === "right" ? stickyPosition[columnIndex].value - (isLastColumn ? 0 : scrollBarSize) : undefined,
|
|
143
|
+
} }, renderData)));
|
|
144
|
+
})));
|
|
145
|
+
}))))));
|
|
124
146
|
}, { displayName: "VirtualTable" });
|
|
125
147
|
//# 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,eAAe,CAAC;AACzC,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -26,23 +26,23 @@
|
|
|
26
26
|
position: relative;
|
|
27
27
|
transform: translateX(0);
|
|
28
28
|
|
|
29
|
+
.mask {
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 0;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 100%;
|
|
35
|
+
display: flex;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
align-items: center;
|
|
38
|
+
background: rgb(255 255 255 / 70%);
|
|
39
|
+
z-index: 15;
|
|
40
|
+
}
|
|
41
|
+
|
|
29
42
|
.scroll-content {
|
|
30
43
|
position: relative;
|
|
31
44
|
overflow: auto;
|
|
32
45
|
|
|
33
|
-
.mask {
|
|
34
|
-
position: absolute;
|
|
35
|
-
top: 0;
|
|
36
|
-
left: 0;
|
|
37
|
-
width: 100%;
|
|
38
|
-
height: 100%;
|
|
39
|
-
display: flex;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
align-items: center;
|
|
42
|
-
background: rgb(255 255 255 / 70%);
|
|
43
|
-
z-index: 15;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
46
|
.table {
|
|
47
47
|
min-height: 100%;
|
|
48
48
|
|
|
@@ -105,6 +105,7 @@
|
|
|
105
105
|
justify-content: center;
|
|
106
106
|
align-items: center;
|
|
107
107
|
position: relative;
|
|
108
|
+
height: 100%;
|
|
108
109
|
|
|
109
110
|
.table-row {
|
|
110
111
|
display: flex;
|
|
@@ -21,14 +21,17 @@ export var useScrollToEdge = function (scrollContentRef) {
|
|
|
21
21
|
var _c = __read(React.useState(false), 2), isScrollToTop = _c[0], setIsScrollToTop = _c[1];
|
|
22
22
|
var _d = __read(React.useState(false), 2), isScrollToBottom = _d[0], setIsScrollToBottom = _d[1];
|
|
23
23
|
var isScrollToEdge = React.useCallback(function () {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
if (scrollContentRef.current) {
|
|
25
|
+
var _a = scrollContentRef.current, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
|
|
26
|
+
var isScrollLeft = scrollLeft <= 1;
|
|
27
|
+
var isScrollRight = scrollLeft >= scrollWidth - clientWidth;
|
|
28
|
+
var isScrollTop = scrollTop <= 1;
|
|
29
|
+
var isScrollBottom = scrollTop >= scrollHeight - clientHeight;
|
|
30
|
+
setIsScrollToLeft(isScrollLeft);
|
|
31
|
+
setIsScrollToRight(isScrollRight);
|
|
32
|
+
setIsScrollToTop(isScrollTop);
|
|
33
|
+
setIsScrollToBottom(isScrollBottom);
|
|
34
|
+
}
|
|
32
35
|
}, [scrollContentRef]);
|
|
33
36
|
// initialize
|
|
34
37
|
useEffect(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollToEdge.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useScrollToEdge.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,gBAA8C;IACpE,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAC;IAC5D,IAAA,KAAA,OAAwC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5D,eAAe,QAAA,EAAE,kBAAkB,QAAyB,CAAC;IAC9D,IAAA,KAAA,OAAoC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAxD,aAAa,QAAA,EAAE,gBAAgB,QAAyB,CAAC;IAC1D,IAAA,KAAA,OAA0C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA9D,gBAAgB,QAAA,EAAE,mBAAmB,QAAyB,CAAC;IAEtE,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,
|
|
1
|
+
{"version":3,"file":"useScrollToEdge.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useScrollToEdge.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,gBAA8C;IACpE,IAAA,KAAA,OAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAC;IAC5D,IAAA,KAAA,OAAwC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA5D,eAAe,QAAA,EAAE,kBAAkB,QAAyB,CAAC;IAC9D,IAAA,KAAA,OAAoC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAAxD,aAAa,QAAA,EAAE,gBAAgB,QAAyB,CAAC;IAC1D,IAAA,KAAA,OAA0C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA9D,gBAAgB,QAAA,EAAE,mBAAmB,QAAyB,CAAC;IAEtE,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;QACrC,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAAgF,gBAAgB,CAAC,OAAO,EAAvG,UAAU,gBAAA,EAAE,WAAW,iBAAA,EAAE,WAAW,iBAAA,EAAE,SAAS,eAAA,EAAE,YAAY,kBAAA,EAAE,YAAY,kBAA4B,CAAC;YAC/G,IAAM,YAAY,GAAG,UAAU,IAAI,CAAC,CAAC;YACrC,IAAM,aAAa,GAAG,UAAU,IAAI,WAAW,GAAG,WAAW,CAAC;YAE9D,IAAM,WAAW,GAAG,SAAS,IAAI,CAAC,CAAC;YACnC,IAAM,cAAc,GAAG,SAAS,IAAI,YAAY,GAAG,YAAY,CAAC;YAChE,iBAAiB,CAAC,YAAY,CAAC,CAAC;YAChC,kBAAkB,CAAC,aAAa,CAAC,CAAC;YAClC,gBAAgB,CAAC,WAAW,CAAC,CAAC;YAC9B,mBAAmB,CAAC,cAAc,CAAC,CAAC;SACvC;IACL,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,aAAa;IACb,SAAS,CAAC;QACN,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO;QACH,QAAQ,EAAE,cAAc;QACxB,cAAc,gBAAA;QACd,eAAe,iBAAA;QACf,aAAa,eAAA;QACb,gBAAgB,kBAAA;KACnB,CAAC;AACN,CAAC,CAAC"}
|