@elliemae/ds-data-table 3.13.0-next.3 → 3.13.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/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +0 -2
- package/dist/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js.map +2 -2
- package/dist/cjs/exported-related/RowRenderer/useRowStyle.js +0 -1
- package/dist/cjs/exported-related/RowRenderer/useRowStyle.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +3 -10
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +0 -2
- package/dist/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/useRowStyle.js +0 -1
- package/dist/esm/exported-related/RowRenderer/useRowStyle.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +3 -10
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/Row.js.map +2 -2
- package/package.json +18 -18
|
@@ -48,8 +48,6 @@ const ComboboxEditableCell = (props) => {
|
|
|
48
48
|
label: cellValue
|
|
49
49
|
});
|
|
50
50
|
const uniqueOptions = (0, import_react.useMemo)(() => {
|
|
51
|
-
if (cell.column.editOptions)
|
|
52
|
-
return cell.column.editOptions;
|
|
53
51
|
const uniqueValuesMap = {};
|
|
54
52
|
return flattenedData.reduce((optionsSoFar, currRow) => {
|
|
55
53
|
const currValue = currRow.original[columnId];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\n\nexport const ComboboxEditableCell: React.ComponentType<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const {\n tableProps: { onCellValueChange },\n flattenedData,\n } = useContext(DataTableContext);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\n\nexport const ComboboxEditableCell: React.ComponentType<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const {\n tableProps: { onCellValueChange },\n flattenedData,\n } = useContext(DataTableContext);\n const cellValue = useMemo(() => cell.value, [cell.value]);\n const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n const [value, setValue] = useState({\n dsId: cellValue,\n type: 'option',\n value: cellValue,\n label: cellValue,\n });\n\n const uniqueOptions = useMemo(() => {\n const uniqueValuesMap = {};\n return flattenedData.reduce((optionsSoFar, currRow) => {\n const currValue = currRow.original[columnId];\n if (!uniqueValuesMap[currValue]) {\n optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n uniqueValuesMap[currValue] = true;\n }\n return optionsSoFar;\n }, []);\n }, [flattenedData, columnId]);\n\n const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n const handleOnBlur = useCallback(() => {\n const property = columnId;\n onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n }, [columnId, onCellValueChange, value?.value, cell]);\n return (\n <EditableCell\n StandardRender={DefaultCellRender}\n EditableRenderer={\n <DSComboBox\n selectedValues={value}\n autoFocus\n withoutPortal={false}\n onBlur={handleOnBlur}\n onChange={setValue}\n allOptions={uniqueOptions}\n onFilter={setCurrentOptions}\n filteredOptions={currentOptions}\n />\n }\n cell={cell}\n isRowSelected={isRowSelected}\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Cf;AA5CR,mBAAkE;AAClE,gCAA2B;AAC3B,8BAA6B;AAC7B,8BAAiC;AAE1B,MAAM,uBAAiD,CAAC,UAAU;AACvE,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM;AAAA,IACJ,YAAY,EAAE,kBAAkB;AAAA,IAChC;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAC/B,QAAM,gBAAY,sBAAQ,MAAM,KAAK,OAAO,CAAC,KAAK,KAAK,CAAC;AACxD,QAAM,eAAW,sBAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;AAE/D,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS;AAAA,IACjC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,QAAM,oBAAgB,sBAAQ,MAAM;AAClC,UAAM,kBAAkB,CAAC;AACzB,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS;AACnC,UAAI,CAAC,gBAAgB,YAAY;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO,UAAU,CAAC;AACzF,wBAAgB,aAAa;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAAA,EACP,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,aAAa;AAElE,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,mBAAmB,OAAO,OAAO,IAAI,CAAC;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,WAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA;AAAA,MACnB;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -51,7 +51,6 @@ const useRowStyle = (row) => {
|
|
|
51
51
|
}, [row, flattenedData]);
|
|
52
52
|
const rowStyle = (0, import_react.useMemo)(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
|
|
53
53
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
54
|
-
console.log(draggableProps, "draggableProps");
|
|
55
54
|
const isDropValid = draggableProps && draggableProps.isDropValid;
|
|
56
55
|
return {
|
|
57
56
|
rowStyle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/useRowStyle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;
|
|
4
|
+
"sourcesContent": ["import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n return {\n rowStyle,\n shouldAppendDottedBorder,\n dropIndicatorPosition,\n isDropValid,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AACpC,8BAA6B;AAC7B,iCAAoC;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,QAAI,yBAAW,wBAAAA,OAAgB;AAErD,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,QAA+B,sBAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,eAAW,sBAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["DataTableContext"]
|
|
7
7
|
}
|
|
@@ -43,11 +43,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
43
43
|
} = import_react.default.useContext(import_DataTableContext.DataTableContext);
|
|
44
44
|
const [lastActiveId, setLastActiveId] = import_react.default.useState(null);
|
|
45
45
|
const onReorder = (0, import_react.useCallback)(
|
|
46
|
-
(newData, {
|
|
47
|
-
targetIndex,
|
|
48
|
-
fromIndex,
|
|
49
|
-
considerExpanding
|
|
50
|
-
}) => {
|
|
46
|
+
(newData, indexes, considerExpanding) => {
|
|
51
47
|
const nodes = {};
|
|
52
48
|
newData.forEach((row) => {
|
|
53
49
|
delete row.original.subRows;
|
|
@@ -64,12 +60,9 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
64
60
|
} else
|
|
65
61
|
newUserData.push(row.original);
|
|
66
62
|
});
|
|
67
|
-
onRowsReorder(newUserData,
|
|
68
|
-
flattenedData,
|
|
69
|
-
allDataFlattened
|
|
70
|
-
});
|
|
63
|
+
onRowsReorder(newUserData, indexes, considerExpanding, { flattenedData, allDataFlattened });
|
|
71
64
|
},
|
|
72
|
-
[
|
|
65
|
+
[onRowsReorder]
|
|
73
66
|
);
|
|
74
67
|
const {
|
|
75
68
|
dndContextProps,
|
|
@@ -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 React, { useCallback, useEffect, useMemo } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { Row } from '../Row';\nimport { DnDTreeContext } from './DnDTreeContext';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const [lastActiveId, setLastActiveId] = React.useState<string | null>(null);\n\n const onReorder = useCallback(\n (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { Row } from '../Row';\nimport { DnDTreeContext } from './DnDTreeContext';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const [lastActiveId, setLastActiveId] = React.useState<string | null>(null);\n\n const onReorder = useCallback(\n (newData: unknown, indexes: { targetIndex: number; fromIndex: number }, considerExpanding: string) => {\n // Pull the row's original data into an object\n const nodes = {};\n newData.forEach((row) => {\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [];\n newData.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, indexes, considerExpanding, { flattenedData, allDataFlattened });\n },\n [onRowsReorder],\n );\n\n const {\n dndContextProps,\n sortableContextProps,\n activeId,\n activeIndex,\n depth,\n dropIndicatorPosition,\n visibleItems,\n isDropValid,\n } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\n visibleItems: flattenedData,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n useEffect(() => {\n if (activeId) setLastActiveId(activeId);\n }, [activeId]);\n\n const ctx = useMemo(\n () => ({\n activeIndex,\n depth,\n visibleItems,\n dropIndicatorPosition,\n lastActiveId,\n setLastActiveId,\n isDropValid,\n }),\n [activeIndex, depth, visibleItems, dropIndicatorPosition, lastActiveId, isDropValid],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }}>\n {activeId ? <Row row={flattenedData.find((row) => row.uid === activeId)} 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;ADiFjB;AAhFN,mBAAuD;AACvD,8BAA8E;AAC9E,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAGxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,CAAC,cAAc,eAAe,IAAI,aAAAA,QAAM,SAAwB,IAAI;AAE1E,QAAM,gBAAY;AAAA,IAChB,CAAC,SAAkB,SAAqD,sBAA8B;AAEpG,YAAM,QAAQ,CAAC;AACf,cAAQ,QAAQ,CAAC,QAAQ;AACvB,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,OAAO,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,cAAQ,QAAQ,CAAC,QAAQ;AAGvB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI;AAC7B,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,SAAS,mBAAmB,EAAE,eAAe,iBAAiB,CAAC;AAAA,IAC5F;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,6CAAoB;AAAA,IACtB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,QAAI;AAAU,sBAAgB,QAAQ;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,OAAO,cAAc,uBAAuB,cAAc,WAAW;AAAA,EACrF;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GACjC,qBAAW,4CAAC,kBAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,QAAQ,GAAG,eAAa,MAAC,IAAK,MAC9F;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Row.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAAkC;AAClC,uBAAuB;AACvB,8BAA6B;AAC7B,qBAAgC;AAChC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,sCAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n const draggableRef = draggableProps && draggableProps.setNodeRef;\n return (\n <StyledRow\n isDisabled={disabledRows[row.uid]}\n style={!isDragOverlay ? itemWrapperStyle : {}}\n ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n >\n <RowVariantMapItem\n row={row}\n itemIndex={row.realIndex}\n isDragOverlay={isDragOverlay}\n ctx={ctx}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n </StyledRow>\n );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuCjB;AAvCN,mBAAkC;AAClC,uBAAuB;AACvB,8BAA6B;AAC7B,qBAAgC;AAChC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,sCAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,gBAAY,yBAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAE7D,QAAM,UAAM,yBAAW,wBAAAA,OAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,qBAAiB,4DAA0B,GAAG;AAEpD,IAAO,cAAQ;",
|
|
6
6
|
"names": ["DataTableContext"]
|
|
7
7
|
}
|
|
@@ -19,8 +19,6 @@ const ComboboxEditableCell = (props) => {
|
|
|
19
19
|
label: cellValue
|
|
20
20
|
});
|
|
21
21
|
const uniqueOptions = useMemo(() => {
|
|
22
|
-
if (cell.column.editOptions)
|
|
23
|
-
return cell.column.editOptions;
|
|
24
22
|
const uniqueValuesMap = {};
|
|
25
23
|
return flattenedData.reduce((optionsSoFar, currRow) => {
|
|
26
24
|
const currValue = currRow.original[columnId];
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\n\nexport const ComboboxEditableCell: React.ComponentType<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const {\n tableProps: { onCellValueChange },\n flattenedData,\n } = useContext(DataTableContext);\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable jsx-a11y/no-autofocus */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { DSComboBox } from '@elliemae/ds-controlled-form';\nimport { EditableCell } from '../../../exported-related';\nimport { DataTableContext } from '../../../DataTableContext';\n\nexport const ComboboxEditableCell: React.ComponentType<any> = (props) => {\n const { cell, DefaultCellRender, isRowSelected } = props;\n\n const {\n tableProps: { onCellValueChange },\n flattenedData,\n } = useContext(DataTableContext);\n const cellValue = useMemo(() => cell.value, [cell.value]);\n const columnId = useMemo(() => cell.column.id, [cell.column.id]);\n\n const [value, setValue] = useState({\n dsId: cellValue,\n type: 'option',\n value: cellValue,\n label: cellValue,\n });\n\n const uniqueOptions = useMemo(() => {\n const uniqueValuesMap = {};\n return flattenedData.reduce((optionsSoFar, currRow) => {\n const currValue = currRow.original[columnId];\n if (!uniqueValuesMap[currValue]) {\n optionsSoFar.push({ dsId: currValue, type: 'option', value: currValue, label: currValue });\n uniqueValuesMap[currValue] = true;\n }\n return optionsSoFar;\n }, []);\n }, [flattenedData, columnId]);\n\n const [currentOptions, setCurrentOptions] = useState(uniqueOptions);\n\n const handleOnBlur = useCallback(() => {\n const property = columnId;\n onCellValueChange({ value: value?.value, property, rowIndex: cell.row.index });\n }, [columnId, onCellValueChange, value?.value, cell]);\n return (\n <EditableCell\n StandardRender={DefaultCellRender}\n EditableRenderer={\n <DSComboBox\n selectedValues={value}\n autoFocus\n withoutPortal={false}\n onBlur={handleOnBlur}\n onChange={setValue}\n allOptions={uniqueOptions}\n onFilter={setCurrentOptions}\n filteredOptions={currentOptions}\n />\n }\n cell={cell}\n isRowSelected={isRowSelected}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6Cf;AA5CR,SAAgB,YAAY,UAAU,aAAa,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAE1B,MAAM,uBAAiD,CAAC,UAAU;AACvE,QAAM,EAAE,MAAM,mBAAmB,cAAc,IAAI;AAEnD,QAAM;AAAA,IACJ,YAAY,EAAE,kBAAkB;AAAA,IAChC;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAO,CAAC,KAAK,KAAK,CAAC;AACxD,QAAM,WAAW,QAAQ,MAAM,KAAK,OAAO,IAAI,CAAC,KAAK,OAAO,EAAE,CAAC;AAE/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS;AAAA,IACjC,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,EACT,CAAC;AAED,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,kBAAkB,CAAC;AACzB,WAAO,cAAc,OAAO,CAAC,cAAc,YAAY;AACrD,YAAM,YAAY,QAAQ,SAAS;AACnC,UAAI,CAAC,gBAAgB,YAAY;AAC/B,qBAAa,KAAK,EAAE,MAAM,WAAW,MAAM,UAAU,OAAO,WAAW,OAAO,UAAU,CAAC;AACzF,wBAAgB,aAAa;AAAA,MAC/B;AACA,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAAA,EACP,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,aAAa;AAElE,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW;AACjB,sBAAkB,EAAE,OAAO,OAAO,OAAO,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC;AAAA,EAC/E,GAAG,CAAC,UAAU,mBAAmB,OAAO,OAAO,IAAI,CAAC;AACpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAgB;AAAA,MAChB,kBACE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,WAAS;AAAA,UACT,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,UAAU;AAAA,UACV,iBAAiB;AAAA;AAAA,MACnB;AAAA,MAEF;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,7 +22,6 @@ const useRowStyle = (row) => {
|
|
|
22
22
|
}, [row, flattenedData]);
|
|
23
23
|
const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
|
|
24
24
|
const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
|
|
25
|
-
console.log(draggableProps, "draggableProps");
|
|
26
25
|
const isDropValid = draggableProps && draggableProps.isDropValid;
|
|
27
26
|
return {
|
|
28
27
|
rowStyle,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowStyle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport type { InternalTypescriptRow, DropIndicatorPosition } from '../../types/props';\n\nexport const useRowStyle = (\n row: InternalTypescriptRow,\n): {\n rowStyle: Record<string, unknown>;\n shouldAppendDottedBorder: boolean;\n dropIndicatorPosition: false | DropIndicatorPosition;\n isDropValid: boolean;\n} => {\n const { flattenedData } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n // ---------------------------------------------------------------------------\n // Border calculation\n // ---------------------------------------------------------------------------\n const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n if (row.original.dimsumHeaderValue) {\n return ['none', 'none', false];\n }\n if (row.isExpanded && row.original.subRows && row.depth === 0) {\n return ['1px solid #EBEDF0', 'none', true];\n }\n\n if (row.depth >= 1) {\n if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n return ['none', '2px solid #EBEDF0', false];\n }\n return ['none', 'none', true];\n }\n\n return ['none', '1px solid #EBEDF0', false];\n }, [row, flattenedData]);\n\n const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n const dropIndicatorPosition =\n draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n const isDropValid = draggableProps && draggableProps.isDropValid;\n\n return {\n rowStyle,\n shouldAppendDottedBorder,\n dropIndicatorPosition,\n isDropValid,\n };\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAG7B,MAAM,cAAc,CACzB,QAMG;AACH,QAAM,EAAE,cAAc,IAAI,WAAW,gBAAgB;AAErD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAKzD,QAAM,CAAC,WAAW,cAAc,wBAAwB,IAA+B,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ,KAAK;AAAA,IAC/B;AACA,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ,IAAI;AAAA,IAC3C;AAEA,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,MAC5C;AACA,aAAO,CAAC,QAAQ,QAAQ,IAAI;AAAA,IAC9B;AAEA,WAAO,CAAC,QAAQ,qBAAqB,KAAK;AAAA,EAC5C,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,WAAW,QAAQ,OAAO,EAAE,WAAW,aAAa,IAAI,CAAC,WAAW,YAAY,CAAC;AAEvF,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,cAAc,kBAAkB,eAAe;AAErD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,11 +14,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
14
14
|
} = React2.useContext(DataTableContext);
|
|
15
15
|
const [lastActiveId, setLastActiveId] = React2.useState(null);
|
|
16
16
|
const onReorder = useCallback(
|
|
17
|
-
(newData, {
|
|
18
|
-
targetIndex,
|
|
19
|
-
fromIndex,
|
|
20
|
-
considerExpanding
|
|
21
|
-
}) => {
|
|
17
|
+
(newData, indexes, considerExpanding) => {
|
|
22
18
|
const nodes = {};
|
|
23
19
|
newData.forEach((row) => {
|
|
24
20
|
delete row.original.subRows;
|
|
@@ -35,12 +31,9 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
35
31
|
} else
|
|
36
32
|
newUserData.push(row.original);
|
|
37
33
|
});
|
|
38
|
-
onRowsReorder(newUserData,
|
|
39
|
-
flattenedData,
|
|
40
|
-
allDataFlattened
|
|
41
|
-
});
|
|
34
|
+
onRowsReorder(newUserData, indexes, considerExpanding, { flattenedData, allDataFlattened });
|
|
42
35
|
},
|
|
43
|
-
[
|
|
36
|
+
[onRowsReorder]
|
|
44
37
|
);
|
|
45
38
|
const {
|
|
46
39
|
dndContextProps,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { Row } from '../Row';\nimport { DnDTreeContext } from './DnDTreeContext';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const [lastActiveId, setLastActiveId] = React.useState<string | null>(null);\n\n const onReorder = useCallback(\n (
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { Row } from '../Row';\nimport { DnDTreeContext } from './DnDTreeContext';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const {\n tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const [lastActiveId, setLastActiveId] = React.useState<string | null>(null);\n\n const onReorder = useCallback(\n (newData: unknown, indexes: { targetIndex: number; fromIndex: number }, considerExpanding: string) => {\n // Pull the row's original data into an object\n const nodes = {};\n newData.forEach((row) => {\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [];\n newData.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, indexes, considerExpanding, { flattenedData, allDataFlattened });\n },\n [onRowsReorder],\n );\n\n const {\n dndContextProps,\n sortableContextProps,\n activeId,\n activeIndex,\n depth,\n dropIndicatorPosition,\n visibleItems,\n isDropValid,\n } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\n visibleItems: flattenedData,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n useEffect(() => {\n if (activeId) setLastActiveId(activeId);\n }, [activeId]);\n\n const ctx = useMemo(\n () => ({\n activeIndex,\n depth,\n visibleItems,\n dropIndicatorPosition,\n lastActiveId,\n setLastActiveId,\n isDropValid,\n }),\n [activeIndex, depth, visibleItems, dropIndicatorPosition, lastActiveId, isDropValid],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...sortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }}>\n {activeId ? <Row row={flattenedData.find((row) => row.uid === activeId)} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiFjB,SAGM,KAHN;AAhFN,OAAOA,UAAS,aAAa,WAAW,eAAe;AACvD,SAAS,YAAY,aAAa,iBAAiB,2BAA2B;AAC9E,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAGxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAwB,IAAI;AAE1E,QAAM,YAAY;AAAA,IAChB,CAAC,SAAkB,SAAqD,sBAA8B;AAEpG,YAAM,QAAQ,CAAC;AACf,cAAQ,QAAQ,CAAC,QAAQ;AACvB,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,OAAO,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,cAAQ,QAAQ,CAAC,QAAQ;AAGvB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI;AAC7B,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,SAAS,mBAAmB,EAAE,eAAe,iBAAiB,CAAC;AAAA,IAC5F;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAAA,IACtB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,YAAU,MAAM;AACd,QAAI;AAAU,sBAAgB,QAAQ;AAAA,EACxC,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,aAAa,OAAO,cAAc,uBAAuB,cAAc,WAAW;AAAA,EACrF;AAEA,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB,8BAAC,eAAe,UAAf,EAAwB,OAAO,KAC9B,8BAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GACjC,qBAAW,oBAAC,OAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,QAAQ,GAAG,eAAa,MAAC,IAAK,MAC9F;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Row.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuCjB;AAvCN,SAAgB,kBAAkB;AAClC,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,kBAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { setMultipleRefs } from '../helpers';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\n// Sortable Items needs to update\n// - the virtual list ref (for react-virtual requirement)\n// - (conditionally) draggableProps.setNodeRef for drag and drop of rows\nconst setItemRefs = (measureRef, draggableRef, ref) => {\n const refsToSet = [];\n if (measureRef) refsToSet.push(measureRef);\n if (draggableRef) refsToSet.push(draggableRef);\n setMultipleRefs(...refsToSet)(ref);\n};\n\nconst StyledRow = styled('div')`\n cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows },\n focusedRowId,\n drilldownRowId,\n } = ctx;\n const { draggableProps } = useContext(SortableItemContext);\n const draggableRef = draggableProps && draggableProps.setNodeRef;\n return (\n <StyledRow\n isDisabled={disabledRows[row.uid]}\n style={!isDragOverlay ? itemWrapperStyle : {}}\n ref={(ref) => setItemRefs(measureRef, draggableRef, ref)}\n >\n <RowVariantMapItem\n row={row}\n itemIndex={row.realIndex}\n isDragOverlay={isDragOverlay}\n ctx={ctx}\n focusedRowId={focusedRowId}\n drilldownRowId={drilldownRowId}\n />\n </StyledRow>\n );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\nexport default RowWithContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuCjB;AAvCN,SAAgB,kBAAkB;AAClC,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAKlC,MAAM,cAAc,CAAC,YAAY,cAAc,QAAQ;AACrD,QAAM,YAAY,CAAC;AACnB,MAAI;AAAY,cAAU,KAAK,UAAU;AACzC,MAAI;AAAc,cAAU,KAAK,YAAY;AAC7C,kBAAgB,GAAG,SAAS,EAAE,GAAG;AACnC;AAEA,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAE7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,CAAC,QAAQ,YAAY,YAAY,cAAc,GAAG;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;AAEpD,IAAO,cAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.13.0
|
|
3
|
+
"version": "3.13.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -573,23 +573,23 @@
|
|
|
573
573
|
"dependencies": {
|
|
574
574
|
"react-virtual": "~2.10.4",
|
|
575
575
|
"uid": "~2.0.0",
|
|
576
|
-
"@elliemae/ds-button": "3.13.0
|
|
577
|
-
"@elliemae/ds-circular-progress-indicator": "3.13.0
|
|
578
|
-
"@elliemae/ds-controlled-form": "3.13.0
|
|
579
|
-
"@elliemae/ds-
|
|
580
|
-
"@elliemae/ds-
|
|
581
|
-
"@elliemae/ds-form": "3.13.0
|
|
582
|
-
"@elliemae/ds-form-layout-blocks": "3.13.0
|
|
583
|
-
"@elliemae/ds-
|
|
584
|
-
"@elliemae/ds-
|
|
585
|
-
"@elliemae/ds-
|
|
586
|
-
"@elliemae/ds-pills": "3.13.0
|
|
587
|
-
"@elliemae/ds-
|
|
588
|
-
"@elliemae/ds-skeleton": "3.13.0
|
|
589
|
-
"@elliemae/ds-system": "3.13.0
|
|
590
|
-
"@elliemae/ds-toolbar": "3.13.0
|
|
591
|
-
"@elliemae/ds-truncated-tooltip-text": "3.13.0
|
|
592
|
-
"@elliemae/ds-utilities": "3.13.0
|
|
576
|
+
"@elliemae/ds-button": "3.13.0",
|
|
577
|
+
"@elliemae/ds-circular-progress-indicator": "3.13.0",
|
|
578
|
+
"@elliemae/ds-controlled-form": "3.13.0",
|
|
579
|
+
"@elliemae/ds-dropdownmenu": "3.13.0",
|
|
580
|
+
"@elliemae/ds-drag-and-drop": "3.13.0",
|
|
581
|
+
"@elliemae/ds-form": "3.13.0",
|
|
582
|
+
"@elliemae/ds-form-layout-blocks": "3.13.0",
|
|
583
|
+
"@elliemae/ds-pagination": "3.13.0",
|
|
584
|
+
"@elliemae/ds-grid": "3.13.0",
|
|
585
|
+
"@elliemae/ds-popperjs": "3.13.0",
|
|
586
|
+
"@elliemae/ds-pills": "3.13.0",
|
|
587
|
+
"@elliemae/ds-icons": "3.13.0",
|
|
588
|
+
"@elliemae/ds-skeleton": "3.13.0",
|
|
589
|
+
"@elliemae/ds-system": "3.13.0",
|
|
590
|
+
"@elliemae/ds-toolbar": "3.13.0",
|
|
591
|
+
"@elliemae/ds-truncated-tooltip-text": "3.13.0",
|
|
592
|
+
"@elliemae/ds-utilities": "3.13.0"
|
|
593
593
|
},
|
|
594
594
|
"devDependencies": {
|
|
595
595
|
"@testing-library/react": "~12.1.3",
|