muffin-admin 2.5.1 → 2.5.3

package/package.json

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

package/src/buttons/ActionButton.tsx

@@ -1,4 +1,3 @@
-import * as icons from "@mui/icons-material"
 import {
   Button,
   useListContext,
@@ -16,65 +15,80 @@ import { buildIcon, findBuilder } from "../utils"
 export function BulkActionButton({ label, icon, title, action }) {
   const resource = useResourceContext()
   const { selectedIds } = useListContext()
+  const [payloadActive, setPayloadActive] = useState(false)
+
+  const PayloadBuilder = findBuilder(["action", "payload", action])
+
   const refresh = useRefresh(),
     unselectAll = useUnselectAll(resource),
     notify = useNotify()
 
   const { mutate, isLoading } = useAction(action)
 
-  const onClick = () => {
+  const process = (payload) =>
     mutate(
-      {
-        action,
-        ids: selectedIds,
-      },
+      { ids: selectedIds, payload },
       {
         onSuccess: ({ data }) => {
           if (data && data.message) notify(data.message, { type: "success" })
-          refresh()
-          unselectAll()
+          if (data && data.redirectTo) window.location = data.redirectTo
+          else {
+            unselectAll()
+            refresh()
+          }
         },
         onError: (err) => {
           notify(typeof err === "string" ? err : err.message, { type: "error" })
         },
       }
     )
-  }
 
   return (
-    <Button label={label} title={title} onClick={onClick} disabled={isLoading}>
-      {buildIcon(icon)}
-    </Button>
+    <>
+      <Button
+        label={label}
+        title={title}
+        onClick={PayloadBuilder ? () => setPayloadActive(true) : process}
+        disabled={isLoading}
+      >
+        {buildIcon(icon)}
+      </Button>
+      {PayloadBuilder && (
+        <PayloadBuilder
+          active={payloadActive}
+          onHandle={(payload) => process(payload)}
+          onClose={() => setPayloadActive(false)}
+        />
+      )}
+    </>
   )
 }
 
-export function ActionButton(props) {
-  const { icon, label, title, action } = props
-
-  const [payload, setPayload] = useState(null)
+export function ActionButton({ icon, label, title, action }) {
   const [payloadActive, setPayloadActive] = useState(false)
 
   const record = useRecordContext()
-  const actionData = { record, payload }
   const { mutate, isLoading } = useAction(action)
 
   const PayloadBuilder = findBuilder(["action", "payload", action])
 
   const refresh = useRefresh(),
-    notify = useNotify(),
-    Icon = icons[icon]
+    notify = useNotify()
 
-  const process = () =>
-    mutate(actionData, {
-      onSuccess: ({ data }) => {
-        if (data && data.message) notify(data.message, { type: "success" })
-        if (data && data.redirectTo) window.location = data.redirectTo
-        else refresh()
-      },
-      onError: (err) => {
-        notify(typeof err === "string" ? err : err.message, { type: "error" })
-      },
-    })
+  const process = (payload) =>
+    mutate(
+      { record, payload },
+      {
+        onSuccess: ({ data }) => {
+          if (data && data.message) notify(data.message, { type: "success" })
+          if (data && data.redirectTo) window.location = data.redirectTo
+          else refresh()
+        },
+        onError: (err) => {
+          notify(typeof err === "string" ? err : err.message, { type: "error" })
+        },
+      }
+    )
 
   return (
     <>
@@ -84,16 +98,12 @@ export function ActionButton(props) {
         onClick={PayloadBuilder ? () => setPayloadActive(true) : process}
         disabled={isLoading}
       >
-        {Icon && <Icon />}
+        {buildIcon(icon)}
       </Button>
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onChange={(payload) => {
-            setPayloadActive(false)
-            setPayload(payload)
-            process()
-          }}
+          onHandle={(payload) => process(payload)}
           onClose={() => setPayloadActive(false)}
         />
       )}