@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.

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

Image.defaultProps = {
  theme: defaultTheme
};

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

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

const LazyImage = ({
  placeholder,
  original,
  name
}) => {
  const [loaded, setLoaded] = React.useState(false);
  return /*#__PURE__*/React.createElement(StyledLazyImage, null, placeholder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Picture, {
    pictures: original,
    name: name,
    loaded: loaded,
    onLoad: () => setLoaded(true)
  }), /*#__PURE__*/React.createElement(Picture, {
    pictures: placeholder,
    lowRes: true,
    name: name,
    loaded: !loaded
  })) : /*#__PURE__*/React.createElement(Picture, {
    pictures: original,
    name: name,
    loaded: true
  }));
};

export default LazyImage;