Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added display names

This commit is contained in:
Nate Kelley 2025-02-24 14:21:45 -07:00
parent a61a63aa01
commit cb76a6e74a
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
2 changed files with 89 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
web/src/components/ui/buttons/ButtonDropdown.tsx
View File

@ -65,78 +65,100 @@ export const ButtonDropdown = React.forwardRef<HTMLDivElement, ButtonDropdownPro
); );
} }
); );
ButtonDropdown.displayName = 'ButtonDropdown';
export const ButtonSplit = React.forwardRef< export const ButtonSplit = React.memo(
HTMLDivElement, React.forwardRef<
Omit<ButtonDropdownProps, 'dropdownProps'> & { HTMLDivElement,
open: boolean; Omit<ButtonDropdownProps, 'dropdownProps'> & {
onOpenChange: (open: boolean) => void; open: boolean;
} onOpenChange: (open: boolean) => void;
>( }
( >(
{ (
className, {
buttonType = 'default', className,
size = 'default', buttonType = 'default',
icon, size = 'default',
buttonText, icon,
disabled = false, buttonText,
rounding = 'default', disabled = false,
loading = false, rounding = 'default',
iconClassName, loading = false,
open, iconClassName,
onOpenChange open,
}, onOpenChange
ref },
) => { ref
const handleClick = useMemoizedFn(() => { ) => {
if (disabled) return; const handleClick = useMemoizedFn(() => {
onOpenChange(!open); if (disabled) return;
}); onOpenChange(!open);
});
return ( return (
<div
ref={ref}
className={cn(
buttonVariants({ buttonType, size, rounding: 'none' }),
dropdownButtonVariants({ rounding }),
'gap-0 !bg-transparent p-0',
disabled && 'cursor-not-allowed opacity-60',
className
)}>
<div <div
ref={ref}
className={cn( className={cn(
primaryButtonVariants({ buttonType }), buttonVariants({ buttonType, size, rounding: 'none' }),
'flex h-full items-center gap-0.5 border-none pr-2 pl-2.5' dropdownButtonVariants({ rounding }),
'gap-0 !bg-transparent p-0',
disabled && 'cursor-not-allowed opacity-70',
className
)}> )}>
{loading ? (
<LoadingIcon buttonType={buttonType} size={size} />
) : (
icon && (
<span
className={cn(buttonIconVariants({ buttonType, size }), 'text-sm', iconClassName)}>
{icon}
</span>
)
)}
{buttonText && <span className="">{buttonText}</span>}
</div>
<div className="bg-border mr-0 h-full w-[0.5px]" />
<div className="flex h-full items-center justify-center text-sm" onClick={handleClick}>
<div <div
className={cn(splitButtonVariants({ buttonType }), 'border-none')} className={cn(
aria-label="Open dropdown menu"> primaryButtonVariants({ buttonType }),
<span 'flex h-full items-center gap-0.5 border-none pr-2 pl-2.5'
className={cn( )}>
'transition-transform duration-100', {loading ? (
disabled && 'cursor-not-allowed opacity-90', <LoadingIcon buttonType={buttonType} size={size} />
open && 'rotate-180' ) : (
)}> icon && (
<ChevronDown /> <span
</span> className={cn(
buttonIconVariants({ buttonType, size }),
'text-sm',
iconClassName
)}>
{icon}
</span>
)
)}
{buttonText && <span className="">{buttonText}</span>}
</div>
<div className="bg-border mr-0 h-full w-[0.5px]" />
<div className="flex h-full items-center justify-center text-sm" onClick={handleClick}>
<div
className={cn(splitButtonVariants({ buttonType }), 'border-none')}
aria-label="Open dropdown menu">
<span
className={cn(
'transition-transform duration-100',
disabled && 'cursor-not-allowed opacity-90',
open && 'rotate-180'
)}>
<ChevronDown />
</span>
</div>
</div> </div>
</div> </div>
</div> );
}
),
(prevProps, nextProps) => {
return (
prevProps.className === nextProps.className &&
prevProps.buttonType === nextProps.buttonType &&
prevProps.size === nextProps.size &&
prevProps.icon === nextProps.icon &&
prevProps.buttonText === nextProps.buttonText &&
prevProps.disabled === nextProps.disabled &&
prevProps.rounding === nextProps.rounding &&
prevProps.loading === nextProps.loading &&
prevProps.iconClassName === nextProps.iconClassName &&
prevProps.open === nextProps.open &&
prevProps.onOpenChange === nextProps.onOpenChange
); );
} }
); );

3
web/src/components/ui/dropdown/Dropdown.tsx
View File

@ -102,6 +102,8 @@ export const Dropdown: React.FC<DropdownProps> = React.memo(
} }
); );
Dropdown.displayName = 'Dropdown';
const DropdownItemSelector: React.FC<{ const DropdownItemSelector: React.FC<{
item: DropdownItem | DropdownDivider; item: DropdownItem | DropdownDivider;
index: number; index: number;
@ -216,3 +218,4 @@ const DropdownSubMenuWrapper = React.memo(
); );
} }
); );
DropdownSubMenuWrapper.displayName = 'DropdownSubMenuWrapper';