{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/slideshow/Slideshow.js\",\n    _this = this,\n    _s = $RefreshSig$();\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__*/_jsxDEV(\"svg\", _objectSpread(_objectSpread({}, props), {}, {\n    children: /*#__PURE__*/_jsxDEV(\"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    }, void 0, false, void 0, this)\n  }), void 0, false, void 0, this);\n};\n\n_c3 = CloseSVG;\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__*/_jsxDEV(\"div\", {\n    className: cn(styles.arrowButtonCont, right && styles.arrowButtonContRight),\n    children: /*#__PURE__*/_jsxDEV(Button, {\n      onClick: onClick,\n      className: cn(styles.arrowButton),\n      children: [right && /*#__PURE__*/_jsxDEV(Arrow, {\n        size: \"large\",\n        direction: \"right\",\n        color: color\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 18,\n        columnNumber: 23\n      }, _this), !right && /*#__PURE__*/_jsxDEV(Arrow, {\n        size: \"large\",\n        direction: \"left\",\n        color: color\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 19,\n        columnNumber: 24\n      }, _this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 17,\n      columnNumber: 10\n    }, _this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 16,\n    columnNumber: 7\n  }, _this);\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\n_c = ListArrow;\n\nvar Slideshow = function Slideshow(_ref2) {\n  _s();\n\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__*/_jsxDEV(\"div\", {\n    className: cn(styles.container, fullScreen ? styles.fullScreen : styles.contained, className),\n    ref: containerRef,\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: cn(styles.slideshow),\n      ref: scrollRef,\n      children: /*#__PURE__*/_jsxDEV(\"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__*/_jsxDEV(\"li\", {\n            className: styles.item,\n            children: /*#__PURE__*/_jsxDEV(\"img\", {\n              src: item\n            }, void 0, false, {\n              fileName: _jsxFileName,\n              lineNumber: 167,\n              columnNumber: 22\n            }, _this)\n          }, item + i, false, {\n            fileName: _jsxFileName,\n            lineNumber: 166,\n            columnNumber: 19\n          }, _this);\n        })\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 159,\n        columnNumber: 13\n      }, _this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 154,\n      columnNumber: 10\n    }, _this), onClose && /*#__PURE__*/_jsxDEV(CircleButton, {\n      onClick: onClose,\n      className: cn(styles.closeButton),\n      icon: \"close\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 174,\n      columnNumber: 22\n    }, _this), withArrows && index > 0 && /*#__PURE__*/_jsxDEV(ListArrow, {\n      onClick: function onClick() {\n        return handleClick(-1);\n      },\n      color: arrowsColor\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 181,\n      columnNumber: 13\n    }, _this), withArrows && index < images.length - 1 && /*#__PURE__*/_jsxDEV(ListArrow, {\n      onClick: function onClick() {\n        return handleClick(1);\n      },\n      color: arrowsColor,\n      right: true\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 183,\n      columnNumber: 13\n    }, _this), pagination && /*#__PURE__*/_jsxDEV(Pagination, {\n      items: images,\n      currentIndex: index //className={cn(styles.pagination)}\n\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 186,\n      columnNumber: 25\n    }, _this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 147,\n    columnNumber: 7\n  }, _this);\n};\n\n_s(Slideshow, \"0LhdMLAVVt5cRFxf1BYPh/hvmRc=\", false, function () {\n  return [useClientWidth, usePreventBodyScroll];\n});\n\n_c2 = Slideshow;\nexport default Slideshow;\n\nvar _c, _c2, _c3;\n\n$RefreshReg$(_c, \"ListArrow\");\n$RefreshReg$(_c2, \"Slideshow\");\n$RefreshReg$(_c3, \"CloseSVG\");","map":{"version":3,"sources":["/home/gkkdzdg/www/src/components/slideshow/Slideshow.js"],"names":["cn","Arrow","Button","CircleButton","useClientWidth","usePreventBodyScroll","useEffect","useRef","useState","CloseSVG","Pagination","styles","ListArrow","onClick","right","color","arrowButtonCont","arrowButtonContRight","arrowButton","Slideshow","className","images","openOn","onClose","fullScreen","withArrows","arrowsColor","pagination","containerRef","scrollRef","listRef","clientWidth","boundsWidth","setBoundsWidth","scollToOnOpen","setScollToOnOpen","indexOf","index","setIndex","current","scrollLeft","onScroll","event","newIndex","Math","floor","addEventListener","removeEventListener","handleClick","inc","length","scrollTo","top","left","behavior","container","contained","slideshow","list","width","map","item","i","closeButton"],"mappings":"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","sourcesContent":["\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'\nimport CloseSVG from '../../svgs/close.svg'\nimport Pagination from './Pagination'\nimport styles from './Slideshow.module.scss'\n\n\nconst ListArrow = ({ onClick, right, color = 'white', }) => {\n   return (\n      <div className={cn(styles.arrowButtonCont, right && styles.arrowButtonContRight,)}>\n         <Button onClick={onClick} className={cn(styles.arrowButton)}>\n            {right && <Arrow size='large' direction='right' color={color} />}\n            {!right && <Arrow size='large' direction='left' color={color} />}\n         </Button>\n      </div>\n   )\n}\n\n// export const SlideshowContained = ({ className, images, openOn, onClose, }) => {\n\n//    const scrollRef = useRef()\n//    const listRef = useRef()\n//    const [boundsWidth, setBoundsWidth] = useState(100)\n//    const [index, setIndex] = useState(images.indexOf(openOn))\n\n//    useEffect(() => {\n//       if (scrollRef.current) {\n//          setBoundsWidth(scrollRef.current.clientWidth)\n//       }\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\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\n//    // console.log('Slideshow.js::56 boundsWidth', boundsWidth, index)\n\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\n//          {/* <div\n//             onClick={onClose}\n//             className={cn(styles.closeButton)}>\n//             <CloseSVG />\n//          </div> */}\n\n//       </div>\n\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\nconst Slideshow = ({ className, images, openOn, onClose, fullScreen, withArrows, arrowsColor, pagination, }) => {\n\n   const containerRef = useRef()\n   const scrollRef = useRef()\n   const listRef = useRef()\n   const clientWidth = useClientWidth()\n   const [boundsWidth, setBoundsWidth] = useState(0)\n   const [scollToOnOpen, setScollToOnOpen] = useState(openOn)\n   const [index, setIndex] = useState(openOn ? images.indexOf(openOn) == -1 ? 0 : images.indexOf(openOn) : 0)\n\n   if (fullScreen) usePreventBodyScroll()\n\n   useEffect(() => {\n      if (containerRef.current) {\n         const boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth\n         setBoundsWidth(boundsWidth)\n         if (scollToOnOpen) {\n            scrollRef.current.scrollLeft = index * boundsWidth\n            setScollToOnOpen(null)\n         }\n      }\n   }, [])\n\n   useEffect(() => {\n      const boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth\n      if (fullScreen) {\n         setBoundsWidth(boundsWidth)\n      }\n      const onScroll = event => {\n         const newIndex = (scrollRef.current.scrollLeft + 0.5 * boundsWidth) / boundsWidth\n         if (newIndex % 1 > 0.4 && newIndex % 1 < 0.6) setIndex(Math.floor(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, clientWidth])\n\n   const handleClick = (inc) => {\n      const newIndex = index + inc\n      if (newIndex >= 0 && newIndex < images.length) {\n         scrollRef.current.scrollTo({ top: 0, left: newIndex * clientWidth, behavior: 'smooth' })\n         //setIndex(newIndex) // done from 'scroll' event handler\n      }\n   }\n\n   return (\n      <div className={cn(\n         styles.container,\n         fullScreen ? styles.fullScreen : styles.contained,\n         className,\n      )}\n         ref={containerRef}\n      >\n         <div className={cn(\n            styles.slideshow,\n         )}\n            ref={scrollRef}\n         >\n            <ul className={cn(styles.list)}\n               ref={listRef}\n               style={{\n                  width: boundsWidth ? boundsWidth * images.length : 'auto',\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\n         </div>\n\n         {onClose && <CircleButton\n            onClick={onClose}\n            className={cn(styles.closeButton)}\n            icon='close'\n         />}\n\n         {withArrows && index > 0 &&\n            <ListArrow onClick={() => handleClick(-1)} color={arrowsColor} />}\n         {withArrows && index < images.length - 1 &&\n            <ListArrow onClick={() => handleClick(1)} color={arrowsColor} right />}\n\n\n         {pagination && <Pagination\n            items={images}\n            currentIndex={index}\n            //className={cn(styles.pagination)}\n         />}\n      </div>\n   )\n}\n\nexport default Slideshow\n\n"]},"metadata":{},"sourceType":"module"}