Skip to content

Commit e1c5ad7

Browse files
MarcusNotheisvbersch
MarcusNotheis
authored and
vbersch
committed
refactor(Table): Update to react-table v7 (#110)
BREAKING CHANGE: upgrade react-table from 6.10.0 to 7.0.0-alpha.32
1 parent 6874c50 commit e1c5ad7

File tree

14 files changed

+900
-2185
lines changed

14 files changed

+900
-2185
lines changed

‎packages/main/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@ui5/webcomponents": "1.0.0-rc.2",
2323
"@ui5/webcomponents-react-base": "0.5.1-rc.7",
2424
"lodash.debounce": "^4.0.8",
25-
"react-table": "6.10.0",
25+
"react-table": "7.0.0-alpha.34",
2626
"react-toastify": "^5.0.1"
2727
},
2828
"devDependencies": {

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

Lines changed: 1 addition & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,7 @@ const data = [
4242

4343
describe('AnalyticalTable', () => {
4444
test('test Asc desc', () => {
45-
const wrapper = mountThemedComponent(
46-
<AnalyticalTable showPagination data={data} title={'Test'} columns={columns} />
47-
);
45+
const wrapper = mountThemedComponent(<AnalyticalTable data={data} title={'Test'} columns={columns} />);
4846

4947
// test asc function inside the popover element
5048
let component = wrapper
@@ -62,46 +60,6 @@ describe('AnalyticalTable', () => {
6260
// @ts-ignore
6361
component.onclick({});
6462

65-
expect(wrapper.render()).toMatchSnapshot();
66-
});
67-
test('pagination', () => {
68-
const wrapper = mountThemedComponent(
69-
<AnalyticalTable defaultPageSize={1} showPagination data={data} title={'Test'} columns={columns} />
70-
);
71-
72-
// test the right arrow of the pagination
73-
74-
let component = wrapper
75-
.find('ui5-link')
76-
.at(3)
77-
.instance();
78-
// @ts-ignore
79-
component.fireEvent('click');
80-
81-
// test the right page number link of the pagination
82-
component = wrapper
83-
.find('ui5-link')
84-
.at(2)
85-
.instance();
86-
// @ts-ignore
87-
component.fireEvent('click');
88-
89-
// test the left page number link of the pagination
90-
component = wrapper
91-
.find('ui5-link')
92-
.at(1)
93-
.instance();
94-
// @ts-ignore
95-
component.fireEvent('click');
96-
97-
// test the left arrow of the pagination
98-
component = wrapper
99-
.find('ui5-link')
100-
.at(0)
101-
.instance();
102-
// @ts-ignore
103-
component.fireEvent('click');
104-
10563
expect(wrapper.render()).toMatchSnapshot();
10664
});
10765
});

‎packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,109 @@ import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
55
const styles = ({ parameters, contentDensity }: JSSTheme) => ({
66
tHead: {
77
boxShadow: 'none !important',
8-
height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`,
9-
borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
10-
borderTop: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`
8+
height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`
119
},
1210

13-
tr: {
14-
background: parameters.sapUiListBackground,
15-
borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
16-
'& >:first-child': {
17-
paddingLeft: '1rem !important'
18-
},
19-
'& >:not(:first-child)': {
20-
paddingLeft: '0.5rem'
11+
th: {
12+
backgroundColor: parameters.sapUiListHeaderBackground,
13+
height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`,
14+
fontFamily: parameters.sapUiFontFamily,
15+
fontSize: parameters.sapMFontMediumSize,
16+
fontWeight: 'normal',
17+
color: parameters.sapUiListHeaderTextColor,
18+
borderTop: `1px solid ${parameters.sapUiListBorderColor}`,
19+
borderBottom: `1px solid ${parameters.sapUiListBorderColor}`,
20+
borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`,
21+
textAlign: 'start',
22+
boxSizing: 'border-box',
23+
'&:first-child': {
24+
borderLeft: `1px solid ${parameters.sapUiListVerticalBorderColor}`
25+
}
26+
},
27+
tableHeaderRow: {},
28+
tableGroupHeader: {
29+
'&$tr': {
30+
backgroundColor: `${parameters.sapUiListTableGroupHeaderBackground} !important`,
31+
border: `1px solid ${parameters.sapUiListTableGroupHeaderBorderColor}`,
32+
color: parameters.sapUiListTextColor,
33+
'& $td': {
34+
borderRight: 'none'
35+
}
2136
}
2237
},
23-
trGroup: {
24-
border: 'none!important'
38+
39+
tableGroupExpandCollapseIcon: {
40+
color: parameters.sapUiContentIconColor,
41+
height: '2rem',
42+
width: '2rem',
43+
fontSize: '0.75rem'
2544
},
45+
46+
tbody: {
47+
position: 'relative',
48+
'&$selectable $tr': {
49+
'&:hover': {
50+
backgroundColor: parameters.sapUiListHoverBackground
51+
},
52+
'&:active:not($selectedRow)': {
53+
backgroundColor: parameters.sapUiListActiveBackground,
54+
'& $td': {
55+
color: parameters.sapUiListActiveTextColor,
56+
borderRight: `1px solid ${parameters.sapUiListActiveBackground}`
57+
}
58+
},
59+
'&$selectedRow': {
60+
backgroundColor: parameters.sapUiListSelectionBackgroundColor,
61+
color: parameters.sapUiListActiveTextColor,
62+
'&:hover': {
63+
backgroundColor: parameters.sapUiListSelectionHoverBackground
64+
}
65+
}
66+
},
67+
'& $tr': {
68+
backgroundColor: parameters.sapUiListBackground
69+
}
70+
},
71+
tr: {},
72+
selectable: {},
73+
selectedRow: {},
2674
td: {
27-
// borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`,
28-
height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`,
29-
display: 'flex',
30-
alignItems: 'center',
75+
height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`,
3176
fontFamily: fonts.sapUiFontFamily,
3277
fontSize: fonts.sapMFontMediumSize,
3378
fontWeight: 'normal',
34-
// backgroundColor: parameters.sapUiListBackground,
3579
color: parameters.sapUiListTextColor,
36-
paddingRight: '0.5rem !important'
80+
borderBottom: `1px solid ${parameters.sapUiListBorderColor}`,
81+
borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`,
82+
display: 'table-cell',
83+
padding: '0 0.5rem',
84+
'&:first-child': {
85+
borderLeft: `1px solid ${parameters.sapUiListVerticalBorderColor}`
86+
}
3787
},
3888
tBody: {
3989
boxShadow: 'none !important'
4090
},
91+
tableContainer: {
92+
width: '100%',
93+
height: `${contentDensity === ContentDensity.Compact ? 'calc(100% - 2rem)' : 'calc(100% - 2.75rem)'}`,
94+
minHeight: '3rem'
95+
},
4196
table: {
42-
// border: `1px solid ${parameters.sapList_BorderColor} !important`
97+
borderSpacing: 0,
98+
position: 'relative'
99+
},
100+
noDataContainer: {
101+
textAlign: 'center',
102+
paddingTop: '0.5rem',
103+
paddingBottom: '0.5rem',
104+
backgroundColor: parameters.sapUiListBackground,
105+
width: '100%',
106+
boxSizing: 'border-box',
107+
color: parameters.sapUiListTextColor,
108+
fontFamily: fonts.sapUiFontFamily,
109+
fontSize: fonts.sapMFontMediumSize,
110+
fontWeight: 'normal'
43111
}
44112
});
45113

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from 'react';
2+
3+
// const style = {
4+
// width: '100%',
5+
// position: 'absolute',
6+
// textAlign: 'center',
7+
// marginTop: '1rem'
8+
// };
9+
10+
export const DefaultNoDataComponent = ({ noDataText, className }) => {
11+
return <div className={className}>{noDataText}</div>;
12+
};

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
1-
import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
2-
import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
31
import React from 'react';
2+
import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
3+
import { BusyIndicatorType } from '@ui5/webcomponents-react/lib/BusyIndicatorType';
44

5-
const LoadingComponent = (props) => {
6-
if (!props.loading) {
7-
return null;
8-
}
9-
let className = '-loading -active';
5+
const LoadingComponent = () => {
106
return (
11-
<div className={className} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
12-
<BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
13-
</div>
7+
<tr>
8+
<td
9+
style={{
10+
position: 'absolute',
11+
top: '0',
12+
left: '0',
13+
right: '0',
14+
bottom: '0',
15+
display: 'flex',
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
backgroundColor: 'rgba(247,247,247,0.72)' // TODO is there a theming parameter available?
19+
}}
20+
>
21+
<BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
22+
</td>
23+
</tr>
1424
);
1525
};
1626

0 commit comments

Comments
 (0)