Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: duplicate modal instances from hotkey activation #1058

Merged
merged 10 commits into from
Apr 16, 2024
Merged

fix: duplicate modal instances from hotkey activation #1058

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e8eeabf
fix: duplicate modal rendering on hotkeys activation
deepgolani4 Mar 26, 2024
7e64bb2
Merge branch 'main' of https://github.com/deepgolani4/documenso into …
deepgolani4 Mar 26, 2024
82a7113
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Mar 27, 2024
f68439e
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Mar 28, 2024
0dc4a6d
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Mar 29, 2024
8c9ee66
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Mar 30, 2024
3266439
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Apr 1, 2024
8dc0761
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Apr 3, 2024
aaccf12
Merge branch 'main' into Bug-fix-command-menu-renders
deepgolani4 Apr 11, 2024
4263408
chore: refactor
dguyen Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions apps/web/src/components/(dashboard)/layout/desktop-nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,21 @@ const navigationLinks = [
},
];

export type DesktopNavProps = HTMLAttributes<HTMLDivElement>;
export type DesktopNavProps = HTMLAttributes<HTMLDivElement> & {
isCommandMenuOpen?: boolean;
setIsCommandMenuOpen?: (value: boolean) => void;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's fine to just force these to not be undefined since this component isn't reused (and isn't planned to be reused) anywhere else

This would let us clean up the code a little and remove the open state here and get rid of the CommandMenu

};

export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
export const DesktopNav = ({
className,
isCommandMenuOpen = false,
setIsCommandMenuOpen,
...props
}: DesktopNavProps) => {
const pathname = usePathname();
const params = useParams();

const [open, setOpen] = useState(false);
const [open, setOpen] = useState(isCommandMenuOpen);
const [modifierKey, setModifierKey] = useState(() => 'Ctrl');

const rootHref = getRootHref(params, { returnEmptyRootString: true });
Expand All @@ -43,6 +51,14 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
setModifierKey(isMacOS ? '⌘' : 'Ctrl');
}, []);

const toggleCommandMenu = (_newState: boolean) => {
if (typeof setIsCommandMenuOpen === 'function') {
setIsCommandMenuOpen(_newState);
} else {
setOpen(_newState);
}
};

return (
<div
className={cn(
Expand Down Expand Up @@ -70,12 +86,12 @@ export const DesktopNav = ({ className, ...props }: DesktopNavProps) => {
))}
</div>

<CommandMenu open={open} onOpenChange={setOpen} />
<CommandMenu open={open} onOpenChange={toggleCommandMenu} />

<Button
variant="outline"
className="text-muted-foreground flex w-96 items-center justify-between rounded-lg"
onClick={() => setOpen((open) => !open)}
onClick={() => toggleCommandMenu(true)}
>
<div className="flex items-center">
<Search className="mr-2 h-5 w-5" />
Expand Down
5 changes: 4 additions & 1 deletion apps/web/src/components/(dashboard)/layout/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,10 @@ export const Header = ({ className, user, teams, ...props }: HeaderProps) => {
<Logo className="h-6 w-auto" />
</Link>

<DesktopNav />
<DesktopNav
isCommandMenuOpen={isCommandMenuOpen}
setIsCommandMenuOpen={setIsCommandMenuOpen}
/>

<div className="flex gap-x-4 md:ml-8">
<MenuSwitcher user={user} teams={teams} />
Expand Down
Loading