ar-design 0.1.76 → 0.1.78

package/dist/components/data-display/table/IProps.d.ts

@@ -1,28 +1,32 @@
 import { TableColumnType } from "../../../libs/types";
 import { IChildren } from "../../../libs/types/IGlobalProps";
+export type SearchedParam = {
+    [key: string]: string;
+};
 interface IProps<T> extends IChildren {
     title?: string;
     description?: string;
     data: T[];
     columns: TableColumnType<T>[];
     actions?: {
-        add?: {
+        create?: {
             tooltip: string;
-            click: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
         };
         import?: {
             tooltip: string;
-            click: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+            onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
         };
     };
     selections?: (selectionItems: T[]) => void;
+    searchedParams?: (params: SearchedParam | undefined, query: string) => void;
     pagination?: {
         totalRecords: number;
         perPage: number;
         onChange: (currentPage: number) => void;
     };
     config?: {
-        isServer?: boolean;
+        isServerSide?: boolean;
         isSearchable?: boolean;
         scroll?: {
             maxHeight: number;

package/dist/components/data-display/table/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/table/styles.css";
 declare const Table: {
-    <T extends object>({ children, title, description, data, columns, actions, selections, pagination, config, }: IProps<T>): React.JSX.Element;
+    <T extends object>({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config, }: IProps<T>): React.JSX.Element;
     Action: React.FC<{
         children: React.ReactElement | React.ReactElement[];
     }>;

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

@@ -6,19 +6,21 @@ import Actions from "./Actions";
 import Pagination from "../../navigation/pagination";
 import Button from "../../form/button";
 import { ARIcon } from "../../icons";
-const Table = function ({ children, title, description, data, columns, actions, selections, pagination, config = { isSearchable: true }, }) {
+const Table = function ({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: true }, }) {
     // refs
     let _dataLength = useRef(0);
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
     const _table = useRef(null);
     const _checkboxItems = useRef([]);
+    const _searchTimeOut = useRef(null);
     // className
     const _tableClassName = ["ar-table", "scroll"];
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [selectionItems, setSelectionItems] = useState([]);
-    const [searchedText, setSearchedText] = useState([]);
+    const [searchedTexts, setSearchedTexts] = useState([]);
+    const [_searchedParams, setSearchedParams] = useState(undefined);
     const [currentPage, setCurrentPage] = useState(1);
     if (config && Object.keys(config.scroll || {}).length > 0) {
         if (_tableContent.current && config.scroll) {
@@ -105,7 +107,7 @@ const Table = function ({ children, title, description, data, columns, actions,
         }
         // Eğer değer bir nesne veya dizi ise, içindeki her bir değeri yine deepSearch fonksiyonuyla kontrol ediyoruz.
         if (typeof value === "object") {
-            return Object.values(value).some((innerValue) => deepSearch(key, innerValue, searchedText));
+            return Object.values(value).some((innerValue) => deepSearch(key, innerValue, searchedTexts));
         }
         // Diğer türlerdeki değerleri atla.
         return false;
@@ -113,19 +115,18 @@ const Table = function ({ children, title, description, data, columns, actions,
     const getData = useCallback(() => {
         let _data = [...data];
         _dataLength.current = data.length;
-        if (pagination) {
+        if (pagination && !config.isServerSide) {
             const indexOfLastRow = currentPage * pagination.perPage;
             const indexOfFirstRow = indexOfLastRow - pagination.perPage;
-            if (!config?.isServer)
-                _data = data.slice(indexOfFirstRow, indexOfLastRow);
+            _data = data.slice(indexOfFirstRow, indexOfLastRow);
         }
-        return Object.keys(searchedText).length > 0
+        return Object.keys(searchedTexts).length > 0
             ? _data.filter((item) => {
                 // `some` kullanarak herhangi bir girişin arama koşulunu karşılayıp karşılamadığını kontrol ediyoruz.
-                return Object.entries(item).some(([_key, _value]) => deepSearch(_key, _value, searchedText));
+                return Object.entries(item).some(([_key, _value]) => deepSearch(_key, _value, searchedTexts));
             })
             : _data;
-    }, [data, searchedText, currentPage]);
+    }, [data, searchedTexts, currentPage]);
     // useEffects
     useEffect(() => {
         handleOnScroll();
@@ -136,6 +137,19 @@ const Table = function ({ children, title, description, data, columns, actions,
         selections(selectionItems);
     }, [selectionItems]);
     useEffect(() => {
+        if (config?.isServerSide && searchedParams) {
+            // const query = Object.entries(_searchedParams ?? {})
+            //   .map(([key, value]) => {
+            //     return `${key}=${value}`;
+            //   })
+            //   .join("&");
+            const query = new URLSearchParams(_searchedParams).toString();
+            searchedParams(_searchedParams, query);
+        }
+    }, [_searchedParams]);
+    useEffect(() => {
+        if (!selections)
+            return;
         let allChecked = false;
         if (_checkboxItems.current.length > 0) {
             allChecked = _checkboxItems.current.every((item) => item?.checked === true);
@@ -150,8 +164,8 @@ const Table = function ({ children, title, description, data, columns, actions,
             React.createElement("div", { className: "actions" },
                 React.Children.count(children) > 0 && React.createElement("div", null, React.Children.map(children, (child) => child)),
                 actions && (React.createElement(React.Fragment, null,
-                    actions.add && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.add.tooltip, direction: "top" }, onClick: actions.add.click })),
-                    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.click })))))),
+                    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 })))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleOnScroll },
             React.createElement("table", { ref: _table },
                 React.createElement("thead", null,
@@ -201,18 +215,31 @@ const Table = function ({ children, title, description, data, columns, actions,
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) },
-                                React.createElement("input", { className: "search-input", onChange: (event) => setSearchedText((prev) => {
-                                        const updated = prev.some((item) => item.key === c.key);
-                                        if (updated) {
-                                            if (event.target.value.toLowerCase() === "") {
-                                                return prev.filter((item) => item.key !== c.key);
-                                            }
-                                            return prev.map((item) => item.key === c.key ? { ...item, value: event.target.value.toLowerCase() } : item);
+                                React.createElement("input", { name: String(c.key), className: "search-input", onChange: (event) => {
+                                        if (config.isServerSide) {
+                                            if (_searchTimeOut.current)
+                                                clearTimeout(_searchTimeOut.current);
+                                            _searchTimeOut.current = setTimeout(() => {
+                                                setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
+                                                pagination && pagination.onChange(1);
+                                            }, 750);
                                         }
                                         else {
-                                            return [...prev, { key: c.key, value: event.target.value.toLowerCase() }];
+                                            // Bileşen bazlı arama işlemi.
+                                            setSearchedTexts((prev) => {
+                                                const updated = prev.some((item) => item.key === c.key);
+                                                if (updated) {
+                                                    if (event.target.value.toLowerCase() === "") {
+                                                        return prev.filter((item) => item.key !== c.key);
+                                                    }
+                                                    return prev.map((item) => item.key === c.key ? { ...item, value: event.target.value.toLowerCase() } : item);
+                                                }
+                                                else {
+                                                    return [...prev, { key: c.key, value: event.target.value.toLowerCase() }];
+                                                }
+                                            });
                                         }
-                                    }) })));
+                                    } })));
                         })))),
                 React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}` },
                     selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
@@ -268,9 +295,7 @@ const Table = function ({ children, title, description, data, columns, actions,
                     pagination?.perPage ?? getData().length,
                     " agreement")),
             pagination && pagination.totalRecords > pagination.perPage && (React.createElement(Pagination, { totalRecords: pagination.totalRecords, perPage: pagination.perPage, onChange: (currentPage) => {
-                    setCurrentPage(currentPage);
-                    // Table tarafında yapılan sayfalamayı dışarı aktarmak için kullanılan callback.
-                    pagination.onChange(currentPage);
+                    !config.isServerSide ? setCurrentPage(currentPage) : pagination.onChange(currentPage);
                 } })))));
 };
 Table.Action = Actions;

package/dist/libs/core/application/hooks/index.js

@@ -93,6 +93,7 @@ export const useValidation = function (data, params, step) {
         }
     };
     const paramsShape = (param, value) => {
+        const vLenght = value ? value.length : 0;
         const getKey = (subkey) => {
             if (!subkey)
                 return param.key;
@@ -103,10 +104,10 @@ export const useValidation = function (data, params, step) {
             if (s.type === "required" && Utils.IsNullOrEmpty(value)) {
                 setError(key, s.message, param.step);
             }
-            if (s.type === "minimum" && value.length < s.value) {
+            if (s.type === "minimum" && vLenght < s.value) {
                 setError(key, Utils.StringFormat(s.message, s.value), param.step);
             }
-            if (s.type === "maximum" && value.length > s.value) {
+            if (s.type === "maximum" && vLenght > s.value) {
                 setError(key, Utils.StringFormat(s.message, s.value), param.step);
             }
             if (s.type === "email" && value && !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {

package/dist/libs/core/service/Api.js

@@ -11,6 +11,9 @@ class Api {
         this._url = `${this._host}/${this._core ? this._core + "/" : ""}`;
     }
     async Get(values) {
+        if (values.input && values.input.toString().includes("?")) {
+            values.input = values.input.toString().replace(/\/(?=\?)/, "");
+        }
         const response = await this.CustomFetch(`${this._url}${values.input}`, {
             method: "GET",
             headers: {

package/package.json

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