Skip to content

Commit 7181051

Browse files
SvilenDarvenyashkiSvilenDarvenyashki
committed
chore(ui5-user-menu): Improve samples
- add an example with show-selection property - add missing 'message-information' icon - close Popover on Avatar click - fix position of Popover in UserMenu React sample
1 parent 46007ca commit 7181051

9 files changed

Lines changed: 55 additions & 25 deletions

File tree

‎packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import "@ui5/webcomponents-fiori/dist/UserMenu.js";
22
import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
33
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
4-
4+
import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
55
import "@ui5/webcomponents/dist/Avatar.js";
66
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
77
import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
@@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
1212
import "@ui5/webcomponents-icons/dist/official-service.js";
1313
import "@ui5/webcomponents-icons/dist/private.js";
1414
import "@ui5/webcomponents-icons/dist/accelerated.js";
15+
import "@ui5/webcomponents-icons/dist/message-information.js";
1516

1617
const shellbar = document.getElementById("shellbar");
1718
const menu = document.getElementById("userMenu");
@@ -20,7 +21,7 @@ const menu = document.getElementById("userMenu");
2021

2122
shellbar.addEventListener("ui5-profile-click", (event) => {
2223
menu.opener = event.detail.targetRef;
23-
menu.open = true;
24+
menu.open = !menu.open;
2425
});
2526

