@veeqo/ui 13.13.3 → 13.15.0
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/components/DataGrid/DataGrid.module.scss.cjs +2 -2
- package/dist/components/DataGrid/DataGrid.module.scss.cjs.map +1 -1
- package/dist/components/DataGrid/DataGrid.module.scss.js +2 -2
- package/dist/components/DataGrid/DataGrid.module.scss.js.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs +2 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs.map +1 -1
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js +2 -2
- package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js.map +1 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs +2 -2
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map +1 -1
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js +2 -2
- package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.d.ts +5 -15
- package/dist/components/DataGrid/components/GridContainer/Container/Container.js +1 -1
- package/dist/components/DataGrid/components/GridContainer/Container/Container.js.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs +12 -2
- package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map +1 -1
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js +12 -2
- package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs +2 -2
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs.map +1 -1
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js +2 -2
- package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js.map +1 -1
- package/dist/components/DataTable/DataTable.cjs +5 -5
- package/dist/components/DataTable/DataTable.cjs.map +1 -1
- package/dist/components/DataTable/DataTable.js +5 -5
- package/dist/components/DataTable/DataTable.js.map +1 -1
- package/dist/components/DataTable/hooks/index.d.ts +0 -1
- package/dist/components/DataTable/index.d.ts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/hoc/index.d.ts +1 -0
- package/dist/hoc/withClassNames/index.d.ts +1 -0
- package/dist/hoc/withClassNames/withClassNames.cjs +46 -0
- package/dist/hoc/withClassNames/withClassNames.cjs.map +1 -0
- package/dist/hoc/withClassNames/withClassNames.d.ts +25 -0
- package/dist/hoc/withClassNames/withClassNames.js +40 -0
- package/dist/hoc/withClassNames/withClassNames.js.map +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useScrollPosition/constants.cjs +9 -0
- package/dist/hooks/useScrollPosition/constants.cjs.map +1 -0
- package/dist/hooks/useScrollPosition/constants.d.ts +2 -0
- package/dist/hooks/useScrollPosition/constants.js +6 -0
- package/dist/hooks/useScrollPosition/constants.js.map +1 -0
- package/dist/hooks/useScrollPosition/index.d.ts +3 -0
- package/dist/hooks/useScrollPosition/types.d.ts +8 -0
- package/dist/hooks/useScrollPosition/useScrollPosition.cjs +40 -0
- package/dist/hooks/useScrollPosition/useScrollPosition.cjs.map +1 -0
- package/dist/hooks/useScrollPosition/useScrollPosition.d.ts +9 -0
- package/dist/hooks/useScrollPosition/useScrollPosition.js +34 -0
- package/dist/hooks/useScrollPosition/useScrollPosition.js.map +1 -0
- package/dist/hooks/useScrollPosition/utils.cjs +18 -0
- package/dist/hooks/useScrollPosition/utils.cjs.map +1 -0
- package/dist/hooks/useScrollPosition/utils.d.ts +2 -0
- package/dist/hooks/useScrollPosition/utils.js +16 -0
- package/dist/hooks/useScrollPosition/utils.js.map +1 -0
- package/dist/index.cjs +4 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/DataTable/hooks/useScrollPosition.cjs +0 -53
- package/dist/components/DataTable/hooks/useScrollPosition.cjs.map +0 -1
- package/dist/components/DataTable/hooks/useScrollPosition.d.ts +0 -6
- package/dist/components/DataTable/hooks/useScrollPosition.js +0 -46
- package/dist/components/DataTable/hooks/useScrollPosition.js.map +0 -1
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { SCROLL_EDGE_TOLERANCE } from './constants.js';
|
|
2
|
+
|
|
3
|
+
const getScrollPosition = ({ container }) => {
|
|
4
|
+
const { width } = container.getBoundingClientRect();
|
|
5
|
+
const { scrollLeft, scrollWidth } = container;
|
|
6
|
+
if (scrollWidth <= width)
|
|
7
|
+
return 'none';
|
|
8
|
+
if (scrollLeft === 0)
|
|
9
|
+
return 'start';
|
|
10
|
+
if (scrollLeft + width >= scrollWidth - SCROLL_EDGE_TOLERANCE)
|
|
11
|
+
return 'end';
|
|
12
|
+
return 'middle';
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { getScrollPosition };
|
|
16
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../src/hooks/useScrollPosition/utils.ts"],"sourcesContent":["import { SCROLL_EDGE_TOLERANCE } from './constants';\nimport { GetScrollPositionProps, ScrollPosition } from './types';\n\nexport const getScrollPosition = ({ container }: GetScrollPositionProps): ScrollPosition => {\n const { width } = container.getBoundingClientRect();\n const { scrollLeft, scrollWidth } = container;\n\n if (scrollWidth <= width) return 'none';\n if (scrollLeft === 0) return 'start';\n if (scrollLeft + width >= scrollWidth - SCROLL_EDGE_TOLERANCE) return 'end';\n return 'middle';\n};\n"],"names":[],"mappings":";;MAGa,iBAAiB,GAAG,CAAC,EAAE,SAAS,EAA0B,KAAoB;IACzF,MAAM,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE;AACnD,IAAA,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,SAAS;IAE7C,IAAI,WAAW,IAAI,KAAK;AAAE,QAAA,OAAO,MAAM;IACvC,IAAI,UAAU,KAAK,CAAC;AAAE,QAAA,OAAO,OAAO;AACpC,IAAA,IAAI,UAAU,GAAG,KAAK,IAAI,WAAW,GAAG,qBAAqB;AAAE,QAAA,OAAO,KAAK;AAC3E,IAAA,OAAO,QAAQ;AACjB;;;;"}
|
package/dist/index.cjs
CHANGED
|
@@ -32,7 +32,6 @@ var DataTable = require('./components/DataTable/DataTable.cjs');
|
|
|
32
32
|
var useCellWidths = require('./components/DataTable/hooks/useCellWidths.cjs');
|
|
33
33
|
var useColumns = require('./components/DataTable/hooks/useColumns.cjs');
|
|
34
34
|
var useNested = require('./components/DataTable/hooks/useNested.cjs');
|
|
35
|
-
var useScrollPosition = require('./components/DataTable/hooks/useScrollPosition.cjs');
|
|
36
35
|
var useSelection = require('./components/DataTable/hooks/useSelection.cjs');
|
|
37
36
|
var DescriptionList = require('./components/DescriptionList/DescriptionList.cjs');
|
|
38
37
|
var DetailPage = require('./components/DetailPage/DetailPage.cjs');
|
|
@@ -103,8 +102,10 @@ var useId = require('./hooks/useId.cjs');
|
|
|
103
102
|
var useDragToScroll = require('./hooks/useDragToScroll.cjs');
|
|
104
103
|
var useResizeObserver = require('./hooks/useResizeObserver.cjs');
|
|
105
104
|
var useIntersectionObserver = require('./hooks/useIntersectionObserver.cjs');
|
|
105
|
+
var useScrollPosition = require('./hooks/useScrollPosition/useScrollPosition.cjs');
|
|
106
106
|
var withLabels = require('./hoc/withLabels/withLabels.cjs');
|
|
107
107
|
var withDeprecated = require('./hoc/withDeprecated.cjs');
|
|
108
|
+
var withClassNames = require('./hoc/withClassNames/withClassNames.cjs');
|
|
108
109
|
var buildClassnames = require('./utils/buildClassnames.cjs');
|
|
109
110
|
var color = require('./utils/color.cjs');
|
|
110
111
|
var generateId = require('./utils/generateId.cjs');
|
|
@@ -382,7 +383,6 @@ exports.DataTable = DataTable.DataTable;
|
|
|
382
383
|
exports.useCellWidths = useCellWidths.useCellWidths;
|
|
383
384
|
exports.useColumns = useColumns.useColumns;
|
|
384
385
|
exports.useNested = useNested.useNested;
|
|
385
|
-
exports.useScrollPosition = useScrollPosition.useScrollPosition;
|
|
386
386
|
exports.useSelection = useSelection.useSelection;
|
|
387
387
|
exports.DescriptionList = DescriptionList.DescriptionList;
|
|
388
388
|
exports.DetailPage = DetailPage.DetailPage;
|
|
@@ -461,8 +461,10 @@ exports.useId = useId.useId;
|
|
|
461
461
|
exports.useDragToScroll = useDragToScroll.useDragToScroll;
|
|
462
462
|
exports.useResizeObserver = useResizeObserver.useResizeObserver;
|
|
463
463
|
exports.useIntersectionObserver = useIntersectionObserver.useIntersectionObserver;
|
|
464
|
+
exports.useScrollPosition = useScrollPosition.useScrollPosition;
|
|
464
465
|
exports.withLabels = withLabels.withLabels;
|
|
465
466
|
exports.withDeprecated = withDeprecated.withDeprecated;
|
|
467
|
+
exports.withClassNames = withClassNames.withClassNames;
|
|
466
468
|
exports.buildClassnames = buildClassnames.buildClassnames;
|
|
467
469
|
exports.getOpaqueHexColor = color.getOpaqueHexColor;
|
|
468
470
|
exports.hexToRgb = color.hexToRgb;
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -30,7 +30,6 @@ export { DataTable } from './components/DataTable/DataTable.js';
|
|
|
30
30
|
export { useCellWidths } from './components/DataTable/hooks/useCellWidths.js';
|
|
31
31
|
export { useColumns } from './components/DataTable/hooks/useColumns.js';
|
|
32
32
|
export { useNested } from './components/DataTable/hooks/useNested.js';
|
|
33
|
-
export { useScrollPosition } from './components/DataTable/hooks/useScrollPosition.js';
|
|
34
33
|
export { useSelection } from './components/DataTable/hooks/useSelection.js';
|
|
35
34
|
export { DescriptionList } from './components/DescriptionList/DescriptionList.js';
|
|
36
35
|
export { DetailPage } from './components/DetailPage/DetailPage.js';
|
|
@@ -101,8 +100,10 @@ export { useId } from './hooks/useId.js';
|
|
|
101
100
|
export { useDragToScroll } from './hooks/useDragToScroll.js';
|
|
102
101
|
export { useResizeObserver } from './hooks/useResizeObserver.js';
|
|
103
102
|
export { useIntersectionObserver } from './hooks/useIntersectionObserver.js';
|
|
103
|
+
export { useScrollPosition } from './hooks/useScrollPosition/useScrollPosition.js';
|
|
104
104
|
export { withLabels } from './hoc/withLabels/withLabels.js';
|
|
105
105
|
export { withDeprecated } from './hoc/withDeprecated.js';
|
|
106
|
+
export { withClassNames } from './hoc/withClassNames/withClassNames.js';
|
|
106
107
|
export { buildClassnames } from './utils/buildClassnames.js';
|
|
107
108
|
export { getOpaqueHexColor, hexToRgb } from './utils/color.js';
|
|
108
109
|
export { generateId } from './utils/generateId.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var ResizeObserver = require('resize-observer-polyfill');
|
|
5
|
-
var throttle = require('lodash.throttle');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var ResizeObserver__default = /*#__PURE__*/_interopDefaultCompat(ResizeObserver);
|
|
10
|
-
var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
|
|
11
|
-
|
|
12
|
-
/* eslint-disable consistent-return */
|
|
13
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
14
|
-
function useScrollPosition(containerRef) {
|
|
15
|
-
const [scrollPosition, setScrollPosition] = React.useState('start');
|
|
16
|
-
const updateScrollPosition = () => {
|
|
17
|
-
if (!containerRef.current)
|
|
18
|
-
return;
|
|
19
|
-
const { width } = containerRef.current.getBoundingClientRect();
|
|
20
|
-
const { scrollLeft, scrollWidth } = containerRef.current;
|
|
21
|
-
if (scrollWidth < width) {
|
|
22
|
-
setScrollPosition('none');
|
|
23
|
-
return;
|
|
24
|
-
}
|
|
25
|
-
if (scrollLeft === 0) {
|
|
26
|
-
setScrollPosition('start');
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (scrollLeft + width >= scrollWidth) {
|
|
30
|
-
setScrollPosition('end');
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
setScrollPosition('middle');
|
|
34
|
-
};
|
|
35
|
-
React.useEffect(() => {
|
|
36
|
-
if (!containerRef.current)
|
|
37
|
-
return;
|
|
38
|
-
containerRef.current.addEventListener('scroll', updateScrollPosition);
|
|
39
|
-
return () => { var _a; return (_a = containerRef.current) === null || _a === undefined ? undefined : _a.removeEventListener('scroll', updateScrollPosition); };
|
|
40
|
-
}, [containerRef.current]);
|
|
41
|
-
React.useEffect(() => {
|
|
42
|
-
if (!containerRef.current)
|
|
43
|
-
return;
|
|
44
|
-
const resizeObserverCallback = throttle__default.default(updateScrollPosition, 50);
|
|
45
|
-
const resizeObserver = new ResizeObserver__default.default(resizeObserverCallback);
|
|
46
|
-
resizeObserver.observe(containerRef.current);
|
|
47
|
-
return () => resizeObserver.disconnect();
|
|
48
|
-
}, [containerRef.current]);
|
|
49
|
-
return { scrollPosition, containerRef };
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
exports.useScrollPosition = useScrollPosition;
|
|
53
|
-
//# sourceMappingURL=useScrollPosition.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollPosition.cjs","sources":["../../../../src/components/DataTable/hooks/useScrollPosition.ts"],"sourcesContent":["/* eslint-disable consistent-return */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport { RefObject, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport throttle from 'lodash.throttle';\nimport { ScrollPosition } from '../types';\n\nexport function useScrollPosition(containerRef: RefObject<HTMLElement>) {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>('start');\n\n const updateScrollPosition = () => {\n if (!containerRef.current) return;\n const { width } = containerRef.current.getBoundingClientRect();\n const { scrollLeft, scrollWidth } = containerRef.current;\n if (scrollWidth < width) {\n setScrollPosition('none');\n return;\n }\n if (scrollLeft === 0) {\n setScrollPosition('start');\n return;\n }\n if (scrollLeft + width >= scrollWidth) {\n setScrollPosition('end');\n return;\n }\n setScrollPosition('middle');\n };\n\n useEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.addEventListener('scroll', updateScrollPosition);\n return () => containerRef.current?.removeEventListener('scroll', updateScrollPosition);\n }, [containerRef.current]);\n\n useEffect(() => {\n if (!containerRef.current) return;\n const resizeObserverCallback = throttle(updateScrollPosition, 50);\n const resizeObserver = new ResizeObserver(resizeObserverCallback);\n resizeObserver.observe(containerRef.current);\n return () => resizeObserver.disconnect();\n }, [containerRef.current]);\n\n return { scrollPosition, containerRef };\n}\n"],"names":["useState","useEffect","throttle","ResizeObserver"],"mappings":";;;;;;;;;;;AAAA;AACA;AAMM,SAAU,iBAAiB,CAAC,YAAoC,EAAA;IACpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAiB,OAAO,CAAC;IAE7E,MAAM,oBAAoB,GAAG,MAAK;QAChC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE;QAC9D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC,OAAO;QACxD,IAAI,WAAW,GAAG,KAAK,EAAE;YACvB,iBAAiB,CAAC,MAAM,CAAC;YACzB;AACD;QACD,IAAI,UAAU,KAAK,CAAC,EAAE;YACpB,iBAAiB,CAAC,OAAO,CAAC;YAC1B;AACD;AACD,QAAA,IAAI,UAAU,GAAG,KAAK,IAAI,WAAW,EAAE;YACrC,iBAAiB,CAAC,KAAK,CAAC;YACxB;AACD;QACD,iBAAiB,CAAC,QAAQ,CAAC;AAC7B,KAAC;IAEDC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC;AACrE,QAAA,OAAO,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA,EAAA;AACxF,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1BA,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,sBAAsB,GAAGC,yBAAQ,CAAC,oBAAoB,EAAE,EAAE,CAAC;AACjE,QAAA,MAAM,cAAc,GAAG,IAAIC,+BAAc,CAAC,sBAAsB,CAAC;AACjE,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAC5C,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE;AACzC;;;;"}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { useState, useEffect } from 'react';
|
|
2
|
-
import ResizeObserver from 'resize-observer-polyfill';
|
|
3
|
-
import throttle from 'lodash.throttle';
|
|
4
|
-
|
|
5
|
-
/* eslint-disable consistent-return */
|
|
6
|
-
/* eslint-disable react-hooks/exhaustive-deps */
|
|
7
|
-
function useScrollPosition(containerRef) {
|
|
8
|
-
const [scrollPosition, setScrollPosition] = useState('start');
|
|
9
|
-
const updateScrollPosition = () => {
|
|
10
|
-
if (!containerRef.current)
|
|
11
|
-
return;
|
|
12
|
-
const { width } = containerRef.current.getBoundingClientRect();
|
|
13
|
-
const { scrollLeft, scrollWidth } = containerRef.current;
|
|
14
|
-
if (scrollWidth < width) {
|
|
15
|
-
setScrollPosition('none');
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
if (scrollLeft === 0) {
|
|
19
|
-
setScrollPosition('start');
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
if (scrollLeft + width >= scrollWidth) {
|
|
23
|
-
setScrollPosition('end');
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
setScrollPosition('middle');
|
|
27
|
-
};
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
if (!containerRef.current)
|
|
30
|
-
return;
|
|
31
|
-
containerRef.current.addEventListener('scroll', updateScrollPosition);
|
|
32
|
-
return () => { var _a; return (_a = containerRef.current) === null || _a === undefined ? undefined : _a.removeEventListener('scroll', updateScrollPosition); };
|
|
33
|
-
}, [containerRef.current]);
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
if (!containerRef.current)
|
|
36
|
-
return;
|
|
37
|
-
const resizeObserverCallback = throttle(updateScrollPosition, 50);
|
|
38
|
-
const resizeObserver = new ResizeObserver(resizeObserverCallback);
|
|
39
|
-
resizeObserver.observe(containerRef.current);
|
|
40
|
-
return () => resizeObserver.disconnect();
|
|
41
|
-
}, [containerRef.current]);
|
|
42
|
-
return { scrollPosition, containerRef };
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export { useScrollPosition };
|
|
46
|
-
//# sourceMappingURL=useScrollPosition.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollPosition.js","sources":["../../../../src/components/DataTable/hooks/useScrollPosition.ts"],"sourcesContent":["/* eslint-disable consistent-return */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport { RefObject, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport throttle from 'lodash.throttle';\nimport { ScrollPosition } from '../types';\n\nexport function useScrollPosition(containerRef: RefObject<HTMLElement>) {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>('start');\n\n const updateScrollPosition = () => {\n if (!containerRef.current) return;\n const { width } = containerRef.current.getBoundingClientRect();\n const { scrollLeft, scrollWidth } = containerRef.current;\n if (scrollWidth < width) {\n setScrollPosition('none');\n return;\n }\n if (scrollLeft === 0) {\n setScrollPosition('start');\n return;\n }\n if (scrollLeft + width >= scrollWidth) {\n setScrollPosition('end');\n return;\n }\n setScrollPosition('middle');\n };\n\n useEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.addEventListener('scroll', updateScrollPosition);\n return () => containerRef.current?.removeEventListener('scroll', updateScrollPosition);\n }, [containerRef.current]);\n\n useEffect(() => {\n if (!containerRef.current) return;\n const resizeObserverCallback = throttle(updateScrollPosition, 50);\n const resizeObserver = new ResizeObserver(resizeObserverCallback);\n resizeObserver.observe(containerRef.current);\n return () => resizeObserver.disconnect();\n }, [containerRef.current]);\n\n return { scrollPosition, containerRef };\n}\n"],"names":[],"mappings":";;;;AAAA;AACA;AAMM,SAAU,iBAAiB,CAAC,YAAoC,EAAA;IACpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,OAAO,CAAC;IAE7E,MAAM,oBAAoB,GAAG,MAAK;QAChC,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE;QAC9D,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC,OAAO;QACxD,IAAI,WAAW,GAAG,KAAK,EAAE;YACvB,iBAAiB,CAAC,MAAM,CAAC;YACzB;AACD;QACD,IAAI,UAAU,KAAK,CAAC,EAAE;YACpB,iBAAiB,CAAC,OAAO,CAAC;YAC1B;AACD;AACD,QAAA,IAAI,UAAU,GAAG,KAAK,IAAI,WAAW,EAAE;YACrC,iBAAiB,CAAC,KAAK,CAAC;YACxB;AACD;QACD,iBAAiB,CAAC,QAAQ,CAAC;AAC7B,KAAC;IAED,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,EAAE,oBAAoB,CAAC;AACrE,QAAA,OAAO,MAAK,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,mBAAmB,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAA,EAAA;AACxF,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAE1B,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAC3B,MAAM,sBAAsB,GAAG,QAAQ,CAAC,oBAAoB,EAAE,EAAE,CAAC;AACjE,QAAA,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,sBAAsB,CAAC;AACjE,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAC5C,QAAA,OAAO,MAAM,cAAc,CAAC,UAAU,EAAE;AAC1C,KAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAE1B,IAAA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE;AACzC;;;;"}
|