text: (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{15:function(e,t,a){},24:function(e,t,a){e.exports=a(68)},29:function(e,t,a){},52:function(e,t,a){},54:function(e,t,a){},57:function(e,t,a){},59:function(e,t,a){},61:function(e,t,a){},63:function(e,t,a){},65:function(e,t,a){},68:function(e,t,a){"use strict";a.r(t);var n=a(0),r=a.n(n),c=a(17),o=a.n(c),l=(a(29),a(2)),i=a(1),s=a(18),u=a.n(s);var m=function(e,t,a){return e.map(function(e){return{image:e.image,title:t?e.title:void 0,caption:a?e.caption:void 0}})};var d=function(e){return Object.keys(e).reduce(function(t,a){return Object.keys(e[a]).length&&(t[a]=e[a]),t},{})},p=a(10),f=new(a.n(p).a)({applicationId:"ea3b9f270ced6c1ee302b81ffc986989fb7635f2dedf6f3be8e6e42ad5b294d5",secret:"5406af2b092dff5c34c0b97b45e514998d5a248579ce61d74ac7307ef8eb5475",callbackUrl:"urn:ietf:wg:oauth:2.0:oob"}),b=function(e){return f.search.photos(e,10*Math.random()).then(p.toJson).then(function(e){var t=e.results;if(t.length)return t.map(function(e){return{image:e.urls.regular,title:e.user.name,caption:e.alt_description}})}).catch(function(e){console.error(e)})},h={checkboxes:{},defaultStyle:{outerStyle:{},containerStyle:{},slideStyle:{},taglineStyle:{},titleStyle:{},captionStyle:{},dotsContainerStyle:{},dotStyle:{},dotActiveStyle:{},arrowStyle:{},previewStyle:{},previewActiveStyle:{}}},v=[Object(l.a)({},h),{checkboxes:{swipe:!0,displayArrows:!1,loop:!1,titles:!0},defaultStyle:Object(l.a)({},h.defaultStyle,{slideStyle:{width:"80%",height:"90%",margin:"5% 10%",boxShadow:"0 2px 20px -1px #2222"},taglineStyle:{background:"#FFF"},titleStyle:{fontWeight:800,fontSize:"1.2rem"},dotStyle:{width:"25px",height:"3px",borderRadius:0,margin:"0px"}})},{checkboxes:{swipe:!1,cover:!1,arrowOnHover:!0,displayDot:!1,transition:!1},defaultStyle:Object(l.a)({},h.defaultStyle,{slideStyle:{width:"90%",margin:"0% 5%",position:"relative"},arrowStyle:{width:"0",height:"0",margin:"5px",padding:"0",borderWidth:"0 0 0 0",borderTop:"10px solid transparent",borderRight:"10px solid #333"}})}],y=(a(52),function(){return r.a.createElement("div",{className:"spinner"},r.a.createElement("div",{className:"rect1"}),r.a.createElement("div",{className:"rect2"}),r.a.createElement("div",{className:"rect3"}),r.a.createElement("div",{className:"rect4"}),r.a.createElement("div",{className:"rect5"}))}),g=(a(54),function(){var e=Object(n.useState)(!1),t=Object(i.a)(e,2),a=t[0],c=t[1];Object(n.useEffect)(function(){return window.addEventListener("scroll",o),function(){return window.removeEventListener("scroll",o)}},[]);var o=function(){(window.pageYOffset||document.documentElement.scrollTop)<80?c(!1):a||c(!0)};return r.a.createElement("div",{className:"navbar ".concat(a?"navbar--close":"")},r.a.createElement("div",{className:"navbar_title"},"GALLEREACT"),r.a.createElement("div",{className:"navbar_payoff"},"Flexible images slider"))}),O=(a(15),a(3)),E=a(21),j=a.n(E),w=a(5),S=a.n(w),k=(a(16),function(e){var t=e[0].toUpperCase()+e.slice(1).replace("Style","");return"Outer"===t&&(t+=" (your external container)"),t}),C=function(e){var t=e.replace(/([^{\n ]+):/g,'"$1":').replace(/([\n]+)/g,"").replace(/(\/\*.+\*\/)/g,"");return JSON.parse(t)},x=function(e){return Object.entries(e).length?JSON.stringify(e).replace(/"([^(")"]+)":/g,"\n  $1:").replace("}","\n}"):"{ /* insert your style here */ }"},N=function(e){var t=e.initialCode,a=e.defaultCode,c=e.setStyle,o=e.name,s=x(a),u=Object(n.useState)(s||""),m=Object(i.a)(u,2),d=m[0],p=m[1];return Object(n.useEffect)(function(){try{var e=d&&C(d);c(function(t){return Object(l.a)({},t,Object(O.a)({},o,e||{}))})}catch(t){}},[d]),Object(n.useEffect)(function(){try{var e=x(t);p(e||"")}catch(a){}},[t]),r.a.createElement("div",{className:"editor_container"},r.a.createElement("h3",{htmlFor:"containerStyle"},k(o)),r.a.createElement(j.a,{value:d,onValueChange:p,highlight:function(e){return Object(w.highlight)(e,w.languages.jsx)},padding:10,className:"editor"}))},_=function(e){var t=e.style,a=e.setStyle,n=e.defaultStyle;return Object.keys(t).map(function(e){return r.a.createElement(N,{key:e,initialCode:n[e],defaultCode:t[e],setStyle:a,name:e})})},F=(a(57),function(e){var t=e.defaultCheckboxes,a=e.defaultColors,c=e.style,o=e.checkboxOpts,s=e.colors;Object(n.useEffect)(function(){S.a.highlightAll()});var u=Object.entries(Object(l.a)({},o,s)).reduce(function(e,n){var r=Object(i.a)(n,2),c=r[0],o=r[1];return o===t[c]||o===a[c]?e:e+"\n  ".concat(c,"={").concat("#"===o[0]?JSON.stringify(o):o,"} ")},""),m=Object.entries(c).reduce(function(e,t){var a=Object(i.a)(t,2),n=a[0],r=a[1];return"outerStyle"===n?e:(Object.keys(r).length&&(e+="\n  ".concat(n,"={").concat(JSON.stringify(r).replace(/"([^(")"]+)":/g,"$1:"),"} ")),e)},""),d="<Gallereact\n  images={[/* array of images */]} ".concat(u).concat(m," \n/>");return r.a.createElement("div",{className:"codeBlock_title"},r.a.createElement("pre",null,r.a.createElement("code",{className:"language-jsx"},d)))}),A=(a(59),function(e){var t=e.setCheckboxOpts,a=e.checkboxOpts;return r.a.createElement("div",{className:"checks"},Object.entries(a).map(function(e){var a=Object(i.a)(e,2),n=a[0],c=a[1];return r.a.createElement("div",{key:n,className:"checkbox".concat(!0===c?"--active":""),onClick:function(){return e=n,void t(function(t){return Object(l.a)({},t,Object(O.a)({},e,!t[e]))});var e}},n[0].toUpperCase()+n.slice(1))}))}),J=function(e){var t=e.colors,a=e.setColors,n=function(e){var t=e.target,n=t.name,r=t.value;a(function(e){return Object(l.a)({},e,Object(O.a)({},n,r))})};return r.a.createElement("div",{className:"colors"},Object.keys(t).map(function(e){return r.a.createElement("label",{key:e,htmlFor:"primaryColor"},e[0].toUpperCase()+e.slice(1).replace("Color",""),r.a.createElement("input",{onChange:n,type:"color",value:t[e],name:e}))}))},L=(a(61),function(e){var t=e.setOption,a=e.option,n=e.options;return r.a.createElement("div",{className:"options_container"},n.map(function(e,n){return r.a.createElement("div",{key:"Option"+n,onClick:function(){return t(n)},className:a===n?"options--active":"options"},0===n?"Default":"Option ".concat(n))}))}),B=(a(63),a(6)),U=[["https://github.com/div-Leo",B.a],["https://www.linkedin.com/in/leonardo-di-vittorio/",B.b],["https://www.npmjs.com/package/gallereact",B.c]],W=function(){return r.a.createElement(r.a.Fragment,null,r.a.createElement("div",{className:"power_container"},"Made with"," ",r.a.createElement("span",{role:"img","aria-label":"love"},"\u2764\ufe0f"," "),"by"," ",r.a.createElement("a",{href:"https://www.leonardodivittorio.com",target:"blank"},"div.leo")),r.a.createElement("div",{className:"footer_socials"},U.map(function(e){var t=Object(i.a)(e,2),a=t[0],n=t[1];return r.a.createElement("a",{key:a,rel:"noopener noreferrer",href:a,target:"_blank"},r.a.createElement(n,null))})))},$=(a(65),{swipe:!1,cover:!0,arrowOnHover:!1,transition:!0,loop:!0,autoPlay:!1,titles:!1,captions:!1,displayPreview:!1,displayDot:!0,displayArrows:!0}),D={primaryColor:"#CCCCCC",secondaryColor:"#333333"},G=function(){var e=Object(n.useState)(1),t=Object(i.a)(e,2),a=t[0],c=t[1],o=v[a],s=o.defaultStyle,p=o.checkboxes,f=Object(n.useState)([]),h=Object(i.a)(f,2),O=h[0],E=h[1],j=Object(n.useState)(Object(l.a)({},$,p)),w=Object(i.a)(j,2),S=w[0],k=w[1],C=Object(n.useState)(D),x=Object(i.a)(C,2),N=x[0],B=x[1],U=Object(n.useState)(s),G=Object(i.a)(U,2),H=G[0],M=G[1];Object(n.useEffect)(function(){b("italy").then(function(e){return e&&E(e)})},[]),Object(n.useEffect)(function(){k(Object(l.a)({},$,p)),M(Object(l.a)({},s))},[a]);var R=S.titles,T=S.captions,z=Object(n.useMemo)(function(){return m(O,R,T)},[O,R,T]);return r.a.createElement(r.a.Fragment,null,r.a.createElement(g,null),r.a.createElement("div",{className:"slider_container",style:H.outerStyle},O.length?r.a.createElement(u.a,Object.assign({images:z},d(H),N,S)):r.a.createElement(y,null)),r.a.createElement("div",{className:"description_container"},r.a.createElement("h1",null,"Gallereact"),r.a.createElement("p",null," ","Here you have a playground to try out all the possible customizations availables for gallereact. ",r.a.createElement("br",null)," Set the options you prefer then at the bottom of the page you can copy your custom code snippet. ",r.a.createElement("br",null)," For getting started check out the npm package"," ",r.a.createElement("a",{href:"https://www.npmjs.com/package/gallereact"},"gallereact"))),r.a.createElement("div",{className:"settings_container"},r.a.createElement("h1",null,"Options"),r.a.createElement(L,{setOption:c,option:a,options:v}),r.a.createElement("h1",null,"Booleans"),r.a.createElement(A,{checkboxOpts:S,setCheckboxOpts:k}),r.a.createElement("h1",null,"Colors"),r.a.createElement(J,{colors:N,setColors:B}),r.a.createElement("h1",null,"Styles"),r.a.createElement(_,{style:H,setStyle:M,defaultStyle:s}),r.a.createElement("h1",null,"Output code"),r.a.createElement(F,{defaultCheckboxes:$,defaultColors:D,style:H,checkboxOpts:S,colors:N})),r.a.createElement(W,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));o.a.render(r.a.createElement(G,null),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then(function(e){e.unregister()})}},[[24,2,1]]]);
  //# sourceMappingURL=main.d4acf573.chunk.js.map