chayns-components/dist/cjs/react-chayns-gallery/component/Image.js

A set of beautiful React components for developing chayns® applications.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _SmallWaitCursor = _interopRequireDefault(require("../../react-chayns-smallwaitcursor/component/SmallWaitCursor"));
var _is = require("../../utils/is");
var _isServer = require("../../utils/isServer");
var _getDataUrl = require("../utils/getDataUrl");
var _getImageMetaData = require("../utils/getImageMetaData");
require("./Image.css");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/* eslint-disable jsx-a11y/click-events-have-key-events,no-return-assign,react/forbid-prop-types */

class Image extends _react.PureComponent {
  constructor(props) {
    super(props);
    this.getElementDimensions = () => {
      this.setState({
        elementDimensions: {
          height: Math.ceil(this.imageRef.current.clientHeight / 50) * 50,
          width: Math.ceil(this.imageRef.current.clientWidth / 50) * 50
        }
      });
    };
    this.init = async () => {
      // set url and metadata
      this.getElementDimensions();
      const {
        image,
        styleLandscape,
        stylePortrait
      } = this.props;
      if ((0, _is.isString)(image)) {
        // url
        if (Image.imageMetaData[image]) {
          // use cached metadata
          this.setState({
            metaData: Image.imageMetaData[image],
            imageUrl: image
          });
        } else if (image.indexOf('tsimg.cloud') >= 0) {
          // get preview and dimensions from tsimg.cloud
          const metaData = await (0, _getImageMetaData.getImageMetaDataFromApi)(image);
          Image.imageMetaData[image] = metaData;
          this.setState({
            metaData,
            imageUrl: image
          });
        } else if (styleLandscape || stylePortrait) {
          // get dimensions if needed
          const metaData = await (0, _getImageMetaData.getImageMetaDataFromPreview)(image);
          Image.imageMetaData[image] = metaData;
          this.setState({
            metaData,
            imageUrl: image
          });
        } else {
          // set only the image url
          this.setState({
            imageUrl: image
          });
        }
      } else {
        // file
        const cacheId = `##FILE##${image.name}${image.lastModified}${image.size}`;
        if (Image.imageMetaData[cacheId]) {
          // use cache
          this.setState(Image.imageMetaData[cacheId]);
        } else {
          // get dataUrl, metaData and exifData and set cache
          const imageUrl = await (0, _getDataUrl.getDataUrlFromFile)(image);
          const newImage = {
            imageUrl
          };
          if (styleLandscape || stylePortrait) {
            // get dimensions if needed
            newImage.metaData = await (0, _getImageMetaData.getImageMetaDataFromPreview)(imageUrl);
          }
          Image.imageMetaData[cacheId] = newImage;
          this.setState(newImage);
        }
      }
    };
    this.onReady = () => {
      this.setState({
        ready: true
      });
    };
    this.state = {
      ready: false,
      imageUrl: null,
      metaData: null,
      elementDimensions: null
    };
    this.imageRef = /*#__PURE__*/_react.default.createRef();
  }
  componentDidMount() {
    this.init();
  }
  componentDidUpdate(prevProps) {
    if (prevProps !== this.props) {
      this.init();
    }
  }
  render() {
    const {
      moreImages,
      onClick,
      className,
      classNameLandscape,
      classNamePortrait,
      style,
      styleLandscape,
      stylePortrait,
      preventParams
    } = this.props;
    const {
      metaData,
      imageUrl,
      ready,
      elementDimensions
    } = this.state;
    let format = 0;
    if (metaData) {
      format = metaData.width > metaData.height ? Image.format.LANDSCAPE : Image.format.PORTRAIT;
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _clsx.default)('cc__image', className, format === Image.format.LANDSCAPE && ['cc__image--landscape', classNameLandscape], format === Image.format.PORTRAIT && ['cc__image--portrait', classNamePortrait], moreImages > 0 && 'cc__image--more-images', ready && 'cc__image--ready'),
      ref: this.imageRef,
      style: {
        ...style,
        ...(format === Image.format.LANDSCAPE ? styleLandscape : null),
        ...(format === Image.format.PORTRAIT ? stylePortrait : null)
      },
      "data-more": moreImages > 0 ? `+${moreImages}` : undefined
    }, imageUrl ? /*#__PURE__*/_react.default.createElement("img", {
      onClick: onClick,
      key: "image",
      alt: "",
      src: preventParams === true ? imageUrl : chayns.utils.getScaledImageUrl(imageUrl, !preventParams.height && elementDimensions.height, !preventParams.width && elementDimensions.width, preventParams.format),
      className: 'cc__image__img' + (onClick ? " cc__image--clickable" : ""),
      onLoad: this.onReady
    }) : null, !ready && metaData && metaData.preview ? [/*#__PURE__*/_react.default.createElement("img", {
      onClick: onClick,
      key: "preview",
      alt: "",
      src: (0, _getDataUrl.getDataUrlFromBase64)(metaData.preview),
      className: 'cc__image__preview' + (onClick ? " cc__image--clickable" : "")
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "cc__image__wait-cursor",
      key: "waitCursor"
    }, /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.default, {
      show: !ready,
      showBackground: false
    }))] : null);
  }
}
exports.default = Image;
Image.format = {
  LANDSCAPE: 1,
  PORTRAIT: 2
};
Image.imageMetaData = {};
Image.propTypes = {
  // eslint-disable-next-line react/require-default-props
  image: (0, _isServer.isServer)() ? _propTypes.default.any.isRequired : _propTypes.default.oneOfType([_propTypes.default.instanceOf(File), _propTypes.default.string]).isRequired,
  onClick: _propTypes.default.func,
  moreImages: _propTypes.default.number,
  className: _propTypes.default.string,
  classNameLandscape: _propTypes.default.string,
  classNamePortrait: _propTypes.default.string,
  style: _propTypes.default.object,
  stylePortrait: _propTypes.default.object,
  styleLandscape: _propTypes.default.object,
  preventParams: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
    width: _propTypes.default.bool,
    height: _propTypes.default.bool,
    format: _propTypes.default.bool
  })])
};
Image.defaultProps = {
  moreImages: 0,
  onClick: null,
  className: '',
  classNameLandscape: '',
  classNamePortrait: '',
  style: {},
  stylePortrait: {},
  styleLandscape: {},
  preventParams: {}
};
Image.displayName = 'Image';
//# sourceMappingURL=Image.js.map