{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport React from \"react\";\nimport cn from 'classnames';\nimport { Arrow } from 'components/gui/Arrow';\nimport Button from 'components/gui/Button';\nimport CircleButton from 'components/gui/CircleButton';\nimport { useClientWidth } from 'hooks/useClientSize';\nimport { usePreventBodyScroll } from 'hooks/usePreventBodyScroll';\nimport { useEffect, useRef, useState } from 'react';\n\nvar CloseSVG = function CloseSVG(props) {\n  return /*#__PURE__*/_jsx(\"svg\", _objectSpread(_objectSpread({}, props), {}, {\n    children: /*#__PURE__*/_jsx(\"path\", {\n      d: \"M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7 14 1.41z\"\n    })\n  }));\n};\n\nCloseSVG.defaultProps = {\n  width: \"14\",\n  height: \"14\",\n  viewBox: \"0 0 14 14\",\n  xmlns: \"http://www.w3.org/2000/svg\"\n};\nimport Pagination from './Pagination';\nimport styles from './Slideshow.module.scss';\n\nvar ListArrow = function ListArrow(_ref) {\n  var onClick = _ref.onClick,\n      right = _ref.right,\n      _ref$color = _ref.color,\n      color = _ref$color === void 0 ? 'white' : _ref$color;\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: cn(styles.arrowButtonCont, right && styles.arrowButtonContRight),\n    children: /*#__PURE__*/_jsxs(Button, {\n      onClick: onClick,\n      className: cn(styles.arrowButton),\n      children: [right && /*#__PURE__*/_jsx(Arrow, {\n        size: \"large\",\n        direction: \"right\",\n        color: color\n      }), !right && /*#__PURE__*/_jsx(Arrow, {\n        size: \"large\",\n        direction: \"left\",\n        color: color\n      })]\n    })\n  });\n}; // export const SlideshowContained = ({ className, images, openOn, onClose, }) => {\n//    const scrollRef = useRef()\n//    const listRef = useRef()\n//    const [boundsWidth, setBoundsWidth] = useState(100)\n//    const [index, setIndex] = useState(images.indexOf(openOn))\n//    useEffect(() => {\n//       if (scrollRef.current) {\n//          setBoundsWidth(scrollRef.current.clientWidth)\n//       }\n//    }, [])\n//    useEffect(() => {\n//       const onScroll = event => {\n//          const newIndex = Math.floor((scrollRef.current.scrollLeft + 0.5 * boundsWidth) / boundsWidth)\n//          setIndex(newIndex)\n//       }\n//       if (scrollRef && scrollRef.current) {\n//          scrollRef.current.addEventListener('scroll', onScroll)\n//       }\n//       return () => {\n//          scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll)\n//       }\n//    }, [scrollRef.current, boundsWidth])\n//    const handleClick = (inc) => {\n//       const newIndex = index + inc\n//       if (newIndex >= 0 && newIndex < images.length) {\n//          scrollRef.current.scrollTo({ top: 0, left: newIndex * boundsWidth, behavior: 'smooth' })\n//          setIndex(newIndex)\n//       }\n//    }\n//    // console.log('Slideshow.js::56 boundsWidth', boundsWidth, index)\n//    return (<>\n//       <div className={cn(\n//          styles.slideshowContained,\n//          className,\n//       )}\n//          ref={scrollRef}\n//       >\n//          <ul className={cn(styles.list)}\n//             ref={listRef}\n//             style={{\n//                width: boundsWidth * images.length\n//             }}\n//          >\n//             {images && images.map((item, i) =>\n//                <li key={item + i} className={styles.item}>\n//                   <img src={item} />\n//                </li>\n//             )}\n//          </ul>\n//          {/* <div\n//             onClick={onClose}\n//             className={cn(styles.closeButton)}>\n//             <CloseSVG />\n//          </div> */}\n//       </div>\n//       {index > 0 &&\n//          <ListArrow onClick={() => handleClick(-1)} absolute />}\n//       {index < images.length - 1 &&\n//          <ListArrow onClick={() => handleClick(1)} right absolute />}\n//    </>\n//    )\n// }\n\n\nvar Slideshow = function Slideshow(_ref2) {\n  var className = _ref2.className,\n      images = _ref2.images,\n      openOn = _ref2.openOn,\n      onClose = _ref2.onClose,\n      fullScreen = _ref2.fullScreen,\n      withArrows = _ref2.withArrows,\n      arrowsColor = _ref2.arrowsColor,\n      pagination = _ref2.pagination;\n  var containerRef = useRef();\n  var scrollRef = useRef();\n  var listRef = useRef();\n  var clientWidth = useClientWidth();\n\n  var _useState = useState(0),\n      boundsWidth = _useState[0],\n      setBoundsWidth = _useState[1];\n\n  var _useState2 = useState(openOn),\n      scollToOnOpen = _useState2[0],\n      setScollToOnOpen = _useState2[1];\n\n  var _useState3 = useState(openOn ? images.indexOf(openOn) == -1 ? 0 : images.indexOf(openOn) : 0),\n      index = _useState3[0],\n      setIndex = _useState3[1];\n\n  if (fullScreen) usePreventBodyScroll();\n  useEffect(function () {\n    if (containerRef.current) {\n      var _boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth;\n\n      setBoundsWidth(_boundsWidth);\n\n      if (scollToOnOpen) {\n        scrollRef.current.scrollLeft = index * _boundsWidth;\n        setScollToOnOpen(null);\n      }\n    }\n  }, []);\n  useEffect(function () {\n    var boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth;\n\n    if (fullScreen) {\n      setBoundsWidth(boundsWidth);\n    }\n\n    var onScroll = function onScroll(event) {\n      var newIndex = (scrollRef.current.scrollLeft + 0.5 * boundsWidth) / boundsWidth;\n      if (newIndex % 1 > 0.4 && newIndex % 1 < 0.6) setIndex(Math.floor(newIndex));\n    };\n\n    if (scrollRef && scrollRef.current) {\n      scrollRef.current.addEventListener('scroll', onScroll);\n    }\n\n    return function () {\n      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);\n    };\n  }, [scrollRef.current, clientWidth]);\n\n  var handleClick = function handleClick(inc) {\n    var newIndex = index + inc;\n\n    if (newIndex >= 0 && newIndex < images.length) {\n      scrollRef.current.scrollTo({\n        top: 0,\n        left: newIndex * clientWidth,\n        behavior: 'smooth'\n      }); //setIndex(newIndex) // done from 'scroll' event handler\n    }\n  };\n\n  return /*#__PURE__*/_jsxs(\"div\", {\n    className: cn(styles.container, fullScreen ? styles.fullScreen : styles.contained, className),\n    ref: containerRef,\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      className: cn(styles.slideshow),\n      ref: scrollRef,\n      children: /*#__PURE__*/_jsx(\"ul\", {\n        className: cn(styles.list),\n        ref: listRef,\n        style: {\n          width: boundsWidth ? boundsWidth * images.length : 'auto'\n        },\n        children: images && images.map(function (item, i) {\n          return /*#__PURE__*/_jsx(\"li\", {\n            className: styles.item,\n            children: /*#__PURE__*/_jsx(\"img\", {\n              src: item\n            })\n          }, item + i);\n        })\n      })\n    }), onClose && /*#__PURE__*/_jsx(CircleButton, {\n      onClick: onClose,\n      className: cn(styles.closeButton),\n      icon: \"close\"\n    }), withArrows && index > 0 && /*#__PURE__*/_jsx(ListArrow, {\n      onClick: function onClick() {\n        return handleClick(-1);\n      },\n      color: arrowsColor\n    }), withArrows && index < images.length - 1 && /*#__PURE__*/_jsx(ListArrow, {\n      onClick: function onClick() {\n        return handleClick(1);\n      },\n      color: arrowsColor,\n      right: true\n    }), pagination && /*#__PURE__*/_jsx(Pagination, {\n      items: images,\n      currentIndex: index //className={cn(styles.pagination)}\n\n    })]\n  });\n};\n\nexport default Slideshow;","map":null,"metadata":{},"sourceType":"module"}