Skip to content

Commit 08fdff7

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): improve scaleWidthMode "Grow" and "Smart" (#7752)
Fixes #7790
1 parent 45baeee commit 08fdff7

File tree

6 files changed

+643
-418
lines changed

6 files changed

+643
-418
lines changed

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

Lines changed: 245 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,26 @@ const generateMoreData = (count) => {
9292
}));
9393
};
9494

95+
function checkColumnWidthWithTolerance(
96+
selector: string,
97+
expectedGrow: number,
98+
expectedSmart: number,
99+
isGrow: boolean,
100+
tolerance = 0.5,
101+
) {
102+
cy.log('checkColumnWidthWithTolerance');
103+
cy.get(selector)
104+
.invoke('outerWidth')
105+
.should((width) => {
106+
const expected = isGrow ? expectedGrow : expectedSmart;
107+
if (isGrow) {
108+
expect(width).to.equal(expected);
109+
} else {
110+
expect(width).to.be.within(expected - tolerance, expected + tolerance);
111+
}
112+
});
113+
}
114+
95115
type PropTypes = AnalyticalTablePropTypes['onRowSelect'];
96116

97117
const columns = [
@@ -1241,40 +1261,178 @@ describe('AnalyticalTable', () => {
12411261
);
12421262
});
12431263

