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

## Introduction

"use strict";

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

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

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

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 arrowDown = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/f96d4b486ba2061c460962ae694f4670.png";
const arrowUp = "https://unpkg.com/@mirrormedia/lilith-draft-renderer@1.4.0/lib/public/679d63b1846e81ada28c2f76edbd2931.png";
const arrowShareStyle = (0, _styledComponents.css)`
  width: 64px;
  height: 64px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 64px;
  cursor: pointer;
  border-radius: 50%;
  visibility: ${props => props.shouldHideArrow ? 'hidden' : 'visible'};

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
`;
const SideBarWrapper = _styledComponents.default.div`
  width: 64px;
  position: relative;

  .sidebar-images {
    overflow-y: scroll;
    max-height: 520px;
    scrollbar-width: none;
    margin: 12px auto;

    &::-webkit-scrollbar {
      display: none; /* for Chrome, Safari, and Opera */
    }
  }
`;
const ArrowUp = _styledComponents.default.div`
  ${arrowShareStyle}
  background-image: url(${arrowUp});
`;
const ArrowDown = _styledComponents.default.div`
  ${arrowShareStyle}
  background-image: url(${arrowDown});
`;
const SideBarImage = _styledComponents.default.div`
  width: 100%;
  aspect-ratio: 1/1;
  cursor: pointer;
  filter: ${props => props.isfocused ? 'none' : 'brightness(35%)'};

  &:hover {
    filter: ${props => props.isfocused ? 'none' : 'brightness(60%)'};
  }

  & + * {
    margin-top: 12px;
  }
`;

function SlideshowSideBar({
  focusImageIndex,
  images,
  setFocusImageIndex,
  imagesRefs
}) {
  const handleScrollUp = () => {
    if (focusImageIndex > 0) {
      var _imagesRefs$current;

      setFocusImageIndex(focusImageIndex - 1);
      imagesRefs === null || imagesRefs === void 0 ? void 0 : (_imagesRefs$current = imagesRefs.current[focusImageIndex - 1]) === null || _imagesRefs$current === void 0 ? void 0 : _imagesRefs$current.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  };

  const handleScrollDown = () => {
    if (focusImageIndex < (images === null || images === void 0 ? void 0 : images.length) - 1) {
      var _imagesRefs$current2;

      setFocusImageIndex(focusImageIndex + 1);
      imagesRefs === null || imagesRefs === void 0 ? void 0 : (_imagesRefs$current2 = imagesRefs.current[focusImageIndex + 1]) === null || _imagesRefs$current2 === void 0 ? void 0 : _imagesRefs$current2.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  };

  const handleScrollIntoView = index => {
    var _imagesRefs$current$i;

    setFocusImageIndex(index);
    imagesRefs === null || imagesRefs === void 0 ? void 0 : (_imagesRefs$current$i = imagesRefs.current[index]) === null || _imagesRefs$current$i === void 0 ? void 0 : _imagesRefs$current$i.scrollIntoView({
      behavior: 'smooth',
      block: 'center'
    });
  };

  const sideBarImages = images.map((image, index) => {
    return /*#__PURE__*/_react.default.createElement(SideBarImage, {
      key: image === null || image === void 0 ? void 0 : image.id,
      isfocused: focusImageIndex === index,
      onClick: () => {
        handleScrollIntoView(index);
      },
      ref: el => {
        if (imagesRefs !== null && imagesRefs !== void 0 && imagesRefs.current) {
          imagesRefs.current[index] = el;
        }
      }
    }, /*#__PURE__*/_react.default.createElement(_reactImage.default, {
      images: image === null || image === void 0 ? void 0 : image.resized,
      defaultImage: defaultImage,
      alt: image === null || image === void 0 ? void 0 : image.name,
      rwd: {
        desktop: '64px',
        default: '100%'
      },
      priority: true
    }));
  });
  return /*#__PURE__*/_react.default.createElement(SideBarWrapper, null, /*#__PURE__*/_react.default.createElement(ArrowUp, {
    onClick: handleScrollUp,
    shouldHideArrow: focusImageIndex === 0
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "sidebar-images"
  }, sideBarImages), /*#__PURE__*/_react.default.createElement(ArrowDown, {
    onClick: handleScrollDown,
    shouldHideArrow: focusImageIndex + 1 === (images === null || images === void 0 ? void 0 : images.length)
  }));
}