https://thebeautrium.com/static/js/BrandList.84caddf6.chunk.js

1(window["webpackJsonpreviewed-based-shopping-frontend"]=window["webpackJsonpreviewed-based-shopping-frontend"]||[]).push([[21],{1510:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),s=a(15),o=a(3),l=a.n(o),i=a(898),c=a(112),d=a(1314),m=a.n(d),h=a(132),b=a(12),u=a(925),p=a(935);const g=[];function f(e){let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t}class E extends n.Component{constructor(e){super(e),this.state={direction:"",lastScrollPos:0,alphabetHover:"",mouseClick:!1,featuredBrands:[]},this.renderBrands=this.renderBrands.bind(this),this.renderFeaturedBrands=this.renderFeaturedBrands.bind(this),this.onBrandMouseDown=this.onBrandMouseDown.bind(this),this.onBrandMouseOver=this.onBrandMouseOver.bind(this),this.onMouseUp=this.onMouseUp.bind(this)}componentDidMount(){this.props.getBrands(),fetch(Object(b.o)("/v3/brands/find")+"?limit=20&page=1&filter[startsWith]=Featured",{method:"get",accept:"application/json",credentials:"include"}).then(e=>e.json()).then(e=>{this.setState({featuredBrands:e})})}componentDidUpdate(e){l.a.isEqual(e.brands,this.props.brands)||this.altab&&l.a.each(this,(e,t)=>{t.startsWith("brand_tab_")&&e&&g.push({category:t.substr(10,1),top:e.getBoundingClientRect().top})})}renderListAlphabets(){return l.a.map(l.a.range(0,26),(e,t)=>r.a.createElement("li",{key:t},r.a.createElement("a",{href:"#section-".concat(String.fromCharCode(65+e))},String.fromCharCode(65+e))))}renderBrands(e){const t=l.a.sortBy(e,["brand_en"]),a=l.a.groupBy(t,(e,t)=>isNaN(e.brand_en.charAt(0))?e.brand_en.charAt(0):0);return l.a.map(a,(e,t)=>r.a.createElement("section",{key:"section-".concat(t),className:"row"},r.a.createElement("span",{ref:e=>this["brand_group_"+t]=e,id:"section-".concat("0"===t?"0-9":t),className:"anchor"}),r.a.createElement("div",{className:"col-12 col-xl-2 text-right alphabet-header"},r.a.createElement("span",{className:"alphabet-cat"},"0"===t?"0-9":t)),r.a.createElement("div",{className:"col-12 col-xl-9 offset-xl-1 brands-in-list"},r.a.createElement("ul",null,(()=>l.a.map(e,(e,t)=>r.a.createElement("li",{key:e.brand_en+t},r.a.createElement(i.a,{to:"".concat(e.link_name?"".concat(e.link_name):"/shop/".concat(e.brand_en)),onClick:()=>{this.props.setFilter({brand_id:e.brand_id,brand_en:e.brand_en})}},r.a.createElement(p.a,{src:e.image?e.image:"https://cdn.thebeautrium.com/image-brand/no_image.png",alt:e.brand_en,style:{width:"100%",maxWidth:"200px",border:"1px solid #bbb"}}),r.a.createElement("h2",{className:"text-center",style:{fontSize:"10px"}},e.brand_en)))))()))))}renderFeaturedBrands(){const{featuredBrands:e}=this.state;return e&&e.length>0?r.a.createElement("section",{className:"row"},r.a.createElement("div",{className:"col-12 col-xl-2 text-right alphabet-header"},r.a.createElement("span",{className:"alphabet-cat"},"FEATURED")),r.a.createElement("div",{className:"col-12 col-xl-9 offset-xl-1 brands-in-list"},r.a.createElement("ul",null,l.a.map(e,(e,t)=>r.a.createElement("li",{key:"f_"+e.brand_id+"_"+t},r.a.createElement(i.a,{to:e.link_name?e.link_name:"/shop/".concat(e.brand_en)},r.a.createElement(u.a,{src:e.image?e.image:"https://cdn.thebeautrium.com/image-brand/no_image.png",alt:e.brand_en,style:{width:"100%",maxWidth:"200px",border:"1px solid #bbb"}}),r.a.createElement("h2",{className:"text-center",style:{fontSize:"10px"}},e.brand_en))))))):null}generateSectionArray(){const e=["section-0-9"];return l.a.forEach(l.a.range(0,26),t=>{const a="section-"+String.fromCharCode(65+t);e.push(a)}),e}onBrandMouseDown(e){if(clearTimeout(this.showAlphabetTimeout),this.setState({mouseClick:!0,alphabetHover:e}),this.showAlphabetTimeout=setTimeout(()=>this.setState({alphabetHover:""}),500),this["brand_group_"+e]){let t=f(this["brand_group_"+e]);this.blist.scrollTo(0,t),window.scrollTo(0,0)}document.addEventListener("touchend",this.onMouseUp,!1),document.addEventListener("mouseup",this.onMouseUp,!1)}onBrandMouseOver(e,t){if(this.state.mouseClick&&t.touches&&g){let e=t.touches[0].clientY;const a=l.a.findIndex(g,t=>t.top>e);let n=0;n=-1===a?g[g.length-1].category:g[0===a?a:a-1].category;const r=this["brand_group_"+n]?f(this["brand_group_"+n]):-1;-1!==r&&this.state.alphabetHover!==n&&(this.blist.scrollTo(0,r),window.scrollTo(0,0),clearTimeout(this.showAlphabetTimeout),this.setState(e=>({alphabetHover:n})),this.showAlphabetTimeout=setTimeout(()=>this.setState({alphabetHover:""}),500))}}onMouseUp(){this.setState({mouseClick:!1}),document.removeEventListener("touchend",this.onMouseUp,!1),document.removeEventListener("mouseup",this.onMouseUp,!1)}render(){const{brands:e}=this.props;return null===e||0===e.length?r.a.createElement(h.a,{id:"brands",className:"container",title:"ALL BRANDS"}):r.a.createElement(h.a,{id:"brands",className:"container",title:"ALL BRANDS",keyword:l.a.map(e,"brand_en")},r.a.createElement("div",{className:"alphabet-list"},r.a.createElement("div",{className:"container"}

1,r.a.createElement(m.a,{items:this.generateSectionArray(),currentClassName:"active",offset:70},r.a.createElement("li",{className:""},r.a.createElement("a",{href:"#section-0-9"},r.a.createElement("span",{className:"d-none d-xl-inline"},"0 - 9"),r.a.createElement("span",{className:"d-inline d-xl-none"},"#"))),this.renderListAlphabets()))),r.a.createElement("div",{className:"alphabet-tab",ref:e=>this.altab=e},l.a.map(l.a.range(0,27),(e,t)=>r.a.createElement("div",{ref:t=>this["brand_tab_"+(0===e?0:String.fromCharCode(e+64))]=t,key:"brand_tab_"+t,onTouchStart:e=>{e.stopPropagation(),e.preventDefault(),this.onBrandMouseDown(0!==t?String.fromCharCode(64+t):0)},onTouchMove:e=>this.onBrandMouseOver(0!==t?String.fromCharCode(64+t):0,e),onTouchEnd:this.onMouseUp},0!==t?String.fromCharCode(64+t):0))),r.a.createElement("div",{className:"alphabet-jumpto ".concat(""!==this.state.alphabetHover?"visible":"")},this.state.alphabetHover),r.a.createElement("div",{ref:e=>this.blist=e,className:"brand-list"},this.renderFeaturedBrands(),this.renderBrands(e)))}}t.default=Object(s.connect)((function(e){return{brands:e.materials.brands}}),{getBrands:c.c,setFilter:c.m})(E)},925:function(e,t,a){"use strict";var n=a(1),r=a(133),s=a(0),o=a.n(s);const l=["src","alt","className","placeholder","lazy","offset","style","onLoad","onError","debug","priority"],i=e=>{let{src:t,alt:a="",className:i="",placeholder:c="",lazy:d=!1,offset:m=100,style:h={},onLoad:b,onError:u,debug:p=!1,priority:g=!1}=e,f=Object(r.a)(e,l);const[E,y]=Object(s.useState)(c||""),[v,w]=Object(s.useState)(!0),[N,_]=Object(s.useState)(!1),[C,x]=Object(s.useState)(!0);Object(s.useEffect)(()=>{x((()=>{if("undefined"===typeof window||"undefined"===typeof document)return!0;const e=document.createElement("canvas");e.width=1,e.height=1;try{return 0===e.toDataURL("image/webp").indexOf("data:image/webp")}catch(t){return!1}})())},[]);const j=Object(s.useCallback)(e=>{if(!e)return e;if(e.toLowerCase().includes(".webp"))return e;return e.replace(/\.(jpg|jpeg|png|gif|bmp|tiff)(\?.*)?$/i,".webp$2")},[]),O=Object(s.useCallback)(async e=>new Promise((t,a)=>{const n=new Image;n.onload=()=>{t(e)},n.onerror=()=>{a(new Error("Failed to load image: ".concat(e)))},n.src=e}),[]),B=Object(s.useCallback)(async()=>{if(!t)return p&&console.log("WebPImage: No src provided"),void w(!1);p&&(console.log("WebPImage: Starting to load image:",t),console.log("WebPImage: WebP supported:",C)),w(!0),_(!1);try{let n=t,r=!1;if(!0===C){const a=j(t);if(p&&console.log("WebPImage: Converted to WebP:",a),a!==t)try{p&&console.log("WebPImage: Attempting to load WebP image..."),await O(a),n=a,r=!0,p&&console.log("WebPImage: WebP image loaded successfully")}catch(e){p&&console.warn("WebP image failed to load, falling back to original:",e.message)}}if(!r)try{p&&console.log("WebPImage: Attempting to load original image..."),await O(t),n=t,p&&console.log("WebPImage: Original image loaded successfully")}catch(a){throw p&&console.error("WebPImage: Original image failed to load:",a.message),a}y(n),w(!1),b&&b(n)}catch(n){console.error("All image formats failed to load:",n.message),_(!0),w(!1),u&&u(n)}},[t,C,j,O,b,u,p]);return Object(s.useEffect)(()=>{t&&B()},[t,B]),v&&!c?o.a.createElement("div",Object.assign({className:"webp-image-loading ".concat(i),style:Object(n.a)({backgroundColor:"#f0f0f0",display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100px"},h)},f),o.a.createElement("div",{className:"spinner-border text-primary",role:"status"},o.a.createElement("span",{className:"sr-only"},"Loading..."))):N?o.a.createElement("div",Object.assign({className:"webp-image-error ".concat(i),style:Object(n.a)({backgroundColor:"#f8f9fa",display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100px",color:"#6c757d"},h)},f),o.a.createElement("div",{className:"text-center"},o.a.createElement("i",{className:"fas fa-image fa-2x mb-2"}),o.a.createElement("div",null,"Image not available"))):o.a.createElement("img",Object.assign({src:E,alt:a,className:"webp-image ".concat(i),style:h,loading:g?"eager":d?"lazy":"eager",fetchpriority:g?"high":"auto",decoding:g?"sync":"async",onLoad:()=>{w(!1),b&&b(E)},onError:e=>{_(!0),w(!1),u&&u(e)}},f))};i.defaultProps={alt:"",className:"",placeholder:"",lazy:!1,offset:100,style:{},onLoad:null,onError:null,debug:!1,priority:!1},t.a=i},935:function(e,t,a){"use strict";var n=a(133),r=a(0),s=a.n(r),o=a(915),l=a.n(o),i=a(925);const c=["src","alt","className","placeholder","offset","height","style","onLoad","onError","lazyLoadProps"],d=e=>{let{src:t,alt:a="",className:r="",placeholder:o="",offset:d=100,height:m=0,style:h={},onLoad:b,onError:u,lazyLoadProps:p={}}=e,g=Object(n.a)(e,c);return s.a.createElement(l.a,Object.assign({offset:d,height:m},p),s.a.createElement(i.a,Object.assign({src:t,alt:a,className:r,placeholder:o,style:h,onLoad:b,onError:u},g)))};d.defaultProps={alt:"",className:"",placeholder:"",offset:100,height:0,style:{},onLoad:null,onError:null,lazyLoadProps:{}},t.a=d}}]);
2//# sourceMappingURL=BrandList.84caddf6.chunk.js.map