ar-design
Version:
AR Design is a (react | nextjs) ui library.
95 lines (94 loc) • 4.71 kB
JavaScript
"use client";
import React, { useCallback, useEffect, useRef, useState } from "react";
import Typography from "../../data-display/typography";
import "../../../assets/css/components/feedback/drawer/styles.css";
import { useValidation } from "../../../libs/core/application/hooks";
const { Title } = Typography;
const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChange }) {
// refs
const _arDrawer = useRef(null);
const _drawerWrapperClassName = ["ar-drawer-wrapper"];
const _drawerClassName = ["ar-drawer"];
if (Object.keys(open).length > 0 && open.get)
_drawerWrapperClassName.push("opened");
else
_drawerWrapperClassName.push("closed");
// states
const [currentTab, setCurrentTab] = useState(0);
// hooks
const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, currentTab + 1);
// methods
const handleValidationControlForClose = useCallback(() => {
if (validation) {
onSubmit((result) => {
if (!result)
return;
open.set(false);
setSubmit(false);
});
}
else {
open.set(false);
}
}, [errors, onSubmit, setSubmit]);
// useEffects
useEffect(() => {
if (!open.get)
return;
document.body.style.overflow = "hidden";
const handleKeys = (event) => {
const key = event.key;
const isArModal = document.getElementsByClassName("ar-modal-wrapper opened").length === 0;
const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
if (key === "Escape" && isArModal && isArCalendar && isArSelectOptions && isArPopover) {
event.stopPropagation();
handleValidationControlForClose();
}
};
document.addEventListener("keydown", handleKeys);
return () => {
document.body.style.removeProperty("overflow");
document.removeEventListener("keydown", handleKeys);
};
}, [open, handleValidationControlForClose]);
useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
return (React.createElement("div", { className: _drawerWrapperClassName.map((c) => c).join(" ") },
React.createElement("div", { className: "ar-drawer-bg", onClick: (event) => {
event.stopPropagation();
const target = event.target;
if (_arDrawer.current && !_arDrawer.current.contains(target))
handleValidationControlForClose();
} }),
React.createElement("div", { ref: _arDrawer, className: _drawerClassName.map((c) => c).join(" "), role: "dialog" },
title && (React.createElement("div", { className: "header" },
React.createElement(Title, { Level: "h3" }, title),
React.createElement("div", { className: "close", onClick: () => handleValidationControlForClose() }))),
React.createElement("div", { className: "tabs" }, tabs.length > 1 &&
tabs.map((tab, index) => {
let className = ["item"];
if (currentTab === index)
className.push("selection");
return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
setCurrentTab(index);
onChange && onChange(index);
const key = `${window.location.pathname}::${name}`;
sessionStorage.setItem(key, String(index));
} },
React.createElement("span", null, tab.title)));
})),
Object.keys(open).length > 0 && open.get && (React.createElement("div", { className: "content" }, tabs.map((tab, index) => {
return (React.createElement("div", { key: index }, React.Children.map(tab.content, (child) => {
if (React.isValidElement(child) && index === currentTab) {
return validation
? React.cloneElement(child, {
errors: errors,
})
: child;
}
return null;
})));
}))))));
};
export default Drawer;