react-modal-component-by-jeremy
Version:
Un composant modal réutilisable en React
2 lines (1 loc) • 8.5 kB
JavaScript
"use strict";var n=require("react");function e(n){var e=Object.create(null);return n&&Object.keys(n).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:function(){return n[t]}})}})),e.default=n,Object.freeze(e)}var t=e(n);!function(n,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}(".modal-content,\n.modal-overlay {\n display: flex;\n background: rgba(0, 0, 0, 0.5);\n}\n.modal-overlay {\n position: fixed;\n z-index: 1000;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s, visibility 0.3s;\n}\n.modal-content,\n.modal-inner_content {\n position: relative;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\n}\n.modal-overlay.show {\n display: flex !important;\n opacity: 1 !important;\n visibility: visible !important;\n z-index: 1000 !important;\n}\n.modal-close:focus {\n outline: 0;\n box-shadow: none;\n}\n.modal-content {\n border: none !important;\n box-sizing: border-box;\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(5px);\n border-radius: 0.4375em;\n min-width: 320px;\n max-width: 90%;\n padding: 28px;\n flex-direction: column;\n align-items: center;\n text-align: center;\n transform: translateY(-20px);\n transition: transform 0.3s, opacity 0.3s;\n}\n.modal-inner_content {\n width: 100%;\n height: 100%;\n z-index: 2;\n border-radius: calc(0.4375em / 2);\n background: #fff;\n padding: 20px 0;\n}\n.modal-close,\n.modal-icon svg {\n position: absolute;\n filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 10.3));\n}\n.modal-overlay.show .modal-content {\n transform: translateY(0);\n opacity: 1;\n}\n.modal-close {\n top: 0;\n right: 0;\n padding: 0;\n background: 0 0;\n border: none;\n width: 32px;\n height: 32px;\n cursor: pointer;\n transition: transform 0.2s;\n}\n.modal-close svg {\n width: 32px;\n height: 32px;\n fill: #333;\n}\n.modal-close:hover {\n transform: scale(1.1);\n}\n.modal-header {\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin-bottom: 15px;\n width: fit-content;\n}\n.modal-title {\n font-size: 20px;\n font-weight: 700;\n color: #333 !important;\n width: fit-content;\n margin: 0 32px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.modal-content.error .modal-icon svg,\n.modal-content.info .modal-icon svg,\n.modal-icon {\n width: 24px;\n height: 24px;\n}\n.modal-icon {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n.modal-icon svg {\n width: 18px;\n height: 18px;\n}\n.modal-body {\n font-size: 16px;\n color: #444;\n}\n.modal-content.success {\n background: rgba(40, 167, 69, 0.5);\n}\n.modal-content.success .modal-icon {\n background: #28a745;\n}\n.modal-content.warning {\n background: rgba(255, 193, 7, 0.5);\n}\n.modal-content.warning .modal-icon {\n background: #ffc107;\n}\n.modal-content.error {\n background: rgba(220, 53, 69, 0.5);\n}\n.modal-content.error .modal-icon {\n background: #dc3545;\n}\n.modal-content.info {\n background: rgba(0, 123, 255, 0.5);\n}\n.modal-content.info .modal-icon {\n background: #007bff;\n}\n@media (max-width: 480px) {\n .modal-content {\n min-width: 280px;\n padding: 15px;\n }\n .modal-title {\n font-size: 18px;\n }\n .modal-body {\n font-size: 14px;\n }\n}\n");var o=function(n){var e=n.className,o=void 0===e?"":e;return t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 18 18",className:"close-search ".concat(o)},t.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},t.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),t.createElement("path",{d:"M5.4 12.6l7.2-7.2"})))},a=t.memo(o),r=function(n){var e=n.className,o=void 0===e?"":e;return t.createElement("div",{className:"attr-icon ".concat(o)},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 18 18",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:"icon"},t.createElement("path",{d:"M5.4,8.9l2.7,2.4l4.5-4.6",stroke:"#fff",strokeWidth:"1.5"})))},i=t.memo(r),c=function(n){var e=n.className,o=void 0===e?"":e;return t.createElement("div",{className:"attr-icon ".concat(o)},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 18 18",width:"18",height:"18",fill:"#fff"},t.createElement("path",{d:"M10.5 11.7h-.4v-3c0-.4-.3-.7-.7-.8h-.1-1.8c-.5 0-.9.3-.9.8 0 .4.4.8.9.8h.9v2.3h-.9c-.5 0-.9.4-.9.8s.4.8.9.8h3c.5 0 .9-.4.9-.8 0-.5-.4-.9-.9-.9zM8.9 7.2c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3-1.3.6-1.3 1.3.6 1.3 1.3 1.3z"})))},l=t.memo(c),s=function(n){var e=n.className,o=void 0===e?"":e;return t.createElement("div",{className:"attr-icon ".concat(o)},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18"},t.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},t.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),t.createElement("path",{d:"M5.4 12.6l7.2-7.2"}))))},d=t.memo(s),m=function(n){var e=n.className,o=void 0===e?"":e;return t.createElement("div",{className:"attr-icon ".concat(o)},t.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 18 18",width:"18",height:"18",fill:"#fff"},t.createElement("path",{d:"M9 13.3c.5 0 .8-.3.8-.8s-.3-.8-.8-.8-.8.3-.8.8.4.8.8.8zm0-2.9c.5 0 .8-.3.8-.7V5.5c0-.5-.3-.8-.8-.8s-.8.4-.8.8v4.1c0 .5.4.8.8.8z"})))},u=t.memo(m),f=function(n){return n?Array.from(n.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])")).filter((function(n){return!n.hasAttribute("disabled")&&-1!==n.tabIndex})):[]};module.exports=function(e){var t=e.isOpen,o=e.onClose,r=e.title,c=e.children,s=e.type,m=e.closeOnEsc,p=void 0===m||m,h=e.closeOnOverlayClick,g=void 0===h||h,v=e.hideCloseButton,x=void 0!==v&&v,b=n.useRef(null),w=n.useRef(null),y=n.useRef(null),E=n.useCallback((function(n){if(t)if("Escape"!==n.key){if("Tab"===n.key){var e=f(b.current);if(0!==e.length){var a=e[0],r=e[e.length-1];n.shiftKey&&document.activeElement===a?(r.focus(),n.preventDefault()):n.shiftKey||document.activeElement!==r||(a.focus(),n.preventDefault())}}}else p&&o()}),[t,p,o]);n.useEffect((function(){var n,e;if(t)return y.current=document.activeElement,!x&&w.current?w.current.focus():(n=b.current,(e=f(n)[0])&&e instanceof HTMLElement&&e.focus()),document.addEventListener("keydown",E),function(){document.removeEventListener("keydown",E),y.current instanceof HTMLElement&&y.current.focus()}}),[t,x,E]);return t?n.createElement("div",{className:"modal-overlay ".concat(t?"show":""),onClick:function(n){g&&n.target===n.currentTarget&&o()},role:"presentation",tabIndex:-1,"aria-hidden":t?"false":"true"},n.createElement("dialog",{className:"modal-content ".concat(s),"aria-labelledby":"modal-title","aria-describedby":"modal-description",ref:b,open:t,onClick:function(n){return n.stopPropagation()},onKeyDown:function(n){"Escape"===n.key&&o()},tabIndex:-1},n.createElement("button",{ref:w,className:"modal-close",onClick:o,"aria-label":"Fermer la boîte de dialogue"},n.createElement(a,{className:"close-icon"})),n.createElement("div",{className:"modal-inner_content"},n.createElement("div",{className:"modal-header"},n.createElement("h2",{id:"modal-title",className:"modal-title"},function(){switch(s){case"info":return n.createElement(l,{className:"modal-icon info"});case"success":return n.createElement(i,{className:"modal-icon success"});case"error":return n.createElement(d,{className:"modal-icon error"});case"warning":return n.createElement(u,{className:"modal-icon warning"});default:return null}}()," ",r)),n.createElement("div",{className:"modal-body"},n.createElement("div",{id:"modal-description"},c))))):null};