muffin-admin 11.2.11 → 11.3.1

package/dist/utils.d.ts

@@ -13,7 +13,7 @@ export type APIParams = {
     };
     data?: any;
     headers?: any;
-    body?: string;
+    body?: any;
 };
 export declare const requestHeaders: Record<string, string>;
 export declare function makeRequest(url: string, params?: APIParams): Promise<{

package/package.json

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

package/src/buildRA.tsx

@@ -38,7 +38,7 @@ import {
 
 import { AvatarField, CopyField, EditableBooleanField, FKField, JsonField } from "./fields"
 import { DateRangeFilter, Filter, SearchFilter } from "./filters"
-import { FKInput, JsonInput, TimestampInput } from "./inputs"
+import { FKInput, ImgInput, JsonInput, TimestampInput } from "./inputs"
 
 const UI: Record<string, JSX.ElementType> = {
   // Fields
@@ -74,6 +74,7 @@ const UI: Record<string, JSX.ElementType> = {
   FKInput,
   FileInput,
   ImageInput,
+  ImgInput,
   JsonInput,
   NullableBooleanInput,
   NumberInput,
@@ -81,11 +82,11 @@ const UI: Record<string, JSX.ElementType> = {
   RadioButtonGroupInput,
   ReferenceArrayInput,
   ReferenceInput,
+  SearchInput,
   SelectArrayInput,
   SelectInput,
   TextInput,
   TimestampInput,
-  SearchInput,
 
   // Filters
   Filter,

package/src/dataprovider.ts

@@ -60,15 +60,15 @@ export function MuffinDataprovider(apiUrl: string) {
 
     create: async (resource: string, { data }) => {
       return await request(resource, {
-        data,
         method: "POST",
+        ...prepareDataParams(data),
       })
     },
 
     update: async (resource: string, { id, data }: { id: TID; data: any }) => {
       return await makeRequest(`${apiUrl}/${resource}/${id}`, {
-        data,
         method: "PUT",
+        ...prepareDataParams(data),
       }).then(({ json }) => ({ data: json }))
     },
 
@@ -125,3 +125,26 @@ export type TActionProps<T = any> = {
   record?: T
 }
 setupAdmin(["data-provider"], MuffinDataprovider)
+
+function isFileValue(value: any): boolean {
+  return value && typeof value === "object" && value.rawFile instanceof File
+}
+
+function prepareDataParams(data: Record<string, any>) {
+  const hasFiles = Object.values(data).some(isFileValue)
+
+  if (!hasFiles) return { data }
+
+  const formData = new FormData()
+  for (const key in data) {
+    const value = data[key]
+    if (isFileValue(value)) {
+      formData.append(key, value.rawFile)
+    } else if (typeof value === "object" && value !== null) {
+      formData.append(key, JSON.stringify(value))
+    } else if (value !== undefined && value !== null) {
+      formData.append(key, value)
+    }
+  }
+  return { body: formData }
+}

package/src/fields/AvatarField.tsx

@@ -1,12 +1,25 @@
 import Avatar from "@mui/material/Avatar"
+import CircularProgress from "@mui/material/CircularProgress"
 import get from "lodash/get"
 import { useRecordContext } from "ra-core"
 
 export function AvatarField({ source, alt, style, nameProp, ...props }) {
   const record = useRecordContext(props)
-  const value = get(record, source),
+  let value = get(record, source),
     name = record[nameProp]
 
+  // Check value is a valid URL
+  if (value) {
+    try {
+      new URL(value);
+    } catch {
+      // Not a valid URL, return loader
+      return (
+        <CircularProgress size={24} />
+      )
+    }
+  }
+
   const letters = name
     ? name
       .trim(" ")

package/src/index.tsx

@@ -37,4 +37,4 @@ export async function initAdmin(prefix = "", containerId: string = "root") {
   )
 }
 
-export const VERSION = "11.2.11"
+export const VERSION = "11.3.1"

package/src/inputs/ImgInput.tsx

@@ -0,0 +1,24 @@
+import { startCase } from "lodash"
+import { ImageField, ImageInput, RecordContext, useInput, useRecordContext } from "react-admin"
+
+export function ImgInput({ source, label, ...props }) {
+  const { field } = useInput({ source })
+  label = label || field.name
+
+  return (
+    <ImageInput source={source} label={startCase(label || field.name)} {...props}>
+      <PreviewImage />
+    </ImageInput>
+  )
+}
+
+function PreviewImage() {
+  const value = useRecordContext()
+  const source = value?.src || value
+
+  return (
+    <RecordContext.Provider value={{ source }}>
+      <ImageField source="source" title="source" />
+    </RecordContext.Provider>
+  )
+}

package/src/inputs/index.ts

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

package/src/utils.tsx

@@ -40,7 +40,7 @@ export type APIParams = {
   }
   data?: any
   headers?: any
-  body?: string
+  body?: any
 }
 
 export const requestHeaders: Record<string, string> = {}