@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 _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["height", "href", "theme", "shadows", "contentHeight", "isPlain", "width", "isClickable"];
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";
const Shown = styled.div.withConfig({
  displayName: "PictureCard__Shown",
  componentId: "sc-s1oyaz-0"
})(["position:absolute;opacity:0;z-index:5;padding:", ";", ";transition:all ", " ease-in-out;"], ({
  theme
}) => `0 0 ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`, ({
  contentHeight
}) => contentHeight > 0 ? `bottom: -${contentHeight}px` : `top: 100%`, ({
  theme
}) => theme.orbit.durationFast); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

StyledLabel.defaultProps = {
  theme: defaultTheme
};
const StyledOverlay = styled.div.withConfig({
  displayName: "PictureCard__StyledOverlay",
  componentId: "sc-s1oyaz-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
};
const StyledOverlayHover = styled.div.withConfig({
  displayName: "PictureCard__StyledOverlayHover",
  componentId: "sc-s1oyaz-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
};

const PictureCardContent = ({
  title,
  subTitle,
  children,
  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))));
};

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

StyledPictureCardContent.defaultProps = {
  theme: defaultTheme
};
const StyledPictureCard = styled((_ref) => {
  let {
    height,
    href,
    theme,
    shadows,
    contentHeight,
    isPlain,
    width,
    isClickable
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  const Component = href ? "a" : "div";
  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
    href: href
  }), props.children);
}).withConfig({
  displayName: "PictureCard__StyledPictureCard",
  componentId: "sc-s1oyaz-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:", ";", " ", ""], ({
  height
}) => height ? `${height}` : "100%", ({
  width
}) => width ? `${width}` : `100%`, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme,
  shadows
}) => shadows && theme.orbit.boxShadowAction, ({
  theme
}) => theme.orbit.durationNormal, StyledLazyImage, ({
  theme
}) => theme.orbit.durationNormal, ({
  isClickable
}) => isClickable && "pointer", ({
  isPlain,
  theme,
  shadows
}) => !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, ({
  contentHeight
}) => contentHeight && `${contentHeight}px`, Shown), ({
  isPlain
}) => isPlain && css(["&:focus{outline:none;}"])); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPictureCard.defaultProps = {
  theme: defaultTheme
};

const PictureCard = ({
  onClick,
  image,
  title,
  tabIndex,
  subTitle,
  href,
  children,
  external,
  actions,
  label,
  height = "300px",
  width,
  dataTest
}) => {
  const ref = React.useRef(null);
  const [contentHeight, setContentHeight] = React.useState(0);
  React.useEffect(() => {
    if (ref.current) {
      setContentHeight(ref.current.clientHeight);
    }
  }, []);
  const cardID = useRandomId();
  const {
    name,
    original = undefined,
    placeholder = undefined,
    code = undefined,
    src = undefined
  } = image;
  const isPlain = !(title || subTitle || children || actions);
  const isClickable = href || onClick;
  const 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 : `${SMALLEST_HEIGHT}px`,
    width: width,
    href: href,
    target: href && external ? "_blank" : undefined,
    rel: href && external ? "noopener" : 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: ` ${BASE_URL}/photos/${original}/${code}.webp`,
      jpg: `${BASE_URL}/photos/${original}/${code}.jpg`
    } : {
      "*": src
    },
    placeholder: placeholder && code ? {
      webp: ` ${BASE_URL}/photos/${placeholder}/${code}.webp`,
      jpg: `${BASE_URL}/photos/${placeholder}/${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;