|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import '@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js'; |
| 4 | +import type { UserSettingsAppearanceViewItemSelectEventDetail } from '@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js'; |
| 5 | +import { withWebComponent } from '@ui5/webcomponents-react-base'; |
| 6 | +import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; |
| 7 | +import type { ReactNode } from 'react'; |
| 8 | + |
| 9 | +interface UserSettingsAppearanceViewAttributes { |
| 10 | + /** |
| 11 | + * Indicates whether the view is secondary. It is relevant only if the view is used in `pages` slot of `UserSettingsItem` |
| 12 | + * and controls the visibility of the back button. |
| 13 | + * @default false |
| 14 | + */ |
| 15 | + secondary?: boolean; |
| 16 | + |
| 17 | + /** |
| 18 | + * Defines whether the view is selected. There can be just one selected view at a time. |
| 19 | + * @default false |
| 20 | + */ |
| 21 | + selected?: boolean; |
| 22 | + |
| 23 | + /** |
| 24 | + * Defines the title text of the user settings view. |
| 25 | + * @default undefined |
| 26 | + */ |
| 27 | + text?: string | undefined; |
| 28 | +} |
| 29 | + |
| 30 | +interface UserSettingsAppearanceViewDomRef extends Required<UserSettingsAppearanceViewAttributes>, Ui5DomRef {} |
| 31 | + |
| 32 | +interface UserSettingsAppearanceViewPropTypes |
| 33 | + extends |
| 34 | + UserSettingsAppearanceViewAttributes, |
| 35 | + Omit< |
| 36 | + CommonProps, |
| 37 | + keyof UserSettingsAppearanceViewAttributes | 'additionalContent' | 'children' | 'onSelectionChange' |
| 38 | + > { |
| 39 | + /** |
| 40 | + * Defines additional content displayed below the items list. |
| 41 | + * |
| 42 | + * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="additionalContent"`). |
| 43 | + * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. |
| 44 | + * |
| 45 | + * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. |
| 46 | + * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). |
| 47 | + * |
| 48 | + * __Supported Node Type/s:__ `Array<HTMLElement> | undefined` |
| 49 | + */ |
| 50 | + additionalContent?: UI5WCSlotsNode; |
| 51 | + |
| 52 | + /** |
| 53 | + * Defines the items of the component. |
| 54 | + * |
| 55 | + * __Supported Node Type/s:__ `Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>` |
| 56 | + */ |
| 57 | + children?: ReactNode | ReactNode[]; |
| 58 | + /** |
| 59 | + * Fired when an item is selected. |
| 60 | + * |
| 61 | + * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s. |
| 62 | + * |
| 63 | + * | cancelable | bubbles | |
| 64 | + * | :--------: | :-----: | |
| 65 | + * | ✅|❌| |
| 66 | + */ |
| 67 | + onSelectionChange?: ( |
| 68 | + event: Ui5CustomEvent<UserSettingsAppearanceViewDomRef, UserSettingsAppearanceViewItemSelectEventDetail>, |
| 69 | + ) => void; |
| 70 | +} |
| 71 | + |
| 72 | +/** |
| 73 | + * The `UserSettingsAppearanceView` represents a view displayed in the `UserSettingsItem`. |
| 74 | + * |
| 75 | + * |
| 76 | + * |
| 77 | + * __Note:__ This is a UI5 Web Component! [UserSettingsAppearanceView UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/UserSettingsAppearanceView) | [Repository](https://github.com/UI5/webcomponents) |
| 78 | + * |
| 79 | + * @since [2.17.0](https://github.com/UI5/webcomponents/releases/tag/v2.17.0) of __@ui5/webcomponents-fiori__. |
| 80 | + * @experimental |
| 81 | + */ |
| 82 | +const UserSettingsAppearanceView = withWebComponent< |
| 83 | + UserSettingsAppearanceViewPropTypes, |
| 84 | + UserSettingsAppearanceViewDomRef |
| 85 | +>( |
| 86 | + 'ui5-user-settings-appearance-view', |
| 87 | + ['text'], |
| 88 | + ['secondary', 'selected'], |
| 89 | + ['additionalContent'], |
| 90 | + ['selection-change'], |
| 91 | +); |
| 92 | + |
| 93 | +UserSettingsAppearanceView.displayName = 'UserSettingsAppearanceView'; |
| 94 | + |
| 95 | +export { UserSettingsAppearanceView }; |
| 96 | +export type { UserSettingsAppearanceViewDomRef, UserSettingsAppearanceViewPropTypes }; |
0 commit comments