ar-design 0.3.42 → 0.3.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/navigation/menu/SubMenu.d.ts +12 -0
  2. package/dist/components/navigation/menu/SubMenu.js +15 -0
  3. package/dist/components/navigation/menu/index.js +56 -42
  4. package/dist/libs/types/index.d.ts +1 -0
  5. package/package.json +1 -1
package/dist/components/navigation/menu/SubMenu.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import React from "react";
2
+ import { MenuItemVariants, MenuProps } from "../../../libs/types";
3
+ declare const SubMenu: ({ items, variant, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem, handleClick, }: {
4
+ items: MenuProps[];
5
+ variant: MenuItemVariants;
6
+ setSelectedMenu: React.Dispatch<React.SetStateAction<MenuProps[]>>;
7
+ selectedMenu: MenuProps[];
8
+ setSelectedItem: React.Dispatch<React.SetStateAction<MenuProps | null>>;
9
+ selectedItem: MenuProps | null;
10
+ handleClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, item: MenuProps, setSelectedItem: React.Dispatch<React.SetStateAction<MenuProps | null>>) => void;
11
+ }) => React.JSX.Element | null;
12
+ export default SubMenu;
package/dist/components/navigation/menu/SubMenu.js ADDED
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ const SubMenu = ({ items, variant, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem, handleClick, }) => {
3
+ if (!items)
4
+ return null;
5
+ return (React.createElement("ul", null,
6
+ React.createElement("div", null, items.map((item, index) => {
7
+ return (React.createElement("li", { key: index, "data-menu-id": `ar-menu-${item.key}`, className: `${item.type === "divider" ? "divider" : ""} ${selectedItem?.key === item.key ? "selected" : ""}`, onClick: (event) => handleClick(event, item, setSelectedItem) },
8
+ React.createElement("div", { className: "item-render" },
9
+ item.type !== "divider" && React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
10
+ item.type === "divider" ? React.createElement("hr", null) : React.createElement("span", { className: "item" }, item.render),
11
+ item.type === "group" && React.createElement("span", { className: "angel-down" })),
12
+ item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem, handleClick: handleClick }))));
13
+ }))));
14
+ };
15
+ export default SubMenu;
package/dist/components/navigation/menu/index.js CHANGED
@@ -1,57 +1,71 @@
1
1
  "use client";
2
- import React, { useState } from "react";
2
+ import React, { useEffect, useState } from "react";
3
3
  import "../../../assets/css/components/navigation/menu/styles.css";
