Fix close menu panel when click on account settings (#3699)
* Fix close panel settings * Use controlled component * Hide menu o theme change * Fix trigger onOpenChange
This commit is contained in:
parent
3754de6196
commit
549fc57884
1 changed files with 14 additions and 3 deletions
|
@ -11,7 +11,7 @@ import {
|
||||||
sprinkles,
|
sprinkles,
|
||||||
Text,
|
Text,
|
||||||
} from "@saleor/macaw-ui/next";
|
} from "@saleor/macaw-ui/next";
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
@ -48,15 +48,22 @@ export const useLegacyThemeHandler = () => {
|
||||||
export const UserControls = () => {
|
export const UserControls = () => {
|
||||||
const { user, logout } = useUser();
|
const { user, logout } = useUser();
|
||||||
const { changeTheme, theme } = useLegacyThemeHandler();
|
const { changeTheme, theme } = useLegacyThemeHandler();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dropdown>
|
<Dropdown
|
||||||
|
open={open}
|
||||||
|
onOpenChange={value => {
|
||||||
|
setOpen(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Dropdown.Trigger>
|
<Dropdown.Trigger>
|
||||||
<Button
|
<Button
|
||||||
variant="tertiary"
|
variant="tertiary"
|
||||||
icon={<MoreOptionsIcon />}
|
icon={<MoreOptionsIcon />}
|
||||||
data-test-id="userMenu"
|
data-test-id="userMenu"
|
||||||
size="medium"
|
size="medium"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
/>
|
/>
|
||||||
</Dropdown.Trigger>
|
</Dropdown.Trigger>
|
||||||
<Dropdown.Content align="end">
|
<Dropdown.Content align="end">
|
||||||
|
@ -71,6 +78,7 @@ export const UserControls = () => {
|
||||||
<List.Item
|
<List.Item
|
||||||
borderRadius={4}
|
borderRadius={4}
|
||||||
data-test-id="account-settings-button"
|
data-test-id="account-settings-button"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
to={staffMemberDetailsUrl(user?.id)}
|
to={staffMemberDetailsUrl(user?.id)}
|
||||||
|
@ -110,7 +118,10 @@ export const UserControls = () => {
|
||||||
alignItems="center"
|
alignItems="center"
|
||||||
gap={2}
|
gap={2}
|
||||||
marginTop={1}
|
marginTop={1}
|
||||||
onClick={changeTheme}
|
onClick={() => {
|
||||||
|
changeTheme();
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
{...listItemStyles}
|
{...listItemStyles}
|
||||||
data-test-id="theme-switch"
|
data-test-id="theme-switch"
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue