ar-design 0.1.90 → 0.1.92

package/dist/assets/css/components/data-display/table/styles.css

@@ -33,6 +33,9 @@
   column-gap: 0.5rem;
   margin-left: auto;
 }
+.ar-table > .header > div:last-child {
+  margin-left: auto;
+}
 
 .ar-table > .footer {
   display: flex;
@@ -43,15 +46,6 @@
   border-top: solid 1px var(--gray-200);
 }
 
-.ar-table > .header > div:first-child > .ar-input-wrapper,
-.ar-table > .header > div:first-child > .ar-input-wrapper > .ar-input,
-.ar-table > .header > div:first-child > .ar-input-wrapper > .ar-input > input {
-  width: auto !important;
-}
-.ar-table > .header > div:last-child {
-  margin-left: auto;
-}
-
 .ar-table > .content > table {
   border-collapse: collapse;
   width: 100%;
@@ -87,6 +81,14 @@
   transition: background 250ms, box-shadow 250ms ease-in-out;
   z-index: 2;
 }
+.ar-table > .content > table > thead > tr > th > .filter-field {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 100%;
+}
 .ar-table > .content > table > thead > tr > th::after {
   position: absolute;
   top: 50%;
@@ -120,24 +122,6 @@
   text-align: right;
 }
 
-.ar-table > .content > table > thead > tr > th > .search-input {
-  background-color: var(--gray-200);
-  width: 100%;
-  height: var(--input-height);
-  padding: 0 0.5rem;
-  border: solid 1px var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  font-family: var(--system);
-  font-size: 1rem;
-  outline: none;
-  box-sizing: border-box;
-  transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
-}
-.ar-table > .content > table > thead > tr > th > .search-input:focus {
-  border: solid 1px var(--primary);
-  box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.25);
-}
-
 .ar-table > .content > table > tbody > tr {
   border-bottom: solid 1px var(--gray-200);
 }

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

@@ -6,21 +6,28 @@ import Checkbox from "../../form/checkbox";
 import Pagination from "../../navigation/pagination";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import Actions from "./Actions";
+import Input from "../../form/input";
+import Popover from "../../feedback/popover";
 const TableWithRef = forwardRef(({ children, title, description, data, columns, actions, selections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _tableWrapper = useRef(null);
     const _table = useRef(null);
     const _tableContent = useRef(null);
     const _checkboxItems = useRef([]);
+    const _filterCheckboxItems = useRef([]);
+    // refs -> Search
     const _searchTextInputs = useRef([]);
     const _searchTimeOut = useRef(null);
+    // const _searchFilterFirstLoad = useRef<boolean>(false);
     // className
     const _tableClassName = ["ar-table", "scroll"];
     // states
     const [selectAll, setSelectAll] = useState(false);
     const [selectionItems, setSelectionItems] = useState([]);
+    // states -> Search
     const [searchedText, setSearchedText] = useState(undefined);
     const [_searchedParams, setSearchedParams] = useState(undefined);
+    // const [searchedFilters, setSearchedFilters] = useState<string | undefined>(undefined);
     // const [totalRecords, setTotalRecords] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState(1);
     if (config && Object.keys(config.scroll || {}).length > 0) {
@@ -112,6 +119,52 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
             updateStickyPositions(tbodyElements);
         });
     };
+    const handleSearch = (event) => {
+        if (config.isServerSide) {
+            if (_searchTimeOut.current)
+                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 }));
+        }
+    };
+    const handleChecboxFilter = (event) => {
+        if (config.isServerSide) {
+            if (_searchTimeOut.current)
+                clearTimeout(_searchTimeOut.current);
+            setSearchedParams((prev) => {
+                const updatedValues = new Set(prev?.[event.target.name] || []);
+                event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
+                return {
+                    ...prev,
+                    ...(Array.from(updatedValues).length > 0
+                        ? { [event.target.name]: Array.from(updatedValues) }
+                        : { [event.target.name]: [] }),
+                };
+            });
+            setCurrentPage(1);
+            pagination && pagination.onChange(1);
+        }
+        else {
+            setSearchedText((prev) => {
+                const updatedValues = new Set(prev?.[event.target.name] || []);
+                event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
+                return {
+                    ...prev,
+                    ...(Array.from(updatedValues).length > 0
+                        ? { [event.target.name]: Array.from(updatedValues) }
+                        : { [event.target.name]: [] }),
+                };
+            });
+            setCurrentPage(1);
+        }
+    };
     // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
     const deepSearch = (item, searchedText) => {
         if (!searchedText)
@@ -119,13 +172,28 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
         return Object.entries(searchedText).every(([key, value]) => {
             const _itemValue = item[key];
+            debugger;
             if (typeof _itemValue === "number" || typeof _itemValue === "string") {
+                if (Array.isArray(value)) {
+                    if (value.length === 0)
+                        return true;
+                    else
+                        return value.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
+                }
                 return _itemValue.toString().toLocaleLowerCase().includes(value.toLocaleLowerCase());
             }
             if (typeof _itemValue === "object") {
+                if (Array.isArray(value)) {
+                    if (value.length === 0)
+                        return true;
+                    else {
+                        return value.some((v) => Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(v.toLocaleLowerCase())));
+                    }
+                }
                 return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
             }
             if (Array.isArray(_itemValue)) {
+                console.log("Buradasın", _itemValue);
             }
             return false;
         });
