pne-ui 3.0.90 → 3.0.91
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/cjs/component/table/AbstractTable.js +14 -12
- package/cjs/component/table/AbstractTable.js.map +1 -1
- package/cjs/component/table/useDelayedLoading.d.ts +9 -0
- package/cjs/component/table/useDelayedLoading.js +41 -0
- package/cjs/component/table/useDelayedLoading.js.map +1 -0
- package/esm/component/table/AbstractTable.js +14 -12
- package/esm/component/table/AbstractTable.js.map +1 -1
- package/esm/component/table/useDelayedLoading.d.ts +9 -0
- package/esm/component/table/useDelayedLoading.js +39 -0
- package/esm/component/table/useDelayedLoading.js.map +1 -0
- package/package.json +1 -1
|
@@ -13,12 +13,14 @@ const PneTableCell_1 = tslib_1.__importDefault(require("./PneTableCell"));
|
|
|
13
13
|
const PneTablePagination_1 = tslib_1.__importDefault(require("./PneTablePagination"));
|
|
14
14
|
const PneTablePaginationActions_1 = tslib_1.__importDefault(require("./PneTablePaginationActions"));
|
|
15
15
|
const react_i18next_1 = require("react-i18next");
|
|
16
|
+
const useDelayedLoading_1 = tslib_1.__importDefault(require("./useDelayedLoading"));
|
|
16
17
|
const AbstractTable = (props) => {
|
|
17
18
|
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, } = props;
|
|
18
19
|
const { t } = (0, react_i18next_1.useTranslation)();
|
|
20
|
+
const showSkeleton = (0, useDelayedLoading_1.default)(loading);
|
|
19
21
|
const containerRef = (0, react_1.useRef)(null);
|
|
20
22
|
const tableContainerRef = (0, react_1.useRef)(null);
|
|
21
|
-
const
|
|
23
|
+
const lastRowHeightRef = (0, react_1.useRef)(undefined);
|
|
22
24
|
const lastHeaderHeightRef = (0, react_1.useRef)(0);
|
|
23
25
|
const [columnCount, setColumnCount] = (0, react_1.useState)(100);
|
|
24
26
|
const visibleRows = react_1.default.useMemo(() => data, [data, sortOptions?.order, sortOptions?.sortIndex]);
|
|
@@ -31,12 +33,12 @@ const AbstractTable = (props) => {
|
|
|
31
33
|
}
|
|
32
34
|
});
|
|
33
35
|
(0, react_1.useLayoutEffect)(() => {
|
|
34
|
-
if (!
|
|
35
|
-
|
|
36
|
+
if (!showSkeleton && tableContainerRef.current && visibleRows.length > 0) {
|
|
37
|
+
const containerHeight = tableContainerRef.current.offsetHeight;
|
|
36
38
|
const thead = containerRef.current?.querySelector('table thead');
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
|
|
40
|
+
lastHeaderHeightRef.current = headerHeight;
|
|
41
|
+
lastRowHeightRef.current = (containerHeight - headerHeight) / visibleRows.length;
|
|
40
42
|
}
|
|
41
43
|
});
|
|
42
44
|
const getPneTablePagination = (position) => {
|
|
@@ -52,12 +54,12 @@ const AbstractTable = (props) => {
|
|
|
52
54
|
}, rowsPerPageOptions: paginator.rowsPerPageOptions, rowsPerPage: paginator.rowsPerPage, page: paginator.page, onPageChange: paginator.onPageChange, ActionsComponent: (props) => react_1.default.createElement(PneTablePaginationActions_1.default, { ...props, paginator: paginator, shouldRequestScroll: position === 'bottom' }) });
|
|
53
55
|
};
|
|
54
56
|
const skeletonRowCount = paginator?.rowsPerPage || 10;
|
|
55
|
-
const skeletonTableHeight = loading && lastContentHeightRef.current
|
|
56
|
-
? lastContentHeightRef.current
|
|
57
|
-
: undefined;
|
|
58
57
|
const cellPadding = 16; // 8px top + 8px bottom
|
|
59
|
-
const skeletonItemHeight =
|
|
60
|
-
? Math.max(16,
|
|
58
|
+
const skeletonItemHeight = lastRowHeightRef.current
|
|
59
|
+
? Math.max(16, lastRowHeightRef.current - cellPadding)
|
|
60
|
+
: undefined;
|
|
61
|
+
const skeletonTableHeight = showSkeleton && lastRowHeightRef.current
|
|
62
|
+
? lastHeaderHeightRef.current + lastRowHeightRef.current * skeletonRowCount
|
|
61
63
|
: undefined;
|
|
62
64
|
const skeletonWidth = (row, col) => {
|
|
63
65
|
const hash = Math.sin(row * 127.1 + col * 311.7) * 43758.5453;
|
|
@@ -70,7 +72,7 @@ const AbstractTable = (props) => {
|
|
|
70
72
|
react_1.default.createElement(TableHead_1.default, null, createTableHeader({
|
|
71
73
|
sortOptions: sortOptions
|
|
72
74
|
})),
|
|
73
|
-
react_1.default.createElement(TableBody_1.default, null,
|
|
75
|
+
react_1.default.createElement(TableBody_1.default, null, showSkeleton ? (Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (react_1.default.createElement(PneTableRow_1.default, { key: `skeleton-${rowIndex}`, hover: false }, Array.from({ length: columnCount }).map((_, colIndex) => (react_1.default.createElement(PneTableCell_1.default, { key: `skeleton-${rowIndex}-${colIndex}` },
|
|
74
76
|
react_1.default.createElement(Skeleton_1.default, { variant: "rounded", width: skeletonWidth(rowIndex, colIndex), height: skeletonItemHeight })))))))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
75
77
|
visibleRows.map(createRow),
|
|
76
78
|
visibleRows.length === 0 && showNothingIsFoundRow && (react_1.default.createElement(PneTableRow_1.default, { hover: false },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":";;;AAAA,uDAA4F;AAC5F,wEAAwC;AACxC,gFAAgD;AAChD,0FAA0D;AAC1D,gFAAgD;AAChD,oEAAoC;AACpC,8EAA8C;AAE9C,wEAAwC;AACxC,0EAA0C;AAC1C,sFAAsD;AACtD,oGAAoE;AAEpE,iDAA6C;
|
|
1
|
+
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Хук задержки отображения состояния загрузки.
|
|
3
|
+
*
|
|
4
|
+
* Если загрузка завершается быстрее {@link DELAY_BEFORE_SHOWING} мс, индикатор не показывается вовсе.
|
|
5
|
+
* Если индикатор был показан, он остаётся видимым минимум {@link MIN_DISPLAY_DURATION} мс,
|
|
6
|
+
* чтобы избежать мерцания.
|
|
7
|
+
*/
|
|
8
|
+
declare const useDelayedLoading: (loading: boolean) => boolean;
|
|
9
|
+
export default useDelayedLoading;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const react_1 = require("react");
|
|
4
|
+
const DELAY_BEFORE_SHOWING = 300;
|
|
5
|
+
const MIN_DISPLAY_DURATION = 500;
|
|
6
|
+
/**
|
|
7
|
+
* Хук задержки отображения состояния загрузки.
|
|
8
|
+
*
|
|
9
|
+
* Если загрузка завершается быстрее {@link DELAY_BEFORE_SHOWING} мс, индикатор не показывается вовсе.
|
|
10
|
+
* Если индикатор был показан, он остаётся видимым минимум {@link MIN_DISPLAY_DURATION} мс,
|
|
11
|
+
* чтобы избежать мерцания.
|
|
12
|
+
*/
|
|
13
|
+
const useDelayedLoading = (loading) => {
|
|
14
|
+
const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(false);
|
|
15
|
+
const skeletonShownAt = (0, react_1.useRef)(null);
|
|
16
|
+
(0, react_1.useEffect)(() => {
|
|
17
|
+
if (loading) {
|
|
18
|
+
const timer = setTimeout(() => {
|
|
19
|
+
setShowSkeleton(true);
|
|
20
|
+
skeletonShownAt.current = Date.now();
|
|
21
|
+
}, DELAY_BEFORE_SHOWING);
|
|
22
|
+
return () => clearTimeout(timer);
|
|
23
|
+
}
|
|
24
|
+
if (skeletonShownAt.current) {
|
|
25
|
+
const elapsed = Date.now() - skeletonShownAt.current;
|
|
26
|
+
if (elapsed < MIN_DISPLAY_DURATION) {
|
|
27
|
+
const timer = setTimeout(() => {
|
|
28
|
+
setShowSkeleton(false);
|
|
29
|
+
skeletonShownAt.current = null;
|
|
30
|
+
}, MIN_DISPLAY_DURATION - elapsed);
|
|
31
|
+
return () => clearTimeout(timer);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
setShowSkeleton(false);
|
|
35
|
+
skeletonShownAt.current = null;
|
|
36
|
+
return undefined;
|
|
37
|
+
}, [loading]);
|
|
38
|
+
return showSkeleton;
|
|
39
|
+
};
|
|
40
|
+
exports.default = useDelayedLoading;
|
|
41
|
+
//# sourceMappingURL=useDelayedLoading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDelayedLoading.js","sourceRoot":"","sources":["../../../src/component/table/useDelayedLoading.ts"],"names":[],"mappings":";;AAAA,iCAAkD;AAElD,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAW,EAAE;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,IAAA,cAAM,EAAgB,IAAI,CAAC,CAAC;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACzC,CAAC,EAAE,oBAAoB,CAAC,CAAC;YACzB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,eAAe,CAAC,OAAO,CAAC;YACrD,IAAI,OAAO,GAAG,oBAAoB,EAAE,CAAC;gBACjC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC1B,eAAe,CAAC,KAAK,CAAC,CAAC;oBACvB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC,CAAC;gBACnC,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;QAED,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,kBAAe,iBAAiB,CAAC"}
|
|
@@ -10,12 +10,14 @@ import PneTableCell from './PneTableCell';
|
|
|
10
10
|
import PneTablePagination from './PneTablePagination';
|
|
11
11
|
import PneTablePaginationActions from './PneTablePaginationActions';
|
|
12
12
|
import { useTranslation } from "react-i18next";
|
|
13
|
+
import useDelayedLoading from "./useDelayedLoading";
|
|
13
14
|
const AbstractTable = (props) => {
|
|
14
15
|
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, } = props;
|
|
15
16
|
const { t } = useTranslation();
|
|
17
|
+
const showSkeleton = useDelayedLoading(loading);
|
|
16
18
|
const containerRef = useRef(null);
|
|
17
19
|
const tableContainerRef = useRef(null);
|
|
18
|
-
const
|
|
20
|
+
const lastRowHeightRef = useRef(undefined);
|
|
19
21
|
const lastHeaderHeightRef = useRef(0);
|
|
20
22
|
const [columnCount, setColumnCount] = useState(100);
|
|
21
23
|
const visibleRows = React.useMemo(() => data, [data, sortOptions?.order, sortOptions?.sortIndex]);
|
|
@@ -28,12 +30,12 @@ const AbstractTable = (props) => {
|
|
|
28
30
|
}
|
|
29
31
|
});
|
|
30
32
|
useLayoutEffect(() => {
|
|
31
|
-
if (!
|
|
32
|
-
|
|
33
|
+
if (!showSkeleton && tableContainerRef.current && visibleRows.length > 0) {
|
|
34
|
+
const containerHeight = tableContainerRef.current.offsetHeight;
|
|
33
35
|
const thead = containerRef.current?.querySelector('table thead');
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
const headerHeight = thead ? thead.getBoundingClientRect().height : 0;
|
|
37
|
+
lastHeaderHeightRef.current = headerHeight;
|
|
38
|
+
lastRowHeightRef.current = (containerHeight - headerHeight) / visibleRows.length;
|
|
37
39
|
}
|
|
38
40
|
});
|
|
39
41
|
const getPneTablePagination = (position) => {
|
|
@@ -49,12 +51,12 @@ const AbstractTable = (props) => {
|
|
|
49
51
|
}, rowsPerPageOptions: paginator.rowsPerPageOptions, rowsPerPage: paginator.rowsPerPage, page: paginator.page, onPageChange: paginator.onPageChange, ActionsComponent: (props) => React.createElement(PneTablePaginationActions, { ...props, paginator: paginator, shouldRequestScroll: position === 'bottom' }) });
|
|
50
52
|
};
|
|
51
53
|
const skeletonRowCount = paginator?.rowsPerPage || 10;
|
|
52
|
-
const skeletonTableHeight = loading && lastContentHeightRef.current
|
|
53
|
-
? lastContentHeightRef.current
|
|
54
|
-
: undefined;
|
|
55
54
|
const cellPadding = 16; // 8px top + 8px bottom
|
|
56
|
-
const skeletonItemHeight =
|
|
57
|
-
? Math.max(16,
|
|
55
|
+
const skeletonItemHeight = lastRowHeightRef.current
|
|
56
|
+
? Math.max(16, lastRowHeightRef.current - cellPadding)
|
|
57
|
+
: undefined;
|
|
58
|
+
const skeletonTableHeight = showSkeleton && lastRowHeightRef.current
|
|
59
|
+
? lastHeaderHeightRef.current + lastRowHeightRef.current * skeletonRowCount
|
|
58
60
|
: undefined;
|
|
59
61
|
const skeletonWidth = (row, col) => {
|
|
60
62
|
const hash = Math.sin(row * 127.1 + col * 311.7) * 43758.5453;
|
|
@@ -67,7 +69,7 @@ const AbstractTable = (props) => {
|
|
|
67
69
|
React.createElement(TableHead, null, createTableHeader({
|
|
68
70
|
sortOptions: sortOptions
|
|
69
71
|
})),
|
|
70
|
-
React.createElement(TableBody, null,
|
|
72
|
+
React.createElement(TableBody, null, showSkeleton ? (Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (React.createElement(PneTableRow, { key: `skeleton-${rowIndex}`, hover: false }, Array.from({ length: columnCount }).map((_, colIndex) => (React.createElement(PneTableCell, { key: `skeleton-${rowIndex}-${colIndex}` },
|
|
71
73
|
React.createElement(Skeleton, { variant: "rounded", width: skeletonWidth(rowIndex, colIndex), height: skeletonItemHeight })))))))) : (React.createElement(React.Fragment, null,
|
|
72
74
|
visibleRows.map(createRow),
|
|
73
75
|
visibleRows.length === 0 && showNothingIsFoundRow && (React.createElement(PneTableRow, { hover: false },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAmB,MAAM,OAAO,CAAC;AAC5F,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAE9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AAEpE,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Хук задержки отображения состояния загрузки.
|
|
3
|
+
*
|
|
4
|
+
* Если загрузка завершается быстрее {@link DELAY_BEFORE_SHOWING} мс, индикатор не показывается вовсе.
|
|
5
|
+
* Если индикатор был показан, он остаётся видимым минимум {@link MIN_DISPLAY_DURATION} мс,
|
|
6
|
+
* чтобы избежать мерцания.
|
|
7
|
+
*/
|
|
8
|
+
declare const useDelayedLoading: (loading: boolean) => boolean;
|
|
9
|
+
export default useDelayedLoading;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
|
2
|
+
const DELAY_BEFORE_SHOWING = 300;
|
|
3
|
+
const MIN_DISPLAY_DURATION = 500;
|
|
4
|
+
/**
|
|
5
|
+
* Хук задержки отображения состояния загрузки.
|
|
6
|
+
*
|
|
7
|
+
* Если загрузка завершается быстрее {@link DELAY_BEFORE_SHOWING} мс, индикатор не показывается вовсе.
|
|
8
|
+
* Если индикатор был показан, он остаётся видимым минимум {@link MIN_DISPLAY_DURATION} мс,
|
|
9
|
+
* чтобы избежать мерцания.
|
|
10
|
+
*/
|
|
11
|
+
const useDelayedLoading = (loading) => {
|
|
12
|
+
const [showSkeleton, setShowSkeleton] = useState(false);
|
|
13
|
+
const skeletonShownAt = useRef(null);
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
if (loading) {
|
|
16
|
+
const timer = setTimeout(() => {
|
|
17
|
+
setShowSkeleton(true);
|
|
18
|
+
skeletonShownAt.current = Date.now();
|
|
19
|
+
}, DELAY_BEFORE_SHOWING);
|
|
20
|
+
return () => clearTimeout(timer);
|
|
21
|
+
}
|
|
22
|
+
if (skeletonShownAt.current) {
|
|
23
|
+
const elapsed = Date.now() - skeletonShownAt.current;
|
|
24
|
+
if (elapsed < MIN_DISPLAY_DURATION) {
|
|
25
|
+
const timer = setTimeout(() => {
|
|
26
|
+
setShowSkeleton(false);
|
|
27
|
+
skeletonShownAt.current = null;
|
|
28
|
+
}, MIN_DISPLAY_DURATION - elapsed);
|
|
29
|
+
return () => clearTimeout(timer);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
setShowSkeleton(false);
|
|
33
|
+
skeletonShownAt.current = null;
|
|
34
|
+
return undefined;
|
|
35
|
+
}, [loading]);
|
|
36
|
+
return showSkeleton;
|
|
37
|
+
};
|
|
38
|
+
export default useDelayedLoading;
|
|
39
|
+
//# sourceMappingURL=useDelayedLoading.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDelayedLoading.js","sourceRoot":"","sources":["../../../src/component/table/useDelayedLoading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAElD,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAEjC;;;;;;GAMG;AACH,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAW,EAAE;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,eAAe,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAEpD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACzC,CAAC,EAAE,oBAAoB,CAAC,CAAC;YACzB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,eAAe,CAAC,OAAO,EAAE,CAAC;YAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,eAAe,CAAC,OAAO,CAAC;YACrD,IAAI,OAAO,GAAG,oBAAoB,EAAE,CAAC;gBACjC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC1B,eAAe,CAAC,KAAK,CAAC,CAAC;oBACvB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;gBACnC,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC,CAAC;gBACnC,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACrC,CAAC;QACL,CAAC;QAED,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|