@jay-js/ui
Version:
A library of UI components for Jay JS with Tailwind CSS and daisyUI.
144 lines (143 loc) • 5.69 kB
JavaScript
/**
* Configuration options for the useDrawer 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 drawer component functionality
*
* @param props - Configuration options for the drawer
* @returns Object with methods to open, close, or toggle the drawer
*/ export function useDrawer(_param) {
var props = _extends({}, _object_destructuring_empty(_param));
const drawerId = props.drawerId || props.for;
const getElements = ()=>{
const drawer = document.querySelector(`#${drawerId}`);
if (drawer && drawer instanceof HTMLElement) {
const drawerOverlay = document.querySelector(`[data-drawer-for="${drawerId}"]`);
const drawerContent = drawer.querySelector(".drawer-content");
return {
drawer,
drawerOverlay,
drawerContent
};
}
return null;
};
const open = ()=>{
const elements = getElements();
if (!elements) return;
const { drawer, drawerOverlay, drawerContent } = elements;
if (!drawerContent) {
console.warn("useDrawer: No element found for selector: .drawer-content");
return;
}
if (!drawer) {
console.warn(`useDrawer: No element found for selector: #${drawerId}`);
return;
}
if (drawer.classList.contains("hidden")) {
drawer.classList.remove("hidden");
drawer.classList.add("flex");
setTimeout(()=>{
if (drawerContent && drawerContent instanceof HTMLElement) {
if (drawerContent.classList.contains("drawer-left")) {
drawerContent.classList.remove("-translate-x-full");
drawerContent.classList.add("translate-x-0");
}
if (drawerContent.classList.contains("drawer-right")) {
drawerContent.classList.remove("translate-x-full");
drawerContent.classList.add("translate-x-0");
}
if (drawerContent.classList.contains("drawer-top")) {
drawerContent.classList.remove("-translate-y-full");
drawerContent.classList.add("translate-x-0");
}
if (drawerContent.classList.contains("drawer-bottom")) {
drawerContent.classList.remove("translate-y-full");
drawerContent.classList.add("translate-x-0");
}
}
if (drawerOverlay && drawerOverlay instanceof HTMLElement) {
drawerOverlay.classList.remove("opacity-0");
}
if (props.onOpen) {
props.onOpen(drawerContent, drawer);
}
}, 20);
}
};
const close = ()=>{
const elements = getElements();
if (!elements) return;
const { drawer, drawerOverlay, drawerContent } = elements;
if (!drawerContent) {
console.warn("useDrawer: No element found for selector: .drawer-content");
return;
}
if (!drawer) {
console.warn(`useDrawer: No element found for selector: #${drawerId}`);
return;
}
if (!drawer.classList.contains("hidden")) {
if (drawerContent && drawerContent instanceof HTMLElement) {
if (drawerContent.classList.contains("drawer-left")) {
drawerContent.classList.remove("translate-x-0");
drawerContent.classList.add("-translate-x-full");
}
if (drawerContent.classList.contains("drawer-right")) {
drawerContent.classList.remove("translate-x-0");
drawerContent.classList.add("translate-x-full");
}
if (drawerContent.classList.contains("drawer-top")) {
drawerContent.classList.remove("translate-x-0");
drawerContent.classList.add("-translate-y-full");
}
if (drawerContent.classList.contains("drawer-bottom")) {
drawerContent.classList.remove("translate-x-0");
drawerContent.classList.add("translate-y-full");
}
}
if (drawerOverlay && drawerOverlay instanceof HTMLElement) {
drawerOverlay.classList.add("opacity-0");
}
setTimeout(()=>{
drawer.classList.remove("flex");
drawer.classList.add("hidden");
if (props.onClose) {
props.onClose(drawerContent, drawer);
}
}, 300);
}
};
const toggle = ()=>{
const elements = getElements();
if (!elements) return;
const { drawer } = elements;
if (drawer.classList.contains("hidden")) {
open();
} else {
close();
}
};
return {
open,
close,
toggle
};
}