1244-
it('Grow Mode: maxWidth', () => {
1245-
const TableComp = (props) => {
1264+
[AnalyticalTableScaleWidthMode.Grow, AnalyticalTableScaleWidthMode.Smart].forEach((scaleWidthMode) => {
1265+
it(`scaleWidthMode: ${scaleWidthMode}`, () => {
1266+
const isGrow = scaleWidthMode === AnalyticalTableScaleWidthMode.Grow;
12461267
const headerText =
12471268
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum aliquet arcu, ac facilisis tellus blandit nec. Etiam justo erat, dictum a ex ac, fermentum fringilla metus. Donec nibh magna, pellentesque ut odio id, feugiat vulputate nibh. In feugiat tincidunt quam, vitae sodales metus lobortis pellentesque. Donec eget rhoncus ante, in posuere nulla. Proin viverra, turpis id fermentum scelerisque, felis ipsum pharetra tortor, sed aliquet mi ex eu nisl. Praesent neque nunc, suscipit non interdum vitae, consequat sit amet velit. Morbi commodo dapibus lobortis. Vestibulum auctor velit sit amet semper egestas.';
1248-
const [columns, setColumns] = useState<{ Header: string; accessor: string; maxWidth?: number }[]>([
1269+
const initialColumns = [
12491270
{
12501271
Header: headerText,
12511272
accessor: 'name',
12521273
},
1253-
]);
1254-
return (
1255-
<>
1256-
<Button
1257-
onClick={() => {
1258-
setColumns([
1259-
{
1260-
Header: headerText,
1261-
accessor: 'name',
1262-
maxWidth: Infinity,
1263-
},
1264-
]);
1265-
}}
1266-
>
1267-
Custom maxWidth
1268-
</Button>
1269-
<AnalyticalTable {...props} columns={columns} scaleWidthMode={AnalyticalTableScaleWidthMode.Grow} />
1270-
</>
1271-
);
1272-
};
1273-
cy.mount(<TableComp data={data} />);
1274-
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 700);
1274+
];
1275+
const longDataEntry = { long: headerText };
1276+
const TableComp = (props: AnalyticalTablePropTypes) => {
1277+
const { columns } = props;
1278+
const [_columns, setColumns] = useState<{ Header: string; accessor: string; maxWidth?: number }[]>(
1279+
columns ?? initialColumns,
1280+
);
1281+
return (
1282+
<>
1283+
<Button
1284+
onClick={() => {
1285+
setColumns([
1286+
{
1287+
Header: headerText,
1288+
accessor: 'name',
1289+
maxWidth: Infinity,
1290+
},
1291+
]);
1292+
}}
1293+
>
1294+
Infinity
1295+
</Button>
1296+
<Button
1297+
onClick={() => {
1298+
setColumns([
1299+
{
1300+
Header: headerText,
1301+
accessor: 'name',
1302+
maxWidth: 100,
1303+
},
1304+
]);
1305+
}}
1306+
>
1307+
100
1308+
</Button>
1309+
<AnalyticalTable {...props} columns={_columns} scaleWidthMode={scaleWidthMode} />
1310+
</>
1311+
);
1312+
};
1313+
1314+
cy.log('cols: initial');
1315+
// additional fonts need to be prefetched in Cypress, otherwise it leads to flakiness
1316+
cy.window()
1317+
.then((win) => {
1318+
return Promise.all([
1319+
win.document.fonts.load('16px "72-Bold"'),
1320+
win.document.fonts.load('16px "72-Boldfull"'),
1321+
]);
1322+
})
1323+
.then(() => {
1324+
cy.mount(<TableComp data={data} />);
1325+
});
1326+
1327+
cy.get('[data-column-id="name"]')
1328+
.invoke('outerWidth')
1329+
.should('equal', isGrow ? 700 : 4120);
1330+
1331+
cy.findByText('Infinity').click();
1332+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
12751333

1276-
cy.findByText('Custom maxWidth').click();
1277-
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
1334+
cy.findByText('100').click();
1335+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 100);
1336+
1337+
cy.log('cols: cols');
1338+
const cols = [...initialColumns, { Header: 'Short Width', accessor: 'age' }];
1339+
cy.mount(<TableComp columns={cols} data={data} />);
1340+
cy.get('[data-column-id="name"]')
1341+
.invoke('outerWidth')
1342+
.should('equal', isGrow ? 700 : 4120);
1343+
cy.get('[data-column-id="age"]')
1344+
.invoke('outerWidth')
1345+
.should('equal', isGrow ? 700 : 97);
1346+
1347+
cy.log('cols: cols2');
1348+
const cols2 = [
1349+
{ ...initialColumns[0], maxWidth: Infinity },
1350+
{ Header: 'Short Width', accessor: 'age' },
1351+
];
1352+
cy.mount(<TableComp columns={cols2} data={data} />);
1353+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 4120);
1354+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 97);
1355+
1356+
cy.log('cols: cols3');
1357+
const cols3 = [
1358+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1359+
{ Header: 'Short Width', accessor: 'age' },
1360+
];
1361+
cy.mount(<TableComp columns={cols3} data={data} />);
1362+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1363+
cy.get('[data-column-id="age"]')
1364+
.invoke('outerWidth')
1365+
.should('equal', isGrow ? 700 : 1704);
1366+
1367+
cy.log('cols: cols4');
1368+
const cols4 = [
1369+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1370+
{ Header: 'Short Width', accessor: 'age' },
1371+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1372+
];
1373+
cy.mount(<TableComp columns={cols4} data={data} />);
1374+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1375+
cy.get('[data-column-id="age"]')
1376+
.invoke('outerWidth')
1377+
.should('equal', isGrow ? 700 : 868);
1378+
cy.get('[data-column-id="friend.name"]')
1379+
.invoke('outerWidth')
1380+
.should('equal', isGrow ? 1004 : 836);
1381+
1382+
cy.log('cols: cols5');
1383+
const cols5 = [
1384+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1385+
{ Header: 'Short Width', accessor: 'age' },
1386+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1387+
{ Header: 'Long Content', accessor: 'long' },
1388+
];
1389+
cy.mount(<TableComp columns={cols5} data={[...data, longDataEntry]} />);
1390+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1391+
checkColumnWidthWithTolerance('[data-column-id="age"]', 518, 356.0625, isGrow);
1392+
checkColumnWidthWithTolerance('[data-column-id="friend.name"]', 486, 324.0625, isGrow);
1393+
checkColumnWidthWithTolerance('[data-column-id="long"]', 700, 1023.8593139648438, isGrow);
1394+
1395+
cy.log('cols: cols6');
1396+
const cols6 = [
1397+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1398+
{ Header: 'Short Width', accessor: 'age' },
1399+
{ Header: 'Spread', accessor: 'friend.name', maxWidth: Infinity },
1400+
{ Header: 'Long Content', accessor: 'long', maxWidth: Infinity },
1401+
];
1402+
cy.mount(<TableComp columns={cols6} data={[...data, longDataEntry]} />);
1403+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1404+
checkColumnWidthWithTolerance('[data-column-id="age"]', 97, 356.0625, isGrow);
1405+
checkColumnWidthWithTolerance('[data-column-id="friend.name"]', 65, 324.0625, isGrow);
1406+
checkColumnWidthWithTolerance('[data-column-id="long"]', 3824, 1023.8593139648438, isGrow);
1407+
1408+
cy.log('cols: cols7');
1409+
const cols7 = [
1410+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1411+
{ Header: 'Short Width', accessor: 'age', minWidth: 400 },
1412+
{ Header: 'Long Content', accessor: 'long', maxWidth: Infinity },
1413+
];
1414+
cy.mount(<TableComp columns={cols7} data={[...data, longDataEntry]} />);
1415+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1416+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', 400);
1417+
cy.get('[data-column-id="long"]')
1418+
.invoke('outerWidth')
1419+
.should('equal', isGrow ? 3824 : 1304);
1420+
1421+
cy.log('cols: cols8');
1422+
const cols8 = [
1423+
{ ...initialColumns[0], maxWidth: Infinity, width: 200 },
1424+
{ Header: 'Spread', accessor: 'friend.name' },
1425+
{ Header: 'Short Width', accessor: 'age', minWidth: 400 },
1426+
];
1427+
cy.mount(<TableComp columns={cols8} data={data} />);
1428+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 200);
1429+
cy.get('[data-column-id="friend.name"]')
1430+
.invoke('outerWidth')
1431+
.should('equal', isGrow ? 700 : 1304);
1432+
cy.get('[data-column-id="age"]')
1433+
.invoke('outerWidth')
1434+
.should('equal', isGrow ? 1004 : 400);
1435+
});
12781436
});
12791437

