react/components/modal/modal-wrapper.tsx

import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import CSSTransition from '../shared/css-transition'

interface Props {
  className?: string
  width?: string
  visible?: boolean
}

const defaultProps = {
  className: '',
  width: '26rem',
  visible: false,
}

export type ModalWrapperProps = Props & typeof defaultProps

const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React.memo(({
  className, width, children, visible, ...props
}) => {
  const theme = useTheme()

  return (
    <CSSTransition name="wrapper" visible={visible} clearTime={300}>
      <div className={`wrapper ${className}`} {...props}>
        {children}
        <style jsx>{`
        .wrapper {
          max-width: 90%;
          width: ${width};
          overflow: hidden;
          display: flex;
          flex-direction: column;
          position: relative;
          box-sizing: border-box;
          background-color: ${theme.palette.background};
          color: ${theme.palette.foreground};
          border-radius: ${theme.layout.radius};
          padding: ${theme.layout.gap};
          opacity: 0;
          transform: translate3d(0px, -40px, 0px);
          transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0s;
        }
        
        .wrapper-enter {
          opacity: 0;
          transform: translate3d(0px, -40px, 0px);
        }
        
        .wrapper-enter-active {
          opacity: 1;
          transform: translate3d(0px, 0px, 0px);
        }
        
        .wrapper-leave {
          opacity: 1;
          transform: translate3d(0px, 0px, 0px);
        }

        .wrapper-leave-active {
          opacity: 0;
          transform: translate3d(0px, -50px, 0px);
        }
      `}</style>
      </div>
    </CSSTransition>
  )
})

export default withDefaults(ModalWrapper, defaultProps)