@goplusvn/core 0.1.0 → 0.1.2

package/src/crud/components/crud-filters/text-filter.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import type { FilterConfig } from "../../../types";
+
+import { Input } from "../../../ui";
+import { Label } from "../../../ui/primitives/client";
+import { useCrudContext } from "../crud-provider";
+
+interface TextFilterProps {
+  filter: FilterConfig;
+  debounceMs?: number;
+}
+
+export function TextFilter({ filter, debounceMs = 300 }: TextFilterProps) {
+  const { filters, addFilter, removeFilter } = useCrudContext();
+  const currentFilter = filters.find((f) => f.name === filter.name);
+  const [value, setValue] = useState<string>(
+    (currentFilter?.value as string) || (filter.defaultValue as string) || "",
+  );
+  const isExternalUpdate = useRef(false);
+
+  useEffect(() => {
+    // Sync with context when filters change externally
+    const externalFilter = filters.find((f) => f.name === filter.name);
+    const externalValue = (externalFilter?.value as string) || "";
+    const currentValue = value || "";
+
+    if (externalValue !== currentValue) {
+      isExternalUpdate.current = true;
+      setValue(externalValue);
+    }
+  }, [filters, filter.name]);
+
+  // Debounced update filter
+  useEffect(() => {
+    // Skip debounce if this is an external update
+    if (isExternalUpdate.current) {
+      isExternalUpdate.current = false;
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      if (value.trim() === "") {
+        // Remove filter if empty
+        removeFilter(filter.name);
+      } else {
+        // Add or update filter
+        addFilter({
+          name: filter.name,
+          value: value,
+          operator: filter.operator || "contains",
+        });
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [
+    value,
+    filter.name,
+    filter.operator,
+    debounceMs,
+    addFilter,
+    removeFilter,
+  ]);
+
+  const handleChange = (newValue: string) => {
+    isExternalUpdate.current = false;
+    setValue(newValue);
+  };
+
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={filter.name}>{filter.label}</Label>
+      <Input
+        id={filter.name}
+        type="text"
+        placeholder={filter.label}
+        value={value}
+        onChange={(e) => handleChange(e.target.value)}
+        className="w-full"
+      />
+    </div>
+  );
+}