99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from '@/components/ui/dropdown-menu';
|
||
|
|
import { IconButton } from '@/components/ui/button';
|
||
|
|
import { Separator } from '@/components/ui/separator';
|
||
|
|
import {
|
||
|
|
AlertDialog,
|
||
|
|
AlertDialogAction,
|
||
|
|
AlertDialogCancel,
|
||
|
|
AlertDialogContent,
|
||
|
|
AlertDialogDescription,
|
||
|
|
AlertDialogFooter,
|
||
|
|
AlertDialogHeader,
|
||
|
|
AlertDialogTitle,
|
||
|
|
} from '@/components/ui/alert-dialog';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { useStreamChatStore } from '@/stores/stream-chat';
|
||
|
|
import { useAsyncFn } from '@/hooks/tools';
|
||
|
|
|
||
|
|
interface ChatSidebarActionProps {
|
||
|
|
onSearchClick?: () => void;
|
||
|
|
onCancelSearch?: () => void;
|
||
|
|
isSearchActive?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ChatSidebarAction = ({
|
||
|
|
onSearchClick,
|
||
|
|
onCancelSearch,
|
||
|
|
isSearchActive = false,
|
||
|
|
}: ChatSidebarActionProps) => {
|
||
|
|
const clearNotifications = useStreamChatStore((state) => state.clearNotifications);
|
||
|
|
const clearChannels = useStreamChatStore((state) => state.clearChannels);
|
||
|
|
const [isDeleteMessageDialogOpen, setIsDeleteMessageDialogOpen] = useState(false);
|
||
|
|
const router = useRouter();
|
||
|
|
|
||
|
|
const { run: handleClearChannels, loading } = useAsyncFn(async () => {
|
||
|
|
await clearChannels();
|
||
|
|
setIsDeleteMessageDialogOpen(false);
|
||
|
|
router.replace('/');
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger asChild>
|
||
|
|
<IconButton size="small" variant="ghost">
|
||
|
|
<i className="iconfont icon-More" />
|
||
|
|
</IconButton>
|
||
|
|
</DropdownMenuTrigger>
|
||
|
|
<DropdownMenuContent className="w-56" align="end">
|
||
|
|
<DropdownMenuItem onClick={clearNotifications}>
|
||
|
|
<i className="iconfont icon-clear" />
|
||
|
|
<span>Mark All</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
<DropdownMenuItem onClick={isSearchActive ? onCancelSearch : onSearchClick}>
|
||
|
|
<i className={`iconfont icon-Search`} />
|
||
|
|
<span>{isSearchActive ? 'Cancel' : 'Search'}</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
<div className="my-3 px-2">
|
||
|
|
<Separator className="bg-outline-normal" />
|
||
|
|
</div>
|
||
|
|
<DropdownMenuItem onClick={() => setIsDeleteMessageDialogOpen(true)}>
|
||
|
|
<i className="iconfont icon-trashcan" />
|
||
|
|
<span>Clear Chat List</span>
|
||
|
|
</DropdownMenuItem>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
|
||
|
|
{/* 删除全部 确认modal */}
|
||
|
|
<AlertDialog open={isDeleteMessageDialogOpen} onOpenChange={setIsDeleteMessageDialogOpen}>
|
||
|
|
<AlertDialogContent>
|
||
|
|
<AlertDialogHeader>
|
||
|
|
<AlertDialogTitle>Clear Chat List</AlertDialogTitle>
|
||
|
|
</AlertDialogHeader>
|
||
|
|
<AlertDialogDescription>
|
||
|
|
This will clear your chat list. Your individual messages will remain intact.
|
||
|
|
</AlertDialogDescription>
|
||
|
|
<AlertDialogFooter>
|
||
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||
|
|
<AlertDialogAction
|
||
|
|
variant="destructive"
|
||
|
|
loading={loading}
|
||
|
|
onClick={handleClearChannels}
|
||
|
|
>
|
||
|
|
Clear
|
||
|
|
</AlertDialogAction>
|
||
|
|
</AlertDialogFooter>
|
||
|
|
</AlertDialogContent>
|
||
|
|
</AlertDialog>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ChatSidebarAction;
|