muffin-admin 9.0.0 → 9.1.0

package/package.json

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

package/src/filters/DateRangeFilter.tsx

@@ -1,7 +1,7 @@
-import { InputProps, useInput } from "react-admin"
+import { useInput } from "react-admin"
 import { DateRangeInput } from "../inputs/DateRangeInput"
 
-export function DateRangeFilter(props: InputProps) {
+export function DateRangeFilter(props) {
   const { field } = useInput(props)
 
   const onChange = (dates: [Date, Date]) => {
@@ -13,5 +13,5 @@ export function DateRangeFilter(props: InputProps) {
   if (!Array.isArray(filterValue)) filterValue = [null, null]
   const value = filterValue.map((d: string) => (d ? new Date(d) : d))
 
-  return <DateRangeInput value={value} onChange={onChange} />
+  return <DateRangeInput value={value} onChange={onChange} {...props} />
 }

package/src/filters/Filter.tsx

@@ -4,7 +4,7 @@ import Menu from "@mui/material/Menu"
 import MenuItem from "@mui/material/MenuItem"
 import TextField from "@mui/material/TextField"
 import { useState } from "react"
-import { useInput } from "react-admin"
+import { FieldTitle, InputProps, useInput } from "react-admin"
 
 const OPERATORS = {
   $eq: "=",
@@ -15,7 +15,7 @@ const OPERATORS = {
   $le: "≤",
 }
 
-export function Filter({ type = "text", ...props }: any) {
+export function Filter({ type = "text", ...props }: InputProps) {
   const { field } = useInput({
     format: (value: any) => (value ? value[Object.keys(value)[0]] : ""),
     ...props,
@@ -28,6 +28,8 @@ export function Filter({ type = "text", ...props }: any) {
 
   const [menuEl, setMenuEl] = useState(null)
   const open = Boolean(menuEl)
+  const { label, source, resource, isRequired } = props
+
   return (
     <>
       <FormGroup row sx={{ flexWrap: "nowrap" }}>
@@ -45,6 +47,9 @@ export function Filter({ type = "text", ...props }: any) {
           value={field.value}
           variant="outlined"
           type={type}
+          label={
+            <FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />
+          }
         />
       </FormGroup>
       <Menu open={open} onClose={() => setMenuEl(null)} anchorEl={menuEl}>

package/src/index.tsx

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

package/src/inputs/DateRangeInput.tsx

@@ -1,20 +1,22 @@
 import TextField from "@mui/material/TextField"
 import { enGB, ru } from "date-fns/locale"
-import { useLocale } from "react-admin"
+import { FieldTitle, InputProps, useLocale } from "react-admin"
 import DatePicker, { registerLocale } from "react-datepicker"
 import "react-datepicker/dist/react-datepicker.css"
 
 registerLocale("ru", ru)
 registerLocale("en", enGB)
 
-type TProps = {
+type TProps = InputProps & {
   value: [Date, Date]
   onChange: (value: [Date, Date]) => void
 }
 
-export function DateRangeInput({ value, onChange }: TProps) {
+export function DateRangeInput({ value, onChange, ...props }: TProps) {
   const [startDate, endDate] = value
   const locale = useLocale()
+  const { label, source, resource, isRequired } = props
+
   return (
     <DatePicker
       withPortal
@@ -23,7 +25,14 @@ export function DateRangeInput({ value, onChange }: TProps) {
       endDate={endDate}
       onChange={onChange}
       startDate={startDate}
-      customInput={<TextField variant="outlined" />}
+      customInput={
+        <TextField
+          variant="outlined"
+          label={
+            <FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />
+          }
+        />
+      }
     />
   )
 }