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

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

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from "react";
import styled, { css } from "styled-components";
import Text from "../Text";
import Heading from "../Heading";
import Stack from "../Stack";
import defaultTheme from "../defaultTheme";
import { BASE_URL, SMALLEST_HEIGHT } from "./consts";
import LazyImage, { StyledLazyImage } from "../LazyImage";
import { left } from "../utils/rtl";
import useRandomId from "../hooks/useRandomId";
import handleKeyDown from "../utils/handleKeyDown";
var Shown = styled.div.withConfig({
  displayName: "PictureCard__Shown",
  componentId: "sc-1hgrga5-0"
})(["position:absolute;opacity:0;z-index:5;padding:", ";", ";transition:all ", " ease-in-out;"], function (_ref) {
  var theme = _ref.theme;
  return "0 0 ".concat(theme.orbit.spaceMedium, " ").concat(theme.orbit.spaceMedium);
}, function (_ref2) {
  var contentHeight = _ref2.contentHeight;
  return contentHeight > 0 ? "bottom: -".concat(contentHeight, "px") : "top: 100%";
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Shown.defaultProps = {
  theme: defaultTheme
};
var overlayCss = css(["position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;border-radius:", ";transition:opacity ", " ease-in-out;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.durationNormal;
});
var StyledLabel = styled.div.withConfig({
  displayName: "PictureCard__StyledLabel",
  componentId: "sc-1hgrga5-1"
})(["z-index:2;position:absolute;top:0;padding:", ";"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.spaceMedium;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledLabel.defaultProps = {
  theme: defaultTheme
};
var StyledOverlay = styled.div.withConfig({
  displayName: "PictureCard__StyledOverlay",
  componentId: "sc-1hgrga5-2"
})(["", ";opacity:1;background:linear-gradient( to bottom ", ",rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 16%,rgba(0,0,0,0.3) 55%,rgba(0,0,0,0.7) 100% );"], overlayCss, left); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledOverlay.defaultProps = {
  theme: defaultTheme
};
var StyledOverlayHover = styled.div.withConfig({
  displayName: "PictureCard__StyledOverlayHover",
  componentId: "sc-1hgrga5-3"
})(["", ";opacity:0;background:linear-gradient( to bottom ", ",rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 10%,rgba(0,0,0,0.4) 36%,rgb(0,0,0) 100% );"], overlayCss, left); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledOverlayHover.defaultProps = {
  theme: defaultTheme
};

var PictureCardContent = function PictureCardContent(_ref7) {
  var title = _ref7.title,
      subTitle = _ref7.subTitle,
      children = _ref7.children,
      cardID = _ref7.cardID;
  return /*#__PURE__*/React.createElement(StyledPictureCardContent, {
    "aria-labelledby": cardID
  }, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: "column",
    justify: "end",
    spacing: "none"
  }, /*#__PURE__*/React.createElement(Stack, {
    spaceAfter: "small",
    spacing: "none"
  }, subTitle && /*#__PURE__*/React.createElement(Heading, {
    type: "title3",
    as: "div",
    inverted: true
  }, subTitle), title && /*#__PURE__*/React.createElement(Heading, {
    type: "title1",
    as: "div",
    inverted: true
  }, title)), children && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
    type: "title3",
    as: "div",
    inverted: true
  }, children))));
};

