@elliemae/ds-data-table 3.14.0-next.7 → 3.14.0-next.9
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/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/cjs/parts/Row.js +18 -22
- package/dist/cjs/parts/Row.js.map +2 -2
- package/dist/cjs/parts/Rows.js +22 -26
- package/dist/cjs/parts/Rows.js.map +2 -2
- package/dist/cjs/parts/TableContent.js +23 -27
- package/dist/cjs/parts/TableContent.js.map +2 -2
- package/dist/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js.map +2 -2
- package/dist/esm/parts/Row.js +19 -23
- package/dist/esm/parts/Row.js.map +2 -2
- package/dist/esm/parts/Rows.js +23 -27
- package/dist/esm/parts/Rows.js.map +2 -2
- package/dist/esm/parts/TableContent.js +24 -28
- package/dist/esm/parts/TableContent.js.map +2 -2
- package/package.json +18 -18
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcrB;AAZF,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-role=\"detail-view\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx: {\n tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n layoutHelpers: { gridLayout },\n visibleColumns,\n },\n draggableProps,\n isDragOverlay,\n backgroundColor = 'white',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const gridTemplateColProps = useMemo(\n () => ({\n cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n isExpandable,\n colLayoutStyle: colsLayoutStyle,\n }),\n [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n );\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const DetailsView = row.original.tableRowDetails;\n\n return (\n <>\n <StyledCellContainer\n ref={rowRef}\n key={row.uid}\n tabIndex={0}\n role=\"row\"\n aria-rowindex={row.realIndex + 1}\n aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n aria-selected={selection?.[row.uid] === true}\n aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n aria-disabled={disabledRows[row.uid]}\n {...gridTemplateColProps}\n backgroundColor={backgroundColor}\n height={compact ? '24px' : 'auto'}\n minHeight={compact ? '24px' : '36px'}\n isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n isDropValid={isDropValid}\n shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n selected={noSelectionColumn && selection?.[row.uid] === true}\n isDisabled={disabledRows[row.uid]}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n >\n <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n </StyledCellContainer>\n {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n <DetailsWrapper>\n <DetailsView row={row} detailsIndent={detailsIndent} />\n </DetailsWrapper>\n )}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/Row.js
CHANGED
|
@@ -32,20 +32,12 @@ module.exports = __toCommonJS(Row_exports);
|
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
34
|
var import_react = require("react");
|
|
35
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
36
|
var import_ds_system = require("@elliemae/ds-system");
|
|
36
37
|
var import_DataTableContext = __toESM(require("../DataTableContext"));
|
|
37
|
-
var import_helpers = require("../helpers");
|
|
38
38
|
var import_SortableItemContext = require("./HoC/SortableItemContext");
|
|
39
39
|
var import_withDnDSortableRowContext = require("./HoC/withDnDSortableRowContext");
|
|
40
40
|
var import_RowVariants = require("./RowVariants");
|
|
41
|
-
const setItemRefs = (measureRef, draggableRef, ref) => {
|
|
42
|
-
const refsToSet = [];
|
|
43
|
-
if (measureRef)
|
|
44
|
-
refsToSet.push(measureRef);
|
|
45
|
-
if (draggableRef)
|
|
46
|
-
refsToSet.push(draggableRef);
|
|
47
|
-
(0, import_helpers.setMultipleRefs)(...refsToSet)(ref);
|
|
48
|
-
};
|
|
49
41
|
const StyledRow = (0, import_ds_system.styled)("div")`
|
|
50
42
|
cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
|
|
51
43
|
`;
|
|
@@ -59,21 +51,25 @@ const Row = (props) => {
|
|
|
59
51
|
} = ctx;
|
|
60
52
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
61
53
|
const draggableRef = draggableProps && draggableProps.setNodeRef;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
[draggableRef, measureRef]
|
|
65
|
-
);
|
|
66
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledRow, { isDisabled: disabledRows[row.uid], style: !isDragOverlay ? itemWrapperStyle : {}, ref: setRefs, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
|
-
import_RowVariants.RowVariantMapItem,
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
55
|
+
StyledRow,
|
|
68
56
|
{
|
|
69
|
-
row,
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
57
|
+
isDisabled: disabledRows[row.uid],
|
|
58
|
+
style: !isDragOverlay ? itemWrapperStyle : {},
|
|
59
|
+
ref: (0, import_ds_utilities.mergeRefs)(measureRef, draggableRef),
|
|
60
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
import_RowVariants.RowVariantMapItem,
|
|
62
|
+
{
|
|
63
|
+
row,
|
|
64
|
+
itemIndex: row.realIndex,
|
|
65
|
+
isDragOverlay,
|
|
66
|
+
ctx,
|
|
67
|
+
focusedRowId,
|
|
68
|
+
drilldownRowId
|
|
69
|
+
}
|
|
70
|
+
)
|
|
75
71
|
}
|
|
76
|
-
)
|
|
72
|
+
);
|
|
77
73
|
};
|
|
78
74
|
const RowWithContext = (0, import_withDnDSortableRowContext.withDnDSortableRowContext)(Row);
|
|
79
75
|
var Row_default = RowWithContext;
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\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\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={mergeRefs(measureRef, draggableRef)}\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;AD6BjB;AA7BN,mBAAkC;AAClC,0BAA0B;AAC1B,uBAAuB;AACvB,8BAA6B;AAC7B,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,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;AAC7D,QAAM,UAAM,yBAAW,wBAAAA,OAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,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,SAAK,+BAAU,YAAY,YAAY;AAAA,MAEvC;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
|
}
|
package/dist/cjs/parts/Rows.js
CHANGED
|
@@ -45,32 +45,28 @@ const Rows = () => {
|
|
|
45
45
|
} = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
|
|
46
46
|
const ctx = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
|
|
47
47
|
const items = ctx?.visibleItems || flattenedData;
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
}) }),
|
|
71
|
-
[virtualItems, items, visibleColumns, totalColumnsWidth]
|
|
72
|
-
);
|
|
73
|
-
return PureVirtualizedRows;
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: virtualItems.map((virtualItem) => {
|
|
49
|
+
const { index, measureRef, start } = virtualItem;
|
|
50
|
+
const row = items[index];
|
|
51
|
+
if (!row)
|
|
52
|
+
return null;
|
|
53
|
+
(0, import_helpers.addCellData)(row, visibleColumns);
|
|
54
|
+
const style = {
|
|
55
|
+
position: "absolute",
|
|
56
|
+
top: `${start}px`,
|
|
57
|
+
left: 0,
|
|
58
|
+
width: totalColumnsWidth
|
|
59
|
+
};
|
|
60
|
+
const rowProps = {
|
|
61
|
+
key: `ds-table-row-${row.uid}`,
|
|
62
|
+
row,
|
|
63
|
+
measureRef,
|
|
64
|
+
index,
|
|
65
|
+
itemIndex: index,
|
|
66
|
+
itemWrapperStyle: style
|
|
67
|
+
};
|
|
68
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.RowWithContext, { ...rowProps });
|
|
69
|
+
}) });
|
|
74
70
|
};
|
|
75
71
|
Rows.propTypes = {};
|
|
76
72
|
const RowsWithContext = (0, import_withConditionalDnDRowContext.withConditionalDnDRowContext)(Rows);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Rows.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n const {\n virtualListHelpers: { virtualItems },\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n visibleColumns,\n } = useContext(DataTableContext);\n\n const ctx = useContext(DnDTreeContext);\n\n const items = ctx?.visibleItems || flattenedData;\n\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n const {\n virtualListHelpers: { virtualItems },\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n visibleColumns,\n } = useContext(DataTableContext);\n\n const ctx = useContext(DnDTreeContext);\n\n const items = ctx?.visibleItems || flattenedData;\n\n return (\n <>\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = items[index];\n if (!row) return null;\n addCellData(row, visibleColumns);\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: totalColumnsWidth,\n };\n const rowProps = {\n key: `ds-table-row-${row.uid}`,\n row,\n measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n itemWrapperStyle: style,\n };\n return <Row {...rowProps} />;\n })}\n </>\n );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBnB;AArBJ,mBAA2C;AAE3C,iBAAsC;AACtC,8BAAiC;AACjC,0CAA6C;AAC7C,4BAA+B;AAC/B,qBAA4B;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,UAAM,yBAAW,oCAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,2EACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC;AAAK,aAAO;AACjB,oCAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,4CAAC,WAAAA,gBAAA,EAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,sBAAkB,kEAA6B,IAAI;AAChE,IAAO,eAAQ;",
|
|
6
6
|
"names": ["Row"]
|
|
7
7
|
}
|
|
@@ -51,34 +51,30 @@ const TableContent = () => {
|
|
|
51
51
|
[setIsShiftPressed]
|
|
52
52
|
);
|
|
53
53
|
const handleOnKeyUp = (0, import_react.useCallback)(() => setIsShiftPressed(false), [setIsShiftPressed]);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
),
|
|
79
|
-
[isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length]
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
55
|
+
import_styled.StyledDataTableContentWrapper,
|
|
56
|
+
{
|
|
57
|
+
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
|
|
58
|
+
noSelectionAllowed: isShiftPressed,
|
|
59
|
+
onKeyDown: handleOnKeyDown,
|
|
60
|
+
onKeyUp: handleOnKeyUp,
|
|
61
|
+
rows: pagination ? ["1fr", "auto"] : ["auto"],
|
|
62
|
+
cols: ["100%"],
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
import_styled.StyledTableWrapper,
|
|
66
|
+
{
|
|
67
|
+
role: "table",
|
|
68
|
+
"aria-rowcount": allDataFlattened.length,
|
|
69
|
+
"aria-colcount": visibleColumns.length,
|
|
70
|
+
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_TABLE,
|
|
71
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VirtualRowsList.VirtualRowsList, {})
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
pagination ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Pagination.Pagination, {}) : null
|
|
75
|
+
]
|
|
76
|
+
}
|
|
80
77
|
);
|
|
81
|
-
return PureTableContent;
|
|
82
78
|
};
|
|
83
79
|
var TableContent_default = TableContent;
|
|
84
80
|
//# sourceMappingURL=TableContent.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/TableContent.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useContext,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n const {\n tableProps: { pagination },\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={pagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n >\n <VirtualRowsList />\n </StyledTableWrapper>\n {pagination ? <Pagination /> : null}\n </StyledDataTableContentWrapper>\n );\n};\nexport default TableContent;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BnB;AA3BJ,mBAA+C;AAE/C,oBAAkE;AAClE,8BAA6B;AAC7B,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,wBAAAA,OAAgB;AAE/B,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC5C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,6BAAY;AAAA,YAEzB,sDAAC,0CAAgB;AAAA;AAAA,QACnB;AAAA,QACC,aAAa,4CAAC,gCAAW,IAAK;AAAA;AAAA;AAAA,EACjC;AAEJ;AACA,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["DataTableContext"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/DefaultRowContentRenderer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACcrB,SAuEE,UAvEF,KAuEE,YAvEF;AAZF,SAAgB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useMemo, useLayoutEffect, useRef } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { Cells } from '../../parts/Cells';\nimport type { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledCellContainer } from '../../styled';\nimport type { TypescriptRow } from '../../types/props';\nimport { DropIndicatorPosition } from '../../types/props';\n\nconst DetailsWrapper = (props) => (\n // This can be further customized\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n data-role=\"detail-view\"\n style={{\n borderTop: '1px solid #EBEDF0',\n borderBottom: '1px solid #EBEDF0',\n }}\n onClick={(e) => e.stopPropagation()}\n onKeyDown={(e) => e.stopPropagation()}\n >\n {props.children}\n </div>\n);\n\nconst ariaLabelMessage = (row: TypescriptRow, selected: boolean) =>\n `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ''}. ${\n selected ? 'Selected. ' : ''\n }To interact with the cells press enter`;\n\nexport const DefaultRowContentRenderer: React.ComponentType<RowVariantProps> = (props) => {\n const {\n row,\n ctx: {\n tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },\n layoutHelpers: { gridLayout },\n visibleColumns,\n },\n draggableProps,\n isDragOverlay,\n backgroundColor = 'white',\n dropIndicatorPosition,\n isDropValid,\n focusedRowId,\n drilldownRowId,\n compact,\n } = props;\n\n const rowRef = useRef<HTMLDivElement>(null);\n const isDndActive = draggableProps && draggableProps.active;\n const isDragging = draggableProps && draggableProps.isDragging;\n\n useLayoutEffect(() => {\n if (row.uid === focusedRowId) {\n rowRef.current?.focus();\n }\n }, [focusedRowId, row.uid]);\n\n const gridTemplateColProps = useMemo(\n () => ({\n cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,\n isExpandable,\n colLayoutStyle: colsLayoutStyle,\n }),\n [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable],\n );\n\n const detailsIndent = useMemo(() => {\n let padding = 0;\n for (let i = 0; i < visibleColumns.length; i += 1) {\n if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {\n padding += visibleColumns[i].width;\n } else {\n padding += row.depth * 32 + 15;\n break;\n }\n }\n return padding;\n }, [row.depth, visibleColumns]);\n\n const DetailsView = row.original.tableRowDetails;\n\n return (\n <>\n <StyledCellContainer\n ref={rowRef}\n key={row.uid}\n tabIndex={0}\n role=\"row\"\n aria-rowindex={row.realIndex + 1}\n aria-label={ariaLabelMessage(row, selection?.[row.uid] === true)}\n aria-selected={selection?.[row.uid] === true}\n aria-expanded={isExpandable ? expandedRows[row.uid] === true : undefined}\n aria-disabled={disabledRows[row.uid]}\n {...gridTemplateColProps}\n backgroundColor={backgroundColor}\n height={compact ? '24px' : 'auto'}\n minHeight={compact ? '24px' : '36px'}\n isDropIndicatorPositionInside={dropIndicatorPosition === DropIndicatorPosition.Inside}\n isDropValid={isDropValid}\n shouldDisplayHover={!isDndActive && !isDragging && !isDragOverlay}\n isDragOverlay={isDragOverlay}\n isDragging={isDragging}\n selected={noSelectionColumn && selection?.[row.uid] === true}\n isDisabled={disabledRows[row.uid]}\n data-testid={DATA_TESTID.DATA_TABLE_ROW_CONTENT}\n >\n <Cells row={row} isRowSelected={drilldownRowId === row.uid} isDragOverlay={isDragOverlay} key={row.uid} />\n </StyledCellContainer>\n {!isDragOverlay && isExpandable && row.isExpanded && DetailsView && (\n <DetailsWrapper>\n <DetailsView row={row} detailsIndent={detailsIndent} />\n </DetailsWrapper>\n )}\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/parts/Row.js
CHANGED
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext
|
|
3
|
+
import { useContext } from "react";
|
|
4
|
+
import { mergeRefs } from "@elliemae/ds-utilities";
|
|
4
5
|
import { styled } from "@elliemae/ds-system";
|
|
5
6
|
import DataTableContext from "../DataTableContext";
|
|
6
|
-
import { setMultipleRefs } from "../helpers";
|
|
7
7
|
import { SortableItemContext } from "./HoC/SortableItemContext";
|
|
8
8
|
import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext";
|
|
9
9
|
import { RowVariantMapItem } from "./RowVariants";
|
|
10
|
-
const setItemRefs = (measureRef, draggableRef, ref) => {
|
|
11
|
-
const refsToSet = [];
|
|
12
|
-
if (measureRef)
|
|
13
|
-
refsToSet.push(measureRef);
|
|
14
|
-
if (draggableRef)
|
|
15
|
-
refsToSet.push(draggableRef);
|
|
16
|
-
setMultipleRefs(...refsToSet)(ref);
|
|
17
|
-
};
|
|
18
10
|
const StyledRow = styled("div")`
|
|
19
11
|
cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
|
|
20
12
|
`;
|
|
@@ -28,21 +20,25 @@ const Row = (props) => {
|
|
|
28
20
|
} = ctx;
|
|
29
21
|
const { draggableProps } = useContext(SortableItemContext);
|
|
30
22
|
const draggableRef = draggableProps && draggableProps.setNodeRef;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
[draggableRef, measureRef]
|
|
34
|
-
);
|
|
35
|
-
return /* @__PURE__ */ jsx(StyledRow, { isDisabled: disabledRows[row.uid], style: !isDragOverlay ? itemWrapperStyle : {}, ref: setRefs, children: /* @__PURE__ */ jsx(
|
|
36
|
-
RowVariantMapItem,
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
StyledRow,
|
|
37
25
|
{
|
|
38
|
-
row,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
26
|
+
isDisabled: disabledRows[row.uid],
|
|
27
|
+
style: !isDragOverlay ? itemWrapperStyle : {},
|
|
28
|
+
ref: mergeRefs(measureRef, draggableRef),
|
|
29
|
+
children: /* @__PURE__ */ jsx(
|
|
30
|
+
RowVariantMapItem,
|
|
31
|
+
{
|
|
32
|
+
row,
|
|
33
|
+
itemIndex: row.realIndex,
|
|
34
|
+
isDragOverlay,
|
|
35
|
+
ctx,
|
|
36
|
+
focusedRowId,
|
|
37
|
+
drilldownRowId
|
|
38
|
+
}
|
|
39
|
+
)
|
|
44
40
|
}
|
|
45
|
-
)
|
|
41
|
+
);
|
|
46
42
|
};
|
|
47
43
|
const RowWithContext = withDnDSortableRowContext(Row);
|
|
48
44
|
var Row_default = RowWithContext;
|
|
@@ -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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport DataTableContext from '../DataTableContext';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\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\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={mergeRefs(measureRef, draggableRef)}\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;AC6BjB;AA7BN,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,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;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,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,UAAU,YAAY,YAAY;AAAA,MAEvC;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/dist/esm/parts/Rows.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Fragment, jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useContext
|
|
3
|
+
import { useContext } from "react";
|
|
4
4
|
import { RowWithContext as Row } from "./Row";
|
|
5
5
|
import { DataTableContext } from "../DataTableContext";
|
|
6
6
|
import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext";
|
|
@@ -15,32 +15,28 @@ const Rows = () => {
|
|
|
15
15
|
} = useContext(DataTableContext);
|
|
16
16
|
const ctx = useContext(DnDTreeContext);
|
|
17
17
|
const items = ctx?.visibleItems || flattenedData;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}) }),
|
|
41
|
-
[virtualItems, items, visibleColumns, totalColumnsWidth]
|
|
42
|
-
);
|
|
43
|
-
return PureVirtualizedRows;
|
|
18
|
+
return /* @__PURE__ */ jsx(Fragment, { children: virtualItems.map((virtualItem) => {
|
|
19
|
+
const { index, measureRef, start } = virtualItem;
|
|
20
|
+
const row = items[index];
|
|
21
|
+
if (!row)
|
|
22
|
+
return null;
|
|
23
|
+
addCellData(row, visibleColumns);
|
|
24
|
+
const style = {
|
|
25
|
+
position: "absolute",
|
|
26
|
+
top: `${start}px`,
|
|
27
|
+
left: 0,
|
|
28
|
+
width: totalColumnsWidth
|
|
29
|
+
};
|
|
30
|
+
const rowProps = {
|
|
31
|
+
key: `ds-table-row-${row.uid}`,
|
|
32
|
+
row,
|
|
33
|
+
measureRef,
|
|
34
|
+
index,
|
|
35
|
+
itemIndex: index,
|
|
36
|
+
itemWrapperStyle: style
|
|
37
|
+
};
|
|
38
|
+
return /* @__PURE__ */ jsx(Row, { ...rowProps });
|
|
39
|
+
}) });
|
|
44
40
|
};
|
|
45
41
|
Rows.propTypes = {};
|
|
46
42
|
const RowsWithContext = withConditionalDnDRowContext(Rows);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Rows.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n const {\n virtualListHelpers: { virtualItems },\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n visibleColumns,\n } = useContext(DataTableContext);\n\n const ctx = useContext(DnDTreeContext);\n\n const items = ctx?.visibleItems || flattenedData;\n\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\n\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n const {\n virtualListHelpers: { virtualItems },\n layoutHelpers: { totalColumnsWidth },\n flattenedData,\n visibleColumns,\n } = useContext(DataTableContext);\n\n const ctx = useContext(DnDTreeContext);\n\n const items = ctx?.visibleItems || flattenedData;\n\n return (\n <>\n {virtualItems.map((virtualItem) => {\n const { index, measureRef, start } = virtualItem;\n const row = items[index];\n if (!row) return null;\n addCellData(row, visibleColumns);\n const style = {\n position: 'absolute',\n top: `${start}px`,\n left: 0,\n width: totalColumnsWidth,\n };\n const rowProps = {\n key: `ds-table-row-${row.uid}`,\n row,\n measureRef,\n index, // this is consumed by the DnD HOC\n itemIndex: index,\n itemWrapperStyle: style,\n };\n return <Row {...rowProps} />;\n })}\n </>\n );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\nexport default RowsWithContext;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsBnB,mBAoBW,WApBX;AArBJ,SAAgB,kBAA2B;AAE3C,SAAS,kBAAkB,WAAW;AACtC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,MAAM,WAAW,cAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,gCACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC;AAAK,aAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;AAChE,IAAO,eAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext,
|
|
3
|
+
import { useContext, useCallback } from "react";
|
|
4
4
|
import { StyledTableWrapper, StyledDataTableContentWrapper } from "../styled";
|
|
5
5
|
import DataTableContext from "../DataTableContext";
|
|
6
6
|
import { Pagination } from "../addons/Pagination";
|
|
@@ -21,34 +21,30 @@ const TableContent = () => {
|
|
|
21
21
|
[setIsShiftPressed]
|
|
22
22
|
);
|
|
23
23
|
const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
),
|
|
49
|
-
[isShiftPressed, handleOnKeyDown, handleOnKeyUp, pagination, allDataFlattened.length, visibleColumns.length]
|
|
24
|
+
return /* @__PURE__ */ jsxs(
|
|
25
|
+
StyledDataTableContentWrapper,
|
|
26
|
+
{
|
|
27
|
+
"data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
|
|
28
|
+
noSelectionAllowed: isShiftPressed,
|
|
29
|
+
onKeyDown: handleOnKeyDown,
|
|
30
|
+
onKeyUp: handleOnKeyUp,
|
|
31
|
+
rows: pagination ? ["1fr", "auto"] : ["auto"],
|
|
32
|
+
cols: ["100%"],
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
StyledTableWrapper,
|
|
36
|
+
{
|
|
37
|
+
role: "table",
|
|
38
|
+
"aria-rowcount": allDataFlattened.length,
|
|
39
|
+
"aria-colcount": visibleColumns.length,
|
|
40
|
+
"data-testid": DATA_TESTID.DATA_TABLE_TABLE,
|
|
41
|
+
children: /* @__PURE__ */ jsx(VirtualRowsList, {})
|
|
42
|
+
}
|
|
43
|
+
),
|
|
44
|
+
pagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
|
|
45
|
+
]
|
|
46
|
+
}
|
|
50
47
|
);
|
|
51
|
-
return PureTableContent;
|
|
52
48
|
};
|
|
53
49
|
var TableContent_default = TableContent;
|
|
54
50
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TableContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext,
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport DataTableContext from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n const {\n tableProps: { pagination },\n allDataFlattened,\n visibleColumns,\n isShiftPressed,\n setIsShiftPressed,\n } = useContext(DataTableContext);\n\n const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n setIsShiftPressed(e.shiftKey);\n },\n [setIsShiftPressed],\n );\n\n const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n return (\n <StyledDataTableContentWrapper\n data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n noSelectionAllowed={isShiftPressed}\n onKeyDown={handleOnKeyDown}\n onKeyUp={handleOnKeyUp}\n rows={pagination ? ['1fr', 'auto'] : ['auto']}\n cols={['100%']}\n >\n <StyledTableWrapper\n role=\"table\"\n aria-rowcount={allDataFlattened.length}\n aria-colcount={visibleColumns.length}\n data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n >\n <VirtualRowsList />\n </StyledTableWrapper>\n {pagination ? <Pagination /> : null}\n </StyledDataTableContentWrapper>\n );\n};\nexport default TableContent;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2BnB,SAcI,KAdJ;AA3BJ,SAAgB,YAAY,mBAAmB;AAE/C,SAAS,oBAAoB,qCAAqC;AAClE,OAAO,sBAAsB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC5C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YAEzB,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA,QACC,aAAa,oBAAC,cAAW,IAAK;AAAA;AAAA;AAAA,EACjC;AAEJ;AACA,IAAO,uBAAQ;",
|
|
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.14.0-next.
|
|
3
|
+
"version": "3.14.0-next.9",
|
|
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.14.0-next.
|
|
577
|
-
"@elliemae/ds-circular-progress-indicator": "3.14.0-next.
|
|
578
|
-
"@elliemae/ds-
|
|
579
|
-
"@elliemae/ds-
|
|
580
|
-
"@elliemae/ds-
|
|
581
|
-
"@elliemae/ds-
|
|
582
|
-
"@elliemae/ds-
|
|
583
|
-
"@elliemae/ds-pagination": "3.14.0-next.
|
|
584
|
-
"@elliemae/ds-
|
|
585
|
-
"@elliemae/ds-
|
|
586
|
-
"@elliemae/ds-
|
|
587
|
-
"@elliemae/ds-
|
|
588
|
-
"@elliemae/ds-
|
|
589
|
-
"@elliemae/ds-
|
|
590
|
-
"@elliemae/ds-
|
|
591
|
-
"@elliemae/ds-
|
|
592
|
-
"@elliemae/ds-
|
|
576
|
+
"@elliemae/ds-button": "3.14.0-next.9",
|
|
577
|
+
"@elliemae/ds-circular-progress-indicator": "3.14.0-next.9",
|
|
578
|
+
"@elliemae/ds-controlled-form": "3.14.0-next.9",
|
|
579
|
+
"@elliemae/ds-drag-and-drop": "3.14.0-next.9",
|
|
580
|
+
"@elliemae/ds-dropdownmenu": "3.14.0-next.9",
|
|
581
|
+
"@elliemae/ds-form": "3.14.0-next.9",
|
|
582
|
+
"@elliemae/ds-grid": "3.14.0-next.9",
|
|
583
|
+
"@elliemae/ds-pagination": "3.14.0-next.9",
|
|
584
|
+
"@elliemae/ds-icons": "3.14.0-next.9",
|
|
585
|
+
"@elliemae/ds-pills": "3.14.0-next.9",
|
|
586
|
+
"@elliemae/ds-popperjs": "3.14.0-next.9",
|
|
587
|
+
"@elliemae/ds-skeleton": "3.14.0-next.9",
|
|
588
|
+
"@elliemae/ds-system": "3.14.0-next.9",
|
|
589
|
+
"@elliemae/ds-toolbar": "3.14.0-next.9",
|
|
590
|
+
"@elliemae/ds-truncated-tooltip-text": "3.14.0-next.9",
|
|
591
|
+
"@elliemae/ds-form-layout-blocks": "3.14.0-next.9",
|
|
592
|
+
"@elliemae/ds-utilities": "3.14.0-next.9"
|
|
593
593
|
},
|
|
594
594
|
"devDependencies": {
|
|
595
595
|
"@testing-library/react": "~12.1.3",
|