Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 16:51:38 +10:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace whole implementation with a state

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-09-09 10:56:45 +00:00
committed by Mythie
parent cb5df80a26
commit 1a48d194f7
2 changed files with 43 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -22,12 +22,7 @@ import {
CommandInput, CommandInput,
CommandItem, CommandItem,
} from '@documenso/ui/primitives/command'; } from '@documenso/ui/primitives/command';
import { import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
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';
@ -107,6 +102,7 @@ export const AddFieldsFormPartial = ({
const [selectedField, setSelectedField] = useState<FieldType | null>(null); const [selectedField, setSelectedField] = useState<FieldType | null>(null);
const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null); const [selectedSigner, setSelectedSigner] = useState<Recipient | null>(null);
const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT; const hasSelectedSignerBeenSent = selectedSigner?.sendStatus === SendStatus.SENT;
@ -319,7 +315,7 @@ export const AddFieldsFormPartial = ({
))} ))}
{!hideRecipients && ( {!hideRecipients && (
<Popover> <Popover open={showRecipientsSelector} onOpenChange={setShowRecipientsSelector}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button <Button
type="button" type="button"
@ -350,49 +346,48 @@ export const AddFieldsFormPartial = ({
{recipients.map((recipient, index) => ( {recipients.map((recipient, index) => (
<CommandItem <CommandItem
key={index} key={index}
className="p-0" className={cn({
onSelect={() => setSelectedSigner(recipient)} 'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
})}
onSelect={() => {
setSelectedSigner(recipient);
setShowRecipientsSelector(false);
}}
> >
<PopoverClose {recipient.sendStatus !== SendStatus.SENT ? (
className={cn('flex w-full px-1 py-2', { <Check
'text-muted-foreground': recipient.sendStatus === SendStatus.SENT, aria-hidden={recipient !== selectedSigner}
})} className={cn('mr-2 h-4 w-4 flex-shrink-0', {
> 'opacity-0': recipient !== selectedSigner,
{recipient.sendStatus !== SendStatus.SENT ? ( 'opacity-100': recipient === selectedSigner,
<Check })}
aria-hidden={recipient !== selectedSigner} />
className={cn('mr-2 h-4 w-4 flex-shrink-0', { ) : (
'opacity-0': recipient !== selectedSigner, <Tooltip>
'opacity-100': recipient === selectedSigner, <TooltipTrigger>
})} <Info className="mr-2 h-4 w-4" />
/> </TooltipTrigger>
) : ( <TooltipContent className="max-w-xs">
<Tooltip> This document has already been sent to this recipient. You can no
<TooltipTrigger> longer edit this recipient.
<Info className="mr-2 h-4 w-4" /> </TooltipContent>
</TooltipTrigger> </Tooltip>
<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>

4
packages/ui/primitives/popover.tsx
View File

@ -10,8 +10,6 @@ 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>
@ -32,4 +30,4 @@ const PopoverContent = React.forwardRef<
PopoverContent.displayName = PopoverPrimitive.Content.displayName; PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { Popover, PopoverTrigger, PopoverContent, PopoverClose }; export { Popover, PopoverTrigger, PopoverContent };