Skip to content

Commit 030473c

Browse files
MarcusNotheisMarcusNotheis
authored
chore(main): remove deprecated render methods (#511)
BREAKING CHANGE: **AnalyticalTable**: remove deprecated prop `renderExtension`, please use `extension` instead BREAKING CHANGE: **Bar**: remove deprecated prop `renderContentLeft`, `renderContentMiddle`, `renderContentRight`, please use `contentLeft`, `contentMiddle`, `contentRight` instead BREAKING CHANGE: **FormItem**: remove deprecated prop `labelText`, please use `label` instead BREAKING CHANGE: **FilterBar**: remove deprecated prop `renderSearch`, `renderVariants`, please use `search`, `variants` instead BREAKING CHANGE: **ObjectPage**: remove deprecated prop `renderHeaderContent`, `renderBreadcrumbs`, `renderKeyInfos`, please use `headerContent`, `breadcrumbs`, `keyInfos` instead BREAKING CHANGE: **Page**: remove deprecated prop `renderCustomHeader`, `renderCustomFooter`, please use `customHeader`, `customFooter` instead
1 parent e033f85 commit 030473c

File tree

11 files changed

+27
-188
lines changed

11 files changed

+27
-188
lines changed

‎packages/base/src/hooks/useDeprecateRenderMethods.ts

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎packages/base/src/lib/hooks.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { useConsolidatedRef } from '../hooks/useConsolidatedRef';
2-
import { useDeprecateRenderMethods } from '../hooks/useDeprecateRenderMethods';
32
import { useI18nBundle } from '../hooks/useI18nBundle';
43
import { usePassThroughHtmlProps } from '../hooks/usePassThroughHtmlProps';
54
import { useViewportRange } from '../hooks/useViewportRange';
65

7-
export { useConsolidatedRef, useDeprecateRenderMethods, usePassThroughHtmlProps, useViewportRange, useI18nBundle };
6+
export { useConsolidatedRef, usePassThroughHtmlProps, useViewportRange, useI18nBundle };

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
2-
import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks';
32
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
43
import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
54
import { TableScaleWidthMode } from '@ui5/webcomponents-react/lib/TableScaleWidthMode';
@@ -66,7 +65,6 @@ export interface TableProps extends CommonProps {
6665
/**
6766
* Extension section of the Table. If not set, no extension area will be rendered
6867
*/
69-
renderExtension?: () => ReactNode;
7068
extension?: ReactNode;
7169

7270
// appearance
@@ -164,14 +162,14 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
164162
filterable,
165163
infiniteScroll,
166164
infiniteScrollThreshold = 20,
167-
onLoadMore
165+
onLoadMore,
166+
extension
168167
} = props;
169168

170169
const classes = useStyles();
171170

172171
const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref);
173172
const tableRef: RefObject<HTMLDivElement> = useRef();
174-
const extension = useDeprecateRenderMethods(props, 'renderExtension', 'extension');
175173

176174
const getSubRows = useCallback((row) => row[subRowsKey] || [], [subRowsKey]);
177175

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
22
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
3-
import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks';
43
import React, { FC, forwardRef, ReactNode, Ref } from 'react';
54
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
65
import { CommonProps } from '../../interfaces/CommonProps';
76
import { BarDesign } from '../../lib/BarDesign';
87
import styles from './Bar.jss';
98

