mirror of
https://github.com/documenso/documenso.git
synced 2025-11-10 20:42:34 +10:00
fix: hide popover when user selects a recipients
This commit is contained in:
committed by
Mythie
parent
661dfe8368
commit
cb5df80a26
@ -22,7 +22,12 @@ import {
|
|||||||
CommandInput,
|
CommandInput,
|
||||||
CommandItem,
|
CommandItem,
|
||||||
} from '@documenso/ui/primitives/command';
|
} from '@documenso/ui/primitives/command';
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverClose,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@documenso/ui/primitives/popover';
|
||||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
|
||||||
|
|
||||||
import { TAddFieldsFormSchema } from './add-fields.types';
|
import { TAddFieldsFormSchema } from './add-fields.types';
|
||||||
@ -324,7 +329,7 @@ export const AddFieldsFormPartial = ({
|
|||||||
>
|
>
|
||||||
{selectedSigner?.email && (
|
{selectedSigner?.email && (
|
||||||
<span className="flex-1 truncate text-left">
|
<span className="flex-1 truncate text-left">
|
||||||
{selectedSigner?.email} ({selectedSigner?.email})
|
{selectedSigner?.name} ({selectedSigner?.email})
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@ -345,45 +350,49 @@ export const AddFieldsFormPartial = ({
|
|||||||
{recipients.map((recipient, index) => (
|
{recipients.map((recipient, index) => (
|
||||||
<CommandItem
|
<CommandItem
|
||||||
key={index}
|
key={index}
|
||||||
className={cn({
|
className="p-0"
|
||||||
'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
|
|
||||||
})}
|
|
||||||
onSelect={() => setSelectedSigner(recipient)}
|
onSelect={() => setSelectedSigner(recipient)}
|
||||||
>
|
>
|
||||||
{recipient.sendStatus !== SendStatus.SENT ? (
|
<PopoverClose
|
||||||
<Check
|
className={cn('flex w-full px-1 py-2', {
|
||||||
aria-hidden={recipient !== selectedSigner}
|
'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
|
||||||
className={cn('mr-2 h-4 w-4 flex-shrink-0', {
|
})}
|
||||||
'opacity-0': recipient !== selectedSigner,
|
>
|
||||||
'opacity-100': recipient === selectedSigner,
|
{recipient.sendStatus !== SendStatus.SENT ? (
|
||||||
})}
|
<Check
|
||||||
/>
|
aria-hidden={recipient !== selectedSigner}
|
||||||
) : (
|
className={cn('mr-2 h-4 w-4 flex-shrink-0', {
|
||||||
<Tooltip>
|
'opacity-0': recipient !== selectedSigner,
|
||||||
<TooltipTrigger>
|
'opacity-100': recipient === selectedSigner,
|
||||||
<Info className="mr-2 h-4 w-4" />
|
})}
|
||||||
</TooltipTrigger>
|
/>
|
||||||
<TooltipContent className="max-w-xs">
|
) : (
|
||||||
This document has already been sent to this recipient. You can no
|
<Tooltip>
|
||||||
longer edit this recipient.
|
<TooltipTrigger>
|
||||||
</TooltipContent>
|
<Info className="mr-2 h-4 w-4" />
|
||||||
</Tooltip>
|
</TooltipTrigger>
|
||||||
)}
|
<TooltipContent className="max-w-xs">
|
||||||
|
This document has already been sent to this recipient. You can no
|
||||||
|
longer edit this recipient.
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
|
||||||
{recipient.name && (
|
{recipient.name && (
|
||||||
<span
|
<span
|
||||||
className="truncate"
|
className="truncate"
|
||||||
title={`${recipient.name} (${recipient.email})`}
|
title={`${recipient.name} (${recipient.email})`}
|
||||||
>
|
>
|
||||||
{recipient.name} ({recipient.email})
|
{recipient.name} ({recipient.email})
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!recipient.name && (
|
{!recipient.name && (
|
||||||
<span className="truncate" title={recipient.email}>
|
<span className="truncate" title={recipient.email}>
|
||||||
{recipient.email}
|
{recipient.email}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
</PopoverClose>
|
||||||
</CommandItem>
|
</CommandItem>
|
||||||
))}
|
))}
|
||||||
</CommandGroup>
|
</CommandGroup>
|
||||||
|
|||||||
@ -10,6 +10,8 @@ const Popover = PopoverPrimitive.Root;
|
|||||||
|
|
||||||
const PopoverTrigger = PopoverPrimitive.Trigger;
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
||||||
|
|
||||||
|
const PopoverClose = PopoverPrimitive.Close;
|
||||||
|
|
||||||
const PopoverContent = React.forwardRef<
|
const PopoverContent = React.forwardRef<
|
||||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||||
@ -30,4 +32,4 @@ const PopoverContent = React.forwardRef<
|
|||||||
|
|
||||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
||||||
|
|
||||||
export { Popover, PopoverTrigger, PopoverContent };
|
export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
|
||||||
|
|||||||
Reference in New Issue
Block a user