dh_demo

DreamHanks demo project
git clone git://git.lair.cx/dh_demo
Log | Files | Refs | README

Button.tsx (1054B)

      1 import classNames from '@/lib/classnames'
      2 import { HTMLAttributes, InputHTMLAttributes } from 'react'
      3 import styles from './Button.module.css'
      4 
      5 export interface CommonButtonProps {
      6   color?: 'primary' | 'secondary' | 'tertiary' | 'error'
      7   disabled?: boolean
      8 }
      9 
     10 export type ButtonProps = HTMLAttributes<HTMLButtonElement> & CommonButtonProps
     11 export type SubmitButtonProps = InputHTMLAttributes<HTMLInputElement> & CommonButtonProps
     12 
     13 export function Button (props: ButtonProps) {
     14   return ButtonImpl('button', props)
     15 }
     16 
     17 export function SubmitButton (props: SubmitButtonProps) {
     18   return ButtonImpl('input', props, {
     19     type: 'submit',
     20   })
     21 }
     22 
     23 function ButtonImpl<T extends CommonButtonProps> (Tag: any, props: T, additionalProps: Partial<T> = {}) {
     24   const { color, disabled, ...restProps } = props
     25 
     26   return (
     27     <Tag
     28       {...classNames(
     29         styles.button,
     30         color ? `is-${props.color}` : null,
     31         disabled ? styles['is-disabled'] : null,
     32       )}
     33       disabled={disabled}
     34       {...restProps}
     35       {...additionalProps}
     36     />
     37   )
     38 }