12801438
it('Column Scaling: programatically change cols', () => {
@@ -3379,65 +3537,67 @@ describe('AnalyticalTable', () => {
33793537
cy.get('[data-component-name="AnalyticalTableBody"]').should('have.css', 'height', '800px');
33803538
});
33813539

3382-
it('initial scroll-to', () => {
3383-
const ScrollTo = () => {
3384-
const tableRef = useRef<AnalyticalTableDomRef>(null);
3385-
useEffect(() => {
3386-
tableRef.current.scrollTo(520);
3387-
}, []);
3388-
return <AnalyticalTable data={generateMoreData(300)} columns={columns} ref={tableRef} />;
3389-
};
3390-
cy.mount(<ScrollTo />);
3391-
cy.findByText('Name-12').should('be.visible');
3392-
cy.findByText('Name-11').should('not.be.visible');
3393-
3394-
const ScrollToItem = () => {
3395-
const tableRef = useRef(null);
3396-
useEffect(() => {
3397-
tableRef.current.scrollToItem(12, { align: 'start' });
3398-
}, []);
3399-
return <AnalyticalTable data={generateMoreData(300)} columns={columns} ref={tableRef} />;
3400-
};
3401-
cy.mount(<ScrollToItem />);
3402-
cy.findByText('Name-12').should('be.visible');
3403-
cy.findByText('Name-11').should('not.be.visible');
3540+
//todo: This test fails in the pipeline with React19. Investigate how to enable it again.
3541+
if (reactVersion.startsWith('18')) {
3542+
it('initial scroll-to', () => {
3543+
const ScrollTo = () => {
3544+
const tableRef = useRef<AnalyticalTableDomRef>(null);
3545+
useEffect(() => {
3546+
tableRef.current.scrollTo(520);
3547+
}, []);
3548+
return <AnalyticalTable data={generateMoreData(200)} columns={columns} ref={tableRef} />;
3549+
};
3550+
cy.mount(<ScrollTo />);
3551+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('Name-12').should('be.visible');
3552+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('Name-11').should('not.be.visible');
3553+
3554+
const ScrollToItem = () => {
3555+
const tableRef = useRef(null);
3556+
useEffect(() => {
3557+
tableRef.current.scrollToItem(12, { align: 'start' });
3558+
}, []);
3559+
return <AnalyticalTable data={generateMoreData(200)} columns={columns} ref={tableRef} />;
3560+
};
3561+
cy.mount(<ScrollToItem />);
3562+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('Name-12').should('be.visible');
3563+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('Name-11').should('not.be.visible');
34043564

3405-
const ScrollToHorizontal = () => {
3406-
const tableRef = useRef(null);
3407-
useEffect(() => {
3408-
tableRef.current.horizontalScrollTo(1020);
3409-
}, []);
3410-
return (
3411-
<AnalyticalTable
3412-
data={generateMoreData(300)}
3413-
columns={[
3414-
...columns,
3415-
...new Array(100).fill('').map((_, index) => ({ id: `${index}`, Header: () => index })),
3416-
]}
3417-
ref={tableRef}
3418-
/>
3419-
);
3420-
};
3421-
cy.mount(<ScrollToHorizontal />);
3422-
cy.findByText('13').should('be.visible');
3423-
cy.findByText('12').should('not.be.visible');
3424-
const ScrollToItemHorizontal = () => {
3425-
const tableRef = useRef(null);
3426-
useEffect(() => {
3427-
tableRef.current.horizontalScrollToItem(13, { align: 'start' });
3428-
}, []);
3429-
return (
3430-
<AnalyticalTable
3431-
data={generateMoreData(300)}
3432-
columns={new Array(100).fill('').map((_, index) => ({ id: `${index}`, Header: () => index }))}
3433-
ref={tableRef}
3434-
/>
3435-
);
3436-
};
3437-
cy.mount(<ScrollToItemHorizontal />);
3438-
cy.findByText('13').should('be.visible');
3439-
cy.findByText('12').should('not.be.visible');
3440-
});
3565+
const cols = [
3566+
...columns,
3567+
...new Array(50).fill('').map((_, index) => ({
3568+
id: `${index}`,
3569+
Header: () => index,
3570+
})),
3571+
];
3572+
const ScrollToHorizontal = () => {
3573+
const tableRef = useRef(null);
3574+
useEffect(() => {
3575+
tableRef.current.horizontalScrollTo(1020);
3576+
}, []);
3577+
return <AnalyticalTable data={generateMoreData(50)} columns={cols} ref={tableRef} />;
3578+
};
3579+
cy.mount(<ScrollToHorizontal />);
3580+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('13').should('be.visible');
3581+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('12').should('not.be.visible');
3582+
3583+
const ScrollToItemHorizontal = () => {
3584+
const tableRef = useRef(null);
3585+
useEffect(() => {
3586+
tableRef.current.horizontalScrollToItem(13, { align: 'start' });
3587+
}, []);
3588+
return (
3589+
<AnalyticalTable
3590+
data={generateMoreData(200)}
3591+
columns={new Array(50).fill('').map((_, index) => ({ id: `${index}`, Header: () => index }))}
3592+
ref={tableRef}
3593+
/>
3594+
);
3595+
};
3596+
cy.mount(<ScrollToItemHorizontal />);
3597+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('13').should('be.visible');
3598+
cy.get('[data-component-name="AnalyticalTableContainer"]').findByText('12').should('not.be.visible');
3599+
});
3600+
}
34413601

34423602
it('additionalEmptyRowsCount', () => {
34433603
cy.mount(<AnalyticalTable data={data} columns={columns} minRows={4} />);

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css‎

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -329,19 +329,12 @@
329329
background: var(--sapIndicationColor_8);
330330
}
331331

332-
.hiddenSmartColMeasure {
333-
visibility: hidden;
334-
position: fixed;
335-
white-space: nowrap;
336-
height: 0;
337-
}
338-
339-
.hiddenSmartColMeasureHeader {
340-
font-family: var(--_ui5wcr-AnalyticalTable-HeaderFontFamily);
341-
}
342-
343332
.hiddenA11yText {
344-
display: none;
333+
font-size: 0;
334+
left: 0;
335+
position: absolute;
336+
top: 0;
337+
user-select: none;
345338
}
346339

347340
.checkBox::part(root) {

0 commit comments

Comments
 (0)