Como utilizar el componente Popup para crear modales reutilizables

[adrimr02]

De componente a Popup

Para convertir cualquier componente en un popup solo hay que rodear los elementos dentro del return con el componente Popup. En este componente se incluye la lógica que vaya a realizar.

Se puede ver en uso en /src/components/AddPopup/index.tsx:

{/* Debe recibir como props un state booleano que decide si se muestra o no y una funcion que lo cierra */}
interface Props{
    visible:boolean;
    lngLat:LngLat|undefined;
    /* Otros props que necesites */
}

function AddPopup({ visible, closePopup, /* ... */  }: Props){
  /* Aqui la lógica del componente */
  return(
  <Popup isOpen={visible} closePopup={closePopup}>
    {/* Ahora va tú componente */ }
    <form onSubmit={(e)=>handleSubmit(e)}>  
      <h2>Introduce los datos del nuevo marcador</h2>
      {/* ... */}
      <p>
        <Button style={{float:'right'}} type='submit' color='success' variant='contained'>Anadir</Button>
      </p>
    </form>
  </Popup>         
  )
}

export default AddPopup

Como mostrarlo desde la clase padre

En la clase padre debes definir un state booleano que decide si el popup se muestra o no. También una función para cerrarlo que pondrá el valor del state a false.

Se puede ver en uso en /src/pages/MapPage:

const MapPage = () : JSX.Element => {

  const[popupVisible,setPopupVisible] = useState(false)

  function closePopup() {
    setPopupVisible(false)
  }

/**
 *  Funcion de ejemplo a la que llamar para que se muestre el popup. Realmente lo unico necesario
 * es llamar a `setPopupVisible(true)` donde necesites.
 */
function showPopup() {
    setPopupVisible(true)
  }

 /* ... */

  return (
    <MapProvider>
      {/* ... */}
      <AddPopup closePopup={closePopup} visible={popupVisible} lngLat={lngLat} addMark={addMark}/>
    </MapProvider> 
  )
}

export default MapPage

Puedes añadir mas lógica para gestionar necesidades más complejas pero este sería el código mínimo necesario para que se muestre.