muffin-admin 3.3.12 → 3.4.0

package/dist/types.d.ts

@@ -8,6 +8,7 @@ export type AdminAction = {
     title: string;
     icon: string;
     action: string;
+    confirm?: string | false;
 };
 export type AdminField = [string, {
     source: string;

package/package.json

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

package/src/MuffinAdmin.tsx

@@ -3,17 +3,19 @@ import SvgIcon from "@mui/material/SvgIcon"
 import Tooltip from "@mui/material/Tooltip"
 import Typography from "@mui/material/Typography"
 import {
-  Admin,
+  AdminContext,
   AdminProps,
+  AdminUI,
   AppBar,
   AppBarProps,
-  AuthProvider,
-  DataProvider,
+  defaultI18nProvider,
   Layout,
   LayoutProps,
+  localStorageStore,
   Login,
 } from "react-admin"
 
+import { ConfirmationProvider } from "./common"
 import { useMuffinAdminOpts } from "./hooks"
 import { buildAdmin, findBuilder, findIcon, setupAdmin } from "./utils"
 
@@ -22,22 +24,64 @@ export function MuffinAdmin(props: AdminProps) {
   const { resources = [], auth, adminProps, apiUrl } = opts
 
   document.title = adminProps?.title || "Muffin Admin"
-  const authProvider = findBuilder(["authprovider"])(auth) as AuthProvider
-  const dataProvider = findBuilder(["dataprovider"])(apiUrl) as DataProvider
+
+  const {
+    basename,
+    authProvider = findBuilder(["authprovider"])(auth),
+    dataProvider = findBuilder(["dataprovider"])(apiUrl),
+    catchAll,
+    dashboard = findBuilder(["dashboard"]),
+    disableTelemetry,
+    error,
+    i18nProvider = defaultI18nProvider,
+    layout = findBuilder(["layout"]),
+    loading,
+    loginPage = findBuilder(["loginpage"]),
+    authCallbackPage,
+    notification,
+    queryClient,
+    requireAuth = auth.required,
+    store = localStorageStore(),
+    ready,
+    theme,
+    lightTheme,
+    darkTheme,
+    defaultTheme,
+    title = "React Admin",
+  } = props
 
   return (
-    <Admin
-      requireAuth={auth.required}
+    <AdminContext
       authProvider={authProvider}
+      basename={basename}
       dataProvider={dataProvider}
-      layout={findBuilder(["layout"])}
-      loginPage={findBuilder(["loginpage"])}
-      dashboard={findBuilder(["dashboard"])}
-      darkTheme={{ palette: { mode: "dark" } }}
-      {...props}
+      i18nProvider={i18nProvider}
+      store={store}
+      queryClient={queryClient}
+      theme={theme}
+      lightTheme={lightTheme}
+      darkTheme={darkTheme}
+      defaultTheme={defaultTheme}
     >
-      {resources?.map(({ name }) => buildAdmin(["resource", name], { name }))}
-    </Admin>
+      <ConfirmationProvider>
+        <AdminUI
+          layout={layout}
+          dashboard={dashboard}
+          disableTelemetry={disableTelemetry}
+          catchAll={catchAll}
+          error={error}
+          title={title}
+          loading={loading}
+          loginPage={loginPage}
+          authCallbackPage={authCallbackPage}
+          notification={notification}
+          requireAuth={requireAuth}
+          ready={ready}
+        >
+          {resources?.map(({ name }) => buildAdmin(["resource", name], { name }))}
+        </AdminUI>
+      </ConfirmationProvider>
+    </AdminContext>
   )
 }
 

package/src/buttons/ActionButton.tsx

@@ -1,24 +1,51 @@
-import { Button, useListContext, useRecordContext, useResourceContext } from "react-admin"
+import {
+  Button,
+  useListContext,
+  useRecordContext,
+  useResourceContext,
+  useTranslate,
+} from "react-admin"
 
 import { useState } from "react"
+import { useConfirmation } from "../common"
 import { useAction } from "../hooks/useAction"
 import { AdminAction } from "../types"
 import { buildIcon, findBuilder } from "../utils"
 
-export function ActionButton({ icon, label, title, action, id }: AdminAction) {
-  const [payloadActive, setPayloadActive] = useState(false)
+export type ActionPayloadProps = {
+  active: boolean
+  onClose: () => void
+  onHandle: (payload: any) => void
+}
+
+export function ActionButton({ icon, label, title, action, id, confirm }: AdminAction) {
+  const translate = useTranslate()
   const record = useRecordContext()
   const resource = useResourceContext()
+  const confirmation = useConfirmation()
   const { mutate, isPending } = useAction(action, {})
 
+  const [payloadActive, setPayloadActive] = useState(false)
+  const [payloadResolver, setPayloadResolver] = useState<(data: any) => void>()
+
   const PayloadBuilder = findBuilder(["action", "payload", id, resource])
+  const buildPayload = PayloadBuilder
+    ? new Promise((resolve) => setPayloadResolver(() => resolve))
+    : Promise.resolve()
+  const confirmMessage =
+    typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
 
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => (PayloadBuilder ? setPayloadActive(true) : mutate({ record }))}
+        onClick={async () => {
+          if (PayloadBuilder) setPayloadActive(true)
+          const payload = await buildPayload
+          const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
+          if (process) await mutate({ record, payload })
+        }}
         disabled={isPending}
       >
         {buildIcon(icon)}
@@ -26,7 +53,7 @@ export function ActionButton({ icon, label, title, action, id }: AdminAction) {
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={(payload) => mutate({ record, payload })}
+          onHandle={payloadResolver}
           onClose={() => setPayloadActive(false)}
         />
       )}
@@ -34,20 +61,33 @@ export function ActionButton({ icon, label, title, action, id }: AdminAction) {
   )
 }
 
-export function BulkActionButton({ label, icon, title, action, id }: AdminAction) {
+export function BulkActionButton({ label, icon, title, action, id, confirm }: AdminAction) {
+  const translate = useTranslate()
   const { selectedIds } = useListContext()
   const { mutate, isPending } = useAction(action)
+  const confirmation = useConfirmation()
   const resource = useResourceContext()
   const [payloadActive, setPayloadActive] = useState(false)
+  const [payloadResolver, setPayloadResolver] = useState<(data: any) => void>()
 
   const PayloadBuilder = findBuilder(["action", "payload", id, resource])
+  const buildPayload = PayloadBuilder
+    ? new Promise((resolve) => setPayloadResolver(() => resolve))
+    : Promise.resolve()
+  const confirmMessage =
+    typeof confirm === "string" ? translate(confirm) : "Do you confirm this action?"
 
   return (
     <>
       <Button
         label={label}
         title={title}
-        onClick={() => (PayloadBuilder ? setPayloadActive(true) : mutate({ ids: selectedIds }))}
+        onClick={async () => {
+          if (PayloadBuilder) setPayloadActive(true)
+          const payload = await buildPayload
+          const process = confirm ? await confirmation.confirm({ message: confirmMessage }) : true
+          if (process) await mutate({ ids: selectedIds, payload })
+        }}
         disabled={isPending}
       >
         {buildIcon(icon)}
@@ -55,7 +95,7 @@ export function BulkActionButton({ label, icon, title, action, id }: AdminAction
       {PayloadBuilder && (
         <PayloadBuilder
           active={payloadActive}
-          onHandle={(payload) => mutate({ ids: selectedIds, payload })}
+          onHandle={payloadResolver}
           onClose={() => setPayloadActive(false)}
         />
       )}

package/src/common/AdminModal.tsx

@@ -0,0 +1,26 @@
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from "@mui/material"
+import { PropsWithChildren } from "react"
+
+interface IProps {
+  open: boolean
+  onClose: () => void
+  title?: string
+  actions?: React.ReactNode
+}
+
+export function AdminModal({
+  open,
+  onClose,
+  children,
+  title,
+  actions,
+  ...props
+}: PropsWithChildren<IProps & DialogProps>) {
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="md" {...props}>
+      {title && <DialogTitle>{title}</DialogTitle>}
+      <DialogContent>{children}</DialogContent>
+      {actions && <DialogActions>{actions}</DialogActions>}
+    </Dialog>
+  )
+}

package/src/common/ConfirmationProvider.tsx

@@ -0,0 +1,75 @@
+import { Button, Typography } from "@mui/material"
+import { createContext, PropsWithChildren, useContext, useState } from "react"
+import { useTranslate } from "react-admin"
+import { AdminModal } from "./AdminModal"
+
+type TConfirmProps = {
+  title?: string
+  message: string
+  actions?: React.ReactNode
+}
+
+type TConfirmContext = {
+  confirm: (props: TConfirmProps) => Promise<boolean>
+}
+
+export const ConfirmContext = createContext<TConfirmContext>({} as TConfirmContext)
+
+export function ConfirmationProvider({ children }: PropsWithChildren) {
+  const translate = useTranslate()
+  const [open, setOpen] = useState(false)
+  const [title, setTitle] = useState(translate("ra.message.are_you_sure"))
+  const [message, setMessage] = useState(null)
+  const [resolver, setResolve] = useState<null | ((value: boolean) => void)>(null)
+
+  function handleConfirm({ title, message }: TConfirmProps) {
+    setOpen(true)
+    if (title) setTitle(title)
+    if (message) setMessage(message)
+    return new Promise<boolean>((resolve) => {
+      setResolve(() => resolve)
+    })
+  }
+  const confirmContext = {
+    confirm: handleConfirm,
+  }
+  return (
+    <ConfirmContext.Provider value={confirmContext}>
+      {children}
+      <AdminModal
+        open={open}
+        onClose={() => setOpen(false)}
+        title={title}
+        maxWidth="xs"
+        actions={
+          <>
+            <Button
+              variant="contained"
+              onClick={() => {
+                setOpen(false)
+                resolver(true)
+              }}
+            >
+              {translate("ra.action.confirm")}
+            </Button>
+            <Button
+              variant="outlined"
+              onClick={() => {
+                setOpen(false)
+                resolver(false)
+              }}
+            >
+              {translate("ra.action.cancel")}
+            </Button>
+          </>
+        }
+      >
+        <Typography>{message}</Typography>
+      </AdminModal>
+    </ConfirmContext.Provider>
+  )
+}
+
+export const useConfirmation = () => {
+  return useContext(ConfirmContext)
+}

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export * from "./AdminModal"
+export * from "./ConfirmationProvider"

package/src/index.tsx

@@ -15,6 +15,7 @@ export * from "./actions"
 export * from "./authprovider"
 export * from "./buildRA"
 export * from "./buttons"
+export * from "./common"
 export * from "./context"
 export * from "./dataprovider"
 export * from "./fields"

package/src/types.ts

@@ -9,6 +9,7 @@ export type AdminAction = {
   title: string
   icon: string
   action: string
+  confirm?: string | false
 }
 
 export type AdminField = [string, { source: string }]