ar-design 0.2.22 → 0.2.24

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

@@ -4,7 +4,7 @@ import { ARIcon } from "../../icons";
 import Button from "../../form/button";
 import Checkbox from "../../form/checkbox";
 import Pagination from "../../navigation/pagination";
-import React, { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Input from "../../form/input";
 import Popover from "../../feedback/popover";
 const Table = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
@@ -26,6 +26,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
     const [_searchedParams, setSearchedParams] = useState(undefined);
     const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
     // states -> Pagination
+    const [totalRecords, setTotalRecords] = useState(0);
     const [currentPage, setCurrentPage] = useState(1);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {
@@ -104,12 +105,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                 clearTimeout(_searchTimeOut.current);
             _searchTimeOut.current = setTimeout(() => {
                 setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-                setCurrentPage(1);
                 pagination && pagination.onChange(1);
             }, 750);
         }
         else {
-            setCurrentPage(1);
             setSearchedText((prev) => ({ ...prev, [event.target.name]: event.target.value }));
         }
     };
@@ -158,10 +157,16 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             return false;
         });
     };
-    const getData = useCallback(() => {
+    const getData = useMemo(() => {
         let _data = [...data];
-        if (searchedText)
+        if (searchedText) {
             _data = _data.filter((item) => deepSearch(item, searchedText));
+            setTotalRecords(_data.length);
+            setCurrentPage(1);
+        }
+        else {
+            setTotalRecords(data.length);
+        }
         if (pagination && !config.isServerSide) {
             const indexOfLastRow = currentPage * pagination.perPage;
             const indexOfFirstRow = indexOfLastRow - pagination.perPage;
@@ -215,7 +220,10 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("div", { className: "title" },
                 React.createElement("h3", null, title),
                 React.createElement("h5", null, description)),
-            React.createElement("div", null))),
+            React.createElement("div", { className: "actions" }, actions && (React.createElement(React.Fragment, null,
+                actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick })),
+                actions.import && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" }, onClick: actions.import.onClick })),
+                actions.filterClear && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Trash", size: 16 }) }, tooltip: { text: actions.filterClear.tooltip, direction: "top" }, onClick: actions.filterClear.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
@@ -274,7 +282,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                                     })), windowBlur: true },
                                     React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } })))))));
                         })))),
-                React.createElement("tbody", null, getData().map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
+                React.createElement("tbody", null, getData.map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
                     selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
                         React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
                                 if (event.target.checked)
@@ -325,13 +333,13 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
             React.createElement("span", null,
                 React.createElement("strong", null,
                     "Showing ",
-                    getData().length),
+                    getData.length),
                 " ",
                 React.createElement("span", null,
                     "of ",
-                    pagination?.perPage ?? getData().length,
+                    pagination?.perPage ?? getData.length,
                     " agreement")),
-            React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
+            React.createElement(Pagination, { totalRecords: config.isServerSide ? pagination.totalRecords : totalRecords ?? 0, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
                     config.isServerSide && pagination.onChange(currentPage);
                     setCurrentPage(currentPage);
                 } })))));

package/package.json

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