@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/master-data-grid/components/filters/inline-column-filter.tsx

@@ -1,233 +1,233 @@
-import type { Column } from "@tanstack/react-table";
-import { ChevronDown } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../../../../components/dropdown-menu";
-import type {
-  ColumnFilter,
-  ColumnMeta,
-  FilterOperator,
-  MasterDataGridResources,
-} from "../../types";
-import {
-  getFilterOperators,
-  validateFilterValue,
-} from "../../utils/filter-fns";
-import { getTranslations } from "../../utils/translation-utils";
-import { FilterInput } from "./filter-input";
-
-interface InlineColumnFilterProps<TData> {
-  column: Column<TData, unknown>;
-  t?: MasterDataGridResources;
-}
-
-export function InlineColumnFilter<TData>({
-  column,
-  t,
-}: InlineColumnFilterProps<TData>) {
-  const meta = column.columnDef.meta as ColumnMeta | undefined;
-  const schemaProperty = meta?.schemaProperty;
-  const filterOperators = meta?.filterOperators;
-
-  const availableOperators = useMemo<FilterOperator[]>(() => {
-    return (
-      filterOperators ||
-      (schemaProperty
-        ? getFilterOperators(schemaProperty.type, schemaProperty.format)
-        : ["contains"])
-    );
-  }, [filterOperators, schemaProperty?.type, schemaProperty?.format]);
-
-  const currentFilter = column.getFilterValue() as ColumnFilter | undefined;
-  const [operator, setOperator] = useState<FilterOperator>(
-    currentFilter?.operator || availableOperators[0] || "contains"
-  );
-  const [value, setValue] = useState<string>(
-    String(currentFilter?.value || "")
-  );
-  const [value2, setValue2] = useState<string>(
-    String(currentFilter?.value2 || "")
-  );
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
-
-  const isRangeOperator = operator === "between" || operator === "inRange";
-
-  useEffect(() => {
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-    };
-  }, []);
-
-  const handleValueChange = useCallback(
-    (newValue: string) => {
-      setValue(newValue);
-
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-
-      debounceTimerRef.current = setTimeout(() => {
-        if (!newValue && !isRangeOperator) {
-          column.setFilterValue(undefined);
-          return;
-        }
-
-        if (isRangeOperator) {
-          if (
-            newValue &&
-            value2 &&
-            validateFilterValue(operator, newValue, value2)
-          ) {
-            const filter: ColumnFilter = {
-              id: column.id,
-              operator,
-              value: newValue,
-              value2,
-            };
-            column.setFilterValue(filter);
-          }
-        } else if (validateFilterValue(operator, newValue)) {
-          const filter: ColumnFilter = {
-            id: column.id,
-            operator,
-            value: newValue,
-          };
-          column.setFilterValue(filter);
-        }
-      }, 300);
-    },
-    [column, operator, value2, isRangeOperator]
-  );
-
-  const handleValue2Change = useCallback(
-    (newValue2: string) => {
-      setValue2(newValue2);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      debounceTimerRef.current = setTimeout(() => {
-        if (
-          value &&
-          newValue2 &&
-          validateFilterValue(operator, value, newValue2)
-        ) {
-          const filter: ColumnFilter = {
-            id: column.id,
-            operator,
-            value,
-            value2: newValue2,
-          };
-          column.setFilterValue(filter);
-        }
-      }, 300);
-    },
-    [column, operator, value]
-  );
-
-  const handleSliderChange = (values: number[]) => {
-    const [min, max] = values;
-    setValue(String(min));
-    setValue2(String(max));
-
-    const filter: ColumnFilter = {
-      id: column.id,
-      operator,
-      value: String(min),
-      value2: String(max),
-    };
-    column.setFilterValue(filter);
-  };
-
-  const handleClear = () => {
-    setValue("");
-    setValue2("");
-    column.setFilterValue(undefined);
-  };
-
-  const handleOperatorChange = (newOperator: FilterOperator) => {
-    setOperator(newOperator);
-
-    const isNewRangeOperator =
-      newOperator === "between" || newOperator === "inRange";
-    const needsNoInputNew =
-      newOperator === "isEmpty" || newOperator === "isNotEmpty";
-
-    if (needsNoInputNew) {
-      const filter: ColumnFilter = {
-        id: column.id,
-        operator: newOperator,
-        value: "",
-      };
-      column.setFilterValue(filter);
-    } else if (isNewRangeOperator) {
-      if (value && value2 && validateFilterValue(newOperator, value, value2)) {
-        const filter: ColumnFilter = {
-          id: column.id,
-          operator: newOperator,
-          value,
-          value2,
-        };
-        column.setFilterValue(filter);
-      } else {
-        column.setFilterValue(undefined);
-      }
-    } else {
-      if (value && validateFilterValue(newOperator, value)) {
-        const filter: ColumnFilter = {
-          id: column.id,
-          operator: newOperator,
-          value,
-        };
-        column.setFilterValue(filter);
-      } else {
-        column.setFilterValue(undefined);
-      }
-    }
-  };
-  const showOperatorSelect = availableOperators.length > 1;
-
-  return (
-    <div className="space-y-2">
-      {showOperatorSelect && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button className="w-full px-2 py-1.5 text-xs font-medium hover:bg-accent rounded-md flex items-center justify-between">
-              {getTranslations(`filter.operator.${operator}`, t)}
-              <ChevronDown className="size-3" />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            {availableOperators.map((op) => (
-              <DropdownMenuItem
-                key={op}
-                onClick={() => handleOperatorChange(op)}
-                className="text-xs"
-              >
-                {getTranslations(`filter.operator.${op}`, t)}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-
-      <FilterInput
-        operator={operator}
-        value={value}
-        value2={value2}
-        columnMeta={meta}
-        onValueChange={handleValueChange}
-        onValue2Change={handleValue2Change}
-        onSliderChange={handleSliderChange}
-        onClear={handleClear}
-        t={t}
-        variant="inline"
-      />
-    </div>
-  );
-}
+import type { Column } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../../../components/dropdown-menu";
+import type {
+  ColumnFilter,
+  ColumnMeta,
+  FilterOperator,
+  MasterDataGridResources,
+} from "../../types";
+import {
+  getFilterOperators,
+  validateFilterValue,
+} from "../../utils/filter-fns";
+import { getTranslations } from "../../utils/translation-utils";
+import { FilterInput } from "./filter-input";
+
+interface InlineColumnFilterProps<TData> {
+  column: Column<TData, unknown>;
+  t?: MasterDataGridResources;
+}
+
+export function InlineColumnFilter<TData>({
+  column,
+  t,
+}: InlineColumnFilterProps<TData>) {
+  const meta = column.columnDef.meta as ColumnMeta | undefined;
+  const schemaProperty = meta?.schemaProperty;
+  const filterOperators = meta?.filterOperators;
+
+  const availableOperators = useMemo<FilterOperator[]>(() => {
+    return (
+      filterOperators ||
+      (schemaProperty
+        ? getFilterOperators(schemaProperty.type, schemaProperty.format)
+        : ["contains"])
+    );
+  }, [filterOperators, schemaProperty?.type, schemaProperty?.format]);
+
+  const currentFilter = column.getFilterValue() as ColumnFilter | undefined;
+  const [operator, setOperator] = useState<FilterOperator>(
+    currentFilter?.operator || availableOperators[0] || "contains"
+  );
+  const [value, setValue] = useState<string>(
+    String(currentFilter?.value || "")
+  );
+  const [value2, setValue2] = useState<string>(
+    String(currentFilter?.value2 || "")
+  );
+  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isRangeOperator = operator === "between" || operator === "inRange";
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleValueChange = useCallback(
+    (newValue: string) => {
+      setValue(newValue);
+
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        if (!newValue && !isRangeOperator) {
+          column.setFilterValue(undefined);
+          return;
+        }
+
+        if (isRangeOperator) {
+          if (
+            newValue &&
+            value2 &&
+            validateFilterValue(operator, newValue, value2)
+          ) {
+            const filter: ColumnFilter = {
+              id: column.id,
+              operator,
+              value: newValue,
+              value2,
+            };
+            column.setFilterValue(filter);
+          }
+        } else if (validateFilterValue(operator, newValue)) {
+          const filter: ColumnFilter = {
+            id: column.id,
+            operator,
+            value: newValue,
+          };
+          column.setFilterValue(filter);
+        }
+      }, 300);
+    },
+    [column, operator, value2, isRangeOperator]
+  );
+
+  const handleValue2Change = useCallback(
+    (newValue2: string) => {
+      setValue2(newValue2);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(() => {
+        if (
+          value &&
+          newValue2 &&
+          validateFilterValue(operator, value, newValue2)
+        ) {
+          const filter: ColumnFilter = {
+            id: column.id,
+            operator,
+            value,
+            value2: newValue2,
+          };
+          column.setFilterValue(filter);
+        }
+      }, 300);
+    },
+    [column, operator, value]
+  );
+
+  const handleSliderChange = (values: number[]) => {
+    const [min, max] = values;
+    setValue(String(min));
+    setValue2(String(max));
+
+    const filter: ColumnFilter = {
+      id: column.id,
+      operator,
+      value: String(min),
+      value2: String(max),
+    };
+    column.setFilterValue(filter);
+  };
+
+  const handleClear = () => {
+    setValue("");
+    setValue2("");
+    column.setFilterValue(undefined);
+  };
+
+  const handleOperatorChange = (newOperator: FilterOperator) => {
+    setOperator(newOperator);
+
+    const isNewRangeOperator =
+      newOperator === "between" || newOperator === "inRange";
+    const needsNoInputNew =
+      newOperator === "isEmpty" || newOperator === "isNotEmpty";
+
+    if (needsNoInputNew) {
+      const filter: ColumnFilter = {
+        id: column.id,
+        operator: newOperator,
+        value: "",
+      };
+      column.setFilterValue(filter);
+    } else if (isNewRangeOperator) {
+      if (value && value2 && validateFilterValue(newOperator, value, value2)) {
+        const filter: ColumnFilter = {
+          id: column.id,
+          operator: newOperator,
+          value,
+          value2,
+        };
+        column.setFilterValue(filter);
+      } else {
+        column.setFilterValue(undefined);
+      }
+    } else {
+      if (value && validateFilterValue(newOperator, value)) {
+        const filter: ColumnFilter = {
+          id: column.id,
+          operator: newOperator,
+          value,
+        };
+        column.setFilterValue(filter);
+      } else {
+        column.setFilterValue(undefined);
+      }
+    }
+  };
+  const showOperatorSelect = availableOperators.length > 1;
+
+  return (
+    <div className="space-y-2">
+      {showOperatorSelect && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="w-full px-2 py-1.5 text-xs font-medium hover:bg-accent rounded-md flex items-center justify-between">
+              {getTranslations(`filter.operator.${operator}`, t)}
+              <ChevronDown className="size-3" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {availableOperators.map((op) => (
+              <DropdownMenuItem
+                key={op}
+                onClick={() => handleOperatorChange(op)}
+                className="text-xs"
+              >
+                {getTranslations(`filter.operator.${op}`, t)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+
+      <FilterInput
+        operator={operator}
+        value={value}
+        value2={value2}
+        columnMeta={meta}
+        onValueChange={handleValueChange}
+        onValue2Change={handleValue2Change}
+        onSliderChange={handleSliderChange}
+        onClear={handleClear}
+        t={t}
+        variant="inline"
+      />
+    </div>
+  );
+}

package/src/custom/master-data-grid/components/filters/multi-filter-dialog.tsx

@@ -1,90 +1,91 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@repo/ayasofyazilim-ui/components/tabs";
-import type { Table } from "@tanstack/react-table";
-
-import { useIsMobile } from "@repo/ayasofyazilim-ui/hooks/use-mobile";
-import { useState } from "react";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "../../../../components/drawer";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../../../../components/popover";
-import type { MasterDataGridConfig } from "../../types";
-import { getTranslations } from "../../utils/translation-utils";
-import { ClientFilterContent } from "./client-filter";
-import { ServerFilterContent } from "./server-filter";
-
-export interface BaseMultiFilterDialogProps<TData> {
-  table: Table<TData>;
-  config: MasterDataGridConfig<TData>;
-}
-interface MultiFilterDialogProps<TData>
-  extends BaseMultiFilterDialogProps<TData> {
-  children: React.ReactNode;
-}
-
-export function MultiFilterDialog<TData>({
-  table,
-  config,
-  children,
-}: MultiFilterDialogProps<TData>) {
-  const { t } = config;
-  const isMobile = useIsMobile();
-  const [open, setOpen] = useState(false);
-
-  const filterContent = (
-    <Tabs defaultValue="client">
-      {config.serverFilters && (
-        <TabsList>
-          <TabsTrigger value="client">{t?.["toolbar.client"]}</TabsTrigger>
-          <TabsTrigger value="server">{t?.["toolbar.server"]}</TabsTrigger>
-        </TabsList>
-      )}
-      <TabsContent value="client" className="w-full">
-        <ClientFilterContent setOpen={setOpen} table={table} config={config} />
-      </TabsContent>
-      <TabsContent
-        value="server"
-        className="w-full min-w-lg max-w-lg [&>fieldset]:p-0"
-      >
-        <ServerFilterContent table={table} config={config} />
-      </TabsContent>
-    </Tabs>
-  );
-
-  if (isMobile) {
-    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>{children}</DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>{getTranslations("filter.title", t)}</DrawerTitle>
-          </DrawerHeader>
-          <div className="px-4 pb-4 max-h-[70vh] overflow-y-auto">
-            {filterContent}
-          </div>
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>{children}</PopoverTrigger>
-      <PopoverContent className="w-auto max-w-3xl" align="end">
-        {filterContent}
-      </PopoverContent>
-    </Popover>
-  );
-}
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@ayasofyazilim/ui/components/tabs";
+import type { Table } from "@tanstack/react-table";
+
+import { useIsMobile } from "@ayasofyazilim/ui/hooks/use-mobile";
+import { useState } from "react";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "../../../../components/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../components/popover";
+import type { MasterDataGridConfig } from "../../types";
+import { getTranslations } from "../../utils/translation-utils";
+import { ClientFilterContent } from "./client-filter";
+import { ServerFilterContent } from "./server-filter";
+
+export interface BaseMultiFilterDialogProps<TData> {
+  table: Table<TData>;
+  config: MasterDataGridConfig<TData>;
+}
+interface MultiFilterDialogProps<
+  TData,
+> extends BaseMultiFilterDialogProps<TData> {
+  children: React.ReactNode;
+}
+
+export function MultiFilterDialog<TData>({
+  table,
+  config,
+  children,
+}: MultiFilterDialogProps<TData>) {
+  const { t } = config;
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+
+  const filterContent = (
+    <Tabs defaultValue="client">
+      {config.serverFilters && (
+        <TabsList>
+          <TabsTrigger value="client">{t?.["toolbar.client"]}</TabsTrigger>
+          <TabsTrigger value="server">{t?.["toolbar.server"]}</TabsTrigger>
+        </TabsList>
+      )}
+      <TabsContent value="client" className="w-full">
+        <ClientFilterContent setOpen={setOpen} table={table} config={config} />
+      </TabsContent>
+      <TabsContent
+        value="server"
+        className="w-full min-w-lg max-w-lg [&>fieldset]:p-0"
+      >
+        <ServerFilterContent table={table} config={config} />
+      </TabsContent>
+    </Tabs>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{children}</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>{getTranslations("filter.title", t)}</DrawerTitle>
+          </DrawerHeader>
+          <div className="px-4 pb-4 max-h-[70vh] overflow-y-auto">
+            {filterContent}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>{children}</PopoverTrigger>
+      <PopoverContent className="w-auto max-w-3xl" align="end">
+        {filterContent}
+      </PopoverContent>
+    </Popover>
+  );
+}