Skip to content

Commit 522fe40

Browse files
authored
fix(TypeScript): use UI5 Web Component types in custom components (#4762)
1 parent 191d162 commit 522fe40

File tree

4 files changed

+48
-61
lines changed

4 files changed

+48
-61
lines changed

packages/main/src/components/MessageBox/index.tsx

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ import {
3030
WARNING,
3131
YES
3232
} from '../../i18n/i18n-defaults.js';
33-
import type { Ui5CustomEvent } from '../../interfaces/index.js';
3433
import { stopPropagation } from '../../internal/stopPropagation.js';
3534
import type { ButtonPropTypes, DialogDomRef, DialogPropTypes } from '../../webComponents/index.js';
3635
import { Button, Dialog, Icon, Title } from '../../webComponents/index.js';
@@ -40,21 +39,24 @@ import styles from './MessageBox.jss.js';
4039
type MessageBoxAction = MessageBoxActions | keyof typeof MessageBoxActions | string;
4140

4241
export interface MessageBoxPropTypes
43-
extends Omit<DialogPropTypes, 'children' | 'footer' | 'headerText' | 'onAfterClose' | 'state'> {
42+
extends Omit<
43+
DialogPropTypes,
44+
'children' | 'footer' | 'headerText' | 'onAfterClose' | 'state' | 'accessibleNameRef' | 'open' | 'initialFocus'
45+
> {
4446
/**
4547
* Defines the IDs of the elements that label the component.
4648
*
4749
* __Note:__ Per default the prop receives the IDs of the header and the content.
4850
*/
49-
accessibleNameRef?: string;
51+
accessibleNameRef?: DialogPropTypes['accessibleNameRef'];
5052
/**
5153
* Flag whether the Message Box should be opened or closed
5254
*/
53-
open?: boolean;
55+
open?: DialogPropTypes['open'];
5456
/**
5557
* A custom title for the MessageBox. If not present, it will be derived from the `MessageBox` type.
5658
*/
57-
titleText?: string;
59+
titleText?: DialogPropTypes['headerText'];
5860
/**
5961
* Defines the content of the `MessageBox`.
6062
*
@@ -89,14 +91,6 @@ export interface MessageBoxPropTypes
8991
* Callback to be executed when the `MessageBox` is closed (either by pressing on one of the `actions` or by pressing the `ESC` key). `event.detail.action` contains the pressed action button.
9092
*/
9193
onClose?: (event: CustomEvent<{ action: MessageBoxAction }>) => void;
92-
/**
93-
* Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.
94-
*/
95-
onBeforeOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
96-
/**
97-
* Fired after the component is opened. This event does not bubble.
98-
*/
99-
onAfterOpen?: (event: Ui5CustomEvent<DialogDomRef>) => void;
10094
}
10195

10296
const useStyles = createUseStyles(styles, { name: 'MessageBox' });

packages/main/src/components/MessageView/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import React, { Children, forwardRef, Fragment, isValidElement, useCallback, use
88
import { createUseStyles } from 'react-jss';
99
import { ButtonDesign, FlexBoxDirection, TitleLevel, ValueState } from '../../enums/index.js';
1010
import { ALL, LIST_NO_DATA } from '../../i18n/i18n-defaults.js';
11-
import type { CommonProps, Ui5CustomEvent } from '../../interfaces/index.js';
11+
import type { CommonProps } from '../../interfaces/index.js';
1212
import { MessageViewContext } from '../../internal/MessageViewContext.js';
1313
import { Bar } from '../../webComponents/Bar/index.js';
1414
import { Button } from '../../webComponents/Button/index.js';
1515
import { GroupHeaderListItem } from '../../webComponents/GroupHeaderListItem/index.js';
1616
import { Icon } from '../../webComponents/Icon/index.js';
1717
import { List } from '../../webComponents/List/index.js';
18+
import type { ListPropTypes } from '../../webComponents/List/index.js';
1819
import { SegmentedButton } from '../../webComponents/SegmentedButton/index.js';
1920
import { SegmentedButtonItem } from '../../webComponents/SegmentedButtonItem/index.js';
2021
import { Title } from '../../webComponents/Title/index.js';
@@ -50,7 +51,7 @@ export interface MessageViewPropTypes extends CommonProps {
5051
/**
5152
* Event is fired when the details of a message are shown.
5253
*/
53-
onItemSelect?: (event: Ui5CustomEvent<HTMLElement, { item: HTMLElement }>) => void;
54+
onItemSelect?: ListPropTypes['onItemClick'];
5455
}
5556

5657
export const resolveMessageTypes = (children: ReactElement<MessageItemPropTypes>[]) => {

packages/main/src/components/SelectDialog/index.tsx

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { clsx } from 'clsx';
1313
import type { ReactNode } from 'react';
1414
import React, { forwardRef, useState } from 'react';
1515
import { createUseStyles } from 'react-jss';
16-
import type { ListGrowingMode } from '../../enums/index.js';
1716
import { ButtonDesign, ListMode, ToolbarDesign } from '../../enums/index.js';
1817
import { CANCEL, CLEAR, RESET, SEARCH, SELECT, SELECTED } from '../../i18n/i18n-defaults.js';
1918
import type { Ui5CustomEvent } from '../../interfaces/index.js';
@@ -105,7 +104,9 @@ interface ListDomRefWithPrivateAPIs extends ListDomRef {
105104
focusFirstItem(): void;
106105
}
107106

108-
export interface SelectDialogPropTypes extends Omit<DialogPropTypes, 'header' | 'headerText' | 'footer' | 'children'> {
107+
export interface SelectDialogPropTypes
108+
extends Omit<DialogPropTypes, 'header' | 'headerText' | 'footer' | 'children'>,
109+
Pick<ListPropTypes, 'growing' | 'onLoadMore'> {
109110
/**
110111
* Defines the list items of the component.
111112
*
@@ -139,19 +140,7 @@ export interface SelectDialogPropTypes extends Omit<DialogPropTypes, 'header' |
139140
*
140141
* __Note:__ Although this prop accepts all `ListMode`s, it is strongly recommended that you only use `SingleSelect` or `MultiSelect` in order to preserve the intended design.
141142
*/
142-
mode?: ListMode | keyof typeof ListMode;
143-
/**
144-
* Defines whether the `List` will have growing capability either by pressing a `More` button, or via user scroll. In both cases the `onLoadMore` event is fired.
145-
*
146-
* Available options:
147-
*
148-
* `Button` - Shows a `More` button at the bottom of the list, pressing of which triggers the `load-more` event.
149-
* `Scroll` - The `load-more` event is triggered when the user scrolls to the bottom of the list;
150-
* `None` (default) - The growing is off.
151-
*
152-
* **Limitations:** `growing="Scroll"` is not supported for Internet Explorer, on IE the component will fallback to `growing="Button"`.
153-
*/
154-
growing?: ListGrowingMode | keyof typeof ListGrowingMode;
143+
mode?: ListPropTypes['mode'];
155144
/**
156145
* Defines props you can pass to the internal `List` component.
157146
*
@@ -186,12 +175,6 @@ export interface SelectDialogPropTypes extends Omit<DialogPropTypes, 'header' |
186175
onConfirm?:
187176
| ((event: Ui5CustomEvent<ListDomRef, { selectedItems: StandardListItemDomRef[] }>) => void)
188177
| ((event: Ui5CustomEvent<ButtonDomRef, { selectedItems: StandardListItemDomRef[] }>) => void);
189-
/**
190-
* Fired when the user scrolls to the bottom of the list.
191-
*
192-
* **Note:** The event is fired when the `growing='Scroll'` property is enabled.
193-
*/
194-
onLoadMore?: (event: Ui5CustomEvent<ListDomRef>) => void;
195178
}
196179

197180
/**

packages/main/src/components/VariantManagement/index.tsx

Lines changed: 34 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
'use client';
22

3+
import type { ListSelectionChangeEventDetail } from '@ui5/webcomponents/dist/List.js';
34
import '@ui5/webcomponents-fiori/dist/illustrations/UnableToLoad.js';
45
import navDownIcon from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
56
import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
@@ -32,7 +33,13 @@ import { useCanRenderPortal } from '../../internal/ssr.js';
3233
import { stopPropagation } from '../../internal/stopPropagation.js';
3334
import type { SelectedVariant } from '../../internal/VariantManagementContext.js';
3435
import { VariantManagementContext } from '../../internal/VariantManagementContext.js';
35-
import type { ResponsivePopoverDomRef } from '../../webComponents/index.js';
36+
import type {
37+
ButtonPropTypes,
38+
ListDomRef,
39+
ResponsivePopoverDomRef,
40+
ResponsivePopoverPropTypes,
41+
TitlePropTypes
42+
} from '../../webComponents/index.js';
3643
import {
3744
Bar,
3845
Button,
@@ -62,38 +69,25 @@ export interface VariantManagementPropTypes extends Omit<CommonProps, 'onSelect'
6269
/**
6370
* Determines on which side the VariantManagement popover is placed at.
6471
*/
65-
placement?: PopoverPlacementType | keyof typeof PopoverPlacementType;
72+
placement?: ResponsivePopoverPropTypes['placementType'];
6673
/**
6774
* Describes the title of the VariantManagement popover.
6875
*
6976
* __Note:__ If not set, the default title is used.
7077
*/
71-
titleText?: string;
78+
titleText?: ResponsivePopoverPropTypes['headerText'];
7279
/**
7380
* Defines whether the VariantManagement should be closed if an item was selected.
7481
*/
7582
closeOnItemSelect?: boolean;
7683
/**
7784
* Describes the `HTML Title` level of the variants.
7885
*/
79-
level?: TitleLevel | keyof typeof TitleLevel;
86+
level?: TitlePropTypes['level'];
8087
/**
8188
* Defines whether the VariantManagement is disabled.
8289
*/
8390
disabled?: boolean;
84-
/**
85-
* Fired after a variant has been selected.
86-
*/
87-
onSelect?: (
88-
event: Ui5CustomEvent<
89-
HTMLElement,
90-
{
91-
selectedVariant: SelectedVariant;
92-
selectedItems: unknown[];
93-
previouslySelectedItems: unknown[];
94-
}
95-
>
96-
) => void;
9791
/**
9892
* Indicator for modified but not saved variants.
9993
*
@@ -146,31 +140,46 @@ export interface VariantManagementPropTypes extends Omit<CommonProps, 'onSelect'
146140
* Defaults to: `document.body`
147141
*/
148142
portalContainer?: Element;
143+
/**
144+
* Fired after a variant has been selected.
145+
*
146+
* __Note:__ This event inherits part of its details from the `onSelectionChange` event of the `List` component.
147+
*/
148+
onSelect?: (
149+
event: Ui5CustomEvent<
150+
ListDomRef,
151+
ListSelectionChangeEventDetail & {
152+
selectedVariant: SelectedVariant;
153+
}
154+
>
155+
) => void;
149156
/**
150157
* The event is fired when the "Save" button is clicked inside the Save View dialog.
151158
*
152159
* __Note:__ Calling `event.preventDefault()` prevents the dialog from closing when clicked.
153160
*/
154-
onSaveAs?: (e: CustomEvent<SelectedVariant>) => void;
161+
onSaveAs?: (e: Parameters<ButtonPropTypes['onClick']>[0] & { detail: SelectedVariant }) => void;
155162
/**
156163
* The event is fired when the "Save" button is clicked inside the Manage Views dialog.
157164
*
158165
* __Note:__ Calling `event.preventDefault()` prevents the dialog from closing when clicked.
159166
*/
160167
onSaveManageViews?: (
161-
e: CustomEvent<{
162-
deletedVariants: VariantItemPropTypes[];
163-
prevVariants: VariantItemPropTypes[];
164-
updatedVariants: UpdatedVariant[];
165-
variants: SelectedVariant[];
166-
}>
168+
e: Parameters<ButtonPropTypes['onClick']>[0] & {
169+
detail: {
170+
deletedVariants: VariantItemPropTypes[];
171+
prevVariants: VariantItemPropTypes[];
172+
updatedVariants: UpdatedVariant[];
173+
variants: SelectedVariant[];
174+
};
175+
}
167176
) => void;
168177
/**
169178
* The event is fired when the "Save" button is clicked in the `VariantManagement` popover.
170179
*
171180
* __Note:__ The save button is only displayed if the `VariantManagement` is in `dirtyState` and the selected variant is not in `readOnly` mode.
172181
*/
173-
onSave?: (e: CustomEvent<SelectedVariant>) => void;
182+
onSave?: (e: Parameters<ButtonPropTypes['onClick']>[0] & { detail: SelectedVariant }) => void;
174183
}
175184

176185
const styles = {

0 commit comments

Comments
 (0)