{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/slideshow/Slideshow.js\";\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\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\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\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\nconst ListArrow = ({\n  onClick,\n  right,\n  color = 'white'\n}) => {\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\nconst Slideshow = ({\n  className,\n  images,\n  openOn,\n  onClose,\n  fullScreen,\n  withArrows,\n  arrowsColor,\n  pagination\n}) => {\n  const containerRef = useRef();\n  const scrollRef = useRef();\n  const listRef = useRef();\n  const clientWidth = useClientWidth();\n  const {\n    0: boundsWidth,\n    1: setBoundsWidth\n  } = useState(0);\n  const {\n    0: scollToOnOpen,\n    1: setScollToOnOpen\n  } = useState(openOn);\n  const {\n    0: index,\n    1: setIndex\n  } = useState(openOn ? images.indexOf(openOn) == -1 ? 0 : images.indexOf(openOn) : 0);\n  if (fullScreen) usePreventBodyScroll();\n  useEffect(() => {\n    if (containerRef.current) {\n      const boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth;\n      setBoundsWidth(boundsWidth);\n\n      if (scollToOnOpen) {\n        scrollRef.current.scrollLeft = index * boundsWidth;\n        setScollToOnOpen(null);\n      }\n    }\n  }, []);\n  useEffect(() => {\n    const boundsWidth = fullScreen ? clientWidth : containerRef.current.clientWidth;\n\n    if (fullScreen) {\n      setBoundsWidth(boundsWidth);\n    }\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\n    if (scrollRef && scrollRef.current) {\n      scrollRef.current.addEventListener('scroll', onScroll);\n    }\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\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((item, i) => /*#__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      }, 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: () => handleClick(-1),\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: () => handleClick(1),\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\nexport default Slideshow;","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","index","setIndex","indexOf","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"}