muffin-admin 2.3.13 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muffin-admin",
-  "version": "2.3.13",
+  "version": "2.5.0",
   "description": "NPM package for https://github.com/klen/muffin-admin",
   "files": [
     "src",
@@ -24,31 +24,32 @@
   "homepage": "https://github.com/klen/muffin-admin#readme",
   "dependencies": {
     "js-cookie": "^3.0.5",
-    "react": "^18.2.0",
-    "react-admin": "^4.12.2",
-    "react-dom": "^18.2.0",
-    "validator": "^13.9.0"
+    "react": "^18.3.1",
+    "react-admin": "^4.16.18",
+    "react-dom": "^18.3.1",
+    "validator": "^13.12.0"
   },
   "devDependencies": {
-    "@types/node": "20.5.0",
-    "@types/react": "18.2.20",
-    "@types/react-dom": "18.2.7",
-    "@types/react-window": "^1.8.5",
-    "@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",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
-    "webpack": "^5.88.2",
+    "@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": "^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",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "prettier": {
     "arrowParens": "always",

package/src/MuffinAdmin.tsx

@@ -3,15 +3,7 @@ import SvgIcon from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
 import Typography from "@mui/material/Typography"
 import createTheme from "@mui/material/styles/createTheme"
-import {
-  Admin,
-  AppBar,
-  DataProvider,
-  Layout,
-  Login,
-  ToggleThemeButton,
-  defaultTheme,
-} from "react-admin"
+import { Admin, AppBar, DataProvider, Layout, Login } from "react-admin"
 import { AdminOpts } from "./types"
 import { AdminPropsContext, buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
 
@@ -24,7 +16,6 @@ export function MuffinAdmin(props: AdminOpts) {
   const children = resources.map((resource) =>
     buildAdmin(["resource", resource.name], {
       ...resource,
-      key: resource.name,
     })
   )
 
@@ -43,7 +34,6 @@ export function MuffinAdmin(props: AdminOpts) {
           overflow: "hidden",
         }}
       />
-      <ToggleThemeButton lightTheme={defaultTheme} darkTheme={darkTheme} />
       {appBarLinks.map((info) => (
         <Tooltip key={info.url} title={info.title}>
           <IconButton color="inherit" href={info.url}>
@@ -63,6 +53,7 @@ export function MuffinAdmin(props: AdminOpts) {
         layout={(props) => <Layout {...props} appBar={appBar} />}
         loginPage={findBuilder(["loginpage"])}
         requireAuth={auth.required}
+        darkTheme={{ palette: { mode: "dark" } }}
       >
         {children}
       </Admin>

package/src/MuffinResource.tsx

@@ -13,6 +13,7 @@ export function MuffinResource({
 }: AdminResourceProps) {
   return (
     <Resource
+      key={name}
       name={name}
       icon={findIcon(icon)}
       create={createProps ? buildAdmin(["create", name], createProps) : undefined}

package/src/buttons/ActionButton.tsx

@@ -1,4 +1,5 @@
 import * as icons from "@mui/icons-material"
+import { Box, Modal } from "@mui/material"
 import {
   Button,
   useListContext,
@@ -9,8 +10,9 @@ import {
   useUnselectAll,
 } from "react-admin"
 
+import { useState } from "react"
 import { useAction } from "../hooks/useAction"
-import { buildIcon } from "../utils"
+import { buildIcon, findBuilder, setupAdmin } from "../utils"
 
 export function BulkActionButton({ label, icon, title, action }) {
   const resource = useResourceContext()
@@ -19,10 +21,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 +43,59 @@ 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
+          onChange={(payload) => {
+            setPayload(payload)
+            process()
+          }}
+          active={payloadActive}
+        />
+      )}
+    </>
   )
 }

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/fields/AvatarField.tsx

@@ -24,6 +24,3 @@ export function AvatarField({ source, alt, style, nameProp, ...props }) {
 }
 
 AvatarField.displayName = "AvatarField"
-AvatarField.defaultProps = {
-  addLabel: true,
-}

package/src/fields/FKField.tsx

@@ -20,6 +20,3 @@ export function FKField({ reference, refSource, refKey, link, source, ...props }
 }
 
 FKField.displayName = "FKField"
-FKField.defaultProps = {
-  addLabel: true,
-}

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>
   )