fix: fix button bad children error (#1564)

Issue: https://github.com/StanGirard/quivr/issues/1498
This commit is contained in:
Mamadou DICKO 2023-11-03 09:48:06 +01:00 committed by GitHub
parent 867904f19d
commit 5c732f1253
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 23 deletions

View File

@ -18,17 +18,15 @@ export const PopoverMenuMobile = ({
<Popover.Root>
<div>
<Popover.Anchor />
<Popover.Trigger>
<button
title="menu"
type="button"
className={cn(
"bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1",
color === "white" ? "text-white" : "text-black"
)}
>
<LuMenu size={32} />
</button>
<Popover.Trigger
title="menu"
type="button"
className={cn(
"bg-[#D9D9D9] bg-opacity-30 rounded-full px-4 py-1",
color === "white" ? "text-white" : "text-black"
)}
>
<LuMenu size={32} />
</Popover.Trigger>
</div>
<Popover.Content

View File

@ -6,7 +6,7 @@ import {
TooltipTrigger,
} from "@radix-ui/react-tooltip";
import { cva, type VariantProps } from "class-variance-authority";
import { ButtonHTMLAttributes, LegacyRef, forwardRef } from "react";
import { ButtonHTMLAttributes, Ref, RefAttributes, forwardRef } from "react";
import { FaSpinner } from "react-icons/fa";
import { cn } from "@/lib/utils";
@ -56,22 +56,25 @@ const Button = forwardRef(
}: ButtonProps,
forwardedRef
): JSX.Element => {
const buttonElement = (
<button
className={cn(ButtonVariants({ variant, brightness, className }))}
disabled={isLoading}
{...props}
ref={forwardedRef as LegacyRef<HTMLButtonElement>}
>
const buttonProps: ButtonProps & RefAttributes<HTMLButtonElement> = {
className: cn(ButtonVariants({ variant, brightness, className })),
disabled: isLoading,
...props,
ref: forwardedRef as Ref<HTMLButtonElement> | undefined,
};
const buttonChildren = (
<>
{children} {isLoading && <FaSpinner className="animate-spin" />}
</button>
</>
);
const buttonElement = <button {...buttonProps}>buttonChildren</button>;
if (tooltip !== undefined) {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>{buttonElement}</TooltipTrigger>
<TooltipTrigger {...buttonProps}>{buttonChildren}</TooltipTrigger>
<TooltipContent className="bg-gray-100 rounded-md p-1">
{tooltip}
</TooltipContent>
@ -80,9 +83,8 @@ const Button = forwardRef(
);
}
return buttonElement;
return <button {...buttonProps}>{buttonChildren}</button>;
}
);
Button.displayName = "Button";
export default Button;