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 React from "react";
import { vcn, VariantProps } from "../shared"; import { vcn, VariantProps, Slot, AsChild } from "../shared";
const [buttonVariants, resolveVariants] = vcn({ 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", 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 export interface ButtonProps
extends Omit<React.ComponentPropsWithoutRef<"button">, "className">, extends Omit<React.ComponentPropsWithoutRef<"button">, "className">,
VariantProps<typeof buttonVariants> {} VariantProps<typeof buttonVariants>,
AsChild {}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => { (props, ref) => {
const [variantProps, otherProps] = resolveVariants(props); const [variantProps, otherProps] = resolveVariants(props);
return (
<button const Comp = otherProps.asChild ? Slot : "button";
ref={ref} const compProps = {
{...otherProps} ...otherProps,
className={buttonVariants(variantProps)} className: buttonVariants(variantProps),
/> };
);
return <Comp ref={ref} {...compProps} />;
} }
); );