@veeqo/ui 9.1.0 → 9.1.1
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.
|
@@ -1,37 +1,42 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var throttle = require('lodash.throttle');
|
|
5
4
|
var ResizeObserver = require('resize-observer-polyfill');
|
|
6
5
|
|
|
7
6
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
7
|
|
|
9
|
-
var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
|
|
10
8
|
var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
|
|
11
9
|
|
|
12
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
13
10
|
function useCellWidths(tableRef, containerRef) {
|
|
14
11
|
const [cellWidths, setCellWidths] = React.useState([]);
|
|
15
|
-
const updateCellWidths = () => {
|
|
12
|
+
const updateCellWidths = React.useCallback(() => {
|
|
16
13
|
if (!tableRef.current)
|
|
17
14
|
return;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
requestAnimationFrame(() => {
|
|
16
|
+
var _a;
|
|
17
|
+
const cells = (_a = tableRef.current) === null || _a === undefined ? undefined : _a.querySelectorAll('tbody tr:first-child td');
|
|
18
|
+
if (!cells)
|
|
19
|
+
return;
|
|
20
|
+
const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);
|
|
21
|
+
setCellWidths(widths);
|
|
22
|
+
});
|
|
23
|
+
}, [tableRef]);
|
|
22
24
|
React.useEffect(() => {
|
|
23
25
|
updateCellWidths();
|
|
24
|
-
}, [
|
|
25
|
-
// Update cell widths when container is resized.
|
|
26
|
+
}, [updateCellWidths]);
|
|
26
27
|
React.useEffect(() => {
|
|
27
28
|
if (!containerRef.current)
|
|
28
|
-
return;
|
|
29
|
-
const
|
|
30
|
-
|
|
29
|
+
return undefined;
|
|
30
|
+
const resizeObserver = new ResizeObserver__default.default((entries) => {
|
|
31
|
+
if (entries[0].contentRect) {
|
|
32
|
+
updateCellWidths();
|
|
33
|
+
}
|
|
34
|
+
});
|
|
31
35
|
resizeObserver.observe(containerRef.current);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
36
|
+
return () => {
|
|
37
|
+
resizeObserver.disconnect();
|
|
38
|
+
};
|
|
39
|
+
}, [containerRef, updateCellWidths]);
|
|
35
40
|
return cellWidths;
|
|
36
41
|
}
|
|
37
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCellWidths.cjs","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"useCellWidths.cjs","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":["import { RefObject, useEffect, useState, useCallback } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nexport function useCellWidths(\n tableRef: RefObject<HTMLElement>,\n containerRef: RefObject<HTMLElement>,\n) {\n const [cellWidths, setCellWidths] = useState<number[]>([]);\n\n const updateCellWidths = useCallback(() => {\n if (!tableRef.current) return;\n\n requestAnimationFrame(() => {\n const cells = tableRef.current?.querySelectorAll('tbody tr:first-child td');\n if (!cells) return;\n\n const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\n setCellWidths(widths);\n });\n }, [tableRef]);\n\n useEffect(() => {\n updateCellWidths();\n }, [updateCellWidths]);\n\n useEffect(() => {\n if (!containerRef.current) return undefined;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0].contentRect) {\n updateCellWidths();\n }\n });\n\n resizeObserver.observe(containerRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [containerRef, updateCellWidths]);\n\n return cellWidths;\n}\n"],"names":["useState","useCallback","useEffect","ResizeObserver"],"mappings":";;;;;;;;;AAGgB,SAAA,aAAa,CAC3B,QAAgC,EAChC,YAAoC,EAAA;IAEpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAW,EAAE,CAAC;AAE1D,IAAA,MAAM,gBAAgB,GAAGC,iBAAW,CAAC,MAAK;QACxC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE;QAEvB,qBAAqB,CAAC,MAAK;;YACzB,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB,CAAC,yBAAyB,CAAC;AAC3E,YAAA,IAAI,CAAC,KAAK;gBAAE;YAEZ,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAClF,aAAa,CAAC,MAAM,CAAC;AACvB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdC,eAAS,CAAC,MAAK;AACb,QAAA,gBAAgB,EAAE;AACpB,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtBA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;QAE3C,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,CAAC,OAAO,KAAI;AACpD,YAAA,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAC1B,gBAAA,gBAAgB,EAAE;AACnB;AACH,SAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAE5C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,SAAC;AACH,KAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAEpC,IAAA,OAAO,UAAU;AACnB;;;;"}
|
|
@@ -1,30 +1,36 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
import throttle from 'lodash.throttle';
|
|
1
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
3
2
|
import ResizeObserver from 'resize-observer-polyfill';
|
|
4
3
|
|
|
5
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
6
4
|
function useCellWidths(tableRef, containerRef) {
|
|
7
5
|
const [cellWidths, setCellWidths] = useState([]);
|
|
8
|
-
const updateCellWidths = () => {
|
|
6
|
+
const updateCellWidths = useCallback(() => {
|
|
9
7
|
if (!tableRef.current)
|
|
10
8
|
return;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
9
|
+
requestAnimationFrame(() => {
|
|
10
|
+
var _a;
|
|
11
|
+
const cells = (_a = tableRef.current) === null || _a === undefined ? undefined : _a.querySelectorAll('tbody tr:first-child td');
|
|
12
|
+
if (!cells)
|
|
13
|
+
return;
|
|
14
|
+
const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);
|
|
15
|
+
setCellWidths(widths);
|
|
16
|
+
});
|
|
17
|
+
}, [tableRef]);
|
|
15
18
|
useEffect(() => {
|
|
16
19
|
updateCellWidths();
|
|
17
|
-
}, [
|
|
18
|
-
// Update cell widths when container is resized.
|
|
20
|
+
}, [updateCellWidths]);
|
|
19
21
|
useEffect(() => {
|
|
20
22
|
if (!containerRef.current)
|
|
21
|
-
return;
|
|
22
|
-
const
|
|
23
|
-
|
|
23
|
+
return undefined;
|
|
24
|
+
const resizeObserver = new ResizeObserver((entries) => {
|
|
25
|
+
if (entries[0].contentRect) {
|
|
26
|
+
updateCellWidths();
|
|
27
|
+
}
|
|
28
|
+
});
|
|
24
29
|
resizeObserver.observe(containerRef.current);
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
return () => {
|
|
31
|
+
resizeObserver.disconnect();
|
|
32
|
+
};
|
|
33
|
+
}, [containerRef, updateCellWidths]);
|
|
28
34
|
return cellWidths;
|
|
29
35
|
}
|
|
30
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCellWidths.js","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"useCellWidths.js","sources":["../../../../src/components/DataTable/hooks/useCellWidths.ts"],"sourcesContent":["import { RefObject, useEffect, useState, useCallback } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nexport function useCellWidths(\n tableRef: RefObject<HTMLElement>,\n containerRef: RefObject<HTMLElement>,\n) {\n const [cellWidths, setCellWidths] = useState<number[]>([]);\n\n const updateCellWidths = useCallback(() => {\n if (!tableRef.current) return;\n\n requestAnimationFrame(() => {\n const cells = tableRef.current?.querySelectorAll('tbody tr:first-child td');\n if (!cells) return;\n\n const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\n setCellWidths(widths);\n });\n }, [tableRef]);\n\n useEffect(() => {\n updateCellWidths();\n }, [updateCellWidths]);\n\n useEffect(() => {\n if (!containerRef.current) return undefined;\n\n const resizeObserver = new ResizeObserver((entries) => {\n if (entries[0].contentRect) {\n updateCellWidths();\n }\n });\n\n resizeObserver.observe(containerRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [containerRef, updateCellWidths]);\n\n return cellWidths;\n}\n"],"names":[],"mappings":";;;AAGgB,SAAA,aAAa,CAC3B,QAAgC,EAChC,YAAoC,EAAA;IAEpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC;AAE1D,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;QACxC,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE;QAEvB,qBAAqB,CAAC,MAAK;;YACzB,MAAM,KAAK,GAAG,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,gBAAgB,CAAC,yBAAyB,CAAC;AAC3E,YAAA,IAAI,CAAC,KAAK;gBAAE;YAEZ,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;YAClF,aAAa,CAAC,MAAM,CAAC;AACvB,SAAC,CAAC;AACJ,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACb,QAAA,gBAAgB,EAAE;AACpB,KAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IAEtB,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;AAAE,YAAA,OAAO,SAAS;QAE3C,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AACpD,YAAA,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;AAC1B,gBAAA,gBAAgB,EAAE;AACnB;AACH,SAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAE5C,QAAA,OAAO,MAAK;YACV,cAAc,CAAC,UAAU,EAAE;AAC7B,SAAC;AACH,KAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;AAEpC,IAAA,OAAO,UAAU;AACnB;;;;"}
|