4
- const handleClick = (event) => {
5
- event.stopPropagation();
6
- const target = event.currentTarget;
7
- const childNodes = Array.from(target.childNodes);
8
- const ul = childNodes.filter((child) => child instanceof HTMLUListElement); // UL
9
- const div = childNodes.filter((child) => child instanceof HTMLDivElement); // Item Render
10
- if (ul.length > 0) {
11
- const span = div[0].childNodes[div[0].childNodes.length - 1];
12
- span.classList.toggle("opened");
13
- ul[0].classList.toggle("opened");
14
- }
15
- else {
16
- const selectedItems = document.querySelectorAll(".selected");
17
- selectedItems.forEach((item) => item.classList.remove("selected"));
18
- if (!target.classList.contains("divider")) {
19
- target.classList.add("selected");
20
- }
21
- }
22
- };
23
- /**
24
- * Alt menüleri sürekli olarak eklemek için özyinelemeli fonksiyon.
25
- * @param items - Menü öğelerinin dizisi
26
- * @param variant - Menü varyantı, "vertical" veya "horizontal"
27
- * @param type - "group" | "divider" türlerinden birisi olmalıdır.
28
- * @returns Menü yapısını temsil eden iç içe geçmiş liste
29
- */
30
- const SubMenu = ({ items, variant, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
31
- if (!items)
32
- return null;
33
- return (React.createElement("ul", null,
34
- React.createElement("div", null, items.map((item, index) => {
35
- return (React.createElement("li", { key: index, className: item.type === "divider" ? "divider" : "", onClick: handleClick },
36
- React.createElement("div", { className: "item-render" },
37
- item.type !== "divider" && React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
38
- item.type === "divider" ? React.createElement("hr", null) : React.createElement("span", { className: "item" }, item.render),
39
- item.type === "group" && React.createElement("span", { className: "angel-down" })),
40
- item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
41
- }))));
42
- };
4
+ import SubMenu from "./SubMenu";
43
5
  const Menu = ({ data, variant = "vertical", ...attributes }) => {
44
6
  // states
45
7
  const [selectedMenu, setSelectedMenu] = useState([]);
46
8
  const [selectedItem, setSelectedItem] = useState(null);
9
+ // variables
10
+ const sessionStorageKey = "selected-menu-item";
11
+ // methods
12
+ const handleClick = (event, item, setSelectedItem) => {
13
+ event.stopPropagation();
14
+ const target = event.currentTarget;
15
+ const childNodes = Array.from(target.childNodes);
16
+ const ul = childNodes.filter((child) => child instanceof HTMLUListElement); // alt menü UL
17
+ const div = childNodes.filter((child) => child instanceof HTMLDivElement); // item render div
18
+ if (ul.length > 0) {
19
+ // Alt menüyü aç/kapa.
20
+ const span = div[0].querySelector(".angel-down");
21
+ span?.classList.toggle("opened");
22
+ ul[0].classList.toggle("opened");
23
+ }
24
+ else {
25
+ const selectedItems = document.querySelectorAll(".selected");
26
+ selectedItems.forEach((el) => el.classList.remove("selected"));
27
+ if (!target.classList.contains("divider")) {
28
+ target.classList.add("selected");
29
+ // SessionStorage'a kaydeder.
30
+ setSelectedItem(item);
31
+ sessionStorage.setItem(sessionStorageKey, JSON.stringify(item));
32
+ }
33
+ }
34
+ };
35
+ const openParentMenusDOM = (li) => {
36
+ if (!li)
37
+ return;
38
+ let parent = li.parentElement; // ul
39
+ while (parent && parent.tagName === "DIV") {
40
+ const parentLi = parent.closest("li");
41
+ if (parentLi) {
42
+ const ul = parentLi.querySelector("ul");
43
+ const span = parentLi.querySelector(".angel-down");
44
+ ul?.classList.add("opened");
45
+ span?.classList.add("opened");
46
+ }
47
+ parent = parentLi?.parentElement || null;
48
+ }
49
+ };
50
+ // useEffects
51
+ useEffect(() => {
52
+ if (data.length === 0)
53
+ return;
54
+ const stored = JSON.parse(sessionStorage.getItem(sessionStorageKey) ?? "{}");
55
+ const _menuItem = (Object.keys(stored).length > 0 ? stored : data[0]);
56
+ setSelectedItem(_menuItem);
57
+ // DOM üzerinde seçili li elementini bul ve üst menüleri aç
58
+ const li = document.querySelector(`li[data-menu-id="ar-menu-${_menuItem.key}"]`);
59
+ openParentMenusDOM(li);
60
+ }, [data]);
47
61
  return (React.createElement("nav", { className: "ar-menu", ...attributes },
48
62
  React.createElement("ul", null, data.map((item, index) => {
49
- return (React.createElement("li", { key: index, className: item.type === "divider" ? "divider" : "", onClick: handleClick },
63
+ return (React.createElement("li", { key: index, "data-menu-id": `ar-menu-${item.key}`, className: `${item.type === "divider" ? "divider" : ""} ${selectedItem?.key === item.key ? "selected" : ""}`, onClick: (event) => handleClick(event, item, setSelectedItem) },
50
64
  React.createElement("div", { className: "item-render" },
51
65
  item.type !== "divider" && React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
52
66
  item.type === "divider" ? React.createElement("hr", null) : React.createElement("span", { className: "item" }, item.render),
53
67
  item.type === "group" && React.createElement("span", { className: "angel-down" })),
54
- item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
68
+ item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem, handleClick: handleClick }))));
55
69
  }))));
56
70
  };
57
71
  Menu.displayName = "Menu";
package/dist/libs/types/index.d.ts CHANGED
@@ -17,6 +17,7 @@ export type Option = {
17
17
  text: string;
18
18
  };
19
19
  export type MenuProps = {
20
+ key: string | number;
20
21
  render?: string | React.JSX.Element;
21
22
  type?: MenuItemType;
22
23
  icon?: React.ReactElement<SVGElement | HTMLImageElement>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.3.42",
3
+ "version": "0.3.44",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",