muffin-admin 6.1.2 → 6.2.0

package/dist/types.d.ts

@@ -2,7 +2,7 @@ export type TID = string | number;
 export type TProps = {
     [key: string]: any;
 };
-export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
+export type TAdminType = "action-form" | "admin" | "appbar" | "auth-provider" | "auth-storage-get" | "auth-storage-set" | "create" | "create-toolbar" | "create-inputs" | "dashboard" | "dashboard-actions" | "dashboard-content" | "data-provider" | "edit" | "edit-actions" | "edit-toolbar" | "edit-form-toolbar" | "edit-inputs" | "layout" | "list" | "list-actions" | "list-toolbar" | "list-grid" | "list-grid-buttons" | "list-filters" | "list-fields" | "locale" | "loginpage" | "resource" | "show" | "show-actions" | "show-toolbar" | "show-fields" | "show-links";
 export type TAdminPath = [type: TAdminType, ...ids: string[]];
 export type AdminAction = {
     view?: ("show" | "edit" | "list" | "bulk")[];

package/package.json

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

package/src/MuffinResource.tsx

@@ -7,15 +7,20 @@ export function MuffinResource({ name, ...props }: ResourceProps) {
   const opts = adminOpts?.resources.find((r) => r.name == name)
   if (!opts) return null
 
+  const Create = findBuilder(["create", name])
+  const Edit = findBuilder(["edit", name])
+  const List = findBuilder(["list", name])
+  const Show = findBuilder(["show", name])
+
   return (
     <Resource
       key={name}
       name={name}
       icon={findIcon(opts.icon)}
-      create={findBuilder(["create", name])}
-      edit={findBuilder(["edit", name])}
-      list={findBuilder(["list", name])}
-      show={findBuilder(["show", name])}
+      create={Create}
+      edit={Edit}
+      list={List}
+      show={Show}
       {...props}
     />
   )

package/src/MuffinResourceEdit.tsx

@@ -13,43 +13,56 @@ import {
 import { buildRA } from "./buildRA"
 import { ActionButton } from "./buttons"
 import { useMuffinAdminOpts, useMuffinResourceOpts } from "./hooks"
-import { buildAdmin, findBuilder, setupAdmin } from "./utils"
+import { findBuilder, setupAdmin } from "./utils"
 
 export function MuffinEdit({ children }: PropsWithChildren) {
   const {
     adminProps: { mutationMode = "optimistic" },
   } = useMuffinAdminOpts()
+
   const { edit, name } = useMuffinResourceOpts()
   if (!edit) return null
 
-  const { inputs, remove } = edit
-  const ActionsToolbar = findBuilder(["edit-toolbar", name])
+  const Actions = findBuilder(["edit-toolbar", name])
+  const Inputs = findBuilder(["edit-inputs", name])
+  const FormToolbar = findBuilder(["edit-form-toolbar", name])
 
   return (
-    <Edit actions={<ActionsToolbar />} mutationMode={mutationMode}>
+    <Edit actions={<Actions />} mutationMode={mutationMode}>
       {children}
-      <SimpleForm
-        toolbar={
-          <Toolbar>
-            <SaveButton />
-            {remove && (
-              <DeleteButton
-                sx={{
-                  marginLeft: "auto",
-                }}
-              />
-            )}
-          </Toolbar>
-        }
-      >
-        {buildAdmin(["edit-inputs", name], inputs)}
+      <SimpleForm toolbar={<FormToolbar />}>
+        <Inputs />
       </SimpleForm>
     </Edit>
   )
 }
 
 setupAdmin(["edit"], MuffinEdit)
-setupAdmin(["edit-inputs"], buildRA)
+
+export function MuffinEditFormToolbar() {
+  const { edit } = useMuffinResourceOpts()
+  if (!edit) return null
+
+  const { remove } = edit
+  return (
+    <Toolbar>
+      <SaveButton />
+      {remove && <DeleteButton sx={{ marginLeft: "auto" }} />}
+    </Toolbar>
+  )
+}
+
+setupAdmin(["edit-form-toolbar"], MuffinEditFormToolbar)
+
+export function MuffinEditInputs() {
+  const { edit } = useMuffinResourceOpts()
+  if (!edit) return null
+
+  const { inputs } = edit
+
+  return <>{buildRA(inputs)}</>
+}
+setupAdmin(["edit-inputs"], MuffinEditInputs)
 
 export function MuffinEditToolbar({ children }: PropsWithChildren) {
   const resource = useResourceContext()

package/src/MuffinResourceShow.tsx

@@ -8,17 +8,17 @@ import { buildAdmin, findBuilder, setupAdmin } from "./utils"
 
 export function MuffinShow({ children }: PropsWithChildren) {
   const { show, name } = useMuffinResourceOpts()
-  const ActionsToolbar = findBuilder(["show-toolbar", name])
+  const ShowToolbar = findBuilder(["show-toolbar", name])
 
   return (
-    <Show actions={<ActionsToolbar />}>
+    <Show actions={<ShowToolbar />}>
       {children}
       <SimpleShowLayout>{buildAdmin(["show-fields", name], show)}</SimpleShowLayout>
     </Show>
   )
 }
 
-setupAdmin(["show"], (props) => <MuffinShow {...props} />)
+setupAdmin(["show"], MuffinShow)
 setupAdmin(["show-fields"], ({ fields }) => buildRA(fields))
 
 export function MuffinShowToolbar({ children }: PropsWithChildren) {

package/src/buttons/ActionButton.tsx

@@ -103,7 +103,7 @@ function ActionButtonBase({
   const PayloadForm = findBuilder(["action-form", id, resource]) || (schema && CommonPayload)
   if (!PayloadForm)
     return (
-      <Button label={label} title={title} onClick={onHandle} disabled={isPending}>
+      <Button label={label} title={title} onClick={() => onHandle()} disabled={isPending}>
         {buildIcon(icon)}
       </Button>
     )
@@ -160,11 +160,11 @@ export function CommonPayload({
           title={
             help
               ? ((
-                  <Stack alignItems="flex-start">
-                    <span>{translate(title, { _: title })}</span>
-                    <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
-                  </Stack>
-                ) as any)
+                <Stack alignItems="flex-start">
+                  <span>{translate(title, { _: title })}</span>
+                  <HelpLink href={help} style={{ alignSelf: "flex-end" }} />
+                </Stack>
+              ) as any)
               : translate(title, { _: title })
           }
           actions={

package/src/types.ts

@@ -21,6 +21,7 @@ export type TAdminType =
   | "edit"
   | "edit-actions"
   | "edit-toolbar"
+  | "edit-form-toolbar"
   | "edit-inputs"
   | "layout"
   | "list"