@pnkx-lib/ui 1.9.434 → 1.9.437

package/es/ui/SidebarV3/index.js

@@ -1,465 +0,0 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
-import { S as SearchIcon, V as VietNamIcon, D as DownOutlinedIcon, l as logoHeaderText, R as RefIcon$1, u as useDebounce } from '../../chunks/logo-header-DG8abRGF.js';
-import { Flex, AutoComplete, Divider, Dropdown } from 'antd';
-import { Layout } from '../Layout.js';
-import { Input } from '../../fields/Input.js';
-import { t as twMerge } from '../../chunks/bundle-mjs-BBFHkixS.js';
-import { F as ForwardRef, R as RefIcon$2 } from '../../chunks/BellIcon-Bv07EhTB.js';
-import { R as RefIcon } from '../../chunks/DownOutlined-CkHKgaSi.js';
-
-const useMenuFilter = (menu) => {
-  const sidebarMenu = useMemo(
-    () => menu?.filter((route) => route?.isShowChildren)?.flatMap((route) => route?.children)?.filter(Boolean),
-    [menu]
-  );
-  return { sidebarMenu };
-};
-const classNames = (...classes) => {
-  return classes.filter(Boolean).join(" ");
-};
-
-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
-});
-const 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;
-  }, []);
-};
-
-const SearchHeader = ({
-  dataOption,
-  valueSearch,
-  onSearchChange,
-  onSelect
-}) => {
-  return /* @__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,
-      onChange: onSearchChange,
-      value: valueSearch,
-      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]" }) })
-        }
-      )
-    }
-  ) });
-};
-
-const userInfo = {
-  name: "admin",
-  avatar: "http://10.1.15.154:9000/image/logo-phenikaa-mec.webp"
-};
-const items = [
-  { key: "1", label: "Hồ sơ" },
-  { key: "4", label: "Cài đặt" },
-  { key: "2", label: "Đăng xuất" }
-];
-const UserInfoSection = ({
-  hoverOpenMenu
-}) => {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__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(
-          hoverOpenMenu ? "" : "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(ForwardRef, { className: "w-6 h-6" })
-          ] })
-        ]
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center z-[9999]", 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(
-          hoverOpenMenu ? "" : "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-[30px] h-[30px] rounded-full", children: /* @__PURE__ */ jsx("img", { src: userInfo?.avatar, alt: "default_avatar" }) }),
-          /* @__PURE__ */ jsx("p", { children: userInfo?.name }),
-          /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsx(DownOutlinedIcon, { className: "w-6 h-6" }) })
-        ]
-      }
-    ) }) }) })
-  ] });
-};
-
-const Header = ({
-  dataOption,
-  valueSearch,
-  onSearchChange,
-  onSelect,
-  hoverOpenMenu
-}) => {
-  return /* @__PURE__ */ jsx(
-    Layout.Header,
-    {
-      style: {
-        backgroundColor: "#FFFFFF",
-        display: "flex",
-        width: "100%",
-        borderBottom: "1px solid white",
-        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
-        height: "56px",
-        position: "fixed",
-        zIndex: 2e3
-      },
-      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(
-            SearchHeader,
-            {
-              dataOption,
-              valueSearch,
-              onSearchChange,
-              onSelect
-            }
-          ),
-          /* @__PURE__ */ jsx(UserInfoSection, { hoverOpenMenu })
-        ] })
-      ] })
-    }
-  );
-};
-
-const MainSidebar = ({
-  sidebarMenu,
-  hoverOpenMenu,
-  onMouseEnter,
-  onMouseLeave,
-  onNavigateModule
-}) => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const currentPath = location.pathname;
-  const isActiveItem = (item) => {
-    if (item.path) {
-      if (currentPath.includes(item.path) && item.path !== "/") return true;
-    }
-    if (item.children) {
-      return item.children.some((child) => isActiveItem(child));
-    }
-    return false;
-  };
-  const handleNavigateModule = (item) => {
-    if (item?.path) {
-      return navigate(item?.path);
-    }
-    if (item?.children && item?.children.length > 0) {
-      return onNavigateModule(item);
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: twMerge(
-        "fixed inset-y-0 flex h-screen flex-col transition-all duration-300 ease-in-out z-[999]",
-        hoverOpenMenu ? "w-[225px]" : "w-[62px]"
-      ),
-      onMouseLeave,
-      onMouseEnter,
-      children: /* @__PURE__ */ jsx("div", { className: "flex grow flex-col mt-14 gap-y-5 bg-[#001523] px-6 pb-4 relative", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col mt-4", children: /* @__PURE__ */ jsx("ul", { role: "list", className: "-mx-3 space-y-1", children: sidebarMenu.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-        "a",
-        {
-          onClick: () => {
-            handleNavigateModule(item);
-          },
-          className: classNames(
-            isActiveItem(item) ? "bg-[#007BE5] text-white" : "text-gray-400 hover:text-white hover:bg-[#007BE5]",
-            "group flex items-center gap-x-3 rounded-md px-1.5 py-2 text-sm font-semibold cursor-pointer"
-          ),
-          children: [
-            item.icon,
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: twMerge(
-                  "whitespace-nowrap overflow-hidden transition-opacity duration-200",
-                  hoverOpenMenu && "opacity-100"
-                ),
-                children: item.name
-              }
-            )
-          ]
-        }
-      ) }, item.name)) }) }) })
-    }
-  );
-};
-
-const EachItem = ({
-  subMenu,
-  openDropdownMenu,
-  onClickDropdownMenu,
-  isDirectlyActive,
-  hasActiveChild,
-  level = 1
-}) => {
-  const isDropdown = subMenu.isShowChildren;
-  const isDirectActive = isDirectlyActive(subMenu);
-  const hasChildActive = hasActiveChild(subMenu);
-  const isParent = !!subMenu?.children && isDropdown;
-  const [openItemMenu, setOpenItemMenu] = useState(false);
-  const toggleExpand = () => {
-    setOpenItemMenu(!openItemMenu);
-  };
-  const onClickItem = () => {
-    if (isParent) {
-      toggleExpand();
-      return;
-    }
-    onClickDropdownMenu(isDropdown, subMenu);
-  };
-  const getPaddingStyle = () => {
-    if (level === 1) {
-      return { paddingLeft: "16px", paddingRight: "16px" };
-    }
-    return {
-      paddingLeft: `${4 + (level - 1) * 4 * 6}px`,
-      // 16px + (level-1) * 16px
-      paddingRight: "16px"
-    };
-  };
-  const getItemStyling = () => {
-    if (isDirectActive) {
-      return "!text-[#007BE5] !bg-[#E5F4FF]";
-    }
-    if (hasChildActive) {
-      return "!text-[#007BE5]";
-    }
-    return "text-[#1F1F1F]";
-  };
-  return /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        onClick: onClickItem,
-        style: getPaddingStyle(),
-        className: twMerge(
-          "py-2 mt-1 items-center gap-2 cursor-pointer flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
-          getItemStyling()
-        ),
-        children: [
-          subMenu.icon,
-          subMenu.name,
-          isDropdown && subMenu.children && (openItemMenu ? /* @__PURE__ */ jsx(RefIcon, { className: "w-4 h-4 ml-auto" }) : /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" }))
-        ]
-      }
-    ),
-    isDropdown && openItemMenu && subMenu.children?.map((dropdownItem) => {
-      return /* @__PURE__ */ jsx(
-        EachItem,
-        {
-          subMenu: dropdownItem,
-          openDropdownMenu,
-          onClickDropdownMenu,
-          isDirectlyActive,
-          hasActiveChild,
-          level: level + 1
-        },
-        dropdownItem.name
-      );
-    })
-  ] }, subMenu.path);
-};
-
-const MainMenu = ({
-  sidebarMenu,
-  showSubmenu,
-  hoverOpenMenu,
-  openDropdownMenu,
-  onCloseSubmenu,
-  onClickDropdownMenu
-}) => {
-  const subMenu = sidebarMenu.find((item) => item.id === showSubmenu);
-  const location = useLocation();
-  const currentPath = location.pathname;
-  const isDirectlyActive = (item) => {
-    if (!item.path) return false;
-    return currentPath.includes(item.path) && item.path !== "/";
-  };
-  const hasActiveChild = (item) => {
-    if (!item.children) return false;
-    return item.children.some(
-      (child) => isDirectlyActive(child) || hasActiveChild(child)
-    );
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: twMerge(
-        "fixed w-[217px] pt-15 left-[62px] h-full bg-[#FFFFFF] z-[50] flex flex-col",
-        hoverOpenMenu && "opacity-0"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("span", { className: "block px-4 h-[42px] shadow-[0px_4px_6px_0px_#0006241f] py-2 text-[16px] font-semibold text-[#1F1F1F]", children: subMenu?.name }),
-          /* @__PURE__ */ jsx("ul", { className: "mt-4", children: subMenu?.children?.map((subMenuChild) => /* @__PURE__ */ jsx(
-            EachItem,
-            {
-              subMenu: subMenuChild,
-              openDropdownMenu,
-              onClickDropdownMenu,
-              isDirectlyActive,
-              hasActiveChild
-            },
-            subMenuChild.path || subMenuChild.name
-          )) })
-        ] }, subMenu?.id),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "mt-auto select-none px-4 py-2 shadow-[0px_0px_12px_0px_#0006241f] flex space-x-2 cursor-pointer",
-            onClick: onCloseSubmenu,
-            children: [
-              /* @__PURE__ */ jsx(RefIcon$2, {}),
-              /* @__PURE__ */ jsx("span", { className: "text-[#131313]", children: "Thu gọn menu" })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-
-const ContentArea = ({
-  children,
-  hoverOpenMenu,
-  showSubmenu
-}) => {
-  const getContentMargin = () => {
-    if (hoverOpenMenu) return "ml-[225px]";
-    if (showSubmenu) return "ml-[279px]";
-    return "ml-[62px]";
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: twMerge(
-        "transition-all duration-300 ease-in-out  h-screen",
-        getContentMargin()
-      ),
-      children
-    }
-  );
-};
-
-const SidebarV3 = ({ menu, children }) => {
-  const [hoverOpenMenu, setHoverOpenMenu] = useState(false);
-  const [valueSearch, setValueSearch] = useState("");
-  const searchSidebar = useDebounce(valueSearch, 300);
-  const [showSubmenu, setShowSubmenu] = useState(null);
-  const [openDropdownMenu, setOpenDropdownMenu] = useState(null);
-  const navigate = useNavigate();
-  const { sidebarMenu } = useMenuFilter(menu);
-  const dataOption = useMemo(
-    () => getDataOption(sidebarMenu, searchSidebar),
-    [sidebarMenu, searchSidebar]
-  );
-  const handleSelect = (_value, path) => {
-    navigate(path.path);
-  };
-  const handleClickDropdownMenu = (isDropdown, item) => {
-    if (isDropdown) {
-      setOpenDropdownMenu(item?.id);
-      return;
-    }
-    if (item?.path) {
-      navigate(item.path);
-    }
-  };
-  const handleNavigateModule = (item) => {
-    setShowSubmenu(item?.id);
-    setHoverOpenMenu(false);
-  };
-  const handleCloseSubmenu = () => {
-    setShowSubmenu(null);
-  };
-  const handleHoverOpenMenu = () => {
-    setHoverOpenMenu(true);
-  };
-  const handleHoverCloseMenu = () => {
-    setHoverOpenMenu(false);
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Header,
-      {
-        dataOption,
-        valueSearch,
-        onSearchChange: setValueSearch,
-        onSelect: handleSelect,
-        hoverOpenMenu
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      MainSidebar,
-      {
-        sidebarMenu: menu,
-        hoverOpenMenu,
-        onMouseEnter: handleHoverOpenMenu,
-        onMouseLeave: handleHoverCloseMenu,
-        onNavigateModule: handleNavigateModule
-      }
-    ),
-    showSubmenu && /* @__PURE__ */ jsx(
-      MainMenu,
-      {
-        sidebarMenu: menu,
-        showSubmenu,
-        hoverOpenMenu,
-        openDropdownMenu,
-        onCloseSubmenu: handleCloseSubmenu,
-        onClickDropdownMenu: handleClickDropdownMenu
-      }
-    ),
-    /* @__PURE__ */ jsx(ContentArea, { hoverOpenMenu, showSubmenu, children })
-  ] });
-};
-
-export { SidebarV3 };

