pne-ui 3.1.2 → 3.1.4
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.d.ts +1 -0
- package/cjs/component/table/AbstractTable.js +24 -6
- package/cjs/component/table/AbstractTable.js.map +1 -1
- package/cjs/component/table/useDelayedLoading.d.ts +4 -4
- package/cjs/component/table/useDelayedLoading.js +15 -6
- package/cjs/component/table/useDelayedLoading.js.map +1 -1
- package/esm/component/table/AbstractTable.d.ts +1 -0
- package/esm/component/table/AbstractTable.js +24 -6
- package/esm/component/table/AbstractTable.js.map +1 -1
- package/esm/component/table/useDelayedLoading.d.ts +4 -4
- package/esm/component/table/useDelayedLoading.js +15 -6
- package/esm/component/table/useDelayedLoading.js.map +1 -1
- package/package.json +1 -1
|
@@ -15,7 +15,7 @@ const PneTablePaginationActions_1 = tslib_1.__importDefault(require("./PneTableP
|
|
|
15
15
|
const react_i18next_1 = require("react-i18next");
|
|
16
16
|
const useDelayedLoading_1 = tslib_1.__importDefault(require("./useDelayedLoading"));
|
|
17
17
|
const AbstractTable = (props) => {
|
|
18
|
-
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, } = props;
|
|
18
|
+
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, skeletonRowHeight, } = props;
|
|
19
19
|
const { t } = (0, react_i18next_1.useTranslation)();
|
|
20
20
|
const showSkeleton = (0, useDelayedLoading_1.default)(loading);
|
|
21
21
|
const containerRef = (0, react_1.useRef)(null);
|
|
@@ -60,11 +60,29 @@ const AbstractTable = (props) => {
|
|
|
60
60
|
};
|
|
61
61
|
const skeletonRowCount = paginator?.rowsPerPage || 10;
|
|
62
62
|
const cellPadding = 16; // 8px top + 8px bottom
|
|
63
|
-
const
|
|
64
|
-
|
|
63
|
+
const cellBorderHeight = 2; // 1px top + 1px bottom from PneTableRow
|
|
64
|
+
const actualSkeletonRowHeight = lastRowHeightRef.current ?? skeletonRowHeight;
|
|
65
|
+
const skeletonRowSx = actualSkeletonRowHeight
|
|
66
|
+
? {
|
|
67
|
+
height: actualSkeletonRowHeight,
|
|
68
|
+
maxHeight: actualSkeletonRowHeight,
|
|
69
|
+
}
|
|
70
|
+
: undefined;
|
|
71
|
+
const skeletonCellSx = actualSkeletonRowHeight
|
|
72
|
+
? {
|
|
73
|
+
'&&': {
|
|
74
|
+
boxSizing: 'border-box',
|
|
75
|
+
height: actualSkeletonRowHeight,
|
|
76
|
+
maxHeight: actualSkeletonRowHeight,
|
|
77
|
+
overflow: 'hidden',
|
|
78
|
+
},
|
|
79
|
+
}
|
|
80
|
+
: undefined;
|
|
81
|
+
const skeletonItemHeight = actualSkeletonRowHeight
|
|
82
|
+
? Math.max(16, actualSkeletonRowHeight - cellPadding - cellBorderHeight)
|
|
65
83
|
: undefined;
|
|
66
|
-
const skeletonTableHeight = showSkeleton &&
|
|
67
|
-
? lastHeaderHeightRef.current +
|
|
84
|
+
const skeletonTableHeight = showSkeleton && actualSkeletonRowHeight && lastHeaderHeightRef.current > 0
|
|
85
|
+
? lastHeaderHeightRef.current + actualSkeletonRowHeight * skeletonRowCount
|
|
68
86
|
: undefined;
|
|
69
87
|
const SKELETON_COL_HIDDEN = 30;
|
|
70
88
|
const SKELETON_COL_NARROW = 120;
|
|
@@ -86,7 +104,7 @@ const AbstractTable = (props) => {
|
|
|
86
104
|
react_1.default.createElement(TableHead_1.default, null, createTableHeader({
|
|
87
105
|
sortOptions: sortOptions
|
|
88
106
|
})),
|
|
89
|
-
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}
|
|
107
|
+
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, sx: skeletonRowSx }, Array.from({ length: columnCount }).map((_, colIndex) => (react_1.default.createElement(PneTableCell_1.default, { key: `skeleton-${rowIndex}-${colIndex}`, sx: skeletonCellSx }, skeletonCellContent(rowIndex, colIndex)))))))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
90
108
|
visibleRows.map(createRow),
|
|
91
109
|
visibleRows.length === 0 && showNothingIsFoundRow && (react_1.default.createElement(PneTableRow_1.default, { hover: false },
|
|
92
110
|
react_1.default.createElement(PneTableCell_1.default, { colSpan: columnCount }, noRowsMessage || t('advancedSearch.noRows')))),
|
|
@@ -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;AAC7C,oFAAoD;
|
|
1
|
+
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Хук
|
|
2
|
+
* Хук стабилизации отображения состояния загрузки.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Initial loading показывается сразу, чтобы таблица не рендерила пустую высоту до первого
|
|
5
|
+
* skeleton. Последующие loading-состояния остаются отложенными, чтобы избежать мерцания
|
|
6
|
+
* при быстрых refetch.
|
|
7
7
|
*/
|
|
8
8
|
declare const useDelayedLoading: (loading: boolean) => boolean;
|
|
9
9
|
export default useDelayedLoading;
|
|
@@ -4,23 +4,32 @@ const react_1 = require("react");
|
|
|
4
4
|
const DELAY_BEFORE_SHOWING = 300;
|
|
5
5
|
const MIN_DISPLAY_DURATION = 500;
|
|
6
6
|
/**
|
|
7
|
-
* Хук
|
|
7
|
+
* Хук стабилизации отображения состояния загрузки.
|
|
8
8
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
9
|
+
* Initial loading показывается сразу, чтобы таблица не рендерила пустую высоту до первого
|
|
10
|
+
* skeleton. Последующие loading-состояния остаются отложенными, чтобы избежать мерцания
|
|
11
|
+
* при быстрых refetch.
|
|
12
12
|
*/
|
|
13
13
|
const useDelayedLoading = (loading) => {
|
|
14
|
-
const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(
|
|
15
|
-
const
|
|
14
|
+
const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(loading);
|
|
15
|
+
const isInitialLoadingRef = (0, react_1.useRef)(loading);
|
|
16
|
+
const initialLoadingHandledRef = (0, react_1.useRef)(false);
|
|
17
|
+
const skeletonShownAt = (0, react_1.useRef)(loading ? Date.now() : null);
|
|
16
18
|
(0, react_1.useEffect)(() => {
|
|
17
19
|
if (loading) {
|
|
20
|
+
if (isInitialLoadingRef.current && !initialLoadingHandledRef.current) {
|
|
21
|
+
initialLoadingHandledRef.current = true;
|
|
22
|
+
setShowSkeleton(true);
|
|
23
|
+
skeletonShownAt.current = skeletonShownAt.current ?? Date.now();
|
|
24
|
+
return undefined;
|
|
25
|
+
}
|
|
18
26
|
const timer = setTimeout(() => {
|
|
19
27
|
setShowSkeleton(true);
|
|
20
28
|
skeletonShownAt.current = Date.now();
|
|
21
29
|
}, DELAY_BEFORE_SHOWING);
|
|
22
30
|
return () => clearTimeout(timer);
|
|
23
31
|
}
|
|
32
|
+
initialLoadingHandledRef.current = true;
|
|
24
33
|
if (skeletonShownAt.current) {
|
|
25
34
|
const elapsed = Date.now() - skeletonShownAt.current;
|
|
26
35
|
if (elapsed < MIN_DISPLAY_DURATION) {
|
|
@@ -1 +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;
|
|
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,OAAO,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,wBAAwB,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,IAAA,cAAM,EAAgB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE3E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,IAAI,mBAAmB,CAAC,OAAO,IAAI,CAAC,wBAAwB,CAAC,OAAO,EAAE,CAAC;gBACnE,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACxC,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,eAAe,CAAC,OAAO,GAAG,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBAChE,OAAO,SAAS,CAAC;YACrB,CAAC;YAED,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;YAEzB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;QAExC,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"}
|
|
@@ -12,7 +12,7 @@ import PneTablePaginationActions from './PneTablePaginationActions';
|
|
|
12
12
|
import { useTranslation } from "react-i18next";
|
|
13
13
|
import useDelayedLoading from "./useDelayedLoading";
|
|
14
14
|
const AbstractTable = (props) => {
|
|
15
|
-
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, } = props;
|
|
15
|
+
const { data, createTableHeader, sortOptions, createRow, lastRow = null, paginator, loading = false, stickyHeader = false, showNothingIsFoundRow = true, tableSx = {}, boxSx = {}, noRowsMessage, skeletonRowHeight, } = props;
|
|
16
16
|
const { t } = useTranslation();
|
|
17
17
|
const showSkeleton = useDelayedLoading(loading);
|
|
18
18
|
const containerRef = useRef(null);
|
|
@@ -57,11 +57,29 @@ const AbstractTable = (props) => {
|
|
|
57
57
|
};
|
|
58
58
|
const skeletonRowCount = paginator?.rowsPerPage || 10;
|
|
59
59
|
const cellPadding = 16; // 8px top + 8px bottom
|
|
60
|
-
const
|
|
61
|
-
|
|
60
|
+
const cellBorderHeight = 2; // 1px top + 1px bottom from PneTableRow
|
|
61
|
+
const actualSkeletonRowHeight = lastRowHeightRef.current ?? skeletonRowHeight;
|
|
62
|
+
const skeletonRowSx = actualSkeletonRowHeight
|
|
63
|
+
? {
|
|
64
|
+
height: actualSkeletonRowHeight,
|
|
65
|
+
maxHeight: actualSkeletonRowHeight,
|
|
66
|
+
}
|
|
67
|
+
: undefined;
|
|
68
|
+
const skeletonCellSx = actualSkeletonRowHeight
|
|
69
|
+
? {
|
|
70
|
+
'&&': {
|
|
71
|
+
boxSizing: 'border-box',
|
|
72
|
+
height: actualSkeletonRowHeight,
|
|
73
|
+
maxHeight: actualSkeletonRowHeight,
|
|
74
|
+
overflow: 'hidden',
|
|
75
|
+
},
|
|
76
|
+
}
|
|
77
|
+
: undefined;
|
|
78
|
+
const skeletonItemHeight = actualSkeletonRowHeight
|
|
79
|
+
? Math.max(16, actualSkeletonRowHeight - cellPadding - cellBorderHeight)
|
|
62
80
|
: undefined;
|
|
63
|
-
const skeletonTableHeight = showSkeleton &&
|
|
64
|
-
? lastHeaderHeightRef.current +
|
|
81
|
+
const skeletonTableHeight = showSkeleton && actualSkeletonRowHeight && lastHeaderHeightRef.current > 0
|
|
82
|
+
? lastHeaderHeightRef.current + actualSkeletonRowHeight * skeletonRowCount
|
|
65
83
|
: undefined;
|
|
66
84
|
const SKELETON_COL_HIDDEN = 30;
|
|
67
85
|
const SKELETON_COL_NARROW = 120;
|
|
@@ -83,7 +101,7 @@ const AbstractTable = (props) => {
|
|
|
83
101
|
React.createElement(TableHead, null, createTableHeader({
|
|
84
102
|
sortOptions: sortOptions
|
|
85
103
|
})),
|
|
86
|
-
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}
|
|
104
|
+
React.createElement(TableBody, null, showSkeleton ? (Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (React.createElement(PneTableRow, { key: `skeleton-${rowIndex}`, hover: false, sx: skeletonRowSx }, Array.from({ length: columnCount }).map((_, colIndex) => (React.createElement(PneTableCell, { key: `skeleton-${rowIndex}-${colIndex}`, sx: skeletonCellSx }, skeletonCellContent(rowIndex, colIndex)))))))) : (React.createElement(React.Fragment, null,
|
|
87
105
|
visibleRows.map(createRow),
|
|
88
106
|
visibleRows.length === 0 && showNothingIsFoundRow && (React.createElement(PneTableRow, { hover: false },
|
|
89
107
|
React.createElement(PneTableCell, { colSpan: columnCount }, noRowsMessage || t('advancedSearch.noRows')))),
|
|
@@ -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;AAC7C,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"AbstractTable.js","sourceRoot":"","sources":["../../../src/component/table/AbstractTable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Хук
|
|
2
|
+
* Хук стабилизации отображения состояния загрузки.
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* Initial loading показывается сразу, чтобы таблица не рендерила пустую высоту до первого
|
|
5
|
+
* skeleton. Последующие loading-состояния остаются отложенными, чтобы избежать мерцания
|
|
6
|
+
* при быстрых refetch.
|
|
7
7
|
*/
|
|
8
8
|
declare const useDelayedLoading: (loading: boolean) => boolean;
|
|
9
9
|
export default useDelayedLoading;
|
|
@@ -2,23 +2,32 @@ import { useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
const DELAY_BEFORE_SHOWING = 300;
|
|
3
3
|
const MIN_DISPLAY_DURATION = 500;
|
|
4
4
|
/**
|
|
5
|
-
* Хук
|
|
5
|
+
* Хук стабилизации отображения состояния загрузки.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
7
|
+
* Initial loading показывается сразу, чтобы таблица не рендерила пустую высоту до первого
|
|
8
|
+
* skeleton. Последующие loading-состояния остаются отложенными, чтобы избежать мерцания
|
|
9
|
+
* при быстрых refetch.
|
|
10
10
|
*/
|
|
11
11
|
const useDelayedLoading = (loading) => {
|
|
12
|
-
const [showSkeleton, setShowSkeleton] = useState(
|
|
13
|
-
const
|
|
12
|
+
const [showSkeleton, setShowSkeleton] = useState(loading);
|
|
13
|
+
const isInitialLoadingRef = useRef(loading);
|
|
14
|
+
const initialLoadingHandledRef = useRef(false);
|
|
15
|
+
const skeletonShownAt = useRef(loading ? Date.now() : null);
|
|
14
16
|
useEffect(() => {
|
|
15
17
|
if (loading) {
|
|
18
|
+
if (isInitialLoadingRef.current && !initialLoadingHandledRef.current) {
|
|
19
|
+
initialLoadingHandledRef.current = true;
|
|
20
|
+
setShowSkeleton(true);
|
|
21
|
+
skeletonShownAt.current = skeletonShownAt.current ?? Date.now();
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
16
24
|
const timer = setTimeout(() => {
|
|
17
25
|
setShowSkeleton(true);
|
|
18
26
|
skeletonShownAt.current = Date.now();
|
|
19
27
|
}, DELAY_BEFORE_SHOWING);
|
|
20
28
|
return () => clearTimeout(timer);
|
|
21
29
|
}
|
|
30
|
+
initialLoadingHandledRef.current = true;
|
|
22
31
|
if (skeletonShownAt.current) {
|
|
23
32
|
const elapsed = Date.now() - skeletonShownAt.current;
|
|
24
33
|
if (elapsed < MIN_DISPLAY_DURATION) {
|
|
@@ -1 +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;
|
|
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,OAAO,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,MAAM,CAAgB,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE3E,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,EAAE,CAAC;YACV,IAAI,mBAAmB,CAAC,OAAO,IAAI,CAAC,wBAAwB,CAAC,OAAO,EAAE,CAAC;gBACnE,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACxC,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,eAAe,CAAC,OAAO,GAAG,eAAe,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;gBAChE,OAAO,SAAS,CAAC;YACrB,CAAC;YAED,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;YAEzB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QAED,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;QAExC,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"}
|