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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _Text = _interopRequireDefault(require("../Text"));

var _Heading = _interopRequireDefault(require("../Heading"));

var _Stack = _interopRequireDefault(require("../Stack"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

var _consts = require("./consts");

var _LazyImage = _interopRequireWildcard(require("../LazyImage"));

var _rtl = require("../utils/rtl");

var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));

var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));

const _excluded = ["height", "href", "theme", "shadows", "contentHeight", "isPlain", "width", "isClickable"];

const Shown = _styledComponents.default.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.default
};
const overlayCss = (0, _styledComponents.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 = _styledComponents.default.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.default
};

const StyledOverlay = _styledComponents.default.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, _rtl.left); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledOverlay.defaultProps = {
  theme: _defaultTheme.default
};

const StyledOverlayHover = _styledComponents.default.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, _rtl.left); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledOverlayHover.defaultProps = {
  theme: _defaultTheme.default
};

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

const StyledPictureCardContent = _styledComponents.default.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.default
};
const StyledPictureCard = (0, _styledComponents.default)((_ref) => {
  let {
    height,
    href,
    theme,
    shadows,
    contentHeight,
    isPlain,
    width,
    isClickable
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  const Component = href ? "a" : "div";
  return /*#__PURE__*/React.createElement(Component, (0, _extends2.default)({}, 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, _LazyImage.StyledLazyImage, ({
  theme
}) => theme.orbit.durationNormal, ({
  isClickable
}) => isClickable && "pointer", ({
  isPlain,
  theme,
  shadows
}) => !isPlain && (0, _styledComponents.css)(["&:hover,&:focus{outline:none;box-shadow:", ";", "{opacity:1;}", "{transform:scale(1.05);}", "{bottom:", ";}", "{opacity:1;bottom:0;}}"], shadows && theme.orbit.boxShadowActionActive, StyledOverlayHover, _LazyImage.StyledLazyImage, StyledPictureCardContent, ({
  contentHeight
}) => contentHeight && `${contentHeight}px`, Shown), ({
  isPlain
}) => isPlain && (0, _styledComponents.css)(["&:focus{outline:none;}"])); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPictureCard.defaultProps = {
  theme: _defaultTheme.default
};

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 = (0, _useRandomId.default)();
  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: (0, _handleKeyDown.default)(onClick),
    height: isPlain && height || parseInt(height, 10) >= _consts.SMALLEST_HEIGHT ? height : `${_consts.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.default, {
    original: code && original ? {
      webp: ` ${_consts.BASE_URL}/photos/${original}/${code}.webp`,
      jpg: `${_consts.BASE_URL}/photos/${original}/${code}.jpg`
    } : {
      "*": src
    },
    placeholder: placeholder && code ? {
      webp: ` ${_consts.BASE_URL}/photos/${placeholder}/${code}.webp`,
      jpg: `${_consts.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.default, {
    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));
};

var _default = PictureCard;
exports.default = _default;