next-modal/dist/index.js

A sustainable and lightweight react modal component project based on greenCSS. SSR ready.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-dom"),t=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var a in o)Object.prototype.hasOwnProperty.call(o,a)&&(e[a]=o[a])}return e},n.apply(this,arguments)}function i({width:e="20",height:t="20"}){return a.default.createElement("svg",{className:"cursor-pointer",xmlns:"http://www.w3.org/2000/svg",width:e,height:t,fill:"none",viewBox:"0 0 20 20"},a.default.createElement("path",{className:"fill-gray",d:"M5.187 4.01A.833.833 0 004.01 5.187L8.822 10l-4.814 4.813a.835.835 0 101.179 1.178L10 11.178l4.813 4.813a.833.833 0 001.178-1.178L11.178 10l4.813-4.812a.833.833 0 00-1.178-1.179L10 8.822 5.187 4.008v.001z"}))}!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("@media(prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}*,:after,:before{box-sizing:border-box}*{margin:0}::-moz-focus-inner{border:0}.fade-in{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-backface-visibility:hidden;backface-visibility:hidden}@keyframes fadeIn{0%{opacity:0}45%{opacity:.33}to{opacity:1}}.font-bold{font-weight:700}.text-20px{font-size:20px}.text-black{color:#101010}.bg-white{background-color:#fdfdfd}.overflow-x-hidden{overflow-x:hidden}.absolute{position:absolute}.fixed{position:fixed}.top-0per{top:0}.top-50per{top:50%}.right-0per{right:0}.bottom-0per{bottom:0}.left-0per{left:0}.left-50per{left:50%}.z-1{z-index:1}.max-w-90per{max-width:90%}.max-w-50vw{max-width:50vw}.min-w-50rem{min-width:50rem}.max-h-75vh{max-height:75vh}.p-20px{padding:20px}.mt-20px{margin-top:20px}.mb-20px{margin-bottom:20px}.animation-forwards{animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards}.animation-duration-500ms{animation-duration:.5s;-webkit-animation-duration:.5s}.shadow-small-gray{box-shadow:5px 5px 10px -1px #7d7d7d;-webkit-box-shadow:5px 5px 10px -1px #7d7d7d;-moz-box-shadow:5px 5px 10px -1px #7d7d7d;-ms-box-shadow:5px 5px 10px -1px #7d7d7d}.backdrop-blur-30px{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.focus\\:outline-solid:focus{outline-style:solid}.rounded-20px{border-radius:20px}.focus\\:outline-1px:focus{outline-width:1px}.cursor-pointer{cursor:pointer}.fill-gray{fill:#7d7d7d}@media(max-width:480px){.sm\\:min-w-90vw{min-width:90vw}}@media(min-width:481px)and (max-width:768px){.md\\:min-w-90vw{min-width:90vw}}");const r=({children:o,toggle:n,setToggle:r,className:l,backgroundAnimation:m="fade-in animation-duration-500ms animation-forwards",closeIcon:s=a.default.createElement(i,null),modalContentAnimation:c="fade-in animation-duration-500ms animation-forwards",useKeyInput:p=!0})=>(!0===p&&t.useEffect((()=>{const e=e=>{27===e.keyCode&&r()};window.addEventListener("keydown",e);const t=e=>{e.ctrlKey&&"k"===e.key&&(e.preventDefault(),r(!0))};return document.addEventListener("keydown",t),()=>window.removeEventListener("keydown",e)||document.removeEventListener("keydown",t)}),[]),"undefined"!=typeof window&&e.createPortal(a.default.createElement(a.default.Fragment,null,n&&a.default.createElement(a.default.Fragment,null,a.default.createElement("div",{onClick:r.bind(void 0,!1),className:`fixed left-0per top-0per bottom-0per right-0per backdrop-blur-30px text-black ${m}`,style:{backgroundColor:"rgba(16,16,16,0.75)"}}),a.default.createElement(d,{className:l,setToggle:r,closeIcon:s,modalContentAnimation:c},o))),document.querySelector("#modal-portal"))),d=({children:e,className:o,modalContentAnimation:i,closeIcon:r,setToggle:d,...l})=>{const m=t.useRef();return a.default.createElement("div",n({ref:m,tabIndex:0},l,{className:`text-black overflow-x-hidden fixed left-50per top-50per rounded-20px bg-white min-w-50rem max-w-50vw sm:min-w-90vw md:min-w-90vw max-h-75vh shadow-small-gray ${o} ${i}`,style:{transform:"translate(-50%, -50%)"}}),a.default.createElement("div",{role:"button",tabIndex:0,onKeyPress:d.bind(void 0,!1),onClick:d.bind(void 0,!1),className:"absolute z-1 focus:outline-1px focus:outline-solid focus:outline-gray",style:{top:"20px",right:"20px"}},r),a.default.createElement("div",{className:"p-20px"},e))};r.Header=({children:e,className:t,...o})=>a.default.createElement("header",n({className:`text-20px font-bold mb-20px max-w-90per ${t}`},o),e),r.Body=({children:e,className:t,...o})=>a.default.createElement("div",n({className:`${t}`},o),e),r.Footer=({children:e,className:t,...o})=>a.default.createElement("footer",n({className:`mt-20px ${t}`},o),e),exports.Modal=r;