64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
|
|
const styleClasses = {
|
|
primary: "bg-primary-normal hover:bg-primary-dark text-white",
|
|
secondary: "bg-gray-200 hover:bg-gray-400 text-gray-800",
|
|
disabled: "bg-gray-200 text-gray-600 cursor-not-allowed shadow-none hover:shadow-none",
|
|
tertiary: "shadow-none hover:shadow-none drop-shadow-sm text-gray-900 hover:text-gray-600",
|
|
}
|
|
|
|
export type ButtonProps = {
|
|
type?: 'default' | 'primary' | 'tertiary';
|
|
className?: string;
|
|
children?: string | JSX.Element;
|
|
htmlType?: 'submit' | 'button' | 'reset';
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
disabled?: boolean
|
|
}
|
|
|
|
const ButtonBase: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
|
|
const {
|
|
type = 'default',
|
|
className = '',
|
|
htmlType = 'button',
|
|
onClick,
|
|
disabled,
|
|
children,
|
|
...rest
|
|
} = props
|
|
const buttonRef = (ref as any) || React.createRef<HTMLElement>()
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
|
|
if (htmlType !== 'submit') {
|
|
e.preventDefault()
|
|
}
|
|
|
|
if (disabled || !onClick) return
|
|
|
|
onClick(e)
|
|
}
|
|
|
|
const extraClasses = () => {
|
|
if (disabled) return styleClasses.disabled
|
|
|
|
if (type === 'primary') return styleClasses.primary
|
|
|
|
if (type === 'tertiary') return styleClasses.tertiary
|
|
|
|
return styleClasses.secondary
|
|
}
|
|
|
|
return <button
|
|
{...rest}
|
|
type={htmlType}
|
|
disabled={disabled}
|
|
className={`transition duration-300 ease-in-out block text-center cursor-pointer p-2 px-8 rounded shadow-lg hover:shadow-lg ${extraClasses()} ${className}`}
|
|
onClick={handleClick}
|
|
ref={buttonRef}
|
|
>
|
|
{children}
|
|
</button>
|
|
}
|
|
|
|
export const Button = React.forwardRef<unknown, ButtonProps>(ButtonBase)
|