161 lines
7.7 KiB
JavaScript
161 lines
7.7 KiB
JavaScript
"use strict";
|
|
exports.id = 9471;
|
|
exports.ids = [9471];
|
|
exports.modules = {
|
|
|
|
/***/ 9471:
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "Z": () => (/* binding */ Modal)
|
|
/* harmony export */ });
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(997);
|
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6689);
|
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7849);
|
|
/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom_client__WEBPACK_IMPORTED_MODULE_2__);
|
|
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2423);
|
|
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(lucide_react__WEBPACK_IMPORTED_MODULE_3__);
|
|
// @ts-check
|
|
/**
|
|
* ==============================================================================
|
|
* Imports
|
|
* ==============================================================================
|
|
*/
|
|
|
|
|
|
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* ==============================================================================
|
|
* Main Component { Functional }
|
|
* ==============================================================================
|
|
* @param {Object} props - React component props including { children }
|
|
* @param {React.ReactNode} props.children - React children
|
|
* @param {boolean} props.open
|
|
* @param {React.Dispatch<React.SetStateAction<boolean>>} [props.setOpen]
|
|
* @param {()=>void} [props.onClose]
|
|
* @param {string} [props.maxWidth] - Ex "500px"
|
|
*/ function Modal({ children , open , setOpen , onClose , maxWidth }) {
|
|
/**
|
|
* Get Contexts
|
|
*
|
|
* @description { React.useContext }
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Javascript Variables
|
|
*
|
|
* @description Non hook variables and functions
|
|
*/ ////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* React Hooks
|
|
*
|
|
* @description { useState, useEffect, useRef, etc ... }
|
|
*/ react__WEBPACK_IMPORTED_MODULE_1___default().useEffect(()=>{
|
|
if (open) {
|
|
const modalWrapper = document.createElement("div");
|
|
modalWrapper.className = "modal-wrapper";
|
|
const domNode = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_2__.createRoot)(modalWrapper);
|
|
domNode.render(/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(ModalComponent, {
|
|
onClose: onClose,
|
|
maxWidth: maxWidth,
|
|
children: children
|
|
}));
|
|
document.body.appendChild(modalWrapper);
|
|
} else {
|
|
document.querySelectorAll(".modal-wrapper").forEach((modalEl)=>{
|
|
modalEl.parentElement?.removeChild(modalEl);
|
|
});
|
|
}
|
|
}, [
|
|
open
|
|
]);
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
/**
|
|
* Function Return
|
|
*
|
|
* @description Main Function Return
|
|
*/ ////////////////////////////////////////
|
|
return /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {});
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
////////////////////////////////////////
|
|
}
|
|
/** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /** ****************************************************************************** */ /**
|
|
* @param {Object} props - React component props including { children }
|
|
* @param {React.ReactNode} props.children - React children
|
|
* @param {()=>void} [props.onClose]
|
|
* @param {string} [props.maxWidth]
|
|
* @param {boolean} [props.open]
|
|
*/ function ModalComponent({ children , onClose , maxWidth , open }) {
|
|
/** @type {React.Ref<HTMLDivElement>} */ // @ts-ignore
|
|
const modalRef = react__WEBPACK_IMPORTED_MODULE_1___default().useRef();
|
|
// React.useEffect(() => {
|
|
// if (!open) {
|
|
// /** @type {HTMLDivElement} */ // @ts-ignore
|
|
// const modalEl = modalRef.current?.closest(".modal-wrapper");
|
|
// closeModal({ modalEl });
|
|
// }
|
|
// }, [open]);
|
|
return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)((react__WEBPACK_IMPORTED_MODULE_1___default().Fragment), {
|
|
children: [
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("div", {
|
|
className: "modal-cancel",
|
|
onClick: (e)=>{
|
|
/** @type {HTMLDivElement} */ // @ts-ignore
|
|
const modalEl = e.target.closest(".modal-wrapper");
|
|
closeModal({
|
|
modalEl,
|
|
closeFn: onClose
|
|
});
|
|
}
|
|
}),
|
|
/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
|
|
className: "modal-content",
|
|
style: {
|
|
maxWidth: maxWidth || undefined
|
|
},
|
|
ref: modalRef,
|
|
children: [
|
|
children,
|
|
" ",
|
|
/*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx("button", {
|
|
className: "ghost modal-cancel-button",
|
|
onClick: (e)=>{
|
|
/** @type {HTMLDivElement} */ // @ts-ignore
|
|
const modalEl = e.target.closest(".modal-wrapper");
|
|
closeModal({
|
|
modalEl,
|
|
closeFn: onClose
|
|
});
|
|
},
|
|
children: /*#__PURE__*/ react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx(lucide_react__WEBPACK_IMPORTED_MODULE_3__.X, {})
|
|
})
|
|
]
|
|
})
|
|
]
|
|
});
|
|
}
|
|
/**
|
|
* @param {object} param0
|
|
* @param {HTMLElement} param0.modalEl
|
|
* @param {()=>void} [param0.closeFn]
|
|
*/ function closeModal({ modalEl , closeFn }) {
|
|
if (closeFn) closeFn();
|
|
modalEl.parentElement?.removeChild(modalEl);
|
|
}
|
|
|
|
|
|
/***/ })
|
|
|
|
};
|
|
; |