react/components/modal/modal-action.tsx

import React, { MouseEvent, useMemo } from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import { useModalContext } from './modal-context'

type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
  close: () => void
}

interface Props {
  className?: string
  passive?: boolean
  disabled?: boolean
  onClick?: (event: ModalActionEvent) => void
}

const defaultProps = {
  className: '',
  passive: false,
  disabled: false,
  onClick: (event: ModalActionEvent) => event.close && event.close(),
}

export type ModalActionProps = Props & typeof defaultProps & React.ButtonHTMLAttributes<any>

const ModalAction: React.FC<ModalActionProps> = React.memo(({
  className, children, onClick, passive, disabled, ...props
}) => {
  const theme = useTheme()
  const { close } = useModalContext()
  const clickHandler = (event: MouseEvent<HTMLButtonElement>) => {
    if (disabled) return
    const actionEvent = Object.assign({}, event, {
      close: close,
    })
    onClick(actionEvent)
  }
  
  const color = useMemo(() => {
    return passive || disabled ? theme.palette.accents_5 : theme.palette.foreground
  }, [theme.palette, passive, disabled])
  
  const bgColor = useMemo(() => {
    return disabled ? theme.palette.accents_1 : theme.palette.background
  }, [theme.palette, disabled])

  return (
    <>
      <button className={className} onClick={clickHandler} {...props}>{children}</button>
      <style jsx>{`
        button {
          font-size: .75rem;
          text-transform: uppercase;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          outline: none;
          text-decoration: none;
          transition: all 200ms ease-in-out 0s;
          border: none;
          color: ${color};
          background-color: ${bgColor};
          cursor: ${disabled ? 'not-allowed' : 'pointer'};
          flex: 1;
        }
        
        button:hover {
          color: ${disabled ? color : theme.palette.foreground};
          background-color: ${disabled ? bgColor : theme.palette.accents_1};
        }
      `}</style>
    </>
  )
})

export default withDefaults(ModalAction, defaultProps)