@@ -170,6 +238,7 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
         }
         setSelectAll(allChecked);
     }, [currentPage]);
+    console.log(searchedText);
     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" },
@@ -223,32 +292,36 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                             if (c.config?.alignContent) {
                                 _className.push(`align-content-${c.config.alignContent}`);
                             }
-                            if (!c.key)
-                                return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
-                                        className: `${_className.map((c) => c).join(" ")}`,
-                                    }), ...(c.config?.sticky && {
-                                        "data-sticky-position": c.config.sticky,
-                                    }) }));
                             return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
                                     className: `${_className.map((c) => c).join(" ")}`,
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
                                 }) },
-                                React.createElement("input", { ref: (element) => (_searchTextInputs.current[cIndex] = element), name: typeof c.key !== "object" ? String(c.key) : String(c.key.field), 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 }));
-                                                setCurrentPage(1);
-                                                pagination && pagination.onChange(1);
-                                            }, 750);
-                                        }
-                                        else {
-                                            setCurrentPage(1);
-                                            setSearchedText((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-                                        }
-                                    } })));
+                                React.createElement("div", { className: "filter-field" },
+                                    React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "filled" : "outlined", status: "light", name: typeof c.key !== "object" ? String(c.key) : String(c.key.field), onChange: handleSearch, disabled: !c.key || !!c.filters }),
+                                    c.filters && (React.createElement(Popover, { content: React.createElement(React.Fragment, null,
+                                            React.createElement("ul", null, c.filters
+                                                // .filter((x) =>
+                                                //   x.text.toLocaleLowerCase().includes(searchedFilters?.toLocaleLowerCase() ?? "")
+                                                // )
+                                                .map((filter, index) => {
+                                                const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
+                                                return (React.createElement("li", { key: index },
+                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[index] = element), label: filter.text, name: name, status: "success", value: filter.text, checked: config.isServerSide
+                                                            ? _searchedParams?.[name]?.includes(filter.text)
+                                                            : searchedText?.[name]?.includes(filter.text), onChange: handleChecboxFilter })));
+                                            }))) },
+                                        _filterCheckboxItems.current.filter((item) => item?.checked).length > 0 && (React.createElement("div", { style: {
+                                                position: "absolute",
+                                                top: "0.35rem",
+                                                right: "0.35rem",
+                                                width: "0.5rem",
+                                                height: "0.5rem",
+                                                backgroundColor: "var(--danger)",
+                                                borderRadius: "var(--border-radius-pill)",
+                                                zIndex: 1,
+                                            } })),
+                                        React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } }))))));
                         })))),
                 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" },
@@ -292,20 +365,19 @@ const TableWithRef = forwardRef(({ children, title, description, data, columns,
                     }))))) : (React.createElement("tr", null,
                     React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
-            React.createElement(React.Fragment, null,
+            React.createElement("span", null,
+                React.createElement("strong", null,
+                    "Showing ",
+                    getData().length),
+                " ",
                 React.createElement("span", null,
-                    React.createElement("strong", null,
-                        "Showing ",
-                        getData().length),
-                    " ",
-                    React.createElement("span", null,
-                        "of ",
-                        pagination?.perPage ?? getData().length,
-                        " agreement")),
-                React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
-                        config.isServerSide && pagination.onChange(currentPage);
-                        setCurrentPage(currentPage);
-                    } }))))));
+                    "of ",
+                    pagination?.perPage ?? getData().length,
+                    " agreement")),
+            React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
+                    config.isServerSide && pagination.onChange(currentPage);
+                    setCurrentPage(currentPage);
+                } })))));
 });
 // Actions'ı ekliyoruz.
 const Table = TableWithRef;

