Skip to content

Commit 3afa357

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): improve "Default" scaleWidthMode calculation (#7214)
Fixes #7072 Fixes #4971
1 parent b5c3c2b commit 3afa357

File tree

2 files changed

+394
-118
lines changed

2 files changed

+394
-118
lines changed

Diff for: ‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

+199
Original file line numberDiff line numberDiff line change
@@ -3498,6 +3498,205 @@ describe('AnalyticalTable', () => {
34983498
cy.findByTestId('btn-was-clicked').should('have.text', 'true');
34993499
});
35003500

3501+
[5, 2].forEach((visibleRows) => {
3502+
const withVertScrollbar = visibleRows === 2;
3503+
it(`scaleWidthMode: Default (w/${withVertScrollbar ? '' : 'o'} vertical scrollbar)`, () => {
3504+
const _data = [
3505+
{
3506+
age: 80,
3507+
friend: {
3508+
age: 68,
3509+
name: 'Carver Vance'
3510+
},
3511+
name: 'Allen Best'
3512+
},
3513+
{
3514+
age: 31,
3515+
friend: {
3516+
age: 70,
3517+
name: 'Strickland Gallegos'
3518+
},
3519+
name: 'Combs Fleming'
3520+
},
3521+
{
3522+
age: 31,
3523+
friend: {
3524+
age: 70,
3525+
name: 'Strickland Gallegos'
3526+
},
3527+
name: 'Combs Fleming'
3528+
},
3529+
{
3530+
age: 31,
3531+
friend: {
3532+
age: 70,
3533+
name: 'Strickland Gallegos'
3534+
},
3535+
name: 'Combs Fleming'
3536+
}
3537+
];
3538+
const _columns = [
3539+
{
3540+
Header: 'Name',
3541+
accessor: 'name',
3542+
headerTooltip: 'Full Name'
3543+
},
3544+
{
3545+
Header: 'Age',
3546+
accessor: 'age',
3547+
hAlign: 'End',
3548+
maxWidth: 192
3549+
},
3550+
{
3551+
Header: 'Friend Name',
3552+
accessor: 'friend.name',
3553+
maxWidth: 160
3554+
},
3555+
{
3556+
accessor: 'friend.age',
3557+
maxWidth: 160,
3558+
hAlign: 'End'
3559+
},
3560+
{
3561+
Header: 'Actions',
3562+
id: 'actions1',
3563+
maxWidth: 192,
3564+
hAlign: 'End'
3565+
},
3566+
{
3567+
Header: 'Actions',
3568+
id: 'actions2',
3569+
hAlign: 'End'
3570+
},
3571+
{
3572+
Header: 'Actions',
3573+
id: 'actions3',
3574+
maxWidth: 160,
3575+
hAlign: 'End'
3576+
}
3577+
];
3578+
document.body.style.margin = '0px';
3579+
cy.viewport(1306, 1080);
3580+
cy.mount(<AnalyticalTable data={_data} columns={_columns} visibleRows={visibleRows} />);
3581+
cy.get('[data-component-name="AnalyticalTableContainer"]').should(
3582+
'have.css',
3583+
'width',
3584+
withVertScrollbar ? '1293px' : '1306px'
3585+
);
3586+
cy.get('[data-component-name="AnalyticalTableBody"]').should(
3587+
'have.css',
3588+
'width',
3589+
withVertScrollbar ? '1293px' : '1306px'
3590+
);
3591+
3592+
const _data2 = [
3593+
{
3594+
age: 80,
3595+
friend: {
3596+
age: 68,
3597+
name: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
3598+
},
3599+
name: 'Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best',
3600+
status: 'Positive'
3601+
},
3602+
{
3603+
age: 80,
3604+
friend: {
3605+
age: 68,
3606+
name: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
3607+
},
3608+
name: 'Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best',
3609+
status: 'Positive'
3610+
},
3611+
{
3612+
age: 80,
3613+
friend: {
3614+
age: 68,
3615+
name: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
3616+
},
3617+
name: 'Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best',
3618+
status: 'Positive'
3619+
},
3620+
{
3621+
age: 80,
3622+
friend: {
3623+
age: 68,
3624+
name: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
3625+
},
3626+
name: 'Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best Allen Best',
3627+
status: 'Positive'
3628+
}
3629+
];
3630+
const _columns2 = [
3631+
{
3632+
Header: 'Name',
3633+
accessor: 'name',
3634+
minWidth: 400
3635+
},
3636+
{
3637+
Header: 'Age',
3638+
accessor: 'age',
3639+
minWidth: 100
3640+
},
3641+
{
3642+
Header: 'Friend Name',
3643+
accessor: 'friend.name',
3644+
minWidth: 100
3645+
},
3646+
{
3647+
Header: 'Friend Age',
3648+
accessor: 'friend.age',
3649+
minWidth: 300
3650+
}
3651+
];
3652+
cy.mount(<AnalyticalTable data={_data2} columns={_columns2} visibleRows={visibleRows} />);
3653+
cy.get('[data-component-name="AnalyticalTableContainer"]').should(
3654+
'have.css',
3655+
'width',
3656+
withVertScrollbar ? '1293px' : '1306px'
3657+
);
3658+
cy.get('[data-component-name="AnalyticalTableBody"]').should(
3659+
'have.css',
3660+
'width',
3661+
withVertScrollbar ? '1293px' : '1306px'
3662+
);
3663+
3664+
cy.mount(<AnalyticalTable data={data} columns={columns} visibleRows={visibleRows} />);
3665+
cy.get('[data-component-name="AnalyticalTableContainer"]').should(
3666+
'have.css',
3667+
'width',
3668+
withVertScrollbar ? '1293px' : '1306px'
3669+
);
3670+
cy.get('[data-component-name="AnalyticalTableBody"]').should(
3671+
'have.css',
3672+
'width',
3673+
withVertScrollbar ? '1293px' : '1306px'
3674+
);
3675+
3676+
const _columns3 = [...columns, { id: 'long', Header: 'Long', width: 2000, Cell: 'Long' }];
3677+
cy.mount(<AnalyticalTable data={data} columns={_columns3} visibleRows={visibleRows} />);
3678+
cy.get('[data-component-name="AnalyticalTableContainer"]').should(
3679+
'have.css',
3680+
'width',
3681+
withVertScrollbar ? '1293px' : '1306px'
3682+
);
3683+
cy.get('[data-component-name="AnalyticalTableBody"]').should('have.css', 'width', '2240px'); // 4 * 60 (minWidth) + 2000
3684+
3685+
const _columns4 = [
3686+
...columns,
3687+
{ id: 'long', Header: 'Long', width: 2000, Cell: 'Long', maxWidth: 1000 },
3688+
{ id: 'minWidth', Header: 'minWidth', minWidth: 200, Cell: 'minWidth', maxWidth: 1000 }
3689+
];
3690+
cy.mount(<AnalyticalTable data={data} columns={_columns4} visibleRows={visibleRows} />);
3691+
cy.get('[data-component-name="AnalyticalTableContainer"]').should(
3692+
'have.css',
3693+
'width',
3694+
withVertScrollbar ? '1293px' : '1306px'
3695+
);
3696+
cy.get('[data-component-name="AnalyticalTableBody"]').should('have.css', 'width', '1440px'); // 4 * 60 (minWidth) + 1000 (maxWidth) + 200
3697+
});
3698+
});
3699+
35013700
cypressPassThroughTestsFactory(AnalyticalTable, { data, columns });
35023701
});
35033702

0 commit comments

Comments
 (0)