viamobi-component/src/core/components/PhotoCapture.js

A React component that viamobi

import React, { useState, useRef } from 'react';
import { Button, Badge } from 'react-bootstrap';

import { SRLWrapper } from 'simple-react-lightbox';

const PhotoCapture = ({
  imgFront,
  setImgFront,
  imgBack,
  setImgBack,
  unknowPhoto,
  process,
  t
}) => {
  const [imageValue, setImageValue] = useState('');

  const [isBtnCaptureEnabled, setIsBtnCaptureEnabled] = useState(true);

  const inputFile = useRef(null);
  const inputFileCapture = useRef(null);

  const imageHandler = e => {
    const reader = new FileReader();
    reader.onload = () => {
      if (reader.readyState === 2) {
        if (unknowPhoto === imgFront) {
          setImgFront(reader.result);
          if (process !== 'ID') setIsBtnCaptureEnabled(false);
        } else {
          setImgBack(reader.result);
          setIsBtnCaptureEnabled(false);
        }
      }
    };
    reader.readAsDataURL(e.target.files[0]);
    setImageValue('');
  };

  const clearImage = image => {
    if (image === 'front') {
      setImgFront(unknowPhoto);
      if (imgBack) {
        setImgFront(imgBack);
        setImgBack(null);
      }
    } else {
      setImgBack(null);
    }
    setIsBtnCaptureEnabled(true);
  };

  const options = {
    buttons: {
      backgroundColor: 'rgba(30,30,36,0.8)',
      iconColor: 'rgba(255, 255, 255, 0.8)',
      iconPadding: '10px',
      showAutoplayButton: false,
      showCloseButton: true,
      showDownloadButton: false,
      showFullscreenButton: false,
      showNextButton: true,
      showPrevButton: true,
      showThumbnailsButton: false,
      size: '40px'
    }
  };
  return (
    <div>
      <SRLWrapper options={options}>
        <input
          value={imageValue}
          type="file"
          className="custom-file-input "
          accept="image/*"
          style={{ display: 'none' }}
          ref={inputFile}
          onChange={e => imageHandler(e)}
        />

        <input
          value={imageValue}
          type="file"
          className="custom-file-input"
          accept="image/*"
          style={{ display: 'none' }}
          ref={inputFileCapture}
          onChange={e => imageHandler(e)}
          capture
        />

        <div className="row">
          <div className="img-holder col-5 img_hover">
            <Badge
              hidden={unknowPhoto === imgFront}
              variant="success"
              className="icono_basura"
              onClick={() => {
                clearImage('front');
              }}
            >
              <i className="far fa-trash-alt" />
            </Badge>
            <img className="d-block w-100 img  " src={imgFront} alt="Front" />
          </div>
          {imgBack && (
            <div className="img-holder  col-5 ml-2 img_hover">
              <Badge
                variant="success"
                className="icono_basura"
                onClick={() => {
                  clearImage('back');
                }}
              >
                <i className="far fa-trash-alt" />
              </Badge>
              <img className="d-block w-100 img " src={imgBack} alt="Back" />
            </div>
          )}
        </div>

        <div className="my-3">
          <Button
            className="button_l"
            variant="light"
            onClick={() => {
              inputFileCapture.current.click();
            }}
            disabled={!isBtnCaptureEnabled}
          >
            <span>{t('photo')}</span>
            <i className="fas fa-camera float-right mt-1 ml-2" />
          </Button>{' '}
          <Button
            className="button_l"
            variant="light"
            onClick={() => {
              inputFile.current.click();
            }}
            disabled={!isBtnCaptureEnabled}
          >
            <span>{t('file')}</span>
            <i className="fas fa-folder-open float-right mt-1 ml-2" />
          </Button>
        </div>
      </SRLWrapper>
    </div>
  );
};

export default PhotoCapture;