2627
menu.addEventListener("item-click", function (event) {

‎packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<style>
1717
body {
18-
height: 600px;
18+
height: 610px;
1919
}
2020
</style>
2121
</head>
@@ -59,6 +59,12 @@
5959
</ui5-user-menu-item>
6060
<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
6161
<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
62+
<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
63+
<ui5-user-menu-item-group check-mode="Single">
64+
<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
65+
<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
66+
</ui5-user-menu-item-group>
67+
</ui5-user-menu-item>
6268
</ui5-user-menu>
6369

6470
<!-- playground-fold -->

‎packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
22
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
3-
import { useState, useRef, useCallback } from "react";
3+
import { useRef, useCallback } from "react";
44
import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
55
import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
66
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
77
import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
88
import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
9+
import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
910
import AvatarClass from "@ui5/webcomponents/dist/Avatar.js";
1011
import "@ui5/webcomponents-icons/dist/action-settings.js";
1112
import "@ui5/webcomponents-icons/dist/globe.js";
@@ -19,16 +20,19 @@ const ShellBarBranding = createReactComponent(ShellBarBrandingClass);
1920
const UserMenu = createReactComponent(UserMenuClass);
2021
const UserMenuAccount = createReactComponent(UserMenuAccountClass);
2122
const UserMenuItem = createReactComponent(UserMenuItemClass);
23+
const UserMenuItemGroup = createReactComponent(UserMenuItemGroupClass);
2224
const Avatar = createReactComponent(AvatarClass);
2325

2426
function App() {
25-
const [menuOpen, setMenuOpen] = useState(false);
26-
const openerRef = useRef(null);
27+
const userMenuRef = useRef<UserMenuClass | null>(null);
2728

2829
const handleProfileClick = useCallback(
2930
(e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
30-
openerRef.current = e.detail.targetRef;
31-
setMenuOpen(true);
31+
const menu = userMenuRef.current;
32+
if (menu) {
33+
menu.opener = e.detail.targetRef;
34+
menu.open = !menu.open;
35+
}
3236
},
3337
[],
3438
);
@@ -86,7 +90,10 @@ function App() {
8690
console.log("Sign Out clicked");
8791
const result = prompt("Sign Out", "Are you sure you want to sign out?");
8892
if (result) {
89-
setMenuOpen(false);
93+
const menu = userMenuRef.current;
94+
if (menu) {
95+
menu.open = false;
96+
}
9097
}
9198
e.preventDefault();
9299
}, []);
@@ -103,8 +110,7 @@ function App() {
103110
</Avatar>
104111
</ShellBar>
105112
<UserMenu
106-
open={menuOpen}
107-
opener={openerRef.current}
113+
ref={userMenuRef}
108114
showManageAccount={true}
109115
showOtherAccounts={true}
110116
showEditAccounts={true}
@@ -115,7 +121,6 @@ function App() {
115121
onEditAccountsClick={handleEditAccountsClick}
116122
onChangeAccount={handleChangeAccount}
117123
onSignOutClick={handleSignOutClick}
118-
onClose={() => setMenuOpen(false)}
119124
>
120125
<UserMenuAccount
121126
slot="accounts"
@@ -150,6 +155,12 @@ function App() {
150155
</UserMenuItem>
151156
<UserMenuItem icon="official-service" text="Legal Information" />
152157
<UserMenuItem icon="message-information" text="About" data-id="about" />
158+
<UserMenuItem icon="globe" text="Language" data-id="single-select" showSelection={true}>
159+
<UserMenuItemGroup checkMode="Single">
160+
<UserMenuItem text="English" data-id="single-select-item1" checked={true} />
161+
<UserMenuItem text="Deutsch" data-id="single-select-item2" />
162+
</UserMenuItemGroup>
163+
</UserMenuItem>
153164
</UserMenu>
154165
</>
155166
);

‎packages/website/docs/_samples/fiori/UserMenu/Basic/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
1111
import "@ui5/webcomponents-icons/dist/official-service.js";
1212
import "@ui5/webcomponents-icons/dist/private.js";
1313
import "@ui5/webcomponents-icons/dist/accelerated.js";
14+
import "@ui5/webcomponents-icons/dist/message-information.js";
1415

1516
const shellbar = document.getElementById("shellbar");
1617
const menu = document.getElementById("userMenu");
1718

1819
shellbar.addEventListener("ui5-profile-click", (event) => {
1920
menu.opener = event.detail.targetRef;
20-
menu.open = true;
21+
menu.open = !menu.open;
2122
});
2223

2324
menu.addEventListener("item-click", function (event) {

‎packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<style>
1717
body {
18-
height: 600px;
18+
height: 610px;
1919
}
2020
</style>
2121
</head>
@@ -31,7 +31,7 @@
3131
<img src="../assets/images/avatars/man_avatar_3.png"/>
3232
</ui5-avatar>
3333
</ui5-shellbar>
34-
<ui5-user-menu id="userMenu" opener="btnOpenUserMenu">
34+
<ui5-user-menu id="userMenu">
3535
<ui5-user-menu-account slot="accounts"
3636
avatar-src="../assets/images/avatars/man_avatar_3.png"
3737
title-text="Alaina Chevalier"

‎packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
22
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
3-
import { useState, useRef, useCallback } from "react";
3+
import { useRef, useCallback } from "react";
44
import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
55
import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
66
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
@@ -22,13 +22,15 @@ const UserMenuItem = createReactComponent(UserMenuItemClass);
2222
const Avatar = createReactComponent(AvatarClass);
2323

2424
function App() {
25-
const [menuOpen, setMenuOpen] = useState(false);
26-
const openerRef = useRef(null);
25+
const userMenuRef = useRef<UserMenuClass | null>(null);
2726

2827
const handleProfileClick = useCallback(
2928
(e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
30-
openerRef.current = e.detail.targetRef;
31-
setMenuOpen(true);
29+
const menu = userMenuRef.current;
30+
if (menu) {
31+
menu.opener = e.detail.targetRef;
32+
menu.open = !menu.open;
33+
}
3234
},
3335
[],
3436
);
@@ -67,7 +69,10 @@ function App() {
6769
console.log("Sign Out clicked");
6870
const result = prompt("Sign Out", "Are you sure you want to sign out?");
6971
if (result) {
70-
setMenuOpen(false);
72+
const menu = userMenuRef.current;
73+
if (menu) {
74+
menu.open = false;
75+
}
7176
}
7277
e.preventDefault();
7378
}, []);
@@ -84,12 +89,10 @@ function App() {
8489
</Avatar>
8590
</ShellBar>
8691
<UserMenu
87-
open={menuOpen}
88-
opener={openerRef.current}
92+
ref={userMenuRef}
8993
onItemClick={handleItemClick}
9094
onAvatarClick={handleAvatarClick}
9195
onSignOutClick={handleSignOutClick}
92-
onClose={() => setMenuOpen(false)}
9396
>
9497
<UserMenuAccount
9598
slot="accounts"

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoNotifications.js";
4646
import "@ui5/webcomponents-fiori/dist/UserMenu.js";
4747
import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
4848
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
49+
import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
4950

5051
import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";
5152
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";

‎packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,12 @@
7878
<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
7979
</ui5-user-menu-item>
8080
<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
81+
<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
82+
<ui5-user-menu-item-group check-mode="Single">
83+
<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
84+
<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
85+
</ui5-user-menu-item-group>
86+
</ui5-user-menu-item>
8187
</ui5-user-menu>
8288

8389
<ui5-side-navigation id="side-navigation" class="sideNavigation" slot="sideContent" accessible-name="Main">

‎packages/website/src/components/Editor/ReactPlayground.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ import SearchItemClass from "@ui5/webcomponents-fiori/dist/SearchItem.js";
230230
import SearchMessageAreaClass from "@ui5/webcomponents-fiori/dist/SearchMessageArea.js";
231231
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
232232
import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
233+
import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
233234
import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
234235
import BarcodeScannerDialogClass from "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";
235236
import NavigationLayoutClass from "@ui5/webcomponents-fiori/dist/NavigationLayout.js";
@@ -324,7 +325,7 @@ const ComponentClasses: Record<string, any> = {
324325
FlexibleColumnLayoutClass, MediaGalleryClass, MediaGalleryItemClass, ProductSwitchClass,
325326
ProductSwitchItemClass, ViewSettingsDialogClass, ViewSettingsDialogCustomTabClass, SortItemClass, FilterItemClass, FilterItemOptionClass,
326327
SearchClass, SearchItemClass, SearchMessageAreaClass, UserMenuClass, UserMenuItemClass,
327-
UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
328+
UserMenuItemGroupClass, UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
328329
SearchItemGroupClass, SearchItemShowMoreClass, SearchScopeClass, ShellBarBrandingClass,
329330
ShellBarSearchClass, ShellBarSpacerClass, UserSettingsDialogClass, UserSettingsItemClass,
330331
UserSettingsViewClass, UserSettingsAccountViewClass, UserSettingsAppearanceViewClass,

0 commit comments

Comments
 (0)