@elliemae/ds-data-table 3.20.0-next.6 → 3.20.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/addons/Columns/ColumnAction/ColumnAction.js +2 -1
- package/dist/cjs/addons/Columns/ColumnAction/ColumnAction.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +3 -1
- package/dist/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +2 -1
- package/dist/cjs/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +2 -1
- package/dist/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +2 -1
- package/dist/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +12 -4
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellConfig.js +5 -2
- package/dist/cjs/parts/Headers/useHeaderCellConfig.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js +3 -0
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +1 -1
- package/dist/cjs/styled.js.map +1 -1
- package/dist/esm/addons/Columns/ColumnAction/ColumnAction.js +3 -2
- package/dist/esm/addons/Columns/ColumnAction/ColumnAction.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +3 -1
- package/dist/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js +3 -2
- package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +3 -2
- package/dist/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map +2 -2
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +3 -2
- package/dist/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +13 -5
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellConfig.js +5 -2
- package/dist/esm/parts/Headers/useHeaderCellConfig.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js +3 -0
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +1 -1
- package/dist/esm/styled.js.map +1 -1
- package/dist/types/parts/Headers/useHeaderCellConfig.d.ts +1 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +25 -25
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnAction/ColumnAction.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { memo } from 'react';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\ntype ConfigurableColumn = (renderRowActions: DSDataTableT.RenderRowActionsConfig) => DSDataTableT.InternalColumn;\n\nexport const actionColumn: ConfigurableColumn = (renderRowActions) => ({\n Header: ' ',\n id: 'rowActions',\n width: renderRowActions.columnWidth,\n style: {\n overflow: 'visible',\n },\n // memo typing is broken?\n Cell: memo((props) => renderRowActions.renderer(props)),\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n parentId: null,\n depth: 0,\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { createRef, memo } from 'react';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\ntype ConfigurableColumn = (renderRowActions: DSDataTableT.RenderRowActionsConfig) => DSDataTableT.InternalColumn;\n\nexport const actionColumn: ConfigurableColumn = (renderRowActions) => ({\n Header: ' ',\n id: 'rowActions',\n width: renderRowActions.columnWidth,\n style: {\n overflow: 'visible',\n },\n // memo typing is broken?\n Cell: memo((props) => renderRowActions.renderer(props)),\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n parentId: null,\n depth: 0,\n ref: createRef(),\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAgC;AAIzB,MAAM,eAAmC,CAAC,sBAAsB;AAAA,EACrE,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,OAAO,iBAAiB;AAAA,EACxB,OAAO;AAAA,IACL,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,UAAM,mBAAK,CAAC,UAAU,iBAAiB,SAAS,KAAK,CAAC;AAAA,EACtD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAK,wBAAU;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,6 +33,7 @@ __export(ColumnDragHandle_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(ColumnDragHandle_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var import_react = require("react");
|
|
36
37
|
var import_DnDHandle = require("../../../parts/DnDHandle.js");
|
|
37
38
|
var import_styled = require("../../../styled.js");
|
|
38
39
|
const dragHandleColumn = {
|
|
@@ -69,6 +70,7 @@ const dragHandleColumn = {
|
|
|
69
70
|
disableDnD: true,
|
|
70
71
|
isFocuseable: false,
|
|
71
72
|
parentId: null,
|
|
72
|
-
depth: 0
|
|
73
|
+
depth: 0,
|
|
74
|
+
ref: (0, import_react.createRef)()
|
|
73
75
|
};
|
|
74
76
|
//# sourceMappingURL=ColumnDragHandle.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnDragHandle/ColumnDragHandle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React from 'react';\nimport { DragHandle } from '../../../parts/DnDHandle.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const dragHandleColumn: DSDataTableT.InternalColumn<HTMLDivElement> = {\n // Build our singleSelecter column\n id: 'dragHandleColumn', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => (\n <StyledFocusWithin\n style={{ width: '100%', height: '100%' }}\n hideFocus={draggableProps && draggableProps.isDragging}\n >\n <DragHandle\n id={row.uid}\n key={row.uid}\n isReachable={isRowSelected}\n innerRef={(_ref) => {\n if (!isDragOverlay) cell.ref.current = _ref;\n }}\n isDragOverlay={isDragOverlay}\n isDisabled={isDisabledRow}\n />\n </StyledFocusWithin>\n ),\n textWrap: 'wrap-all',\n width: 24,\n padding: 4,\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n parentId: null,\n depth: 0,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUP;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { createRef } from 'react';\nimport { DragHandle } from '../../../parts/DnDHandle.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\n\nexport const dragHandleColumn: DSDataTableT.InternalColumn<HTMLDivElement> = {\n // Build our singleSelecter column\n id: 'dragHandleColumn', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps, isDisabledRow }) => (\n <StyledFocusWithin\n style={{ width: '100%', height: '100%' }}\n hideFocus={draggableProps && draggableProps.isDragging}\n >\n <DragHandle\n id={row.uid}\n key={row.uid}\n isReachable={isRowSelected}\n innerRef={(_ref) => {\n if (!isDragOverlay) cell.ref.current = _ref;\n }}\n isDragOverlay={isDragOverlay}\n isDisabled={isDisabledRow}\n />\n </StyledFocusWithin>\n ),\n textWrap: 'wrap-all',\n width: 24,\n padding: 4,\n canResize: false,\n disableDnD: true,\n isFocuseable: false,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADUP;AAThB,mBAAiC;AACjC,uBAA2B;AAC3B,oBAAkC;AAG3B,MAAM,mBAAgE;AAAA;AAAA,EAE3E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,4CAAC,SAAI;AAAA,EACnB,MAAM,CAAC,EAAE,KAAK,eAAe,MAAM,eAAe,gBAAgB,cAAc,MAC9E;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MACvC,WAAW,kBAAkB,eAAe;AAAA,MAE5C;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,IAAI;AAAA,UAER,aAAa;AAAA,UACb,UAAU,CAAC,SAAS;AAClB,gBAAI,CAAC;AAAe,mBAAK,IAAI,UAAU;AAAA,UACzC;AAAA,UACA;AAAA,UACA,YAAY;AAAA;AAAA,QANP,IAAI;AAAA,MAOX;AAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAK,wBAAU;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled.span<{ disabled?: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn<HTMLSpanElement> = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: ({ ctx }) => {\n const {\n tableProps: { expandedRows, onRowExpand, disabledRows },\n allDataFlattened,\n } = ctx;\n\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title=\"Toggle All Rows Expanded\"\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n const {\n tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n } = ctx;\n\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n const newExpandedRows = { ...expandedRows };\n if (newExpandedRows[uniqueId]) {\n delete newExpandedRows[uniqueId];\n } else {\n newExpandedRows[uniqueId] = true;\n }\n onRowExpand(newExpandedRows, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n ref={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBrB;AAtBF,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useMemo, useCallback, createRef } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn, type SvgIconT } from '@elliemae/ds-icons';\nimport { styled, css } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { StyledFocusWithin } from '../../../styled.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst disabledCaret = css`\n cursor: not-allowed;\n pointer-events: none;\n`;\nconst StyledSpan = styled.span<{ disabled?: boolean }>`\n cursor: pointer;\n box-sizing: border-box;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n ${({ disabled }) => disabled && disabledCaret}\n`;\n\nconst ArrowDown: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadDown size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN} {...rest} />\n);\n\nconst ArrowMixed = () => (\n <ArrowheadRight\n size=\"s\"\n color={['brand-primary', '600']}\n data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n style={{ transform: 'rotate(45deg)' }}\n />\n);\n\nconst ArrowRight: React.ComponentType<SvgIconT.Props> = ({ color = ['brand-primary', '600'], ...rest }) => (\n <ArrowheadRight size=\"s\" color={color} data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT} {...rest} />\n);\n\nexport const expandRowColumn: DSDataTableT.InternalColumn<HTMLSpanElement> = {\n // Build our expander column\n id: 'expander', // Make sure it has an ID\n accessor: 'expandRowColumn',\n Header: ({ ctx }) => {\n const {\n tableProps: { expandedRows, onRowExpand, disabledRows },\n allDataFlattened,\n } = ctx;\n\n const allExpandable = useMemo(() => {\n const expandable: Record<string, boolean> = {};\n allDataFlattened.forEach((row) => {\n const isExpandableRow = row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue;\n if (!disabledRows[row.uid] && isExpandableRow) expandable[row.uid] = true;\n });\n return expandable;\n }, [allDataFlattened, disabledRows]);\n\n const isAllRowsExpanded = useMemo(\n () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n [allExpandable, expandedRows],\n );\n\n const onExpandedAllHandler = useCallback(() => {\n if (isAllRowsExpanded) onRowExpand({}, 'All');\n else onRowExpand({ ...allExpandable }, 'All');\n }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n onExpandedAllHandler();\n e.preventDefault();\n }\n },\n [onExpandedAllHandler],\n );\n\n const GlobalExpandIcon = useMemo(() => {\n if (isAllRowsExpanded) return <ArrowDown />;\n if (Object.keys(expandedRows).length) return <ArrowMixed />;\n return <ArrowRight />;\n }, [expandedRows, isAllRowsExpanded]);\n\n return (\n <StyledFocusWithin>\n <StyledSpan\n role=\"button\"\n tabIndex={0}\n title=\"Toggle All Rows Expanded\"\n onClick={onExpandedAllHandler}\n onKeyDown={onKeyDownHandler}\n data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n aria-expanded={isAllRowsExpanded}\n style={{ width: '24px', height: '24px' }}\n >\n {GlobalExpandIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n },\n Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n const {\n tableProps: { dragAndDropRows, expandedRows, onRowExpand, disabledRows },\n } = ctx;\n\n const uniqueId = row.uid;\n\n const isExpanded = !!expandedRows[uniqueId];\n\n const shouldPrintCaret = useMemo(\n () =>\n (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n row.original.tableRowDetails ||\n row.original.dimsumHeaderValue,\n [row.depth, row.original.dimsumHeaderValue, row.original.subRows?.length, row.original.tableRowDetails],\n );\n\n const onRowExpandHandler = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if (disabledRows[row.uid]) return;\n e.stopPropagation(); // to prevent on row click\n const newExpandedRows = { ...expandedRows };\n if (newExpandedRows[uniqueId]) {\n delete newExpandedRows[uniqueId];\n } else {\n newExpandedRows[uniqueId] = true;\n }\n onRowExpand(newExpandedRows, uniqueId);\n },\n [disabledRows, row.uid, expandedRows, uniqueId, onRowExpand],\n );\n\n const onKeyDownHandler = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n e.preventDefault();\n onRowExpandHandler(e);\n }\n },\n [onRowExpandHandler],\n );\n\n const isDragging = draggableProps && draggableProps.isDragging;\n const isDragOverlay = dragAndDropRows && !draggableProps;\n\n const indentStyle: React.CSSProperties = useMemo(\n () => ({\n marginLeft: `${row.depth * 32}px`,\n marginRight: '12px',\n paddingLeft: '3px',\n paddingRight: '2px',\n position: 'relative',\n height: '100%',\n display: 'flex',\n alignItems: 'center',\n }),\n [row.depth],\n );\n\n const PureCaretIcon = useMemo(() => {\n const Caret = isExpanded && !isDragging && !isDragOverlay ? ArrowDown : ArrowRight;\n return (\n <Caret\n data-is-col-expanded={isExpanded}\n data-role=\"row-expander-col\"\n color={disabledRows[row.uid] ? ['neutral', '400'] : ['brand-primary', '600']}\n />\n );\n }, [isExpanded, isDragging, isDragOverlay, disabledRows, row.uid]);\n\n if (shouldPrintCaret)\n return (\n <StyledFocusWithin style={indentStyle}>\n <StyledSpan\n role=\"button\"\n key={`${row.uid}-expand-button`}\n title=\"Toggle Row Expanded\"\n onClick={onRowExpandHandler}\n onKeyDown={onKeyDownHandler}\n ref={cell.ref}\n tabIndex={isRowSelected && !disabledRows[row.uid] ? 0 : -1}\n data-testid=\"data-table-row-expand-cell\"\n aria-expanded={isExpanded}\n disabled={disabledRows[row.uid]}\n aria-disabled={disabledRows[row.uid]}\n >\n {PureCaretIcon}\n </StyledSpan>\n </StyledFocusWithin>\n );\n\n if (row.depth !== 0)\n return (\n <span style={indentStyle}>\n <ArrowShortReturn\n size=\"s\"\n data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n color={['brand-primary', '600']}\n />\n </span>\n );\n\n return <div style={{ width: '36px' }} />;\n },\n textWrap: 'wrap',\n canResize: false,\n width: 25,\n padding: 0,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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-form-checkbox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn<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((sel) => dtSelection[sel]).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: DSDataTableT.Selection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<DSDataTableT.Selection>((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 | React.MouseEvent | React.KeyboardEvent) => {\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 />\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 | React.MouseEvent | React.KeyboardEvent) => {\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 checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDjB;AApDN,
|
|
4
|
+
"sourcesContent": ["import React, { useMemo, useRef, useCallback, createRef } from 'react';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nexport const multiSelectColumn: DSDataTableT.InternalColumn<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((sel) => dtSelection[sel]).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: DSDataTableT.Selection = useMemo(() => {\n if (!newGlobalStateAfterToggle) return {};\n\n return allDataFlattened.reduce<DSDataTableT.Selection>((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 | React.MouseEvent | React.KeyboardEvent) => {\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 />\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 | React.MouseEvent | React.KeyboardEvent) => {\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 checked={selectedState}\n onChange={onChangeHandler}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </div>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 7,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBP;AApBhB,
|
|
4
|
+
"sourcesContent": ["import React, { createRef, useCallback } from 'react';\nimport { DSControlledRadio } from '@elliemae/ds-form-radio';\nimport { styled } from '@elliemae/ds-system';\nimport type { DSDataTableT } from '../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../configs/constants.js';\n\nconst CenteredContent = styled.div`\n display: flex;\n height: 100%;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst stopThePropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\nexport const singleSelectColumn: DSDataTableT.InternalColumn<HTMLInputElement> = {\n // Build our singleSelecter column\n id: 'singleSelecter', // Make sure it has an ID\n // The header doesn't need anything for single selection\n Header: () => <div />,\n Cell: ({ cell, row, isRowSelected, ctx }) => {\n const {\n tableProps: { onSelectionChange, selection, disabledRows },\n } = ctx;\n const { uid } = row;\n const selectedState = !!selection?.[uid];\n\n const onChangeHandler = useCallback(\n (newValue: string, e: React.ChangeEvent) => {\n // in single select we only allow one item to be selected\n onSelectionChange({ [uid]: !selectedState }, uid, e);\n },\n [onSelectionChange, selectedState, uid],\n );\n\n return (\n <CenteredContent onClick={stopThePropagation} onKeyDown={stopThePropagation}>\n <DSControlledRadio\n aria-checked={selectedState}\n aria-disabled={disabledRows[row.uid]}\n title=\"Toggle row selected\"\n aria-label=\"Toggle row selected\"\n checked={selectedState}\n onChange={onChangeHandler}\n data-testid={DATA_TESTID.DATA_TABLE_RADIO}\n disabled={disabledRows[row.uid]}\n innerRef={cell.ref}\n value={uid}\n tabIndex={isRowSelected ? 0 : -1}\n />\n </CenteredContent>\n );\n },\n textWrap: 'wrap',\n width: 32,\n padding: 4,\n canResize: false,\n isFocuseable: false,\n disableDnD: true,\n parentId: null,\n depth: 0,\n ref: createRef(),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBP;AApBhB,mBAA8C;AAC9C,2BAAkC;AAClC,uBAAuB;AAEvB,uBAA4B;AAE5B,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,qBAAqB,CAAC,MAA8C,EAAE,gBAAgB;AAErF,MAAM,qBAAoE;AAAA;AAAA,EAE/E,IAAI;AAAA;AAAA;AAAA,EAEJ,QAAQ,MAAM,4CAAC,SAAI;AAAA,EACnB,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,CAAC,CAAC,YAAY,GAAG;AAEvC,UAAM,sBAAkB;AAAA,MACtB,CAAC,UAAkB,MAAyB;AAE1C,0BAAkB,EAAE,CAAC,GAAG,GAAG,CAAC,cAAc,GAAG,KAAK,CAAC;AAAA,MACrD;AAAA,MACA,CAAC,mBAAmB,eAAe,GAAG;AAAA,IACxC;AAEA,WACE,4CAAC,mBAAgB,SAAS,oBAAoB,WAAW,oBACvD;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc;AAAA,QACd,iBAAe,aAAa,IAAI,GAAG;AAAA,QACnC,OAAM;AAAA,QACN,cAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,6BAAY;AAAA,QACzB,UAAU,aAAa,IAAI,GAAG;AAAA,QAC9B,UAAU,KAAK;AAAA,QACf,OAAO;AAAA,QACP,UAAU,gBAAgB,IAAI;AAAA;AAAA,IAChC,GACF;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAK,wBAAU;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -67,7 +67,7 @@ const HeaderCell = (props) => {
|
|
|
67
67
|
const { column, isDragOverlay, colSpan } = props;
|
|
68
68
|
const ctx = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
|
|
69
69
|
const {
|
|
70
|
-
tableProps: {
|
|
70
|
+
tableProps: { disabledRows, dragAndDropColumns, onFiltersChange, filters, textWrap },
|
|
71
71
|
reduxHeaders
|
|
72
72
|
} = ctx;
|
|
73
73
|
const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
|
|
@@ -75,7 +75,7 @@ const HeaderCell = (props) => {
|
|
|
75
75
|
const filterIconRef = (0, import_react.useRef)(null);
|
|
76
76
|
const resizeHandlerRef = (0, import_react.useRef)(null);
|
|
77
77
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
78
|
-
const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = (0, import_useHeaderCellConfig.useHeaderCellConfig)(props);
|
|
78
|
+
const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } = (0, import_useHeaderCellConfig.useHeaderCellConfig)(props);
|
|
79
79
|
const rightIcons = (0, import_react.useMemo)(() => {
|
|
80
80
|
if (!hasRightIcons)
|
|
81
81
|
return null;
|
|
@@ -108,6 +108,14 @@ const HeaderCell = (props) => {
|
|
|
108
108
|
) }) }),
|
|
109
109
|
[column.id, disabledRows, isDragOverlay, isDragging, reduxHeader?.withTabStops]
|
|
110
110
|
);
|
|
111
|
+
const handleRef = (0, import_react.useCallback)(
|
|
112
|
+
(_ref) => {
|
|
113
|
+
if (!isDragOverlay) {
|
|
114
|
+
column.ref.current = _ref;
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
[column.ref, isDragOverlay]
|
|
118
|
+
);
|
|
111
119
|
const handlers = (0, import_useHeaderCellHandlers.useHeaderCellHandlers)({
|
|
112
120
|
hasFilter,
|
|
113
121
|
column,
|
|
@@ -128,13 +136,13 @@ const HeaderCell = (props) => {
|
|
|
128
136
|
tabIndex: column.isFocuseable === false ? -1 : 0,
|
|
129
137
|
isDraggingActive: Boolean(draggableProps && draggableProps.active),
|
|
130
138
|
shouldShowDnD,
|
|
131
|
-
ref:
|
|
139
|
+
ref: handleRef,
|
|
132
140
|
children: [
|
|
133
141
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { width: "100%", cols: hCols, children: [
|
|
134
142
|
shouldShowDnD && DnDHandleComponent,
|
|
135
143
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellTitle.HeaderCellTitle, { column, ctx, draggableProps, textWrap }),
|
|
136
144
|
rightIcons,
|
|
137
|
-
|
|
145
|
+
shouldShowResize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderResizer.HeaderResizer, { column, innerRef: resizeHandlerRef, isReachable: reduxHeader?.withTabStops ?? false })
|
|
138
146
|
] }),
|
|
139
147
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: `${column.id}-instructions`, style: { display: "none" }, "aria-hidden": "false", children: buildScreenReaderInstructions({
|
|
140
148
|
colSpan,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\n\nconst buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n}) => {\n const preffix = colSpan === 1 ? '' : 'Column Group. ';\n if (!draggable && !filterable && !sortable) return preffix;\n\n let message = sortable\n ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n : '';\n if (draggable && filterable) {\n message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n } else if (draggable || filterable) {\n message = `This column is ${\n draggable ? 'draggable' : 'filterable'\n }. To enable this interaction press the enter key. ${message}`;\n }\n return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqEjB;AApEN,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\n\nconst buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n}) => {\n const preffix = colSpan === 1 ? '' : 'Column Group. ';\n if (!draggable && !filterable && !sortable) return preffix;\n\n let message = sortable\n ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n : '';\n if (draggable && filterable) {\n message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n } else if (draggable || filterable) {\n message = `This column is ${\n draggable ? 'draggable' : 'filterable'\n }. To enable this interaction press the enter key. ${message}`;\n }\n return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const ctx = useContext(DataTableContext);\n const {\n tableProps: { disabledRows, dragAndDropColumns, onFiltersChange, filters, textWrap },\n reduxHeaders,\n } = ctx;\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const filterIconRef = useRef<HTMLButtonElement | null>(null);\n const resizeHandlerRef = useRef<HTMLInputElement | null>(null);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n useHeaderCellConfig(props);\n\n const rightIcons = useMemo(() => {\n if (!hasRightIcons) return null;\n return (\n <StyledHeaderRightIconsWrapper>\n <FilterMapItem\n column={column}\n ctx={ctx}\n onFiltersChange={onFiltersChange}\n reduxHeader={reduxHeader}\n filters={filters}\n innerRef={filterIconRef}\n />\n {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n </StyledHeaderRightIconsWrapper>\n );\n }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n const DnDHandleComponent = useMemo(\n () => (\n <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n <StyledFocusWithin hideFocus={isDragging}>\n <DragHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops ?? false}\n id={column.id}\n isDragOverlay={isDragOverlay}\n isDisabled={disabledRows[column.id]}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, disabledRows, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const handleRef = useCallback(\n (_ref: HTMLTableColElement | null) => {\n if (!isDragOverlay) {\n column.ref.current = _ref;\n }\n },\n [column.ref, isDragOverlay],\n );\n\n const handlers = useHeaderCellHandlers({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n });\n\n return (\n <StyledHeadTh\n column={column}\n {...handlers}\n role={colSpan === 1 ? 'columnheader' : 'group'}\n aria-describedby={`${column.id}-instructions`}\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n shouldShowDnD={shouldShowDnD}\n ref={handleRef}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {shouldShowResize && (\n <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n )}\n </Grid>\n <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n {buildScreenReaderInstructions({\n colSpan,\n draggable: dragAndDropColumns && column.disableDnD !== true,\n filterable: hasFilter,\n sortable: column.canSort ?? false,\n })}\n </span>\n </StyledHeadTh>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,7 +37,7 @@ var import_DataTableContext = require("../../DataTableContext.js");
|
|
|
37
37
|
var import_SortableItemContext = require("../HoC/SortableItemContext.js");
|
|
38
38
|
const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
|
|
39
39
|
const {
|
|
40
|
-
tableProps: { dragAndDropColumns },
|
|
40
|
+
tableProps: { dragAndDropColumns, isResizeable },
|
|
41
41
|
reduxHeaders
|
|
42
42
|
} = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
|
|
43
43
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
@@ -48,6 +48,8 @@ const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
|
|
|
48
48
|
const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);
|
|
49
49
|
const isDragging = draggableProps && draggableProps.isDragging;
|
|
50
50
|
const shouldShowDnD = hasDnD && (reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active || draggableProps && draggableProps.isDragging || isDragOverlay);
|
|
51
|
+
const hasResize = isResizeable && column.canResize !== false && !column.columns;
|
|
52
|
+
const shouldShowResize = hasResize && !isDragOverlay && !isDragging;
|
|
51
53
|
const hCols = ["auto"];
|
|
52
54
|
if (hasRightIcons)
|
|
53
55
|
hCols.push("min-content");
|
|
@@ -60,7 +62,8 @@ const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
|
|
|
60
62
|
hasRightIcons,
|
|
61
63
|
isDragging,
|
|
62
64
|
hCols,
|
|
63
|
-
shouldShowDnD
|
|
65
|
+
shouldShowDnD,
|
|
66
|
+
shouldShowResize
|
|
64
67
|
};
|
|
65
68
|
};
|
|
66
69
|
//# sourceMappingURL=useHeaderCellConfig.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/useHeaderCellConfig.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n hasFilter: boolean;\n hasDnD: boolean;\n hasSortingCaret: boolean;\n hasRightIcons: boolean;\n isDragging: boolean;\n shouldShowDnD: boolean;\n hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n const {\n tableProps: { dragAndDropColumns },\n reduxHeaders,\n } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const hasFilter = !!(column.filter || column.Filter);\n\n const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n const hasSortingCaret = Boolean(column.canSort) && typeof column.isSortedDesc === 'boolean';\n\n const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const shouldShowDnD =\n hasDnD &&\n ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n (draggableProps && draggableProps.isDragging) ||\n isDragOverlay);\n\n // Column definition\n const hCols = ['auto'];\n if (hasRightIcons) hCols.push('min-content');\n if (shouldShowDnD) hCols.unshift('min-content');\n\n return {\n hasFilter,\n hasDnD,\n hasSortingCaret,\n hasRightIcons,\n isDragging,\n hCols,\n shouldShowDnD,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,8BAAiC;AACjC,iCAAoC;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n hasFilter: boolean;\n hasDnD: boolean;\n hasSortingCaret: boolean;\n hasRightIcons: boolean;\n isDragging: boolean;\n shouldShowDnD: boolean;\n shouldShowResize: boolean;\n hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n const {\n tableProps: { dragAndDropColumns, isResizeable },\n reduxHeaders,\n } = useContext(DataTableContext);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const hasFilter = !!(column.filter || column.Filter);\n\n const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n const hasSortingCaret = Boolean(column.canSort) && typeof column.isSortedDesc === 'boolean';\n\n const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const shouldShowDnD =\n hasDnD &&\n ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n (draggableProps && draggableProps.isDragging) ||\n isDragOverlay);\n\n const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n // Column definition\n const hCols = ['auto'];\n if (hasRightIcons) hCols.push('min-content');\n if (shouldShowDnD) hCols.unshift('min-content');\n\n return {\n hasFilter,\n hasDnD,\n hasSortingCaret,\n hasRightIcons,\n isDragging,\n hCols,\n shouldShowDnD,\n shouldShowResize,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,8BAAiC;AACjC,iCAAoC;AAc7B,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB,aAAa;AAAA,IAC/C;AAAA,EACF,QAAI,yBAAW,wCAAgB;AAE/B,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO,KAAK,OAAO,OAAO,iBAAiB;AAElF,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n let multiplier = 1;\n\n if (e.shiftKey) multiplier *= 5;\n if (e.altKey) multiplier *= 10;\n\n if (e.code === 'ArrowLeft') {\n return -multiplier;\n }\n if (e.code === 'ArrowRight') {\n return multiplier;\n }\n return 0;\n};\n\nexport const useHeaderResizer = ({\n columnId,\n innerRef,\n}: {\n columnId: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n const {\n visibleColumns,\n tableProps: { onColumnResize, onColumnSizeChange },\n virtualListRef,\n } = useContext(DataTableContext);\n\n const [isResizing, setIsResizing] = useState(false);\n\n const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n const visibleColumnsOnGridLayout = useMemo(\n () =>\n visibleColumnsCopy.reduce((acc, cur) => {\n if (cur.columns) {\n return acc.concat(cur.columns);\n }\n return acc.concat(cur);\n }, [] as DSDataTableT.InternalColumn[]),\n [visibleColumnsCopy],\n );\n\n const realColumnIndex = useMemo(\n () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n [columnId, visibleColumnsOnGridLayout],\n );\n\n // Notifies the user of the change in the column size\n const pushColumnSizeChange = useCallback(\n (nextWidth: number) => {\n onColumnResize?.(columnId, nextWidth);\n visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n },\n [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n const onResizeStart = useCallback(() => {\n setIsResizing(true);\n }, []);\n\n const onResizeEnd = useCallback(() => {\n setIsResizing(false);\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n // Mouse resize\n const onResizeHandler = useCallback(\n (e: MouseEvent | TouchEvent) => {\n if (realColumnIndex == -1) return;\n\n const delta =\n ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n // We will notify the user of the change in the column size only when the user releases the mouse button\n\n // To prevent text selection\n e.preventDefault();\n e.stopPropagation();\n },\n [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n // Keyboard resize\n const handleKeyboardResize = useCallback(\n (e: React.KeyboardEvent) => {\n if (realColumnIndex == -1) return;\n\n const delta = getCorrectDelta(e);\n\n if (delta === 0) return;\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n },\n [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n return {\n isResizing,\n onResizeStart,\n onResizeEnd,\n onResizeHandler,\n handleKeyboardResize,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["import { useCallback, useContext, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { getGridLayout, changeGridLayout, setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n let multiplier = 1;\n\n if (e.shiftKey) multiplier *= 5;\n if (e.altKey) multiplier *= 10;\n\n if (e.code === 'ArrowLeft') {\n return -multiplier;\n }\n if (e.code === 'ArrowRight') {\n return multiplier;\n }\n return 0;\n};\n\nexport const useHeaderResizer = ({\n columnId,\n innerRef,\n}: {\n columnId: string;\n innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n const {\n visibleColumns,\n tableProps: { onColumnResize, onColumnSizeChange },\n virtualListRef,\n } = useContext(DataTableContext);\n\n const [isResizing, setIsResizing] = useState(false);\n\n const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n const visibleColumnsOnGridLayout = useMemo(\n () =>\n visibleColumnsCopy.reduce((acc, cur) => {\n if (cur.columns) {\n return acc.concat(cur.columns);\n }\n return acc.concat(cur);\n }, [] as DSDataTableT.InternalColumn[]),\n [visibleColumnsCopy],\n );\n\n const realColumnIndex = useMemo(\n () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n [columnId, visibleColumnsOnGridLayout],\n );\n\n // Notifies the user of the change in the column size\n const pushColumnSizeChange = useCallback(\n (nextWidth: number) => {\n onColumnResize?.(columnId, nextWidth);\n visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n },\n [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n const onResizeStart = useCallback(() => {\n setIsResizing(true);\n }, []);\n\n const onResizeEnd = useCallback(() => {\n setIsResizing(false);\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n // Mouse resize\n const onResizeHandler = useCallback(\n (e: MouseEvent | TouchEvent) => {\n if (realColumnIndex == -1) return;\n\n const delta =\n ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n // We will notify the user of the change in the column size only when the user releases the mouse button\n\n // To prevent text selection\n e.preventDefault();\n e.stopPropagation();\n },\n [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n // Keyboard resize\n const handleKeyboardResize = useCallback(\n (e: React.KeyboardEvent) => {\n if (realColumnIndex == -1) return;\n\n if (e.key === 'Enter') {\n e.stopPropagation();\n }\n\n const delta = getCorrectDelta(e);\n\n if (delta === 0) return;\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n },\n [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n return {\n isResizing,\n onResizeStart,\n onResizeEnd,\n onResizeHandler,\n handleKeyboardResize,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|