p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: apply asChild to Button

Browse Source
This commit is contained in:
p-sw 2024-05-24 22:20:57 +09:00
parent d310883fe0
commit fd1c1ef0de
1 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/react/components/Button.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { vcn, VariantProps } from "../shared";
import { vcn, VariantProps, Slot, AsChild } from "../shared";
const [buttonVariants, resolveVariants] = vcn({
base: "flex flex-row items-center justify-between rounded-md outline outline-1 outline-transparent outline-offset-2 focus-visible:outline-black/50 dark:focus-visible:outline-white/50 transition-all",
@ -56,18 +56,20 @@ const [buttonVariants, resolveVariants] = vcn({
export interface ButtonProps
extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
VariantProps<typeof buttonVariants> {}
VariantProps<typeof buttonVariants>,
AsChild {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
const [variantProps, otherProps] = resolveVariants(props);
return (
<button
ref={ref}
{...otherProps}
className={buttonVariants(variantProps)}
/>
);
const Comp = otherProps.asChild ? Slot : "button";
const compProps = {
...otherProps,
className: buttonVariants(variantProps),
};
return <Comp ref={ref} {...compProps} />;
}
);