Skip to content

Commit 3142f0f

Browse files
Papa-SantoPapa-Santo
committed
autoResizable supports all element types and all table types
1 parent d5879a2 commit 3142f0f

File tree

7 files changed

+55
-77
lines changed

7 files changed

+55
-77
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -250,14 +250,14 @@ describe('AnalyticalTable', () => {
250250
});
251251

252252
cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} onAutoResize={(e) => e.preventDefault()} />);
253-
cy.wait(200);
253+
cy.wait(100);
254254
cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
255255
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 476);
256256
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
257257
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 476);
258258

259259
cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
260-
cy.wait(200);
260+
cy.wait(100);
261261
cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
262262
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
263263
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
@@ -291,7 +291,7 @@ describe('AnalyticalTable', () => {
291291
});
292292

293293
cy.mount(<AnalyticalTable data={dataFixed} columns={resizeColumns} />);
294-
cy.wait(200);
294+
cy.wait(100);
295295
cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
296296
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 472.75);
297297
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
@@ -311,11 +311,21 @@ describe('AnalyticalTable', () => {
311311
};
312312

313313
cy.mount(<AnalyticalTable data={dataSub} columns={resizeColumns} renderRowSubComponent={renderRowSubComponent} />);
314-
cy.wait(200);
314+
cy.wait(100);
315315
cy.get('[data-cy="data-resizer-1"]').should('be.visible').dblclick();
316316
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 60);
317317
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
318318
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 165);
319+
320+
const dataResizeTree = [...dataTree];
321+
dataResizeTree[0].subRows[0].name = 'Longer Name To Resize Here';
322+
cy.mount(<AnalyticalTable columns={resizeColumns} data={dataResizeTree} isTreeTable />);
323+
cy.wait(100);
324+
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
325+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 169);
326+
cy.get('[aria-rowindex="1"] > [aria-colindex="1"] > [title="Expand Node"] > [ui5-button]').click();
327+
cy.get('[data-cy="data-resizer-0"]').should('be.visible').dblclick();
328+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 251);
319329
});
320330

