Skip to content

Commit 8d793de

Browse files
KonradPietochaKonradPietocha
authored
fix: Correct inner table style (kyma-project#4227)
* Correct inner table style and separete rowrendrer function * Correct style for table cells and prevent from too much rerenders * Fix setting wrong title * Styles corrected * Fix broken outline * Style correction * Fit hight to content * Style correction
1 parent 8fb7a40 commit 8d793de

File tree

3 files changed

+148
-80
lines changed

3 files changed

+148
-80
lines changed

‎src/components/Extensibility/components/Table.jsx‎

Lines changed: 111 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,100 @@ const handleTableValue = (value, t) => {
3232
}
3333
};
3434

35+
const rowRenderer = (
36+
entry,
37+
index,
38+
structure,
39+
tExt,
40+
jsonata,
41+
arrayItems,
42+
title,
43+
setTitle,
44+
schema,
45+
originalResource,
46+
singleRootResource,
47+
props,
48+
) => {
49+
const tdClassNames = classNames({
50+
'collapsible-panel': !structure.disablePadding,
51+
});
52+
const makeTitle = async () => {
53+
const defaultTitle =
54+
tExt(structure.name, {
55+
defaultValue: structure.name || structure.source,
56+
}) +
57+
' #' +
58+
(index + 1);
59+
if (structure.collapsibleTitle) {
60+
try {
61+
return await jsonata(structure.collapsibleTitle, {
62+
index: index,
63+
scope: entry,
64+
arrayItems: [...arrayItems, entry],
65+
});
66+
} catch (e) {
67+
console.warn(e);
68+
return defaultTitle;
69+
}
70+
} else {
71+
return defaultTitle;
72+
}
73+
};
74+
makeTitle().then((result) => {
75+
if (!structure.collapsible) {
76+
return;
77+
}
78+
if (result && JSON.stringify(title?.[index]) !== JSON.stringify(result)) {
79+
setTitle((prev) => ({ ...prev, [index]: result }));
80+
}
81+
});
82+
83+
const cells = (structure.children || []).map((column, cellIndex) => {
84+
return (
85+
<Widget
86+
{...props}
87+
key={cellIndex}
88+
value={entry}
89+
scope={entry}
90+
arrayItems={[...arrayItems, entry]}
91+
structure={column}
92+
schema={schema}
93+
originalResource={originalResource}
94+
singleRootResource={singleRootResource}
95+
index={index}
96+
/>
97+
);
98+
});
99+
100+
if (!structure.collapsible) {
101+
return cells;
102+
}
103+
104+
return {
105+
cells,
106+
title: title?.[index] ?? '',
107+
collapseContent: (
108+
<div className={tdClassNames}>
109+
{structure.collapsible.map((child, cellIndex) => (
110+
<Widget
111+
{...props}
112+
key={cellIndex}
113+
value={entry}
114+
scope={entry}
115+
arrayItems={[...arrayItems, entry]}
116+
structure={child}
117+
schema={schema}
118+
inlineRenderer={InlineWidget}
119+
originalResource={originalResource}
120+
singleRootResource={singleRootResource}
121+
index={index}
122+
/>
123+
))}
124+
</div>
125+
),
126+
};
127+
};
128+
35129
export function Table({
36130
value,
37131
structure,
@@ -63,87 +157,12 @@ export function Table({
63157
arrayItems,
64158
});
65159

66-
const [title, setTitle] = useState('');
160+
const [title, setTitle] = useState({});
67161

68162
const coreHeaders = (structure.children || []).map(({ name }) => tExt(name));
69163
const headerRenderer = () =>
70164
structure.collapsible ? ['', ...coreHeaders] : coreHeaders;
71165

72-
const tdClassNames = classNames({
73-
'collapsible-panel': !structure.disablePadding,
74-
});
75-
76-
const rowRenderer = (entry, index) => {
77-
const makeTitle = async () => {
78-
const defaultTitle =
79-
tExt(structure.name, {
80-
defaultValue: structure.name || structure.source,
81-
}) +
82-
' #' +
83-
(index + 1);
84-
if (structure.collapsibleTitle) {
85-
try {
86-
return await jsonata(structure.collapsibleTitle, {
87-
index: index,
88-
scope: entry,
89-
arrayItems: [...arrayItems, entry],
90-
});
91-
} catch (e) {
92-
console.warn(e);
93-
return defaultTitle;
94-
}
95-
} else {
96-
return defaultTitle;
97-
}
98-
};
99-
makeTitle().then((result) => setTitle(result));
100-
101-
const cells = (structure.children || []).map((column, cellIndex) => {
102-
return (
103-
<Widget
104-
{...props}
105-
key={cellIndex}
106-
value={entry}
107-
scope={entry}
108-
arrayItems={[...arrayItems, entry]}
109-
structure={column}
110-
schema={schema}
111-
originalResource={originalResource}
112-
singleRootResource={singleRootResource}
113-
index={index}
114-
/>
115-
);
116-
});
117-
118-
if (!structure.collapsible) {
119-
return cells;
120-
}
121-
122-
return {
123-
cells,
124-
title: title,
125-
collapseContent: (
126-
<div className={tdClassNames}>
127-
{structure.collapsible.map((child, cellIndex) => (
128-
<Widget
129-
{...props}
130-
key={cellIndex}
131-
value={entry}
132-
scope={entry}
133-
arrayItems={[...arrayItems, entry]}
134-
structure={child}
135-
schema={schema}
136-
inlineRenderer={InlineWidget}
137-
originalResource={originalResource}
138-
singleRootResource={singleRootResource}
139-
index={index}
140-
/>
141-
))}
142-
</div>
143-
),
144-
};
145-
};
146-
147166
const { sortOptions } = getSortDetails(structure);
148167

149168
const { searchOptions, defaultSearch } = getSearchDetails(structure);
@@ -180,7 +199,22 @@ export function Table({
180199
})}
181200
extraHeaderContent={extraHeaderContent}
182201
headerRenderer={headerRenderer}
183-
rowRenderer={rowRenderer}
202+
rowRenderer={(entry, index) =>
203+
rowRenderer(
204+
entry,
205+
index,
206+
structure,
207+
tExt,
208+
jsonata,
209+
arrayItems,
210+
title,
211+
setTitle,
212+
schema,
213+
originalResource,
214+
singleRootResource,
215+
props,
216+
)
217+
}
184218
{...handleTableValue(value, t)}
185219
sortBy={() => sortBy(jsonata, sortOptions, tExt, {}, originalResource)}
186220
searchSettings={{

‎src/components/Extensibility/components/Table.scss‎

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,43 @@
66
}
77
}
88

9+
.extensibility-table {
10+
ui5-table-row {
11+
min-height: fit-content;
12+
height: auto;
13+
* {
14+
min-height: fit-content;
15+
height: auto;
16+
}
17+
ui5-icon {
18+
min-width: 1rem;
19+
}
20+
}
21+
ui5-table-cell {
22+
div {
23+
min-height: fit-content;
24+
word-wrap: break-word;
25+
white-space: normal;
26+
}
27+
}
28+
}
29+
930
ui5-table-row.collapse-content {
31+
padding: 1rem;
1032
overflow-x: auto;
1133
display: block;
34+
height: fit-content;
35+
36+
.extensibility-table {
37+
margin: 0;
38+
ui5-table {
39+
min-width: auto;
40+
41+
ui5-table-cell {
42+
min-width: min-content;
43+
}
44+
}
45+
}
1246
}
1347

1448
.collapsible-panel {
@@ -17,8 +51,6 @@ ui5-table-row.collapse-content {
1751
display: inherit;
1852

1953
> :first-child {
20-
display: contents;
21-
min-width: max-content;
2254
overflow: auto;
2355

2456
&:not(ui5-panel) {

‎src/shared/components/GenericList/components.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,10 @@ export const HeaderRenderer = ({
6565
: '100px';
6666
} else if (h === 'Popin') {
6767
return '100%';
68+
} else if (disableHiding && (h === 'Name' || h === '')) {
69+
return '200px';
6870
} else if (disableHiding) {
69-
return h === 'Name' || h === '' ? '120px' : 'auto';
71+
return 'auto';
7072
} else {
7173
return '100px';
7274
}

0 commit comments

Comments
 (0)