@pinnacle0/web-ui 0.3.14 → 0.3.17
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.js +32 -10
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/useColumnWidths.d.ts +10 -1
- package/core/VirtualTable/useColumnWidths.js +9 -3
- package/core/VirtualTable/useColumnWidths.js.map +1 -1
- package/core/VirtualTable/useDebounce.d.ts +1 -0
- package/core/VirtualTable/useDebounce.js +45 -0
- package/core/VirtualTable/useDebounce.js.map +1 -0
- package/core/VirtualTable/useLayout.d.ts +14 -0
- package/core/VirtualTable/useLayout.js +37 -0
- package/core/VirtualTable/useLayout.js.map +1 -0
- package/core/VirtualTable/useScrollBarSize.d.ts +4 -1
- package/core/VirtualTable/useScrollBarSize.js +4 -1
- package/core/VirtualTable/useScrollBarSize.js.map +1 -1
- package/core/VirtualTable/useStickyPosition.d.ts +1 -1
- package/core/VirtualTable/useStickyPosition.js +4 -4
- package/core/VirtualTable/useStickyPosition.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,14 +1,37 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
+
if (ar || !(i in from)) {
|
|
20
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
+
ar[i] = from[i];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
+
};
|
|
1
26
|
import React from "react";
|
|
2
27
|
import { useVirtual } from "react-virtual";
|
|
3
28
|
import { Spin } from "../Spin";
|
|
4
29
|
import { useRowSelection } from "./useRowSelection";
|
|
5
30
|
import { useScrollToEdge } from "./useScrollToEdge";
|
|
6
|
-
import {
|
|
7
|
-
import { useColumnWidths } from "./useColumnWidths";
|
|
8
|
-
import { useStickyPosition } from "./useStickyPosition";
|
|
9
|
-
import "./index.less";
|
|
31
|
+
import { useLayout } from "./useLayout";
|
|
10
32
|
import { TableRow } from "./TableRow";
|
|
11
33
|
import { TableHeader } from "./TableHeader";
|
|
34
|
+
import "./index.less";
|
|
12
35
|
export var VirtualTable = Object.assign(function (_a) {
|
|
13
36
|
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, _c = _a.headerHeight, headerHeight = _c === void 0 ? 50 : _c;
|
|
14
37
|
var size = dataSource.length;
|
|
@@ -22,14 +45,13 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
22
45
|
var tableHeight = scrollY + headerHeight;
|
|
23
46
|
var tableBodyHeight = scrollY;
|
|
24
47
|
var emptyElement = emptyPlaceholder || "暂无数据";
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var stickyPosition = useStickyPosition(transformedColumns, columnWidths);
|
|
28
|
-
var lastShownColumnIndex = React.useMemo(function () { return columns.length - 1 - columns.reverse().findIndex(function (_) { return _.display !== "hidden"; }); }, [columns]);
|
|
48
|
+
var _f = useLayout({ headersRef: headersRef, scrollContentRef: scrollContentRef, isScrollable: isScrollable, columns: transformedColumns }), scrollBarSize = _f.scrollBarSize, stickyPosition = _f.stickyPosition, columnWidths = _f.columnWidths;
|
|
49
|
+
var lastShownColumnIndex = React.useMemo(function () { return transformedColumns.length - 1 - __spreadArray([], __read(transformedColumns), false).reverse().findIndex(function (_) { return _.display !== "hidden"; }); }, [transformedColumns]);
|
|
29
50
|
// handle the edge position & shadow of the fixed columns
|
|
30
51
|
var getFixedColumnClassNames = React.useCallback(function (fixed, columnIndex) {
|
|
52
|
+
var _a;
|
|
31
53
|
var isFixedClassName = fixed ? "fixed" : "";
|
|
32
|
-
var isLastFixedClassName = fixed && stickyPosition[columnIndex].isLast ? "last" : "";
|
|
54
|
+
var isLastFixedClassName = fixed && ((_a = stickyPosition[columnIndex]) === null || _a === void 0 ? void 0 : _a.isLast) ? "last" : "";
|
|
33
55
|
var fixedPositionClassName = fixed;
|
|
34
56
|
var hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
|
|
35
57
|
return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
|
|
@@ -52,6 +74,6 @@ export var VirtualTable = Object.assign(function (_a) {
|
|
|
52
74
|
React.createElement(TableHeader, { headersRef: headersRef, headerHeight: headerHeight, transformedColumns: transformedColumns, stickyPosition: stickyPosition, getFixedColumnClassNames: getFixedColumnClassNames }),
|
|
53
75
|
React.createElement("div", { className: "table-body" }, dataSource.length === 0
|
|
54
76
|
? emptyElement
|
|
55
|
-
: virtualItems.map(function (virtualItem,
|
|
77
|
+
: virtualItems.map(function (virtualItem, rowIndex) { return (React.createElement(TableRow, { key: rowIndex, onRowClick: onRowClick, virtualItem: virtualItem, dataSource: dataSource, transformedColumns: transformedColumns, columnWidths: columnWidths, scrollBarSize: scrollBarSize, stickyPosition: stickyPosition, lastShownColumnIndex: lastShownColumnIndex, rowClassName: rowClassName, getFixedColumnClassNames: getFixedColumnClassNames })); }))))));
|
|
56
78
|
}, { displayName: "VirtualTable" });
|
|
57
79
|
//# 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,IAAI,EAAC,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
5
|
+
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
6
|
+
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
7
|
+
*/
|
|
8
|
+
export declare const useColumnWidths: (headersRef: React.RefObject<HTMLDivElement>) => {
|
|
9
|
+
columnWidths: number[];
|
|
10
|
+
calculateColWidths: () => void;
|
|
11
|
+
};
|
|
@@ -15,9 +15,15 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
15
15
|
return ar;
|
|
16
16
|
};
|
|
17
17
|
import React from "react";
|
|
18
|
+
/**
|
|
19
|
+
*
|
|
20
|
+
* If the Virtual Table is render inside a container with open animation e.g. <Modal />,
|
|
21
|
+
* the colWidths may be calculated during the transition and get the wrong width with useState & useEffect
|
|
22
|
+
* useLayoutEffect will be trigged in the transition process and get the final correct column widths
|
|
23
|
+
*/
|
|
18
24
|
export var useColumnWidths = function (headersRef) {
|
|
19
25
|
var _a = __read(React.useState([]), 2), colWidths = _a[0], setColWidths = _a[1];
|
|
20
|
-
React.
|
|
26
|
+
var calculateColWidths = React.useCallback(function () {
|
|
21
27
|
if (!headersRef.current)
|
|
22
28
|
return;
|
|
23
29
|
var headers = headersRef.current.querySelectorAll(".table-header");
|
|
@@ -26,7 +32,7 @@ export var useColumnWidths = function (headersRef) {
|
|
|
26
32
|
return width;
|
|
27
33
|
});
|
|
28
34
|
setColWidths(widths);
|
|
29
|
-
}, [headersRef
|
|
30
|
-
return colWidths;
|
|
35
|
+
}, [headersRef]);
|
|
36
|
+
return { columnWidths: colWidths, calculateColWidths: calculateColWidths };
|
|
31
37
|
};
|
|
32
38
|
//# sourceMappingURL=useColumnWidths.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnWidths.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useColumnWidths.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,UAA2C;IACjE,IAAA,KAAA,OAA4B,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,IAAA,EAAvD,SAAS,QAAA,EAAE,YAAY,QAAgC,CAAC;IAE/D,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"useColumnWidths.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useColumnWidths.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AAEH,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,UAA2C;IACjE,IAAA,KAAA,OAA4B,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,IAAA,EAAvD,SAAS,QAAA,EAAE,YAAY,QAAgC,CAAC;IAE/D,IAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,IAAI,CAAC,UAAU,CAAC,OAAO;YAAE,OAAO;QAChC,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QACrE,IAAM,MAAM,GAAa,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAA,MAAM;YAC5D,IAAA,KAAK,GAAI,MAAM,CAAC,qBAAqB,EAAE,MAAlC,CAAmC;YAC/C,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,YAAY,CAAC,MAAM,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,EAAC,YAAY,EAAE,SAAS,EAAE,kBAAkB,oBAAA,EAAC,CAAC;AACzD,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useDebounce: <Param extends any[]>(callback: (...args: Param) => void) => (...args: Param) => void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __read = (this && this.__read) || function (o, n) {
|
|
2
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
|
+
if (!m) return o;
|
|
4
|
+
var i = m.call(o), r, ar = [], e;
|
|
5
|
+
try {
|
|
6
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
7
|
+
}
|
|
8
|
+
catch (error) { e = { error: error }; }
|
|
9
|
+
finally {
|
|
10
|
+
try {
|
|
11
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
12
|
+
}
|
|
13
|
+
finally { if (e) throw e.error; }
|
|
14
|
+
}
|
|
15
|
+
return ar;
|
|
16
|
+
};
|
|
17
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
18
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
19
|
+
if (ar || !(i in from)) {
|
|
20
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
21
|
+
ar[i] = from[i];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
25
|
+
};
|
|
26
|
+
import React from "react";
|
|
27
|
+
export var useDebounce = function (callback) {
|
|
28
|
+
var idRef = React.useRef();
|
|
29
|
+
var debounce = function () {
|
|
30
|
+
return function () {
|
|
31
|
+
var args = [];
|
|
32
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
33
|
+
args[_i] = arguments[_i];
|
|
34
|
+
}
|
|
35
|
+
clearTimeout(idRef.current);
|
|
36
|
+
idRef.current = window.setTimeout(function () {
|
|
37
|
+
callback.apply(void 0, __spreadArray([], __read(args), false));
|
|
38
|
+
}, 100);
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
React.useEffect(function () { return function () { return clearTimeout(idRef.current); }; }, []);
|
|
42
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps -- callback is not allow to changed
|
|
43
|
+
return React.useMemo(function () { return debounce(); }, []);
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=useDebounce.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebounce.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useDebounce.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,WAAW,GAAG,UAA+B,QAAkC;IACxF,IAAM,KAAK,GAAG,KAAK,CAAC,MAAM,EAAU,CAAC;IAErC,IAAM,QAAQ,GAAG;QACb,OAAO;YAAU,cAAc;iBAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;gBAAd,yBAAc;;YAC3B,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC5B,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC;gBAC9B,QAAQ,wCAAI,IAAI,WAAE;YACtB,CAAC,EAAE,GAAG,CAAC,CAAC;QACZ,CAAC,CAAC;IACN,CAAC,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC,cAAM,OAAA,cAAM,OAAA,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,EAA3B,CAA2B,EAAjC,CAAiC,EAAE,EAAE,CAAC,CAAC;IAC7D,2FAA2F;IAC3F,OAAO,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,QAAQ,EAAE,EAAV,CAAU,EAAE,EAAE,CAAC,CAAC;AAC/C,CAAC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { VirtualTableColumn } from "./type";
|
|
3
|
+
interface Props<RowType extends object> {
|
|
4
|
+
headersRef: React.RefObject<HTMLDivElement>;
|
|
5
|
+
scrollContentRef: React.RefObject<HTMLDivElement>;
|
|
6
|
+
isScrollable: boolean;
|
|
7
|
+
columns: VirtualTableColumn<RowType>[];
|
|
8
|
+
}
|
|
9
|
+
export declare const useLayout: <RowType extends object>({ headersRef, scrollContentRef, isScrollable, columns }: Props<RowType>) => {
|
|
10
|
+
columnWidths: number[];
|
|
11
|
+
scrollBarSize: number;
|
|
12
|
+
stickyPosition: Record<number, import("./useStickyPosition").StickyPosition>;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { useDebounce } from "./useDebounce";
|
|
3
|
+
import { useScrollBarSize } from "./useScrollBarSize";
|
|
4
|
+
import { useColumnWidths } from "./useColumnWidths";
|
|
5
|
+
import { useStickyPosition } from "./useStickyPosition";
|
|
6
|
+
export var useLayout = function (_a) {
|
|
7
|
+
var headersRef = _a.headersRef, scrollContentRef = _a.scrollContentRef, isScrollable = _a.isScrollable, columns = _a.columns;
|
|
8
|
+
var _b = useColumnWidths(headersRef), calculateColWidths = _b.calculateColWidths, columnWidths = _b.columnWidths;
|
|
9
|
+
var _c = useScrollBarSize(scrollContentRef, isScrollable), calculateScrollBarSize = _c.calculateScrollBarSize, scrollBarSize = _c.scrollBarSize;
|
|
10
|
+
var stickyPosition = useStickyPosition(columns, columnWidths);
|
|
11
|
+
var debouncedCalculateColWidths = useDebounce(calculateColWidths);
|
|
12
|
+
var debouncedCalculateScrollBarSize = useDebounce(calculateScrollBarSize);
|
|
13
|
+
var handler = React.useCallback(function (event) {
|
|
14
|
+
if (event.currentTarget && "querySelector" in event.currentTarget && headersRef.current) {
|
|
15
|
+
var element = event.currentTarget;
|
|
16
|
+
var result = element.querySelector(".g-virtual-table");
|
|
17
|
+
if (result) {
|
|
18
|
+
debouncedCalculateColWidths();
|
|
19
|
+
debouncedCalculateScrollBarSize();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}, [debouncedCalculateColWidths, debouncedCalculateScrollBarSize, headersRef]);
|
|
23
|
+
React.useEffect(function () {
|
|
24
|
+
document.body.addEventListener("transitionend", handler);
|
|
25
|
+
document.body.addEventListener("animationend", handler);
|
|
26
|
+
return function () {
|
|
27
|
+
document.body.removeEventListener("transitionend", handler);
|
|
28
|
+
document.body.removeEventListener("animationend", handler);
|
|
29
|
+
};
|
|
30
|
+
}, [handler]);
|
|
31
|
+
return {
|
|
32
|
+
columnWidths: columnWidths,
|
|
33
|
+
scrollBarSize: scrollBarSize,
|
|
34
|
+
stickyPosition: stickyPosition,
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=useLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLayout.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AAUtD,MAAM,CAAC,IAAM,SAAS,GAAG,UAAkC,EAAqE;QAApE,UAAU,gBAAA,EAAE,gBAAgB,sBAAA,EAAE,YAAY,kBAAA,EAAE,OAAO,aAAA;IACrG,IAAA,KAAqC,eAAe,CAAC,UAAU,CAAC,EAA/D,kBAAkB,wBAAA,EAAE,YAAY,kBAA+B,CAAC;IACjE,IAAA,KAA0C,gBAAgB,CAAC,gBAAgB,EAAE,YAAY,CAAC,EAAzF,sBAAsB,4BAAA,EAAE,aAAa,mBAAoD,CAAC;IACjG,IAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;IAEhE,IAAM,2BAA2B,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACpE,IAAM,+BAA+B,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAE5E,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC7B,UAAC,KAAuC;QACpC,IAAI,KAAK,CAAC,aAAa,IAAI,eAAe,IAAI,KAAK,CAAC,aAAa,IAAI,UAAU,CAAC,OAAO,EAAE;YACrF,IAAM,OAAO,GAAG,KAAK,CAAC,aAA4B,CAAC;YACnD,IAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;YACzD,IAAI,MAAM,EAAE;gBACR,2BAA2B,EAAE,CAAC;gBAC9B,+BAA+B,EAAE,CAAC;aACrC;SACJ;IACL,CAAC,EACD,CAAC,2BAA2B,EAAE,+BAA+B,EAAE,UAAU,CAAC,CAC7E,CAAC;IAEF,KAAK,CAAC,SAAS,CAAC;QACZ,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QACxD,OAAO;YACH,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5D,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;QAC/D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO;QACH,YAAY,cAAA;QACZ,aAAa,eAAA;QACb,cAAc,gBAAA;KACjB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const useScrollBarSize: (scrollContentRef: React.RefObject<HTMLDivElement>, isScrollable: boolean) =>
|
|
2
|
+
export declare const useScrollBarSize: (scrollContentRef: React.RefObject<HTMLDivElement>, isScrollable: boolean) => {
|
|
3
|
+
calculateScrollBarSize: () => void;
|
|
4
|
+
scrollBarSize: number;
|
|
5
|
+
};
|
|
@@ -28,6 +28,9 @@ export var useScrollBarSize = function (scrollContentRef, isScrollable) {
|
|
|
28
28
|
calculateScrollBarSize();
|
|
29
29
|
}
|
|
30
30
|
}, [calculateScrollBarSize, isScrollable, scrollBarSize]);
|
|
31
|
-
return
|
|
31
|
+
return {
|
|
32
|
+
calculateScrollBarSize: calculateScrollBarSize,
|
|
33
|
+
scrollBarSize: scrollBarSize,
|
|
34
|
+
};
|
|
32
35
|
};
|
|
33
36
|
//# sourceMappingURL=useScrollBarSize.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollBarSize.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useScrollBarSize.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,gBAAiD,EAAE,YAAqB;IAC/F,IAAA,KAAA,OAAoC,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,IAAA,EAA5D,aAAa,QAAA,EAAE,gBAAgB,QAA6B,CAAC;IAEpE,IAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC7C,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAA6B,gBAAgB,CAAC,OAAO,EAApD,WAAW,iBAAA,EAAE,WAAW,iBAA4B,CAAC;YAC5D,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC;SAC/C;IACL,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEzC,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,YAAY,IAAI,CAAC,aAAa,EAAE;YAChC,sBAAsB,EAAE,CAAC;SAC5B;IACL,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1D,OAAO,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"useScrollBarSize.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useScrollBarSize.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,gBAAiD,EAAE,YAAqB;IAC/F,IAAA,KAAA,OAAoC,KAAK,CAAC,QAAQ,CAAS,CAAC,CAAC,IAAA,EAA5D,aAAa,QAAA,EAAE,gBAAgB,QAA6B,CAAC;IAEpE,IAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC7C,IAAI,gBAAgB,CAAC,OAAO,EAAE;YACpB,IAAA,KAA6B,gBAAgB,CAAC,OAAO,EAApD,WAAW,iBAAA,EAAE,WAAW,iBAA4B,CAAC;YAC5D,gBAAgB,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC;SAC/C;IACL,CAAC,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEzC,KAAK,CAAC,SAAS,CAAC;QACZ,IAAI,YAAY,IAAI,CAAC,aAAa,EAAE;YAChC,sBAAsB,EAAE,CAAC;SAC5B;IACL,CAAC,EAAE,CAAC,sBAAsB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1D,OAAO;QACH,sBAAsB,wBAAA;QACtB,aAAa,eAAA;KAChB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -3,4 +3,4 @@ export interface StickyPosition {
|
|
|
3
3
|
value: number;
|
|
4
4
|
isLast: boolean;
|
|
5
5
|
}
|
|
6
|
-
export declare const useStickyPosition: <RowType extends object>(
|
|
6
|
+
export declare const useStickyPosition: <RowType extends object>(columns: VirtualTableColumn<RowType>[], columnWidths: number[]) => Record<number, StickyPosition>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ArrayUtil } from "../../internal/ArrayUtil";
|
|
3
|
-
export var useStickyPosition = function (
|
|
3
|
+
export var useStickyPosition = function (columns, columnWidths) {
|
|
4
4
|
return React.useMemo(function () {
|
|
5
5
|
var result = {};
|
|
6
6
|
var left = [];
|
|
7
7
|
var right = [];
|
|
8
|
-
var leftFixedCols = ArrayUtil.compactMap(
|
|
8
|
+
var leftFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] } : null); });
|
|
9
9
|
// the right sticky value stack in reverse direction
|
|
10
|
-
var rightFixedCols = ArrayUtil.compactMap(
|
|
10
|
+
var rightFixedCols = ArrayUtil.compactMap(columns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] } : null); }).reverse();
|
|
11
11
|
leftFixedCols.forEach(function (column, idx) {
|
|
12
12
|
var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
13
13
|
left.push(column.width);
|
|
@@ -19,6 +19,6 @@ export var useStickyPosition = function (transformedColumns, columnWidths) {
|
|
|
19
19
|
result[column.columnIndex] = { value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
20
20
|
});
|
|
21
21
|
return result;
|
|
22
|
-
}, [columnWidths,
|
|
22
|
+
}, [columnWidths, columns]);
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=useStickyPosition.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyPosition.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useStickyPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAQnD,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAyB,
|
|
1
|
+
{"version":3,"file":"useStickyPosition.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/useStickyPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,0BAA0B,CAAC;AAQnD,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAyB,OAAsC,EAAE,YAAsB;IACpH,OAAO,KAAK,CAAC,OAAO,CAAC;QACjB,IAAM,MAAM,GAAmC,EAAE,CAAC;QAClD,IAAM,IAAI,GAAa,EAAE,CAAC;QAC1B,IAAM,KAAK,GAAa,EAAE,CAAC;QAE3B,IAAM,aAAa,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,UAAC,CAAC,EAAE,WAAW,IAAK,OAAA,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,EAAC,WAAW,aAAA,EAAE,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAA7E,CAA6E,CAAC,CAAC;QACvJ,oDAAoD;QACpD,IAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,UAAC,CAAC,EAAE,WAAW,IAAK,OAAA,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,EAAC,WAAW,aAAA,EAAE,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAA9E,CAA8E,CAAC,CAAC,OAAO,EAAE,CAAC;QAEnK,aAAa,CAAC,OAAO,CAAC,UAAC,MAAM,EAAE,GAAG;YAC9B,IAAM,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,GAAG,GAAG,IAAI,EAAV,CAAU,EAAE,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACxB,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAC,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,GAAG,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,EAAC,CAAC;QACzG,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,UAAC,MAAM,EAAE,GAAG;YAC/B,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,IAAI,IAAK,OAAA,GAAG,GAAG,IAAI,EAAV,CAAU,EAAE,CAAC,CAAC,CAAC;YACxE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC5B,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAC,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,GAAG,KAAK,cAAc,CAAC,MAAM,GAAG,CAAC,EAAC,CAAC;QAC1G,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;AAChC,CAAC,CAAC"}
|