ar-design 0.1.26 → 0.1.27

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 (10) hide show
  1. package/dist/assets/css/components/navigation/menu/core/open-or-close.css +0 -1
  2. package/dist/assets/css/components/navigation/menu/menu.css +35 -7
  3. package/dist/components/data-display/table/IProps.d.ts +6 -1
  4. package/dist/components/data-display/table/index.d.ts +1 -1
  5. package/dist/components/data-display/table/index.js +10 -9
  6. package/dist/components/navigation/menu/index.js +6 -4
  7. package/dist/components/navigation/pagination/IProps.d.ts +2 -2
  8. package/dist/components/navigation/pagination/index.js +11 -11
  9. package/dist/libs/types/index.d.ts +1 -1
  10. package/package.json +1 -1
package/dist/assets/css/components/navigation/menu/core/open-or-close.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .ar-menu ul li ul {
2
2
  opacity: 0;
3
3
  max-height: 0;
4
- overflow: hidden;
5
4
  }
6
5
 
7
6
  .ar-menu ul li ul.opened {
package/dist/assets/css/components/navigation/menu/menu.css CHANGED
@@ -2,7 +2,8 @@
2
2
  padding: 0 0.25rem;
3
3
  font-family: var(--system);
4
4
  }
5
- .ar-menu ul {
5
+ .ar-menu ul,
6
+ .ar-menu ul li ul {
6
7
  display: flex;
7
8
  flex-direction: column;
8
9
  gap: 0.5rem 0;
@@ -10,17 +11,18 @@
10
11
  padding: 0;
11
12
  list-style: none;
12
13
  }
13
- .ar-menu ul li {
14
+
15
+ .ar-menu ul li .item-render {
14
16
  display: flex;
15
17
  flex-direction: row;
16
18
  align-items: center;
17
19
  }
18
- .ar-menu ul li a {
20
+ .ar-menu ul li .item-render > a {
19
21
  color: inherit;
20
22
  text-decoration: none;
21
23
  letter-spacing: 1px;
22
24
  }
23
- .ar-menu ul li span {
25
+ .ar-menu ul li .item-render > span {
24
26
  display: flex;
25
27
  justify-content: center;
26
28
  align-items: center;
@@ -29,20 +31,46 @@
29
31
  margin-right: 0.75rem;
30
32
  border-radius: var(--border-radius-pill);
31
33
  }
32
- .ar-menu ul li span svg {
34
+ .ar-menu ul li .item-render > span svg {
33
35
  color: var(--light);
34
36
  }
37
+ .ar-menu ul li .item-render > span > .no-icon::before {
38
+ display: inline-block;
39
+ content: "";
40
+ width: 0.75rem;
41
+ height: 0.75rem;
42
+ border: dashed 2px transparent;
43
+ border-top-color: var(--light);
44
+ border-right-color: var(--light);
45
+ border-left-color: rgba(var(--black-rgb), 0.1);
46
+ border-bottom-color: rgba(var(--black-rgb), 0.1);
47
+ transform-origin: center;
48
+ transform: rotate(45deg);
49
+ }
35
50
 
36
51
  .ar-menu ul li.selected {
37
52
  color: var(--primary);
38
53
  }
39
- .ar-menu ul li.selected span {
54
+ .ar-menu ul li.selected .item-render > span {
40
55
  background-color: var(--primary);
41
56
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.1);
42
57
  }
43
- .ar-menu ul li.selected span svg {
58
+ .ar-menu ul li.selected .item-render > span svg {
44
59
  color: var(--white);
45
60
  }
61
+ .ar-menu ul li.selected .item-render > span > .no-icon::before {
62
+ display: inline-block;
63
+ content: "";
64
+ width: 0.75rem;
65
+ height: 0.75rem;
66
+ border: solid 2px transparent;
67
+ border-top-color: var(--light);
68
+ border-right-color: var(--light);
69
+ border-left-color: rgba(var(--black-rgb), 0.1);
70
+ border-bottom-color: rgba(var(--black-rgb), 0.1);
71
+ transform-origin: center;
72
+ transform: rotate(45deg);
73
+ }
46
74
 
47
75
  /* Core Css */
48
76
  @import url("./core/open-or-close.css");
package/dist/components/data-display/table/IProps.d.ts CHANGED
@@ -4,8 +4,13 @@ interface IProps<T> extends IChildren {
4
4
  data: T[];
5
5
  columns: TableColumnType<T>[];
6
6
  selections?: (selectionItems: T[]) => void;
7
+ pagination: {
8
+ totalRecords: number;
9
+ perPage: number;
10
+ onChange: (currentPage: number) => void;
11
+ };
7
12
  config?: {
8
- perPage?: number;
13
+ isServer: boolean;
9
14
  scroll?: {
10
15
  maxHeight: number;
11
16
  };
package/dist/components/data-display/table/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import IProps from "./IProps";
3
3
  import "../../../assets/css/components/data-display/table/table.css";
4
4
  declare const Table: {
5
- <T extends object>({ children, data, columns, selections, config, }: IProps<T>): React.JSX.Element;
5
+ <T extends object>({ children, data, columns, selections, pagination, config, }: IProps<T>): React.JSX.Element;
6
6
  Action: React.FC<{
7
7
  children: React.ReactElement<{
8
8
  children: React.ReactElement<import("../../form/button/IProps").default> | React.ReactElement<import("../../form/button/IProps").default>[];
package/dist/components/data-display/table/index.js CHANGED
@@ -5,7 +5,7 @@ import Checkbox from "../../form/checkbox";
5
5
  import Actions from "./Actions";
6
6
  import Input from "../../form/input";
7
7
  import Pagination from "../../navigation/pagination";
8
- const Table = function ({ children, data, columns, selections, config, }) {
8
+ const Table = function ({ children, data, columns, selections, pagination, config, }) {
9
9
  // refs
10
10
  let _dataLength = useRef(0);
11
11
  const _tableWrapper = useRef(null);
@@ -19,7 +19,6 @@ const Table = function ({ children, data, columns, selections, config, }) {
19
19
  const [selectionItems, setSelectionItems] = useState([]);
20
20
  const [searchedText, setSearchedText] = useState("");
21
21
  const [currentPage, setCurrentPage] = useState(0);
22
- const [perPage, setPerPage] = useState(0);
23
22
  if (config && Object.keys(config.scroll || {}).length > 0) {
24
23
  if (_tableContent.current && config.scroll) {
25
24
  if (config.scroll.maxHeight) {
@@ -109,9 +108,10 @@ const Table = function ({ children, data, columns, selections, config, }) {
109
108
  const getData = useCallback(() => {
110
109
  let _data = [...data];
111
110
  _dataLength.current = data.length;
112
- const indexOfLastRow = currentPage * perPage;
113
- const indexOfFirstRow = indexOfLastRow - perPage;
114
- _data = data.slice(indexOfFirstRow, indexOfLastRow);
111
+ const indexOfLastRow = currentPage * pagination.perPage;
112
+ const indexOfFirstRow = indexOfLastRow - pagination.perPage;
113
+ if (!config?.isServer)
114
+ _data = data.slice(indexOfFirstRow, indexOfLastRow);
115
115
  return searchedText
116
116
  ? _data.filter((item) => {
117
117
  // `some` kullanarak herhangi bir girişin arama koşulunu karşılayıp karşılamadığını kontrol ediyoruz.
@@ -208,10 +208,11 @@ const Table = function ({ children, data, columns, selections, config, }) {
208
208
  }) }, React.isValidElement(render) ? render : String(render)));
209
209
  }))))) : (React.createElement("tr", null,
210
210
  React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
211
- data.length > perPage && (React.createElement("div", { className: "footer" },
212
- React.createElement(Pagination, { total: _dataLength.current, perPage: config?.perPage, onChange: (page, perPage) => {
213
- setCurrentPage(page);
214
- setPerPage(perPage);
211
+ (pagination?.totalRecords ?? 0) > (pagination?.perPage ?? 0) && (React.createElement("div", { className: "footer" },
212
+ React.createElement(Pagination, { totalRecords: pagination.totalRecords, perPage: pagination.perPage, onChange: (currentPage) => {
213
+ setCurrentPage(currentPage);
214
+ // Table tarafında yapılan sayfalamayı dışarı aktarmak için kullanılan callback.
215
+ pagination.onChange(currentPage);
215
216
  } })))));
216
217
  };
217
218
  Table.Action = Actions;
package/dist/components/navigation/menu/index.js CHANGED
@@ -29,8 +29,9 @@ const SubMenu = ({ items, variant, setSelectedMenu, selectedMenu, setSelectedIte
29
29
  if (item.type === "group")
30
30
  className.push("opened");
31
31
  return (React.createElement("li", { key: index, className: "item", onClick: handleOnClick },
32
- React.createElement("span", null, item.icon && item.icon),
33
- item.render,
32
+ React.createElement("div", { className: "item-render" },
33
+ React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
34
+ item.render),
34
35
  item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
35
36
  })));
36
37
  };
@@ -44,8 +45,9 @@ const Menu = ({ data, variant = "vertical", ...attributes }) => {
44
45
  if (item.type === "group")
45
46
  className_li.push("opened");
46
47
  return (React.createElement("li", { key: index, className: className_li.map((c) => c).join(" "), onClick: handleOnClick },
47
- React.createElement("span", null, item.icon && item.icon),
48
- item.type === "divider" ? React.createElement(Divider, null) : item.render,
48
+ React.createElement("div", { className: "item-render" },
49
+ React.createElement("span", null, item.icon ? item.icon : React.createElement("span", { className: "no-icon" })),
50
+ item.type === "divider" ? React.createElement(Divider, null) : item.render),
49
51
  item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
50
52
  }))));
51
53
  };
package/dist/components/navigation/pagination/IProps.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  interface IProps {
2
2
  defaultCurrent?: number;
3
+ totalRecords: number;
3
4
  perPage?: number;
4
- total: number;
5
- onChange: (page: number, perPage: number) => void;
5
+ onChange: (currentPage: number) => void;
6
6
  }
7
7
  export default IProps;
package/dist/components/navigation/pagination/index.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import React, { useContext, useEffect, useState } from "react";
3
3
  import "../../../assets/css/components/navigation/pagination/pagination.css";
4
4
  import { ConfigContext } from "../../../libs/core/application/contexts/Config";
5
- const Pagination = ({ defaultCurrent = 1, perPage, total, onChange }) => {
5
+ const Pagination = ({ defaultCurrent = 1, totalRecords, perPage, onChange }) => {
6
6
  // context
7
7
  const { config } = useContext(ConfigContext);
8
8
  // states
@@ -10,9 +10,9 @@ const Pagination = ({ defaultCurrent = 1, perPage, total, onChange }) => {
10
10
  const [currentPage, setCurrentPage] = useState(defaultCurrent);
11
11
  // useEffect
12
12
  useEffect(() => {
13
- if (total === 0)
13
+ if (totalRecords === 0)
14
14
  return;
15
- const totalPages = Math.ceil(total / (perPage || config.perPage));
15
+ const totalPages = Math.ceil(totalRecords / (perPage ?? config.perPage));
16
16
  const liItems = [];
17
17
  // Başlangıç ve bitiş aralığını hesapla.
18
18
  const startPage = Math.max(1, currentPage - 1);
@@ -36,8 +36,8 @@ const Pagination = ({ defaultCurrent = 1, perPage, total, onChange }) => {
36
36
  liItems.push(React.createElement("li", { key: totalPages, onClick: () => setCurrentPage(totalPages) }, totalPages));
37
37
  }
38
38
  setPages(liItems);
39
- onChange(currentPage, perPage || config.perPage);
40
- }, [total, currentPage]);
39
+ onChange(currentPage);
40
+ }, [totalRecords, currentPage]);
41
41
  return (React.createElement("div", { className: "ar-pagination" },
42
42
  React.createElement("ul", null,
43
43
  React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
@@ -57,20 +57,20 @@ const Pagination = ({ defaultCurrent = 1, perPage, total, onChange }) => {
57
57
  } },
58
58
  React.createElement("span", null, "‹")),
59
59
  pages,
60
- React.createElement("li", { className: Math.ceil(total / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
61
- if (Math.ceil(total / (perPage || config.perPage)) === currentPage)
60
+ React.createElement("li", { className: Math.ceil(totalRecords / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
61
+ if (Math.ceil(totalRecords / (perPage || config.perPage)) === currentPage)
62
62
  return;
63
63
  setCurrentPage((prev) => {
64
- if (prev === Math.ceil(total / (perPage || config.perPage)))
64
+ if (prev === Math.ceil(totalRecords / (perPage || config.perPage)))
65
65
  return prev;
66
66
  return (prev += 1);
67
67
  });
68
68
  } },
69
69
  React.createElement("span", null, "›")),
70
- React.createElement("li", { className: Math.ceil(total / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
71
- if (Math.ceil(total / (perPage || config.perPage)) === currentPage)
70
+ React.createElement("li", { className: Math.ceil(totalRecords / (perPage || config.perPage)) === currentPage ? "passive" : "", onClick: () => {
71
+ if (Math.ceil(totalRecords / (perPage || config.perPage)) === currentPage)
72
72
  return;
73
- setCurrentPage(Math.ceil(total / (perPage || config.perPage)));
73
+ setCurrentPage(Math.ceil(totalRecords / (perPage || config.perPage)));
74
74
  } },
75
75
  React.createElement("span", null, "»")))));
76
76
  };
package/dist/libs/types/index.d.ts CHANGED
@@ -18,7 +18,7 @@ export type Option = {
18
18
  export type MenuProps = {
19
19
  render?: string | React.JSX.Element;
20
20
  type?: MenuItemType;
21
- icon?: React.JSX.Element;
21
+ icon?: React.ReactElement<SVGElement | HTMLImageElement>;
22
22
  submenu?: MenuProps[];
23
23
  };
24
24
  export type MenuItemVariants = "vertical" | "horizontal";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ar-design",
3
- "version": "0.1.26",
3
+ "version": "0.1.27",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",