@elliemae/ds-data-table 3.1.3 → 3.1.4-rc.2
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/DataTable.js +3 -1
- package/dist/cjs/DataTable.js.map +2 -2
- package/dist/cjs/configs/useDatatableConfig.js +6 -1
- package/dist/cjs/configs/useDatatableConfig.js.map +2 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js +16 -2
- package/dist/cjs/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/cjs/parts/EmptyContent.js +4 -4
- package/dist/cjs/parts/EmptyContent.js.map +2 -2
- package/dist/cjs/parts/FilterBar/FiltersBar.js +7 -1
- package/dist/cjs/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +1 -1
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +16 -7
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/SortableHeaderCell.js +5 -1
- package/dist/cjs/parts/SortableHeaderCell.js.map +2 -2
- package/dist/cjs/parts/TableContent.js +6 -8
- package/dist/cjs/parts/TableContent.js.map +2 -2
- package/dist/cjs/parts/VirtualRowsList.js +1 -9
- package/dist/cjs/parts/VirtualRowsList.js.map +2 -2
- package/dist/cjs/styled.js +6 -11
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/DataTable.js +3 -1
- package/dist/esm/DataTable.js.map +2 -2
- package/dist/esm/configs/useDatatableConfig.js +6 -1
- package/dist/esm/configs/useDatatableConfig.js.map +2 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js +16 -2
- package/dist/esm/exported-related/Toolbar/Toolbar.js.map +2 -2
- package/dist/esm/parts/EmptyContent.js +4 -4
- package/dist/esm/parts/EmptyContent.js.map +2 -2
- package/dist/esm/parts/FilterBar/FiltersBar.js +7 -1
- package/dist/esm/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +1 -1
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +16 -7
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/SortableHeaderCell.js +5 -1
- package/dist/esm/parts/SortableHeaderCell.js.map +2 -2
- package/dist/esm/parts/TableContent.js +6 -8
- package/dist/esm/parts/TableContent.js.map +2 -2
- package/dist/esm/parts/VirtualRowsList.js +1 -9
- package/dist/esm/parts/VirtualRowsList.js.map +2 -2
- package/dist/esm/styled.js +6 -11
- package/dist/esm/styled.js.map +2 -2
- package/package.json +19 -19
package/dist/cjs/styled.js
CHANGED
|
@@ -67,24 +67,21 @@ const StyledFocusWithin = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
67
67
|
${(props) => props.hideFocus ? "" : styledFocusCss(props)}
|
|
68
68
|
}
|
|
69
69
|
`;
|
|
70
|
-
const StyledDataTableWrapper = import_ds_system.styled.
|
|
70
|
+
const StyledDataTableWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
71
71
|
width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};
|
|
72
72
|
height: ${(props) => (0, import_helpers.sizeToCss)(props.height ?? " 100%")};
|
|
73
73
|
`;
|
|
74
|
-
const StyledDataTableContentWrapper = import_ds_system.styled.
|
|
74
|
+
const StyledDataTableContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
75
75
|
user-select: ${({ noSelectionAllowed }) => noSelectionAllowed ? "none" : "auto"};
|
|
76
76
|
width: 100%;
|
|
77
|
-
height: 100%;
|
|
78
77
|
`;
|
|
79
78
|
const StyledTableWrapper = import_ds_system.styled.div`
|
|
80
79
|
display: inline-block;
|
|
81
80
|
border-spacing: 0;
|
|
82
81
|
z-index: 0;
|
|
83
82
|
position: relative;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
height: ${(0, import_helpers.sizeToCss)(height)};
|
|
87
|
-
`}
|
|
83
|
+
width: 100%;
|
|
84
|
+
height: 100%;
|
|
88
85
|
`;
|
|
89
86
|
const StyledTableContentWrapper = import_ds_system.styled.div`
|
|
90
87
|
position: relative;
|
|
@@ -94,10 +91,8 @@ const StyledTableContentWrapper = import_ds_system.styled.div`
|
|
|
94
91
|
`;
|
|
95
92
|
const StyledVirtualListWrapper = import_ds_system.styled.div`
|
|
96
93
|
overflow: auto;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
width: ${(0, import_helpers.sizeToCss)(width)};
|
|
100
|
-
`}
|
|
94
|
+
height: 100%;
|
|
95
|
+
width: 100%;
|
|
101
96
|
`;
|
|
102
97
|
const getGridTemplateColumnsStyle = ({
|
|
103
98
|
cols,
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n`;\n\nexport const StyledDataTableWrapper = styled
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,qBAAqB;AACrB,sBAA2B;AAC3B,qBAAsD;AACtD,kCAAgC;AAChC,uBAAgC;AAOhC,MAAM,iBAAiB,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAShB,MAAM,OAAO,MAAM;AAAA;AAAA,aAE5B,4CAAgB;AAAA;AAGtB,MAAM,oBAAoB,6BAAO,mBAAI;AAAA;AAAA,MAEtC,CAAC,UAAW,MAAM,YAAY,KAAK,eAAe,KAAK;AAAA;AAAA;AAItD,MAAM,yBAAyB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n width?: string | number;\n height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n :focus-within {\n ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<WidthAndHeight & { noSelectionAllowed: boolean }>`\n user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n width: 100%;\n`;\n\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n display: inline-block;\n border-spacing: 0;\n z-index: 0;\n position: relative;\n width: 100%;\n height: 100%;\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n position: relative;\n ${({ height = 'auto' }) => `\n height: ${sizeToCss(height)};\n `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n overflow: auto;\n height: 100%;\n width: 100%;\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n cols: string[];\n isExpandable: boolean;\n colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n cols,\n colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n if (!cols) return '';\n if (colsLayoutStyle === 'fixed') {\n const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n return `grid-template-columns: ${widthAttr}`;\n }\n\n return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n colsLayoutStyle: string;\n totalColumnsWidth: number | string;\n}>`\n position: relative; /* ie11 fallback */\n position: sticky;\n top: 0;\n z-index: 4;\n background: white;\n width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n isExpandable: props.isExpandable,\n colsLayoutStyle: props.colsLayoutStyle,\n })};\n border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n grid-auto-flow: column;\n`;\n\nexport const StyledHeadTh = styled.div<any>`\n min-height: 24px;\n line-height: normal;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 0.923rem;\n text-align: left;\n ${columnPadding}\n color: #353c46;\n min-height: 1.84615rem;\n position: sticky;\n z-index: ${ZIndexDataTable.HEADER_ROW};\n display: flex;\n justify-content: space-between;\n box-sizing: border-box;\n outline: none;\n ${(props) =>\n props.isDraggingActive\n ? ''\n : `:hover {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n cursor: pointer;\n }`}\n\n :focus {\n &:after {\n display: block;\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n pointer-events: none;\n z-index: ${ZIndexDataTable.FOCUS_BORDER};\n }\n }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n height: 100%;\n display: flex;\n align-items: center;\n max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n display: inline-block;\n background: transparent;\n width: 4px;\n height: 100%;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n\n // prevents from scrolling while dragging on touch devices\n touch-action: none;\n\n cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n position: relative; /* ie11 fallback */\n position: sticky;\n display: inline-block;\n right: 0;\n /* border-bottom: 1px solid #ebedf0; */\n background: white;\n`;\n\nexport const StyledCell = styled.div`\n ${cellPadding}\n /* border-bottom: 1px solid #ebedf0; */\n /* box-sizing: border-box; */\n display: flex;\n align-items: center;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n display: grid;\n justify-self: flex-end;\n flex: 1 1 auto;\n width: 100%;\n height: 100%;\n align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n width: 100%;\n height: 100%;\n align-items: center;\n & ${StyledPencilIcon} {\n display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n }\n &:hover {\n ${StyledPencilIcon} {\n display: block;\n }\n }\n &:focus {\n ${styledFocusCss}\n ${StyledPencilIcon} {\n display: block;\n }\n }\n outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n position: relative;\n z-index: ${ZIndexDataTable.ROW};\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n /* width: ${(props) =>\n props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n position: relative;\n background-color: ${({ theme }) => theme.colors.brand[200]};\n align-items: center;\n padding: 0 ${(props) => props.padding};\n border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n font-weight: ${(props) => props.theme.fontWeights.semibold};\n font-size: 12px;\n color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n position: relative;\n z-index: 2;\n\n min-height: ${(props) => props.minHeight || '36px'};\n height: ${(props) => props.height || 'auto'};\n\n width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n ${(props) =>\n getGridTemplateColumnsStyle({\n cols: props.cols,\n colsLayoutStyle: props.colLayoutStyle,\n isExpandable: props.isExpandable,\n })};\n background-color: ${({ backgroundColor, isDragging, theme }) =>\n isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n outline: none;\n\n :focus {\n ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n }\n\n ${({ isDropIndicatorPositionInside, theme }) => {\n if (!isDropIndicatorPositionInside) return '';\n return styledFocusCss({ theme });\n }}\n\n ${({ shouldDisplayHover, theme, disabled }) =>\n shouldDisplayHover && !disabled\n ? `:hover {\n background-color: ${theme.colors.brand[200]};\n }`\n : ''}\n\n box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n ${(props) =>\n !props.selected\n ? ''\n : `\n background-color: ${props.theme.colors.brand[200]};\n border: 1px solid ${props.theme.colors.brand[500]};\n `}\n\n color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DataTable.js
CHANGED
|
@@ -38,7 +38,9 @@ const DataTable = (props) => {
|
|
|
38
38
|
ref: tableWrapperRef,
|
|
39
39
|
"data-testid": DATA_TESTID.DATA_TABLE_WRAPPER,
|
|
40
40
|
height,
|
|
41
|
-
width
|
|
41
|
+
width,
|
|
42
|
+
cols: ["100%"],
|
|
43
|
+
rows: withFilterBar ? ["auto", "1fr"] : ["1fr"]
|
|
42
44
|
}, withFilterBar ? /* @__PURE__ */ React2.createElement(FiltersBar, null) : null, /* @__PURE__ */ React2.createElement(TableContent, {
|
|
43
45
|
ref: tableContentWrapperRef
|
|
44
46
|
})));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TableContent } from './parts/TableContent';\nimport { TypescriptProps } from './types/props';\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n const { withFilterBar } = props;\n\n const tableWrapperRef = useRef();\n const tableContentWrapperRef = useRef();\n\n const ctx = useDatatableConfig(props);\n\n const {\n tableProps: { height, width },\n } = ctx;\n\n return (\n <DataTableContext.Provider value={ctx}>\n <StyledDataTableWrapper\n ref={tableWrapperRef}\n data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n height={height}\n width={width}\n >\n {withFilterBar ? <FiltersBar /> : null}\n <TableContent ref={tableContentWrapperRef} />\n </StyledDataTableWrapper>\n </DataTableContext.Provider>\n );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { TableContent } from './parts/TableContent';\nimport { TypescriptProps } from './types/props';\nimport { DataTableContext, defaultProps } from './DataTableContext';\nimport { DATA_TESTID } from './configs/constants';\nimport { useDatatableConfig } from './configs/useDatatableConfig';\nimport { FiltersBar } from './parts/FilterBar/FiltersBar';\nimport { DataTableSchema } from './DataTableSchema';\nimport { StyledDataTableWrapper } from './styled';\n\nexport const DataTable = (props: TypescriptProps): JSX.Element => {\n const { withFilterBar } = props;\n\n const tableWrapperRef = useRef();\n const tableContentWrapperRef = useRef();\n\n const ctx = useDatatableConfig(props);\n\n const {\n tableProps: { height, width },\n } = ctx;\n\n return (\n <DataTableContext.Provider value={ctx}>\n <StyledDataTableWrapper\n ref={tableWrapperRef}\n data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n height={height}\n width={width}\n cols={['100%']}\n rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n >\n {withFilterBar ? <FiltersBar /> : null}\n <TableContent ref={tableContentWrapperRef} />\n </StyledDataTableWrapper>\n </DataTableContext.Provider>\n );\n};\n\nDataTable.propTypes = DataTableSchema;\nDataTable.defaultProps = { ...defaultProps };\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DataTableSchema;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAM,YAAY,CAAC,UAAwC;AAChE,QAAM,EAAE,kBAAkB;AAE1B,QAAM,kBAAkB,OAAO;AAC/B,QAAM,yBAAyB,OAAO;AAEtC,QAAM,MAAM,mBAAmB,KAAK;AAEpC,QAAM;AAAA,IACJ,YAAY,EAAE,QAAQ;AAAA,MACpB;AAEJ,SACE,qCAAC,iBAAiB,UAAjB;AAAA,IAA0B,OAAO;AAAA,KAChC,qCAAC;AAAA,IACC,KAAK;AAAA,IACL,eAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA,IACA,MAAM,CAAC,MAAM;AAAA,IACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,KAE7C,gBAAgB,qCAAC,gBAAW,IAAK,MAClC,qCAAC;AAAA,IAAa,KAAK;AAAA,GAAwB,CAC7C,CACF;AAEJ;AAEA,UAAU,YAAY;AACtB,UAAU,eAAe,mBAAK;AAC9B,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -27,7 +27,12 @@ const useDatatableConfig = (props) => {
|
|
|
27
27
|
const virtualListRef = useRef(null);
|
|
28
28
|
const columnHeaderRef = useRef(null);
|
|
29
29
|
const tableColsWithAddons = useTableColsWithAddons(props);
|
|
30
|
-
const visibleColumns = useMemo(() => tableColsWithAddons.filter((col) => !props.hiddenColumns.includes(col.accessor))
|
|
30
|
+
const visibleColumns = useMemo(() => tableColsWithAddons.filter((col) => !props.hiddenColumns.includes(col.accessor)).map((col) => {
|
|
31
|
+
if (col.columns) {
|
|
32
|
+
col.columns = col.columns.filter((subCol) => !props.hiddenColumns.includes(subCol.accessor));
|
|
33
|
+
}
|
|
34
|
+
return col;
|
|
35
|
+
}), [props.hiddenColumns, tableColsWithAddons]);
|
|
31
36
|
const [dataLength, setDataLength] = useState(1);
|
|
32
37
|
const virtualListHelpers = useVirtual({
|
|
33
38
|
size: dataLength,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useDatatableConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n const virtualListRef = useRef<HTMLDivElement>(null);\n const columnHeaderRef = useRef<HTMLDivElement>(null);\n\n // ===========================================================================\n // Column config\n // ===========================================================================\n const tableColsWithAddons = useTableColsWithAddons(props);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { useVirtual } from 'react-virtual';\nimport { columnsToGrid } from '../helpers/columnsToGrid';\nimport { TypescriptColumn, TypescriptContext, TypescriptProps } from '../types/props';\nimport { useRowFlattenization } from './useRowFlattenization';\nimport { usePaginationConfig } from './usePaginationConfig';\nimport { useTableColsWithAddons } from './useTableColsWithAddons';\nimport { ColsLayoutStyle } from './constants';\nimport { useInternalStateConfig } from './useInternalStateConfig';\n\nexport const useDatatableConfig = (props: TypescriptProps): TypescriptContext => {\n const virtualListRef = useRef<HTMLDivElement>(null);\n const columnHeaderRef = useRef<HTMLDivElement>(null);\n\n // ===========================================================================\n // Column config\n // ===========================================================================\n const tableColsWithAddons = useTableColsWithAddons(props);\n const visibleColumns = useMemo(\n () =>\n tableColsWithAddons\n .filter((col: TypescriptColumn) => !props.hiddenColumns.includes(col.accessor))\n .map((col: TypescriptColumn) => {\n if (col.columns) {\n col.columns = col.columns.filter(\n (subCol: TypescriptColumn) => !props.hiddenColumns.includes(subCol.accessor),\n );\n }\n return col;\n }),\n [props.hiddenColumns, tableColsWithAddons],\n );\n\n // ===========================================================================\n // Virtualization\n // ===========================================================================\n\n const [dataLength, setDataLength] = useState(1);\n\n // estimateSize should not be really required given what was stated on\n // https://github.com/tannerlinsley/react-virtual/issues/23\n const virtualListHelpers = useVirtual({\n size: dataLength,\n parentRef: virtualListRef,\n overscan: 15,\n paddingStart: columnHeaderRef.current?.getBoundingClientRect()?.height ?? 24,\n });\n\n // ===========================================================================\n // Action ref setup\n // ===========================================================================\n useEffect(() => {\n if (props.actionRef) {\n props.actionRef.current.scrollToIndex = virtualListHelpers.scrollToIndex;\n props.actionRef.current.scrollToOffset = virtualListHelpers.scrollToOffset;\n }\n }, [props.actionRef, virtualListHelpers.scrollToIndex, virtualListHelpers.scrollToOffset]);\n\n // ===========================================================================\n // Data flattenization and pagination\n // ===========================================================================\n\n const [flattenedData, allDataFlattened] = useRowFlattenization(props);\n\n const [paginatedData, paginationHelpers] = usePaginationConfig(props, flattenedData);\n\n // Redo virtualization until we match the lengths\n if (dataLength !== (paginatedData || flattenedData).length) setDataLength((paginatedData || flattenedData).length);\n\n // ===========================================================================\n // Layout config\n // ===========================================================================\n\n const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n\n // We need to listen and update the state based on this props\n useEffect(() => {\n setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));\n }, [visibleColumns, props.colsLayoutStyle]);\n\n const totalColumnsWidth = useMemo(\n () =>\n props.colsLayoutStyle === ColsLayoutStyle.Fixed\n ? gridLayout.reduce((acc: number, cur: string) => acc + Number.parseInt(cur, 10), 0)\n : '100%',\n [props.colsLayoutStyle, gridLayout],\n );\n\n const layoutHelpers = useMemo(\n () => ({\n gridLayout,\n setGridLayout,\n totalColumnsWidth,\n }),\n [gridLayout, setGridLayout, totalColumnsWidth],\n );\n\n // ===========================================================================\n // Internal state config\n // ===========================================================================\n\n const internalState = useInternalStateConfig();\n\n const ctx = useMemo(\n () => ({\n tableProps: props,\n layoutHelpers,\n paginationHelpers,\n visibleColumns,\n virtualListHelpers,\n flattenedData: paginatedData || flattenedData,\n allDataFlattened,\n virtualListRef,\n columnHeaderRef,\n ...internalState,\n }),\n [\n props,\n layoutHelpers,\n paginationHelpers,\n visibleColumns,\n virtualListHelpers,\n paginatedData,\n flattenedData,\n allDataFlattened,\n virtualListRef,\n columnHeaderRef,\n internalState,\n ],\n );\n\n return ctx;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEO,MAAM,qBAAqB,CAAC,UAA8C;AAC/E,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,kBAAkB,OAAuB,IAAI;AAKnD,QAAM,sBAAsB,uBAAuB,KAAK;AACxD,QAAM,iBAAiB,QACrB,MACE,oBACG,OAAO,CAAC,QAA0B,CAAC,MAAM,cAAc,SAAS,IAAI,QAAQ,CAAC,EAC7E,IAAI,CAAC,QAA0B;AAC9B,QAAI,IAAI,SAAS;AACf,UAAI,UAAU,IAAI,QAAQ,OACxB,CAAC,WAA6B,CAAC,MAAM,cAAc,SAAS,OAAO,QAAQ,CAC7E;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC,GACL,CAAC,MAAM,eAAe,mBAAmB,CAC3C;AAMA,QAAM,CAAC,YAAY,iBAAiB,SAAS,CAAC;AAI9C,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc,gBAAgB,SAAS,sBAAsB,GAAG,UAAU;AAAA,EAC5E,CAAC;AAKD,YAAU,MAAM;AACd,QAAI,MAAM,WAAW;AACnB,YAAM,UAAU,QAAQ,gBAAgB,mBAAmB;AAC3D,YAAM,UAAU,QAAQ,iBAAiB,mBAAmB;AAAA,IAC9D;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,mBAAmB,eAAe,mBAAmB,cAAc,CAAC;AAMzF,QAAM,CAAC,eAAe,oBAAoB,qBAAqB,KAAK;AAEpE,QAAM,CAAC,eAAe,qBAAqB,oBAAoB,OAAO,aAAa;AAGnF,MAAI,eAAgB,kBAAiB,eAAe;AAAQ,kBAAe,kBAAiB,eAAe,MAAM;AAMjH,QAAM,CAAC,YAAY,iBAAiB,SAAS,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAGjG,YAAU,MAAM;AACd,kBAAc,cAAc,gBAAgB,MAAM,eAAe,CAAC;AAAA,EACpE,GAAG,CAAC,gBAAgB,MAAM,eAAe,CAAC;AAE1C,QAAM,oBAAoB,QACxB,MACE,MAAM,oBAAoB,gBAAgB,QACtC,WAAW,OAAO,CAAC,KAAa,QAAgB,MAAM,OAAO,SAAS,KAAK,EAAE,GAAG,CAAC,IACjF,QACN,CAAC,MAAM,iBAAiB,UAAU,CACpC;AAEA,QAAM,gBAAgB,QACpB,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA,CAAC,YAAY,eAAe,iBAAiB,CAC/C;AAMA,QAAM,gBAAgB,uBAAuB;AAE7C,QAAM,MAAM,QACV,MAAO;AAAA,IACL,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,KACG,gBAEL;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,21 +50,35 @@ const ToolbarPosition = styled.div`
|
|
|
50
50
|
const Toolbar = ({ children }) => {
|
|
51
51
|
const [show, setShow] = useState(false);
|
|
52
52
|
const toolbarRef = useRef(null);
|
|
53
|
+
const toolbarTrigger = useRef(null);
|
|
53
54
|
const handleOnClickOutside = useCallback(() => setShow(false), []);
|
|
54
55
|
const handleOnClick = useCallback(() => setShow(true), []);
|
|
55
56
|
useOnClickOutside(toolbarRef, handleOnClickOutside);
|
|
57
|
+
const onToolbarKeyDown = useCallback((e) => {
|
|
58
|
+
if (e.code === "Escape") {
|
|
59
|
+
setShow(false);
|
|
60
|
+
toolbarTrigger.current?.focus();
|
|
61
|
+
}
|
|
62
|
+
}, []);
|
|
63
|
+
const onTriggerKeyDown = useCallback((e) => {
|
|
64
|
+
if (["Enter", "Space"].includes(e.code)) {
|
|
65
|
+
handleOnClick();
|
|
66
|
+
}
|
|
67
|
+
}, [handleOnClick]);
|
|
56
68
|
return /* @__PURE__ */ React2.createElement(ToolbarPosition, {
|
|
57
69
|
ref: toolbarRef,
|
|
58
70
|
onClick: (e) => e.stopPropagation()
|
|
59
71
|
}, /* @__PURE__ */ React2.createElement(ToolbarWrapper, {
|
|
60
72
|
onMouseEnter: () => setShow(true),
|
|
61
|
-
onMouseLeave: () => setShow(false)
|
|
73
|
+
onMouseLeave: () => setShow(false),
|
|
74
|
+
onKeyDown: onToolbarKeyDown
|
|
62
75
|
}, show && /* @__PURE__ */ React2.createElement(ToolbarBtns, null, children), /* @__PURE__ */ React2.createElement(DSButtonV2, {
|
|
63
76
|
buttonType: "icon",
|
|
64
77
|
className: "toolbar-trigger",
|
|
65
78
|
"data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
|
|
79
|
+
innerRef: toolbarTrigger,
|
|
66
80
|
onClick: handleOnClick,
|
|
67
|
-
onKeyDown:
|
|
81
|
+
onKeyDown: onTriggerKeyDown,
|
|
68
82
|
tabIndex: 0
|
|
69
83
|
}, /* @__PURE__ */ React2.createElement(MoreOptionsVert, null))));
|
|
70
84
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/Toolbar/Toolbar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useRef, useState } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useOnClickOutside } from '@elliemae/ds-utilities';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst ToolbarBtns = styled.div`\n & > .em-ds-toolbar {\n box-shadow: none;\n }\n`;\n\nconst ToolbarWrapper = styled.div`\n display: flex;\n align-items: center;\n height: 36px;\n margin-right: 1px;\n pointer-events: all;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n & > .toolbar-trigger {\n border: none;\n }\n }\n`;\n\nconst ToolbarPosition = styled.div`\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n background: white;\n height: 28px;\n margin-top: 4px;\n width: 100%;\n padding-left: 4px;\n &:hover {\n z-index: 1;\n }\n :after {\n content: '';\n position: absolute;\n left: 0px;\n top: 4px;\n bottom: 4px;\n width: 1px;\n background-color: ${(props) => props.theme.colors.neutral['080']};\n z-index: 7;\n }\n`;\n\nexport const Toolbar: React.ComponentType<Record<string, unknown>> = ({ children }) => {\n const [show, setShow] = useState(false);\n\n const toolbarRef = useRef(null);\n const toolbarTrigger = useRef<HTMLButtonElement>(null);\n\n const handleOnClickOutside = useCallback(() => setShow(false), []);\n\n const handleOnClick = useCallback(() => setShow(true), []);\n\n useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n const onToolbarKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.code === 'Escape') {\n setShow(false);\n toolbarTrigger.current?.focus();\n }\n }, []);\n\n const onTriggerKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) {\n handleOnClick();\n }\n },\n [handleOnClick],\n );\n\n return (\n <ToolbarPosition ref={toolbarRef} onClick={(e: React.MouseEvent) => e.stopPropagation()}>\n <ToolbarWrapper\n onMouseEnter={() => setShow(true)}\n onMouseLeave={() => setShow(false)}\n onKeyDown={onToolbarKeyDown}\n >\n {show && <ToolbarBtns>{children}</ToolbarBtns>}\n <DSButtonV2\n buttonType=\"icon\"\n className=\"toolbar-trigger\"\n data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n innerRef={toolbarTrigger}\n onClick={handleOnClick}\n onKeyDown={onTriggerKeyDown}\n tabIndex={0}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n </ToolbarWrapper>\n </ToolbarPosition>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAM3B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc9B,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAoBP,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAKvD,MAAM,UAAwD,CAAC,EAAE,eAAe;AACrF,QAAM,CAAC,MAAM,WAAW,SAAS,KAAK;AAEtC,QAAM,aAAa,OAAO,IAAI;AAC9B,QAAM,iBAAiB,OAA0B,IAAI;AAErD,QAAM,uBAAuB,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAEjE,QAAM,gBAAgB,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEzD,oBAAkB,YAAY,oBAAoB;AAElD,QAAM,mBAAmB,YAAY,CAAC,MAA2B;AAC/D,QAAI,EAAE,SAAS,UAAU;AACvB,cAAQ,KAAK;AACb,qBAAe,SAAS,MAAM;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YACvB,CAAC,MAA2B;AAC1B,QAAI,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AACvC,oBAAc;AAAA,IAChB;AAAA,EACF,GACA,CAAC,aAAa,CAChB;AAEA,SACE,qCAAC;AAAA,IAAgB,KAAK;AAAA,IAAY,SAAS,CAAC,MAAwB,EAAE,gBAAgB;AAAA,KACpF,qCAAC;AAAA,IACC,cAAc,MAAM,QAAQ,IAAI;AAAA,IAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,IACjC,WAAW;AAAA,KAEV,QAAQ,qCAAC,mBAAa,QAAS,GAChC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,WAAU;AAAA,IACV,eAAa,YAAY;AAAA,IACzB,UAAU;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,KAEV,qCAAC,qBAAgB,CACnB,CACF,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -50,9 +50,9 @@ const EmptyContent = ({ width }) => {
|
|
|
50
50
|
noResultsMessage,
|
|
51
51
|
noResultsSecondaryMessage,
|
|
52
52
|
noResultsButtonLabel,
|
|
53
|
-
onNoResultsButtonClick
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
onNoResultsButtonClick
|
|
54
|
+
},
|
|
55
|
+
virtualListRef
|
|
56
56
|
} = useContext(DataTableContext);
|
|
57
57
|
if (React2.isValidElement(noResultsPlaceholder))
|
|
58
58
|
return /* @__PURE__ */ React2.createElement(CenterContentFlexWrapper, {
|
|
@@ -63,7 +63,7 @@ const EmptyContent = ({ width }) => {
|
|
|
63
63
|
"aria-live": "assertive",
|
|
64
64
|
role: "status"
|
|
65
65
|
}, /* @__PURE__ */ React2.createElement(EmptyStateWrapper, {
|
|
66
|
-
width:
|
|
66
|
+
width: virtualListRef.current?.clientWidth,
|
|
67
67
|
justifyContent: "center"
|
|
68
68
|
}, /* @__PURE__ */ React2.createElement(Icon, {
|
|
69
69
|
size: "xxl"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/EmptyContent.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n position: sticky;\n height: fit-content;\n top: 0;\n left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n fill: ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[300]};\n justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n text-align: center;\n font-weight: bold;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n color: ${(props) => props.theme.colors.neutral[600]};\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n text-align: center;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n color: ${(props) => props.theme.colors.neutral[500]};\n margin: 0;\n`;\nconst Button = styled(DSButton)`\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n justify-self: center;\n width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n width: ${({ width }) => width}px;\n height: calc(100% - 48px);\n display: flex;\n align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n const {\n tableProps: {\n noResultsPlaceholder,\n noResultsMessage,\n noResultsSecondaryMessage,\n noResultsButtonLabel,\n onNoResultsButtonClick,\n
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { WarningTriangle } from '@elliemae/ds-icons';\nimport { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from '@elliemae/ds-system';\nimport { DSButton } from '@elliemae/ds-button';\nimport { styled } from '@elliemae/ds-system';\nimport PropTypes from 'prop-types';\n\nimport { DataTableContext } from '../DataTableContext';\n\nconst EmptyStateWrapper = styled(Grid)`\n position: sticky;\n height: fit-content;\n top: 0;\n left: 0;\n`;\nconst Icon = styled(WarningTriangle)`\n fill: ${(props) => props.theme.colors.neutral[300]};\n color: ${(props) => props.theme.colors.neutral[300]};\n justify-self: center;\n`;\nconst PrimaryMessage = styled.p`\n text-align: center;\n font-weight: bold;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};\n color: ${(props) => props.theme.colors.neutral[600]};\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};\n`;\nconst SecondaryMessage = styled.p`\n text-align: center;\n font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */\n color: ${(props) => props.theme.colors.neutral[500]};\n margin: 0;\n`;\nconst Button = styled(DSButton)`\n margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};\n justify-self: center;\n width: fit-content;\n`;\nconst CenterContentFlexWrapper = styled.div<{ width: number | string }>`\n width: ${({ width }) => width}px;\n height: calc(100% - 48px);\n display: flex;\n align-items: center;\n`;\n\nconst EmptyContent: React.ComponentType<{ width: string | number }> = ({ width }) => {\n const {\n tableProps: {\n noResultsPlaceholder,\n noResultsMessage,\n noResultsSecondaryMessage,\n noResultsButtonLabel,\n onNoResultsButtonClick,\n },\n virtualListRef,\n } = useContext(DataTableContext);\n\n if (React.isValidElement(noResultsPlaceholder))\n return <CenterContentFlexWrapper width={width}>{noResultsPlaceholder}</CenterContentFlexWrapper>;\n\n return (\n <CenterContentFlexWrapper width={width} aria-live=\"assertive\" role=\"status\">\n <EmptyStateWrapper width={virtualListRef.current?.clientWidth} justifyContent=\"center\">\n <Icon size=\"xxl\" />\n <PrimaryMessage>{noResultsMessage}</PrimaryMessage>\n {noResultsSecondaryMessage ? <SecondaryMessage>{noResultsSecondaryMessage}</SecondaryMessage> : null}\n {noResultsButtonLabel && onNoResultsButtonClick ? (\n <Button buttonType=\"secondary\" labelText={noResultsButtonLabel} onClick={onNoResultsButtonClick} />\n ) : null}\n </EmptyStateWrapper>\n </CenterContentFlexWrapper>\n );\n};\n\nEmptyContent.propTypes = {\n width: PropTypes.number,\n};\n\nexport { EmptyContent };\nexport default EmptyContent;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,OAAO,OAAO,eAAe;AAAA,UACzB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,WACrC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA,eAGf,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA,gBACjC,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA,mBACpD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,EAAE;AAAA;AAE3E,MAAM,mBAAmB,OAAO;AAAA;AAAA,eAEjB,CAAC,UAAU,SAAS,MAAM,MAAM,UAAU,MAAM,IAAI;AAAA,WACxD,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAGjD,MAAM,SAAS,OAAO,QAAQ;AAAA,gBACd,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAIvE,MAAM,2BAA2B,OAAO;AAAA,WAC7B,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAM1B,MAAM,eAAgE,CAAC,EAAE,YAAY;AACnF,QAAM;AAAA,IACJ,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEF;AAAA,MACE,WAAW,gBAAgB;AAE/B,MAAI,OAAM,eAAe,oBAAoB;AAC3C,WAAO,qCAAC;AAAA,MAAyB;AAAA,OAAe,oBAAqB;AAEvE,SACE,qCAAC;AAAA,IAAyB;AAAA,IAAc,aAAU;AAAA,IAAY,MAAK;AAAA,KACjE,qCAAC;AAAA,IAAkB,OAAO,eAAe,SAAS;AAAA,IAAa,gBAAe;AAAA,KAC5E,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAM,GACjB,qCAAC,sBAAgB,gBAAiB,GACjC,4BAA4B,qCAAC,wBAAkB,yBAA0B,IAAsB,MAC/F,wBAAwB,yBACvB,qCAAC;AAAA,IAAO,YAAW;AAAA,IAAY,WAAW;AAAA,IAAsB,SAAS;AAAA,GAAwB,IAC/F,IACN,CACF;AAEJ;AAEA,aAAa,YAAY;AAAA,EACvB,OAAO,UAAU;AACnB;AAGA,IAAO,uBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -39,9 +39,11 @@ const FiltersBar = () => {
|
|
|
39
39
|
const removeAllFilters = useCallback(() => {
|
|
40
40
|
onFiltersChange([]);
|
|
41
41
|
filterBarProps?.onClearAllFiltersClick?.();
|
|
42
|
+
setIsOpen(false);
|
|
42
43
|
}, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
|
|
43
44
|
const onFilterBarClose = useCallback(() => {
|
|
44
45
|
filterBarProps?.onDropdownMenuToggle?.(false, "onClose");
|
|
46
|
+
dropdownMenuRef.current.focus();
|
|
45
47
|
setIsOpen(false);
|
|
46
48
|
}, [filterBarProps?.onDropdownMenuToggle]);
|
|
47
49
|
const onFilterBarOpen = useCallback(() => {
|
|
@@ -96,7 +98,11 @@ const FiltersBar = () => {
|
|
|
96
98
|
{
|
|
97
99
|
id: "__internal__option__clear__filters",
|
|
98
100
|
label: "Clear Filters",
|
|
99
|
-
onClick: removeAllFilters
|
|
101
|
+
onClick: removeAllFilters,
|
|
102
|
+
onKeyDown: (e) => {
|
|
103
|
+
if (["Enter", "Space"].includes(e.code))
|
|
104
|
+
removeAllFilters();
|
|
105
|
+
}
|
|
100
106
|
},
|
|
101
107
|
...filterBarProps?.extraOptions || []
|
|
102
108
|
],
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/FiltersBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n SelectPill,\n MultiSelectPill,\n SingleDatePill,\n DateRangePill,\n NumberRangePill,\n DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n const {\n tableProps: { width, filterBarProps, onFiltersChange, filters },\n visibleColumns,\n } = useContext(DataTableContext);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const pillGroupRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n\n const dropdownMenuRef = useRef(null);\n\n const removeAllFilters = useCallback(() => {\n onFiltersChange([]);\n filterBarProps?.onClearAllFiltersClick?.();\n }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n const onFilterBarClose = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n setIsOpen(false);\n }, [filterBarProps?.onDropdownMenuToggle]);\n\n const onFilterBarOpen = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n setIsOpen(true);\n }, [filterBarProps?.onDropdownMenuToggle]);\n\n const onFilterBarOnClickOutside = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n filterBarProps?.onDropdownMenuClickOutside?.();\n setIsOpen(false);\n }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n const onTriggerClick = useCallback(() => {\n filterBarProps?.onDropdownMenuTriggerClick?.();\n onFilterBarOpen();\n }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n const finalIsOpen = useMemo(() => {\n if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n return isOpen;\n }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n return (\n <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n {filters.map(({ id: column, type, value }, index) => {\n const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n let Component: FilterPillComponent<unknown> = () => null;\n\n const filterType = type;\n if (filterType in pillRenderMapper) {\n Component = pillRenderMapper[filterType];\n } else if (filterBarProps?.customPillRenderer) {\n Component = filterBarProps.customPillRenderer;\n }\n return (\n <Component\n key={column}\n columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n column={column}\n value={value}\n filters={filters}\n onFiltersChange={onFiltersChange}\n prevRef={pillGroupRefs[index - 1]}\n innerRef={pillGroupRefs[index]}\n nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n />\n );\n })}\n <StyledDropdownMenu\n preventOverflow=\"scrollParent\"\n isOpen={finalIsOpen}\n onClose={onFilterBarClose}\n onClickOutsideMenu={onFilterBarOnClickOutside}\n options={[\n {\n id: '__internal__option__clear__filters',\n label: 'Clear Filters',\n onClick: removeAllFilters,\n },\n ...(filterBarProps?.extraOptions || []),\n ]}\n triggerComponent={\n <DSButtonV2\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n buttonType=\"icon\"\n innerRef={dropdownMenuRef}\n onClick={onTriggerClick}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n }\n />\n </StyledWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAEA;AAEA,MAAM,mBAA6D;AAAA,GAChE,aAAa,SAAS;AAAA,GACtB,aAAa,eAAe;AAAA,GAC5B,aAAa,cAAc;AAAA,GAC3B,aAAa,aAAa;AAAA,GAC1B,aAAa,gBAAgB;AAAA,GAC7B,aAAa,eAAe;AAAA,GAC5B,aAAa,iBAAiB;AACjC;AAEO,MAAM,aAAkC,MAAM;AACnD,QAAM;AAAA,IACJ,YAAY,EAAE,OAAO,gBAAgB,iBAAiB;AAAA,IACtD;AAAA,MACE,WAAW,gBAAgB;AAE/B,QAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;AAE1C,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;AAAG,WAAK,KAAK,OAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,QAAM,kBAAkB,OAAO,IAAI;AAEnC,QAAM,mBAAmB,YAAY,MAAM;AACzC,oBAAgB,CAAC,CAAC;AAClB,oBAAgB,yBAAyB;AAAA,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { MoreOptionsVert } from '@elliemae/ds-icons';\nimport { FILTER_TYPES } from '../../exported-related';\nimport {\n SelectPill,\n MultiSelectPill,\n SingleDatePill,\n DateRangePill,\n NumberRangePill,\n DateSwitcherPill,\n} from './components';\nimport { DataTableContext } from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n const {\n tableProps: { width, filterBarProps, onFiltersChange, filters },\n visibleColumns,\n } = useContext(DataTableContext);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const pillGroupRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n\n const dropdownMenuRef = useRef(null);\n\n const removeAllFilters = useCallback(() => {\n onFiltersChange([]);\n filterBarProps?.onClearAllFiltersClick?.();\n setIsOpen(false);\n }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);\n\n const onFilterBarClose = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');\n dropdownMenuRef.current.focus();\n setIsOpen(false);\n }, [filterBarProps?.onDropdownMenuToggle]);\n\n const onFilterBarOpen = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');\n setIsOpen(true);\n }, [filterBarProps?.onDropdownMenuToggle]);\n\n const onFilterBarOnClickOutside = useCallback(() => {\n filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');\n filterBarProps?.onDropdownMenuClickOutside?.();\n setIsOpen(false);\n }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);\n\n const onTriggerClick = useCallback(() => {\n filterBarProps?.onDropdownMenuTriggerClick?.();\n onFilterBarOpen();\n }, [filterBarProps?.onDropdownMenuTriggerClick]);\n\n const finalIsOpen = useMemo(() => {\n if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;\n return isOpen;\n }, [filterBarProps?.isDropdownMenuOpen, isOpen]);\n\n return (\n <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n {filters.map(({ id: column, type, value }, index) => {\n const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n let Component: FilterPillComponent<unknown> = () => null;\n\n const filterType = type;\n if (filterType in pillRenderMapper) {\n Component = pillRenderMapper[filterType];\n } else if (filterBarProps?.customPillRenderer) {\n Component = filterBarProps.customPillRenderer;\n }\n return (\n <Component\n key={column}\n columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n column={column}\n value={value}\n filters={filters}\n onFiltersChange={onFiltersChange}\n prevRef={pillGroupRefs[index - 1]}\n innerRef={pillGroupRefs[index]}\n nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n />\n );\n })}\n <StyledDropdownMenu\n preventOverflow=\"scrollParent\"\n isOpen={finalIsOpen}\n onClose={onFilterBarClose}\n onClickOutsideMenu={onFilterBarOnClickOutside}\n options={[\n {\n id: '__internal__option__clear__filters',\n label: 'Clear Filters',\n onClick: removeAllFilters,\n onKeyDown: (e: React.KeyboardEvent) => {\n if (['Enter', 'Space'].includes(e.code)) removeAllFilters();\n },\n },\n ...(filterBarProps?.extraOptions || []),\n ]}\n triggerComponent={\n <DSButtonV2\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON}\n buttonType=\"icon\"\n innerRef={dropdownMenuRef}\n onClick={onTriggerClick}\n >\n <MoreOptionsVert />\n </DSButtonV2>\n }\n />\n </StyledWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -125,7 +125,7 @@ const HeaderCell = (props) => {
|
|
|
125
125
|
ctx,
|
|
126
126
|
draggableProps,
|
|
127
127
|
textWrap
|
|
128
|
-
}), rightIcons, isResizeable && column.canResize !== false && /* @__PURE__ */ React2.createElement(HeaderResizer, {
|
|
128
|
+
}), rightIcons, isResizeable && column.canResize !== false && !column.columns && /* @__PURE__ */ React2.createElement(HeaderResizer, {
|
|
129
129
|
column
|
|
130
130
|
})), /* @__PURE__ */ React2.createElement("span", {
|
|
131
131
|
id: `${column.id}-instructions`,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\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: TypescriptColumn;\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: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n flattenedData,\n reduxHeaders,\n patchHeader,\n } = ctx;\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement>(null);\n const filterIconRef = useRef<HTMLDivElement>(null);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n column,\n dragAndDropColumns,\n draggableProps,\n reduxHeader,\n isDragOverlay,\n });\n\n useRecoverFocusCol(isDragging, dragHandleRef);\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 filterValue={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 <DnDHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops}\n id={column.id}\n isDragOverlay={isDragOverlay}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const handlers = useHeaderCellHandlers({\n hasFilter,\n patchHeader,\n column,\n reduxHeader,\n hasDnD,\n onColumnSortChange,\n dragHandleRef,\n filterIconRef,\n headerRef: column.ref,\n });\n\n return (\n <StyledHeadTh\n column={column}\n {...handlers}\n role={colSpan === 1 ? 'columnheader' : 'group'}\n colSpan={colSpan}\n aria-describedby={`${column.id}-instructions`}\n // eslint-disable-next-line no-nested-ternary\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDragOverlay={isDragOverlay}\n isDraggingActive={draggableProps && draggableProps.active}\n shouldShowDnD={shouldShowDnD}\n ref={column.ref}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {isResizeable && column.canResize !== false && <HeaderResizer column={column} />}\n </Grid>\n <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n {buildScreenReaderInstructions(\n colSpan,\n dragAndDropColumns && column.disableDnD !== true,\n hasFilter,\n column.canSort,\n )}\n </span>\n </StyledHeadTh>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA,MAAM,gCAAgC,CAAC,SAAiB,WAAoB,YAAqB,aAAsB;AACrH,QAAM,UAAU,YAAY,IAAI,KAAK;AACrC,MAAI,CAAC,aAAa,CAAC,cAAc,CAAC;AAAU,WAAO;AAEnD,MAAI,UAAU,WACV,0GACA;AACJ,MAAI,aAAa,YAAY;AAC3B,cAAU,8FAA8F;AAAA,EAC1G,WAAW,aAAa,YAAY;AAClC,cAAU,kBACR,YAAY,cAAc,iEACyB;AAAA,EACvD;AACA,SAAO,GAAG,UAAU;AACtB;AAQO,MAAM,aAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,QAAQ,eAAe,YAAY;AAC3C,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,oBAAoB,oBAAoB,iBAAiB,SAAS;AAAA,IAC9F;AAAA,IACA;AAAA,IACA;AAAA,MACE;AACJ,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,KAAK,CAAC,cAAc,MAAM,CAAC;AACjF,QAAM,gBAAgB,OAAuB,IAAI;AACjD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,QAAM,EAAE,mBAAmB,WAAW,mBAAmB;AAEzD,QAAM,EAAE,WAAW,QAAQ,iBAAiB,eAAe,eAAe,OAAO,eAAe,oBAAoB;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,qBAAmB,YAAY,aAAa;AAE5C,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC;AAAe,aAAO;AAC3B,WACE,qCAAC,qCACC,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,UAAU;AAAA,KACZ,GACC,mBAAmB,qCAAC;AAAA,MAAY,cAAc,OAAO;AAAA,KAAc,CACtE;AAAA,EAEJ,GAAG,CAAC,eAAe,QAAQ,KAAK,iBAAiB,aAAa,SAAS,eAAe,CAAC;AAEvF,QAAM,qBAAqB,QACzB,MACE,qCAAC;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,OAAO,EAAE,UAAU,WAAW;AAAA,KAC/D,qCAAC;AAAA,IAAkB,WAAW;AAAA,KAC5B,qCAAC;AAAA,IACC,KAAK,OAAO;AAAA,IACZ,UAAU;AAAA,IACV,aAAa,aAAa;AAAA,IAC1B,IAAI,OAAO;AAAA,IACX;AAAA,GACF,CACF,CACF,GAEF,CAAC,OAAO,IAAI,eAAe,YAAY,aAAa,YAAY,CAClE;AAEA,QAAM,WAAW,sBAAsB;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,OAAO;AAAA,EACpB,CAAC;AAED,SACE,qCAAC;AAAA,IACC;AAAA,KACI,WAFL;AAAA,IAGC,MAAM,YAAY,IAAI,iBAAiB;AAAA,IACvC;AAAA,IACA,oBAAkB,GAAG,OAAO;AAAA,IAE5B,aAAW,kBAAmB,OAAO,eAAe,eAAe,cAAe;AAAA,IAClF,eAAa,YAAY;AAAA,IACzB,iBAAiB,CAAC,CAAC,cAAc,IAAI,UAAU;AAAA,IAC/C,UAAU,OAAO,iBAAiB,QAAQ,KAAK;AAAA,IAC/C;AAAA,IACA,kBAAkB,kBAAkB,eAAe;AAAA,IACnD;AAAA,IACA,KAAK,OAAO;AAAA,MAEZ,qCAAC;AAAA,IAAK,OAAM;AAAA,IAAO,MAAM;AAAA,KACtB,iBAAiB,oBAClB,qCAAC;AAAA,IAAgB;AAAA,IAAgB;AAAA,IAAU;AAAA,IAAgC;AAAA,GAAoB,GAC9F,YACA,gBAAgB,OAAO,cAAc,SAAS,qCAAC;AAAA,IAAc;AAAA,GAAgB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\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: TypescriptColumn;\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: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n flattenedData,\n reduxHeaders,\n patchHeader,\n } = ctx;\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement>(null);\n const filterIconRef = useRef<HTMLDivElement>(null);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n column,\n dragAndDropColumns,\n draggableProps,\n reduxHeader,\n isDragOverlay,\n });\n\n useRecoverFocusCol(isDragging, dragHandleRef);\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 filterValue={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 <DnDHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops}\n id={column.id}\n isDragOverlay={isDragOverlay}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const handlers = useHeaderCellHandlers({\n hasFilter,\n patchHeader,\n column,\n reduxHeader,\n hasDnD,\n onColumnSortChange,\n dragHandleRef,\n filterIconRef,\n headerRef: column.ref,\n });\n\n return (\n <StyledHeadTh\n column={column}\n {...handlers}\n role={colSpan === 1 ? 'columnheader' : 'group'}\n colSpan={colSpan}\n aria-describedby={`${column.id}-instructions`}\n // eslint-disable-next-line no-nested-ternary\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDragOverlay={isDragOverlay}\n isDraggingActive={draggableProps && draggableProps.active}\n shouldShowDnD={shouldShowDnD}\n ref={column.ref}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {isResizeable && column.canResize !== false && !column.columns && <HeaderResizer column={column} />}\n </Grid>\n <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n {buildScreenReaderInstructions(\n colSpan,\n dragAndDropColumns && column.disableDnD !== true,\n hasFilter,\n column.canSort,\n )}\n </span>\n </StyledHeadTh>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -29,11 +29,18 @@ const HeaderResizer = ({ column }) => {
|
|
|
29
29
|
} = useContext(DataTableContext);
|
|
30
30
|
const [isResizing, setIsResizing] = useState(false);
|
|
31
31
|
const [nextWidth, setNextWidth] = useState(column.width ?? 150);
|
|
32
|
-
const visibleColumnsCopy = useMemo(() => visibleColumns.
|
|
32
|
+
const visibleColumnsCopy = useMemo(() => visibleColumns.reduce((acc, col) => {
|
|
33
|
+
if (col.columns) {
|
|
34
|
+
return [...acc, ...col.columns];
|
|
35
|
+
}
|
|
36
|
+
return [...acc, __spreadValues({}, col)];
|
|
37
|
+
}, []), [visibleColumns]);
|
|
33
38
|
useEffect(() => {
|
|
34
39
|
const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
if (realColumnIndex > -1) {
|
|
41
|
+
visibleColumnsCopy[realColumnIndex].width = nextWidth;
|
|
42
|
+
setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
|
|
43
|
+
}
|
|
37
44
|
}, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
|
|
38
45
|
const ref = useRef(null);
|
|
39
46
|
const onResizeStart = useCallback(() => {
|
|
@@ -42,16 +49,18 @@ const HeaderResizer = ({ column }) => {
|
|
|
42
49
|
const onResizeHandler = useCallback((e) => {
|
|
43
50
|
const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0);
|
|
44
51
|
const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
if (realColumnIndex > -1) {
|
|
53
|
+
const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
|
|
54
|
+
setNextWidth(widthWithDelta);
|
|
55
|
+
}
|
|
47
56
|
e.preventDefault();
|
|
48
57
|
e.stopPropagation();
|
|
49
58
|
}, [column.id, nextWidth, visibleColumnsCopy]);
|
|
50
59
|
const onResizeEnd = useCallback(() => {
|
|
51
|
-
setGridLayout(columnsToGrid(
|
|
60
|
+
setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
|
|
52
61
|
setIsResizing(false);
|
|
53
62
|
onColumnResize(column.id, nextWidth);
|
|
54
|
-
}, [onColumnResize, column.id, nextWidth, setGridLayout,
|
|
63
|
+
}, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
|
|
55
64
|
useEffect(() => {
|
|
56
65
|
const debouncedResizeHandler = onResizeHandler;
|
|
57
66
|
const debouncedResizeEnd = onResizeEnd;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n column: TypescriptColumn;\n}> = ({ column }) => {\n const {\n layoutHelpers: { setGridLayout },\n visibleColumns,\n tableProps: { onColumnResize },\n } = useContext(DataTableContext);\n\n const [isResizing, setIsResizing] = useState(false);\n const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AAGA,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,GAAG,OAAO,QAAQ;AAE/C,MAAM,gBAER,CAAC,EAAE,aAAa;AACnB,QAAM;AAAA,IACJ,eAAe,EAAE;AAAA,IACjB;AAAA,IACA,YAAY,EAAE;AAAA,MACZ,WAAW,gBAAgB;AAE/B,QAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;AAClD,QAAM,CAAC,WAAW,gBAAgB,SAAS,OAAO,SAAS,GAAG;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useState, useCallback, useContext, useRef, useEffect, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { columnsToGrid } from '../../helpers';\nimport { StyledResizer } from '../../styled';\nimport { TypescriptColumn } from '../../types/props';\n\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\nexport const HeaderResizer: React.ComponentType<{\n column: TypescriptColumn;\n}> = ({ column }) => {\n const {\n layoutHelpers: { setGridLayout },\n visibleColumns,\n tableProps: { onColumnResize },\n } = useContext(DataTableContext);\n\n const [isResizing, setIsResizing] = useState(false);\n const [nextWidth, setNextWidth] = useState(column.width ?? 150);\n const visibleColumnsCopy = useMemo(\n () =>\n visibleColumns.reduce((acc, col) => {\n if (col.columns) {\n return [...acc, ...col.columns];\n }\n return [...acc, { ...col }];\n }, [] as TypescriptColumn[]),\n [visibleColumns],\n );\n\n useEffect(() => {\n const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n if (realColumnIndex > -1) {\n visibleColumnsCopy[realColumnIndex].width = nextWidth;\n setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n }\n }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n const onResizeStart = useCallback(() => {\n setIsResizing(true);\n }, []);\n\n const onResizeHandler = useCallback(\n (e: MouseEvent | TouchEvent) => {\n const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n const realColumnIndex = visibleColumnsCopy.findIndex((visibleColumn) => visibleColumn.id === column.id);\n if (realColumnIndex > -1) {\n const widthWithDelta = narrow(\n nextWidth + delta,\n visibleColumnsCopy[realColumnIndex].minWidth,\n visibleColumnsCopy[realColumnIndex].maxWidth,\n );\n setNextWidth(widthWithDelta);\n }\n // To prevent text selection\n e.preventDefault();\n e.stopPropagation();\n },\n [column.id, nextWidth, visibleColumnsCopy],\n );\n\n const onResizeEnd = useCallback(() => {\n setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));\n setIsResizing(false);\n onColumnResize(column.id, nextWidth);\n }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumnsCopy]);\n\n useEffect(() => {\n const debouncedResizeHandler = onResizeHandler;\n const debouncedResizeEnd = onResizeEnd;\n const addEvents = () => {\n document.addEventListener('mousemove', debouncedResizeHandler);\n document.addEventListener('touchmove', debouncedResizeHandler);\n document.addEventListener('mouseup', debouncedResizeEnd);\n document.addEventListener('touchend', debouncedResizeEnd);\n };\n const removeEvents = () => {\n document.removeEventListener('mousemove', debouncedResizeHandler);\n document.removeEventListener('touchmove', debouncedResizeHandler);\n document.removeEventListener('mouseup', debouncedResizeEnd);\n document.removeEventListener('touchend', debouncedResizeEnd);\n };\n\n if (isResizing) addEvents();\n else removeEvents();\n\n // just in case the component is unmounted\n return removeEvents;\n }, [isResizing, onResizeHandler, onResizeEnd]);\n\n return (\n <StyledResizer\n ref={ref}\n role=\"separator\"\n draggable={false}\n isResizing={isResizing}\n onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={(e) => e.stopPropagation()}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -32,6 +32,7 @@ var __objRest = (source, exclude) => {
|
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import { Grid } from "@elliemae/ds-grid";
|
|
34
34
|
import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext";
|
|
35
|
+
import { sizeToCss } from "../helpers";
|
|
35
36
|
const SortableHeaderCell = (_a) => {
|
|
36
37
|
var _b = _a, {
|
|
37
38
|
items,
|
|
@@ -41,7 +42,10 @@ const SortableHeaderCell = (_a) => {
|
|
|
41
42
|
"isDragOverlay"
|
|
42
43
|
]);
|
|
43
44
|
return withConditionalDnDSortableContext(items, isDragOverlay)(Grid)(__spreadProps(__spreadValues({}, rest), {
|
|
44
|
-
|
|
45
|
+
cols: items.map((col) => sizeToCss(col.width)),
|
|
46
|
+
style: {
|
|
47
|
+
gridAutoFlow: "column"
|
|
48
|
+
}
|
|
45
49
|
}));
|
|
46
50
|
};
|
|
47
51
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortableHeaderCell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { TypescriptColumn } from '../types/props';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext';\n\nexport const SortableHeaderCell = ({\n items,\n isDragOverlay = false,\n ...rest\n}: {\n items: TypescriptColumn[];\n isDragOverlay?: boolean;\n children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n ...rest,\n style: {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AAEO,MAAM,qBAAqB,CAAC,OAQnB;AARmB,eACjC;AAAA;AAAA,IACA,gBAAgB;AAAA,MAFiB,IAG9B,iBAH8B,IAG9B;AAAA,IAFH;AAAA,IACA;AAAA;AAOA,2CAAkC,OAAO,aAAa,EAAE,IAAI,EAAE,iCACzD,OADyD;AAAA,IAE5D,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { TypescriptColumn } from '../types/props';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext';\nimport { sizeToCss } from '../helpers';\n\nexport const SortableHeaderCell = ({\n items,\n isDragOverlay = false,\n ...rest\n}: {\n items: TypescriptColumn[];\n isDragOverlay?: boolean;\n children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n ...rest,\n cols: items.map((col) => sizeToCss(col.width)),\n style: {\n gridAutoFlow: 'column',\n },\n });\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA;AACA;AAEO,MAAM,qBAAqB,CAAC,OAQnB;AARmB,eACjC;AAAA;AAAA,IACA,gBAAgB;AAAA,MAFiB,IAG9B,iBAH8B,IAG9B;AAAA,IAFH;AAAA,IACA;AAAA;AAOA,2CAAkC,OAAO,aAAa,EAAE,IAAI,EAAE,iCACzD,OADyD;AAAA,IAE5D,MAAM,MAAM,IAAI,CAAC,QAAQ,UAAU,IAAI,KAAK,CAAC;AAAA,IAC7C,OAAO;AAAA,MACL,cAAc;AAAA,IAChB;AAAA,EACF,EAAC;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|