109
export interface BarPropTypes extends CommonProps {
11-
renderContentLeft?: () => JSX.Element;
12-
renderContentMiddle?: () => JSX.Element;
13-
renderContentRight?: () => JSX.Element;
1410
contentLeft?: ReactNode | ReactNode[];
1511
contentMiddle?: ReactNode | ReactNode[];
1612
contentRight?: ReactNode | ReactNode[];
@@ -23,10 +19,7 @@ const useStyles = createComponentStyles(styles, { name: 'Bar' });
2319
* <code>import { Bar } from '@ui5/webcomponents-react/lib/Bar';</code>
2420
*/
2521
const Bar: FC<BarPropTypes> = forwardRef((props: BarPropTypes, ref: Ref<HTMLDivElement>) => {
26-
const { className, style, tooltip, slot, design } = props;
27-
const contentLeft = useDeprecateRenderMethods(props, 'renderContentLeft', 'contentLeft');
28-
const contentMiddle = useDeprecateRenderMethods(props, 'renderContentMiddle', 'contentMiddle');
29-
const contentRight = useDeprecateRenderMethods(props, 'renderContentRight', 'contentRight');
22+
const { className, style, tooltip, slot, design, contentLeft, contentMiddle, contentRight } = props;
3023

3124
const classes = useStyles();
3225

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

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
22
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
3-
import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks';
43
import { Button } from '@ui5/webcomponents-react/lib/Button';
54
import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
65
import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallback, useState } from 'react';
@@ -9,8 +8,6 @@ import { CommonProps } from '../../interfaces/CommonProps';
98
import styles from './FilterBar.jss';
109

1110
export interface FilterBarPropTypes extends CommonProps {
12-
renderVariants?: () => JSX.Element;
13-
renderSearch?: () => JSX.Element;
1411
variants?: ReactNode;
1512
search?: ReactNode;
1613
children: ReactNode | ReactNodeArray;
@@ -24,10 +21,8 @@ const useStyles = createComponentStyles(styles, { name: 'FilterBar' });
2421
* <code>import { FilterBar } from '@ui5/webcomponents-react/lib/FilterBar';</code>
2522
*/
2623
const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes, ref: RefObject<HTMLDivElement>) => {
27-
const { children } = props as FilterBarInternalProps;
24+
const { children, search, variants } = props as FilterBarInternalProps;
2825
const [showFilters, setShowFilters] = useState(true);
29-
const search = useDeprecateRenderMethods(props, 'renderSearch', 'search');
30-
const variants = useDeprecateRenderMethods(props, 'renderVariants', 'variants');
3126

3227
const classes = useStyles();
3328

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import styles from './FilterItem.jss';
1717

1818
export interface FilterItemPropTypes extends CommonProps {
1919
placeholder?: string;
20-
renderText?: (item?: any) => JSX.Element;
2120
type?: FilterType;
2221
label?: string;
2322
filterItems?: any[];
@@ -143,7 +142,6 @@ const FilterItem: FC<FilterItemPropTypes> = forwardRef((props: FilterItemPropTyp
143142

144143
FilterItem.defaultProps = {
145144
placeholder: '',
146-
renderText: (item) => (item && item.text) || '',
147145
type: FilterType.Default,
148146
filterItems: [],
149147
label: '',

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

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ describe('Create a Form', () => {
6161
test('should create a FormGroup and put ungrouped FormItems into it', () => {
6262
const ungroupedChildren = (
6363
<Form title={'Test form'}>
64-
<FormItem labelText={'item 1'}>
64+
<FormItem label={'item 1'}>
6565
<Input type={InputType.Text} />
6666
</FormItem>
67-
<FormItem labelText={'item 2'}>
67+
<FormItem label={'item 2'}>
6868
<Input type={InputType.Number} />
6969
</FormItem>
7070
</Form>
@@ -92,26 +92,9 @@ describe('Create a Form', () => {
9292

9393
createPassThroughPropsTest(Form, {
9494
children: (
95-
<FormItem labelText={'item 1'}>
95+
<FormItem>
9696
<Input type={InputType.Text} />
9797
</FormItem>
9898
)
9999
});
100-
101-
it('accepts both label and labelText', () => {
102-
const wrapper = mount(
103-
<Form>
104-
<FormItem labelText={'item 1'}>
105-
<Input type={InputType.Text} />
106-
</FormItem>
107-
<FormItem label="Label Text">
108-
<Input type={InputType.Number} />
109-
</FormItem>
110-
<FormItem label={<Label required>Label Component</Label>}>
111-
<Input type={InputType.Number} />
112-
</FormItem>
113-
</Form>
114-
);
115-
expect(wrapper.render()).toMatchSnapshot();
116-
});
117100
});

‎packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,5 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Create a Form accepts both label and labelText 1`] = `
4-
<div
5-
class="Grid-grid-0"
6-
>
7-
<div
8-
class="Grid-gridSpan6-0"
9-
>
10-
<div>
11-
<div
12-
class="FormGroup-formGroup-0"
13-
>
14-
<div
15-
class="FormItem-formItem-0"
16-
style="display: flex;"
17-
>
18-
<ui5-label
19-
class="FormItem-label-0"
20-
style="width: 33%; justify-content: flex-end;"
21-
>
22-
item 1:
23-
</ui5-label>
24-
<div
25-
class="FormItem-content-0"
26-
style="width: 66%;"
27-
>
28-
<ui5-input
29-
type="Text"
30-
value-state="None"
31-
/>
32-
</div>
33-
</div>
34-
</div>
35-
<div
36-
class="FormGroup-formGroup-0"
37-
>
38-
<div
39-
class="FormItem-formItem-0"
40-
style="display: flex;"
41-
>
42-
<ui5-label
43-
class="FormItem-label-0"
44-
style="width: 33%; justify-content: flex-end;"
45-
>
46-
Label Text:
47-
</ui5-label>
48-
<div
49-
class="FormItem-content-0"
50-
style="width: 66%;"
51-
>
52-
<ui5-input
53-
type="Number"
54-
value-state="None"
55-
/>
56-
</div>
57-
</div>
58-
</div>
59-
<div
60-
class="FormGroup-formGroup-0"
61-
>
62-
<div
63-
class="FormItem-formItem-0"
64-
style="display: flex;"
65-
>
66-
<ui5-label
67-
class="FormItem-label-0"
68-
required="true"
69-
style="width: 33%; justify-content: flex-end;"
70-
>
71-
Label Component:
72-
</ui5-label>
73-
<div
74-
class="FormItem-content-0"
75-
style="width: 66%;"
76-
>
77-
<ui5-input
78-
type="Number"
79-
value-state="None"
80-
/>
81-
</div>
82-
</div>
83-
</div>
84-
</div>
85-
</div>
86-
</div>
87-
`;
88-
893
exports[`Create a Form should create a FormGroup and put ungrouped FormItems into it 1`] = `
904
Array [
915
<ui5-title

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

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
2-
import { deprecationNotice } from '@ui5/webcomponents-react-base/lib/Utils';
32
import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/CurrentViewportRangeContext';
43
import { Label } from '@ui5/webcomponents-react/lib/Label';
54
import React, {
@@ -17,10 +16,6 @@ import { CommonProps } from '../../interfaces/CommonProps';
1716

1817
export interface FormItemProps extends CommonProps {
1918
label?: string | ReactElement;
20-
/**
21-
* @deprecated use label instead
22-
*/
23-
labelText?: string; // TODO remove on next major release
2419
children: ReactNode | ReactNodeArray;
2520
}
2621

@@ -47,7 +42,7 @@ const useStyles = createComponentStyles(
4742
* <code>import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';</code>
4843
*/
4944
const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<HTMLDivElement>) => {
50-
const { label, labelText, children, tooltip, style, className, slot } = props;
45+
const { label, children, tooltip, style, className, slot } = props;
5146

5247
const currentRange = useContext(CurrentViewportRangeContext);
5348

@@ -97,27 +92,20 @@ const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<H
9792
classNames += ` ${className}`;
9893
}
9994

100-
if (labelText) {
101-
deprecationNotice(
102-
'FormItem',
103-
`prop 'labelText' is deprecated and will be removed in the next major release. Please use 'label' instead.`
104-
);
105-
}
106-
const labelToRender = label ?? labelText;
107-
10895
return (
10996
<div ref={ref} style={memoizedStyles.topDivStyle} className={classNames} title={tooltip} slot={slot}>
110-
{typeof labelToRender === 'string' ? (
97+
{label != null && typeof label === 'string' && (
11198
<Label style={memoizedStyles.labelStyle} className={classes.label}>
112-
{labelToRender ? `${labelToRender}:` : ''}
99+
{label ? `${label}:` : ''}
113100
</Label>
114-
) : (
115-
cloneElement(labelToRender, {
116-
style: { ...memoizedStyles.labelStyle, ...(labelToRender.props.style || {}) },
117-
className: `${classes.label} ${labelToRender.props.className ?? ''}`,
118-
children: labelToRender.props.children ? `${labelToRender.props.children}:` : ''
119-
})
120101
)}
102+
{label != null &&
103+
typeof label !== 'string' &&
104+
cloneElement(label, {
105+
style: { ...memoizedStyles.labelStyle, ...(label.props.style || {}) },
106+
className: `${classes.label} ${label.props.className ?? ''}`,
107+
children: label.props.children ? `${label.props.children}:` : ''
108+
})}
121109

122110
<div style={memoizedStyles.elementStyle} className={classes.content}>
123111
{children}

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

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHe
33
import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
44
import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
55
import { enrichEventWithDetails, getScrollBarWidth } from '@ui5/webcomponents-react-base/lib/Utils';
6-
import { useDeprecateRenderMethods } from '@ui5/webcomponents-react-base/lib/hooks';
76
import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
87
import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems';
98
import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection';
@@ -45,7 +44,6 @@ export interface ObjectPagePropTypes extends CommonProps {
4544
subTitle?: string;
4645
image?: string | ReactElement<unknown>;
4746
headerActions?: ReactElement<unknown>[];
48-
renderHeaderContent?: () => JSX.Element;
4947
headerContent?: ReactNode;
5048
children?: ReactElement<ObjectPageSectionPropTypes> | ReactElement<ObjectPageSectionPropTypes>[];
5149

@@ -55,8 +53,6 @@ export interface ObjectPagePropTypes extends CommonProps {
5553
event: CustomEvent<{ selectedSectionIndex: number; selectedSectionId: string; section: ComponentType }>
5654
) => void;
5755

58-
renderBreadcrumbs?: () => JSX.Element;
59-
renderKeyInfos?: () => JSX.Element;
6056
breadcrumbs?: ReactNode;
6157
keyInfos?: ReactNode;
6258

@@ -96,13 +92,12 @@ const ObjectPage: FC<ObjectPagePropTypes> = forwardRef((props: ObjectPagePropTyp
9692
noHeader = false,
9793
alwaysShowContentHeader,
9894
showTitleInHeaderContent,
99-
headerContentPinnable
95+
headerContentPinnable,
96+
headerContent,
97+
breadcrumbs,
98+
keyInfos
10099
} = props;
101100

102-
const headerContent = useDeprecateRenderMethods(props, 'renderHeaderContent', 'headerContent');
103-
const breadcrumbs = useDeprecateRenderMethods(props, 'renderBreadcrumbs', 'breadcrumbs');
104-
const keyInfos = useDeprecateRenderMethods(props, 'renderKeyInfos', 'keyInfos');
105-
106101
const firstSectionId = safeGetChildrenArray(children)[0]?.props?.id;
107102

108103
const [internalSelectedSectionId, setInternalSelectedSectionId] = useState(selectedSectionId ?? firstSectionId);

0 commit comments

Comments
 (0)