package-hrnet-modale 1.0.7 → 1.0.9
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 +33 -2
- package/dist/index.js +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,13 +1,44 @@
|
|
|
1
1
|
# voici mon module modale
|
|
2
2
|
Ma modale sert à ouvrir une fenêtre modale qui affiche un message et un bouton pour fermer la modale.
|
|
3
3
|
|
|
4
|
+
# caractéristiques
|
|
5
|
+
entièrement personnalisable grace aux 'props' et aux 'styles'
|
|
6
|
+
section title content
|
|
7
|
+
utilisation par défaut ou se servir des styles modifiables 'overlay' 'modal'
|
|
4
8
|
# Installation
|
|
5
|
-
installer
|
|
9
|
+
installer le composant via npm:
|
|
6
10
|
```
|
|
7
|
-
npm install
|
|
11
|
+
npm install package-hrnet-modale
|
|
8
12
|
```
|
|
9
13
|
|
|
10
14
|
# Utilisation
|
|
15
|
+
import React, {useState} from react;
|
|
16
|
+
import Modale from "your-modal-package-name";
|
|
17
|
+
|
|
18
|
+
const App = () => {
|
|
19
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<div>
|
|
23
|
+
<button onClick={() => setIsOpen(true)}>Open Modal</button>
|
|
24
|
+
<Modale
|
|
25
|
+
isOpen={isOpen}
|
|
26
|
+
close={() => setIsOpen(false)}
|
|
27
|
+
title="Custom Modal Title"
|
|
28
|
+
style={{
|
|
29
|
+
overlay: { backgroundColor: "rgba(0, 0, 255, 0.2)" },
|
|
30
|
+
modal: { backgroundColor: "lightblue", width: "500px", height:'50px },
|
|
31
|
+
title: { color: "darkblue" },
|
|
32
|
+
closeButton: { color: "red" },
|
|
33
|
+
}}
|
|
34
|
+
closeButtonText="Close"
|
|
35
|
+
>
|
|
36
|
+
</Modale>
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
export default App;
|
|
41
|
+
|
|
11
42
|
lancer le serveur avec la commande :
|
|
12
43
|
```
|
|
13
44
|
npm run start
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,
|
|
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),i=n(314),a=n.n(i)()(o());a.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 border-radius: 8px;\n width: 500px;\n height: 49px;\n padding: 0;\n position: relative;\n}\n\n.modale-close {\n color: white;\n border: none;\n padding: 0; \n cursor: pointer;\n background-color: black;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n position: absolute;\n top: -15px;\n right: -15px;\n display: flex; \n justify-content: center; \n align-items: center; \n font-size: 14px; \n line-height: 1;\n}\n\n",""]);const c=a},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,i){"string"==typeof e&&(e=[[null,e,void 0]]);var a={};if(r)for(var c=0;c<this.length;c++){var s=this[c][0];null!=s&&(a[s]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);r&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},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 i={},a=[],c=0;c<e.length;c++){var s=e[c],l=r.base?s[0]+r.base:s[0],u=i[l]||0,p="".concat(l," ").concat(u);i[l]=u+1;var d=n(p),f={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==d)t[d].references++,t[d].updater(f);else{var m=o(f,r);r.byIndex=c,t.splice(c,0,{identifier:p,updater:m,references:1})}a.push(p)}return a}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 i=r(e=e||[],o=o||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var c=n(i[a]);t[c].references--}for(var s=r(e,o),l=0;l<i.length;l++){var u=n(i[l]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}i=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 i=n.sourceMap;i&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),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 i=n[e]={id:e,exports:{}};return t[e](i,i.exports,r),i.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:()=>A});var i=r(155),a=r.n(i),c=r(72),s=r.n(c),l=r(825),u=r.n(l),p=r(659),d=r.n(p),f=r(56),m=r.n(f),y=r(540),v=r.n(y),b=r(113),h=r.n(b),g=r(275),x={};function j(e){return j="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},j(e)}function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach((function(t){S(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function S(e,t,n){return(t=function(e){var t=function(e){if("object"!=j(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,"string");if("object"!=j(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==j(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}x.styleTagTransform=h(),x.setAttributes=m(),x.insert=d().bind(null,"head"),x.domAPI=u(),x.insertStyleElement=v(),s()(g.A,x),g.A&&g.A.locals&&g.A.locals;var C={position:"fixed",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.5)",display:"flex",justifyContent:"center",alignItems:"center",zIndex:1e3},P={display:"flex",justifyContent:"center",alignItems:"center",width:"100%",height:"100%"},E={position:"relative",backgroundColor:"#fff",borderRadius:"8px",padding:"20px",width:"500px",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)"},M={position:"absolute",top:"-15px",right:"-15px",background:"none",border:"none",fontSize:"16px",cursor:"pointer",height:"30px",width:"30px",borderRadius:"50%"},T={margin:"0 0 20px",fontSize:"16px",textAlign:"left"};const A=function(e){var t=e.isOpen,n=e.close,r=e.children,o=e.title,i=void 0===o?"":o,c=e.style,s=void 0===c?{}:c,l=e.closeLabel,u=void 0===l?"x":l,p=e.closeButtonClassName,d=void 0===p?"modale-close":p,f=e.onClose,m=void 0===f?n:f;return t?a().createElement("div",{className:"modale-overlay",style:O(O({},C),s.overlay)},a().createElement("div",{className:"container",style:O(O({},P),s.container)},a().createElement("div",{className:"modale-content",style:O(O({},E),s.modal)},i&&a().createElement("h1",{className:"modale-title",style:O(O({},T),s.title)},i),r,a().createElement("button",{className:d,onClick:m,style:O(O({},M),s.closeButton)},u)))):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.9",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "webpack",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"webpack": "^5.96.1",
|
|
28
28
|
"webpack-cli": "^5.1.4"
|
|
29
29
|
},
|
|
30
|
+
|
|
30
31
|
"files": [
|
|
31
32
|
"lib/**/*",
|
|
32
33
|
"README.md"
|