fix: removed polymorphic typing from types.ts

daisyui · Apr 5, 2022 · 0000986 · 0000986
1 parent 61ddca7
commit 0000986
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 45 deletions.
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -113,7 +113,7 @@ export const AsHref: Story<ButtonProps> = (args) => {
       >
         I'm a {`<button>`}
       </Button>
-      <Button href="https://google.com" target="_blank">
+      <Button href="https://google.com">
         I'm an {`<a>`}
       </Button>
     </div>

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -9,35 +9,30 @@ import {
   ComponentSize,
 } from '../types'
 
-type ButtonBaseProps = IComponentBaseProps & {
-  shape?: ComponentShape
-  size?: ComponentSize
-  variant?: 'outline' | 'link'
-  color?: ComponentColor
-  fullWidth?: boolean
-  responsive?: boolean
-  animation?: boolean
-  loading?: boolean
-  active?: boolean
-  startIcon?: ReactNode
-  endIcon?: ReactNode
-}
-
-type ButtonElementProps = ButtonBaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  as?: 'button'
-}
-
-type AnchorElementProps = ButtonBaseProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-  as: 'link'
-  href: string
-}
-
-export type ButtonProps = ButtonElementProps | AnchorElementProps
+export type ButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'color'
+> &
+  IComponentBaseProps & {
+    href?: string
+    shape?: ComponentShape
+    size?: ComponentSize
+    variant?: 'outline' | 'link'
+    color?: ComponentColor
+    fullWidth?: boolean
+    responsive?: boolean
+    animation?: boolean
+    loading?: boolean
+    active?: boolean
+    startIcon?: ReactNode
+    endIcon?: ReactNode
+  }
 
-const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       children,
+      href,
       shape,
       size,
       variant,
@@ -76,19 +71,12 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
       })
     )
 
-    if ('href' in props)
-    {
-      props.as = 'link'
-    }
-
-    if (props.as === 'link') {
+    if (href) {
       return (
         <a
-          {...props}
-          ref={ref as React.ForwardedRef<HTMLAnchorElement>}
           className={classes}
           style={style}
-          href={props.href}
+          href={href}
         >
           {startIcon && startIcon}
           {children}
@@ -99,7 +87,7 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
       return (
         <button
           {...props}
-          ref={ref as React.ForwardedRef<HTMLButtonElement>}
+          ref={ref}
           data-theme={dataTheme}
           className={classes}
           style={style}

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import {
   componentStatuses,
   componentColors,
@@ -25,10 +23,3 @@ export type ComponentSize = typeof componentSizes[number]
 export type ComponentStatus = typeof componentStatuses[number]
 export type ComponentBrandColors = typeof brandColors[number]
 export type ComponentBgColors = typeof bgColors[number]
-
-// Allow anchor elements to have disabled attribute
-declare module 'react' {
-  interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
-    disabled?: boolean
-  }
-}