Skip to content

Commit d39c2a4

Browse files
MarcusNotheisMarcusNotheis
authored
Merge branch 'master' into fix/analytical-table-row-selection-custom
2 parents 5ba6a48 + 95a1078 commit d39c2a4

File tree

8 files changed

+59
-35
lines changed

8 files changed

+59
-35
lines changed

‎.storybook/manager-head.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@
2424

2525
<script data-ui5-config type="application/json">
2626
{
27-
"theme": "sap_fiori_3",
28-
"language": "EN"
27+
"theme": "sap_fiori_3"
2928
}
3029
</script>
3130

‎.storybook/preview-head.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
</style>
1919
<script data-ui5-config type="application/json">
2020
{
21-
"theme": "sap_fiori_3",
22-
"language": "EN"
21+
"theme": "sap_fiori_3"
2322
}
2423
</script>
2524

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.mdx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Title, Subtitle, Primary, Description, Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
1+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
22
import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
33
import { createSelectArgTypes } from '../../../../../shared/stories/createSelectArgTypes';
44
import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
@@ -10,19 +10,15 @@ import '@ui5/webcomponents-icons/dist/icons/delete';
1010
import '@ui5/webcomponents-icons/dist/icons/edit';
1111
import '@ui5/webcomponents-icons/dist/icons/settings';
1212
import { Button } from '@ui5/webcomponents-react/lib/Button';
13-
import { Text } from '@ui5/webcomponents-react/lib/Text';
1413
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
1514
import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
16-
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
17-
import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
1815
import { DefaultLoadingComponent } from './defaults/LoadingComponent';
1916
import { DefaultNoDataComponent } from './defaults/NoDataComponent';
2017

