refactor: refactor the button component using `forwardRef` (#4379)
Co-authored-by: KVOJJJin <jzongcode@gmail.com>pull/5384/head
TinsFox
2 years ago
committed by
GitHub
parent
bb33ffc332
commit
a3bd5eba02
@ -1,50 +1,44 @@
|
|||||||
import type { FC, MouseEventHandler, PropsWithChildren } from 'react'
|
import React from 'react'
|
||||||
import React, { memo } from 'react'
|
import { type VariantProps, cva } from 'class-variance-authority'
|
||||||
import classNames from 'classnames'
|
import classNames from 'classnames'
|
||||||
import Spinner from '../spinner'
|
import Spinner from '../spinner'
|
||||||
|
|
||||||
export type IButtonProps = PropsWithChildren<{
|
const buttonVariants = cva(
|
||||||
type?: string
|
'btn disabled:pointer-events-none',
|
||||||
className?: string
|
{
|
||||||
disabled?: boolean
|
variants: {
|
||||||
loading?: boolean
|
variant: {
|
||||||
tabIndex?: number
|
primary: 'btn-primary disabled:btn-primary-disabled',
|
||||||
onClick?: MouseEventHandler<HTMLDivElement>
|
warning:
|
||||||
}>
|
'btn-warning disabled:btn-warning-disabled',
|
||||||
|
default: 'btn-default disabled:btn-default-disabled',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
const Button: FC<IButtonProps> = ({
|
export type ButtonProps = {
|
||||||
type,
|
loading?: boolean
|
||||||
disabled,
|
} & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
|
||||||
children,
|
|
||||||
className,
|
|
||||||
onClick,
|
|
||||||
loading = false,
|
|
||||||
tabIndex,
|
|
||||||
}) => {
|
|
||||||
let typeClassNames = 'cursor-pointer'
|
|
||||||
switch (type) {
|
|
||||||
case 'primary':
|
|
||||||
typeClassNames = (disabled || loading) ? 'btn-primary-disabled' : 'btn-primary'
|
|
||||||
break
|
|
||||||
case 'warning':
|
|
||||||
typeClassNames = (disabled || loading) ? 'btn-warning-disabled' : 'btn-warning'
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
typeClassNames = disabled ? 'btn-default-disabled' : 'btn-default'
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
<div
|
({ className, variant, loading, children, ...props }, ref) => {
|
||||||
className={classNames('btn', typeClassNames, className)}
|
return (
|
||||||
tabIndex={tabIndex}
|
<button
|
||||||
onClick={disabled ? undefined : onClick}
|
className={classNames(buttonVariants({ variant, className }))}
|
||||||
>
|
ref={ref}
|
||||||
{children}
|
{...props}
|
||||||
{/* Spinner is hidden when loading is false */}
|
>
|
||||||
<Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
|
{children}
|
||||||
</div>
|
<Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />
|
||||||
)
|
</button>
|
||||||
}
|
)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
Button.displayName = 'Button'
|
||||||
|
|
||||||
export default memo(Button)
|
export default Button
|
||||||
|
export { Button, buttonVariants }
|
||||||
|
|||||||
Loading…
Reference in New Issue