@zohodesk/dot/es/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, { Component } from 'react';
import { Container } from '@zohodesk/components/es/Layout';
import { AttachmentImage_defaultProps } from "./props/defaultProps";
import { AttachmentImage_propTypes } from "./props/propTypes";
import { checkImageValidity } from "./utils";
import Image from "../Image/Image";
/** * CSS ** */

import style from "./AttachmentViewer.module.css";
export default class AttachmentImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      isImageValid: false
    };
    this.handleImageValidation = this.handleImageValidation.bind(this);
    this.renderImage = this.renderImage.bind(this);
  }

  handleImageValidation() {
    const {
      src
    } = this.props;
    checkImageValidity(src).then(isValid => {
      this.setState({
        isLoading: false,
        isImageValid: isValid
      });
    });
  }

  renderImage() {
    const {
      src,
      onClick,
      alt,
      id,
      dataId,
      isCover,
      customClass,
      onLoad,
      onError
    } = this.props;
    const {
      isImageValid
    } = this.state;
    const {
      customImageClass = ''
    } = customClass;
    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
    });
  }

  componentDidMount() {
    this.handleImageValidation();
  }

  componentDidUpdate(prevProps) {
    const {
      src
    } = this.props;

    if (prevProps.src !== src) {
      this.setState({
        isLoading: true
      });
      this.handleImageValidation();
    }
  }

  render() {
    const {
      dataId,
      id,
      customClass,
      children
    } = this.props;
    const {
      isLoading,
      isImageValid
    } = this.state;
    const {
      customChildrenClass = ''
    } = customClass;
    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 ? this.renderImage() : children ? /*#__PURE__*/React.createElement(Container, {
      align: "both",
      htmlId: id,
      dataId: `${dataId}_custom`,
      className: customChildrenClass
    }, children) : this.renderImage() //alt ui
    );
  }

}
AttachmentImage.propTypes = AttachmentImage_propTypes;
AttachmentImage.defaultProps = AttachmentImage_defaultProps;