PopUpForm

import React, { useState, useEffect } from 'react'

import css from './ApplicationForCourseDesktop.module.scss'

import PhoneInput from 'react-phone-input-2'

import 'react-phone-input-2/lib/style.css'

​

export default function ApplicationForCourseDesktop (props) {

  const { title } = props

  console.log(props)

  const [displayBlock, useDisplayBlock] = useState(false)

  console.log(displayBlock)

​

  function onClickCloseForm (e) {

​

    if (e.target.classList.contains(css.container)) {

      console.log('click', e.target.className)

      useDisplayBlock(false)

      document.getElementsByTagName('body')[0].style.overflow = 'visible'

    }

  }

​

  function mouseleaveEvent (e) {

    if (e.clientY < 0) {

      useDisplayBlock(true)

      document.getElementsByTagName('body')[0].style.overflow = 'hidden'

    }

  }

​

  useEffect(() => {

    document.addEventListener('mouseleave', mouseleaveEvent)

    if (!!document.getElementsByClassName(css.container)[0]) {

      console.log(document.getElementsByClassName(css.container)[0])

      document.getElementsByClassName(css.container)[0].addEventListener('click', onClickCloseForm)

    }

    return () => {

      document.removeEventListener('mouseleave', mouseleaveEvent)

    }

  })

​

  if (displayBlock) {

    return (

      <div className={css.container}>

        <div className={css.container_form}>

          <div className={css.title}>{title}</div>

          <div className={css.wrapper_input}><input className={css.input} placeholder='Nome' /></div>

          <PhoneInput

            value='55'

            placeholder='+(99) 99999-9999'

            inputProps={{

              name: 'phone',

              required: true

            }}

            containerClass={css.wrapper_input}

          />

          <div className={css.wrapper_input}><input className={css.input} placeholder='Enviar' /></div>

          <div className={css.politic}>

            Ao clicar no botão de "Acessar" você concorda com a nossa <a href={'#'}>Política de Privacidade</a>

          </div>

          <button className={css.button} onClick={sendForm}>Acessar</button>

        </div>

      </div>

    )

  } else {

    return <></>

  }

}