refactor: replace whole implementation with a state

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

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,13 +346,13 @@ 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)}
>
<PopoverClose
className={cn('flex w-full px-1 py-2', {
'text-muted-foreground': recipient.sendStatus === SendStatus.SENT, 'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
})} })}
onSelect={() => {
setSelectedSigner(recipient);
setShowRecipientsSelector(false);
}}
> >
{recipient.sendStatus !== SendStatus.SENT ? ( {recipient.sendStatus !== SendStatus.SENT ? (
<Check <Check
@ -392,7 +388,6 @@ export const AddFieldsFormPartial = ({
{recipient.email} {recipient.email}
</span> </span>
)} )}
</PopoverClose>
</CommandItem> </CommandItem>
))} ))}
</CommandGroup> </CommandGroup>

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