package-hrnet-modale 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/Modale.css +1 -1
- package/src/Modale.js +3 -1
package/README.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
# voici mon module modale
|
|
2
|
+
Ma modale sert à ouvrir une fenêtre modale qui affiche un message et un bouton pour fermer la modale.
|
|
3
|
+
|
|
4
|
+
# Installation
|
|
5
|
+
installer les dépendances avec la commande :
|
|
6
|
+
```
|
|
7
|
+
npm install
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
# Utilisation
|
|
11
|
+
lancer le serveur avec la commande :
|
|
12
|
+
```
|
|
13
|
+
npm run start
|
|
14
|
+
```
|
|
15
|
+
# Fonctionnalités
|
|
16
|
+
La modale est un composant React qui peut être utilisé dans une application pour afficher un message et un bouton pour fermer la fenêtre.
|
|
17
|
+
|
|
18
|
+
# Auteur
|
|
19
|
+
je suis un développeur web junior, je suis passionné par la programmation et j'aime créer des applications web.
|
|
20
|
+
|
|
21
|
+
# Contact
|
|
22
|
+
vous pouvez me contacter par email à l'adresse suivante :
|
|
23
|
+
```
|
|
24
|
+
jeaan-claude.grech@orange.fr
|
|
25
|
+
|
|
26
|
+
```
|
|
27
|
+
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ModaleComponent=t(require("react")):e.ModaleComponent=t(e.react)}("undefined"!=typeof self?self:this,(e=>(()=>{"use strict";var t={275:(e,t,n)=>{n.d(t,{A:()=>c});var r=n(601),o=n.n(r),a=n(314),i=n.n(a)()(o());i.push([e.id,".modale-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modale-content {\n background: white;\n padding: 20px;\n border-radius: 8px;\n}\n\n.modale-close {\n
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ModaleComponent=t(require("react")):e.ModaleComponent=t(e.react)}("undefined"!=typeof self?self:this,(e=>(()=>{"use strict";var t={275:(e,t,n)=>{n.d(t,{A:()=>c});var r=n(601),o=n.n(r),a=n(314),i=n.n(a)()(o());i.push([e.id,".modale-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modale-content {\n background: white;\n padding: 20px;\n border-radius: 8px;\n}\n\n.modale-close {\n \n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n}\n",""]);const c=i},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(i[s]=!0)}for(var u=0;u<e.length;u++){var l=[].concat(e[u]);r&&i[l[0]]||(void 0!==a&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=a),n&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=n):l[2]=n),o&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=o):l[4]="".concat(o)),t.push(l))}},t}},601:e=>{e.exports=function(e){return e[1]}},72:e=>{var t=[];function n(e){for(var n=-1,r=0;r<t.length;r++)if(t[r].identifier===e){n=r;break}return n}function r(e,r){for(var a={},i=[],c=0;c<e.length;c++){var s=e[c],u=r.base?s[0]+r.base:s[0],l=a[u]||0,d="".concat(u," ").concat(l);a[u]=l+1;var p=n(d),f={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==p)t[p].references++,t[p].updater(f);else{var m=o(f,r);r.byIndex=c,t.splice(c,0,{identifier:d,updater:m,references:1})}i.push(d)}return i}function o(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,o){var a=r(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=n(a[i]);t[c].references--}for(var s=r(e,o),u=0;u<a.length;u++){var l=n(a[u]);0===t[l].references&&(t[l].updater(),t.splice(l,1))}a=s}}},659:e=>{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var o=void 0!==n.layer;o&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,o&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},155:t=>{t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={id:e,exports:{}};return t[e](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var o={};r.r(o),r.d(o,{default:()=>C});var a=r(155),i=r.n(a),c=r(72),s=r.n(c),u=r(825),l=r.n(u),d=r(659),p=r.n(d),f=r(56),m=r.n(f),v=r(540),y=r.n(v),h=r(113),b=r.n(h),g=r(275),x={};x.styleTagTransform=b(),x.setAttributes=m(),x.insert=p().bind(null,"head"),x.domAPI=l(),x.insertStyleElement=y(),s()(g.A,x),g.A&&g.A.locals&&g.A.locals;const C=function(e){var t=e.isOpen,n=e.close,r=e.children;return t?i().createElement(i().Fragment,null,i().createElement("div",{className:"modale-overlay"},i().createElement("div",{className:"modale-content"},i().createElement("button",{onClick:n,className:"modale-close"},"Close"),r))):null};return o})()));
|
package/package.json
CHANGED
package/src/Modale.css
CHANGED
package/src/Modale.js
CHANGED
|
@@ -5,12 +5,14 @@ const Modale = ({ isOpen, close, children }) => {
|
|
|
5
5
|
if (!isOpen) return null;
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
|
+
<>
|
|
8
9
|
<div className="modale-overlay">
|
|
9
10
|
<div className="modale-content">
|
|
10
11
|
<button onClick={close} className="modale-close">Close</button>
|
|
11
12
|
{children}
|
|
12
13
|
</div>
|
|
13
|
-
|
|
14
|
+
</div>
|
|
15
|
+
</>
|
|
14
16
|
);
|
|
15
17
|
};
|
|
16
18
|
|