muffin-admin 3.6.3 → 3.7.1

package/dist/types.d.ts

@@ -7,7 +7,7 @@ export type AdminAction = {
     label: string;
     title: string;
     icon: string;
-    action: string;
+    paths: string[];
     confirm?: string | false;
     schema?: AdminInput[];
 };

package/package.json

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

package/src/buildRA.tsx

@@ -90,8 +90,6 @@ export function buildRAComponent(name, props) {
     delete props.required
   }
 
-  props.fullWidth = props.fullWidth ?? true
-
   if (props.children) props.children = buildRA(props.children)[0]
 
   return <Item key={props.source} {...props} />

package/src/buttons/ActionButton.tsx

@@ -1,11 +1,13 @@
 import {
   Button,
-  Form,
+  FormGroupsProvider,
+  useAugmentedForm,
   useListContext,
   useRecordContext,
   useResourceContext,
   useTranslate,
 } from "react-admin"
+import { FormProvider } from "react-hook-form"
 
 import { useState } from "react"
 import { buildRA } from "../buildRA"
@@ -20,11 +22,12 @@ export type ActionPayloadProps = {
   onHandle: (payload: any) => void
 }
 
-export function ActionButton({ action, confirm, ...props }: AdminAction) {
+export function ActionButton({ paths, confirm, ...props }: AdminAction) {
   const translate = useTranslate()
   const record = useRecordContext()
   const confirmation = useConfirmation()
-  const { mutate, isPending } = useAction(action)
+  const path = paths.find((p) => p.includes("{id}")) || paths[paths.length - 1]
+  const { mutate, isPending } = useAction(path)
 
   const confirmMessage =
     typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
@@ -37,10 +40,11 @@ export function ActionButton({ action, confirm, ...props }: AdminAction) {
   return <ActionButtonBase {...props} isPending={isPending} onHandle={onHandle} />
 }
 
-export function BulkActionButton({ action, confirm, ...props }: AdminAction) {
+export function BulkActionButton({ paths, confirm, ...props }: AdminAction) {
   const translate = useTranslate()
   const { selectedIds } = useListContext()
-  const { mutate, isPending } = useAction(action)
+  const path = paths.find((p) => !p.includes("{id}")) || paths[0]
+  const { mutate, isPending } = useAction(path)
   const confirmation = useConfirmation()
 
   const confirmMessage =
@@ -54,29 +58,6 @@ export function BulkActionButton({ action, confirm, ...props }: AdminAction) {
   return <ActionButtonBase {...props} onHandle={onHandle} isPending={isPending} />
 }
 
-export function CommonPayload({ active, onClose, onHandle, schema, title }) {
-  const inputs = buildRA(schema)
-  const translate = useTranslate()
-  return (
-    <AdminModal
-      maxWidth="sm"
-      open={active}
-      onClose={onClose}
-      title={translate(title, { _: title })}
-    >
-      <Form
-        onSubmit={(data) => {
-          onClose()
-          onHandle(data)
-        }}
-      >
-        {inputs}
-        <PayloadButtons onClose={onClose} />
-      </Form>
-    </AdminModal>
-  )
-}
-
 function ActionButtonBase({
   label,
   title,
@@ -85,7 +66,7 @@ function ActionButtonBase({
   icon,
   schema,
   id,
-}: Omit<AdminAction, "action"> & {
+}: Omit<AdminAction, "paths"> & {
   isPending?: boolean
   onHandle: (payload?: any) => void
 }) {
@@ -120,3 +101,35 @@ function ActionButtonBase({
     </>
   )
 }
+
+export function CommonPayload({ active, onClose, onHandle, schema, title }) {
+  schema[0][1] = { ...schema[0][1], autoFocus: true }
+  const inputs = buildRA(schema)
+  const translate = useTranslate()
+  const { form, formHandleSubmit } = useAugmentedForm({
+    onSubmit: (data) => {
+      onClose()
+      onHandle(data)
+      form.reset()
+    },
+    record: {},
+  })
+
+  return (
+    <AdminModal
+      maxWidth="sm"
+      open={active}
+      onClose={onClose}
+      title={translate(title, { _: title })}
+    >
+      <FormProvider {...form}>
+        <FormGroupsProvider>
+          <form onSubmit={formHandleSubmit}>
+            {inputs}
+            <PayloadButtons onClose={onClose} />
+          </form>
+        </FormGroupsProvider>
+      </FormProvider>
+    </AdminModal>
+  )
+}

package/src/types.ts

@@ -8,7 +8,7 @@ export type AdminAction = {
   label: string
   title: string
   icon: string
-  action: string
+  paths: string[]
   confirm?: string | false
   schema?: AdminInput[]
 }
@@ -35,11 +35,11 @@ export type AdminResourceProps = {
   actions: AdminAction[]
   create: AdminInput[] | false
   edit:
-    | {
-        inputs: AdminInput[]
-        remove?: boolean
-      }
-    | false
+  | {
+    inputs: AdminInput[]
+    remove?: boolean
+  }
+  | false
   list: {
     limit: number
     limitMax: number