muffin-admin 9.1.2 → 9.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "9.1.2",
+  "version": "9.2.2",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",

package/src/buildRA.tsx

@@ -27,6 +27,7 @@ import {
   ReferenceManyField,
   required,
   RichTextField,
+  SearchInput,
   SelectArrayInput,
   SelectField,
   SelectInput,
@@ -36,7 +37,7 @@ import {
 } from "react-admin"
 
 import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from "./fields"
-import { DateRangeFilter, Filter } from "./filters"
+import { DateRangeFilter, Filter, SearchFilter } from "./filters"
 import { FKInput, JsonInput, TimestampInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
@@ -84,10 +85,12 @@ const UI: Record<string, JSX.ElementType> = {
   SelectInput,
   TextInput,
   TimestampInput,
+  SearchInput,
 
   // Filters
   Filter,
   DateRangeFilter,
+  SearchFilter,
 }
 
 export function buildRAComponent(name: string, props: any) {

package/src/filters/SearchFilter.tsx

@@ -0,0 +1,40 @@
+import SearchIcon from "@mui/icons-material/Search"
+import { InputAdornment } from "@mui/material"
+import clsx from "clsx"
+import debounce from "lodash/debounce"
+import { useTranslate } from "ra-core"
+import { useState } from "react"
+import { ResettableTextField, SearchInputProps, useInput, useResourceContext } from "react-admin"
+
+export function SearchFilter({ source, className, ...props }: SearchInputProps) {
+  const translate = useTranslate()
+  const { field } = useInput({ source, ...props })
+  const [searchValue, setSearchValue] = useState(field.value || "")
+  const resource = useResourceContext()
+
+  const onBlur = () => field.onChange(searchValue)
+  const label = translate(`resources.${resource}.fields.${source}`)
+
+  return (
+    <ResettableTextField
+      resettable
+      ref={field.ref}
+      value={searchValue}
+      onBlur={debounce(onBlur, 500)}
+      onChange={(e) => setSearchValue(e.target?.value ?? e)}
+      onKeyUp={(e) => {
+        if (e.key === "Enter") field.onChange(searchValue)
+      }}
+      placeholder={label}
+      {...props}
+      className={clsx("ra-input", `ra-input-${source}`, className)}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <SearchIcon color="disabled" />
+          </InputAdornment>
+        ),
+      }}
+    />
+  )
+}

package/src/filters/index.ts

@@ -1,2 +1,3 @@
 export * from "./DateRangeFilter"
 export * from "./Filter"
+export * from "./SearchFilter"

package/src/index.tsx

@@ -36,4 +36,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "9.1.2"
+export const VERSION = "9.2.2"