@elliemae/ds-data-table 3.10.0-next.8 → 3.10.1
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 +4 -6
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/cjs/configs/useTableColsWithAddons.js +3 -3
- package/dist/cjs/configs/useTableColsWithAddons.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +4 -6
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/configs/useTableColsWithAddons.js +3 -3
- package/dist/esm/configs/useTableColsWithAddons.js.map +2 -2
- package/package.json +18 -18
|
@@ -56,7 +56,7 @@ const multiSelectColumn = {
|
|
|
56
56
|
}, {});
|
|
57
57
|
}, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
|
|
58
58
|
const onChangeHandler = (0, import_react.useCallback)(
|
|
59
|
-
(e) => {
|
|
59
|
+
(newState, e) => {
|
|
60
60
|
onSelectionChange(newSelection, "All", e);
|
|
61
61
|
},
|
|
62
62
|
[newSelection, onSelectionChange]
|
|
@@ -81,14 +81,13 @@ const multiSelectColumn = {
|
|
|
81
81
|
const { uid } = row;
|
|
82
82
|
const selectedState = selection?.[uid] ?? false;
|
|
83
83
|
const onChangeHandler = (0, import_react.useCallback)(
|
|
84
|
-
(e) => {
|
|
85
|
-
const newState = !selectedState;
|
|
84
|
+
(newState, e) => {
|
|
86
85
|
const newSelection = { ...selection, [uid]: newState };
|
|
87
86
|
if (!newState)
|
|
88
87
|
delete newSelection[uid];
|
|
89
88
|
onSelectionChange(newSelection, uid, e);
|
|
90
89
|
},
|
|
91
|
-
[onSelectionChange,
|
|
90
|
+
[onSelectionChange, selection, uid]
|
|
92
91
|
);
|
|
93
92
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
94
93
|
role: "presentation",
|
|
@@ -101,8 +100,7 @@ const multiSelectColumn = {
|
|
|
101
100
|
"aria-checked": selectedState,
|
|
102
101
|
"aria-disabled": false,
|
|
103
102
|
checked: selectedState,
|
|
104
|
-
|
|
105
|
-
onChange: (_, e) => e.stopPropagation(),
|
|
103
|
+
onChange: onChangeHandler,
|
|
106
104
|
disabled: disabledRows[row.uid],
|
|
107
105
|
innerRef: cell.ref,
|
|
108
106
|
tabIndex: isRowSelected ? 0 : -1,
|
|
@@ -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, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\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, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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 (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 } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA4C;AAC5C,gCAAqC;AAErC,uBAA4B;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM,aAAa;AAAA,MAC/D;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,yBAAqB;AAAA,MACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB;AAAA,MAChG,CAAC,mBAAmB,IAAI;AAAA,IAC1B;AAGA,UAAM,gCAA4B,sBAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,mBAAoC,sBAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,sBAAkB;AAAA,MACtB,CAAC,MAAyB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\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, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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 } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA4C;AAC5C,gCAAqC;AAErC,uBAA4B;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM,aAAa;AAAA,MAC/D;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,yBAAqB;AAAA,MACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB;AAAA,MAChG,CAAC,mBAAmB,IAAI;AAAA,IAC1B;AAGA,UAAM,gCAA4B,sBAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,mBAAoC,sBAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,sBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAyB;AAC3C,0BAAkB,cAAc,OAAO,CAAC;AAAA,MAC1C;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAClC;AAEA,UAAM,mBAAe;AAAA,MACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG;AAAA,MAClF,CAAC,gBAAgB;AAAA,IACnB;AAEA,WACE,4CAAC;AAAA,MACC,iBAAe;AAAA,MACf,eAAa,6BAAY;AAAA,MACzB,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,IAAI,MAAM;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,IAC3D,IAAI;AACJ,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,YAAY,QAAQ;AAE1C,UAAM,sBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAyB;AAC3C,cAAM,eAAe,EAAE,GAAG,WAAW,CAAC,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,CAAC,mBAAmB,WAAW,GAAG;AAAA,IACpC;AAEA,WACE,4CAAC;AAAA,MAAI,MAAK;AAAA,MAAe,SAAS;AAAA,MAAoB,WAAW;AAAA,MAC/D,sDAAC;AAAA,QACC,IAAI,uBAAuB;AAAA,QAC3B,eAAa,6BAAY;AAAA,QACzB,cAAW;AAAA,QACX,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,aAAa,IAAI;AAAA,QAC3B,UAAU,KAAK;AAAA,QACf,UAAU,gBAAgB,IAAI;AAAA,QAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,OAC7B;AAAA,KACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,6 +62,7 @@ const useTableColsWithAddons = ({
|
|
|
62
62
|
}) => (0, import_react.useMemo)(() => {
|
|
63
63
|
const columnsWithAddons = [...augmentColumns(columns)];
|
|
64
64
|
const colsToPrepend = [];
|
|
65
|
+
const colsToAppend = [];
|
|
65
66
|
if (isExpandable)
|
|
66
67
|
colsToPrepend.push(import_Columns.expandRowColumn);
|
|
67
68
|
if (selection && !noSelectionColumn) {
|
|
@@ -72,7 +73,8 @@ const useTableColsWithAddons = ({
|
|
|
72
73
|
}
|
|
73
74
|
if (dragAndDropRows)
|
|
74
75
|
colsToPrepend.push(import_Columns.dragHandleColumn);
|
|
75
|
-
|
|
76
|
+
if (renderRowActions)
|
|
77
|
+
colsToAppend.push((0, import_Columns.actionColumn)(renderRowActions));
|
|
76
78
|
colsToPrepend.forEach((col) => {
|
|
77
79
|
if (!isColumnInArrayOfColumns(columnsWithAddons, col))
|
|
78
80
|
columnsWithAddons.unshift(col);
|
|
@@ -81,8 +83,6 @@ const useTableColsWithAddons = ({
|
|
|
81
83
|
if (!isColumnInArrayOfColumns(columnsWithAddons, col))
|
|
82
84
|
columnsWithAddons.push(col);
|
|
83
85
|
});
|
|
84
|
-
if (renderRowActions)
|
|
85
|
-
columnsWithAddons.push((0, import_Columns.actionColumn)(renderRowActions));
|
|
86
86
|
return columnsWithAddons;
|
|
87
87
|
}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
|
|
88
88
|
var useTableColsWithAddons_default = useTableColsWithAddons;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/useTableColsWithAddons.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport { TypescriptColumn, TypescriptProps } from '../types/props';\n\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns';\n\ntype useTableColsWithAddonsType = (config: TypescriptProps) => TypescriptColumn[];\n\nconst augmentColumns = (columns: TypescriptColumn[]): TypescriptColumn[] => {\n const augmentColumn = (column: TypescriptColumn, index: number, parentId = null, depth = 0) => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return {\n id,\n parentId,\n depth,\n ...column,\n ref: createRef<HTMLTableColElement>(),\n };\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: TypescriptColumn[], col: TypescriptColumn) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: useTableColsWithAddonsType = ({\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n}) =>\n useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n\n // Columns to be prepended\n const colsToPrepend: TypescriptColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (selection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn);\n else colsToPrepend.push(multiSelectColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmC;AAGnC,qBAMO;AAIP,MAAM,iBAAiB,CAAC,YAAoD;AAC1E,QAAM,gBAAgB,CAAC,QAA0B,OAAe,WAAW,MAAM,QAAQ,MAAM;AAC7F,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,QAAI,OAAO;AAAS,aAAO,UAAU,OAAO,QAAQ,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACxG,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AAAA,EACF;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAA6B,QAC7D,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,UACE,sBAAQ,MAAM;AACZ,QAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,QAAM,gBAAoC,CAAC;AAE3C,MAAI;AAAc,kBAAc,KAAK,8BAAe;AACpD,MAAI,aAAa,CAAC,mBAAmB;AACnC,QAAI;AAAc,oBAAc,KAAK,iCAAkB;AAAA;AAClD,oBAAc,KAAK,gCAAiB;AAAA,EAC3C;AACA,MAAI;AAAiB,kBAAc,KAAK,+BAAgB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport { TypescriptColumn, TypescriptProps } from '../types/props';\n\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns';\n\ntype useTableColsWithAddonsType = (config: TypescriptProps) => TypescriptColumn[];\n\nconst augmentColumns = (columns: TypescriptColumn[]): TypescriptColumn[] => {\n const augmentColumn = (column: TypescriptColumn, index: number, parentId = null, depth = 0) => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return {\n id,\n parentId,\n depth,\n ...column,\n ref: createRef<HTMLTableColElement>(),\n };\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: TypescriptColumn[], col: TypescriptColumn) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: useTableColsWithAddonsType = ({\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n}) =>\n useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n\n // Columns to be prepended\n const colsToPrepend: TypescriptColumn[] = [];\n // Columns to be appended\n const colsToAppend: TypescriptColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (selection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn);\n else colsToPrepend.push(multiSelectColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n\n return columnsWithAddons;\n }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);\n\nexport { useTableColsWithAddons };\nexport default useTableColsWithAddons;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmC;AAGnC,qBAMO;AAIP,MAAM,iBAAiB,CAAC,YAAoD;AAC1E,QAAM,gBAAgB,CAAC,QAA0B,OAAe,WAAW,MAAM,QAAQ,MAAM;AAC7F,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,QAAI,OAAO;AAAS,aAAO,UAAU,OAAO,QAAQ,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACxG,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,SAAK,wBAA+B;AAAA,IACtC;AAAA,EACF;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAA6B,QAC7D,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,UACE,sBAAQ,MAAM;AACZ,QAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,QAAM,gBAAoC,CAAC;AAE3C,QAAM,eAAmC,CAAC;AAE1C,MAAI;AAAc,kBAAc,KAAK,8BAAe;AACpD,MAAI,aAAa,CAAC,mBAAmB;AACnC,QAAI;AAAc,oBAAc,KAAK,iCAAkB;AAAA;AAClD,oBAAc,KAAK,gCAAiB;AAAA,EAC3C;AACA,MAAI;AAAiB,kBAAc,KAAK,+BAAgB;AACxD,MAAI;AAAkB,iBAAa,SAAK,6BAAa,gBAAgB,CAAC;AAItE,gBAAc,QAAQ,CAAC,QAAQ;AAC7B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,QAAQ,GAAG;AAAA,EACtF,CAAC;AACD,eAAa,QAAQ,CAAC,QAAQ;AAC5B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,KAAK,GAAG;AAAA,EACnF,CAAC;AAGD,SAAO;AACT,GAAG,CAAC,SAAS,cAAc,WAAW,mBAAmB,cAAc,iBAAiB,gBAAgB,CAAC;AAG3G,IAAO,iCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,7 +27,7 @@ const multiSelectColumn = {
|
|
|
27
27
|
}, {});
|
|
28
28
|
}, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
|
|
29
29
|
const onChangeHandler = useCallback(
|
|
30
|
-
(e) => {
|
|
30
|
+
(newState, e) => {
|
|
31
31
|
onSelectionChange(newSelection, "All", e);
|
|
32
32
|
},
|
|
33
33
|
[newSelection, onSelectionChange]
|
|
@@ -52,14 +52,13 @@ const multiSelectColumn = {
|
|
|
52
52
|
const { uid } = row;
|
|
53
53
|
const selectedState = selection?.[uid] ?? false;
|
|
54
54
|
const onChangeHandler = useCallback(
|
|
55
|
-
(e) => {
|
|
56
|
-
const newState = !selectedState;
|
|
55
|
+
(newState, e) => {
|
|
57
56
|
const newSelection = { ...selection, [uid]: newState };
|
|
58
57
|
if (!newState)
|
|
59
58
|
delete newSelection[uid];
|
|
60
59
|
onSelectionChange(newSelection, uid, e);
|
|
61
60
|
},
|
|
62
|
-
[onSelectionChange,
|
|
61
|
+
[onSelectionChange, selection, uid]
|
|
63
62
|
);
|
|
64
63
|
return /* @__PURE__ */ jsx("div", {
|
|
65
64
|
role: "presentation",
|
|
@@ -72,8 +71,7 @@ const multiSelectColumn = {
|
|
|
72
71
|
"aria-checked": selectedState,
|
|
73
72
|
"aria-disabled": false,
|
|
74
73
|
checked: selectedState,
|
|
75
|
-
|
|
76
|
-
onChange: (_, e) => e.stopPropagation(),
|
|
74
|
+
onChange: onChangeHandler,
|
|
77
75
|
disabled: disabledRows[row.uid],
|
|
78
76
|
innerRef: cell.ref,
|
|
79
77
|
tabIndex: isRowSelected ? 0 : -1,
|
|
@@ -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, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\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, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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 (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 } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\n const onChangeHandler = useCallback(\n (e: React.ChangeEvent) => {\n const
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,4BAA4B;AAErC,SAAS,mBAAmB;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM,aAAa;AAAA,MAC/D;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,qBAAqB;AAAA,MACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB;AAAA,MAChG,CAAC,mBAAmB,IAAI;AAAA,IAC1B;AAGA,UAAM,4BAA4B,QAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAoC,QAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB;AAAA,MACtB,CAAC,MAAyB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-controlled-form';\nimport { TypescriptColumn, TypescriptSelection } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\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, data, disabledRows },\n allDataFlattened,\n } = ctx;\n\n // We for sure have selection, so we just typecast it for TS reasons\n const dtSelection = selection ?? {};\n\n const selectionKeyCount = Object.keys(dtSelection).length;\n\n const currentGlobalState = useMemo(\n () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n [selectionKeyCount, data],\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 } = ctx;\n const { uid } = row;\n const selectedState = selection?.[uid] ?? false;\n\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 onSelectionChange(newSelection, uid, e);\n },\n [onSelectionChange, selection, uid],\n );\n\n return (\n <div role=\"presentation\" onClick={stopThePropagation} onKeyDown={stopThePropagation}>\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": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,4BAA4B;AAErC,SAAS,mBAAmB;AAE5B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,oBAAwD;AAAA,EAEnE,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,IAAI,MAAM;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM,aAAa;AAAA,MAC/D;AAAA,IACF,IAAI;AAGJ,UAAM,cAAc,aAAa,CAAC;AAElC,UAAM,oBAAoB,OAAO,KAAK,WAAW,EAAE;AAEnD,UAAM,qBAAqB;AAAA,MACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB;AAAA,MAChG,CAAC,mBAAmB,IAAI;AAAA,IAC1B;AAGA,UAAM,4BAA4B,QAAQ,MAAM,uBAAuB,MAAM,CAAC,kBAAkB,CAAC;AAEjG,UAAM,eAAoC,QAAQ,MAAM;AACtD,UAAI,CAAC;AAA2B,eAAO,CAAC;AAExC,aAAO,iBAAiB,OAA4B,CAAC,oBAAoB,UAAU;AACjF,2BAAmB,MAAM,OAAO,CAAC,aAAa,MAAM;AACpD,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAAA,IACP,GAAG,CAAC,2BAA2B,kBAAkB,YAAY,CAAC;AAE9D,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAyB;AAC3C,0BAAkB,cAAc,OAAO,CAAC;AAAA,MAC1C;AAAA,MACA,CAAC,cAAc,iBAAiB;AAAA,IAClC;AAEA,UAAM,eAAe;AAAA,MACnB,MAAM,iBAAiB,IAAI,CAAC,UAAU,uBAAuB,MAAM,KAAK,EAAE,KAAK,GAAG;AAAA,MAClF,CAAC,gBAAgB;AAAA,IACnB;AAEA,WACE,oBAAC;AAAA,MACC,iBAAe;AAAA,MACf,eAAa,YAAY;AAAA,MACzB,cAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO,EAAE,QAAQ,UAAU;AAAA,KAC7B;AAAA,EAEJ;AAAA,EACA,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,IAAI,MAAM;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,aAAa;AAAA,IAC3D,IAAI;AACJ,UAAM,EAAE,IAAI,IAAI;AAChB,UAAM,gBAAgB,YAAY,QAAQ;AAE1C,UAAM,kBAAkB;AAAA,MACtB,CAAC,UAAmB,MAAyB;AAC3C,cAAM,eAAe,EAAE,GAAG,WAAW,CAAC,MAAM,SAAS;AACrD,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK,CAAC;AAAA,MACxC;AAAA,MACA,CAAC,mBAAmB,WAAW,GAAG;AAAA,IACpC;AAEA,WACE,oBAAC;AAAA,MAAI,MAAK;AAAA,MAAe,SAAS;AAAA,MAAoB,WAAW;AAAA,MAC/D,8BAAC;AAAA,QACC,IAAI,uBAAuB;AAAA,QAC3B,eAAa,YAAY;AAAA,QACzB,cAAW;AAAA,QACX,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,aAAa,IAAI;AAAA,QAC3B,UAAU,KAAK;AAAA,QACf,UAAU,gBAAgB,IAAI;AAAA,QAC9B,OAAO,EAAE,QAAQ,UAAU;AAAA,OAC7B;AAAA,KACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,6 +38,7 @@ const useTableColsWithAddons = ({
|
|
|
38
38
|
}) => useMemo(() => {
|
|
39
39
|
const columnsWithAddons = [...augmentColumns(columns)];
|
|
40
40
|
const colsToPrepend = [];
|
|
41
|
+
const colsToAppend = [];
|
|
41
42
|
if (isExpandable)
|
|
42
43
|
colsToPrepend.push(expandRowColumn);
|
|
43
44
|
if (selection && !noSelectionColumn) {
|
|
@@ -48,7 +49,8 @@ const useTableColsWithAddons = ({
|
|
|
48
49
|
}
|
|
49
50
|
if (dragAndDropRows)
|
|
50
51
|
colsToPrepend.push(dragHandleColumn);
|
|
51
|
-
|
|
52
|
+
if (renderRowActions)
|
|
53
|
+
colsToAppend.push(actionColumn(renderRowActions));
|
|
52
54
|
colsToPrepend.forEach((col) => {
|
|
53
55
|
if (!isColumnInArrayOfColumns(columnsWithAddons, col))
|
|
54
56
|
columnsWithAddons.unshift(col);
|
|
@@ -57,8 +59,6 @@ const useTableColsWithAddons = ({
|
|
|
57
59
|
if (!isColumnInArrayOfColumns(columnsWithAddons, col))
|
|
58
60
|
columnsWithAddons.push(col);
|
|
59
61
|
});
|
|
60
|
-
if (renderRowActions)
|
|
61
|
-
columnsWithAddons.push(actionColumn(renderRowActions));
|
|
62
62
|
return columnsWithAddons;
|
|
63
63
|
}, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);
|
|
64
64
|
var useTableColsWithAddons_default = useTableColsWithAddons;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useTableColsWithAddons.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport { TypescriptColumn, TypescriptProps } from '../types/props';\n\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns';\n\ntype useTableColsWithAddonsType = (config: TypescriptProps) => TypescriptColumn[];\n\nconst augmentColumns = (columns: TypescriptColumn[]): TypescriptColumn[] => {\n const augmentColumn = (column: TypescriptColumn, index: number, parentId = null, depth = 0) => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return {\n id,\n parentId,\n depth,\n ...column,\n ref: createRef<HTMLTableColElement>(),\n };\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: TypescriptColumn[], col: TypescriptColumn) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: useTableColsWithAddonsType = ({\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n}) =>\n useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n\n // Columns to be prepended\n const colsToPrepend: TypescriptColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (selection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn);\n else colsToPrepend.push(multiSelectColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn);\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,eAAe;AAGnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,iBAAiB,CAAC,YAAoD;AAC1E,QAAM,gBAAgB,CAAC,QAA0B,OAAe,WAAW,MAAM,QAAQ,MAAM;AAC7F,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,QAAI,OAAO;AAAS,aAAO,UAAU,OAAO,QAAQ,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACxG,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AAAA,EACF;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAA6B,QAC7D,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,QAAQ,MAAM;AACZ,QAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,QAAM,gBAAoC,CAAC;AAE3C,MAAI;AAAc,kBAAc,KAAK,eAAe;AACpD,MAAI,aAAa,CAAC,mBAAmB;AACnC,QAAI;AAAc,oBAAc,KAAK,kBAAkB;AAAA;AAClD,oBAAc,KAAK,iBAAiB;AAAA,EAC3C;AACA,MAAI;AAAiB,kBAAc,KAAK,gBAAgB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { createRef, useMemo } from 'react';\nimport { TypescriptColumn, TypescriptProps } from '../types/props';\n\nimport {\n dragHandleColumn,\n expandRowColumn,\n actionColumn,\n singleSelectColumn,\n multiSelectColumn,\n} from '../addons/Columns';\n\ntype useTableColsWithAddonsType = (config: TypescriptProps) => TypescriptColumn[];\n\nconst augmentColumns = (columns: TypescriptColumn[]): TypescriptColumn[] => {\n const augmentColumn = (column: TypescriptColumn, index: number, parentId = null, depth = 0) => {\n let id = `column${index}`;\n if (typeof column.Header === 'string') id = column.Header;\n if (typeof column.accessor === 'string') id = column.accessor;\n if (column.columns) column.columns = column.columns.map((col, i) => augmentColumn(col, i, id, depth + 1));\n return {\n id,\n parentId,\n depth,\n ...column,\n ref: createRef<HTMLTableColElement>(),\n };\n };\n return columns.map((col, index) => augmentColumn(col, index));\n};\n\nconst isColumnInArrayOfColumns = (columns: TypescriptColumn[], col: TypescriptColumn) =>\n columns.some((column) => column.id === col.id);\n\nconst useTableColsWithAddons: useTableColsWithAddonsType = ({\n columns,\n renderRowActions,\n isExpandable,\n selectSingle,\n selection,\n dragAndDropRows,\n noSelectionColumn,\n}) =>\n useMemo(() => {\n const columnsWithAddons = [...augmentColumns(columns)];\n\n // Columns to be prepended\n const colsToPrepend: TypescriptColumn[] = [];\n // Columns to be appended\n const colsToAppend: TypescriptColumn[] = [];\n\n if (isExpandable) colsToPrepend.push(expandRowColumn);\n if (selection && !noSelectionColumn) {\n if (selectSingle) colsToPrepend.push(singleSelectColumn);\n else colsToPrepend.push(multiSelectColumn);\n }\n if (dragAndDropRows) colsToPrepend.push(dragHandleColumn);\n if (renderRowActions) colsToAppend.push(actionColumn(renderRowActions));\n\n\n // Prepend or append all the columns that were not extended by the user\n colsToPrepend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.unshift(col);\n });\n colsToAppend.forEach((col) => {\n if (!isColumnInArrayOfColumns(columnsWithAddons, col)) columnsWithAddons.push(col);\n });\n\n\n return columnsWithAddons;\n }, [columns, isExpandable, selection, noSelectionColumn, selectSingle, dragAndDropRows, renderRowActions]);\n\nexport { useTableColsWithAddons };\nexport default useTableColsWithAddons;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,eAAe;AAGnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,iBAAiB,CAAC,YAAoD;AAC1E,QAAM,gBAAgB,CAAC,QAA0B,OAAe,WAAW,MAAM,QAAQ,MAAM;AAC7F,QAAI,KAAK,SAAS;AAClB,QAAI,OAAO,OAAO,WAAW;AAAU,WAAK,OAAO;AACnD,QAAI,OAAO,OAAO,aAAa;AAAU,WAAK,OAAO;AACrD,QAAI,OAAO;AAAS,aAAO,UAAU,OAAO,QAAQ,IAAI,CAAC,KAAK,MAAM,cAAc,KAAK,GAAG,IAAI,QAAQ,CAAC,CAAC;AACxG,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,KAAK,UAA+B;AAAA,IACtC;AAAA,EACF;AACA,SAAO,QAAQ,IAAI,CAAC,KAAK,UAAU,cAAc,KAAK,KAAK,CAAC;AAC9D;AAEA,MAAM,2BAA2B,CAAC,SAA6B,QAC7D,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,IAAI,EAAE;AAE/C,MAAM,yBAAqD,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,QAAQ,MAAM;AACZ,QAAM,oBAAoB,CAAC,GAAG,eAAe,OAAO,CAAC;AAGrD,QAAM,gBAAoC,CAAC;AAE3C,QAAM,eAAmC,CAAC;AAE1C,MAAI;AAAc,kBAAc,KAAK,eAAe;AACpD,MAAI,aAAa,CAAC,mBAAmB;AACnC,QAAI;AAAc,oBAAc,KAAK,kBAAkB;AAAA;AAClD,oBAAc,KAAK,iBAAiB;AAAA,EAC3C;AACA,MAAI;AAAiB,kBAAc,KAAK,gBAAgB;AACxD,MAAI;AAAkB,iBAAa,KAAK,aAAa,gBAAgB,CAAC;AAItE,gBAAc,QAAQ,CAAC,QAAQ;AAC7B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,QAAQ,GAAG;AAAA,EACtF,CAAC;AACD,eAAa,QAAQ,CAAC,QAAQ;AAC5B,QAAI,CAAC,yBAAyB,mBAAmB,GAAG;AAAG,wBAAkB,KAAK,GAAG;AAAA,EACnF,CAAC;AAGD,SAAO;AACT,GAAG,CAAC,SAAS,cAAc,WAAW,mBAAmB,cAAc,iBAAiB,gBAAgB,CAAC;AAG3G,IAAO,iCAAQ;",
|
|
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.10.
|
|
3
|
+
"version": "3.10.1",
|
|
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.10.
|
|
575
|
-
"@elliemae/ds-circular-progress-indicator": "3.10.
|
|
576
|
-
"@elliemae/ds-controlled-form": "3.10.
|
|
577
|
-
"@elliemae/ds-drag-and-drop": "3.10.
|
|
578
|
-
"@elliemae/ds-dropdownmenu": "3.10.
|
|
579
|
-
"@elliemae/ds-form": "3.10.
|
|
580
|
-
"@elliemae/ds-form-layout-blocks": "3.10.
|
|
581
|
-
"@elliemae/ds-grid": "3.10.
|
|
582
|
-
"@elliemae/ds-icons": "3.10.
|
|
583
|
-
"@elliemae/ds-pagination": "3.10.
|
|
584
|
-
"@elliemae/ds-pills": "3.10.
|
|
585
|
-
"@elliemae/ds-popperjs": "3.10.
|
|
586
|
-
"@elliemae/ds-skeleton": "3.10.
|
|
587
|
-
"@elliemae/ds-system": "3.10.
|
|
588
|
-
"@elliemae/ds-toolbar": "3.10.
|
|
589
|
-
"@elliemae/ds-truncated-tooltip-text": "3.10.
|
|
590
|
-
"@elliemae/ds-utilities": "3.10.
|
|
574
|
+
"@elliemae/ds-button": "3.10.1",
|
|
575
|
+
"@elliemae/ds-circular-progress-indicator": "3.10.1",
|
|
576
|
+
"@elliemae/ds-controlled-form": "3.10.1",
|
|
577
|
+
"@elliemae/ds-drag-and-drop": "3.10.1",
|
|
578
|
+
"@elliemae/ds-dropdownmenu": "3.10.1",
|
|
579
|
+
"@elliemae/ds-form": "3.10.1",
|
|
580
|
+
"@elliemae/ds-form-layout-blocks": "3.10.1",
|
|
581
|
+
"@elliemae/ds-grid": "3.10.1",
|
|
582
|
+
"@elliemae/ds-icons": "3.10.1",
|
|
583
|
+
"@elliemae/ds-pagination": "3.10.1",
|
|
584
|
+
"@elliemae/ds-pills": "3.10.1",
|
|
585
|
+
"@elliemae/ds-popperjs": "3.10.1",
|
|
586
|
+
"@elliemae/ds-skeleton": "3.10.1",
|
|
587
|
+
"@elliemae/ds-system": "3.10.1",
|
|
588
|
+
"@elliemae/ds-toolbar": "3.10.1",
|
|
589
|
+
"@elliemae/ds-truncated-tooltip-text": "3.10.1",
|
|
590
|
+
"@elliemae/ds-utilities": "3.10.1",
|
|
591
591
|
"react-virtual": "~2.10.4",
|
|
592
592
|
"uid": "~2.0.0"
|
|
593
593
|
},
|