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:
Paweł Chyła 2023-06-14 14:30:21 +02:00 committed by GitHub
parent 3754de6196
commit 549fc57884
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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"
> >