fix: hide popover when user selects a recipients

This commit is contained in:
Ephraim Atta-Duncan
2023-09-09 10:42:03 +00:00
committed by Mythie
parent 661dfe8368
commit cb5df80a26
2 changed files with 49 additions and 38 deletions

View File

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

View File

@ -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 };