ar-design 0.3.47 → 0.3.49

package/dist/assets/css/components/navigation/pagination/{pagination.css → styles.css}

@@ -1,3 +1,9 @@
+.ar-pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0 0.5rem;
+}
 .ar-pagination > ul {
   display: flex;
   flex-direction: row;
@@ -9,7 +15,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 1.75rem;
+  min-width: 1.75rem;
   height: 100%;
   border-radius: var(--border-radius-pill);
   box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.1);

package/dist/components/data-display/diagram/index.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/diagram/styles.css";
 import Grid from "../grid-system";
 import Button from "../../form/button";
@@ -86,13 +86,14 @@ const Diagram = ({ nodes, edges }) => {
             };
             const pathData = `M${from.x} ${from.y} C${controlPoint1.x} ${controlPoint1.y}, ${controlPoint2.x} ${controlPoint2.y}, ${to.x} ${to.y}`;
             return (React.createElement("svg", { key: index, className: "edge" },
-                React.createElement("path", { ref: _path, d: pathData, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round", onClick: () => {
-                        setEdges((prev) => prev.filter((x) => x.id !== edge.id));
-                    } },
+                React.createElement("path", { ref: _path, d: pathData, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round" },
                     React.createElement("animate", { attributeName: "stroke-dashoffset", values: `${20 / scale};0`, dur: "1s", repeatCount: "indefinite" }))));
         });
     }, [_nodes, _edges, trigger]);
     const onPanStart = (e) => {
+        // Node sürükleniyorsa pan başlatma.
+        if (draggedNode)
+            return;
         setPanning(true);
         setStartPan({ x: e.clientX - pan.x, y: e.clientY - pan.y });
     };
@@ -169,7 +170,7 @@ const Diagram = ({ nodes, edges }) => {
             if (closest) {
                 // Yakın port varsa, oraya bağla
                 const newEdge = {
-                    id: _edges[_edges.length - 1]?.id + 1 || 1,
+                    id: crypto.randomUUID(), // _edges[_edges.length - 1]?.id + 1 || 1,
                     from: { id: drawingEdge.id, port: drawingEdge.port },
                     to: { id: closest.id, port: closest.port },
                 };
@@ -184,15 +185,15 @@ const Diagram = ({ nodes, edges }) => {
             }
             else {
                 // Yakın port yoksa yeni node oluştur
-                const newNodeId = _nodes[_nodes.length - 1]?.id + 1 || 1;
+                const newNodeId = crypto.randomUUID(); // _nodes[_nodes.length - 1]?.id + 1 || 1;
                 const newNode = {
                     id: newNodeId,
                     position: mousePos,
-                    data: { label: `Node - ${newNodeId}` },
+                    data: React.createElement(React.Fragment, null),
                 };
                 const newPort = mousePos.y < drawingEdge.start.y ? "bottom" : "top";
                 const newEdge = {
-                    id: _edges[_edges.length - 1]?.id + 1 || 1,
+                    id: crypto.randomUUID(), // _edges[_edges.length - 1]?.id + 1 || 1,
                     from: { id: drawingEdge.id, port: drawingEdge.port },
                     to: { id: newNodeId, port: newPort },
                 };
@@ -205,6 +206,10 @@ const Diagram = ({ nodes, edges }) => {
         setDraggedNode(null);
         setTrigger((prev) => !prev);
     };
+    // useEffects
+    useEffect(() => {
+        setEdges([...edges]);
+    }, []);
     return (React.createElement("div", { ref: _arDiagram, className: "ar-diagram", onMouseDown: onPanStart, onMouseMove: (event) => {
             onPanMove(event);
             onMouseMove(event);
@@ -225,6 +230,8 @@ const Diagram = ({ nodes, edges }) => {
                         top: node.position.y,
                     }, onMouseDown: (event) => onNodeMouseDown(event, node.id, node.position) },
                     React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
                             _arNodes.current[`${node.id}_top`] = el;
                         }, className: "port top", onMouseDown: (event) => {
                             event.stopPropagation();
@@ -238,8 +245,10 @@ const Diagram = ({ nodes, edges }) => {
                                 });
                             }
                         } }),
-                    React.createElement("span", null, node.data.label),
+                    React.createElement("span", null, node.data),
                     React.createElement("span", { ref: (el) => {
+                            if (!el)
+                                return;
                             _arNodes.current[`${node.id}_bottom`] = el;
                         }, className: "port bottom", onMouseDown: (event) => {
                             event.stopPropagation();

package/dist/components/data-display/table/index.js

@@ -70,6 +70,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
     // states -> Pagination
     const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
+    const [selectedPerPage, setSelectedPerPage] = useState(pagination?.perPage ?? 10);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {
             if (config.scroll.maxHeight) {
@@ -338,12 +339,12 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             setTotalRecords(data.length);
         }
         if (pagination && !config.isServerSide) {
-            const indexOfLastRow = currentPage * pagination.perPage;
-            const indexOfFirstRow = indexOfLastRow - pagination.perPage;
+            const indexOfLastRow = currentPage * selectedPerPage;
+            const indexOfFirstRow = indexOfLastRow - selectedPerPage;
             _data = _data.slice(indexOfFirstRow, indexOfLastRow);
         }
         return _data;
-    }, [data, searchedText, currentPage]);
+    }, [data, searchedText, currentPage, selectedPerPage]);
     const renderRow = (item, index, deph) => {
         const isHasSubitems = _subrowSelector in item;
         // TODO: Keylere bakılacak...
@@ -510,6 +511,10 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         setTimeout(() => handleScroll(), 0);
         setCurrentPage(pagination?.currentPage ?? 1);
     }, [pagination?.currentPage]);
