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

feat: wip

Browse Source
This commit is contained in:
David Nguyen
2023-12-27 17:32:56 +11:00
parent ca703fc221
commit 917a1271bf
8 changed files with 170 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
packages/ui/primitives/combobox.tsx
View File

@ -84,57 +84,64 @@ export function Combobox<T = OptionValue>({
return selectedOptions.map((option) => option.label).join(', ');
}, [selectedOptions, emptySelectionPlaceholder, loading]);
const showClearButton = enableClearAllButton && selectedValues.length > 0;
return (
<Popover open={open && !loading} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
disabled={loading}
aria-expanded={open}
className="relative w-[200px] px-3"
>
<AnimatePresence>
{loading ? (
<div className="absolute inset-0 flex items-center justify-center">
<Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
</div>
) : (
<motion.div
className="flex w-full justify-between"
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
>
<span className="truncate">{buttonLabel}</span>
<div className="ml-2 flex flex-row items-center">
{enableClearAllButton && selectedValues.length > 0 && (
// Todo: Teams - Can't have nested buttons.
<button
className="mr-1 flex h-4 w-4 items-center justify-center rounded-full bg-gray-300"
onClick={(e) => {
e.preventDefault();
onChange([]);
}}
>
<XIcon className="text-muted-foreground h-3.5 w-3.5" />
</button>
)}
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
<div className="relative">
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
disabled={loading}
aria-expanded={open}
className="relative w-[200px] px-3"
>
<AnimatePresence>
{loading ? (
<div className="absolute inset-0 flex items-center justify-center">
<Loader className="h-5 w-5 animate-spin text-gray-500 dark:text-gray-100" />
</div>
</motion.div>
)}
</AnimatePresence>
</Button>
</PopoverTrigger>
) : (
<motion.div
className="flex w-full justify-between"
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
exit={{
opacity: 0,
}}
>
<span className="truncate">{buttonLabel}</span>
<div
className={cn('ml-2 flex flex-row items-center', {
'ml-6': showClearButton,
})}
>
<ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
</div>
</motion.div>
)}
</AnimatePresence>
</Button>
</PopoverTrigger>
{/* This is placed outside the trigger since we can't have nested buttons. */}
{showClearButton && (
<div className="absolute bottom-0 right-8 top-0 flex items-center justify-center">
<button
className="flex h-4 w-4 items-center justify-center rounded-full bg-gray-300"
onClick={() => onChange([])}
>
<XIcon className="text-muted-foreground h-3.5 w-3.5" />
</button>
</div>
)}
</div>
<PopoverContent className="w-[200px] p-0">
<Command>