package-hrnet-modale 1.0.0 → 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +27 -0
- package/dist/index.js +1 -1
- package/package.json +7 -2
- package/.bablerc +0 -3
- package/babel.config.js +0 -3
- package/src/Modale.css +0 -25
- package/src/Modale.js +0 -17
- package/src/index.js +0 -3
- package/webpack.config.js +0 -35
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 width: 500px;\n height: 50px;\n}\n\n.modale-close {\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n background-color: black;\n width: 30px;\n height: 30px;\n border-radius: 50%;\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 d=[].concat(e[u]);r&&i[d[0]]||(void 0!==a&&(void 0===d[5]||(d[1]="@layer".concat(d[5].length>0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=a),n&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=n):d[2]=n),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),t.push(d))}},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],d=a[u]||0,l="".concat(u," ").concat(d);a[u]=d+1;var p=n(l),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 v=o(f,r);r.byIndex=c,t.splice(c,0,{identifier:l,updater:v,references:1})}i.push(l)}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 d=n(a[u]);0===t[d].references&&(t[d].updater(),t.splice(d,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:()=>w});var a=r(155),i=r.n(a),c=r(72),s=r.n(c),u=r(825),d=r.n(u),l=r(659),p=r.n(l),f=r(56),v=r.n(f),m=r(540),h=r.n(m),y=r(113),b=r.n(y),g=r(275),x={};x.styleTagTransform=b(),x.setAttributes=v(),x.insert=p().bind(null,"head"),x.domAPI=d(),x.insertStyleElement=h(),s()(g.A,x),g.A&&g.A.locals&&g.A.locals;const w=function(e){var t=e.isOpen,n=e.close,r=e.children;return t?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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "package-hrnet-modale",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "webpack",
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"license": "ISC",
|
|
13
13
|
"description": "",
|
|
14
14
|
"dependencies": {
|
|
15
|
+
"package-hrnet-modale": "^1.0.2",
|
|
15
16
|
"react": "^18.3.1",
|
|
16
17
|
"react-dom": "^18.3.1"
|
|
17
18
|
},
|
|
@@ -25,5 +26,9 @@
|
|
|
25
26
|
"style-loader": "^4.0.0",
|
|
26
27
|
"webpack": "^5.96.1",
|
|
27
28
|
"webpack-cli": "^5.1.4"
|
|
28
|
-
}
|
|
29
|
+
},
|
|
30
|
+
"files": [
|
|
31
|
+
"lib/**/*",
|
|
32
|
+
"README.md"
|
|
33
|
+
]
|
|
29
34
|
}
|
package/.bablerc
DELETED
package/babel.config.js
DELETED
package/src/Modale.css
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
.modale-overlay {
|
|
2
|
-
position: fixed;
|
|
3
|
-
top: 0;
|
|
4
|
-
left: 0;
|
|
5
|
-
width: 100%;
|
|
6
|
-
height: 100%;
|
|
7
|
-
background: rgba(0, 0, 0, 0.5);
|
|
8
|
-
display: flex;
|
|
9
|
-
justify-content: center;
|
|
10
|
-
align-items: center;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.modale-content {
|
|
14
|
-
background: white;
|
|
15
|
-
padding: 20px;
|
|
16
|
-
border-radius: 8px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.modale-close {
|
|
20
|
-
background: red;
|
|
21
|
-
color: white;
|
|
22
|
-
border: none;
|
|
23
|
-
padding: 10px;
|
|
24
|
-
cursor: pointer;
|
|
25
|
-
}
|
package/src/Modale.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './Modale.css'; // Si vous avez un fichier de style
|
|
3
|
-
|
|
4
|
-
const Modale = ({ isOpen, close, children }) => {
|
|
5
|
-
if (!isOpen) return null;
|
|
6
|
-
|
|
7
|
-
return (
|
|
8
|
-
<div className="modale-overlay">
|
|
9
|
-
<div className="modale-content">
|
|
10
|
-
<button onClick={close} className="modale-close">Close</button>
|
|
11
|
-
{children}
|
|
12
|
-
</div>
|
|
13
|
-
</div>
|
|
14
|
-
);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export default Modale;
|
package/src/index.js
DELETED
package/webpack.config.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
const path = require('path');
|
|
2
|
-
|
|
3
|
-
module.exports = {
|
|
4
|
-
mode: "production", // Or "development" for debugging
|
|
5
|
-
entry: './src/index.js',
|
|
6
|
-
output: {
|
|
7
|
-
path: path.resolve(__dirname, 'dist'),
|
|
8
|
-
filename: 'index.js',
|
|
9
|
-
library: 'ModaleComponent',
|
|
10
|
-
libraryTarget: 'umd',
|
|
11
|
-
globalObject: "typeof self !== 'undefined' ? self : this",
|
|
12
|
-
},
|
|
13
|
-
module: {
|
|
14
|
-
rules: [
|
|
15
|
-
{
|
|
16
|
-
test: /\.jsx?$/,
|
|
17
|
-
exclude: /node_modules/,
|
|
18
|
-
use: {
|
|
19
|
-
loader: 'babel-loader',
|
|
20
|
-
options: {
|
|
21
|
-
presets: ["@babel/preset-env", "@babel/preset-react"], // Explicitly add Babel presets here
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
test: /\.css$/,
|
|
27
|
-
use: ['style-loader', 'css-loader'],
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
},
|
|
31
|
-
externals: {
|
|
32
|
-
react: 'react',
|
|
33
|
-
'react-dom': 'react-dom',
|
|
34
|
-
},
|
|
35
|
-
};
|