@elliemae/ds-data-table 3.0.0-next.75 → 3.0.0-next.76
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/parts/HoC/withConditionalDnDColumnContext.js +3 -1
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js +3 -1
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/package.json +1 -1
|
@@ -99,7 +99,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
|
|
|
99
99
|
const el = document.body.querySelector(`[data-testid="${import_constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
|
|
100
100
|
if (el) {
|
|
101
101
|
const y = el.scrollTop;
|
|
102
|
-
el.onscroll = () =>
|
|
102
|
+
el.onscroll = () => {
|
|
103
|
+
el.scrollTo({ top: y });
|
|
104
|
+
};
|
|
103
105
|
}
|
|
104
106
|
}, []);
|
|
105
107
|
const { dndContextProps, activeId, activeIndex } = (0, import_ds_drag_and_drop.useHierarchyDndkitConfig)({
|
|
@@ -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 no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\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 = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\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 onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2D;AAC3D,kBAAwC;AACxC,8BAAyC;AACzC,sBAA0B;AAE1B,8BAAiC;AAGjC,sBAAgC;AAChC,uBAA4B;AAC5B,qBAAiC;AAM1B,MAAM,kBAAkB,gCAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,qBAAM,WAAW,wCAAgB;AAErC,QAAM,iBAAiB,0BAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY,8BAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,+BAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,UAAM,QAAQ,CAAC;AACf,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA,IACtB,CAAC;AACD,UAAM,UAAU,CAAC;AACjB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,gCAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,MACF;AAGA,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,qBAAW,UAAU,CAAC,OAAO;AAAA,MACpC;AAAO,gBAAQ,KAAK,OAAO;AAAA,IAC7B,CAAC;AACD,qBAAiB,SAAS,OAAO;AAAA,EACnC,GACA,CAAC,gBAAgB,gBAAgB,CACnC;AAEA,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY,mCAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY,mCAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\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 = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\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 onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => {\n el.scrollTo({ top: y });\n };\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\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
|
}
|
|
@@ -75,7 +75,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
|
|
|
75
75
|
const el = document.body.querySelector(`[data-testid="${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
|
|
76
76
|
if (el) {
|
|
77
77
|
const y = el.scrollTop;
|
|
78
|
-
el.onscroll = () =>
|
|
78
|
+
el.onscroll = () => {
|
|
79
|
+
el.scrollTo({ top: y });
|
|
80
|
+
};
|
|
79
81
|
}
|
|
80
82
|
}, []);
|
|
81
83
|
const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\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 = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\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 onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => el.scrollTo(
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW,gBAAgB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,UAAM,QAAQ,CAAC;AACf,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA,IACtB,CAAC;AACD,UAAM,UAAU,CAAC;AACjB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,MACF;AAGA,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,qBAAW,UAAU,CAAC,OAAO;AAAA,MACpC;AAAO,gBAAQ,KAAK,OAAO;AAAA,IAC7B,CAAC;AACD,qBAAiB,SAAS,OAAO;AAAA,EACnC,GACA,CAAC,gBAAgB,gBAAgB,CACnC;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n const flattened = [];\n const flatten = (col: TypescriptColumn, index, parentId = null) => {\n const { id } = col;\n flattened.push([{ id, parentId, index }, col]);\n if (col.columns)\n col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n };\n cols.forEach((col, index) => flatten(col, index));\n return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropColumns, onColumnsReorder },\n visibleColumns,\n } = React.useContext(DataTableContext);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder = useCallback(\n (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\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 = {};\n newFlattenedData.forEach(([dndData, colData]) => {\n delete colData.columns;\n nodes[dndData.id] = colData;\n });\n const newData = [];\n newFlattenedData.forEach(([dndData, colData]) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.id)) {\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 onPreviewResetState = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) el.onscroll = () => null;\n }, []);\n\n const onPreviewDragStart = useCallback(() => {\n const el: HTMLDivElement | null = document.body.querySelector(\n `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n );\n if (el) {\n const y = el.scrollTop;\n el.onscroll = () => {\n el.scrollTo({ top: y });\n };\n }\n }, []);\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n isHorizontalDnD: true,\n onReorder,\n onPreviewResetState,\n onPreviewDragStart,\n });\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={{ activeIndex }}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay>\n {activeId ? (\n <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n ) : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW,gBAAgB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,UAAM,QAAQ,CAAC;AACf,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA,IACtB,CAAC;AACD,UAAM,UAAU,CAAC;AACjB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,MACF;AAGA,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,qBAAW,UAAU,CAAC,OAAO;AAAA,MACpC;AAAO,gBAAQ,KAAK,OAAO;AAAA,IAC7B,CAAC;AACD,qBAAiB,SAAS,OAAO;AAAA,EACnC,GACA,CAAC,gBAAgB,gBAAgB,CACnC;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY,mCAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM;AAClB,WAAG,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,qCAAC,+BAAe,kBACd,qCAAC,gBAAgB,UAAhB;AAAA,MAAyB,OAAO,EAAE,YAAY;AAAA,OAC7C,qCAAC,8BAAc,MAAO,CACxB,GACA,qCAAC,mBACE,WACC,qCAAC;AAAA,MAAgB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,QAAQ,EAAE;AAAA,MAAI,eAAa;AAAA,KAAC,IAC/F,IACN,CACF;AAEJ,SAAO,qCAAC,8BAAc,MAAO;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|