package/dist/components/form/input/index.js

@@ -43,7 +43,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
     // useEffects
     useEffect(() => {
         if (attributes.value !== undefined)
-            setValue(attributes.value);
+            setValue(attributes.value ?? "");
     }, [attributes.value]);
     return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
         addon?.before && React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before),
@@ -52,7 +52,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
             attributes.placeholder && (React.createElement("label", { className: value ? "visible" : "hidden" },
                 validation && "* ",
                 attributes.placeholder)),
-            React.createElement("input", { ref: ref, ...attributes, placeholder: `${validation ? "* " : ""}${attributes.placeholder}`, value: attributes.value !== undefined ? attributes.value : value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
+            React.createElement("input", { ref: ref, ...attributes, placeholder: `${validation ? "* " : ""}${attributes.placeholder ?? ""}`, value: value ?? attributes.value, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
                     // Disabled gelmesi durumunda işlem yapmasına izin verme...
                     if (attributes.disabled)
                         return;

package/dist/components/icons/Compiler.js

@@ -74,6 +74,9 @@ class Icon {
                             React.createElement("line", { x1: "4", y1: this._startIndex, x2: "20", y2: this._startIndex, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("line", { x1: "8", y1: this._centerIndex, x2: "20", y2: this._centerIndex, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }),
                             React.createElement("line", { x1: "4", y1: this._finishIndex, x2: "20", y2: this._finishIndex, stroke: this._stroke, strokeWidth: this._strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" })));
+                    case "Filter":
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement("path", { d: "M5.4 2.1h13.2c1.1 0 2 .9 2 2v2.2c0 .8-.5 1.8-1 2.3l-4.3 3.8c-.6.5-1 1.5-1 2.3V19c0 .6-.4 1.4-.9 1.7l-1.4.9c-1.3.8-3.1-.1-3.1-1.7v-5.3c0-.7-.4-1.6-.8-2.1l-3.8-4c-.5-.5-.9-1.4-.9-2V4.2c0-1.2.9-2.1 2-2.1ZM10.93 2.1 6 10", stroke: this._stroke, strokeWidth: this._strokeWidth, strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })));
                     default:
                         return null;
                 }

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

@@ -29,6 +29,7 @@ export type TableColumnType<T> = {
         field: keyof T;
         nestedKey: string;
     };
+    filters?: Option[];
     render?: (item: T) => React.ReactNode;
     config?: {
         width?: number;
@@ -65,7 +66,7 @@ export type Errors<TData> = Partial<{
 }>;
 export type AllowedTypes = "image/jpeg" | "image/png" | "image/gif" | "image/webp" | "image/svg+xml" | "image/bmp" | "image/tiff" | "application/pdf" | "application/msword" | "application/vnd.openxmlformats-officedocument.wordprocessingml.document" | "application/vnd.ms-excel" | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | "application/vnd.openxmlformats-officedocument.presentationml.presentation" | "application/zip" | "application/x-rar-compressed" | "application/x-7z-compressed" | "application/gzip" | "application/json" | "application/xml" | "text/plain" | "text/csv" | "text/html" | "video/mp4" | "video/quicktime" | "video/x-msvideo" | "video/x-matroska" | "video/webm" | "video/x-flv" | "audio/mpeg" | "audio/wav" | "audio/ogg" | "audio/aac" | "audio/flac" | "application/octet-stream";
 export type IconVariants = "linear" | "bulk";
-export type Icons = "Add" | "CloseSquare" | "Drive" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight";
+export type Icons = "Add" | "CloseSquare" | "Drive" | "Folder" | "Trash" | "Upload" | "Image" | "Import" | "Bold" | "Italic" | "Underline" | "Strikethrough" | "BulletList" | "NumberList" | "TextAlingLeft" | "TextAlingCenter" | "TextAlingRight" | "Filter";
 export type PieChartDataType = {
     value: number;
     text: string;

package/package.json

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