@pnkx-lib/ui 1.9.434 → 1.9.436

package/es/ui/Sidebar.js

@@ -1,412 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useMemo, useCallback } from 'react';
-import { useNavigate, useLocation } from 'react-router';
-import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
-import { u as useDebounce, l as logoHeaderText, S as SearchIcon, V as VietNamIcon, D as DownOutlinedIcon, R as RefIcon } from '../chunks/logo-header-DG8abRGF.js';
-import { H as Header } from '../chunks/layout-C0dbwkpb.js';
-import { AutoComplete, Divider, Dropdown, Flex } from 'antd';
-import { Input } from '../fields/Input.js';
-import { R as RefIcon$1 } from '../chunks/DownOutlined-CkHKgaSi.js';
-
-const BellIcon = ({
-  size = 17,
-  color = "currentColor",
-  className,
-  style,
-  onClick,
-  "aria-label": ariaLabel,
-  title,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className,
-    style: {
-      width: size,
-      height: size,
-      cursor: onClick ? "pointer" : "default",
-      ...style
-    },
-    onClick,
-    role: onClick ? "button" : void 0,
-    "aria-label": ariaLabel,
-    title,
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 15 17",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M7.5 0C8.32843 0 9 0.671573 9 1.5V2.208L9.19287 2.26645C11.4021 2.97942 13 5.05311 13 7.5V10.382C13 11.0637 13.5141 11.4675 13.7236 11.5528C14.6312 12.0112 15 12.879 15 13.618V14.0001C15 14.5523 14.5523 15 14.0001 15.0001L9.9499 15.0004C9.7181 16.1413 8.70933 17 7.5 17C6.29067 17 5.2819 16.1413 5.0501 15.0004L0.999914 15.0001C0.447663 15 0 14.5523 0 14.0001V13.618C0 12.8017 0.430447 12.0509 1.12384 11.6364C1.70795 11.3547 2 10.9365 2 10.382V7.5C2 4.98221 3.69181 2.85957 6.00065 2.20685L6 1.5C6 0.671573 6.67157 0 7.5 0ZM8.9144 15.0007H6.0856C6.29172 15.5829 6.84715 16 7.5 16C8.15285 16 8.70828 15.5829 8.9144 15.0007ZM7.5 1C7.22386 1 7 1.22386 7 1.5L7.0003 3.02743C4.75018 3.27602 3 5.18362 3 7.5V10.382C3 11.1983 2.56955 11.9491 1.87616 12.3636L1.76098 12.4232C1.47658 12.5799 1 12.9239 1 13.618V14H14V13.618C14 12.9216 13.5177 12.5793 13.2764 12.4472C12.5954 12.1303 12 11.3188 12 10.382V7.5C12 5.18397 10.2503 3.27659 8.00071 3.02754L8 1.5C8 1.22386 7.77614 1 7.5 1Z",
-            fill: color
-          }
-        )
-      }
-    )
-  }
-);
-
-const defaultAvatar = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMvSURBVHgBtVdNTxNRFD1vijAUta1ugFVZ6FaIUZfi0pW4MNEV9RcA/0B+gfQXACs0MabiRuNCiSR+xEAxxA3ENjERwsIWlY/y0ee5M9M6pZ3pMJSTtH3zOnPPvefe+94bhQDIFXTcBPq1gTvQGDSApAbi8p8CihxntUIWZcz1JlQmiE3VlNDAiNIYrRAFQJ5Wp+jEdE9C5XFc4vVNPcLoHh2DsN4BjXGSTyEoMUkfa0aJFkApTHTH1FhT4rVNPUlPU2glKH1PTD10TxnuC4m05aQC2rRs1/jiYK2gU7yaxCmC6Rtj1U9UiUma5Ogth0mvh8raehARhSa94A1pvR2Nvr6EKtpSGxj2Iz0sAxe6gG7W91k29OEhQkE6hI+POk4w4qLOeREfkLQ3Rt9c1bC7D/za4lyIyCtRGz8Legg+0bZHakkF5hlb9jBwou4Xk4N+N5Y9CMISO+RDBhv8CpoQlw5q54rbQJuB0GCKbqr1oi40WxYlz1HK29EObO3a143yK3PyOZDi88m/5NkIshZLdHs09nvbVuAoqcge7QBWN4DFH6yLNv9UCKdiRZ8gWzbB+U7g5VfbKenzP1Tl3lWqs+dd+TJfREhUSZcoX2VxgT33fIG/ZuPitKQuy/blYVQkk9aBbkLqWHP/12Xa5PFovexycDD4PdeIOMpCml8B3nxjsWhrewtE6r5HijGzaN/rJud4SaTOHPHGivIZvd3Zt69fLwN/S5TSCEbqNiaLz6tlW/YKuCa9U3K86VTIWZUGO7IXWSDmkkjmhfhaErjUTU8XApC6IHmWNX7wMguuhHxPXPUZslOQIC2hS8vMLtWSOo6ji+2SZavMZo9HKjCcSv/43VJzuvp4gVFvlJB7v4L4OfNky6EfuLDkL5q4dXtA5a2FL8Go51cxfpqkgkgE40Iq4xrBnnzWcjoYwekgff+6qh4g6zI180lPscCG0UJQxekHN1TKPVe3xzg3pNE6pI+SNiQWiCRMtRxH8wiPIt8mxtzyuuHbFDMfeAg0kHKkTyIgobSn2Y6JuwPKcx8I3I1Pv+ghXbZOK3Jw6Mf/7VSM5/mZ44tbxmxD1o+wgn+8Lj0W61iuOwAAAABJRU5ErkJggg==";
-
-const items = [
-  { key: "1", label: "Hồ sơ" },
-  { key: "4", label: "Cài đặt" },
-  { key: "2", label: "Đăng xuất" }
-];
-const Title = (props) => /* @__PURE__ */ jsx(Flex, { align: "center", justify: "space-between", children: props.title });
-const renderItem = (title, path) => ({
-  value: title,
-  label: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "space-between", children: title }),
-  path
-});
-function getDataOption(menu, searchValue) {
-  return menu.reduce((acc, itemMenu) => {
-    const groupName = itemMenu.name;
-    (itemMenu.children ?? []).forEach((itemChildren) => {
-      (itemChildren.children ?? []).forEach(
-        (itemSub) => {
-          if (!searchValue || itemSub.name.toLowerCase().includes(searchValue.toLowerCase())) {
-            let group = acc.find((g) => g.label.props.title === groupName);
-            if (!group) {
-              group = {
-                label: /* @__PURE__ */ jsx(Title, { title: groupName }),
-                options: []
-              };
-              acc.push(group);
-            }
-            const path = `${itemChildren.path}/${itemSub.path}`;
-            group.options.push(renderItem(itemSub.name, path));
-          }
-        }
-      );
-    });
-    return acc;
-  }, []);
-}
-function SidebarMenu({
-  menu,
-  activeMainMenu,
-  setActiveMainMenu,
-  setOpenSubCollapse,
-  collapse,
-  setCollapse,
-  pathUrl,
-  handleNavigateModule
-}) {
-  return /* @__PURE__ */ jsx("nav", { className: twMerge("flex mt-2 flex-1 flex-col px-2"), children: /* @__PURE__ */ jsx("ul", { role: "list", className: twMerge("-mx-2 space-y-1 relative"), children: menu.flatMap((item) => {
-    const isActiveMainMenu = item?.code ? activeMainMenu === item?.code : activeMainMenu === item.path;
-    const isActivePathUrl = pathUrl === item.path;
-    const isActive = isActiveMainMenu || isActivePathUrl;
-    return /* @__PURE__ */ jsx(
-      "li",
-      {
-        className: twMerge(
-          "relative cursor-pointer",
-          isActive ? "px-2" : "ml-0 px-2"
-        ),
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: twMerge(
-              "relative group hover:text-black",
-              !collapse && "hover:bg-[#FFFFFF] rounded-lg"
-            ),
-            children: /* @__PURE__ */ jsxs(
-              "a",
-              {
-                onClick: () => {
-                  setActiveMainMenu(item.code ? item.code : item?.path);
-                  setOpenSubCollapse(true);
-                  setCollapse(false);
-                  handleNavigateModule(item.path);
-                },
-                className: twMerge(
-                  "rounded-lg py-2 m-auto text-sm whitespace-nowrap max-w-2xl leading-6 font-semibold relative z-10",
-                  collapse ? "pl-4" : "justify-center",
-                  "flex items-center gap-2 transition-all duration-150 ease-in-out",
-                  isActive ? "bg-[#007BE5] text-white" : "text-white hover:bg-[#007BE5] hover:text-white"
-                ),
-                children: [
-                  item.icon,
-                  collapse && item.name
-                ]
-              }
-            )
-          }
-        )
-      },
-      item.name
-    );
-  }) }) });
-}
-function SidebarSubMenu({
-  newMenu,
-  activeMainMenu,
-  openSubmenu,
-  handleClickSubmenu,
-  handleClick,
-  pathUrl
-}) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      className: twMerge("flex flex-1 transition-all duration-300 flex-col"),
-      children: /* @__PURE__ */ jsx("ul", { role: "list", className: twMerge("cursor-pointer ml-[10px]"), children: newMenu?.map((sub) => {
-        const isActiveMainMenu = activeMainMenu === sub.path;
-        if (!isActiveMainMenu) return null;
-        return /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "pl-4 py-2 text-[16px] font-[600] text-[#131313]",
-              style: {
-                boxShadow: "0px 0px 6px 0px rgba(0, 6, 36, 0.12), 0px 2px 4px 0px rgba(0, 6, 36, 0.12)"
-              },
-              children: sub.name
-            }
-          ),
-          /* @__PURE__ */ jsx("ul", { children: sub?.children?.map((itemSubMenu) => {
-            const shouldShowToggleIcon = itemSubMenu?.isShow && Array.isArray(itemSubMenu.children) && itemSubMenu.children.length > 0;
-            const isActiveSubMenu = pathUrl.startsWith(
-              `/${itemSubMenu.path.replace(/^\/+/, "")}`
-            );
-            return /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsxs(
-                "a",
-                {
-                  onClick: () => handleClickSubmenu(itemSubMenu, itemSubMenu.isShow),
-                  className: twMerge(
-                    isActiveSubMenu && !itemSubMenu.isShow ? "bg-[#E7F0FF] !text-[#007BE5]" : isActiveSubMenu && itemSubMenu.isShow ? "!text-[#007BE5]" : "",
-                    "group flex gap-x-3 select-none p-3 text-gray-700 hover:bg-[#E7F0FF] hover:text-[#007BE5] text-sm leading-6 transition-all duration-300 font-semibold items-center"
-                  ),
-                  children: [
-                    itemSubMenu.icon,
-                    itemSubMenu.name,
-                    shouldShowToggleIcon && (openSubmenu === itemSubMenu.name ? /* @__PURE__ */ jsx(RefIcon, { className: "w-4 h-4 ml-auto" }) : /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" }))
-                  ]
-                }
-              ),
-              itemSubMenu.isShow && openSubmenu === itemSubMenu.name && /* @__PURE__ */ jsx("ul", { className: "transition-all duration-300", children: itemSubMenu?.children?.map(
-                (itemChildrenSubMenu) => {
-                  const itemFullPath = `/${itemSubMenu.path.replace(
-                    /^\//,
-                    ""
-                  )}/${itemChildrenSubMenu.path.replace(
-                    /^\/|\/$/g,
-                    ""
-                  )}`;
-                  return /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      onClick: () => handleClick(itemFullPath),
-                      className: twMerge(
-                        pathUrl.startsWith(itemFullPath) ? "bg-[#E7F0FF] !text-[#007BE5]" : "",
-                        "text-sm hover:bg-[#E7F0FF] hover:text-[#007BE5] transition-all duration-300 max-w-lg truncate py-2 flex items-center"
-                      ),
-                      children: /* @__PURE__ */ jsxs("div", { className: "ml-4 flex items-center gap-4", children: [
-                        itemChildrenSubMenu.icon,
-                        itemChildrenSubMenu.name
-                      ] })
-                    },
-                    `${itemChildrenSubMenu.path}-${itemChildrenSubMenu.path}`
-                  );
-                }
-              ) })
-            ] }, itemSubMenu.path);
-          }) })
-        ] }, sub?.path);
-      }) })
-    }
-  );
-}
-const Sidebar = ({ children, menu, userInfo }) => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const pathUrl = location.pathname;
-  const [activeMainMenu, setActiveMainMenu] = useState("");
-  const [openSubmenu, setOpenSubmenu] = useState(null);
-  const [collapse, setCollapse] = useState(false);
-  const [openSubCollapse, setOpenSubCollapse] = useState(false);
-  const [valueSearch, setValueSearch] = useState("");
-  const searchSidebar = useDebounce(valueSearch, 300);
-  const newMenu = useMemo(
-    () => menu?.filter((route) => route?.isShow)?.flatMap((route) => route?.children)?.filter(Boolean),
-    [menu]
-  );
-  const dataOption = useMemo(
-    () => getDataOption(newMenu, searchSidebar),
-    [newMenu, searchSidebar]
-  );
-  const handleClickSubmenu = useCallback(
-    (item, menuDropdown) => {
-      if (menuDropdown) {
-        setOpenSubmenu((prev) => prev === item.name ? null : item.name);
-        return;
-      }
-      navigate(item.path);
-    },
-    [navigate]
-  );
-  const handleClick = useCallback(
-    (itemPath) => {
-      console.log("click path", pathUrl + itemPath);
-      navigate(itemPath);
-    },
-    [navigate]
-  );
-  const handleSelect = useCallback(
-    (_value, path) => {
-      navigate(path.path);
-    },
-    [navigate]
-  );
-  const handleNavigateModule = (path) => {
-    navigate(path);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Header,
-      {
-        style: {
-          backgroundColor: "#FFFFFF",
-          display: "flex",
-          width: "100%",
-          borderBottom: "1px solid white",
-          boxShadow: "0 1px 1px rgba(0, 0, 0, 0.15)",
-          height: "56px"
-        },
-        children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center ml-[-2rem]", children: /* @__PURE__ */ jsx("img", { src: logoHeaderText, alt: "logo", width: 200 }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsx(
-              AutoComplete,
-              {
-                classNames: {
-                  popup: { root: "certain-category-search-dropdown" }
-                },
-                popupMatchSelectWidth: 500,
-                style: { width: 500 },
-                options: dataOption ?? [],
-                onSelect: handleSelect,
-                onChange: (value) => setValueSearch(value),
-                children: /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    className: "!placeholder:bg-[#E7F0FF] !bg-[#E7F0FF] !border !border-[#BDE3FF]",
-                    placeholder: "Tìm kiếm theo chức năng,module của hệ thống",
-                    iconStartInput: /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx(SearchIcon, { className: "w-5 text-[#116DFF]" }) })
-                  }
-                )
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("li", { className: "list-none cursor-pointer group flex items-center", children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: twMerge(
-                  collapse ? "" : "justify-center",
-                  "text-black flex items-center rounded-md gap-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-4 items-center", children: [
-                    /* @__PURE__ */ jsx(VietNamIcon, { className: "w-6 h-6" }),
-                    /* @__PURE__ */ jsx(BellIcon, { className: "w-6 h-6" })
-                  ] })
-                ]
-              }
-            ) }) }),
-            /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("a", { onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx("li", { className: "list-none cursor-pointer group flex items-center", children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: twMerge(
-                  collapse ? "" : "justify-center",
-                  "text-black flex items-center rounded-md gap-2"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-                  /* @__PURE__ */ jsx("div", { className: "flex justify-center w-10 h-10 rounded-full", children: /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: userInfo?.avatar || defaultAvatar,
-                      alt: "default_avatar"
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsx("p", { children: userInfo?.name }),
-                  /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsx(DownOutlinedIcon, { className: "w-6 h-6" }) })
-                ]
-              }
-            ) }) }) })
-          ] })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "flex relative h-[calc(100vh-56px)] overflow-y-hidden", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          onMouseEnter: () => setCollapse(true),
-          onMouseLeave: () => setCollapse(false),
-          className: twMerge(
-            "flex flex-col gap-y-5 h-full bg-[#001523] transition-all z-50 duration-300",
-            collapse ? "w-[255px]" : "w-[54px]",
-            openSubCollapse && "absolute"
-          ),
-          children: /* @__PURE__ */ jsx(
-            SidebarMenu,
-            {
-              menu: newMenu,
-              activeMainMenu,
-              setActiveMainMenu,
-              setOpenSubCollapse,
-              collapse,
-              pathUrl,
-              setCollapse,
-              handleNavigateModule
-            }
-          )
-        }
-      ),
-      openSubCollapse && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: twMerge(
-            openSubCollapse ? "ml-10" : "ml-0",
-            collapse ? "w-17" : "w-[250px]",
-            "flex flex-col border-gray-200 bg-[#FFFFFF] shadow h-screen transition-all duration-300"
-          ),
-          children: /* @__PURE__ */ jsx(
-            SidebarSubMenu,
-            {
-              newMenu,
-              activeMainMenu,
-              openSubmenu,
-              handleClickSubmenu,
-              handleClick,
-              pathUrl
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: twMerge(
-            collapse && openSubCollapse ? "ml-[7%]" : "",
-            "flex-1 h-full overflow-y-auto scrollbar-none transition-all duration-300"
-          ),
-          children
-        }
-      )
-    ] })
-  ] });
-};
-
-export { Sidebar };