ar-design 0.0.2 → 0.0.4

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 (7) hide show
  1. package/dist/components/menu/Types.d.ts +4 -2
  2. package/dist/components/menu/index.js +26 -16
  3. package/dist/libs/styles/menu/core/core.css +19 -10
  4. package/dist/libs/styles/menu/core/open-or-close.css +11 -7
  5. package/dist/libs/styles/menu/menu.css +1 -0
  6. package/dist/libs/styles/menu/variant/vertical.css +3 -0
  7. package/package.json +1 -1
package/dist/components/menu/Types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- export type MenuItemType = "group" | "divider" | "none";
2
+ export type MenuItemVariant = "vertical" | "horizontal";
3
+ export type MenuItemType = "group" | "divider";
3
4
  export interface MenuProps {
4
5
  render?: string | React.JSX.Element;
5
6
  type?: MenuItemType;
@@ -7,5 +8,6 @@ export interface MenuProps {
7
8
  submenu?: MenuProps[];
8
9
  }
9
10
  export type Props = {
10
- data: MenuProps[];
11
+ menu: MenuProps[];
12
+ variant?: MenuItemVariant;
11
13
  } & React.HTMLAttributes<HTMLElement>;
package/dist/components/menu/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
  import React, { useRef } from "react";
3
3
  import "../../libs/styles/menu/menu.css";
4
4
  import Divider from "../divider";
5
- const handleOnClick = (event, item) => {
5
+ const handleOnClick = (event, item, variant) => {
6
6
  event.stopPropagation();
7
- if (item.type === "group")
7
+ if (variant === "vertical" && item.type === "group")
8
8
  return;
9
9
  const _current = event.target;
10
10
  const ulElement = _current.nextElementSibling;
@@ -21,37 +21,47 @@ const handleOnClick = (event, item) => {
21
21
  * @param type - "group" | "divider" | "none" türlerinden birisi gönderilmelidir.
22
22
  * @returns Menü yapısını temsil eden iç içe geçmiş liste
23
23
  */
24
- const SubMenu = ({ items, type }) => {
24
+ const SubMenu = ({ items, variant, type }) => {
25
25
  if (!items)
26
26
  return null;
27
27
  // refs
28
28
  let _className_ul = useRef("ar-menu-core-list-item-groups").current;
29
29
  let _className_li = useRef("ar-menu-core-list-item-group-item").current;
30
30
  let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
31
- if (type === "group")
31
+ if (variant === "vertical" && type === "group")
32
32
  _className_ul += " opened";
33
33
  return (React.createElement("ul", { className: _className_ul }, items.map((item, index) => {
34
34
  if (item.submenu && item.submenu.length > 0) {
35
- if (item.type !== "group")
35
+ if (variant === "vertical" && item.type === "group")
36
+ _className_groupTitle += " group";
37
+ if (variant === "horizontal" || item.type !== "group")
36
38
  _className_groupTitle += " ar-angle-down";
37
39
  }
38
- return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item) },
40
+ return (React.createElement("li", { key: index, className: _className_li, onClick: (event) => handleOnClick(event, item, variant) },
39
41
  React.createElement("div", { className: _className_groupTitle }, item.render),
40
- React.createElement(SubMenu, { items: item.submenu, type: item.type })));
42
+ React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
41
43
  })));
42
44
  };
43
- const Menu = ({ data, ...attributes }) => {
44
- // refs
45
- let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
45
+ const Menu = ({ menu, variant = "vertical", ...attributes }) => {
46
+ const handleClassName = () => {
47
+ let className = "ar-menu-core-list";
48
+ if (variant)
49
+ className += ` ${variant}`;
50
+ return className;
51
+ };
46
52
  return (React.createElement("nav", { className: "ar-menu-core", ...attributes },
47
- React.createElement("ul", { className: "ar-menu-core-list" }, data.map((menuItem, index) => {
48
- if (menuItem.submenu && menuItem.submenu.length > 0) {
49
- if (menuItem.type !== "group")
53
+ React.createElement("ul", { className: handleClassName() }, menu.map((item, index) => {
54
+ // refs
55
+ let _className_groupTitle = useRef("ar-menu-core-list-item-group-item-title").current;
56
+ if (item.submenu && item.submenu.length > 0) {
57
+ if (variant === "vertical" && item.type === "group")
58
+ _className_groupTitle += " group";
59
+ if (variant === "horizontal" || item.type !== "group")
50
60
  _className_groupTitle += " ar-angle-down";
51
61
  }
52
- return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, menuItem) },
53
- menuItem.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, menuItem.render),
54
- React.createElement(SubMenu, { items: menuItem.submenu })));
62
+ return (React.createElement("li", { key: index, className: "ar-menu-core-list-item", onClick: (event) => handleOnClick(event, item, variant) },
63
+ item.type === "divider" ? React.createElement(Divider, null) : React.createElement("div", { className: _className_groupTitle }, item.render),
64
+ React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type })));
55
65
  }))));
56
66
  };
57
67
  export default Menu;
package/dist/libs/styles/menu/core/core.css CHANGED
@@ -9,7 +9,6 @@
9
9
  list-style: none;
10
10
  }
