{"version":3,"sources":["webpack:///./Scripts/Containers/BrandListContainer.js"],"names":["BrandListContainer","props","json","JSON","parse","brands","allBrands","useState","brandsToList","setBrandsToList","title","reactChildRef","createRef","useEffect","current","children","child","appendChild","getScrollPosition","element","yOffset","Math","abs","document","getElementById","getBoundingClientRect","height","top","window","pageYOffset","className","placeholder","type","onChange","e","searchTerm","target","value","filtered","obj","Brands","f","Name","toLowerCase","LetterGroupId","o","filter","i","key","onClick","id","scrollTo","offsetValue","behavior","ref","length","brand","br","href","Url","style","color","pageTag","tmpPageTag","replace","charAt","toUpperCase","formatPageTag","PageTag","justifyContent","translate"],"mappings":"o3CAmGeA,UAhGY,SAAAC,GACvB,IAAMC,EAAOC,KAAKC,MAAMH,EAAMI,QACxBC,EAAYJ,EAFc,EAGQK,mBAASL,GAHjB,WAGzBM,EAHyB,KAGXC,EAHW,KAIxBC,EAAUT,EAAVS,MACFC,EAAgBC,sBACtBC,qBAAU,WACN,GAAIF,GAAiBA,EAAcG,QAAS,WACtBb,EAAMc,UADgB,IACxC,2BAAkC,KAAzBC,EAAyB,QAC9BL,EAAcG,QAAQG,YAAYD,IAFE,kCAK7C,CAACL,IAEJ,IAKMO,EAAoB,SAAAC,GACtB,IAAMC,GAAWC,KAAKC,IAAIC,SAASC,eAAe,UAAUC,wBAAwBC,QACpF,OAAOP,EAAQM,wBAAwBE,IAAMC,OAAOC,YAAcT,GAuBtE,OACI,oCACI,wBAAIU,UAAU,uBAAuBpB,GACrC,yBAAKoB,UAAU,0BACX,yBAAKA,UAAU,OACX,yBAAKA,UAAU,gDACX,2BAAOC,YAAY,qBAAqBC,KAAK,SAASF,UAAU,yCAAyCG,SAAU,SAAAC,GAAC,OA3B7GC,EA2BoID,EAAEE,OAAOC,MA1BhKC,EAAW,IAAAhC,GAAS,KAATA,GAAiB,SAAAiC,GAAO,MACnC,OAAO,MAAAA,EAAIC,QAAJ,QAAgB,SAAAC,GAAC,aAAI,MAAAA,EAAEC,KAAKC,eAAP,OAA8BR,EAAWQ,0BAGzElC,EAAgB,IAAA6B,GAAQ,KAARA,GAAa,SAAAC,GAAO,MAChC,MAAO,CACHK,cAAeL,EAAIK,cACnBJ,OAAQ,MAAAD,EAAIC,QAAJ,QAAkB,SAAAK,GAAC,aAAI,MAAAA,EAAEH,KAAKC,eAAP,OAA8BR,EAAWQ,uBARzD,IAAAR,EACnBG,KA2BY,uBAAGR,UAAU,0BAGrB,wBAAIA,UAAU,2BACd,yBAAKA,UAAU,mDACX,wBAAIA,UAAU,uDACTtB,EACG,IAAAA,GAAY,KAAZA,GAAiB,SAACsC,EAAQC,GAAM,MAC5B,OACI,wBAAIC,IAAG,oBAASF,EAAOF,cAAhB,aAAiCG,GAAKE,QAAS,SAAAf,GAAC,OA9CvDgB,EA8CkF,gBAAkBJ,EAAOF,cA7CnIO,EAAW5B,SAASC,eAAe0B,GACnCE,EAAclC,EAAkBiC,QACpCvB,OAAOuB,SAAS,CAAExB,IAAKyB,EAAaC,SAAU,WAHtB,IAAIH,EACxBC,EACAC,IA4CmJ,2BAAIN,EAAOF,mBAEzI,OAIjB,wBAAId,UAAU,4BAElB,yBAAKwB,IAAK3C,IAEV,wBAAImB,UAAU,eACTtB,EAAa+C,OAAS,IAAA/C,GAAY,KAAZA,GAAiB,SAAAgD,GAAS,MAC7C,OACI,wBAAIN,GAAE,uBAAkBM,EAAMZ,eAAiBd,UAAU,yBAAyBkB,IAAG,sBAAiBQ,EAAMZ,gBACxG,0BAAMd,UAAU,uDAAuD0B,EAAMZ,eAC7E,wBAAId,UAAU,mDACV,wBAAIA,UAAU,6BAEN,MAAA0B,EAAMhB,QAAN,QAAiB,SAAAiB,GACb,OACI,yBAAK3B,UAAU,8DAA8DkB,IAAG,gBAAWS,EAAGf,OAC1F,uBAAGgB,KAAMD,EAAGE,KAAMF,EAAGf,MACrB,0BAAMkB,MAAO,CAAEC,MAAO,WAAa/B,UAAU,uCA9CvE,SAACgC,GACnB,GAAIA,EAAS,CACT,IAAIC,EAAaD,EAAQE,QAAQ,IAAK,KACtC,OAAOD,EAAWE,OAAO,GAAGC,cAAgB,IAAAH,GAAU,KAAVA,EAAiB,GAEjE,MAAO,GAyCyHI,CAAcV,EAAGW,oBASpI,wBAAItC,UAAU,gEAAgE8B,MAAO,CAAES,eAAgB,WAAaC,YAAU","file":"50.181e5639ea30d8418e3f.js","sourcesContent":["import React, { useState, useEffect, createRef } from \"react\"\r\nimport ReactDOM from \"react-dom\"\r\nimport { translate } from '../Services/translation'\r\nconst BrandListContainer = props => {\r\n    const json = JSON.parse(props.brands)\r\n    const allBrands = json\r\n    const [brandsToList, setBrandsToList] = useState(json)\r\n    const { title } = props\r\n    const reactChildRef = createRef()\r\n    useEffect(() => {\r\n        if (reactChildRef && reactChildRef.current) {\r\n            for (var child of props.children) {\r\n                reactChildRef.current.appendChild(child)\r\n            }\r\n        }\r\n    }, [reactChildRef])\r\n\r\n    const handleClickOnLetter = (e, id) => {\r\n        let scrollTo = document.getElementById(id)\r\n        let offsetValue = getScrollPosition(scrollTo)\r\n        window.scrollTo({ top: offsetValue, behavior: \"smooth\" })\r\n    }\r\n    const getScrollPosition = element => {\r\n        const yOffset = -Math.abs(document.getElementById(\"header\").getBoundingClientRect().height)\r\n        return element.getBoundingClientRect().top + window.pageYOffset + yOffset\r\n    }\r\n    const handleSearchChange = searchTerm => {\r\n        let filtered = allBrands.filter(obj => {\r\n            return obj.Brands.find(f => f.Name.toLowerCase().includes(searchTerm.toLowerCase()))\r\n        })\r\n\r\n        setBrandsToList(filtered.map(obj => {\r\n            return {\r\n                LetterGroupId: obj.LetterGroupId,\r\n                Brands: obj.Brands.filter(o => o.Name.toLowerCase().includes(searchTerm.toLowerCase()))\r\n            }\r\n        }));\r\n        \r\n    }\r\n    const formatPageTag = (pageTag) => {\r\n        if (pageTag) {\r\n            var tmpPageTag = pageTag.replace('-', ' ')\r\n            return tmpPageTag.charAt(0).toUpperCase() + tmpPageTag.slice(1)\r\n        }\r\n        return ''\r\n    }\r\n   \r\n    return (\r\n        <>\r\n            <h1 className=\"brands-list__header\">{title}</h1>\r\n            <div className=\"brands-list__filtering\">\r\n                <div className=\"row\">\r\n                    <div className=\"brands-list__search-wrapper columns small-12\">\r\n                        <input placeholder=\"Sök efter designer\" type=\"search\" className=\"row brands-list__search-wrapper--input\" onChange={e => handleSearchChange(e.target.value)} />\r\n                        <i className=\"ph-magnifying-glass\"></i>\r\n                    </div>\r\n                </div>\r\n                <hr className=\"brands-list__full-line\" />\r\n                <div className=\"row brands-list__filtering--hyperlinks--wrapper\">\r\n                    <ul className=\"brands-list__filtering--hyperlinks columns small-12\" >\r\n                        {brandsToList ?\r\n                            brandsToList.map((filter, i) => {\r\n                                return (\r\n                                    <li key={`key_${filter.LetterGroupId}_${i}`} onClick={e => handleClickOnLetter(e, \"brandCategory\" + filter.LetterGroupId)}><a>{filter.LetterGroupId}</a></li>\r\n                                )\r\n                            }) : null\r\n                        }\r\n                    </ul>\r\n                </div>\r\n                <hr className=\"brands-list__full-line\" />\r\n            </div>\r\n            <div ref={reactChildRef}>\r\n            </div>\r\n            <ul className=\"brands-list\">\r\n                {brandsToList.length ? brandsToList.map(brand => {\r\n                    return (\r\n                        <li id={`brandCategory${brand.LetterGroupId}`} className=\"row brands-list__group\" key={`letterGroup_${brand.LetterGroupId}`}>\r\n                            <span className=\"brands-list__group-letter columns small-12 medium-2\">{brand.LetterGroupId}</span>\r\n                            <ul className=\"brands-list__sublist columns small-12 medium-10\">\r\n                                <li className=\"brands-list__sublist--row\">\r\n                                    {\r\n                                        brand.Brands.map(br => {\r\n                                            return (\r\n                                                <div className=\"brands-list__sublist-item columns small-12 medium-6 large-4\" key={`brand_${br.Name}`}>\r\n                                                    <a href={br.Url}>{br.Name}</a>\r\n                                                    <span style={{ color: \"#757575\" }} className=\"brands-list__sublist-item--upcoming\">{formatPageTag(br.PageTag)}</span>\r\n                                                </div>\r\n                                            )\r\n                                        })\r\n                                    }\r\n                                </li>\r\n                            </ul>\r\n                        </li>\r\n                    )\r\n                }) : <li className=\"brands-list__sublist-item columns small-12 medium-12 large-12\" style={{ justifyContent: 'center' }}>{translate('brandlist.nohits')}</li>}\r\n            </ul>\r\n        </>\r\n    )\r\n}\r\nexport default BrandListContainer\r\n"],"sourceRoot":""}