Source: input/TakePhotoImageOqt.js

import React, { useContext } from "react";
import { getStyleObjectFromString, TakePhotoOqtContext } from "../..";

/**
 * Componente que renderiza un img para cargar una imagen
 * @name Reactor.Components.Input.TakePhotoImageOqt
 * @param {string} src valor por defecto, se muestra cuando no hay imagen cargada
 * @param {string} strstyle estilos css
 * @param {string} class_name clases
 * @param {string} alt atributo alt que se dara a la imagen
 * @param {string} width ancho
 * @param {string} height alto
 * @param {"true"|"false"} auto_submit determina si al cargar una foto automaticamente se hace submit del form que contiene al control
 * @class 
 * @example 
<form action="MenuPerfilFoto" target="menu">
  <take_photo_oqt name="fotoPerfil" value="" disabled="false" auto_submit="false">
    <take_photo_img_oqt strstyle="object-fit: cover;" alt="img" height="180" width="180" class_name="mx-auto rounded-circle mt-n5 shadow-l" src="{{fotoUsuario}}" />
  </take_photo_oqt>
</form>
 */

export const TakePhotoImageOqt = ({src, strstyle, class_name, alt="image", width, height}) => {

  const context = useContext(TakePhotoOqtContext);
  return <img onClick={context.triggerCamera} srcSet={context.dataUrl || src} width={width} height={height} style={{...getStyleObjectFromString(strstyle), cursor: context.disabled ? "default" : "pointer"}} className={class_name} alt={alt} />

}