2118
<Meta
2219
title="Components / AnalyticalTable"
2320
component={AnalyticalTable}
2421
args={{
25-
dataTree: generateData(20, true),
2622
data: generateData(1000),
2723
columns: [
2824
{
@@ -109,7 +105,6 @@ import { DefaultNoDataComponent } from './defaults/NoDataComponent';
109105
}}
110106
argTypes={{
111107
ref: { type: null },
112-
dataTree: { type: null },
113108
data: { type: null },
114109
columns: { type: null },
115110
reactTableOptions: { type: null },
@@ -275,12 +270,12 @@ This even works if you resize the browser window!
275270
## Tree Table
276271

277272
<Canvas>
278-
<Story name="Tree Table">
273+
<Story name="Tree Table" args={{ data: generateData(20, true) }}>
279274
{(args) => (
280275
<AnalyticalTable
281276
{...args}
282277
title={args.title}
283-
data={args.dataTree}
278+
data={args.data}
284279
columns={args.columns}
285280
loading={args.loading}
286281
sortable={args.sortable}

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ export interface TableProps extends CommonProps {
9797
groupBy?: string[];
9898
selectionBehavior?: TableSelectionBehavior;
9999
selectionMode?: TableSelectionMode;
100+
/**
101+
* Defines the column growing behaviour. Possible Values:
102+
*
103+
* - **Default**: Every column without fixed width gets the maximum available space of the table.
104+
* - **Smart**: Every column gets the space it needs for displaying the full header text. If all headers need more space than the available table width, horizontal scrolling will be enabled. If there is space left, columns with a long content will get more space until there is no more table space left.
105+
* - **Grow**: Every column gets the space it needs for displaying it's full header text and full content of all cells. If it requires more space than the table has, horizontal scrolling will be enabled.
106+
*
107+
*/
100108
scaleWidthMode?: TableScaleWidthMode;
101109
columnOrder?: string[];
102110
infiniteScroll?: boolean;
@@ -113,7 +121,7 @@ export interface TableProps extends CommonProps {
113121
/**
114122
* Additional options which will be passed to [react-table´s useTable hook](https://react-table.tanstack.com/docs/api/useTable#table-options)
115123
*/
116-
reactTableOptions?: object;
124+
reactTableOptions?: Record<string, unknown>;
117125
tableHooks?: PluginHook<any>[];
118126
subRowsKey?: string;
119127
/**

‎packages/main/src/components/FilterBar/FilterDialog.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -224,11 +224,11 @@ export const FilterDialog = (props) => {
224224
}, [children, searchString, filterBarRefs]);
225225

226226
const handleCheckBoxChange = useCallback(
227-
(element, toggledFilters) => (e) => {
227+
(element) => (e) => {
228228
if (handleSelectionChange) {
229229
handleSelectionChange(enrichEventWithDetails(e, { element, checked: e.target.checked }));
230230
}
231-
setToggledFilters({ ...toggledFilters, [element.key]: e.target.checked });
231+
setToggledFilters((old) => ({ ...old, [element.key]: e.target.checked }));
232232
},
233233
[setToggledFilters, handleSelectionChange]
234234
);
@@ -251,7 +251,7 @@ export const FilterDialog = (props) => {
251251
{el}
252252
<CheckBox
253253
checked={el.props.visibleInFilterBar || el.props.required || el.type.displayName !== 'FilterGroupItem'}
254-
onChange={handleCheckBoxChange(el, toggledFilters)}
254+
onChange={handleCheckBoxChange(el)}
255255
disabled={el.props.required || el.type.displayName !== 'FilterGroupItem'}
256256
/>
257257
</div>
@@ -282,7 +282,7 @@ export const FilterDialog = (props) => {
282282
)}
283283
{renderGroups()}
284284
</div>
285-
</Dialog>,
285+
</Dialog>,
286286
document.body
287287
);
288288
};

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

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -131,19 +131,18 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
131131
);
132132

133133
useEffect(() => {
134-
if (showFilterConfiguration) {
135-
Children.toArray(children).forEach((item: ReactElement<any>) => {
136-
if (
137-
prevVisibleInFilterBarProps.current?.[item.key] !== undefined &&
138-
prevVisibleInFilterBarProps.current?.[item.key] !== item.props.visibleInFilterBar
139-
) {
140-
const updatedToggledFilters = toggledFilters;
141-
delete updatedToggledFilters[item.key];
142-
setToggledFilters(updatedToggledFilters);
134+
Children.toArray(children).forEach((item: ReactElement<any>) => {
135+
setToggledFilters((prev) => {
136+
if (!item.props.hasOwnProperty('visibleInFilterBar') && prev?.[item.key] === undefined) {
137+
return { ...prev, [item.key]: true };
138+
}
139+
if (item.props.hasOwnProperty('visibleInFilterBar')) {
140+
return { ...prev, [item.key]: item.props.visibleInFilterBar };
143141
}
142+
return prev;
144143
});
145-
}
146-
}, [children, prevVisibleInFilterBarProps, setToggledFilters, toggledFilters, showFilterConfiguration]);
144+
});
145+
}, [children, setToggledFilters]);
147146

148147
useEffect(() => {
149148
setShowFilters(useToolbar ? filterBarExpanded : true);
@@ -171,9 +170,14 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
171170
const handleDialogSave = useCallback(
172171
(e, newRefs, updatedToggledFilters) => {
173172
setDialogRefs(newRefs);
174-
setToggledFilters({ ...toggledFilters, ...updatedToggledFilters });
173+
setToggledFilters((old) => ({ ...old, ...updatedToggledFilters }));
175174
if (onFiltersDialogSave) {
176-
onFiltersDialogSave(enrichEventWithDetails(e));
175+
onFiltersDialogSave(
176+
enrichEventWithDetails(e, {
177+
elements: newRefs,
178+
toggledElements: { ...toggledFilters, ...updatedToggledFilters }
179+
})
180+
);
177181
}
178182
handleDialogClose(e);
179183
},
@@ -215,7 +219,7 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
215219
]);
216220

217221
const safeChildren = useCallback(() => {
218-
if (showFilterConfiguration && Object.keys(toggledFilters).length > 0) {
222+
if (Object.keys(toggledFilters).length > 0) {
219223
return Children.toArray(children).map((child: ReactElement) => {
220224
if (toggledFilters?.[child.key] !== undefined) {
221225
return cloneElement(child, {
@@ -228,6 +232,8 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
228232
return Children.toArray(children) as unknown[];
229233
}, [toggledFilters, children]);
230234

235+
const prevChildren = useRef({});
236+
231237
const renderChildren = useCallback(() => {
232238
const childProps = { considerGroupName, inFB: true } as any;
233239
return safeChildren()
@@ -252,10 +258,28 @@ const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes,
252258
filterItemProps = filterValue(dialogItemRef, child);
253259
}
254260
}
255-
if (!child.props.children)
261+
if (!child.props.children) {
256262
return cloneElement(child as ReactElement<any>, {
257263
...childProps
258264
});
265+
}
266+
if (
267+
prevChildren.current?.[child.key] &&
268+
//Input
269+
(child.props.children?.props?.value !== prevChildren.current?.[child.key]?.value ||
270+
//Combobox
271+
child.props.children?.props?.filterValue !== prevChildren.current?.[child.key]?.filterValue ||
272+
//Checkbox
273+
child.props.children?.props?.checked !== prevChildren.current?.[child.key]?.checked ||
274+
//Selectable
275+
child.props.children?.props?.children?.map((item) => item.props.selected).join(',') !==
276+
prevChildren?.current?.[child.key]?.children?.map((item) => item.props.selected).join(','))
277+
) {
278+
const { [child.key]: omit, ...rest } = dialogRefs;
279+
setDialogRefs(rest);
280+
}
281+
prevChildren.current[child.key] = child.props.children.props;
282+
259283
return cloneElement(child as ReactElement<any>, {
260284
...childProps,
261285
children: {

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ FilterGroupItem.displayName = 'FilterGroupItem';
8686
FilterGroupItem.defaultProps = {
8787
groupName: 'default',
8888
visible: true,
89-
visibleInFilterBar: true,
9089
required: false,
9190
label: ''
9291
};

‎packages/main/src/enums/TableScaleWidthMode.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export enum TableScaleWidthMode {
22
/*
3-
* Every column without fixed width get's the maximum available space of the table
3+
* Every column without fixed width gets the maximum available space of the table
44
*/
55
Default = 'Default',
66
/*
@@ -10,7 +10,7 @@ export enum TableScaleWidthMode {
1010
*/
1111
Smart = 'Smart',
1212
/*
13-
* Every column get's the space it needs for displaying it's full header text and full content of all cells.
13+
* Every column gets the space it needs for displaying it's full header text and full content of all cells.
1414
* If it requires more space than the table has, horizontal scrolling will be enabled.
1515
*/
1616
Grow = 'Grow'

0 commit comments

Comments
 (0)