package/types/components/ui/Sidebar.d.ts

@@ -1,23 +0,0 @@
-import { ReactNode, default as React } from 'react';
-export type MenuType = {
-    name: string;
-    path: string;
-    isShow?: boolean;
-    isPrivateRoute?: boolean;
-    icon?: ReactNode;
-    code?: string;
-    isShowLabel?: boolean;
-    component?: React.LazyExoticComponent<React.MemoExoticComponent<any>> | React.ExoticComponent<any> | ReactNode | React.FC;
-    componentProps?: Record<string, any>;
-    children?: MenuType[];
-};
-export interface SidebarProps {
-    children?: React.ReactNode;
-    menu: Array<MenuType>;
-    userInfo?: {
-        avatar: string;
-        name: string;
-        email?: string;
-    };
-}
-export declare const Sidebar: ({ children, menu, userInfo }: SidebarProps) => import("react/jsx-runtime").JSX.Element;

package/types/components/ui/SidebarV2.d.ts

@@ -1,20 +0,0 @@
-import { default as React, ReactNode } from 'react';
-export type MenuTypeV2 = {
-    name: string;
-    path: string;
-    isShow?: boolean;
-    isPrivateRoute?: boolean;
-    icon?: ReactNode;
-    code?: string;
-    isShowLabel?: boolean;
-    isModule?: boolean;
-    component?: React.LazyExoticComponent<React.MemoExoticComponent<any>> | React.ExoticComponent<any> | ReactNode | React.FC;
-    componentProps?: Record<string, any>;
-    children?: MenuTypeV2[];
-};
-interface SidebarV2Props {
-    menu: MenuTypeV2[];
-    children: React.ReactNode;
-}
-export declare const SidebarV2: ({ menu, children }: SidebarV2Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/types/components/ui/SidebarV3/index.d.ts

@@ -1,2 +0,0 @@
-export { SidebarV3 } from './components/SidebarV3';
-export type { MenuTypeV3, SidebarV3Props, SidebarState } from './types';

package/types/components/ui/SidebarV3/utils.d.ts

@@ -1,2 +0,0 @@
-import { MenuTypeV3 } from './types';
-export declare const getDataOption: (menu: MenuTypeV3[], searchValue: string) => any;

package/types/ui/Sidebar.d.ts

@@ -1,2 +0,0 @@
-export * from '../components/ui/Sidebar'
-export {}

package/types/ui/SidebarV2.d.ts

@@ -1,2 +0,0 @@
-export * from '../components/ui/SidebarV2'
-export {}

package/types/ui/SidebarV3/index.d.ts

@@ -1,2 +0,0 @@
-export * from '../../components/ui/SidebarV3/index'
-export {}