@elliemae/ds-data-table 3.53.0-next.5 → 3.53.0-next.7
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/cjs/DataTable.js +1 -1
- package/dist/cjs/DataTable.js.map +2 -2
- package/dist/cjs/configs/useFreezeVirtualScrollOnDrag.js +54 -0
- package/dist/cjs/configs/useFreezeVirtualScrollOnDrag.js.map +7 -0
- package/dist/cjs/configs/useInternalStateConfig.js +7 -2
- package/dist/cjs/configs/useInternalStateConfig.js.map +2 -2
- package/dist/cjs/configs/useStore/useStore.js +2 -1
- package/dist/cjs/configs/useStore/useStore.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js +6 -2
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +1 -1
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js +8 -0
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/cjs/parts/VirtualRowsList.js +3 -0
- package/dist/cjs/parts/VirtualRowsList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DataTable.js +1 -1
- package/dist/esm/DataTable.js.map +2 -2
- package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js +24 -0
- package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js.map +7 -0
- package/dist/esm/configs/useInternalStateConfig.js +7 -2
- package/dist/esm/configs/useInternalStateConfig.js.map +2 -2
- package/dist/esm/configs/useStore/useStore.js +2 -1
- package/dist/esm/configs/useStore/useStore.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js +8 -4
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +1 -1
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js +10 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/esm/parts/VirtualRowsList.js +3 -0
- package/dist/esm/parts/VirtualRowsList.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/configs/useFreezeVirtualScrollOnDrag.d.ts +2 -0
- package/dist/types/configs/useInternalStateConfig.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +28 -28
package/dist/cjs/DataTable.js
CHANGED
|
@@ -34,9 +34,9 @@ __export(DataTable_exports, {
|
|
|
34
34
|
module.exports = __toCommonJS(DataTable_exports);
|
|
35
35
|
var React = __toESM(require("react"));
|
|
36
36
|
var import_ds_zustand_helpers = require("@elliemae/ds-zustand-helpers");
|
|
37
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
37
38
|
var import_MainContent = require("./parts/MainContent.js");
|
|
38
39
|
var import_useStore = require("./configs/useStore/index.js");
|
|
39
|
-
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
40
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
41
|
const DataTable = (0, import_ds_zustand_helpers.withZustand)(import_MainContent.MainContent, import_useStore.config);
|
|
42
42
|
DataTable.displayName = "DataTable";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DataTable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA4B;AAC5B,yBAA4B;AAC5B,sBAAuB;
|
|
4
|
+
"sourcesContent": ["import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAA4B;AAC5B,8BAAyB;AACzB,yBAA4B;AAC5B,sBAAuB;AAEvB,mCAA2C;AAEpC,MAAM,gBAAyD,uCAAY,gCAAa,sBAAM;AAErG,UAAU,cAAc;AACjB,MAAM,0BAAsB,kCAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var useFreezeVirtualScrollOnDrag_exports = {};
|
|
30
|
+
__export(useFreezeVirtualScrollOnDrag_exports, {
|
|
31
|
+
useFreezeVirtualScrollOnDrag: () => useFreezeVirtualScrollOnDrag
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(useFreezeVirtualScrollOnDrag_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
var import_react = require("react");
|
|
36
|
+
function useFreezeVirtualScrollOnDrag(containerRef, isDragging) {
|
|
37
|
+
(0, import_react.useEffect)(() => {
|
|
38
|
+
const container = containerRef.current;
|
|
39
|
+
if (!container || !isDragging) return;
|
|
40
|
+
let lastScrollTop = container.scrollTop;
|
|
41
|
+
const lockVerticalScroll = () => {
|
|
42
|
+
if (container.scrollTop !== lastScrollTop) {
|
|
43
|
+
container.scrollTop = lastScrollTop;
|
|
44
|
+
} else {
|
|
45
|
+
lastScrollTop = container.scrollTop;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
container.addEventListener("scroll", lockVerticalScroll);
|
|
49
|
+
return () => {
|
|
50
|
+
container.removeEventListener("scroll", lockVerticalScroll);
|
|
51
|
+
};
|
|
52
|
+
}, [isDragging, containerRef]);
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=useFreezeVirtualScrollOnDrag.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/configs/useFreezeVirtualScrollOnDrag.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable consistent-return */\nimport type React from 'react';\nimport { useEffect } from 'react';\nexport function useFreezeVirtualScrollOnDrag(containerRef: React.RefObject<HTMLElement>, isDragging: boolean) {\n useEffect(() => {\n const container = containerRef.current;\n if (!container || !isDragging) return;\n\n let lastScrollTop = container.scrollTop;\n\n const lockVerticalScroll = () => {\n if (container.scrollTop !== lastScrollTop) {\n container.scrollTop = lastScrollTop;\n } else {\n lastScrollTop = container.scrollTop;\n }\n };\n\n container.addEventListener('scroll', lockVerticalScroll);\n\n return () => {\n container.removeEventListener('scroll', lockVerticalScroll);\n };\n }, [isDragging, containerRef]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA0B;AACnB,SAAS,6BAA6B,cAA4C,YAAqB;AAC5G,8BAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,CAAC,WAAY;AAE/B,QAAI,gBAAgB,UAAU;AAE9B,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU,cAAc,eAAe;AACzC,kBAAU,YAAY;AAAA,MACxB,OAAO;AACL,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,iBAAiB,UAAU,kBAAkB;AAEvD,WAAO,MAAM;AACX,gBAAU,oBAAoB,UAAU,kBAAkB;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,YAAY,YAAY,CAAC;AAC/B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -36,6 +36,7 @@ var import_react = require("react");
|
|
|
36
36
|
const useInternalStateConfig = () => {
|
|
37
37
|
const [drilldownRowId, setDrilldownRowId] = (0, import_react.useState)(null);
|
|
38
38
|
const [focusedRowId, setFocusedRowId] = (0, import_react.useState)(null);
|
|
39
|
+
const [isHeaderCellDragging, setIsHeaderCellDragging] = (0, import_react.useState)(false);
|
|
39
40
|
const [reduxHeaders, setReduxHeaders] = (0, import_react.useState)({});
|
|
40
41
|
const patchHeader = (0, import_react.useCallback)((headerId, newHeader) => {
|
|
41
42
|
setReduxHeaders((prevReduxHeaders) => {
|
|
@@ -59,7 +60,9 @@ const useInternalStateConfig = () => {
|
|
|
59
60
|
setFocusedRowId,
|
|
60
61
|
reduxHeaders,
|
|
61
62
|
patchHeader,
|
|
62
|
-
patchHeaderFilterButtonAndMenu
|
|
63
|
+
patchHeaderFilterButtonAndMenu,
|
|
64
|
+
isHeaderCellDragging,
|
|
65
|
+
setIsHeaderCellDragging
|
|
63
66
|
}),
|
|
64
67
|
[
|
|
65
68
|
drilldownRowId,
|
|
@@ -68,7 +71,9 @@ const useInternalStateConfig = () => {
|
|
|
68
71
|
setFocusedRowId,
|
|
69
72
|
reduxHeaders,
|
|
70
73
|
patchHeader,
|
|
71
|
-
patchHeaderFilterButtonAndMenu
|
|
74
|
+
patchHeaderFilterButtonAndMenu,
|
|
75
|
+
isHeaderCellDragging,
|
|
76
|
+
setIsHeaderCellDragging
|
|
72
77
|
]
|
|
73
78
|
);
|
|
74
79
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/useInternalStateConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAwB,IAAI;
|
|
4
|
+
"sourcesContent": ["import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n const [isHeaderCellDragging, setIsHeaderCellDragging] = useState<boolean>(false);\n // TODO: @uluduena partition this state better\n const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n setReduxHeaders((prevReduxHeaders) => {\n const nextReduxHeaders = { ...prevReduxHeaders };\n nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n return nextReduxHeaders;\n });\n }, []);\n\n const patchHeaderFilterButtonAndMenu = useCallback(\n (headerId: string, value: boolean) => {\n const newState = { hideFilterMenu: value, hideFilterButton: value };\n patchHeader(headerId, newState);\n },\n [patchHeader],\n );\n\n return useMemo(\n () => ({\n drilldownRowId,\n setDrilldownRowId,\n focusedRowId,\n setFocusedRowId,\n reduxHeaders,\n patchHeader,\n patchHeaderFilterButtonAndMenu,\n isHeaderCellDragging,\n setIsHeaderCellDragging,\n }),\n [\n drilldownRowId,\n setDrilldownRowId,\n focusedRowId,\n setFocusedRowId,\n reduxHeaders,\n patchHeader,\n patchHeaderFilterButtonAndMenu,\n isHeaderCellDragging,\n setIsHeaderCellDragging,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAwB,IAAI;AACpE,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAAkB,KAAK;AAE/E,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAmD,CAAC,CAAC;AAE7F,QAAM,kBAAc,0BAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,qCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/configs/useStore/useStore.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mCAAgD;AAChD,+BAAkC;AAClC,2CAAiF;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;
|
|
4
|
+
"sourcesContent": ["import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mCAAgD;AAChD,+BAAkC;AAClC,2CAAiF;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,oDAAc,CAAC,UAAU,KAAK;AAElC,QAAM,oBAAgB,uDAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,7 +32,11 @@ __export(withConditionalDnDColumnContext_exports, {
|
|
|
32
32
|
});
|
|
33
33
|
module.exports = __toCommonJS(withConditionalDnDColumnContext_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
|
-
var import_jsx_runtime =
|
|
35
|
+
var import_jsx_runtime = (
|
|
36
|
+
// For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user
|
|
37
|
+
// drags the column header to the left or right
|
|
38
|
+
require("react/jsx-runtime")
|
|
39
|
+
);
|
|
36
40
|
var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
|
|
37
41
|
var import_react = require("react");
|
|
38
42
|
var import_Columns = require("../../addons/Columns/index.js");
|
|
@@ -91,7 +95,7 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
|
|
|
91
95
|
);
|
|
92
96
|
const DnDGroupContextVal = (0, import_react.useMemo)(() => ({ activeIndex }), [activeIndex]);
|
|
93
97
|
if (dragAndDropColumns)
|
|
94
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
|
|
98
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, autoScroll: { threshold: { y: 0, x: 0.2 } }, children: [
|
|
95
99
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDGroupContext.DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
|
|
96
100
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
|
|
97
101
|
] });
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n DndContext,\n DragOverlay,\n arrayMove,\n restrictToFirstScrollableAncestor,\n useHierarchyDndkitConfig,\n type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n const { id } = col;\n augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n if (col.columns)\n col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n flatten(subColumn, childIndex, id),\n );\n };\n cols.forEach((col, index) => flatten(col, index));\n return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n function (props) {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n (movedItem, indexes) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n delete colData.columns;\n nodes[dndData.uid] = colData;\n });\n const newData = [] as DSDataTableT.Column[];\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n isHorizontalDnD: true,\n onReorder,\n });\n\n const dragOverlayCol = useMemo(\n () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n [activeId, flattenedItems],\n );\n const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={DnDGroupContextVal}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n DndContext,\n DragOverlay,\n arrayMove,\n restrictToFirstScrollableAncestor,\n useHierarchyDndkitConfig,\n type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n const { id } = col;\n augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n if (col.columns)\n col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n flatten(subColumn, childIndex, id),\n );\n };\n cols.forEach((col, index) => flatten(col, index));\n return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n function (props) {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n (movedItem, indexes) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n delete colData.columns;\n nodes[dndData.uid] = colData;\n });\n const newData = [] as DSDataTableT.Column[];\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n isHorizontalDnD: true,\n onReorder,\n });\n\n const dragOverlayCol = useMemo(\n () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n [activeId, flattenedItems],\n );\n const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n if (dragAndDropColumns)\n return (\n // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user\n // drags the column header to the left or right\n <DndContext {...dndContextProps} autoScroll={{ threshold: { y: 0, x: 0.2 } }}>\n <DnDGroupContext.Provider value={DnDGroupContextVal}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2Ff;AAAA;AAAA;AAAA;AAAA;AAxFR,8BAOO;AACP,mBAAqC;AACrC,qBAAiC;AACjC,2CAA8B;AAG9B,6BAAgC;AAChC,6BAAgC;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,uBAAmB,oDAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,qBAAiB,sBAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,gBAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,uBAAmB,mCAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,gCAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,QAAI,kDAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,yBAAqB,sBAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WAGE,6CAAC,sCAAY,GAAG,iBAAiB,YAAY,EAAE,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,EAAE,GACzE;AAAA,kDAAC,uCAAgB,UAAhB,EAAyB,OAAO,oBAC/B,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,4CAAC,uCAAY,WAAW,CAAC,yDAAiC,GACvD,qBAAW,4CAAC,0CAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -111,7 +111,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
111
111
|
[active, flattenedData]
|
|
112
112
|
);
|
|
113
113
|
if (dragAndDropRows)
|
|
114
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
|
|
114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, autoScroll: { layoutShiftCompensation: false }, children: [
|
|
115
115
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
|
|
116
116
|
(0, import_react_dom.createPortal)(
|
|
117
117
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n restrictToFirstScrollableAncestor,\n useTreeDndkitConfig,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n },\n [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2GjB;AA1GN,8BAOO;AACP,mBAAqC;AACrC,uBAA6B;AAC7B,2CAAgD;AAGhD,iBAAoB;AACpB,4BAA+B;AAGxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,0BAAsB,oDAAc,CAAC,UAAU,MAAM,mBAAmB;AAC9E,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,uBAAmB,oDAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,wBAAoB,uDAAiB,CAAC,UAAU,MAAM,iBAAiB;AAE7E,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AACrE,YAAM,gBAAgB,UAAU;AAEhC,YAAM,QAA0C,CAAC;AACjD,oBAAc,QAAQ,CAAC,QAAQ;AAC7B,YAAI,IAAI,SAAS,QAAS,QAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,oBAAc,QAAQ,CAAC,QAAQ;AAG7B,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY,QAAS,YAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA,cACxD,YAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC,MAAO,aAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AACD,wBAAkB,QAAQ,IAAI,SAAS,CAAC;AAAA,IAC1C;AAAA,IACA,CAAC,kBAAkB,eAAe,eAAe,iBAAiB;AAAA,EACpE;AAEA,QAAM,wBAAoB;AAAA,IACxB,MAAM,iBAAiB,IAAI,CAAC,WAAW,EAAE,GAAG,OAAO,WAAW,CAAC,MAAM,YAAY,UAAU,CAAC,EAAE,EAAE;AAAA,IAChG,CAAC,gBAAgB;AAAA,EACnB;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gCAAgC,qBAAqB;AAE3D,QAAM,mBAAe,sBAAQ,MAAM;AAGjC,QAAI,CAAC,OAAQ,QAAO;AAGpB,UAAM,mBAAmB,CAAC,OAAO,EAAE;AACnC,WAAO,cAAc,OAAO,CAAC,UAAU;AACrC,YAAM,mBAAmB,MAAM,aAAa,QAAQ,iBAAiB,SAAS,MAAM,QAAQ;AAC5F,UAAI,kBAAkB;AACpB,yBAAiB,KAAK,MAAM,GAAG;AAC/B,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n restrictToFirstScrollableAncestor,\n useTreeDndkitConfig,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n },\n [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps} autoScroll={{ layoutShiftCompensation: false }}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,6 +41,7 @@ var import_SortableItemContext = require("./SortableItemContext.js");
|
|
|
41
41
|
var import_DnDGroupContext = require("./DnDGroupContext.js");
|
|
42
42
|
const withDnDSortableColumnContext = (Component) => (props) => {
|
|
43
43
|
const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
|
|
44
|
+
const setIsHeaderCellDragging = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setIsHeaderCellDragging);
|
|
44
45
|
const { activeIndex } = (0, import_react.useContext)(import_DnDGroupContext.DnDGroupContext);
|
|
45
46
|
const draggableOptions = (0, import_react.useMemo)(
|
|
46
47
|
() => ({
|
|
@@ -49,6 +50,13 @@ const withDnDSortableColumnContext = (Component) => (props) => {
|
|
|
49
50
|
[props.header.id]
|
|
50
51
|
);
|
|
51
52
|
const useSortableHelpers = (0, import_ds_drag_and_drop.useSortable)(draggableOptions);
|
|
53
|
+
(0, import_react.useEffect)(() => {
|
|
54
|
+
if (useSortableHelpers.isDragging) {
|
|
55
|
+
setIsHeaderCellDragging(true);
|
|
56
|
+
} else {
|
|
57
|
+
setIsHeaderCellDragging(false);
|
|
58
|
+
}
|
|
59
|
+
}, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
|
|
52
60
|
const draggableProps = (0, import_react.useMemo)(() => {
|
|
53
61
|
if (!dragAndDropColumns) return false;
|
|
54
62
|
const { index, overIndex } = useSortableHelpers;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/HoC/withDnDSortableColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // Since Header component for some reason is being render inside the virtual scrollable list,\n // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n useEffect(() => {\n if (useSortableHelpers.isDragging) {\n setIsHeaderCellDragging(true);\n } else {\n setIsHeaderCellDragging(false);\n }\n }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+Df;AA9DR,8BAA4B;AAC5B,mBAAsD;AACtD,uBAAsC;AACtC,2CAAgD;AAGhD,iCAAoC;AACpC,6BAAgC;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,8BAA0B,uDAAiB,CAAC,UAAU,MAAM,uBAAuB;AAEzF,QAAM,EAAE,YAAY,QAAI,yBAAW,sCAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAIvD,8BAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAAA,IAC9B,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,uBAAuB,CAAC;AAE3D,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -41,6 +41,7 @@ var import_EmptyContent = require("./EmptyContent.js");
|
|
|
41
41
|
var import_Headers = require("./Headers/index.js");
|
|
42
42
|
var import_Loader = require("./Loader.js");
|
|
43
43
|
var import_Rows = require("./Rows.js");
|
|
44
|
+
var import_useFreezeVirtualScrollOnDrag = require("../configs/useFreezeVirtualScrollOnDrag.js");
|
|
44
45
|
const VirtualRowsList = () => {
|
|
45
46
|
const isLoading = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isLoading);
|
|
46
47
|
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
@@ -49,6 +50,7 @@ const VirtualRowsList = () => {
|
|
|
49
50
|
const { totalColumnsWidth, gridLayout } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.layoutHelpers);
|
|
50
51
|
const { totalSize, scrollToIndex } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListHelpers);
|
|
51
52
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
53
|
+
const isHeaderCellDragging = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.isHeaderCellDragging);
|
|
52
54
|
const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
|
|
53
55
|
const onKeyDown = (0, import_react.useCallback)(
|
|
54
56
|
(e) => {
|
|
@@ -66,6 +68,7 @@ const VirtualRowsList = () => {
|
|
|
66
68
|
() => isEmptyContent || isLoading ? "100%" : totalSize,
|
|
67
69
|
[isEmptyContent, isLoading, totalSize]
|
|
68
70
|
);
|
|
71
|
+
(0, import_useFreezeVirtualScrollOnDrag.useFreezeVirtualScrollOnDrag)(virtualListRef, isHeaderCellDragging);
|
|
69
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
73
|
import_styled.StyledVirtualListWrapper,
|
|
71
74
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n const isLoading = usePropsStore((state) => state.isLoading);\n\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n const tableContentWrapperHeight = useMemo(\n () => (isEmptyContent || isLoading ? '100%' : totalSize),\n [isEmptyContent, isLoading, totalSize],\n );\n\n useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n return (\n <StyledVirtualListWrapper\n innerRef={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n role=\"rowgroup\"\n gridLayout={gridLayout}\n totalColumnsWidth={totalColumnsWidth}\n aria-busy={isLoading}\n getOwnerProps={getOwnerProps}\n >\n <StyledTableContentWrapper\n height={tableContentWrapperHeight}\n rows={['min-content', 'auto']}\n cols={['100%']}\n getOwnerProps={getOwnerProps}\n >\n <Headers />\n {isEmptyContent && <EmptyContent />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && <Rows />}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsDjB;AArDN,mBAA4C;AAC5C,2CAAgD;AAChD,uBAA4B;AAC5B,oBAAoE;AACpE,0BAA6B;AAC7B,qBAAwB;AACxB,oBAAyC;AACzC,kBAAwC;AACxC,0CAA6C;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,oDAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,2BAAuB,uDAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,gCAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,wEAA6B,gBAAgB,oBAAoB;AAEjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": ["Loader", "Rows"]
|
|
7
7
|
}
|