@mirrormedia/lilith-draft-renderer/lib/website/readr/components/slideshow-lightbox.js

## Introduction

"use strict";

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

var _reactImage = _interopRequireDefault(require("@readr-media/react-image"));

var _react = _interopRequireDefault(require("react"));

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

var _slideshowSidebar = _interopRequireDefault(require("./slideshow-sidebar"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const defaultImage = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/722f90c535fa64c27555ec6ee5f22393.png";
const closeCross = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/903cf84ef5c5ad76634c30bdc0ff8c49.png";
const LightBoxWrapper = _styledComponents.default.div`
  display: none;

  ${({
  theme
}) => theme.breakpoint.xl} {
    background: #000928;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
    padding: 0 72px 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
  }
`;
const FocusImageWrapper = _styledComponents.default.div`
  font-weight: 400;
  ${({
  theme
}) => theme.fontSize.sm};
  line-height: 23px;
  text-align: center;
  color: #ffffff;
`;
const FocusImage = _styledComponents.default.figure`
  max-width: 900px;
  max-height: 480px;
  overflow: hidden;
  margin-bottom: 32px;

  ${({
  theme
}) => theme.breakpoint.xxl} {
    max-width: 960px;
  }
`;
const FocusInfo = _styledComponents.default.div`
  .focus-desc {
    max-height: 46px;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    opacity: 0.87;
    margin-bottom: 12px;
  }

  .focus-number {
    opacity: 0.5;
    margin-top: 12px;
  }
`;
const CloseButtonWrapper = _styledComponents.default.div`
  height: 60vh;
  width: 64px;
  position: relative;
`;
const CloseButton = _styledComponents.default.div`
  background-image: url(${closeCross});
  width: 64px;
  height: 64px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  position: absolute;
  top: -64px;
  border-radius: 50%;
  background-size: 64px;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
`;

function SlideshowLightBox({
  focusImageIndex,
  images,
  setShowLightBox,
  setFocusImageIndex,
  imagesRefs
}) {
  const focusImageDesc = `${images[focusImageIndex].desc}`;
  const focusNumber = `${focusImageIndex + 1} / ${images === null || images === void 0 ? void 0 : images.length}`;
  return /*#__PURE__*/_react.default.createElement(LightBoxWrapper, null, /*#__PURE__*/_react.default.createElement(_slideshowSidebar.default, {
    focusImageIndex: focusImageIndex,
    images: images,
    setFocusImageIndex: setFocusImageIndex,
    imagesRefs: imagesRefs
  }), /*#__PURE__*/_react.default.createElement(FocusImageWrapper, null, /*#__PURE__*/_react.default.createElement(FocusImage, null, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
    images: images[focusImageIndex].resized,
    defaultImage: defaultImage,
    alt: images[focusImageIndex].name,
    rwd: {
      desktop: '64px',
      default: '100%'
    },
    priority: true
  })), /*#__PURE__*/_react.default.createElement(FocusInfo, null, /*#__PURE__*/_react.default.createElement("p", {
    className: "focus-desc"
  }, focusImageDesc), /*#__PURE__*/_react.default.createElement("p", {
    className: "focus-number"
  }, focusNumber))), /*#__PURE__*/_react.default.createElement(CloseButtonWrapper, null, /*#__PURE__*/_react.default.createElement(CloseButton, {
    onClick: e => {
      e.preventDefault();
      setShowLightBox(false);
    }
  })));
}