Returned loader to default, fixed buttons not working with asChild
This commit is contained in:
parent
2c851a9d5c
commit
5b83bde64e
1 changed files with 8 additions and 30 deletions
|
|
@ -60,14 +60,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
if (typeof children === "string") {
|
if (typeof children === "string") {
|
||||||
newChildren = toTitleCase(children);
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Comp
|
<Comp
|
||||||
|
|
@ -75,29 +67,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
ref={ref}
|
ref={ref}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<>
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div style={{ width: loading && width ? `${width}px` : "auto" }}>
|
|
||||||
<ForwardedIconComponent
|
<ForwardedIconComponent
|
||||||
name={"Loader2"}
|
name={"Loader2"}
|
||||||
className={"animate-spin"}
|
className={"animate-spin"}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
) : (
|
) : (
|
||||||
children
|
newChildren
|
||||||
)}
|
)}
|
||||||
</>
|
|
||||||
</Comp>
|
</Comp>
|
||||||
<div
|
|
||||||
ref={hiddenRef}
|
|
||||||
style={{
|
|
||||||
visibility: "hidden",
|
|
||||||
position: "absolute",
|
|
||||||
whiteSpace: "nowrap",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue