aark-react-modalify 1.0.1 → 1.0.2
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 +3 -1
- 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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "aark-react-modalify",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
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
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
},
|
|
16
16
|
"files": [
|
|
17
17
|
"dist",
|
|
18
|
+
"src/assets/styles/aark-modal.css",
|
|
18
19
|
"README.md",
|
|
19
20
|
"LICENSE"
|
|
20
21
|
],
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
"@types/react": "^19.1.9",
|
|
56
57
|
"@types/react-dom": "^19.1.7",
|
|
57
58
|
"@vitejs/plugin-react": "^4.7.0",
|
|
59
|
+
"cssnano": "^7.1.0",
|
|
58
60
|
"eslint": "^9.32.0",
|
|
59
61
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
60
62
|
"eslint-plugin-react-refresh": "^0.4.20",
|
|
@@ -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};
|