jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Changed strategy to not have to apply classes to different div elements, not breaking the other buttons.

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-04 10:49:36 -03:00
commit f1aaa162e2
1 changed files with 37 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/frontend/src/components/ui/button.tsx
View file

@ -4,11 +4,8 @@ import * as React from "react";
import { cn } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
const buttonChildrenClasses =
"inline-flex items-center justify-center text-sm font-medium";
const buttonVariants = cva(
"inline-flex items-center justify-center text-sm font-medium relative rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
{
variants: {
variant: {
@ -23,7 +20,6 @@ const buttonVariants = cva(
"border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "underline-offset-4 hover:underline text-primary",
none: "",
},
size: {
default: "h-10 py-2 px-4",
@ -31,7 +27,6 @@ const buttonVariants = cva(
xs: "py-0.5 px-3 rounded-md",
lg: "h-11 px-8 rounded-md",
icon: "py-1 px-1 rounded-md",
none: "",
},
},
defaultVariants: {
@ -65,34 +60,45 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
if (typeof children === "string") {
newChildren = toTitleCase(children);
}
const [width, setWidth] = React.useState<number | null>(null);
const hiddenRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (hiddenRef.current) {
setWidth(hiddenRef.current.offsetWidth);
}
}, [children, hiddenRef]);
return (
<Comp ref={ref} {...props}>
<div className={buttonVariants({ variant, size: "none" })}>
<div
className={cn(
loading ? "opacity-100" : "opacity-0",
"absolute self-center",
<>
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
>
<>
{loading ? (
<div style={{ width: loading && width ? `${width}px` : "auto" }}>
<ForwardedIconComponent
name={"Loader2"}
className={"animate-spin"}
/>
</div>
) : (
children
)}
>
<ForwardedIconComponent
name={"Loader2"}
className={"animate-spin"}
/>
</div>
<div
className={cn(
loading ? "opacity-0" : "opacity-100",
buttonVariants({
variant: "none",
size,
className: cn(buttonChildrenClasses, className),
}),
)}
>
{newChildren}
</div>
</>
</Comp>
<div
ref={hiddenRef}
style={{
visibility: "hidden",
position: "absolute",
whiteSpace: "nowrap",
}}
>
{children}
</div>
</Comp>
</>
);
},
);