{"version":3,"sources":["webpack:///./Scripts/Components/CategoryListToggle.js"],"names":["CategoryListToggle","React","useState","window","location","search","isListView","setIsListView","dispatch","useDispatch","updateUrl","urlParams","substr","split","q","saveQuery","join","useEffect","document","getElementById","classList","contains","add","listItems","querySelectorAll","i","length","remove","toggleListView","gridItems","toggleGridView","onClick","className"],"mappings":"qSAMe,SAASA,IAAqB,QACLC,IAAMC,UAAiE,GAAxD,MAAAC,OAAOC,SAASC,QAAhB,OAH3B,mBAEiB,WAClCC,EADkC,KACtBC,EADsB,KAEnCC,EAAWC,cAEXC,EAAY,WACd,IAAMC,GAAaR,OAAOC,SAASC,OAAOO,OAAO,IAAM,IAAIC,MAAM,KAC7DC,EAAI,IAAIH,GAGZ,GAAIL,GAME,IAA8C,GAA3C,IAAAK,GAAS,KAATA,EAjBW,kBAiBmC,OAEnDG,EAAI,qBAAIH,GAAP,CAnBe,yBAa8B,GAA3C,IAAAA,GAAS,KAATA,EAba,mBAcZ,IAAAA,GAAS,KAATA,EAAiB,IAAAA,GAAS,KAATA,EAdL,kBAc6C,GAE7DG,EAAI,IAAIH,GAOZH,EAASO,YAAUD,EAAEE,KAAK,QAqC9B,OARAf,IAAMgB,WAAU,WACTX,EA3BgB,WAEnB,IAAIY,SAASC,eAAe,gBAAgBC,UAAUC,SAAS,aAAc,CACzEH,SAASC,eAAe,gBAAgBC,UAAUE,IAAI,aAEtD,IADA,IAAIC,EAAYL,SAASM,iBAAiB,yBACjCC,EAAE,EAAGA,EAAIF,EAAUG,OAAQD,IAChCF,EAAUE,GAAGL,UAAUO,OAAO,WAAY,WAC1CJ,EAAUE,GAAGL,UAAUE,IAAI,aAE/BZ,KAmBAkB,GAfe,WAEnB,GAAGV,SAASC,eAAe,gBAAgBC,UAAUC,SAAS,aAAc,CACxEH,SAASC,eAAe,gBAAgBC,UAAUO,OAAO,aAEzD,IADA,IAAIE,EAAYX,SAASM,iBAAiB,yBACjCC,EAAE,EAAGA,EAAII,EAAUH,OAAQD,IAChCI,EAAUJ,GAAGL,UAAUO,OAAO,aAC9BE,EAAUJ,GAAGL,UAAUE,IAAI,WAAY,WAE3CZ,KAQAoB,KAEL,CAACxB,IAEG,oCACH,4BAAQyB,QAAS,kBAAMxB,GAAc,IAAQyB,UAAY1B,EAAwB,GAAX,UAAe,uBAAG0B,UAAU,2BAClG,4BAAQD,QAAS,kBAAMxB,GAAc,IAAOyB,UAAW1B,EAAa,SAAW,IAAI,uBAAG0B,UAAU","file":"13.d505aaa6da4163b91f1b.js","sourcesContent":["import React from \"react\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport { saveQuery } from \"../Actions/FacetedSearch.action\"\r\n\r\nconst LIST_VIEW_URL_PARAM = \"list_view=list\"\r\n\r\nexport default function CategoryListToggle() {\r\n    const [isListView, setIsListView] = React.useState(window.location.search.indexOf(LIST_VIEW_URL_PARAM) != -1)\r\n    const dispatch = useDispatch()\r\n\r\n    const updateUrl = () => {\r\n        const urlParams = (window.location.search.substr(1) || '').split('&')\r\n        var q = [...urlParams]\r\n\r\n        // Add LIST_VIEW_URL_PARAM to the url\r\n        if(!isListView) {\r\n            // Not list view, remove the parameter from the url\r\n            if(urlParams.indexOf(LIST_VIEW_URL_PARAM) != -1) {\r\n                urlParams.splice(urlParams.indexOf(LIST_VIEW_URL_PARAM), 1)\r\n            }\r\n            q = [...urlParams]\r\n        }else if(urlParams.indexOf(LIST_VIEW_URL_PARAM) == -1) {\r\n            // Is list view, add the parameter if it isn't there already\r\n            q = [...urlParams, LIST_VIEW_URL_PARAM]\r\n        }\r\n\r\n        // Use the same saveQuery that the filters use\r\n        dispatch(saveQuery(q.join(\"&\")))\r\n    }\r\n\r\n    const toggleListView = () => {\r\n        // Set the correct classes, not a react component\r\n        if(!document.getElementById(\"gridListView\").classList.contains(\"list-view\")) {\r\n            document.getElementById(\"gridListView\").classList.add(\"list-view\");\r\n            var listItems = document.querySelectorAll(\"li.product-list__item\");\r\n            for (var i=0; i < listItems.length; i++) {\r\n                listItems[i].classList.remove(\"medium-4\", \"large-3\");\r\n                listItems[i].classList.add(\"medium-12\");\r\n            }\r\n            updateUrl()\r\n        }\r\n    }\r\n    \r\n    const toggleGridView = () => {\r\n        // Set the correct classes, not a react component\r\n        if(document.getElementById(\"gridListView\").classList.contains(\"list-view\")) {\r\n            document.getElementById(\"gridListView\").classList.remove(\"list-view\");\r\n            var gridItems = document.querySelectorAll(\"li.product-list__item\");\r\n            for (var i=0; i < gridItems.length; i++) {\r\n                gridItems[i].classList.remove(\"medium-12\");\r\n                gridItems[i].classList.add(\"medium-4\", \"large-3\"); \r\n            }\r\n            updateUrl()\r\n        }\r\n    }\r\n\r\n    React.useEffect(() => {\r\n        if(isListView) {\r\n            toggleListView()\r\n        }else{\r\n            toggleGridView()\r\n        }\r\n    }, [isListView])\r\n\r\n    return <>\r\n        <button onClick={() => setIsListView(false)} className={!isListView ? \"active\" : \"\"}><i className=\"icon icon-menu-square\"></i></button>\r\n        <button onClick={() => setIsListView(true)} className={isListView ? \"active\" : \"\"}><i className=\"icon icon-list\"></i></button>\r\n    </>\r\n}"],"sourceRoot":""}