|
| 1 | +import { createPortal } from 'react-dom'; |
| 2 | +import React, { useEffect, useRef } from 'react'; |
| 3 | + |
| 4 | +function _extends() { |
| 5 | + _extends = Object.assign ? Object.assign.bind() : function (target) { |
| 6 | + for (var i = 1; i < arguments.length; i++) { |
| 7 | + var source = arguments[i]; |
| 8 | + |
| 9 | + for (var key in source) { |
| 10 | + if (Object.prototype.hasOwnProperty.call(source, key)) { |
| 11 | + target[key] = source[key]; |
| 12 | + } |
| 13 | + } |
| 14 | + } |
| 15 | + |
| 16 | + return target; |
| 17 | + }; |
| 18 | + return _extends.apply(this, arguments); |
| 19 | +} |
| 20 | + |
| 21 | +function styleInject(css, ref) { |
| 22 | + if ( ref === void 0 ) ref = {}; |
| 23 | + var insertAt = ref.insertAt; |
| 24 | + |
| 25 | + if (!css || typeof document === 'undefined') { return; } |
| 26 | + |
| 27 | + var head = document.head || document.getElementsByTagName('head')[0]; |
| 28 | + var style = document.createElement('style'); |
| 29 | + style.type = 'text/css'; |
| 30 | + |
| 31 | + if (insertAt === 'top') { |
| 32 | + if (head.firstChild) { |
| 33 | + head.insertBefore(style, head.firstChild); |
| 34 | + } else { |
| 35 | + head.appendChild(style); |
| 36 | + } |
| 37 | + } else { |
| 38 | + head.appendChild(style); |
| 39 | + } |
| 40 | + |
| 41 | + if (style.styleSheet) { |
| 42 | + style.styleSheet.cssText = css; |
| 43 | + } else { |
| 44 | + style.appendChild(document.createTextNode(css)); |
| 45 | + } |
| 46 | +} |
| 47 | + |
| 48 | +var css_248z = "@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-black-5{box-shadow:5px 5px 10px -1px #4d4d4d;-webkit-box-shadow:5px 5px 10px -1px #4d4d4d;-moz-box-shadow:5px 5px 10px -1px #4d4d4d;-ms-box-shadow:5px 5px 10px -1px #4d4d4d}.backdrop-blur-30px{backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.rounded-20px{border-radius:20px}.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}}"; |
| 49 | +styleInject(css_248z); |
| 50 | + |
| 51 | +function CloseIcon({ |
| 52 | + width = '20', |
| 53 | + height = '20' |
| 54 | +}) { |
| 55 | + return /*#__PURE__*/React.createElement("svg", { |
| 56 | + className: "cursor-pointer", |
| 57 | + xmlns: "http://www.w3.org/2000/svg", |
| 58 | + width: width, |
| 59 | + height: height, |
| 60 | + fill: "none", |
| 61 | + viewBox: "0 0 20 20" |
| 62 | + }, /*#__PURE__*/React.createElement("path", { |
| 63 | + className: "fill-gray", |
| 64 | + 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" |
| 65 | + })); |
| 66 | +} |
| 67 | + |
| 68 | +const Modal = ({ |
| 69 | + children, |
| 70 | + toggle, |
| 71 | + setToggle, |
| 72 | + className, |
| 73 | + backgroundAnimation = 'fade-in animation-duration-500ms animation-forwards', |
| 74 | + closeIcon = /*#__PURE__*/React.createElement(CloseIcon, null), |
| 75 | + modalContentAnimation = 'fade-in animation-duration-500ms animation-forwards', |
| 76 | + useKeyInput = true |
| 77 | +}) => { |
| 78 | + { |
| 79 | + useKeyInput === true ? useEffect(() => { |
| 80 | + // ESC key to close the modal |
| 81 | + const close = e => { |
| 82 | + if (e.keyCode === 27) { |
| 83 | + setToggle(); |
| 84 | + } |
| 85 | + }; |
| 86 | + |
| 87 | + window.addEventListener('keydown', close); // CTRL + k key to open the modal |
| 88 | + |
| 89 | + const opener = e => { |
| 90 | + if (e.ctrlKey && e.key === 'k') { |
| 91 | + e.preventDefault(); |
| 92 | + setToggle(true); |
| 93 | + } |
| 94 | + }; |
| 95 | + |
| 96 | + document.addEventListener('keydown', opener); |
| 97 | + return () => window.removeEventListener('keydown', close) || document.removeEventListener('keydown', opener); |
| 98 | + }, []) : null; |
| 99 | + } |
| 100 | + return typeof window !== 'undefined' && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(React.Fragment, null, toggle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { |
| 101 | + onClick: setToggle.bind(undefined, false), |
| 102 | + className: `fixed left-0per top-0per bottom-0per right-0per backdrop-blur-30px text-black ${backgroundAnimation}`, |
| 103 | + style: { |
| 104 | + backgroundColor: 'rgba(16,16,16,0.75)' |
| 105 | + } |
| 106 | + }), /*#__PURE__*/React.createElement(ModalContent, { |
| 107 | + className: className, |
| 108 | + setToggle: setToggle, |
| 109 | + closeIcon: closeIcon, |
| 110 | + modalContentAnimation: modalContentAnimation |
| 111 | + }, children))), document.querySelector('#modal-portal')); |
| 112 | +}; |
| 113 | + |
| 114 | +const ModalContent = ({ |
| 115 | + children, |
| 116 | + className, |
| 117 | + modalContentAnimation, |
| 118 | + closeIcon, |
| 119 | + setToggle, |
| 120 | + ...restProps |
| 121 | +}) => { |
| 122 | + const modalRef = useRef(); |
| 123 | + return /*#__PURE__*/React.createElement("div", _extends({ |
| 124 | + ref: modalRef, |
| 125 | + tabIndex: 0 |
| 126 | + }, restProps, { |
| 127 | + 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-black-5 ${className} ${modalContentAnimation}`, |
| 128 | + style: { |
| 129 | + transform: 'translate(-50%, -50%)' |
| 130 | + } |
| 131 | + }), /*#__PURE__*/React.createElement("button", { |
| 132 | + onClick: setToggle.bind(undefined, false), |
| 133 | + className: "absolute z-1", |
| 134 | + style: { |
| 135 | + top: '20px', |
| 136 | + right: '20px' |
| 137 | + } |
| 138 | + }, closeIcon), /*#__PURE__*/React.createElement("div", { |
| 139 | + className: "p-20px" |
| 140 | + }, children)); |
| 141 | +}; // Modal header |
| 142 | + |
| 143 | + |
| 144 | +Modal.Header = ({ |
| 145 | + children, |
| 146 | + className, |
| 147 | + ...restProps |
| 148 | +}) => { |
| 149 | + return /*#__PURE__*/React.createElement("header", _extends({ |
| 150 | + className: `text-20px font-bold mb-20px max-w-90per ${className}` |
| 151 | + }, restProps), children); |
| 152 | +}; // Modal body |
| 153 | + |
| 154 | + |
| 155 | +Modal.Body = ({ |
| 156 | + children, |
| 157 | + className, |
| 158 | + ...restProps |
| 159 | +}) => { |
| 160 | + return /*#__PURE__*/React.createElement("div", _extends({ |
| 161 | + className: `${className}` |
| 162 | + }, restProps), children); |
| 163 | +}; // Modal footer |
| 164 | + |
| 165 | + |
| 166 | +Modal.Footer = ({ |
| 167 | + children, |
| 168 | + className, |
| 169 | + ...restProps |
| 170 | +}) => { |
| 171 | + return /*#__PURE__*/React.createElement("footer", _extends({ |
| 172 | + className: `mt-20px ${className}` |
| 173 | + }, restProps), children); |
| 174 | +}; // import React from 'react' |
| 175 | +// export function Modal() { |
| 176 | +// return <div>Modal</div> |
| 177 | +// } |
| 178 | + |
| 179 | +export { Modal }; |
0 commit comments