muffin-admin 2.4.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -27,23 +27,24 @@
     "react": "^18.3.1",
     "react-admin": "^4.16.18",
     "react-dom": "^18.3.1",
-    "validator": "^13.9.0"
+    "validator": "^13.12.0"
   },
   "devDependencies": {
     "@types/node": "20.14.2",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
-    "@typescript-eslint/parser": "^6.4.0",
-    "dotenv": "^16.3.1",
-    "eslint": "8.47.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "html-webpack-plugin": "^5.5.3",
-    "husky": "^8.0.1",
-    "prettier": "^3.0.2",
-    "prettier-plugin-organize-imports": "^3.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "dotenv": "^16.4.5",
+    "eslint": "^8",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.2",
+    "html-webpack-plugin": "^5.6.0",
+    "husky": "^9.0.11",
+    "prettier": "^3.2",
+    "prettier-plugin-organize-imports": "^3.2",
     "ts-loader": "^9.5.1",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",

package/src/buttons/ActionButton.tsx

@@ -9,8 +9,9 @@ import {
   useUnselectAll,
 } from "react-admin"
 
+import { useState } from "react"
 import { useAction } from "../hooks/useAction"
-import { buildIcon } from "../utils"
+import { buildIcon, findBuilder } from "../utils"
 
 export function BulkActionButton({ label, icon, title, action }) {
   const resource = useResourceContext()
@@ -19,10 +20,10 @@ export function BulkActionButton({ label, icon, title, action }) {
     unselectAll = useUnselectAll(resource),
     notify = useNotify()
 
-  const mutation = useAction(resource, action)
+  const { mutate, isLoading } = useAction(action)
 
   const onClick = () => {
-    mutation.mutate(
+    mutate(
       {
         action,
         ids: selectedIds,
@@ -41,42 +42,61 @@ export function BulkActionButton({ label, icon, title, action }) {
   }
 
   return (
-    <Button label={label} title={title} onClick={onClick} disabled={mutation.isLoading}>
+    <Button label={label} title={title} onClick={onClick} disabled={isLoading}>
       {buildIcon(icon)}
     </Button>
   )
 }
 
 export function ActionButton(props) {
-  const { icon, label, title, resource, action } = props
+  const { icon, label, title, action } = props
+
+  const [payload, setPayload] = useState(null)
+  const [payloadActive, setPayloadActive] = useState(false)
+
   const record = useRecordContext()
-  const { mutate, isLoading } = useAction(resource, action)
+  const actionData = { record, payload }
+  const { mutate, isLoading } = useAction(action)
+
+  const PayloadBuilder = findBuilder(["action", "payload", action])
 
   const refresh = useRefresh(),
     notify = useNotify(),
     Icon = icons[icon]
 
-  const onClick = () => {
-    mutate(
-      { record },
-      {
-        onSuccess: ({ data }) => {
-          refresh()
-          if (data && data.redirectTo) window.location = data.redirectTo
-          if (data && data.message) notify(data.message, { type: "success" })
-        },
-        onError: (err) => {
-          notify(typeof err === "string" ? err : err.message, {
-            type: "error",
-          })
-        },
-      }
-    )
-  }
+  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" })
+      },
+    })
 
   return (
-    <Button label={label} title={title} onClick={onClick} disabled={isLoading}>
-      {Icon && <Icon />}
-    </Button>
+    <>
+      <Button
+        label={label}
+        title={title}
+        onClick={PayloadBuilder ? () => setPayloadActive(true) : process}
+        disabled={isLoading}
+      >
+        {Icon && <Icon />}
+      </Button>
+      {PayloadBuilder && (
+        <PayloadBuilder
+          active={payloadActive}
+          onChange={(payload) => {
+            setPayloadActive(false)
+            setPayload(payload)
+            process()
+          }}
+          onClose={() => setPayloadActive(false)}
+        />
+      )}
+    </>
   )
 }

package/src/dataprovider.ts

@@ -75,7 +75,7 @@ export function MuffinDataprovider({ apiUrl }: AdminOpts) {
       return await methods.getList(resource, { filter, ...opts })
     },
 
-    runAction: async (resource, action, props) => {
+    runAction: async (resource: string, action: string, props: TActionProps) => {
       const { payload, ids, record } = props
       action = action.replace(/^\/+/, "")
       if (record) {
@@ -92,4 +92,9 @@ export function MuffinDataprovider({ apiUrl }: AdminOpts) {
   return methods
 }
 
+export type TActionProps = {
+  payload?: any
+  ids?: string[]
+  record: any
+}
 setupAdmin(["dataprovider"], MuffinDataprovider)

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useAction'

package/src/hooks/useAction.ts

@@ -1,9 +1,11 @@
-import { useDataProvider } from "react-admin"
+import { useDataProvider, useResourceContext } from "react-admin"
 import { useMutation } from "react-query"
+import { TActionProps } from "../dataprovider"
 
-export function useAction(resource, action) {
+export function useAction(action) {
   const dataProvider = useDataProvider()
-  return useMutation<{ data: any }, { message: string } | string, any>((params: any) =>
+  const resource = useResourceContext()
+  return useMutation<{ data: any }, { message: string } | string, any>((params: TActionProps) =>
     dataProvider.runAction(resource, action, params)
   )
 }

package/src/index.tsx

@@ -14,6 +14,7 @@ export * from "./buildRA"
 export * from "./buttons"
 export * from "./dataprovider"
 export * from "./fields"
+export * from "./hooks"
 export * from "./types"
 export * from "./utils"
 

package/src/inputs/FKInput.tsx

@@ -16,7 +16,7 @@ export function FKInput({ refKey, refSource, fullWidth, reference, source, ...pr
   }
 
   return (
-    <ReferenceInput reference={reference} source={source} {...props}>
+    <ReferenceInput reference={reference} source={source}>
       <AutocompleteInput source={refKey} optionText={renderText} fullWidth={fullWidth} {...props} />
     </ReferenceInput>
   )