react-simple-offcanvas/dist/index.js

A stand-alone react component for adding accessible easy-to-use bootstrap Tabs to your project.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);var a={offcanvas:"styles-module_offcanvas__CBJkH",show:"styles-module_show__2crlL",top:"styles-module_top__vpxAd",right:"styles-module_right__2ehri",bottom:"styles-module_bottom__2BlAx",left:"styles-module_left__2lGdA",header:"styles-module_header__1aDvk",title:"styles-module_title__2KezC",close:"styles-module_close__2I1sI",body:"styles-module_body__2mo3X",backdrop:"styles-module_backdrop__2Xnd5"};function l(e,t){switch(t.type){case"open":return{isOpen:!0};case"close":return{isOpen:!1};default:return e}}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===o&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}(".styles-module_offcanvas__CBJkH{position:fixed;bottom:0;z-index:1050;display:flex;flex-direction:column;max-width:100%;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.styles-module_offcanvas__CBJkH{transition:none}}.styles-module_offcanvas__CBJkH.styles-module_show__2crlL{transform:none}.styles-module_top__vpxAd{left:0;height:30vh;max-height:100%;border-bottom:1px solid rgba(0,0,0,.2);transform:translateY(-100%)}.styles-module_right__2ehri,.styles-module_top__vpxAd{top:0;right:0}.styles-module_right__2ehri{width:30vw;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}.styles-module_bottom__2BlAx{right:0;left:0;height:30vh;max-height:100%;border-top:1px solid rgba(0,0,0,.2);transform:translateY(100%)}.styles-module_left__2lGdA{top:0;left:0;width:30vw;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}.styles-module_header__1aDvk{display:flex;align-items:center;justify-content:space-between;padding:1rem}.styles-module_title__2KezC{margin:0;line-height:1.5}.styles-module_close__2I1sI{box-sizing:content-box;width:1em;height:1em;padding:.25em;color:#000;background:transparent url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E\") 50%/1em auto no-repeat;border:0;border-radius:.25rem;opacity:.5;cursor:pointer}.styles-module_close__2I1sI:hover{color:#000;text-decoration:none;opacity:.75}.styles-module_close__2I1sI:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.styles-module_body__2mo3X{flex-grow:1;padding:1rem;overflow-y:auto}.styles-module_backdrop__2Xnd5{position:fixed;left:0;top:0;bottom:0;right:0;background-color:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:visibility .2s ease-in-out,opacity .2s ease-in-out}.styles-module_backdrop__2Xnd5.styles-module_show__2crlL{visibility:visible;opacity:1}");var s=window.crypto.getRandomValues(new Uint32Array(1))[0].toString(36),n=e.createContext({isOpen:!1,randomId:""});exports.Offcanvas=function(t){var l=t.title,s=void 0===l?"Offcanvas Title":l,r=t.position,i=void 0===r?"right":r,d=t.backdrop,c=void 0===d||d,u=t.allowClickAway,m=void 0===u||u,f=t.allowEsc,_=void 0===f||f,p=t.allowScroll,v=void 0===p||p,y=t.className,h=void 0===y?"simple-offcanvas":y,b=t.styles,g=void 0===b?{}:b,x=t.children,w=e.useContext(n),k=w.handleClose,C=w.isOpen,E=w.randomId,I=e.useCallback((function(){m&&C&&k&&k()}),[m,C,k]),O=e.useCallback((function(e){_&&"Escape"===e.key&&C&&k&&k()}),[_,C,k]);return e.useEffect((function(){return document.addEventListener("keydown",O,!1),function(){return document.removeEventListener("keydown",O)}}),[O]),e.useEffect((function(){return document.addEventListener("click",I,!1),function(){return document.removeEventListener("click",I)}}),[I]),e.useEffect((function(){return v||C&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=""}}),[C,v]),o.default.createElement(o.default.Fragment,null,o.default.createElement("div",{id:"offcanvas_"+E,className:a.offcanvas+" "+a[i]+" "+(C?a.show:"")+" "+h,tabIndex:-1,style:g,role:"dialog","aria-labelledby":a.title,"aria-modal":"true",onClick:function(e){return e.stopPropagation()},"aria-hidden":"true"},o.default.createElement("div",{className:a.header},o.default.createElement("h5",{className:a.title},s),o.default.createElement("button",{className:a.close,onClick:k,type:"button",tabIndex:0,"aria-label":"Close"})),o.default.createElement("div",{className:a.body},x||"Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.")),c&&o.default.createElement("div",{className:a.backdrop+" "+(C?a.show:"")}))},exports.OffcanvasProvider=function(t){var a=t.children,r=t.onOpen,i=t.onClose,d=e.useReducer(l,{isOpen:!1}),c=d[0].isOpen,u=d[1];return o.default.createElement(n.Provider,{value:{isOpen:c,handleOpen:function(){u({type:"open"}),r&&r()},handleClose:function(){u({type:"close"}),i&&i()},randomId:s}},o.default.createElement("div",{className:"simple-offcanvas-component"},a))},exports.Trigger=function(t){var a=t.component,l=void 0===a?"button":a,s=t.className,r=void 0===s?"offcanvas-trigger":s,i=t.styles,d=void 0===i?{}:i,c=t.children,u=e.useContext(n),m=u.handleOpen,f=u.randomId;return"button"===l?o.default.createElement("button",{type:"button",className:r,onClick:m,style:d,tabIndex:0,"aria-controls":"offcanvas_"+f},c||"Offcanvas Trigger"):o.default.createElement("div",{className:r,onClick:m,style:d,role:"button",tabIndex:0,"aria-controls":"offcanvas_"+f,"aria-hidden":"true"},c||"Offcanvas Trigger")};
//# sourceMappingURL=index.js.map