aark-react-modalify 1.0.1 → 1.0.3
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/dist/{ModalProvider-Bxtotq_Y.js → ModalProvider-BAlPeDjm.js} +0 -1
- package/dist/ModalProvider-DA6KcJdZ.cjs +5 -0
- package/dist/aark-react-modalify.css +1 -1
- package/dist/index.cjs.js +20 -1
- package/dist/index.esm.js +109 -203
- package/package.json +10 -3
- package/src/assets/styles/aark-modal.css +183 -0
- package/dist/ModalProvider-B_DFPtUh.cjs +0 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
"use strict"
|
|
2
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
3
|
+
const e=require("react/jsx-runtime"),s=require("./index.cjs.js")
|
|
4
|
+
exports.default=()=>{const{isOpen:o,config:r,close:n}=s.useModal()
|
|
5
|
+
return o&&r?e.jsx(s.ModalRenderer,{config:r,onClose:n}):null}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--aark-modal-overlay-bg: rgba(0, 0, 0, .5);--aark-modal-
|
|
1
|
+
:root{--aark-modal-overlay-bg: rgba(0, 0, 0, .5);--aark-modal-bg: #fff;--aark-modal-radius: 8px;--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, .15);--aark-modal-pad: 16px;--aark-modal-z: 9999;--aark-close-color: #666;--aark-close-hover: #f5f5f5;--aark-anim: .2s}.aark-modal-container{position:fixed;inset:0;z-index:var(--aark-modal-z)}.aark-modal-container.notification{pointer-events:none}.aark-modal-overlay{position:absolute;inset:0;background:var(--aark-modal-overlay-bg);backdrop-filter:blur(2px)}.aark-modal-content{position:fixed;background:var(--aark-modal-bg);border-radius:var(--aark-modal-radius);box-shadow:var(--aark-modal-shadow);padding:var(--aark-modal-pad);z-index:calc(var(--aark-modal-z) + 1);max-width:90vw;max-height:90vh;overflow:auto}.aark-modal-content.notification{pointer-events:auto}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center{top:20px;left:50%;transform:translate(-50%)}.aark-modal-content.top-right{top:20px;right:20px}.aark-modal-content.bottom-right{bottom:20px;right:20px}.aark-modal-content.bottom-center{bottom:20px;left:50%;transform:translate(-50%)}.aark-modal-close{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:0;border:0;color:var(--aark-close-color);cursor:pointer;border-radius:50%;font-size:14px;line-height:1;transition:all var(--aark-anim)}.aark-modal-close:hover{background:var(--aark-close-hover);color:#333}.aark-modal-close:focus{outline:2px solid #007bff;outline-offset:2px}.aark-modal-body{padding-top:8px}.aark-modal-container{animation:f var(--aark-anim)}.aark-modal-content{animation:s var(--aark-anim)}@keyframes f{0%{opacity:0}to{opacity:1}}@keyframes s{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.aark-modal-content.top-center{animation:d var(--aark-anim)}.aark-modal-content.top-right,.aark-modal-content.bottom-right{animation:l var(--aark-anim)}.aark-modal-content.bottom-center{animation:u var(--aark-anim)}@keyframes d{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes l{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}@keyframes u{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 768px){.aark-modal-content{margin:10px;max-width:calc(100vw - 20px)}.aark-modal-content.center{top:50%;left:50%;transform:translate(-50%,-50%)}.aark-modal-content.top-center,.aark-modal-content.bottom-center{left:50%;transform:translate(-50%)}.aark-modal-content.top-right{right:10px;left:auto;transform:none}.aark-modal-content.bottom-right{right:10px;bottom:10px;left:auto;transform:none}}
|
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1,20 @@
|
|
|
1
|
-
"use strict"
|
|
1
|
+
"use strict"
|
|
2
|
+
function o(o,a){const e={type:o,config:a}
|
|
3
|
+
s.forEach(o=>o(e))}function a(){m&&(o("beforeClose",m),m=null,o("close"))}function e(o){const a=document.documentElement
|
|
4
|
+
o.overlayBackground&&a.style.setProperty("--aark-modal-overlay-bg",o.overlayBackground),o.overlayBlur&&a.style.setProperty("--aark-modal-overlay-blur",o.overlayBlur),o.modalBackground&&a.style.setProperty("--aark-modal-bg",o.modalBackground),o.modalBorderRadius&&a.style.setProperty("--aark-modal-border-radius",o.modalBorderRadius),o.modalShadow&&a.style.setProperty("--aark-modal-shadow",o.modalShadow),o.modalPadding&&a.style.setProperty("--aark-modal-padding",o.modalPadding),o.modalZIndex&&a.style.setProperty("--aark-modal-z-index",o.modalZIndex.toString()),o.modalContentZIndex&&a.style.setProperty("--aark-modal-content-z-index",o.modalContentZIndex.toString()),o.closeButtonColor&&a.style.setProperty("--aark-modal-close-color",o.closeButtonColor),o.closeButtonHoverBackground&&a.style.setProperty("--aark-modal-close-hover-bg",o.closeButtonHoverBackground),o.closeButtonHoverColor&&a.style.setProperty("--aark-modal-close-hover-color",o.closeButtonHoverColor),o.closeButtonFocusOutline&&a.style.setProperty("--aark-modal-close-focus-outline",o.closeButtonFocusOutline),o.animationDuration&&a.style.setProperty("--aark-modal-animation-duration",o.animationDuration),o.fadeDuration&&a.style.setProperty("--aark-modal-fade-duration",o.fadeDuration),o.customOverlayBackground&&a.style.setProperty("--aark-custom-overlay-bg",o.customOverlayBackground),o.customOverlayBlur&&a.style.setProperty("--aark-custom-overlay-blur",o.customOverlayBlur),o.customModalGradientStart&&a.style.setProperty("--aark-custom-modal-gradient-start",o.customModalGradientStart),o.customModalGradientEnd&&a.style.setProperty("--aark-custom-modal-gradient-end",o.customModalGradientEnd),o.customModalTextColor&&a.style.setProperty("--aark-custom-modal-text-color",o.customModalTextColor),o.customModalShadow&&a.style.setProperty("--aark-custom-modal-shadow",o.customModalShadow),o.customModalCloseColor&&a.style.setProperty("--aark-custom-modal-close-color",o.customModalCloseColor),o.customModalCloseHoverBackground&&a.style.setProperty("--aark-custom-modal-close-hover-bg",o.customModalCloseHoverBackground),o.customModalCloseHoverColor&&a.style.setProperty("--aark-custom-modal-close-hover-color",o.customModalCloseHoverColor)}function r(){const o=document.documentElement;["--aark-modal-overlay-bg","--aark-modal-overlay-blur","--aark-modal-bg","--aark-modal-border-radius","--aark-modal-shadow","--aark-modal-padding","--aark-modal-z-index","--aark-modal-content-z-index","--aark-modal-close-color","--aark-modal-close-hover-bg","--aark-modal-close-hover-color","--aark-modal-close-focus-outline","--aark-modal-animation-duration","--aark-modal-fade-duration","--aark-custom-overlay-bg","--aark-custom-overlay-blur","--aark-custom-modal-gradient-start","--aark-custom-modal-gradient-end","--aark-custom-modal-text-color","--aark-custom-modal-shadow","--aark-custom-modal-close-color","--aark-custom-modal-close-hover-bg","--aark-custom-modal-close-hover-color"].forEach(a=>{o.style.removeProperty(a)})}function l(){const o=document.documentElement,a=getComputedStyle(o)
|
|
5
|
+
return{overlayBackground:a.getPropertyValue("--aark-modal-overlay-bg").trim(),overlayBlur:a.getPropertyValue("--aark-modal-overlay-blur").trim(),modalBackground:a.getPropertyValue("--aark-modal-bg").trim(),modalBorderRadius:a.getPropertyValue("--aark-modal-border-radius").trim(),modalShadow:a.getPropertyValue("--aark-modal-shadow").trim(),modalPadding:a.getPropertyValue("--aark-modal-padding").trim(),modalZIndex:parseInt(a.getPropertyValue("--aark-modal-z-index").trim())||void 0,modalContentZIndex:parseInt(a.getPropertyValue("--aark-modal-content-z-index").trim())||void 0,closeButtonColor:a.getPropertyValue("--aark-modal-close-color").trim(),closeButtonHoverBackground:a.getPropertyValue("--aark-modal-close-hover-bg").trim(),closeButtonHoverColor:a.getPropertyValue("--aark-modal-close-hover-color").trim(),closeButtonFocusOutline:a.getPropertyValue("--aark-modal-close-focus-outline").trim(),animationDuration:a.getPropertyValue("--aark-modal-animation-duration").trim(),fadeDuration:a.getPropertyValue("--aark-modal-fade-duration").trim(),customOverlayBackground:a.getPropertyValue("--aark-custom-overlay-bg").trim(),customOverlayBlur:a.getPropertyValue("--aark-custom-overlay-blur").trim(),customModalGradientStart:a.getPropertyValue("--aark-custom-modal-gradient-start").trim(),customModalGradientEnd:a.getPropertyValue("--aark-custom-modal-gradient-end").trim(),customModalTextColor:a.getPropertyValue("--aark-custom-modal-text-color").trim(),customModalShadow:a.getPropertyValue("--aark-custom-modal-shadow").trim(),customModalCloseColor:a.getPropertyValue("--aark-custom-modal-close-color").trim(),customModalCloseHoverBackground:a.getPropertyValue("--aark-custom-modal-close-hover-bg").trim(),customModalCloseHoverColor:a.getPropertyValue("--aark-custom-modal-close-hover-color").trim()}}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
6
|
+
const t=require("react"),n=require("react-dom/client"),d=require("react/jsx-runtime"),c=require("react-dom"),s=new Set
|
|
7
|
+
let m=null,u=null,i=null
|
|
8
|
+
const k={subscribe:function(o){return s.add(o),()=>s.delete(o)},fire:function(a,e){u||(u=document.createElement("div"),u.id="aark-react-modalify-root",u.style.position="relative",u.style.zIndex="9999",document.body.appendChild(u),Promise.resolve().then(()=>require("./ModalProvider-DA6KcJdZ.cjs")).then(({default:o})=>{u&&(i=n.createRoot(u),i.render(t.createElement(o)))}))
|
|
9
|
+
const r={content:a,options:Object.assign({position:"center",mode:"modal",showCloseIcon:!0,preventEscClose:!1,preventOverlayClose:!1},e)}
|
|
10
|
+
m=r,o("open",r)},close:a,isOpen:function(){return null!==m},getCurrentConfig:function(){return m},closeAll:function(){a()},cleanup:function(){u&&u.parentNode&&(u.parentNode.removeChild(u),u=null,i=null)}},v={fire:(o,a)=>k.fire(o,a),close:()=>k.close(),isOpen:()=>k.isOpen(),closeAll:()=>k.closeAll(),setTheme:o=>e(o),resetTheme:()=>r(),getTheme:()=>l()}
|
|
11
|
+
exports.ModalRenderer=({config:o,onClose:a})=>{const{content:e,options:r={}}=o,{position:l="center",mode:n="modal",showCloseIcon:s=!0,autoCloseTime:m,className:u="",overlayClassName:i="",preventEscClose:k=!1,preventOverlayClose:v=!1}=r
|
|
12
|
+
t.useEffect(()=>{if(m&&"notification"===n){const o=setTimeout(a,m)
|
|
13
|
+
return()=>clearTimeout(o)}},[m,n,a]),t.useEffect(()=>{const o=o=>{"Escape"!==o.key||k||a()}
|
|
14
|
+
if(!k)return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,k])
|
|
15
|
+
const g=t.useCallback(o=>{o.target!==o.currentTarget||v||a()},[a,v]),b=t.useCallback(o=>{o.stopPropagation(),a()},[a]),f="aark-modal-container "+("notification"===n?"notification":""),h=`aark-modal-content ${l} ${"notification"===n?"notification":""} ${u}`.trim(),p=("aark-modal-overlay "+i).trim()
|
|
16
|
+
return c.createPortal(d.jsxs("div",{className:f,children:["modal"===n&&d.jsx("div",{className:p,onClick:g,"aria-hidden":"true"}),d.jsxs("div",{className:h,role:"dialog","aria-modal":"true","aria-labelledby":"aark-modal-content",children:[s&&d.jsx("button",{onClick:b,className:"aark-modal-close","aria-label":"Close modal",type:"button",children:"×"}),d.jsx("div",{id:"aark-modal-content",className:"aark-modal-body",children:e})]})]}),document.body)},exports.aark=v,exports.getAarkModalTheme=l,exports.resetAarkModalTheme=r,exports.setAarkModalTheme=e,exports.useModal=function(){const[o,a]=t.useState(!1),[e,r]=t.useState(null),l=t.useCallback(()=>{k.close()},[])
|
|
17
|
+
return t.useEffect(()=>{const o=k.subscribe(o=>{switch(o.type){case"open":a(!0),r(o.config||null)
|
|
18
|
+
break
|
|
19
|
+
case"close":a(!1),r(null)}})
|
|
20
|
+
return a(k.isOpen()),r(k.getCurrentConfig()),o},[]),{isOpen:o,config:e,close:l}}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,242 +1,205 @@
|
|
|
1
|
-
|
|
2
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
-
var __spreadValues = (a, b) => {
|
|
7
|
-
for (var prop in b || (b = {}))
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
18
|
-
import React, { useState, useCallback, useEffect } from "react";
|
|
1
|
+
import { createElement, useState, useCallback, useEffect } from "react";
|
|
19
2
|
import { createRoot } from "react-dom/client";
|
|
20
3
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
21
4
|
import { createPortal } from "react-dom";
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
* Emit modal events to all listeners
|
|
55
|
-
*/
|
|
56
|
-
emit(type, config) {
|
|
57
|
-
const event = { type, config };
|
|
58
|
-
this.listeners.forEach((listener) => listener(event));
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Open a modal with content and options
|
|
62
|
-
*/
|
|
63
|
-
fire(content, options) {
|
|
64
|
-
this.init();
|
|
65
|
-
const config = {
|
|
66
|
-
content,
|
|
67
|
-
options: __spreadValues({
|
|
5
|
+
const listeners = /* @__PURE__ */ new Set();
|
|
6
|
+
let currentConfig = null;
|
|
7
|
+
let container = null;
|
|
8
|
+
let root = null;
|
|
9
|
+
function init() {
|
|
10
|
+
if (container) return;
|
|
11
|
+
container = document.createElement("div");
|
|
12
|
+
container.id = "aark-react-modalify-root";
|
|
13
|
+
container.style.position = "relative";
|
|
14
|
+
container.style.zIndex = "9999";
|
|
15
|
+
document.body.appendChild(container);
|
|
16
|
+
import("./ModalProvider-BAlPeDjm.js").then(({ default: ModalProvider }) => {
|
|
17
|
+
if (container) {
|
|
18
|
+
root = createRoot(container);
|
|
19
|
+
root.render(createElement(ModalProvider));
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
function subscribe(listener) {
|
|
24
|
+
listeners.add(listener);
|
|
25
|
+
return () => listeners.delete(listener);
|
|
26
|
+
}
|
|
27
|
+
function emit(type, config) {
|
|
28
|
+
const event = { type, config };
|
|
29
|
+
listeners.forEach((listener) => listener(event));
|
|
30
|
+
}
|
|
31
|
+
function fire(content, options) {
|
|
32
|
+
init();
|
|
33
|
+
const config = {
|
|
34
|
+
content,
|
|
35
|
+
options: Object.assign(
|
|
36
|
+
{
|
|
68
37
|
position: "center",
|
|
69
38
|
mode: "modal",
|
|
70
39
|
showCloseIcon: true,
|
|
71
40
|
preventEscClose: false,
|
|
72
41
|
preventOverlayClose: false
|
|
73
|
-
},
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
this.emit("close");
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Check if a modal is currently open
|
|
90
|
-
*/
|
|
91
|
-
isOpen() {
|
|
92
|
-
return this.currentConfig !== null;
|
|
93
|
-
}
|
|
94
|
-
/**
|
|
95
|
-
* Get the current modal configuration
|
|
96
|
-
*/
|
|
97
|
-
getCurrentConfig() {
|
|
98
|
-
return this.currentConfig;
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* Force close all modals (useful for cleanup)
|
|
102
|
-
*/
|
|
103
|
-
closeAll() {
|
|
104
|
-
this.close();
|
|
42
|
+
},
|
|
43
|
+
options
|
|
44
|
+
)
|
|
45
|
+
};
|
|
46
|
+
currentConfig = config;
|
|
47
|
+
emit("open", config);
|
|
48
|
+
}
|
|
49
|
+
function close() {
|
|
50
|
+
if (currentConfig) {
|
|
51
|
+
emit("beforeClose", currentConfig);
|
|
52
|
+
currentConfig = null;
|
|
53
|
+
emit("close");
|
|
105
54
|
}
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
55
|
+
}
|
|
56
|
+
function isOpen() {
|
|
57
|
+
return currentConfig !== null;
|
|
58
|
+
}
|
|
59
|
+
function getCurrentConfig() {
|
|
60
|
+
return currentConfig;
|
|
61
|
+
}
|
|
62
|
+
function closeAll() {
|
|
63
|
+
close();
|
|
64
|
+
}
|
|
65
|
+
function cleanup() {
|
|
66
|
+
if (container && container.parentNode) {
|
|
67
|
+
container.parentNode.removeChild(container);
|
|
68
|
+
container = null;
|
|
69
|
+
root = null;
|
|
115
70
|
}
|
|
116
71
|
}
|
|
117
|
-
const modalManager =
|
|
72
|
+
const modalManager = {
|
|
73
|
+
subscribe,
|
|
74
|
+
fire,
|
|
75
|
+
close,
|
|
76
|
+
isOpen,
|
|
77
|
+
getCurrentConfig,
|
|
78
|
+
closeAll,
|
|
79
|
+
cleanup
|
|
80
|
+
};
|
|
118
81
|
function setAarkModalTheme(theme) {
|
|
119
|
-
const
|
|
82
|
+
const root2 = document.documentElement;
|
|
120
83
|
if (theme.overlayBackground) {
|
|
121
|
-
|
|
84
|
+
root2.style.setProperty("--aark-modal-overlay-bg", theme.overlayBackground);
|
|
122
85
|
}
|
|
123
86
|
if (theme.overlayBlur) {
|
|
124
|
-
|
|
87
|
+
root2.style.setProperty("--aark-modal-overlay-blur", theme.overlayBlur);
|
|
125
88
|
}
|
|
126
89
|
if (theme.modalBackground) {
|
|
127
|
-
|
|
90
|
+
root2.style.setProperty("--aark-modal-bg", theme.modalBackground);
|
|
128
91
|
}
|
|
129
92
|
if (theme.modalBorderRadius) {
|
|
130
|
-
|
|
93
|
+
root2.style.setProperty(
|
|
131
94
|
"--aark-modal-border-radius",
|
|
132
95
|
theme.modalBorderRadius
|
|
133
96
|
);
|
|
134
97
|
}
|
|
135
98
|
if (theme.modalShadow) {
|
|
136
|
-
|
|
99
|
+
root2.style.setProperty("--aark-modal-shadow", theme.modalShadow);
|
|
137
100
|
}
|
|
138
101
|
if (theme.modalPadding) {
|
|
139
|
-
|
|
102
|
+
root2.style.setProperty("--aark-modal-padding", theme.modalPadding);
|
|
140
103
|
}
|
|
141
104
|
if (theme.modalZIndex) {
|
|
142
|
-
|
|
105
|
+
root2.style.setProperty(
|
|
143
106
|
"--aark-modal-z-index",
|
|
144
107
|
theme.modalZIndex.toString()
|
|
145
108
|
);
|
|
146
109
|
}
|
|
147
110
|
if (theme.modalContentZIndex) {
|
|
148
|
-
|
|
111
|
+
root2.style.setProperty(
|
|
149
112
|
"--aark-modal-content-z-index",
|
|
150
113
|
theme.modalContentZIndex.toString()
|
|
151
114
|
);
|
|
152
115
|
}
|
|
153
116
|
if (theme.closeButtonColor) {
|
|
154
|
-
|
|
117
|
+
root2.style.setProperty("--aark-modal-close-color", theme.closeButtonColor);
|
|
155
118
|
}
|
|
156
119
|
if (theme.closeButtonHoverBackground) {
|
|
157
|
-
|
|
120
|
+
root2.style.setProperty(
|
|
158
121
|
"--aark-modal-close-hover-bg",
|
|
159
122
|
theme.closeButtonHoverBackground
|
|
160
123
|
);
|
|
161
124
|
}
|
|
162
125
|
if (theme.closeButtonHoverColor) {
|
|
163
|
-
|
|
126
|
+
root2.style.setProperty(
|
|
164
127
|
"--aark-modal-close-hover-color",
|
|
165
128
|
theme.closeButtonHoverColor
|
|
166
129
|
);
|
|
167
130
|
}
|
|
168
131
|
if (theme.closeButtonFocusOutline) {
|
|
169
|
-
|
|
132
|
+
root2.style.setProperty(
|
|
170
133
|
"--aark-modal-close-focus-outline",
|
|
171
134
|
theme.closeButtonFocusOutline
|
|
172
135
|
);
|
|
173
136
|
}
|
|
174
137
|
if (theme.animationDuration) {
|
|
175
|
-
|
|
138
|
+
root2.style.setProperty(
|
|
176
139
|
"--aark-modal-animation-duration",
|
|
177
140
|
theme.animationDuration
|
|
178
141
|
);
|
|
179
142
|
}
|
|
180
143
|
if (theme.fadeDuration) {
|
|
181
|
-
|
|
144
|
+
root2.style.setProperty("--aark-modal-fade-duration", theme.fadeDuration);
|
|
182
145
|
}
|
|
183
146
|
if (theme.customOverlayBackground) {
|
|
184
|
-
|
|
147
|
+
root2.style.setProperty(
|
|
185
148
|
"--aark-custom-overlay-bg",
|
|
186
149
|
theme.customOverlayBackground
|
|
187
150
|
);
|
|
188
151
|
}
|
|
189
152
|
if (theme.customOverlayBlur) {
|
|
190
|
-
|
|
153
|
+
root2.style.setProperty(
|
|
191
154
|
"--aark-custom-overlay-blur",
|
|
192
155
|
theme.customOverlayBlur
|
|
193
156
|
);
|
|
194
157
|
}
|
|
195
158
|
if (theme.customModalGradientStart) {
|
|
196
|
-
|
|
159
|
+
root2.style.setProperty(
|
|
197
160
|
"--aark-custom-modal-gradient-start",
|
|
198
161
|
theme.customModalGradientStart
|
|
199
162
|
);
|
|
200
163
|
}
|
|
201
164
|
if (theme.customModalGradientEnd) {
|
|
202
|
-
|
|
165
|
+
root2.style.setProperty(
|
|
203
166
|
"--aark-custom-modal-gradient-end",
|
|
204
167
|
theme.customModalGradientEnd
|
|
205
168
|
);
|
|
206
169
|
}
|
|
207
170
|
if (theme.customModalTextColor) {
|
|
208
|
-
|
|
171
|
+
root2.style.setProperty(
|
|
209
172
|
"--aark-custom-modal-text-color",
|
|
210
173
|
theme.customModalTextColor
|
|
211
174
|
);
|
|
212
175
|
}
|
|
213
176
|
if (theme.customModalShadow) {
|
|
214
|
-
|
|
177
|
+
root2.style.setProperty(
|
|
215
178
|
"--aark-custom-modal-shadow",
|
|
216
179
|
theme.customModalShadow
|
|
217
180
|
);
|
|
218
181
|
}
|
|
219
182
|
if (theme.customModalCloseColor) {
|
|
220
|
-
|
|
183
|
+
root2.style.setProperty(
|
|
221
184
|
"--aark-custom-modal-close-color",
|
|
222
185
|
theme.customModalCloseColor
|
|
223
186
|
);
|
|
224
187
|
}
|
|
225
188
|
if (theme.customModalCloseHoverBackground) {
|
|
226
|
-
|
|
189
|
+
root2.style.setProperty(
|
|
227
190
|
"--aark-custom-modal-close-hover-bg",
|
|
228
191
|
theme.customModalCloseHoverBackground
|
|
229
192
|
);
|
|
230
193
|
}
|
|
231
194
|
if (theme.customModalCloseHoverColor) {
|
|
232
|
-
|
|
195
|
+
root2.style.setProperty(
|
|
233
196
|
"--aark-custom-modal-close-hover-color",
|
|
234
197
|
theme.customModalCloseHoverColor
|
|
235
198
|
);
|
|
236
199
|
}
|
|
237
200
|
}
|
|
238
201
|
function resetAarkModalTheme() {
|
|
239
|
-
const
|
|
202
|
+
const root2 = document.documentElement;
|
|
240
203
|
const properties = [
|
|
241
204
|
"--aark-modal-overlay-bg",
|
|
242
205
|
"--aark-modal-overlay-blur",
|
|
@@ -263,12 +226,12 @@ function resetAarkModalTheme() {
|
|
|
263
226
|
"--aark-custom-modal-close-hover-color"
|
|
264
227
|
];
|
|
265
228
|
properties.forEach((property) => {
|
|
266
|
-
|
|
229
|
+
root2.style.removeProperty(property);
|
|
267
230
|
});
|
|
268
231
|
}
|
|
269
232
|
function getAarkModalTheme() {
|
|
270
|
-
const
|
|
271
|
-
const computedStyle = getComputedStyle(
|
|
233
|
+
const root2 = document.documentElement;
|
|
234
|
+
const computedStyle = getComputedStyle(root2);
|
|
272
235
|
return {
|
|
273
236
|
overlayBackground: computedStyle.getPropertyValue("--aark-modal-overlay-bg").trim(),
|
|
274
237
|
overlayBlur: computedStyle.getPropertyValue("--aark-modal-overlay-blur").trim(),
|
|
@@ -297,76 +260,19 @@ function getAarkModalTheme() {
|
|
|
297
260
|
customModalCloseHoverColor: computedStyle.getPropertyValue("--aark-custom-modal-close-hover-color").trim()
|
|
298
261
|
};
|
|
299
262
|
}
|
|
300
|
-
const
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
_Aark.instance = new _Aark();
|
|
309
|
-
}
|
|
310
|
-
return _Aark.instance;
|
|
311
|
-
}
|
|
312
|
-
/**
|
|
313
|
-
* Fire/open a modal with content and optional configuration
|
|
314
|
-
* @param content - React component or element to render in modal
|
|
315
|
-
* @param options - Optional configuration for modal behavior and styling
|
|
316
|
-
*/
|
|
317
|
-
fire(content, options) {
|
|
318
|
-
modalManager.fire(content, options);
|
|
319
|
-
}
|
|
320
|
-
/**
|
|
321
|
-
* Close the currently open modal
|
|
322
|
-
*/
|
|
323
|
-
close() {
|
|
324
|
-
modalManager.close();
|
|
325
|
-
}
|
|
326
|
-
/**
|
|
327
|
-
* Check if a modal is currently open
|
|
328
|
-
*/
|
|
329
|
-
isOpen() {
|
|
330
|
-
return modalManager.isOpen();
|
|
331
|
-
}
|
|
332
|
-
/**
|
|
333
|
-
* Close all modals (alias for close since only one modal can be open at a time)
|
|
334
|
-
*/
|
|
335
|
-
closeAll() {
|
|
336
|
-
modalManager.closeAll();
|
|
337
|
-
}
|
|
338
|
-
/**
|
|
339
|
-
* Set custom theme for AARK modals
|
|
340
|
-
*/
|
|
341
|
-
setTheme(theme) {
|
|
342
|
-
setAarkModalTheme(theme);
|
|
343
|
-
}
|
|
344
|
-
/**
|
|
345
|
-
* Reset theme to default values
|
|
346
|
-
*/
|
|
347
|
-
resetTheme() {
|
|
348
|
-
resetAarkModalTheme();
|
|
349
|
-
}
|
|
350
|
-
/**
|
|
351
|
-
* Get current theme values
|
|
352
|
-
*/
|
|
353
|
-
getTheme() {
|
|
354
|
-
return getAarkModalTheme();
|
|
355
|
-
}
|
|
356
|
-
/**
|
|
357
|
-
* Destroy the singleton instance (useful for testing)
|
|
358
|
-
*/
|
|
359
|
-
static destroy() {
|
|
360
|
-
_Aark.instance = null;
|
|
361
|
-
}
|
|
263
|
+
const aark = {
|
|
264
|
+
fire: (content, options) => modalManager.fire(content, options),
|
|
265
|
+
close: () => modalManager.close(),
|
|
266
|
+
isOpen: () => modalManager.isOpen(),
|
|
267
|
+
closeAll: () => modalManager.closeAll(),
|
|
268
|
+
setTheme: (theme) => setAarkModalTheme(theme),
|
|
269
|
+
resetTheme: () => resetAarkModalTheme(),
|
|
270
|
+
getTheme: () => getAarkModalTheme()
|
|
362
271
|
};
|
|
363
|
-
__publicField(_Aark, "instance", null);
|
|
364
|
-
let Aark = _Aark;
|
|
365
|
-
const aark = Aark.getInstance();
|
|
366
272
|
function useModal() {
|
|
367
|
-
const [
|
|
273
|
+
const [isOpen2, setIsOpen] = useState(false);
|
|
368
274
|
const [config, setConfig] = useState(null);
|
|
369
|
-
const
|
|
275
|
+
const close2 = useCallback(() => {
|
|
370
276
|
modalManager.close();
|
|
371
277
|
}, []);
|
|
372
278
|
useEffect(() => {
|
|
@@ -388,9 +294,9 @@ function useModal() {
|
|
|
388
294
|
return unsubscribe;
|
|
389
295
|
}, []);
|
|
390
296
|
return {
|
|
391
|
-
isOpen,
|
|
297
|
+
isOpen: isOpen2,
|
|
392
298
|
config,
|
|
393
|
-
close
|
|
299
|
+
close: close2
|
|
394
300
|
};
|
|
395
301
|
}
|
|
396
302
|
const ModalRenderer = ({ config, onClose }) => {
|
package/package.json
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aark-react-modalify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "A lightweight, flexible React modal and notification library with TypeScript support. Features automatic DOM mounting, customizable styling, and a simple imperative API for displaying modals, alerts, confirmations, and toast notifications.",
|
|
5
|
+
"private": false,
|
|
5
6
|
"main": "dist/index.cjs.js",
|
|
6
7
|
"module": "dist/index.esm.js",
|
|
7
8
|
"types": "dist/index.d.ts",
|
|
@@ -15,6 +16,7 @@
|
|
|
15
16
|
},
|
|
16
17
|
"files": [
|
|
17
18
|
"dist",
|
|
19
|
+
"src/assets/styles/aark-modal.css",
|
|
18
20
|
"README.md",
|
|
19
21
|
"LICENSE"
|
|
20
22
|
],
|
|
@@ -43,7 +45,11 @@
|
|
|
43
45
|
"imperative",
|
|
44
46
|
"lightweight",
|
|
45
47
|
"flexible",
|
|
46
|
-
"customizable"
|
|
48
|
+
"customizable",
|
|
49
|
+
"aark-react-modalify",
|
|
50
|
+
"aark-modal",
|
|
51
|
+
"aark-toast",
|
|
52
|
+
"aark-notification"
|
|
47
53
|
],
|
|
48
54
|
"peerDependencies": {
|
|
49
55
|
"react": ">=16.8.0",
|
|
@@ -55,6 +61,7 @@
|
|
|
55
61
|
"@types/react": "^19.1.9",
|
|
56
62
|
"@types/react-dom": "^19.1.7",
|
|
57
63
|
"@vitejs/plugin-react": "^4.7.0",
|
|
64
|
+
"cssnano": "^7.1.0",
|
|
58
65
|
"eslint": "^9.32.0",
|
|
59
66
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
60
67
|
"eslint-plugin-react-refresh": "^0.4.20",
|
|
@@ -71,7 +78,7 @@
|
|
|
71
78
|
"author": "Mohammad Sumon",
|
|
72
79
|
"repository": {
|
|
73
80
|
"type": "git",
|
|
74
|
-
"url": "https://github.com/sumonsbgc/aark-react-modalify.git"
|
|
81
|
+
"url": "git+https://github.com/sumonsbgc/aark-react-modalify.git"
|
|
75
82
|
},
|
|
76
83
|
"homepage": "https://github.com/sumonsbgc/aark-react-modalify#readme",
|
|
77
84
|
"bugs": {
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/* AARK React Modalify - Optimized CSS */
|
|
2
|
+
:root {
|
|
3
|
+
--aark-modal-overlay-bg: rgba(0, 0, 0, 0.5);
|
|
4
|
+
--aark-modal-bg: #fff;
|
|
5
|
+
--aark-modal-radius: 8px;
|
|
6
|
+
--aark-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
|
|
7
|
+
--aark-modal-pad: 16px;
|
|
8
|
+
--aark-modal-z: 9999;
|
|
9
|
+
--aark-close-color: #666;
|
|
10
|
+
--aark-close-hover: #f5f5f5;
|
|
11
|
+
--aark-anim: 0.2s;
|
|
12
|
+
}
|
|
13
|
+
.aark-modal-container {
|
|
14
|
+
position: fixed;
|
|
15
|
+
inset: 0;
|
|
16
|
+
z-index: var(--aark-modal-z);
|
|
17
|
+
}
|
|
18
|
+
.aark-modal-container.notification {
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
}
|
|
21
|
+
.aark-modal-overlay {
|
|
22
|
+
position: absolute;
|
|
23
|
+
inset: 0;
|
|
24
|
+
background: var(--aark-modal-overlay-bg);
|
|
25
|
+
backdrop-filter: blur(2px);
|
|
26
|
+
}
|
|
27
|
+
.aark-modal-content {
|
|
28
|
+
position: fixed;
|
|
29
|
+
background: var(--aark-modal-bg);
|
|
30
|
+
border-radius: var(--aark-modal-radius);
|
|
31
|
+
box-shadow: var(--aark-modal-shadow);
|
|
32
|
+
padding: var(--aark-modal-pad);
|
|
33
|
+
z-index: calc(var(--aark-modal-z) + 1);
|
|
34
|
+
max-width: 90vw;
|
|
35
|
+
max-height: 90vh;
|
|
36
|
+
overflow: auto;
|
|
37
|
+
}
|
|
38
|
+
.aark-modal-content.notification {
|
|
39
|
+
pointer-events: auto;
|
|
40
|
+
}
|
|
41
|
+
.aark-modal-content.center {
|
|
42
|
+
top: 50%;
|
|
43
|
+
left: 50%;
|
|
44
|
+
transform: translate(-50%, -50%);
|
|
45
|
+
}
|
|
46
|
+
.aark-modal-content.top-center {
|
|
47
|
+
top: 20px;
|
|
48
|
+
left: 50%;
|
|
49
|
+
transform: translateX(-50%);
|
|
50
|
+
}
|
|
51
|
+
.aark-modal-content.top-right {
|
|
52
|
+
top: 20px;
|
|
53
|
+
right: 20px;
|
|
54
|
+
}
|
|
55
|
+
.aark-modal-content.bottom-right {
|
|
56
|
+
bottom: 20px;
|
|
57
|
+
right: 20px;
|
|
58
|
+
}
|
|
59
|
+
.aark-modal-content.bottom-center {
|
|
60
|
+
bottom: 20px;
|
|
61
|
+
left: 50%;
|
|
62
|
+
transform: translateX(-50%);
|
|
63
|
+
}
|
|
64
|
+
.aark-modal-close {
|
|
65
|
+
position: absolute;
|
|
66
|
+
top: 8px;
|
|
67
|
+
right: 8px;
|
|
68
|
+
width: 24px;
|
|
69
|
+
height: 24px;
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
background: 0;
|
|
74
|
+
border: 0;
|
|
75
|
+
color: var(--aark-close-color);
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
border-radius: 50%;
|
|
78
|
+
font-size: 14px;
|
|
79
|
+
line-height: 1;
|
|
80
|
+
transition: all var(--aark-anim);
|
|
81
|
+
}
|
|
82
|
+
.aark-modal-close:hover {
|
|
83
|
+
background: var(--aark-close-hover);
|
|
84
|
+
color: #333;
|
|
85
|
+
}
|
|
86
|
+
.aark-modal-close:focus {
|
|
87
|
+
outline: 2px solid #007bff;
|
|
88
|
+
outline-offset: 2px;
|
|
89
|
+
}
|
|
90
|
+
.aark-modal-body {
|
|
91
|
+
padding-top: 8px;
|
|
92
|
+
}
|
|
93
|
+
.aark-modal-container {
|
|
94
|
+
animation: f var(--aark-anim);
|
|
95
|
+
}
|
|
96
|
+
.aark-modal-content {
|
|
97
|
+
animation: s var(--aark-anim);
|
|
98
|
+
}
|
|
99
|
+
@keyframes f {
|
|
100
|
+
0% {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
}
|
|
103
|
+
to {
|
|
104
|
+
opacity: 1;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
@keyframes s {
|
|
108
|
+
0% {
|
|
109
|
+
opacity: 0;
|
|
110
|
+
transform: translate(-50%, -50%) scale(0.95);
|
|
111
|
+
}
|
|
112
|
+
to {
|
|
113
|
+
opacity: 1;
|
|
114
|
+
transform: translate(-50%, -50%) scale(1);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
.aark-modal-content.top-center {
|
|
118
|
+
animation: d var(--aark-anim);
|
|
119
|
+
}
|
|
120
|
+
.aark-modal-content.top-right,
|
|
121
|
+
.aark-modal-content.bottom-right {
|
|
122
|
+
animation: l var(--aark-anim);
|
|
123
|
+
}
|
|
124
|
+
.aark-modal-content.bottom-center {
|
|
125
|
+
animation: u var(--aark-anim);
|
|
126
|
+
}
|
|
127
|
+
@keyframes d {
|
|
128
|
+
0% {
|
|
129
|
+
opacity: 0;
|
|
130
|
+
transform: translateX(-50%) translateY(-10px);
|
|
131
|
+
}
|
|
132
|
+
to {
|
|
133
|
+
opacity: 1;
|
|
134
|
+
transform: translateX(-50%) translateY(0);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
@keyframes l {
|
|
138
|
+
0% {
|
|
139
|
+
opacity: 0;
|
|
140
|
+
transform: translateX(10px);
|
|
141
|
+
}
|
|
142
|
+
to {
|
|
143
|
+
opacity: 1;
|
|
144
|
+
transform: translateX(0);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
@keyframes u {
|
|
148
|
+
0% {
|
|
149
|
+
opacity: 0;
|
|
150
|
+
transform: translateX(-50%) translateY(10px);
|
|
151
|
+
}
|
|
152
|
+
to {
|
|
153
|
+
opacity: 1;
|
|
154
|
+
transform: translateX(-50%) translateY(0);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
@media (max-width: 768px) {
|
|
158
|
+
.aark-modal-content {
|
|
159
|
+
margin: 10px;
|
|
160
|
+
max-width: calc(100vw - 20px);
|
|
161
|
+
}
|
|
162
|
+
.aark-modal-content.center {
|
|
163
|
+
top: 50%;
|
|
164
|
+
left: 50%;
|
|
165
|
+
transform: translate(-50%, -50%);
|
|
166
|
+
}
|
|
167
|
+
.aark-modal-content.top-center,
|
|
168
|
+
.aark-modal-content.bottom-center {
|
|
169
|
+
left: 50%;
|
|
170
|
+
transform: translateX(-50%);
|
|
171
|
+
}
|
|
172
|
+
.aark-modal-content.top-right {
|
|
173
|
+
right: 10px;
|
|
174
|
+
left: auto;
|
|
175
|
+
transform: none;
|
|
176
|
+
}
|
|
177
|
+
.aark-modal-content.bottom-right {
|
|
178
|
+
right: 10px;
|
|
179
|
+
bottom: 10px;
|
|
180
|
+
left: auto;
|
|
181
|
+
transform: none;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");const r=require("./index.cjs.js");exports.default=()=>{const{isOpen:o,config:t,close:s}=r.useModal();return o&&t?e.jsx(r.ModalRenderer,{config:t,onClose:s}):null};
|