react-modal-component-by-jeremy/dist/index.js

Un composant modal réutilisable en React

"use strict";var e=require("react");function n(e){var n=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}})),n.default=e,Object.freeze(n)}var r=n(e);!function(e,n){void 0===n&&(n={});var r=n.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=e:o.appendChild(document.createTextNode(e))}}(".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 t=function(e){var n=e.className,t=void 0===n?"":n;return r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18",className:"close-search ".concat(t)},r.createElement("circle",{cx:"9",cy:"9",r:"9",fill:"none"}),r.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},r.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),r.createElement("path",{d:"M5.4 12.6l7.2-7.2"})))},o=r.memo(t),a=function(e){var n=e.className,t=void 0===n?"":n;return r.createElement("div",{className:"attr-icon ".concat(t)},r.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"},r.createElement("path",{d:"M0.984375 4.40707L5.22075 8.24002L12.4226 1",stroke:"#fff",strokeWidth:"1.5"})))},i=r.memo(a),l=function(e){var n=e.className,t=void 0===n?"":n;return r.createElement("div",{className:"attr-icon ".concat(t)},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 540 540",fill:"#fff"},r.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"})))},c=r.memo(l),d=function(e){var n=e.className,t=void 0===n?"":n;return r.createElement("div",{className:t},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"18",height:"18",viewBox:"0 0 18 18"},r.createElement("g",{fill:"none",stroke:"#fff",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},r.createElement("path",{d:"M12.6 12.6L5.4 5.4"}),r.createElement("path",{d:"M5.4 12.6l7.2-7.2"}))))},s=r.memo(d);module.exports=function(n){var r=n.isOpen,t=n.onClose,a=n.title,l=n.children,d=n.type,m=e.useRef(null),u=e.useRef(null),f=e.useRef(null);e.useEffect((function(){if(r){var e;f.current=document.activeElement,null===(e=u.current)||void 0===e||e.focus();var n=function(e){if("Escape"===e.key)t();else if("Tab"===e.key){var n,r=null===(n=m.current)||void 0===n?void 0:n.querySelectorAll("button, a, input, select, textarea, [tabindex]:not([tabindex='-1'])");if(r){var o=r[0],a=r[r.length-1];e.shiftKey&&document.activeElement===o?(a.focus(),e.preventDefault()):e.shiftKey||document.activeElement!==a||(o.focus(),e.preventDefault())}}};return document.addEventListener("keydown",n),function(){document.removeEventListener("keydown",n),f.current&&f.current.focus()}}}),[r,t]);return r?e.createElement("div",{className:"modal-overlay ".concat(r?"show":""),onClick:t,role:"presentation",tabIndex:-1,"aria-hidden":r?"false":"true"},e.createElement("dialog",{className:"modal-content ".concat(d),"aria-labelledby":"modal-title","aria-describedby":"modal-description",ref:m,open:r,onClick:function(e){return e.stopPropagation()},onKeyDown:function(e){"Escape"===e.key&&t()},tabIndex:-1},e.createElement("button",{ref:u,className:"modal-close",onClick:t,"aria-label":"Fermer la boîte de dialogue"},e.createElement(o,{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(d){case"info":return e.createElement(c,{className:"modal-icon info"});case"success":return e.createElement(i,{className:"modal-icon success"});case"error":return e.createElement(s,{className:"modal-icon error"});default:return null}}()," ",a)),e.createElement("div",{className:"modal-body"},e.createElement("div",{id:"modal-description"},l))))):null};