var StyledPictureCardContent = styled.div.withConfig({
  displayName: "PictureCard__StyledPictureCardContent",
  componentId: "sc-1hgrga5-4"
})(["position:absolute;z-index:2;display:flex;flex-grow:1;padding:", ";transition:all ", " ease-in-out;bottom:0;"], function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.spaceMedium;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.durationFast;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPictureCardContent.defaultProps = {
  theme: defaultTheme
};
var StyledPictureCard = styled(function (_ref10) {
  var height = _ref10.height,
      href = _ref10.href,
      theme = _ref10.theme,
      shadows = _ref10.shadows,
      contentHeight = _ref10.contentHeight,
      isPlain = _ref10.isPlain,
      width = _ref10.width,
      isClickable = _ref10.isClickable,
      props = _objectWithoutProperties(_ref10, ["height", "href", "theme", "shadows", "contentHeight", "isPlain", "width", "isClickable"]);

  var Component = href ? "a" : "div";
  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
    href: href
  }), props.children);
}).withConfig({
  displayName: "PictureCard__StyledPictureCard",
  componentId: "sc-1hgrga5-5"
})(["height:", ";width:", ";max-width:100%;display:flex;position:relative;box-sizing:border-box;border-radius:", ";overflow:hidden;box-shadow:", ";transition:box-shadow ", " ease-in-out;", "{transition:transform ", " ease-in-out;}cursor:", ";", " ", ""], function (_ref11) {
  var height = _ref11.height;
  return height ? "".concat(height) : "100%";
}, function (_ref12) {
  var width = _ref12.width;
  return width ? "".concat(width) : "100%";
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref14) {
  var theme = _ref14.theme,
      shadows = _ref14.shadows;
  return shadows && theme.orbit.boxShadowAction;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.durationNormal;
}, StyledLazyImage, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.durationNormal;
}, function (_ref17) {
  var isClickable = _ref17.isClickable;
  return isClickable && "pointer";
}, function (_ref18) {
  var isPlain = _ref18.isPlain,
      theme = _ref18.theme,
      shadows = _ref18.shadows;
  return !isPlain && css(["&:hover,&:focus{outline:none;box-shadow:", ";", "{opacity:1;}", "{transform:scale(1.05);}", "{bottom:", ";}", "{opacity:1;bottom:0;}}"], shadows && theme.orbit.boxShadowActionActive, StyledOverlayHover, StyledLazyImage, StyledPictureCardContent, function (_ref19) {
    var contentHeight = _ref19.contentHeight;
    return contentHeight && "".concat(contentHeight, "px");
  }, Shown);
}, function (_ref20) {
  var isPlain = _ref20.isPlain;
  return isPlain && css(["&:focus{outline:none;}"]);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPictureCard.defaultProps = {
  theme: defaultTheme
};

var PictureCard = function PictureCard(_ref21) {
  var onClick = _ref21.onClick,
      image = _ref21.image,
      title = _ref21.title,
      tabIndex = _ref21.tabIndex,
      subTitle = _ref21.subTitle,
      href = _ref21.href,
      children = _ref21.children,
      external = _ref21.external,
      actions = _ref21.actions,
      label = _ref21.label,
      _ref21$height = _ref21.height,
      height = _ref21$height === void 0 ? "300px" : _ref21$height,
      width = _ref21.width,
      dataTest = _ref21.dataTest;
  var ref = React.useRef(null);

  var _React$useState = React.useState(0),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      contentHeight = _React$useState2[0],
      setContentHeight = _React$useState2[1];

  React.useEffect(function () {
    if (ref.current) {
      setContentHeight(ref.current.clientHeight);
    }
  }, []);
  var cardID = useRandomId();
  var name = image.name,
      _image$original = image.original,
      original = _image$original === void 0 ? undefined : _image$original,
      _image$placeholder = image.placeholder,
      placeholder = _image$placeholder === void 0 ? undefined : _image$placeholder,
      _image$code = image.code,
      code = _image$code === void 0 ? undefined : _image$code,
      _image$src = image.src,
      src = _image$src === void 0 ? undefined : _image$src;
  var isPlain = !(title || subTitle || children || actions);
  var isClickable = href || onClick;
  var isFocus = isPlain ? undefined : 0;
  return /*#__PURE__*/React.createElement(StyledPictureCard, {
    "data-test": dataTest,
    onClick: onClick,
    onKeyDown: handleKeyDown(onClick),
    height: isPlain && height || parseInt(height, 10) >= SMALLEST_HEIGHT ? height : "".concat(SMALLEST_HEIGHT, "px"),
    width: width,
    href: href,
    target: href && external ? "_blank" : undefined,
    rel: href && external ? "noopener noreferrer" : undefined,
    shadows: onClick || href,
    tabIndex: href ? tabIndex : isFocus,
    role: isPlain ? undefined : "link",
    contentHeight: contentHeight,
    isPlain: isPlain,
    isClickable: isClickable,
    "aria-labelledby": isPlain ? undefined : cardID
  }, /*#__PURE__*/React.createElement(LazyImage, {
    original: code && original ? {
      webp: " ".concat(BASE_URL, "/photos/").concat(original, "/").concat(code, ".webp"),
      jpg: "".concat(BASE_URL, "/photos/").concat(original, "/").concat(code, ".jpg")
    } : {
      "*": src
    },
    placeholder: placeholder && code ? {
      webp: " ".concat(BASE_URL, "/photos/").concat(placeholder, "/").concat(code, ".webp"),
      jpg: "".concat(BASE_URL, "/photos/").concat(placeholder, "/").concat(code, ".jpg")
    } : undefined,
    name: name
  }), !isPlain && /*#__PURE__*/React.createElement(StyledOverlay, null), !isPlain && /*#__PURE__*/React.createElement(StyledOverlayHover, null), label && /*#__PURE__*/React.createElement(StyledLabel, null, /*#__PURE__*/React.createElement(Text, {
    as: "div",
    size: "small",
    type: "white",
    weight: "bold"
  }, label)), /*#__PURE__*/React.createElement(PictureCardContent, {
    cardID: cardID,
    title: title,
    subTitle: subTitle
  }, children), actions && /*#__PURE__*/React.createElement(Shown, {
    ref: ref,
    contentHeight: contentHeight
  }, actions));
};

export default PictureCard;