@kiwicom/orbit-components/es/LazyImage/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
const FORMATS = {
  WEBP: "webp",
  JPEG: "jpg"
};
export const StyledLazyImage = styled.div.withConfig({
  displayName: "LazyImage__StyledLazyImage",
  componentId: "sc-1c5fd3o-0"
})(["width:100%;height:100%;position:absolute;"]);
const Image = styled.img.withConfig({
  displayName: "LazyImage__Image",
  componentId: "sc-1c5fd3o-1"
})(["z-index:", ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);min-width:100%;min-height:100%;opacity:", ";transition:opacity ", " ease-in-out;", ";"], ({
  visible
}) => visible ? "1" : "0", ({
  visible
}) => visible ? "1" : "0", ({
  theme
}) => theme.orbit.durationFast, ({
  lowRes
}) => lowRes && css(["filter:blur(3px);"]));
Image.defaultProps = {
  theme: defaultTheme
};

const getPictureType = picture => {
  const TYPES = {
    [FORMATS.WEBP]: "image/webp",
    [FORMATS.JPEG]: "image/jpg"
  };
  return TYPES[picture];
};

const Picture = ({
  pictures,
  name,
  loaded,
  onLoad,
  lowRes
}) => React.createElement("picture", null, Object.keys(pictures).map(picture => React.createElement(React.Fragment, {
  key: picture
}, React.createElement("source", {
  srcSet: pictures[picture],
  type: getPictureType(picture)
}), picture === "jpg" && React.createElement(Image, {
  onLoad: onLoad,
  src: pictures[picture],
  alt: name,
  visible: loaded,
  lowRes: lowRes
}))));

class LazyImage extends React.PureComponent {
  constructor(...args) {
    super(...args);

    _defineProperty(this, "state", {
      loaded: false
    });

    _defineProperty(this, "fullResLoaded", () => {
      this.setState({
        loaded: true
      });
    });
  }

  render() {
    const {
      placeholder,
      original,
      name
    } = this.props;
    const {
      loaded
    } = this.state;
    return React.createElement(StyledLazyImage, null, React.createElement(Picture, {
      pictures: original,
      name: name,
      loaded: loaded,
      onLoad: this.fullResLoaded
    }), placeholder && React.createElement(Picture, {
      pictures: placeholder,
      lowRes: true,
      name: name,
      loaded: !loaded
    }));
  }

}

export default LazyImage;