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

Made Submit button use loading of button

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-04 19:01:01 -03:00
commit 9e6f3a064d
2 changed files with 20 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
import ForwardedIconComponent from "../genericIconComponent";
const buttonVariants = cva(
"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",
"inline-flex items-center justify-center gap-2 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: {
@ -54,7 +54,16 @@ function toTitleCase(text: string) {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{ className, variant, size, loading, asChild = false, children, ...props },
{
className,
variant,
size,
loading,
disabled,
asChild = false,
children,
...props
},
ref,
) => {
const Comp = asChild ? Slot : "button";
@ -66,6 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
<>
<Comp
className={cn(buttonVariants({ variant, size, className }))}
disabled={loading || disabled}
ref={ref}
{...props}
>

30
src/frontend/src/modals/baseModal/index.tsx
View file

@ -86,24 +86,10 @@ const Footer: React.FC<{
<Button
data-testid={submit.dataTestId}
type="submit"
disabled={submit.loading || submit.disabled}
className="relative"
loading={submit.loading}
>
<div
className={cn(
submit.loading ? "opacity-100" : "opacity-0",
"absolute self-center"
)}
>
<ForwardedIconComponent
name={"Loader2"}
className={"animate-spin"}
/>
</div>
<div className={cn(submit.loading ? "opacity-0" : "opacity-100")}>
{submit.icon && submit.icon}
{submit.label}
</div>
{submit.icon && submit.icon}
{submit.label}
</Button>
</div>
</div>
@ -116,7 +102,7 @@ interface BaseModalProps {
React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>?,
React.ReactElement<FooterProps>?
React.ReactElement<FooterProps>?,
];
open?: boolean;
setOpen?: (open: boolean) => void;
@ -150,16 +136,16 @@ function BaseModal({
onSubmit,
}: BaseModalProps) {
const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header
(child) => (child as React.ReactElement).type === Header,
);
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
(child) => (child as React.ReactElement).type === Trigger,
);
const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content
(child) => (child as React.ReactElement).type === Content,
);
const ContentFooter = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Footer
(child) => (child as React.ReactElement).type === Footer,
);
let minWidth: string;