11
11
  .ar-menu-core ul li {
12
- padding: 0.75rem;
13
12
  }
14
13
  .ar-menu-core ul li:last-child {
15
14
  padding-bottom: 0;
@@ -21,17 +20,27 @@
21
20
 
22
21
  .ar-menu-core > .ar-menu-core-list {
23
22
  display: flex;
24
- flex-direction: column;
25
23
  }
26
- .ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item {
24
+
25
+ .ar-menu-core .ar-menu-core-list-item-group-item-title {
26
+ display: flex;
27
+ align-items: center;
28
+ height: 2.5rem;
29
+ border-radius: var(--border-radius-lg);
30
+ padding-left: 0.75rem;
31
+ }
32
+ .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group) > * {
33
+ display: flex;
34
+ align-items: center;
35
+ width: 100%;
36
+ height: 100%;
27
37
  }
28
- .ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-group-item-title {
38
+ .ar-menu-core .ar-menu-core-list-item-group-item-title:not(.group):hover {
39
+ background-color: var(--gray-100);
29
40
  }
30
- .ar-menu-core > .ar-menu-core-list > .ar-menu-core-list-item > .ar-menu-core-list-item-groups {
41
+ .ar-menu-core .ar-menu-core-list-item-group-item-title.selection-item {
42
+ background-color: red;
31
43
  }
32
- .ar-menu-core
33
- > .ar-menu-core-list
34
- > .ar-menu-core-list-item
35
- > .ar-menu-core-list-item-groups
36
- > .ar-menu-core-list-item-group-item {
44
+ .ar-menu-core .ar-menu-core-list-item-group-item-title.group {
45
+ color: var(--gray-400);
37
46
  }
package/dist/libs/styles/menu/core/open-or-close.css CHANGED
@@ -2,7 +2,7 @@
2
2
  opacity: 0;
3
3
  max-height: 0;
4
4
  overflow: hidden;
5
- transition: max-height 150ms ease-in-out, opacity 150ms ease-in-out;
5
+ transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
6
6
  }
7
7
  .ar-menu-core .ar-menu-core-list-item-groups.opened {
8
8
  opacity: 1;
@@ -12,21 +12,25 @@
12
12
  display: flex;
13
13
  align-items: center;
14
14
  }
15
+ .ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up) {
16
+ cursor: pointer;
17
+ }
15
18
  .ar-menu-core .ar-menu-core-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
16
19
  display: inline-block;
17
20
  position: relative;
18
- top: -1.5px;
21
+ top: 0.5px;
19
22
  content: "";
20
- width: 0.25rem;
21
- height: 0.25rem;
23
+ width: 0.5rem;
24
+ height: 0.5rem;
22
25
  margin-left: 0.5rem;
23
26
  border: solid 2px transparent;
24
- border-right-color: red;
25
- border-bottom-color: red;
27
+ border-right-color: var(--red);
28
+ border-bottom-color: var(--red);
26
29
  transform-origin: center;
27
30
  transform: rotate(45deg);
28
- transition: transform 250ms ease-in-out;
31
+ transition: top 250ms, transform 250ms ease-in-out;
29
32
  }
30
33
  .ar-menu-core .ar-menu-core-list-item-group-item-title.ar-angle-up::after {
34
+ top: -1px;
31
35
  transform: rotate(585deg);
32
36
  }
package/dist/libs/styles/menu/menu.css CHANGED
@@ -1 +1,2 @@
1
1
  @import url("./core/core.css");
2
+ @import url("./variant/vertical.css");
package/dist/libs/styles/menu/variant/vertical.css ADDED
@@ -0,0 +1,3 @@
1
+ .ar-menu-core-list.vertical {
2
+ flex-direction: column;
3
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",