+    useLayoutEffect(() => {
+        setCurrentPage(1);
+        setTimeout(() => handleScroll(), 0);
+    }, [selectedPerPage]);
     return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
         (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
             React.createElement("div", { className: "title" },
@@ -636,9 +641,9 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 " ",
                 React.createElement("span", null,
                     "of ",
-                    pagination?.perPage ?? getData.length,
+                    selectedPerPage ?? getData.length,
                     " agreement")),
-            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
+            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: selectedPerPage, onPerPageChange: (perPage) => setSelectedPerPage(perPage), onChange: (currentPage) => {
                     if (config.isServerSide && pagination && pagination.onChange)
                         pagination.onChange(currentPage);
                     setTimeout(() => handleScroll(), 0);

package/dist/components/navigation/pagination/IProps.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     currentPage: number;
     totalRecords: number;
     perPage?: number;
+    onPerPageChange: (perPage: number) => void;
     onChange: (currentPage: number) => void;
 }
 export default IProps;

package/dist/components/navigation/pagination/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
-import "../../../assets/css/components/navigation/pagination/pagination.css";
+import "../../../assets/css/components/navigation/pagination/styles.css";
 declare const Pagination: React.FC<IProps>;
 export default Pagination;

package/dist/components/navigation/pagination/index.js

@@ -1,13 +1,23 @@
 "use client";
 import React, { useContext, useEffect, useState } from "react";
-import "../../../assets/css/components/navigation/pagination/pagination.css";
+import "../../../assets/css/components/navigation/pagination/styles.css";
 import { ConfigContext } from "../../../libs/core/application/contexts/Config";
-const Pagination = ({ currentPage, totalRecords, perPage, onChange }) => {
+import Select from "../../form/select";
+const perPageOptions = [
+    { value: 5, text: "5" },
+    { value: 10, text: "10" },
+    { value: 15, text: "15" },
+    { value: 50, text: "50" },
+    { value: 75, text: "75" },
+    { value: 100, text: "100" },
+];
+const Pagination = ({ currentPage, totalRecords, perPage, onPerPageChange, onChange }) => {
     // context
     const { config } = useContext(ConfigContext);
     // states
     const [pages, setPages] = useState([]);
     const [totalPageCount, setTotalPageCount] = useState(0);
+    const [selectedPerPage, setSelectedPerPage] = useState(perPageOptions.find((x) => x.value === 10));
     // methods
     const handlePageChange = (page) => onChange(page);
     // useEffects
@@ -29,6 +39,10 @@ const Pagination = ({ currentPage, totalRecords, perPage, onChange }) => {
         setPages(liItems);
     }, [totalRecords, currentPage, perPage, config.perPage]);
     return (React.createElement("div", { className: "ar-pagination" },
+        React.createElement(Select, { value: selectedPerPage, options: [...perPageOptions, { value: totalRecords, text: "Tümü" }], onChange: (option) => {
+                setSelectedPerPage(option);
+                onPerPageChange(option?.value);
+            } }),
         React.createElement("ul", null,
             React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
                     if (currentPage === 1)

package/dist/libs/types/index.d.ts

@@ -90,24 +90,22 @@ export type PieChartDataType = {
     text: string;
 };
 export type NodeData = {
-    id: number;
+    id: string | number;
     position: {
         x: number;
         y: number;
     };
-    data: {
-        label: string;
-    };
+    data: React.ReactNode;
 };
 type Port = "top" | "bottom";
 export type EdgeData = {
-    id: number;
+    id: string | number;
     from: {
-        id: number;
+        id: string | number;
         port: Port;
     };
     to: {
-        id: number;
+        id: string | number;
         port: Port;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.3.47",
+  "version": "0.3.49",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",