ar-design 0.4.29 → 0.4.31

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

@@ -174,6 +174,10 @@
               align-items: center;
               gap: 0.5rem;
               min-width: 100%;
+
+              > .ar-date-picker {
+                width: 100%;
+              }
             }
           }
         }
@@ -375,7 +379,7 @@
               }
 
               > span {
-                position: sticky;
+                /* position: sticky; */
                 left: 0.5rem;
               }
             }

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

@@ -18,6 +18,7 @@ import PropertiesPopup from "./PropertiesPopup";
 import { ExtractKey } from "./Helpers";
 import Header from "./header/Header";
 import TBody from "./body/TBody";
+import DatePicker from "../../form/date-picker";
 const filterOption = [
     { value: FilterOperator.Contains, text: "İçerir" },
     { value: FilterOperator.DoesNotContains, text: "İçermez" },
@@ -165,8 +166,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             setIsMobile(window.innerWidth <= 768);
         };
     }, []);
-    const handleSearch = useCallback((event) => {
-        const { name, value } = event.target;
+    const handleSearch = useCallback((name, value, dataType) => {
         const operator = filterPopupOption?.key == name
             ? filterPopupOption.option?.value
             : FilterOperator.Contains;
@@ -180,7 +180,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 }));
                 if (pagination)
                     pagination.onChange?.(1, selectedPerPage);
-            }, 750);
+            }, dataType === "date" ? 0 : 750);
         }
         else {
             setSearchedText((prev) => {
@@ -194,7 +194,6 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 return _state;
             });
         }
-        event.target.value = value;
         setCurrentPage(1);
     }, [filterPopupOption]);
     const handleCheckboxChange = useCallback(async (event) => {
@@ -221,8 +220,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         const value = Array.isArray(searchedText?.[key])
             ? "" // veya ihtiyacına göre birleştirme yap: searchedText[key].map(v => v.value).join(", ").
             : searchedText?.[key]?.value;
-        const handleChange = (event) => {
-            const { value } = event.target;
+        const handleChange = (value) => {
             const input = _searchTextInputs.current[index ?? 0];
             if (input) {
                 const event = new Event("input", { bubbles: true });
@@ -240,7 +238,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                     setFilterPopupOption({ key: c.key, option: option });
                                 }, placeholder: "Ko\u015Ful" })),
                         React.createElement(Column, { size: 12 },
-                            React.createElement(Input, { value: value ?? "", onChange: handleChange, placeholder: "Ara" }))));
+                            React.createElement(Input, { value: value ?? "", onChange: (event) => handleChange(event.target.value), placeholder: "Ara" }))));
                 case "object":
                 case "boolean":
                     return (React.createElement(Row, null,
@@ -626,8 +624,8 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                     className: `${_className.map((c) => c).join(" ")}`,
                                 }), ...(c.config?.sticky && {
                                     "data-sticky-position": c.config.sticky,
-                                }) }, c.key && (React.createElement("div", { className: "filter-field" },
-                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: handleSearch, disabled: !c.key || !!c.filters }),
+                                }) }, c.key && (React.createElement("div", { className: "filter-field" }, c.filterDataType === "date" ? (React.createElement(DatePicker, { value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onChange: (value) => handleSearch(key, value, c.filterDataType), style: { height: "2rem" }, config: { isClock: true, isFooterButton: true, locale: config.locale }, disabled: !c.key || !!c.filters })) : (React.createElement(React.Fragment, null,
+                                React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "outlined" : "filled", style: { height: "2rem" }, value: (config.isServerSide ? ssrValue : csrValue) ?? "", name: key, onInput: (event) => handleSearch(event.currentTarget.name, event.currentTarget.value), disabled: !c.key || !!c.filters }),
                                 React.createElement("span", { ref: (element) => (_filterButton.current[cIndex] = element), onClick: (event) => {
                                         event.stopPropagation();
                                         // Temizlik...
@@ -646,14 +644,14 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                             dataType = "string";
                                         setFilterButtonCoordinate({ x: coordinateX, y: coordinateY });
                                         setFilterCurrentColumn(c);
-                                        setFilterCurrentDataType(dataType);
+                                        setFilterCurrentDataType(c.filterDataType ?? dataType);
                                         setFilterCurrentIndex(cIndex);
                                         setOpenFilter(true);
-                                        handleFilterPopupContent(c, dataType, cIndex);
+                                        handleFilterPopupContent(c, c.filterDataType ?? dataType, cIndex);
                                     } },
                                     React.createElement(Button, { variant: "borderless", icon: {
                                             element: React.createElement(ARIcon, { size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 }),
-                                        } }))))));
+                                        } }))))))));
                         })))),
                 React.createElement("tbody", { ref: _tBody },
                     React.createElement(TBody, { data: getData, columns: columns, refs: { _checkboxItems: _checkboxItems, _selectionItems: _selectionItems }, states: {

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

@@ -25,6 +25,7 @@ export type MenuProps = {
 };
 export type MenuItemVariants = "vertical" | "horizontal";
 export type MenuItemType = "group" | "divider";
+export type FilterDataType = "string" | "number" | "date" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function";
 export type TableColumnType<T> = {
     title: string;
     key?: keyof T | {
@@ -32,6 +33,7 @@ export type TableColumnType<T> = {
         nestedKey: string;
     };
     filters?: Option[];
+    filterDataType?: FilterDataType;
     render?: (item: T) => React.ReactNode;
     editable?: {
         type: "string" | "number" | "decimal" | "input-formatted-decimal" | "date-picker" | "single-select" | "multiple-select";

package/package.json

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