muffin-admin 8.5.6 → 9.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "8.5.6",
+  "version": "9.1.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -23,10 +23,12 @@
   },
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
+    "date-fns": "^4.1.0",
     "js-cookie": "^3.0.5",
     "ra-language-russian": "^4.14.2",
     "react": "^18.3.1",
     "react-admin": "^5.4.0",
+    "react-datepicker": "^8.1.0",
     "react-dom": "^18.3.1",
     "validator": "^13.12.0"
   },
@@ -38,6 +40,7 @@
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
+    "css-loader": "^7.1.2",
     "dotenv": "^16.4.5",
     "eslint": "^8",
     "eslint-config-prettier": "^9.1.0",
@@ -47,6 +50,7 @@
     "husky": "^9.0.11",
     "prettier": "^3.2",
     "prettier-plugin-organize-imports": "^3.2",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

package/src/MuffinAdmin.tsx

@@ -1,6 +1,7 @@
 import IconButton from "@mui/material/IconButton"
 import SvgIcon from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
+
 import Typography from "@mui/material/Typography"
 import {
   AdminContext,
@@ -27,11 +28,11 @@ export function MuffinAdmin(props: AdminProps) {
   const muffinI18nProvider = buildProvider(
     backendLocales
       ? Object.fromEntries(
-          Object.entries(muffinTranslations).map(([locale, messages]) => [
-            locale,
-            deepMerge({}, messages, backendLocales[locale], buildAdmin(["locale", locale]) || {}),
-          ])
-        )
+        Object.entries(muffinTranslations).map(([locale, messages]) => [
+          locale,
+          deepMerge({}, messages, backendLocales[locale], buildAdmin(["locale", locale]) || {}),
+        ])
+      )
       : muffinTranslations
   )
 

package/src/buildRA.tsx

@@ -36,7 +36,8 @@ import {
 } from "react-admin"
 
 import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from "./fields"
-import { FilterInput, FKInput, JsonInput, TimestampInput } from "./inputs"
+import { DateRangeFilter, Filter } from "./filters"
+import { FKInput, JsonInput, TimestampInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
   // Fields
@@ -68,7 +69,6 @@ const UI: Record<string, JSX.ElementType> = {
   BooleanInput,
   CheckboxGroupInput,
   DateInput,
-  FilterInput,
   DateTimeInput,
   FKInput,
   FileInput,
@@ -84,6 +84,10 @@ const UI: Record<string, JSX.ElementType> = {
   SelectInput,
   TextInput,
   TimestampInput,
+
+  // Filters
+  Filter,
+  DateRangeFilter,
 }
 
 export function buildRAComponent(name: string, props: any) {

package/src/filters/DateRangeFilter.tsx

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

package/src/{inputs/FilterInput.tsx → 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 FilterInput({ 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 FilterInput({ 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 FilterInput({ 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/filters/index.ts

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

package/src/index.tsx

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

package/src/inputs/DateRangeInput.tsx

@@ -0,0 +1,38 @@
+import TextField from "@mui/material/TextField"
+import { enGB, ru } from "date-fns/locale"
+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 = InputProps & {
+  value: [Date, Date]
+  onChange: (value: [Date, Date]) => void
+}
+
+export function DateRangeInput({ value, onChange, ...props }: TProps) {
+  const [startDate, endDate] = value
+  const locale = useLocale()
+  const { label, source, resource, isRequired } = props
+
+  return (
+    <DatePicker
+      withPortal
+      locale={locale}
+      selectsRange
+      endDate={endDate}
+      onChange={onChange}
+      startDate={startDate}
+      customInput={
+        <TextField
+          variant="outlined"
+          label={
+            <FieldTitle label={label} source={source} resource={resource} isRequired={isRequired} />
+          }
+        />
+      }
+    />
+  )
+}

package/src/inputs/index.ts

@@ -1,4 +1,3 @@
-export * from "./FilterInput"
 export * from "./FKInput"
 export * from "./JsonInput"
 export * from "./TimestampInput"

package/dist/inputs/FilterInput.d.ts

@@ -1 +0,0 @@
-export declare function FilterInput({ type, ...props }: any): import("react/jsx-runtime").JSX.Element;