{"version":3,"sources":["webpack:///./scripts/Components/CategorySubnavigation/CategorySubnavigation.js"],"names":["CategorySubnavigation","items","outerContainer","useRef","showLeftShadow","showRightShadow","setScrollWidth","setClientWidth","scrollProps","initScrollWidth","scrollLeft","setScrollLeft","useState","scrollWidth","clientWidth","Math","ceil","onScroll","event","target","useScrollLeft","shadowClass","useEffect","updateScrollWidths","current","window","addEventListener","removeEventListener","React","className","translate","_extends","ref","map","item","key","href","url","title"],"mappings":"qWAyBA,MA0DA,EA1D8BA,EAAGC,YAC/B,MAAMC,GAAiBC,YAAO,OAE5BC,EACAC,EACAC,EACAC,EACAC,GA7BJ,SAAuBC,GACrB,MAAOC,EAAYC,IAAiBC,cAAS,IACtCC,EAAaP,IAAkBM,cAASH,IACxCK,EAAaP,IAAkBK,cAAS,GAU/C,MAAO,CAHgBF,EAAa,EACZG,EAAcC,EAAcC,KAAKC,KAAKN,GAK5DJ,EACAC,EACA,CAAEU,SAdcC,IAChBP,EAAcO,EAAMC,OAAOT,YAC3BJ,EAAeY,EAAMC,OAAON,aAC5BN,EAAeW,EAAMC,OAAOL,YAAY,GAa5C,CAUMM,CAAc,KAElB,IAAIC,EAAc,GAoBlB,OAnBIjB,GAAkBC,EACpBgB,EAAc,iDACLjB,EACTiB,EAAc,iDACLhB,IACTgB,EAAc,oDAGhBC,gBAAU,KACR,SAASC,IACPhB,EAAeL,EAAesB,QAAQV,aACtCR,EAAeJ,EAAesB,QAAQX,YACxC,CAIA,OAFAY,OAAOC,iBAAiB,SAAUH,GAClCA,IACO,IAAME,OAAOE,oBAAoB,SAAUJ,EAAmB,IAIrEK,gBAAA,OAAKC,UAAU,OACbD,gBAAA,OAAKC,UAAU,qCACbD,gBAAA,OAAKC,UAAU,kCACZC,OAAU,yBAAyB,KAEtCF,gBAAA,OAAKC,UAAU,2CACbD,gBAAA,MAAAG,EAAA,CACEC,IAAK9B,EACL2B,UAAW,iCAAiCR,KACxCb,GAEHP,EAAMgC,KAAI,CAACC,EAAMC,IAChBP,gBAAA,KACEO,IAAKA,EACLC,KAAMF,EAAKG,IACXR,UAAU,gCAETK,EAAKI,YAMZ,C","file":"5897.1bcb1df56cd4d0aa47f0.js","sourcesContent":["import React, { useEffect, useState, useRef } from 'react';\nimport { translate } from '../../Services/translation';\n\nfunction useScrollLeft(initScrollWidth) {\n  const [scrollLeft, setScrollLeft] = useState(0);\n  const [scrollWidth, setScrollWidth] = useState(initScrollWidth);\n  const [clientWidth, setClientWidth] = useState(0);\n  const onScroll = (event) => {\n    setScrollLeft(event.target.scrollLeft);\n    setScrollWidth(event.target.scrollWidth);\n    setClientWidth(event.target.clientWidth);\n  };\n\n  const showLeftShadow = scrollLeft > 0;\n  const showRightShadow = scrollWidth > clientWidth + Math.ceil(scrollLeft);\n\n  return [\n    showLeftShadow,\n    showRightShadow,\n    setScrollWidth,\n    setClientWidth,\n    { onScroll },\n  ];\n}\n\nconst CategorySubnavigation = ({ items }) => {\n  const outerContainer = useRef(null);\n  const [\n    showLeftShadow,\n    showRightShadow,\n    setScrollWidth,\n    setClientWidth,\n    scrollProps,\n  ] = useScrollLeft(1000);\n\n  let shadowClass = '';\n  if (showLeftShadow && showRightShadow) {\n    shadowClass = 'category-subnavigation__links--can-scroll-both';\n  } else if (showLeftShadow) {\n    shadowClass = 'category-subnavigation__links--can-scroll-left';\n  } else if (showRightShadow) {\n    shadowClass = 'category-subnavigation__links--can-scroll-right';\n  }\n\n  useEffect(() => {\n    function updateScrollWidths() {\n      setClientWidth(outerContainer.current.clientWidth);\n      setScrollWidth(outerContainer.current.scrollWidth);\n    }\n\n    window.addEventListener('resize', updateScrollWidths);\n    updateScrollWidths();\n    return () => window.removeEventListener('resize', updateScrollWidths);\n  });\n\n  return (\n    <div className=\"row\">\n      <div className=\"category-subnavigation__container\">\n        <div className=\"category-subnavigation__title\">\n          {translate('general.subcategories')}:\n        </div>\n        <div className=\"category-subnavigation__links-container\">\n          <div\n            ref={outerContainer}\n            className={`category-subnavigation__links ${shadowClass}`}\n            {...scrollProps}\n          >\n            {items.map((item, key) => (\n              <a\n                key={key}\n                href={item.url}\n                className=\"category-subnavigation__link\"\n              >\n                {item.title}\n              </a>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default CategorySubnavigation;\n"],"sourceRoot":""}