321331
it('scrollTo', () => {

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ interface ColumnHeaderContainerProps {
2020
isTreeTable: boolean;
2121
rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
2222
onAutoResize: (e?: CustomEvent<{ accessor: string; width: number }>) => void;
23-
groupBy: string[];
23+
grouped: boolean;
2424
}
2525

2626
export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
@@ -38,7 +38,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
3838
onAutoResize,
3939
rowVirtualizer,
4040
isTreeTable,
41-
groupBy
41+
grouped
4242
} = props;
4343

4444
useStylesheet(styleData, 'Resizer');
@@ -77,10 +77,11 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
7777
className={classNames.resizer}
7878
style={resizerDirectionStyle}
7979
onDoubleClick={(e) => {
80-
if (column.autoResizable && !isTreeTable && !groupBy.length) {
81-
const items = rowVirtualizer.getVirtualItems();
82-
const [start, end] = [items[0].index, items[items.length - 1].index];
83-
column.getResizerProps().onDoubleClick(e, start, end, rest.id, onAutoResize);
80+
if (column.autoResizable) {
81+
const { startIndex, endIndex } = rowVirtualizer.range;
82+
column
83+
.getResizerProps()
84+
.onDoubleClick(e, startIndex, endIndex, rest.id, onAutoResize, isTreeTable, grouped);
8485
}
8586
}}
8687
/>

‎packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
22
import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
3-
import { CssSizeVariables, useCurrentTheme, useStylesheet, useIsomorphicId } from '@ui5/webcomponents-react-base';
3+
import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
44
import { clsx } from 'clsx';
55
import React from 'react';
66
import { ButtonDesign } from '../../../../enums/index.js';
@@ -24,7 +24,7 @@ const getPadding = (level) => {
2424

2525
export const Expandable = (props) => {
2626
const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
27-
const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts, uniqueId } = webComponentsReactProperties;
27+
const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts } = webComponentsReactProperties;
2828
const currentTheme = useCurrentTheme();
2929
useStylesheet(styleData, Expandable.displayName);
3030
const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
@@ -41,8 +41,6 @@ export const Expandable = (props) => {
4141
const subComponentExpandable =
4242
typeof renderRowSubComponent === 'function' && !!renderRowSubComponent(row) && !alwaysShowSubComponent;
4343

44-
const expandId = useIsomorphicId();
45-
4644
return (
4745
<>
4846
{columnIndex === 0 && (
@@ -55,7 +53,6 @@ export const Expandable = (props) => {
5553
className={classNames.container}
5654
aria-expanded={row.isExpanded}
5755
aria-label={row.isExpanded ? translatableTexts.collapseA11yText : translatableTexts.expandA11yText}
58-
id={`scaleModeHelperExpand-${uniqueId}-${expandId}`}
5956
>
6057
{shouldRenderButton ? (
6158
<Button

‎packages/main/src/components/AnalyticalTable/hooks/useAutoResize.tsx

Lines changed: 29 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,12 @@ import { CELL_PADDING_PX } from './useDynamicColumnWidths.js';
66
const handleAutoResize = (props, { instance }) => {
77
return {
88
...props,
9-
onDoubleClick: (e, start, end, accessor, onAutoResize) => {
10-
// Find first in column to compare to accessor
11-
let columnFirst;
12-
const { columnOrder } = instance.state;
13-
let colOrder = [];
14-
if (columnOrder.length) {
15-
colOrder = columnOrder.filter(
16-
(col) =>
17-
col !== '__ui5wcr__internal_selection_column' &&
18-
col !== '__ui5wcr__internal_highlight_column' &&
19-
col !== '__ui5wcr__internal_navigation_column'
20-
);
21-
columnFirst = colOrder[0];
22-
}
23-
if (!columnFirst) {
24-
colOrder = instance.visibleColumns?.filter(
25-
(col) =>
26-
col.id !== '__ui5wcr__internal_selection_column' &&
27-
col.id !== '__ui5wcr__internal_highlight_column' &&
28-
col.id !== '__ui5wcr__internal_navigation_column'
29-
);
30-
columnFirst = colOrder[0].id;
31-
}
32-
33-
// Undefined accessor should not occur but checking to be safe
34-
columnFirst = columnFirst ? columnFirst === accessor : false;
35-
36-
const rows = instance.rows;
9+
onDoubleClick: (e, start, end, accessor, onAutoResize, isTreeTable, grouped) => {
10+
if (!instance.rows.length) return;
3711
const dispatch = instance.dispatch;
38-
const rowSlice = rows.slice(start, end);
39-
let largest = getContentPxMax(rowSlice, accessor, instance?.webComponentsReactProperties.uniqueId, columnFirst);
12+
let rowSlice = instance.rows.slice(start, end + 1);
13+
if (isTreeTable || grouped) rowSlice = getExpandedRowsRecursive(rowSlice);
14+
let largest = getMeasureMax(rowSlice, accessor, instance.webComponentsReactProperties.uniqueId);
4015
largest = largest > DEFAULT_COLUMN_WIDTH ? largest : DEFAULT_COLUMN_WIDTH;
4116
onAutoResize(
4217
enrichEventWithDetails(e, {
@@ -55,41 +30,36 @@ const handleAutoResize = (props, { instance }) => {
5530
};
5631
};
5732

58-
function getContentPxMax(rowSlice, accessor, uniqueId, isFirstColumn) {
59-
let high = 0,
60-
current,
61-
ruler,
62-
expand,
63-
expandPx = 0,
64-
style,
65-
margin = 0;
66-
67-
// Check for Expandable Row
68-
// If found in range: All rows treated as expandable
69-
if (isFirstColumn) {
70-
expand = document.querySelector(`[id^="scaleModeHelperExpand-${uniqueId}"]`);
71-
if (expand) {
72-
style = getComputedStyle(expand, null);
73-
margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
74-
margin = margin > 0 ? margin : 0;
33+
const getMeasureMax = (rowSlice, accessor, uniqueId) => {
34+
let maxWidth = 0;
35+
for (let i = 0; i < rowSlice.length; i++) {
36+
const element = document.getElementById(`cell_${rowSlice[i].id}_${accessor}-${uniqueId}`);
37+
let currWidth = 0;
38+
const children = element.children;
39+
for (let j = 0; j < children.length; j++) {
40+
const computedStyle = getComputedStyle(children[j]);
41+
currWidth += children[j].scrollWidth;
42+
currWidth += parseFloat(computedStyle.marginLeft) + parseFloat(computedStyle.marginRight);
43+
currWidth += parseFloat(computedStyle.borderLeftWidth) + parseFloat(computedStyle.borderRightWidth);
7544
}
76-
console.log(margin);
77-
expandPx = expand ? expand.offsetWidth + margin : 0 + margin;
45+
currWidth = currWidth + CELL_PADDING_PX;
46+
maxWidth = maxWidth > currWidth ? maxWidth : currWidth;
7847
}
48+
return Math.ceil(maxWidth);
49+
};
7950

51+
const getExpandedRowsRecursive = (rowSlice, allRows = []) => {
52+
if (!rowSlice.length) return allRows;
53+
allRows = [...allRows, ...rowSlice];
54+
const nextRows = [];
55+
// Iterate to find expanded rows then call recursively
8056
for (let i = 0; i < rowSlice.length; i++) {
81-
const dataPoint = rowSlice[i]?.values?.[accessor];
82-
if (dataPoint) {
83-
ruler = ruler ? ruler : document.getElementById(`scaleModeHelper-${uniqueId}`);
84-
if (ruler) {
85-
ruler.innerHTML = `${dataPoint}`;
86-
current = ruler.scrollWidth + CELL_PADDING_PX + expandPx;
87-
} else current = 0;
88-
high = high > current ? high : current;
57+
if (rowSlice[i].isExpanded) {
58+
nextRows.push(...rowSlice[i].subRows);
8959
}
9060
}
91-
return high ?? 0;
92-
}
61+
return getExpandedRowsRecursive(nextRows, allRows);
62+
};
9363

9464
export const useAutoResize = (hooks: ReactTableHooks) => {
9565
hooks.getResizerProps.push(handleAutoResize);

‎packages/main/src/components/AnalyticalTable/hooks/useStyling.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,8 @@ const getCellProps = (cellProps, { cell: { column }, instance }) => {
102102
{
103103
className,
104104
style,
105-
tabIndex: -1
105+
tabIndex: -1,
106+
id: `${cellProps.key}-${instance?.webComponentsReactProperties.uniqueId}`
106107
}
107108
];
108109
};

‎packages/main/src/components/AnalyticalTable/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -764,7 +764,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
764764
uniqueId={uniqueId}
765765
showVerticalEndBorder={showVerticalEndBorder}
766766
onAutoResize={onAutoResize}
767-
groupBy={groupBy}
767+
grouped={groupBy.length > 0}
768768
/>
769769
)
770770
);

‎packages/main/src/components/AnalyticalTable/types/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,6 @@ export interface AnalyticalTableColumnDefinition {
260260
/**
261261
* Defines whether double clicking a columns data-resizer will automatically resize the column.
262262
*
263-
* Available on text columns
264263
* Disabled if isTreeTable is true or groupBy is used
265264
*/
266265
autoResizable?: boolean;

0 commit comments

Comments
 (0)