@zohodesk/dot/es/v1/AttachmentViewer/AttachmentImage.js

In this Library, we Provide Some Basic Components to Build Your Application

/* eslint-disable css-modules/no-unused-class */

/** * Libraries ** */
import React, { useRef, useEffect, useState } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { Container } from '@zohodesk/components/es/Layout';
import { AttachmentImage_defaultProps } from "./props/defaultProps";
import { AttachmentImage_propTypes } from "./props/propTypes";
import { checkImageValidity } from "../../AttachmentViewer/utils";
import Image from "../Image/Image";
/** * CSS ** */

import style from "../../AttachmentViewer/AttachmentViewer.module.css";

const AttachmentImage = props => {
  const {
    onLoad,
    onError,
    src,
    onClick,
    alt,
    dataId,
    id,
    customClass,
    isCover,
    children
  } = props;
  const {
    customImageClass = '',
    customChildrenClass = ''
  } = customClass;
  const [isLoading, setLoading] = useState(true);
  const [isImageValid, setImageValidity] = useState(false);

  function handleImageValidation() {
    checkImageValidity(src).then(isValid => {
      setImageValidity(isValid);
      setLoading(false);
    });
  }

  useEffect(() => {
    handleImageValidation();
  }, []);
  useEffectCallOnlyAfterState(() => {
    setLoading(true);
    handleImageValidation();
  }, [src]);

  function renderImage() {
    return /*#__PURE__*/React.createElement(Image, {
      htmlId: id,
      dataId: isImageValid ? dataId : `${dataId}_alt`,
      src: src,
      onClick: onClick,
      className: customImageClass,
      alt: alt,
      isCover: isCover,
      onLoad: onLoad,
      onError: onError
    });
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
    className: `${style.spinLoad}`,
    "data-id": `${dataId}_loader`,
    "data-test-id": `${dataId}_loader`
  }, /*#__PURE__*/React.createElement("div", {
    className: style.loader
  })) : isImageValid ? renderImage() : children ? /*#__PURE__*/React.createElement(Container, {
    align: "both",
    htmlId: id,
    dataId: `${dataId}_custom`,
    className: customChildrenClass
  }, children) : renderImage() //alt ui
  );
};

AttachmentImage.propTypes = AttachmentImage_propTypes;
AttachmentImage.defaultProps = AttachmentImage_defaultProps;
export default AttachmentImage;