@elliemae/ds-data-table 3.11.0-rc.2 → 3.11.0-rc.3
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/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +1 -1
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +3 -3
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +15 -14
- package/dist/cjs/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +1 -1
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +3 -3
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js +15 -14
- package/dist/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map +2 -2
- package/package.json +18 -18
|
@@ -41,7 +41,7 @@ const multiSelectColumn = {
|
|
|
41
41
|
flattenedData
|
|
42
42
|
} = ctx;
|
|
43
43
|
const dtSelection = selection ?? {};
|
|
44
|
-
const selectionKeyCount = Object.keys(dtSelection).length;
|
|
44
|
+
const selectionKeyCount = Object.keys(dtSelection).filter((selection2) => dtSelection[selection2]).length;
|
|
45
45
|
const currentGlobalState = (0, import_react.useMemo)(
|
|
46
46
|
() => selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length ? "mixed" : selectionKeyCount > 0,
|
|
47
47
|
[selectionKeyCount, flattenedData, disabledRows]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAoD;AACpD,gCAAqC;AAErC,uBAA4B;AAErB,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,MACzD;AAAA,MACA;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n const selectionKeyCount = Object.keys(dtSelection).filter((selection) => dtSelection[selection]).length;\n\n const currentGlobalState = useMemo(\n () =>\n selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n ? 'mixed'\n : selectionKeyCount > 0,\n [selectionKeyCount, flattenedData, disabledRows],\n );\n\n // global state toggling: false to true, mixed to true, true to false\n const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n const newSelection: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n isShiftPressed,\n setIsShiftPressed,\n flattenedData,\n lastSelected,\n } = ctx;\n\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const isShiftPressedKeyRef = useRef(false);\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n onSelectionChange(newSelection, uid, e);\n },\n [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n );\n\n const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(false);\n isShiftPressedKeyRef.current = false;\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n if (e.shiftKey) {\n isShiftPressedKeyRef.current = true;\n }\n e.stopPropagation();\n }, []);\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["selection"]
|
|
7
7
|
}
|
|
@@ -63,22 +63,23 @@ const useRowRendererHandlers = ({
|
|
|
63
63
|
if (selection && onSelectionChange) {
|
|
64
64
|
if (selectSingle) {
|
|
65
65
|
onSelectionChange({ [uid]: true });
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
66
|
+
} else {
|
|
67
|
+
const newSelection = { ...selection, [uid]: !selection[uid] };
|
|
68
|
+
if (!newSelection[uid])
|
|
69
|
+
delete newSelection[uid];
|
|
70
|
+
const now = Number.parseInt(uid, 10);
|
|
71
|
+
if (e.shiftKey && lastSelected.current > -1) {
|
|
72
|
+
for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {
|
|
73
|
+
const correctDataIndex = flattenedData[i].id;
|
|
74
|
+
if (!Object.keys(disabledRows).includes(correctDataIndex))
|
|
75
|
+
newSelection[correctDataIndex] = newSelection[lastSelected.current];
|
|
76
|
+
if (!newSelection[correctDataIndex])
|
|
77
|
+
delete newSelection[correctDataIndex];
|
|
78
|
+
}
|
|
78
79
|
}
|
|
80
|
+
lastSelected.current = now;
|
|
81
|
+
onSelectionChange(newSelection, uid, e);
|
|
79
82
|
}
|
|
80
|
-
lastSelected.current = now;
|
|
81
|
-
onSelectionChange(newSelection, uid, e);
|
|
82
83
|
}
|
|
83
84
|
onRowFocus(
|
|
84
85
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n if (selectSingle) {\n onSelectionChange({ [uid]: true });\n }\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n if (selectSingle) {\n onSelectionChange({ [uid]: true });\n } else {\n const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if (e.shiftKey && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n\n onSelectionChange(newSelection, uid, e);\n }\n }\n onRowFocus(\n {\n itemIndex,\n scrollToItem: (\n opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n align: 'start',\n },\n ) => scrollToIndex(itemIndex, opts),\n original,\n },\n e,\n );\n },\n [\n row,\n disabledRows,\n onRowClick,\n selection,\n onSelectionChange,\n onRowFocus,\n itemIndex,\n selectSingle,\n lastSelected,\n flattenedData,\n scrollToIndex,\n ],\n );\n\n const isActive = draggableProps && draggableProps.active;\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isDragOverlay || isActive) {\n e.preventDefault();\n return;\n }\n const { target } = e;\n const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n if (e.code === 'Enter') {\n if (!isChildEvent) {\n e.preventDefault();\n if (drilldownRowId !== row.uid) {\n setDrilldownRowId(row.uid);\n setTimeout(() => {\n const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n if (focuseableCell) focuseableCell.ref.current.focus();\n });\n }\n }\n }\n if (e.code === 'Space') {\n if (!isChildEvent) {\n e.preventDefault();\n }\n handleItemClick(e, row);\n }\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const next = findInCircularList(items, itemIndex, isOptionFocuseable);\n setFocusedRowId(items[next].uid);\n }\n if (e.code === 'ArrowUp') {\n e.preventDefault();\n const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);\n setFocusedRowId(items[prev].uid);\n }\n },\n [\n isDragOverlay,\n isActive,\n drilldownRowId,\n row,\n setDrilldownRowId,\n handleItemClick,\n items,\n itemIndex,\n isOptionFocuseable,\n setFocusedRowId,\n ],\n );\n\n const handleOnBlur = useCallback(\n (e) => {\n if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {\n setDrilldownRowId(null);\n }\n },\n [setDrilldownRowId],\n );\n\n const handleOnFocus: React.FocusEventHandler = useCallback(\n (e) => {\n if (\n !disabledRows[row.uid] &&\n e.target &&\n e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT\n ) {\n setFocusedRowId(row.uid);\n }\n },\n [row.uid, setFocusedRowId, disabledRows],\n );\n\n return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -12,7 +12,7 @@ const multiSelectColumn = {
|
|
|
12
12
|
flattenedData
|
|
13
13
|
} = ctx;
|
|
14
14
|
const dtSelection = selection ?? {};
|
|
15
|
-
const selectionKeyCount = Object.keys(dtSelection).length;
|
|
15
|
+
const selectionKeyCount = Object.keys(dtSelection).filter((selection2) => dtSelection[selection2]).length;
|
|
16
16
|
const currentGlobalState = useMemo(
|
|
17
17
|
() => selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length ? "mixed" : selectionKeyCount > 0,
|
|
18
18
|
[selectionKeyCount, flattenedData, disabledRows]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,QAAQ,mBAAmB;AACpD,SAAS,4BAA4B;AAErC,SAAS,mBAAmB;AAErB,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,MACzD;AAAA,MACA;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useRef, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn<HTMLInputElement> = {\n // Build our multiSelecter column\n id: 'multiSelecter', // Make sure it has an ID\n Header: ({ ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n allDataFlattened,\n flattenedData,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n const selectionKeyCount = Object.keys(dtSelection).filter((selection) => dtSelection[selection]).length;\n\n const currentGlobalState = useMemo(\n () =>\n selectionKeyCount > 0 && selectionKeyCount < flattenedData.filter((datum) => !disabledRows[datum.id]).length\n ? 'mixed'\n : selectionKeyCount > 0,\n [selectionKeyCount, flattenedData, disabledRows],\n );\n\n // global state toggling: false to true, mixed to true, true to false\n const newGlobalStateAfterToggle = useMemo(() => currentGlobalState !== true, [currentGlobalState]);\n\n const newSelection: TypescriptSelection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<TypescriptSelection>((newSelectionObject, datum) => {\n newSelectionObject[datum.uid] = !disabledRows[datum.uid];\n return newSelectionObject;\n }, {});\n }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n onSelectionChange(newSelection, 'All', e);\n },\n [newSelection, onSelectionChange],\n );\n\n const ariaControls = useMemo(\n () => allDataFlattened.map((datum) => `data-table-checkbox-${datum.uid}`).join(' '),\n [allDataFlattened],\n );\n\n return (\n <DSControlledCheckbox\n aria-controls={ariaControls}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n aria-label=\"Toggle all rows selected\"\n checked={currentGlobalState}\n onChange={onChangeHandler}\n style={{ cursor: 'pointer' }}\n />\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n isShiftPressed,\n setIsShiftPressed,\n flattenedData,\n lastSelected,\n } = ctx;\n\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const isShiftPressedKeyRef = useRef(false);\n const onChangeHandler = useCallback(\n (newState: boolean, e: React.ChangeEvent) => {\n const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if ((isShiftPressed || isShiftPressedKeyRef.current) && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n onSelectionChange(newSelection, uid, e);\n },\n [disabledRows, flattenedData, isShiftPressed, lastSelected, onSelectionChange, selection, uid],\n );\n\n const onKeyDownHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.code === 'Shift' || e.shiftKey);\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const onKeyUpHandler: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(false);\n isShiftPressedKeyRef.current = false;\n e.stopPropagation();\n },\n [setIsShiftPressed],\n );\n\n const stopThePropagation = useCallback((e: React.MouseEvent | React.KeyboardEvent) => {\n if (e.shiftKey) {\n isShiftPressedKeyRef.current = true;\n }\n e.stopPropagation();\n }, []);\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={onKeyDownHandler} onKeyUp={onKeyUpHandler}>\n <DSControlledCheckbox\n id={`data-table-checkbox-${uid}`}\n data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n aria-label=\"Toggle row selected\"\n aria-checked={selectedState}\n aria-disabled={false}\n checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n style={{ cursor: 'pointer' }}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["selection"]
|
|
7
7
|
}
|
|
@@ -34,22 +34,23 @@ const useRowRendererHandlers = ({
|
|
|
34
34
|
if (selection && onSelectionChange) {
|
|
35
35
|
if (selectSingle) {
|
|
36
36
|
onSelectionChange({ [uid]: true });
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
} else {
|
|
38
|
+
const newSelection = { ...selection, [uid]: !selection[uid] };
|
|
39
|
+
if (!newSelection[uid])
|
|
40
|
+
delete newSelection[uid];
|
|
41
|
+
const now = Number.parseInt(uid, 10);
|
|
42
|
+
if (e.shiftKey && lastSelected.current > -1) {
|
|
43
|
+
for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {
|
|
44
|
+
const correctDataIndex = flattenedData[i].id;
|
|
45
|
+
if (!Object.keys(disabledRows).includes(correctDataIndex))
|
|
46
|
+
newSelection[correctDataIndex] = newSelection[lastSelected.current];
|
|
47
|
+
if (!newSelection[correctDataIndex])
|
|
48
|
+
delete newSelection[correctDataIndex];
|
|
49
|
+
}
|
|
49
50
|
}
|
|
51
|
+
lastSelected.current = now;
|
|
52
|
+
onSelectionChange(newSelection, uid, e);
|
|
50
53
|
}
|
|
51
|
-
lastSelected.current = now;
|
|
52
|
-
onSelectionChange(newSelection, uid, e);
|
|
53
54
|
}
|
|
54
55
|
onRowFocus(
|
|
55
56
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n if (selectSingle) {\n onSelectionChange({ [uid]: true });\n }\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { InternalTypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n row,\n itemIndex,\n items,\n draggableProps,\n isDragOverlay,\n drilldownRowId,\n}: {\n row: InternalTypescriptRow;\n itemIndex: number;\n items: InternalTypescriptRow[];\n draggableProps: SortableItemContextType['draggableProps'];\n isDragOverlay: boolean;\n drilldownRowId: string | null;\n}): {\n handleItemClick: React.MouseEventHandler;\n handleKeyDown: React.KeyboardEventHandler;\n handleOnBlur: React.FocusEventHandler;\n handleOnFocus: React.FocusEventHandler;\n} => {\n const {\n tableProps: { onRowClick, onSelectionChange, selectSingle, selection, onRowFocus, disabledRows },\n virtualListHelpers: { scrollToIndex },\n setDrilldownRowId,\n setFocusedRowId,\n lastSelected,\n flattenedData,\n } = useContext(DataTableContext);\n\n const isOptionFocuseable = (opt): boolean => !disabledRows[opt.uid];\n\n const findInCircularList = (\n list,\n from: number,\n criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n ): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (criteria(list[i])) return i;\n }\n return from; // return same item\n };\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent, { original, uid } = row) => {\n if (disabledRows[uid]) return;\n onRowClick(original, e, uid);\n if (selection && onSelectionChange) {\n if (selectSingle) {\n onSelectionChange({ [uid]: true });\n } else {\n const newSelection = { ...selection, [uid]: !selection[uid] }; // we only want true and mixed values\n if (!newSelection[uid]) delete newSelection[uid]; // if newState is false, remove from the new selection\n const now = Number.parseInt(uid, 10);\n if (e.shiftKey && lastSelected.current > -1) {\n for (let i = Math.min(lastSelected.current, now); i <= Math.max(lastSelected.current, now); i += 1) {\n const correctDataIndex = flattenedData[i].id;\n if (!Object.keys(disabledRows).includes(correctDataIndex))\n newSelection[correctDataIndex] = newSelection[lastSelected.current];\n if (!newSelection[correctDataIndex]) delete newSelection[correctDataIndex];\n }\n }\n lastSelected.current = now;\n\n onSelectionChange(newSelection, uid, e);\n }\n }\n onRowFocus(\n {\n itemIndex,\n scrollToItem: (\n opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n align: 'start',\n },\n ) => scrollToIndex(itemIndex, opts),\n original,\n },\n e,\n );\n },\n [\n row,\n disabledRows,\n onRowClick,\n selection,\n onSelectionChange,\n onRowFocus,\n itemIndex,\n selectSingle,\n lastSelected,\n flattenedData,\n scrollToIndex,\n ],\n );\n\n const isActive = draggableProps && draggableProps.active;\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (isDragOverlay || isActive) {\n e.preventDefault();\n return;\n }\n const { target } = e;\n const isChildEvent = (target as HTMLElement).getAttribute('role') !== 'row'; // if the event comes from a row\n\n if (e.code === 'Enter') {\n if (!isChildEvent) {\n e.preventDefault();\n if (drilldownRowId !== row.uid) {\n setDrilldownRowId(row.uid);\n setTimeout(() => {\n const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n if (focuseableCell) focuseableCell.ref.current.focus();\n });\n }\n }\n }\n if (e.code === 'Space') {\n if (!isChildEvent) {\n e.preventDefault();\n }\n handleItemClick(e, row);\n }\n if (e.code === 'ArrowDown') {\n e.preventDefault();\n e.stopPropagation();\n const next = findInCircularList(items, itemIndex, isOptionFocuseable);\n setFocusedRowId(items[next].uid);\n }\n if (e.code === 'ArrowUp') {\n e.preventDefault();\n const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);\n setFocusedRowId(items[prev].uid);\n }\n },\n [\n isDragOverlay,\n isActive,\n drilldownRowId,\n row,\n setDrilldownRowId,\n handleItemClick,\n items,\n itemIndex,\n isOptionFocuseable,\n setFocusedRowId,\n ],\n );\n\n const handleOnBlur = useCallback(\n (e) => {\n if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {\n setDrilldownRowId(null);\n }\n },\n [setDrilldownRowId],\n );\n\n const handleOnFocus: React.FocusEventHandler = useCallback(\n (e) => {\n if (\n !disabledRows[row.uid] &&\n e.target &&\n e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT\n ) {\n setFocusedRowId(row.uid);\n }\n },\n [row.uid, setFocusedRowId, disabledRows],\n );\n\n return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
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.11.0-rc.
|
|
3
|
+
"version": "3.11.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -571,23 +571,23 @@
|
|
|
571
571
|
"indent": 4
|
|
572
572
|
},
|
|
573
573
|
"dependencies": {
|
|
574
|
-
"@elliemae/ds-button": "3.11.0-rc.
|
|
575
|
-
"@elliemae/ds-circular-progress-indicator": "3.11.0-rc.
|
|
576
|
-
"@elliemae/ds-controlled-form": "3.11.0-rc.
|
|
577
|
-
"@elliemae/ds-drag-and-drop": "3.11.0-rc.
|
|
578
|
-
"@elliemae/ds-dropdownmenu": "3.11.0-rc.
|
|
579
|
-
"@elliemae/ds-form": "3.11.0-rc.
|
|
580
|
-
"@elliemae/ds-form-layout-blocks": "3.11.0-rc.
|
|
581
|
-
"@elliemae/ds-grid": "3.11.0-rc.
|
|
582
|
-
"@elliemae/ds-icons": "3.11.0-rc.
|
|
583
|
-
"@elliemae/ds-pagination": "3.11.0-rc.
|
|
584
|
-
"@elliemae/ds-pills": "3.11.0-rc.
|
|
585
|
-
"@elliemae/ds-popperjs": "3.11.0-rc.
|
|
586
|
-
"@elliemae/ds-skeleton": "3.11.0-rc.
|
|
587
|
-
"@elliemae/ds-system": "3.11.0-rc.
|
|
588
|
-
"@elliemae/ds-toolbar": "3.11.0-rc.
|
|
589
|
-
"@elliemae/ds-truncated-tooltip-text": "3.11.0-rc.
|
|
590
|
-
"@elliemae/ds-utilities": "3.11.0-rc.
|
|
574
|
+
"@elliemae/ds-button": "3.11.0-rc.3",
|
|
575
|
+
"@elliemae/ds-circular-progress-indicator": "3.11.0-rc.3",
|
|
576
|
+
"@elliemae/ds-controlled-form": "3.11.0-rc.3",
|
|
577
|
+
"@elliemae/ds-drag-and-drop": "3.11.0-rc.3",
|
|
578
|
+
"@elliemae/ds-dropdownmenu": "3.11.0-rc.3",
|
|
579
|
+
"@elliemae/ds-form": "3.11.0-rc.3",
|
|
580
|
+
"@elliemae/ds-form-layout-blocks": "3.11.0-rc.3",
|
|
581
|
+
"@elliemae/ds-grid": "3.11.0-rc.3",
|
|
582
|
+
"@elliemae/ds-icons": "3.11.0-rc.3",
|
|
583
|
+
"@elliemae/ds-pagination": "3.11.0-rc.3",
|
|
584
|
+
"@elliemae/ds-pills": "3.11.0-rc.3",
|
|
585
|
+
"@elliemae/ds-popperjs": "3.11.0-rc.3",
|
|
586
|
+
"@elliemae/ds-skeleton": "3.11.0-rc.3",
|
|
587
|
+
"@elliemae/ds-system": "3.11.0-rc.3",
|
|
588
|
+
"@elliemae/ds-toolbar": "3.11.0-rc.3",
|
|
589
|
+
"@elliemae/ds-truncated-tooltip-text": "3.11.0-rc.3",
|
|
590
|
+
"@elliemae/ds-utilities": "3.11.0-rc.3",
|
|
591
591
|
"react-virtual": "~2.10.4",
|
|
592
592
|
"uid": "~2.0.0"
|
|
593
593
|
},
|