@codeparticle/react-sidenav/index.js

A generic sidenav component for React

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("@codeparticle/react-sidenav",[],t):"object"==typeof exports?exports["@codeparticle/react-sidenav"]=t():e["@codeparticle/react-sidenav"]=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=5)}([function(e,t){e.exports=require("prop-types")},function(e,t){e.exports=require("react")},function(e,t,n){"use strict";var r=n(4),o=n.n(r)()((function(e){return e[1]}));o.push([e.i,".react-sidenav{height:100%;transition:all var(--transitionSpeed);width:100%}.react-sidenav-container{display:inline-block;flex-shrink:0;height:100vh;overflow:hidden;position:relative;top:0;transition:all var(--transitionSpeed)}@supports (-webkit-appearance: none){.react-sidenav-container.os-android{height:calc(100vh - 56px)}}.react-sidenav-trigger{display:inline-block}.react-sidenav-trigger-button{background:none;border:none;cursor:pointer;padding:0}.react-sidenav__close-button{background:none;border:none;cursor:pointer;height:25px;padding:0;position:absolute;right:8px;top:8px;width:25px;z-index:1}.react-sidenav__cross{height:25px;position:absolute;top:0;transform:rotate(45deg);width:2px}.react-sidenav__cross:last-child{transform:rotate(-45deg)}\n",""]),t.a=o},function(e,t,n){"use strict";var r,o=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},i=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function c(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function s(e,t){for(var n={},r=[],o=0;o<e.length;o++){var i=e[o],s=t.base?i[0]+t.base:i[0],l=n[s]||0,u="".concat(s," ").concat(l);n[s]=l+1;var d=c(u),f={css:i[1],media:i[2],sourceMap:i[3]};-1!==d?(a[d].references++,a[d].updater(f)):a.push({identifier:u,updater:h(f,t),references:1}),r.push(u)}return r}function l(e){var t=document.createElement("style"),r=e.attributes||{};if(void 0===r.nonce){var o=n.nc;o&&(r.nonce=o)}if(Object.keys(r).forEach((function(e){t.setAttribute(e,r[e])})),"function"==typeof e.insert)e.insert(t);else{var a=i(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var u,d=(u=[],function(e,t){return u[e]=t,u.filter(Boolean).join("\n")});function f(e,t,n,r){var o=n?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(e.styleSheet)e.styleSheet.cssText=d(t,o);else{var i=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(i,a[t]):e.appendChild(i)}}function p(e,t,n){var r=n.css,o=n.media,i=n.sourceMap;if(o?e.setAttribute("media",o):e.removeAttribute("media"),i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}var v=null,g=0;function h(e,t){var n,r,o;if(t.singleton){var i=g++;n=v||(v=l(t)),r=f.bind(null,n,i,!1),o=f.bind(null,n,i,!0)}else n=l(t),r=p.bind(null,n,t),o=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return r(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;r(e=t)}else o()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=o());var n=s(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var r=0;r<n.length;r++){var o=c(n[r]);a[o].references--}for(var i=s(e,t),l=0;l<n.length;l++){var u=c(n[l]);0===a[u].references&&(a[u].updater(),a.splice(u,1))}n=i}}}},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,r){"string"==typeof e&&(e=[[null,e,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var c=0;c<e.length;c++){var s=[].concat(e[c]);r&&o[s[0]]||(n&&(s[2]?s[2]="".concat(n," and ").concat(s[2]):s[2]=n),t.push(s))}},t}},function(e,t,n){"use strict";n.r(t);var r=n(1),o=n.n(r),i=n(0),a=n.n(i),c=n(3),s=n.n(c),l=n(2),u={insert:"head",singleton:!1},d=(s()(l.a,u),l.a.locals,function(e){var t=e.animateWidth,n=e.backgroundColor,i=e.children,a=e.className,c=e.classNamesToIgnoreOutsideClick,s=e.closeButtonColor,l=e.closeButtonIcon,u=e.fixed,d=e.hasCloseButton,f=e.isOpen,p=e.onStateChange,v=e.right,g=e.transitionSpeed,h=e.trigger,m=e.triggerIcon,b=e.width,y=e.zIndex,x=Object(r.useRef)(),C=f||t?0:"calc(".concat(b," * -1)");Object(r.useEffect)((function(){x.current&&navigator.userAgent.match(/android/i)&&x.current.classList.add("os-android")}),[x]),Object(r.useEffect)((function(){var e=function(e){if(f){for(var t=e.target;null!==t;){if(t.classList.contains("react-sidenav"))return;if(c)for(var n=0;n<c.length;n++)if(t.classList.contains(c[n]))return;t=t.parentElement}p({isOpen:!1,outsideClick:!0})}};return p&&window.addEventListener("click",e,!0),function(){p&&window.removeEventListener("click",e,!0)}}),[c,f,p]);var w={"--transitionSpeed":g,backgroundColor:n,position:u?"fixed":"relative",width:f?b:0,zIndex:y},O={"--transitionSpeed":g,position:u?"relative":"absolute"};v||(O.right=0),t?v&&(w.right=0):(O.width=b,u&&!v?w.left=C:u&&v&&(w.width=b,w.right=f?0:C));var S;return o.a.createElement(r.Fragment,null,(!(S=h)&&m&&(S=o.a.createElement("button",{className:"react-sidenav-trigger-button",onClick:function(){return p&&p({isOpen:!f})}},m)),S?o.a.createElement("div",{className:"react-sidenav-trigger"},S):null),o.a.createElement("div",{className:"react-sidenav-container ".concat(a," open-").concat(f),ref:x,style:w},o.a.createElement("div",{className:"react-sidenav",style:O},function(){var e=null,t={className:"react-sidenav__close-button",onClick:function(){return p({isOpen:!1,closeButton:!0})},style:{}};if(d)if(l)e=o.a.createElement("img",{alt:"close",src:l});else{var n={className:"react-sidenav__cross",style:{backgroundColor:s}};t.style.paddingRight="2px",e=o.a.createElement(r.Fragment,null,o.a.createElement("span",n),o.a.createElement("span",n))}return e?o.a.createElement("button",t,e):null}(),i)))});d.propTypes={animateWidth:a.a.bool,backgroundColor:a.a.string,className:a.a.string,classNamesToIgnoreOutsideClick:a.a.arrayOf(a.a.string),closeButtonColor:a.a.string,closeButtonIcon:a.a.element,fixed:a.a.bool,hasCloseButton:a.a.bool,isOpen:a.a.bool,onStateChange:a.a.func,right:a.a.bool,transitionSpeed:a.a.string,trigger:a.a.element,triggerIcon:a.a.element,width:a.a.string,zIndex:a.a.number},d.defaultProps={animateWidth:!1,backgroundColor:"#FFFFFF",className:"",classNamesToIgnoreOutsideClick:[],closeButtonColor:"#FFFFFF",closeButtonIcon:null,fixed:!1,hasCloseButton:!1,isOpen:!1,onStateChange:null,right:!1,transitionSpeed:"0.3s",trigger:null,triggerIcon:null,width:"300px",zIndex:10};var f=d;t.default=f}])}));