@cerberus-design/data-grid 0.25.3 → 1.0.0-rc.5
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/dist/column-helpers.cjs +55 -21
- package/dist/column-helpers.js +55 -17
- package/dist/components/cerby-data-grid.client.cjs +12 -11
- package/dist/components/cerby-data-grid.client.js +12 -7
- package/dist/components/count-menu.client.cjs +46 -49
- package/dist/components/count-menu.client.js +46 -45
- package/dist/components/data-grid.client.cjs +89 -82
- package/dist/components/data-grid.client.js +89 -78
- package/dist/components/features.client.cjs +72 -76
- package/dist/components/features.client.js +72 -72
- package/dist/components/grid.client.cjs +280 -309
- package/dist/components/grid.client.js +281 -303
- package/dist/components/pagination.client.cjs +90 -113
- package/dist/components/pagination.client.js +90 -109
- package/dist/components/pinned-items.client.cjs +60 -59
- package/dist/components/pinned-items.client.js +60 -55
- package/dist/components/sort-items.client.cjs +44 -49
- package/dist/components/sort-items.client.js +44 -45
- package/dist/const.cjs +32 -43
- package/dist/const.js +33 -31
- package/dist/context.client.cjs +12 -12
- package/dist/context.client.js +12 -8
- package/dist/hooks.client.cjs +13 -20
- package/dist/hooks.client.js +13 -16
- package/dist/index.cjs +9 -15
- package/dist/index.js +5 -4
- package/dist/store.cjs +241 -284
- package/dist/store.js +241 -280
- package/dist/utils.cjs +23 -45
- package/dist/utils.js +23 -41
- package/dist/virtualizer.client.cjs +63 -53
- package/dist/virtualizer.client.js +63 -49
- package/package.json +29 -26
package/dist/utils.js
CHANGED
|
@@ -1,51 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
function determineRowHeight(rowSize =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const size = ROW_SIZES.results[rowSize];
|
|
11
|
-
return size;
|
|
12
|
-
}
|
|
13
|
-
console.error(
|
|
14
|
-
"Unknown row size provided to Data Grid. The rowSize prop requires a number to determine pixel-based value.",
|
|
15
|
-
rowSize
|
|
16
|
-
);
|
|
17
|
-
return 0;
|
|
1
|
+
"use client";
|
|
2
|
+
import { DEFAULT_PAGE_SIZES, ROW_SIZES } from "./const.js";
|
|
3
|
+
//#region src/utils.ts
|
|
4
|
+
function determineRowHeight(rowSize = "sm") {
|
|
5
|
+
const prebuiltSizes = ROW_SIZES.items;
|
|
6
|
+
if (typeof rowSize === "number") return rowSize;
|
|
7
|
+
if (prebuiltSizes.includes(rowSize)) return ROW_SIZES.results[rowSize];
|
|
8
|
+
console.error("Unknown row size provided to Data Grid. The rowSize prop requires a number to determine pixel-based value.", rowSize);
|
|
9
|
+
return 0;
|
|
18
10
|
}
|
|
19
11
|
function determinePageSize(options) {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
if (options.customRange?.length) {
|
|
25
|
-
return options.customRange[0];
|
|
26
|
-
}
|
|
27
|
-
return options.pageSize ?? SM_PAGE_SIZE;
|
|
12
|
+
if (!options) return 0;
|
|
13
|
+
if (typeof options === "boolean" && options === true) return 25;
|
|
14
|
+
if (options.customRange?.length) return options.customRange[0];
|
|
15
|
+
return options.pageSize ?? 25;
|
|
28
16
|
}
|
|
29
17
|
function determinePageIndex(options) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
return options.defaultPage ?? DEFAULT_PAGE_IDX;
|
|
18
|
+
if (!options) return 1;
|
|
19
|
+
if (typeof options === "boolean" && options === true) return 1;
|
|
20
|
+
return options.defaultPage ?? 1;
|
|
35
21
|
}
|
|
36
22
|
function determinePageRange(options) {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
return options.customRange ?? DEFAULT_PAGE_SIZES;
|
|
23
|
+
if (!options) return DEFAULT_PAGE_SIZES;
|
|
24
|
+
if (typeof options === "boolean" && options === true) return DEFAULT_PAGE_SIZES;
|
|
25
|
+
return options.customRange ?? DEFAULT_PAGE_SIZES;
|
|
42
26
|
}
|
|
43
27
|
function determineInitialCount(options) {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
return options?.count ?? void 0;
|
|
28
|
+
if (!options) return void 0;
|
|
29
|
+
if (typeof options === "boolean" && options === true) return;
|
|
30
|
+
return options?.count ?? void 0;
|
|
49
31
|
}
|
|
50
|
-
|
|
32
|
+
//#endregion
|
|
51
33
|
export { determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight };
|
|
@@ -1,56 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const signals = require('@cerberus-design/signals');
|
|
7
|
-
const react = require('react');
|
|
8
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
let _cerberus_design_signals = require("@cerberus-design/signals");
|
|
4
|
+
let react = require("react");
|
|
5
|
+
//#region src/virtualizer.client.ts
|
|
9
6
|
function useVirtualizer(store, viewportRef) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
7
|
+
const isServerPaginated = (0, _cerberus_design_signals.useRead)(store.isServerPaginated);
|
|
8
|
+
const rows = (0, _cerberus_design_signals.useRead)(store.visibleRows);
|
|
9
|
+
const rowHeight = (0, _cerberus_design_signals.useRead)(store.rowSize);
|
|
10
|
+
const [scrollTop, setScrollTop] = (0, _cerberus_design_signals.useSignal)(0);
|
|
11
|
+
const [containerHeight, setContainerHeight] = (0, _cerberus_design_signals.useSignal)(0);
|
|
12
|
+
(0, react.useEffect)(() => {
|
|
13
|
+
let rafId;
|
|
14
|
+
const el = viewportRef.current;
|
|
15
|
+
if (!el) return;
|
|
16
|
+
const onScroll = () => {
|
|
17
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
18
|
+
rafId = requestAnimationFrame(() => {
|
|
19
|
+
setScrollTop(el.scrollTop);
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
el.addEventListener("scroll", onScroll, { passive: true });
|
|
23
|
+
const observer = new ResizeObserver((entries) => {
|
|
24
|
+
for (const entry of entries) setContainerHeight(entry.contentRect.height);
|
|
25
|
+
});
|
|
26
|
+
observer.observe(el);
|
|
27
|
+
return () => {
|
|
28
|
+
el.removeEventListener("scroll", onScroll);
|
|
29
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
30
|
+
observer.disconnect();
|
|
31
|
+
};
|
|
32
|
+
}, [
|
|
33
|
+
viewportRef,
|
|
34
|
+
setScrollTop,
|
|
35
|
+
setContainerHeight
|
|
36
|
+
]);
|
|
37
|
+
return (0, react.useMemo)(() => {
|
|
38
|
+
if (isServerPaginated) return {
|
|
39
|
+
virtualRows: [],
|
|
40
|
+
totalHeight: 0,
|
|
41
|
+
rowHeight
|
|
42
|
+
};
|
|
43
|
+
const totalHeight = rows.length * rowHeight;
|
|
44
|
+
const buffer = 5;
|
|
45
|
+
const visibleCount = Math.ceil((containerHeight || 600) / rowHeight);
|
|
46
|
+
const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
|
|
47
|
+
const end = Math.min(rows.length, start + visibleCount + buffer * 2);
|
|
48
|
+
return {
|
|
49
|
+
virtualRows: rows.slice(start, end).map((row, index) => ({
|
|
50
|
+
data: row,
|
|
51
|
+
index: start + index,
|
|
52
|
+
offsetY: (start + index) * rowHeight
|
|
53
|
+
})),
|
|
54
|
+
totalHeight,
|
|
55
|
+
rowHeight
|
|
56
|
+
};
|
|
57
|
+
}, [
|
|
58
|
+
isServerPaginated,
|
|
59
|
+
rows,
|
|
60
|
+
rowHeight,
|
|
61
|
+
scrollTop,
|
|
62
|
+
containerHeight
|
|
63
|
+
]);
|
|
54
64
|
}
|
|
55
|
-
|
|
65
|
+
//#endregion
|
|
56
66
|
exports.useVirtualizer = useVirtualizer;
|
|
@@ -1,52 +1,66 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
import { useRead, useSignal } from "@cerberus-design/signals";
|
|
4
|
+
import { useEffect, useMemo } from "react";
|
|
5
|
+
//#region src/virtualizer.client.ts
|
|
5
6
|
function useVirtualizer(store, viewportRef) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
7
|
+
const isServerPaginated = useRead(store.isServerPaginated);
|
|
8
|
+
const rows = useRead(store.visibleRows);
|
|
9
|
+
const rowHeight = useRead(store.rowSize);
|
|
10
|
+
const [scrollTop, setScrollTop] = useSignal(0);
|
|
11
|
+
const [containerHeight, setContainerHeight] = useSignal(0);
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
let rafId;
|
|
14
|
+
const el = viewportRef.current;
|
|
15
|
+
if (!el) return;
|
|
16
|
+
const onScroll = () => {
|
|
17
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
18
|
+
rafId = requestAnimationFrame(() => {
|
|
19
|
+
setScrollTop(el.scrollTop);
|
|
20
|
+
});
|
|
21
|
+
};
|
|
22
|
+
el.addEventListener("scroll", onScroll, { passive: true });
|
|
23
|
+
const observer = new ResizeObserver((entries) => {
|
|
24
|
+
for (const entry of entries) setContainerHeight(entry.contentRect.height);
|
|
25
|
+
});
|
|
26
|
+
observer.observe(el);
|
|
27
|
+
return () => {
|
|
28
|
+
el.removeEventListener("scroll", onScroll);
|
|
29
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
30
|
+
observer.disconnect();
|
|
31
|
+
};
|
|
32
|
+
}, [
|
|
33
|
+
viewportRef,
|
|
34
|
+
setScrollTop,
|
|
35
|
+
setContainerHeight
|
|
36
|
+
]);
|
|
37
|
+
return useMemo(() => {
|
|
38
|
+
if (isServerPaginated) return {
|
|
39
|
+
virtualRows: [],
|
|
40
|
+
totalHeight: 0,
|
|
41
|
+
rowHeight
|
|
42
|
+
};
|
|
43
|
+
const totalHeight = rows.length * rowHeight;
|
|
44
|
+
const buffer = 5;
|
|
45
|
+
const visibleCount = Math.ceil((containerHeight || 600) / rowHeight);
|
|
46
|
+
const start = Math.max(0, Math.floor(scrollTop / rowHeight) - buffer);
|
|
47
|
+
const end = Math.min(rows.length, start + visibleCount + buffer * 2);
|
|
48
|
+
return {
|
|
49
|
+
virtualRows: rows.slice(start, end).map((row, index) => ({
|
|
50
|
+
data: row,
|
|
51
|
+
index: start + index,
|
|
52
|
+
offsetY: (start + index) * rowHeight
|
|
53
|
+
})),
|
|
54
|
+
totalHeight,
|
|
55
|
+
rowHeight
|
|
56
|
+
};
|
|
57
|
+
}, [
|
|
58
|
+
isServerPaginated,
|
|
59
|
+
rows,
|
|
60
|
+
rowHeight,
|
|
61
|
+
scrollTop,
|
|
62
|
+
containerHeight
|
|
63
|
+
]);
|
|
50
64
|
}
|
|
51
|
-
|
|
65
|
+
//#endregion
|
|
52
66
|
export { useVirtualizer };
|
package/package.json
CHANGED
|
@@ -1,19 +1,34 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cerberus-design/data-grid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0-rc.5",
|
|
4
4
|
"description": "The Cerberus Design React DataGrid component.",
|
|
5
|
-
"
|
|
6
|
-
|
|
5
|
+
"keywords": [
|
|
6
|
+
"data grid",
|
|
7
|
+
"data grid component",
|
|
8
|
+
"panda-css",
|
|
9
|
+
"react",
|
|
10
|
+
"react signals",
|
|
11
|
+
"react signals component"
|
|
12
|
+
],
|
|
13
|
+
"license": "ISC",
|
|
14
|
+
"author": "developers@omnifederal.com",
|
|
15
|
+
"repository": {
|
|
16
|
+
"url": "https://github.com/omnifed/cerberus"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"package.json"
|
|
21
|
+
],
|
|
7
22
|
"type": "module",
|
|
23
|
+
"sideEffects": false,
|
|
8
24
|
"main": "dist/index.cjs",
|
|
9
25
|
"module": "dist/index.js",
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"react-dom": "*"
|
|
26
|
+
"publishConfig": {
|
|
27
|
+
"access": "public"
|
|
13
28
|
},
|
|
14
29
|
"dependencies": {
|
|
15
|
-
"@cerberus-design/
|
|
16
|
-
"@cerberus-design/
|
|
30
|
+
"@cerberus-design/signals": "1.0.0-rc.5",
|
|
31
|
+
"@cerberus-design/react": "1.0.0-rc.5"
|
|
17
32
|
},
|
|
18
33
|
"devDependencies": {
|
|
19
34
|
"@types/react": "^19.2.14",
|
|
@@ -22,33 +37,20 @@
|
|
|
22
37
|
"globby": "^16.1.1",
|
|
23
38
|
"react": "^19.2.4",
|
|
24
39
|
"react-dom": "^19.2.4",
|
|
25
|
-
"vite": "^
|
|
40
|
+
"vite": "^8.0.0",
|
|
26
41
|
"vite-plugin-dts": "^4.5.4",
|
|
27
42
|
"styled-system": "0.0.0"
|
|
28
43
|
},
|
|
29
|
-
"
|
|
30
|
-
"
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"react": "*",
|
|
46
|
+
"react-dom": "*"
|
|
31
47
|
},
|
|
32
|
-
"
|
|
33
|
-
"dist",
|
|
34
|
-
"package.json"
|
|
35
|
-
],
|
|
36
|
-
"keywords": [
|
|
37
|
-
"panda-css",
|
|
38
|
-
"react",
|
|
39
|
-
"data grid",
|
|
40
|
-
"data grid component",
|
|
41
|
-
"react signals",
|
|
42
|
-
"react signals component"
|
|
43
|
-
],
|
|
44
|
-
"author": "developers@omnifederal.com",
|
|
45
|
-
"license": "ISC",
|
|
48
|
+
"browserslist": "> 0.25%, not dead",
|
|
46
49
|
"scripts": {
|
|
47
50
|
"build": "vite build",
|
|
48
51
|
"clean": "rm -rf ./dist",
|
|
49
52
|
"lint:ts": "tsc --project tsconfig.lint.json --noEmit"
|
|
50
53
|
},
|
|
51
|
-
"types": "dist/index.d.cts",
|
|
52
54
|
"exports": {
|
|
53
55
|
".": {
|
|
54
56
|
"import": {
|
|
@@ -62,6 +64,7 @@
|
|
|
62
64
|
},
|
|
63
65
|
"./package.json": "./package.json"
|
|
64
66
|
},
|
|
67
|
+
"types": "dist/index.d.cts",
|
|
65
68
|
"typesVersions": {
|
|
66
69
|
"*": {
|
|
67
70
|
".": [
|