@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
71 lines (70 loc) • 2.19 kB
JavaScript
/**
* Configuration options for the useModal hook
*/ function _extends() {
_extends = Object.assign || function(target) {
for(var i = 1; i < arguments.length; i++){
var source = arguments[i];
for(var key in source){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _object_destructuring_empty(o) {
if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
return o;
}
/**
* A hook to control modal component functionality
*
* @param props - Configuration options for the modal
* @returns Object with methods to open, close, or toggle the modal
*/ export function useModal(_param) {
var props = _extends({}, _object_destructuring_empty(_param));
const modalId = props.modalId;
const getModal = ()=>{
const dialogModal = document.querySelector(`#${modalId}`);
if (!dialogModal) {
console.warn(`useModal: No element found for selector: #${modalId}`);
return;
}
if (dialogModal && dialogModal instanceof HTMLDialogElement) {
return dialogModal;
}
return null;
};
const open = ()=>{
const dialogModal = getModal();
if (dialogModal) {
var _props_onOpen;
dialogModal.showModal();
(_props_onOpen = props.onOpen) === null || _props_onOpen === void 0 ? void 0 : _props_onOpen.call(props);
}
};
const close = ()=>{
const dialogModal = getModal();
if (dialogModal) {
var _props_onClose;
dialogModal.close();
(_props_onClose = props.onClose) === null || _props_onClose === void 0 ? void 0 : _props_onClose.call(props);
}
};
const toggle = ()=>{
const dialogModal = getModal();
if (!dialogModal) return;
if (dialogModal.open) {
close();
return;
}
open();
};
return {
open,
close,
toggle
};
}