@pinnacle0/web-ui 0.3.13 → 0.3.14
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/TableHeader.d.ts +14 -0
- package/core/VirtualTable/TableHeader.js +44 -0
- package/core/VirtualTable/TableHeader.js.map +1 -0
- package/core/VirtualTable/TableRow.d.ts +20 -0
- package/core/VirtualTable/TableRow.js +49 -0
- package/core/VirtualTable/TableRow.js.map +1 -0
- package/core/VirtualTable/index.d.ts +5 -37
- package/core/VirtualTable/index.js +21 -118
- package/core/VirtualTable/index.js.map +1 -1
- package/core/VirtualTable/type.d.ts +40 -0
- package/core/VirtualTable/type.js +2 -0
- package/core/VirtualTable/type.js.map +1 -0
- package/core/VirtualTable/useColumnWidths.d.ts +2 -0
- package/core/VirtualTable/useColumnWidths.js +32 -0
- package/core/VirtualTable/useColumnWidths.js.map +1 -0
- package/core/VirtualTable/useRowSelection.d.ts +1 -1
- package/core/VirtualTable/useScrollBarSize.d.ts +2 -0
- package/core/VirtualTable/useScrollBarSize.js +33 -0
- package/core/VirtualTable/useScrollBarSize.js.map +1 -0
- package/core/VirtualTable/useStickyPosition.d.ts +6 -0
- package/core/VirtualTable/useStickyPosition.js +24 -0
- package/core/VirtualTable/useStickyPosition.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { ColumnFixedPosition, VirtualTableColumn } from "./type";
|
|
3
|
+
import type { StickyPosition } from "./useStickyPosition";
|
|
4
|
+
interface Props<RowType extends object> {
|
|
5
|
+
headersRef: React.RefObject<HTMLDivElement>;
|
|
6
|
+
headerHeight: number;
|
|
7
|
+
transformedColumns: VirtualTableColumn<RowType>[];
|
|
8
|
+
stickyPosition: Record<number, StickyPosition>;
|
|
9
|
+
getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
|
|
10
|
+
}
|
|
11
|
+
export declare const TableHeader: (<RowType extends object>({ headersRef, headerHeight, transformedColumns, stickyPosition, getFixedColumnClassNames }: Props<RowType>) => JSX.Element) & {
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
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 TableHeader = Object.assign(function (_a) {
|
|
28
|
+
var headersRef = _a.headersRef, headerHeight = _a.headerHeight, transformedColumns = _a.transformedColumns, stickyPosition = _a.stickyPosition, getFixedColumnClassNames = _a.getFixedColumnClassNames;
|
|
29
|
+
return (React.createElement("div", { className: "table-headers", ref: headersRef, style: { height: headerHeight, width: scrollX || "100%" } }, transformedColumns.map(function (_a, columnIndex) {
|
|
30
|
+
var _b;
|
|
31
|
+
var title = _a.title, width = _a.width, align = _a.align, fixed = _a.fixed, display = _a.display;
|
|
32
|
+
var stickyPositionValue = ((_b = stickyPosition[columnIndex]) === null || _b === void 0 ? void 0 : _b.value) || 0;
|
|
33
|
+
return (React.createElement("div", { className: __spreadArray(["table-header"], __read(getFixedColumnClassNames(fixed, columnIndex)), false).join(" "), key: columnIndex, style: {
|
|
34
|
+
display: display !== "hidden" ? "flex" : "none",
|
|
35
|
+
flex: "1 0 ".concat(width, "px"),
|
|
36
|
+
textAlign: align,
|
|
37
|
+
left: fixed === "left" ? stickyPositionValue : undefined,
|
|
38
|
+
right: fixed === "right" ? stickyPositionValue : undefined,
|
|
39
|
+
} }, title));
|
|
40
|
+
})));
|
|
41
|
+
}, {
|
|
42
|
+
displayName: "TableHeader",
|
|
43
|
+
});
|
|
44
|
+
//# sourceMappingURL=TableHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableHeader.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,CAAC,IAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CACpC,UAAkC,EAAwG;QAAvG,UAAU,gBAAA,EAAE,YAAY,kBAAA,EAAE,kBAAkB,wBAAA,EAAE,cAAc,oBAAA,EAAE,wBAAwB,8BAAA;IACrH,OAAO,CACH,6BAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,EAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,IAAI,MAAM,EAAC,IAClG,kBAAkB,CAAC,GAAG,CAAC,UAAC,EAAqC,EAAE,WAAW;;YAAjD,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,KAAK,WAAA,EAAE,OAAO,aAAA;QACzD,IAAM,mBAAmB,GAAG,CAAA,MAAA,cAAc,CAAC,WAAW,CAAC,0CAAE,KAAK,KAAI,CAAC,CAAC;QACpE,OAAO,CACH,6BACI,SAAS,EAAE,eAAC,cAAc,UAAK,wBAAwB,CAAC,KAAK,EAAE,WAAW,CAAC,UAAE,IAAI,CAAC,GAAG,CAAC,EACtF,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;gBACH,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBAC/C,IAAI,EAAE,cAAO,KAAK,OAAI;gBACtB,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;gBACxD,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS;aAC7D,IAEA,KAAK,CACJ,CACT,CAAC;IACN,CAAC,CAAC,CACA,CACT,CAAC;AACN,CAAC,EACD;IACI,WAAW,EAAE,aAAa;CAC7B,CACJ,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { VirtualItem } from "react-virtual";
|
|
3
|
+
import type { ColumnFixedPosition, VirtualTableColumn } from "./type";
|
|
4
|
+
import type { StickyPosition } from "./useStickyPosition";
|
|
5
|
+
interface Props<RowType extends object> {
|
|
6
|
+
dataSource: RowType[];
|
|
7
|
+
transformedColumns: VirtualTableColumn<RowType>[];
|
|
8
|
+
virtualItem: VirtualItem;
|
|
9
|
+
columnWidths: number[];
|
|
10
|
+
lastShownColumnIndex: number;
|
|
11
|
+
scrollBarSize: number;
|
|
12
|
+
stickyPosition: Record<number, StickyPosition>;
|
|
13
|
+
getFixedColumnClassNames: (fixed: ColumnFixedPosition | undefined, columnIndex: number) => (string | undefined)[];
|
|
14
|
+
rowClassName?: string;
|
|
15
|
+
onRowClick?: (record: RowType, rowIndex: number) => number;
|
|
16
|
+
}
|
|
17
|
+
export declare const TableRow: (<RowType extends object>({ virtualItem, getFixedColumnClassNames, dataSource, transformedColumns, columnWidths, scrollBarSize, stickyPosition, lastShownColumnIndex, rowClassName, onRowClick, }: Props<RowType>) => JSX.Element) & {
|
|
18
|
+
displayName: string;
|
|
19
|
+
};
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
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 TableRow = Object.assign(function (_a) {
|
|
28
|
+
var virtualItem = _a.virtualItem, getFixedColumnClassNames = _a.getFixedColumnClassNames, dataSource = _a.dataSource, transformedColumns = _a.transformedColumns, columnWidths = _a.columnWidths, scrollBarSize = _a.scrollBarSize, stickyPosition = _a.stickyPosition, lastShownColumnIndex = _a.lastShownColumnIndex, rowClassName = _a.rowClassName, onRowClick = _a.onRowClick;
|
|
29
|
+
var rowIndex = virtualItem.index;
|
|
30
|
+
var currentData = dataSource[rowIndex];
|
|
31
|
+
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) {
|
|
32
|
+
var _a;
|
|
33
|
+
var colSpan = column.colSpan ? column.colSpan(currentData, rowIndex, columnIndex) : 1;
|
|
34
|
+
// handle colspan > 1
|
|
35
|
+
var cellWidth = colSpan > 1 ? columnWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : columnWidths[columnIndex] || column.width;
|
|
36
|
+
var renderData = column.display !== "hidden" && column.renderData(currentData, rowIndex);
|
|
37
|
+
// minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
|
|
38
|
+
var isLastShownColumn = lastShownColumnIndex === columnIndex;
|
|
39
|
+
var stickyPositionValue = ((_a = stickyPosition[columnIndex]) === null || _a === void 0 ? void 0 : _a.value) || 0;
|
|
40
|
+
return (renderData && (React.createElement("div", { className: __spreadArray(["table-cell"], __read(getFixedColumnClassNames(column.fixed, columnIndex)), false).join(" "), key: columnIndex, style: {
|
|
41
|
+
height: "100%",
|
|
42
|
+
width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
|
|
43
|
+
textAlign: column.align,
|
|
44
|
+
left: column.fixed === "left" ? stickyPositionValue : undefined,
|
|
45
|
+
right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
|
|
46
|
+
} }, renderData)));
|
|
47
|
+
})));
|
|
48
|
+
}, { displayName: "TableRow" });
|
|
49
|
+
//# sourceMappingURL=TableRow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/TableRow.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,40 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
import type {
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { SafeReactChild, StringKey } from "../../internal/type";
|
|
3
|
+
import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
|
|
3
4
|
import "./index.less";
|
|
4
|
-
export declare type VirtualTableRowSelection<RowType extends object> = {
|
|
5
|
-
width: number;
|
|
6
|
-
selectedRowKeys: React.Key[];
|
|
7
|
-
onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
|
|
8
|
-
/**
|
|
9
|
-
* Can only sticky in left
|
|
10
|
-
*/
|
|
11
|
-
fixed?: boolean;
|
|
12
|
-
isDisabled?: (data: RowType, rowIndex: number) => boolean;
|
|
13
|
-
isSelectAllDisabled?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Attention:
|
|
16
|
-
* If title is provided, the select all checkbox wil be overridden
|
|
17
|
-
*/
|
|
18
|
-
title?: SafeReactChild;
|
|
19
|
-
};
|
|
20
|
-
export declare type VirtualTableColumn<RowType extends object> = {
|
|
21
|
-
title: SafeReactChild;
|
|
22
|
-
width: number;
|
|
23
|
-
/**
|
|
24
|
-
* Attention:
|
|
25
|
-
* If renderData return null, the corresponding table cell will not render
|
|
26
|
-
*/
|
|
27
|
-
renderData: (record: RowType, rowIndex: number) => SafeReactChildren | undefined;
|
|
28
|
-
align?: "left" | "right" | "center";
|
|
29
|
-
display?: "default" | "hidden";
|
|
30
|
-
fixed?: "left" | "right";
|
|
31
|
-
/**
|
|
32
|
-
* Attention:
|
|
33
|
-
* The overridden cell should return null in renderData props:
|
|
34
|
-
* e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
|
|
35
|
-
*/
|
|
36
|
-
colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
|
|
37
|
-
};
|
|
38
5
|
export interface VirtualTableProps<RowType extends object> {
|
|
39
6
|
dataSource: RowType[];
|
|
40
7
|
columns: VirtualTableColumn<RowType>[];
|
|
@@ -55,7 +22,8 @@ export interface VirtualTableProps<RowType extends object> {
|
|
|
55
22
|
* Default: index
|
|
56
23
|
*/
|
|
57
24
|
rowKey?: StringKey<RowType> | "index";
|
|
25
|
+
headerHeight?: number;
|
|
58
26
|
}
|
|
59
|
-
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, scrollY, dataSource, className, rowClassName, loading, emptyPlaceholder, rowSelection, onRowClick, scrollX, rowKey, }: VirtualTableProps<RowType>) => JSX.Element) & {
|
|
27
|
+
export declare const VirtualTable: (<RowType extends object>({ columns, rowHeight, scrollY, dataSource, className, rowClassName, loading, emptyPlaceholder, rowSelection, onRowClick, scrollX, rowKey, headerHeight, }: VirtualTableProps<RowType>) => JSX.Element) & {
|
|
60
28
|
displayName: string;
|
|
61
29
|
};
|
|
@@ -1,154 +1,57 @@
|
|
|
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
1
|
import React from "react";
|
|
27
2
|
import { useVirtual } from "react-virtual";
|
|
28
|
-
import { ArrayUtil } from "../../internal/ArrayUtil";
|
|
29
3
|
import { Spin } from "../Spin";
|
|
30
4
|
import { useRowSelection } from "./useRowSelection";
|
|
31
5
|
import { useScrollToEdge } from "./useScrollToEdge";
|
|
6
|
+
import { useScrollBarSize } from "./useScrollBarSize";
|
|
7
|
+
import { useColumnWidths } from "./useColumnWidths";
|
|
8
|
+
import { useStickyPosition } from "./useStickyPosition";
|
|
32
9
|
import "./index.less";
|
|
10
|
+
import { TableRow } from "./TableRow";
|
|
11
|
+
import { TableHeader } from "./TableHeader";
|
|
33
12
|
export var VirtualTable = Object.assign(function (_a) {
|
|
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;
|
|
13
|
+
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;
|
|
35
14
|
var size = dataSource.length;
|
|
36
15
|
var scrollContentRef = React.useRef(null);
|
|
37
16
|
var headersRef = React.useRef(null);
|
|
38
17
|
var estimateSize = React.useCallback(function (rowIndex) { return (typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight); }, [rowHeight]);
|
|
39
|
-
var
|
|
40
|
-
var
|
|
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;
|
|
18
|
+
var _d = useVirtual({ size: size, parentRef: scrollContentRef, estimateSize: estimateSize }), virtualItems = _d.virtualItems, totalSize = _d.totalSize;
|
|
19
|
+
var _e = useScrollToEdge(scrollContentRef), isScrollToEdge = _e.onScroll, isScrollToLeft = _e.isScrollToLeft, isScrollToRight = _e.isScrollToRight;
|
|
43
20
|
var transformedColumns = useRowSelection({ columns: columns, dataSource: dataSource, rowSelection: rowSelection, rowKey: rowKey });
|
|
44
21
|
var isScrollable = totalSize > scrollY;
|
|
45
|
-
var headerHeight = 50;
|
|
46
22
|
var tableHeight = scrollY + headerHeight;
|
|
47
23
|
var tableBodyHeight = scrollY;
|
|
48
24
|
var emptyElement = emptyPlaceholder || "暂无数据";
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
var getColWidths = function () {
|
|
56
|
-
if (headersRef.current) {
|
|
57
|
-
var widths_1 = [];
|
|
58
|
-
var headers = headersRef.current.querySelectorAll(".table-header");
|
|
59
|
-
headers.forEach(function (header) {
|
|
60
|
-
var width = header.getBoundingClientRect().width;
|
|
61
|
-
widths_1.push(width);
|
|
62
|
-
});
|
|
63
|
-
setColWidths(widths_1);
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
var stickyPosition = React.useMemo(function () {
|
|
67
|
-
var result = {};
|
|
68
|
-
var left = [];
|
|
69
|
-
var right = [];
|
|
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
|
|
72
|
-
var rightFixedCols = ArrayUtil.compactMap(transformedColumns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: colWidths[columnIndex] } : null); }).reverse();
|
|
73
|
-
leftFixedCols.forEach(function (column, idx) {
|
|
74
|
-
var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
75
|
-
left.push(column.width);
|
|
76
|
-
result[column.columnIndex] = { value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1 };
|
|
77
|
-
});
|
|
78
|
-
rightFixedCols.forEach(function (column, idx) {
|
|
79
|
-
var stackedPositionValue = right.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
80
|
-
right.unshift(column.width);
|
|
81
|
-
result[column.columnIndex] = { value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
82
|
-
});
|
|
83
|
-
return result;
|
|
84
|
-
}, [colWidths, transformedColumns]);
|
|
25
|
+
var scrollBarSize = useScrollBarSize(scrollContentRef, isScrollable);
|
|
26
|
+
var columnWidths = useColumnWidths(headersRef);
|
|
27
|
+
var stickyPosition = useStickyPosition(transformedColumns, columnWidths);
|
|
28
|
+
var lastShownColumnIndex = React.useMemo(function () { return columns.length - 1 - columns.reverse().findIndex(function (_) { return _.display !== "hidden"; }); }, [columns]);
|
|
85
29
|
// handle the edge position & shadow of the fixed columns
|
|
86
|
-
var
|
|
30
|
+
var getFixedColumnClassNames = React.useCallback(function (fixed, columnIndex) {
|
|
87
31
|
var isFixedClassName = fixed ? "fixed" : "";
|
|
88
32
|
var isLastFixedClassName = fixed && stickyPosition[columnIndex].isLast ? "last" : "";
|
|
89
33
|
var fixedPositionClassName = fixed;
|
|
90
34
|
var hideShadowClassName = (fixed === "left" && isScrollToLeft) || (fixed === "right" && isScrollToRight) ? "hide-shadow" : "";
|
|
91
35
|
return [isFixedClassName, isLastFixedClassName, fixedPositionClassName, hideShadowClassName];
|
|
92
|
-
};
|
|
36
|
+
}, [isScrollToLeft, isScrollToRight, stickyPosition]);
|
|
93
37
|
var onScroll = React.useCallback(function () {
|
|
94
38
|
requestAnimationFrame(function () {
|
|
95
39
|
// only trigger in horizontal direction
|
|
96
|
-
if (scrollContentRef.current
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
40
|
+
if (!scrollContentRef.current || !headersRef.current || scrollContentRef.current.scrollLeft === headersRef.current.scrollLeft)
|
|
41
|
+
return;
|
|
42
|
+
isScrollToEdge();
|
|
43
|
+
// sync scrolling in header
|
|
44
|
+
headersRef.current.scrollLeft = scrollContentRef.current.scrollLeft;
|
|
101
45
|
});
|
|
102
46
|
}, [isScrollToEdge]);
|
|
103
|
-
var lastShownColumnIndex = React.useMemo(function () {
|
|
104
|
-
return columns.length - 1 - columns.reverse().findIndex(function (_) { return _.display !== "hidden"; });
|
|
105
|
-
}, [columns]);
|
|
106
|
-
React.useEffect(function () {
|
|
107
|
-
isScrollable && !scrollBarSize && getScrollBarSize();
|
|
108
|
-
}, [isScrollable, scrollBarSize]);
|
|
109
|
-
React.useEffect(function () {
|
|
110
|
-
getColWidths();
|
|
111
|
-
}, []);
|
|
112
47
|
return (React.createElement("div", { className: ["g-virtual-table", className].join(" "), style: { width: scrollX || "100%", height: tableHeight } },
|
|
113
48
|
loading && (React.createElement("div", { className: "mask" },
|
|
114
49
|
React.createElement(Spin, { spinning: loading }))),
|
|
115
50
|
React.createElement("div", { className: "scroll-content", ref: scrollContentRef, style: { height: tableBodyHeight, top: headerHeight }, onScroll: onScroll },
|
|
116
51
|
React.createElement("div", { className: "table", style: { height: totalSize } },
|
|
117
|
-
React.createElement(
|
|
118
|
-
var _b;
|
|
119
|
-
var title = _a.title, width = _a.width, align = _a.align, fixed = _a.fixed, display = _a.display;
|
|
120
|
-
var stickyPositionValue = ((_b = stickyPosition[columnIndex]) === null || _b === void 0 ? void 0 : _b.value) || 0;
|
|
121
|
-
var headerStyle = {
|
|
122
|
-
display: display !== "hidden" ? "flex" : "none",
|
|
123
|
-
flex: "1 0 ".concat(width, "px"),
|
|
124
|
-
textAlign: align,
|
|
125
|
-
left: fixed === "left" ? stickyPositionValue : undefined,
|
|
126
|
-
right: fixed === "right" ? stickyPositionValue : undefined,
|
|
127
|
-
};
|
|
128
|
-
return (React.createElement("div", { className: __spreadArray(["table-header"], __read(getFixedColClassNames(fixed, columnIndex)), false).join(" "), key: columnIndex, style: headerStyle }, title));
|
|
129
|
-
})),
|
|
52
|
+
React.createElement(TableHeader, { headersRef: headersRef, headerHeight: headerHeight, transformedColumns: transformedColumns, stickyPosition: stickyPosition, getFixedColumnClassNames: getFixedColumnClassNames }),
|
|
130
53
|
React.createElement("div", { className: "table-body" }, dataSource.length === 0
|
|
131
54
|
? emptyElement
|
|
132
|
-
: virtualItems.map(function (virtualItem) {
|
|
133
|
-
var rowIndex = virtualItem.index;
|
|
134
|
-
var currentData = dataSource[rowIndex];
|
|
135
|
-
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) {
|
|
136
|
-
var _a;
|
|
137
|
-
var colSpan = column.colSpan ? column.colSpan(currentData, rowIndex, columnIndex) : 1;
|
|
138
|
-
// handle colspan > 1
|
|
139
|
-
var cellWidth = colSpan > 1 ? colWidths.slice(columnIndex, columnIndex + colSpan).reduce(function (acc, curr) { return acc + curr; }, 0) : colWidths[columnIndex] || column.width;
|
|
140
|
-
var renderData = column.display !== "hidden" && column.renderData(currentData, rowIndex);
|
|
141
|
-
// minus the scroll bar size of the last column & minus the scroll bar size in the right sticky value of the right fixed columns
|
|
142
|
-
var isLastShownColumn = lastShownColumnIndex === columnIndex;
|
|
143
|
-
var stickyPositionValue = ((_a = stickyPosition[columnIndex]) === null || _a === void 0 ? void 0 : _a.value) || 0;
|
|
144
|
-
return (renderData && (React.createElement("div", { className: __spreadArray(["table-cell"], __read(getFixedColClassNames(column.fixed, columnIndex)), false).join(" "), key: columnIndex, style: {
|
|
145
|
-
height: "100%",
|
|
146
|
-
width: cellWidth - (isLastShownColumn ? scrollBarSize : 0),
|
|
147
|
-
textAlign: column.align,
|
|
148
|
-
left: column.fixed === "left" ? stickyPositionValue : undefined,
|
|
149
|
-
right: column.fixed === "right" ? stickyPositionValue - (isLastShownColumn ? 0 : scrollBarSize) : undefined,
|
|
150
|
-
} }, renderData)));
|
|
151
|
-
})));
|
|
152
|
-
}))))));
|
|
55
|
+
: virtualItems.map(function (virtualItem, columnIndex) { return (React.createElement(TableRow, { key: columnIndex, onRowClick: onRowClick, virtualItem: virtualItem, dataSource: dataSource, transformedColumns: transformedColumns, columnWidths: columnWidths, scrollBarSize: scrollBarSize, stickyPosition: stickyPosition, lastShownColumnIndex: lastShownColumnIndex, rowClassName: rowClassName, getFixedColumnClassNames: getFixedColumnClassNames })); }))))));
|
|
153
56
|
}, { displayName: "VirtualTable" });
|
|
154
57
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { SafeReactChild, SafeReactChildren } from "../../internal/type";
|
|
3
|
+
export declare type ColumnFixedPosition = "left" | "right";
|
|
4
|
+
/**
|
|
5
|
+
* Similar usage of Antd Table but only support partial features: fixed columns, row selection, on row click
|
|
6
|
+
*/
|
|
7
|
+
export declare type VirtualTableRowSelection<RowType extends object> = {
|
|
8
|
+
width: number;
|
|
9
|
+
selectedRowKeys: React.Key[];
|
|
10
|
+
onChange: (selectedRowKeys: React.Key[], selectedRows: RowType[]) => void;
|
|
11
|
+
/**
|
|
12
|
+
* Can only sticky in left
|
|
13
|
+
*/
|
|
14
|
+
fixed?: boolean;
|
|
15
|
+
isDisabled?: (data: RowType, rowIndex: number) => boolean;
|
|
16
|
+
isSelectAllDisabled?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Attention:
|
|
19
|
+
* If title is provided, the select all checkbox wil be overridden
|
|
20
|
+
*/
|
|
21
|
+
title?: SafeReactChild;
|
|
22
|
+
};
|
|
23
|
+
export declare type VirtualTableColumn<RowType extends object> = {
|
|
24
|
+
title: SafeReactChild;
|
|
25
|
+
width: number;
|
|
26
|
+
/**
|
|
27
|
+
* Attention:
|
|
28
|
+
* If renderData return null, the corresponding table cell will not render
|
|
29
|
+
*/
|
|
30
|
+
renderData: (record: RowType, rowIndex: number) => SafeReactChildren | undefined;
|
|
31
|
+
align?: "left" | "right" | "center";
|
|
32
|
+
display?: "default" | "hidden";
|
|
33
|
+
fixed?: "left" | "right";
|
|
34
|
+
/**
|
|
35
|
+
* Attention:
|
|
36
|
+
* The overridden cell should return null in renderData props:
|
|
37
|
+
* e.g. [{colSpan: 3, renderData: () => <div />}, {renderData: () => null}], {renderData: () => null}
|
|
38
|
+
*/
|
|
39
|
+
colSpan?: (record: RowType, rowIndex: number, colIndex: number) => number;
|
|
40
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"type.js","sourceRoot":"","sources":["../../../src/core/VirtualTable/type.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,32 @@
|
|
|
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
|
+
import React from "react";
|
|
18
|
+
export var useColumnWidths = function (headersRef) {
|
|
19
|
+
var _a = __read(React.useState([]), 2), colWidths = _a[0], setColWidths = _a[1];
|
|
20
|
+
React.useEffect(function () {
|
|
21
|
+
if (!headersRef.current)
|
|
22
|
+
return;
|
|
23
|
+
var headers = headersRef.current.querySelectorAll(".table-header");
|
|
24
|
+
var widths = Array.prototype.slice.call(headers).map(function (header) {
|
|
25
|
+
var width = header.getBoundingClientRect().width;
|
|
26
|
+
return width;
|
|
27
|
+
});
|
|
28
|
+
setColWidths(widths);
|
|
29
|
+
}, [headersRef, setColWidths]);
|
|
30
|
+
return colWidths;
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=useColumnWidths.js.map
|
|
@@ -0,0 +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,SAAS,CAAC;QACZ,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,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/B,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { VirtualTableColumn, VirtualTableRowSelection } from "./type";
|
|
3
3
|
interface Props<RowType extends object> {
|
|
4
4
|
columns: VirtualTableColumn<RowType>[];
|
|
5
5
|
dataSource: RowType[];
|
|
@@ -0,0 +1,33 @@
|
|
|
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
|
+
import React from "react";
|
|
18
|
+
export var useScrollBarSize = function (scrollContentRef, isScrollable) {
|
|
19
|
+
var _a = __read(React.useState(0), 2), scrollBarSize = _a[0], setScrollBarSize = _a[1];
|
|
20
|
+
var calculateScrollBarSize = React.useCallback(function () {
|
|
21
|
+
if (scrollContentRef.current) {
|
|
22
|
+
var _a = scrollContentRef.current, clientWidth = _a.clientWidth, offsetWidth = _a.offsetWidth;
|
|
23
|
+
setScrollBarSize(offsetWidth - clientWidth);
|
|
24
|
+
}
|
|
25
|
+
}, [scrollContentRef, setScrollBarSize]);
|
|
26
|
+
React.useEffect(function () {
|
|
27
|
+
if (isScrollable && !scrollBarSize) {
|
|
28
|
+
calculateScrollBarSize();
|
|
29
|
+
}
|
|
30
|
+
}, [calculateScrollBarSize, isScrollable, scrollBarSize]);
|
|
31
|
+
return scrollBarSize;
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=useScrollBarSize.js.map
|
|
@@ -0,0 +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;AACzB,CAAC,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { VirtualTableColumn } from "./type";
|
|
2
|
+
export interface StickyPosition {
|
|
3
|
+
value: number;
|
|
4
|
+
isLast: boolean;
|
|
5
|
+
}
|
|
6
|
+
export declare const useStickyPosition: <RowType extends object>(transformedColumns: VirtualTableColumn<RowType>[], columnWidths: number[]) => Record<number, StickyPosition>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ArrayUtil } from "../../internal/ArrayUtil";
|
|
3
|
+
export var useStickyPosition = function (transformedColumns, columnWidths) {
|
|
4
|
+
return React.useMemo(function () {
|
|
5
|
+
var result = {};
|
|
6
|
+
var left = [];
|
|
7
|
+
var right = [];
|
|
8
|
+
var leftFixedCols = ArrayUtil.compactMap(transformedColumns, function (_, columnIndex) { return (_.fixed === "left" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] } : null); });
|
|
9
|
+
// the right sticky value stack in reverse direction
|
|
10
|
+
var rightFixedCols = ArrayUtil.compactMap(transformedColumns, function (_, columnIndex) { return (_.fixed === "right" ? { columnIndex: columnIndex, width: columnWidths[columnIndex] } : null); }).reverse();
|
|
11
|
+
leftFixedCols.forEach(function (column, idx) {
|
|
12
|
+
var stackedPositionValue = left.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
13
|
+
left.push(column.width);
|
|
14
|
+
result[column.columnIndex] = { value: stackedPositionValue, isLast: idx === leftFixedCols.length - 1 };
|
|
15
|
+
});
|
|
16
|
+
rightFixedCols.forEach(function (column, idx) {
|
|
17
|
+
var stackedPositionValue = right.reduce(function (acc, prev) { return acc + prev; }, 0);
|
|
18
|
+
right.unshift(column.width);
|
|
19
|
+
result[column.columnIndex] = { value: stackedPositionValue, isLast: idx === rightFixedCols.length - 1 };
|
|
20
|
+
});
|
|
21
|
+
return result;
|
|
22
|
+
}, [columnWidths, transformedColumns]);
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useStickyPosition.js.map
|
|
@@ -0,0 +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,kBAAiD,EAAE,YAAsB;IAC/H,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,kBAAkB,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;QAClK,oDAAoD;QACpD,IAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,kBAAkB,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;QAE9K,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;QAEH,OAAO,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAC3C,CAAC,CAAC"}
|