{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/gkkdzdg/www/src/components/slideshowInline/SlideshowInline.js\";\nimport cn from 'classnames';\nimport Pagination from 'components/slideshow/Pagination';\nimport { useClientWidth } from 'hooks/useClientSize';\nimport { useEffect, useRef, useState } from 'react';\nimport styles from './SlideshowInline.module.scss'; // const ListArrow = ({ onClick, right }) => {\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' />}\n//             {!right && <Arrow size='large' direction='left' />}\n//          </Button>\n//       </div>\n//    )\n// }\n\nconst SlideshowInline = ({\n  className,\n  items,\n  renderItem,\n  pagination,\n  onIndexChange\n}) => {\n  const {\n    0: index,\n    1: setIndex\n  } = useState(0);\n  const scrollRef = useRef(null);\n  const clientWidth = useClientWidth();\n  const marginCoef = 1 / 32;\n  const margin = clientWidth * marginCoef;\n  const slideAndMarginWidth = clientWidth - margin;\n  useEffect(() => {\n    const onScroll = event => {\n      const newIndex = Math.floor((scrollRef.current.scrollLeft + 0.5 * slideAndMarginWidth) / slideAndMarginWidth);\n      setIndex(newIndex);\n      onIndexChange && onIndexChange(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  return /*#__PURE__*/_jsxDEV(_Fragment, {\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      ref: scrollRef,\n      className: cn(styles.slideshowContainer, className),\n      children: items && /*#__PURE__*/_jsxDEV(\"ul\", {\n        className: cn(styles.slideshow),\n        style: {\n          width: slideAndMarginWidth * items.length\n        },\n        children: items.map((item, i) => renderItem(item, styles.slideshowItem, i))\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 46,\n        columnNumber: 20\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 45,\n      columnNumber: 7\n    }, this), pagination && /*#__PURE__*/_jsxDEV(Pagination, {\n      items: items,\n      currentIndex: index,\n      className: cn(styles.pagination)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 53,\n      columnNumber: 22\n    }, this)]\n  }, void 0, true);\n};\n\nexport default SlideshowInline;","map":{"version":3,"sources":["/home/gkkdzdg/www/src/components/slideshowInline/SlideshowInline.js"],"names":["cn","Pagination","useClientWidth","useEffect","useRef","useState","styles","SlideshowInline","className","items","renderItem","pagination","onIndexChange","index","setIndex","scrollRef","clientWidth","marginCoef","margin","slideAndMarginWidth","onScroll","event","newIndex","Math","floor","current","scrollLeft","addEventListener","removeEventListener","slideshowContainer","slideshow","width","length","map","item","i","slideshowItem"],"mappings":";;;AACA,OAAOA,EAAP,MAAe,YAAf;AACA,OAAOC,UAAP,MAAuB,iCAAvB;AACA,SAASC,cAAT,QAA+B,qBAA/B;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,OAA5C;AACA,OAAOC,MAAP,MAAmB,+BAAnB,C,CAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,eAAe,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,KAAb;AAAoBC,EAAAA,UAApB;AAAgCC,EAAAA,UAAhC;AAA4CC,EAAAA;AAA5C,CAAD,KAAkE;AAEvF,QAAM;AAAA,OAACC,KAAD;AAAA,OAAQC;AAAR,MAAoBT,QAAQ,CAAC,CAAD,CAAlC;AACA,QAAMU,SAAS,GAAGX,MAAM,CAAC,IAAD,CAAxB;AACA,QAAMY,WAAW,GAAGd,cAAc,EAAlC;AAEA,QAAMe,UAAU,GAAI,IAAI,EAAxB;AACA,QAAMC,MAAM,GAAGF,WAAW,GAAGC,UAA7B;AACA,QAAME,mBAAmB,GAAGH,WAAW,GAAGE,MAA1C;AAEAf,EAAAA,SAAS,CAAC,MAAM;AACb,UAAMiB,QAAQ,GAAGC,KAAK,IAAI;AACvB,YAAMC,QAAQ,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACT,SAAS,CAACU,OAAV,CAAkBC,UAAlB,GAA+B,MAAMP,mBAAtC,IAA6DA,mBAAxE,CAAjB;AACAL,MAAAA,QAAQ,CAACQ,QAAD,CAAR;AACAV,MAAAA,aAAa,IAAIA,aAAa,CAACU,QAAD,CAA9B;AACF,KAJD;;AAKA,QAAIP,SAAS,IAAIA,SAAS,CAACU,OAA3B,EAAoC;AACjCV,MAAAA,SAAS,CAACU,OAAV,CAAkBE,gBAAlB,CAAmC,QAAnC,EAA6CP,QAA7C;AACF;;AACD,WAAO,MAAM;AACVL,MAAAA,SAAS,CAACU,OAAV,IAAqBV,SAAS,CAACU,OAAV,CAAkBG,mBAAlB,CAAsC,QAAtC,EAAgDR,QAAhD,CAArB;AACF,KAFD;AAGF,GAZQ,EAYN,CAACL,SAAS,CAACU,OAAX,EAAoBT,WAApB,CAZM,CAAT;AAcA,sBAAO;AAAA,4BACJ;AAAK,MAAA,GAAG,EAAED,SAAV;AAAqB,MAAA,SAAS,EAAEf,EAAE,CAACM,MAAM,CAACuB,kBAAR,EAA4BrB,SAA5B,CAAlC;AAAA,gBACIC,KAAK,iBAAI;AAAI,QAAA,SAAS,EAAET,EAAE,CAACM,MAAM,CAACwB,SAAR,CAAjB;AAAqC,QAAA,KAAK,EAAE;AAAEC,UAAAA,KAAK,EAAEZ,mBAAmB,GAAGV,KAAK,CAACuB;AAArC,SAA5C;AAAA,kBACNvB,KAAK,CAACwB,GAAN,CAAU,CAACC,IAAD,EAAOC,CAAP,KACRzB,UAAU,CAACwB,IAAD,EAAO5B,MAAM,CAAC8B,aAAd,EAA6BD,CAA7B,CADZ;AADM;AAAA;AAAA;AAAA;AAAA;AADb;AAAA;AAAA;AAAA;AAAA,YADI,EASHxB,UAAU,iBAAI,QAAC,UAAD;AACZ,MAAA,KAAK,EAAEF,KADK;AAEZ,MAAA,YAAY,EAAEI,KAFF;AAGZ,MAAA,SAAS,EAAEb,EAAE,CAACM,MAAM,CAACK,UAAR;AAHD;AAAA;AAAA;AAAA;AAAA,YATX;AAAA,kBAAP;AAeF,CAvCD;;AAyCA,eAAeJ,eAAf","sourcesContent":["\nimport cn from 'classnames'\nimport Pagination from 'components/slideshow/Pagination'\nimport { useClientWidth } from 'hooks/useClientSize'\nimport { useEffect, useRef, useState } from 'react'\nimport styles from './SlideshowInline.module.scss'\n\n\n// const ListArrow = ({ onClick, right }) => {\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' />}\n//             {!right && <Arrow size='large' direction='left' />}\n//          </Button>\n//       </div>\n//    )\n// }\n\nconst SlideshowInline = ({ className, items, renderItem, pagination, onIndexChange, }) => {\n\n   const [index, setIndex] = useState(0)\n   const scrollRef = useRef(null)\n   const clientWidth = useClientWidth()\n\n   const marginCoef = (1 / 32)\n   const margin = clientWidth * marginCoef\n   const slideAndMarginWidth = clientWidth - margin\n\n   useEffect(() => {\n      const onScroll = event => {\n         const newIndex = Math.floor((scrollRef.current.scrollLeft + 0.5 * slideAndMarginWidth) / slideAndMarginWidth)\n         setIndex(newIndex)\n         onIndexChange && onIndexChange(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   return <>\n      <div ref={scrollRef} className={cn(styles.slideshowContainer, className)}>\n         {items && <ul className={cn(styles.slideshow)} style={{ width: slideAndMarginWidth * items.length }}>\n            {items.map((item, i) =>\n               renderItem(item, styles.slideshowItem, i)\n            )}\n         </ul>}\n      </div>\n\n      {pagination && <Pagination\n         items={items}\n         currentIndex={index}\n         className={cn(styles.pagination)}\n         />}\n   </>\n}\n\nexport default SlideshowInline\n\n"]},"metadata":{},"sourceType":"module"}