muffin-admin 11.2.10 → 11.3.0

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.10",
+  "version": "11.3.0",
   "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/FKField.tsx

@@ -1,4 +1,4 @@
-import { ReferenceField, TextField } from "react-admin"
+import { ReferenceField, TextField, useFieldValue, UseFieldValueOptions } from "react-admin"
 
 export function FKField({ reference, refSource, refKey, link, source, ...props }) {
   refKey = refKey || "id"
@@ -10,18 +10,22 @@ export function FKField({ reference, refSource, refKey, link, source, ...props }
       queryOptions={{ meta: { key: refKey } }}
       {...props}
     >
-      <>
-        <TextField source={refSource} />
-        {refSource !== refKey && (
-          <>
-            {" (#"}
-            <TextField source={refKey} />
-            {")"}
-          </>
-        )}
-      </>
+      <TextField source={refSource} />
+      {refSource !== refKey && <FKFieldValue source={refKey} />}
     </ReferenceField>
   )
 }
 
+function FKFieldValue(props: UseFieldValueOptions) {
+  const value = useFieldValue(props)
+  if (value === undefined) return null
+  return (
+    <>
+      {" (#"}
+      <TextField {...props} />
+      {")"}
+    </>
+  )
+}
+
 FKField.displayName = "FKField"

package/src/index.tsx

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

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> = {}