ar-design 0.3.47 → 0.3.48

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/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/package.json

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