react-modal-component-by-jeremy
Version:
Un composant modal réutilisable en React
2 lines (1 loc) • 7.74 kB
JavaScript
import*as n from"react";import e,{useRef as r,useEffect as t}from"react";!function(n,e){void 0===e&&(e={});var r=e.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}(".modal-content,\r\n.modal-overlay {\r\n display: flex;\r\n background: rgba(0, 0, 0, 0.5);\r\n}\r\n.modal-overlay {\r\n position: fixed;\r\n z-index: 1000;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s, visibility 0.3s;\r\n}\r\n.modal-content,\r\n.modal-inner_content {\r\n position: relative;\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\r\n}\r\n.modal-overlay.show {\r\n display: flex !important;\r\n opacity: 1 !important;\r\n visibility: visible !important;\r\n z-index: 1000 !important;\r\n}\r\n.modal-close:focus {\r\n outline: 0;\r\n box-shadow: none;\r\n}\r\n.modal-content {\r\n border: none !important;\r\n box-sizing: border-box;\r\n backdrop-filter: blur(3px);\r\n -webkit-backdrop-filter: blur(5px);\r\n border-radius: 0.4375em;\r\n min-width: 320px;\r\n max-width: 90%;\r\n padding: 28px;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n transform: translateY(-20px);\r\n transition: transform 0.3s, opacity 0.3s;\r\n}\r\n.modal-inner_content {\r\n width: 100%;\r\n height: 100%;\r\n z-index: 2;\r\n border-radius: calc(0.4375em / 2);\r\n background: #fff;\r\n padding: 20px 0;\r\n}\r\n.modal-close,\r\n.modal-icon svg {\r\n position: absolute;\r\n filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 10.3));\r\n}\r\n.modal-overlay.show .modal-content {\r\n transform: translateY(0);\r\n opacity: 1;\r\n}\r\n.modal-close {\r\n top: 0;\r\n right: 0;\r\n padding: 0;\r\n background: 0 0;\r\n border: none;\r\n width: 32px;\r\n height: 32px;\r\n cursor: pointer;\r\n transition: transform 0.2s;\r\n}\r\n.modal-close svg {\r\n width: 32px;\r\n height: 32px;\r\n fill: #333;\r\n}\r\n.modal-close:hover {\r\n transform: scale(1.1);\r\n}\r\n.modal-header {\r\n display: inline-flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 15px;\r\n width: fit-content;\r\n}\r\n.modal-title {\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: #333 !important;\r\n width: fit-content;\r\n margin: 0 32px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.modal-content.error .modal-icon svg,\r\n.modal-content.info .modal-icon svg,\r\n.modal-icon {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n.modal-icon {\r\n position: relative;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 50%;\r\n}\r\n.modal-icon svg {\r\n width: 18px;\r\n height: 18px;\r\n}\r\n.modal-body {\r\n font-size: 16px;\r\n color: #444;\r\n}\r\n.modal-content.success {\r\n background: rgba(40, 167, 69, 0.5);\r\n}\r\n.modal-content.success .modal-icon {\r\n background: #28a745;\r\n}\r\n.modal-content.error {\r\n background: rgba(220, 53, 69, 0.5);\r\n}\r\n.modal-content.error .modal-icon {\r\n background: #dc3545;\r\n}\r\n.modal-content.info {\r\n background: rgba(0, 123, 255, 0.5);\r\n}\r\n.modal-content.info .modal-icon {\r\n background: #007bff;\r\n}\r\n@media (max-width: 480px) {\r\n .modal-content {\r\n min-width: 280px;\r\n padding: 15px;\r\n }\r\n .modal-title {\r\n font-size: 18px;\r\n }\r\n .modal-body {\r\n font-size: 14px;\r\n }\r\n}\r\n");var o=function(e){var r=e.className,t=void 0===r?"":r;return n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",className:"close-search ".concat(t)},n.createElement("circle",{cx:"9",cy:"9",r:"9",fill:"none"}),n.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},n.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),n.createElement("path",{d:"M5.4 12.6l7.2-7.2"})))},a=n.memo(o),i=function(e){var r=e.className,t=void 0===r?"":r;return n.createElement("div",{className:"attr-icon ".concat(t)},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 14 10",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",className:"icon"},n.createElement("path",{d:"M0.984375 4.40707L5.22075 8.24002L12.4226 1",stroke:"#fff",strokeWidth:"1.5"})))},l=n.memo(i),c=function(e){var r=e.className,t=void 0===r?"":r;return n.createElement("div",{className:"attr-icon ".concat(t)},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 540 540",fill:"#fff"},n.createElement("path",{d:"M342.9 385.7h-17.1V239.1c0-18.9-15.4-34.3-35.1-37.7-1.7-.9-3.4-.9-6-.9h-88.3c-24 0-42.9 17.1-42.9 38.6 0 21.4 18.9 38.6 42.9 38.6h42.9l.9 108h-42.9c-24 0-42.9 17.1-42.9 38.6 0 21.4 18.9 38.6 42.9 38.6H343c24 0 42.9-17.1 42.9-38.6-.2-21.4-19-38.6-43-38.6zm-77.2-219.4c33.4 0 60-26.7 60-60s-26.6-60-60-60-60 26.7-60 60 26.6 60 60 60z"})))},d=n.memo(c),s=function(e){var r=e.className,t=void 0===r?"":r;return n.createElement("div",{className:t},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18"},n.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},n.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),n.createElement("path",{d:"M5.4 12.6l7.2-7.2"}))))},m=n.memo(s),p=function(n){var o=n.isOpen,i=n.onClose,c=n.title,s=n.children,p=n.type,f=r(null),u=r(null),h=r(null);t((function(){if(o){var n;h.current=document.activeElement,null===(n=u.current)||void 0===n||n.focus();var e=function(n){if("Escape"===n.key)i();else if("Tab"===n.key){var e,r=null===(e=f.current)||void 0===e?void 0:e.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])");if(r){var t=r[0],o=r[r.length-1];n.shiftKey&&document.activeElement===t?(o.focus(),n.preventDefault()):n.shiftKey||document.activeElement!==o||(t.focus(),n.preventDefault())}}};return document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e),h.current&&h.current.focus()}}}),[o,i]);return o?e.createElement("div",{className:"modal-overlay ".concat(o?"show":""),onClick:i,role:"presentation",tabIndex:-1,"aria-hidden":o?"false":"true"},e.createElement("dialog",{className:"modal-content ".concat(p),"aria-labelledby":"modal-title","aria-describedby":"modal-description",ref:f,open:o,onClick:function(n){return n.stopPropagation()},onKeyDown:function(n){"Escape"===n.key&&i()},tabIndex:-1},e.createElement("button",{ref:u,className:"modal-close",onClick:i,"aria-label":"Fermer la boîte de dialogue"},e.createElement(a,{className:"close-icon"})),e.createElement("div",{className:"modal-inner_content"},e.createElement("div",{className:"modal-header"},e.createElement("h2",{id:"modal-title",className:"modal-title"},function(){switch(p){case"info":return e.createElement(d,{className:"modal-icon info"});case"success":return e.createElement(l,{className:"modal-icon success"});case"error":return e.createElement(m,{className:"modal-icon error"});default:return null}}()," ",c)),e.createElement("div",{className:"modal-body"},e.createElement("div",{id:"modal-description"},s))))):null};export{p as default};