diff --git a/src/components/more/MoreMenu.tsx b/src/components/more/MoreMenu.tsx
index 81f8b8dc..968c26d3 100644
--- a/src/components/more/MoreMenu.tsx
+++ b/src/components/more/MoreMenu.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode, useCallback, useState } from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { clsx } from 'clsx/lite';
import { FiMoreHorizontal } from 'react-icons/fi';
@@ -6,38 +6,50 @@ import MoreMenuItem from './MoreMenuItem';
export default function MoreMenu({
items,
+ icon,
+ header,
className,
buttonClassName,
ariaLabel,
+ align = 'end',
+ ...props
}: {
items: ComponentProps
[]
+ icon?: ReactNode
+ header?: ReactNode
className?: string
buttonClassName?: string
ariaLabel: string
-}){
+} & ComponentProps){
+ const [isOpen, setIsOpen] = useState(false);
+
+ const dismissMenu = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
+
return (
-
+
+ {header &&
+ {header}
+
}
{items.map(props =>
- ,
+ ,
)}
diff --git a/src/components/more/MoreMenuItem.tsx b/src/components/more/MoreMenuItem.tsx
index cc2c904d..122549f9 100644
--- a/src/components/more/MoreMenuItem.tsx
+++ b/src/components/more/MoreMenuItem.tsx
@@ -2,7 +2,7 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { clsx } from 'clsx/lite';
-import { ReactNode, useState, useTransition } from 'react';
+import { ReactNode, useEffect, useState, useTransition } from 'react';
import LoaderButton from '../primitives/LoaderButton';
import { usePathname, useRouter } from 'next/navigation';
import { downloadFileFromBrowser } from '@/utility/url';
@@ -14,6 +14,7 @@ export default function MoreMenuItem({
hrefDownloadName,
className,
action,
+ dismissMenu,
shouldPreventDefault = true,
}: {
label: ReactNode
@@ -22,6 +23,7 @@ export default function MoreMenuItem({
hrefDownloadName?: string
className?: string
action?: () => Promise | void
+ dismissMenu?: () => void
shouldPreventDefault?: boolean
}) {
const router = useRouter();
@@ -30,8 +32,17 @@ export default function MoreMenuItem({
const [isPending, startTransition] = useTransition();
+ const [transitionDidStart, setTransitionDidStart] = useState(false);
+
const [isLoading, setIsLoading] = useState(false);
+ useEffect(() => {
+ if (transitionDidStart && !isPending) {
+ dismissMenu?.();
+ setTransitionDidStart(false);
+ }
+ }, [isPending, dismissMenu, transitionDidStart]);
+
return (
{
+ onSelect={async e => {
if (shouldPreventDefault) { e.preventDefault(); }
if (action) {
const result = action();
if (result instanceof Promise) {
setIsLoading(true);
- await result.finally(() => setIsLoading(false));
+ await result.finally(() => {
+ setIsLoading(false);
+ dismissMenu?.();
+ });
}
}
if (href && href !== pathname) {
if (hrefDownloadName) {
setIsLoading(true);
downloadFileFromBrowser(href, hrefDownloadName)
- .finally(() => setIsLoading(false));
+ .finally(() => {
+ setIsLoading(false);
+ dismissMenu?.();
+ });
} else {
+ setTransitionDidStart(true);
startTransition(() => router.push(href));
}
}