muffin-admin 13.1.1 → 13.2.0

package/dist/MuffinRecordList.d.ts

@@ -3,6 +3,10 @@ type TProps = {
     resource: string;
     filter: (record: any) => Record<string, any>;
     sort?: SortPayload;
+    highlightBy?: (record: any) => {
+        field: string;
+        value: string;
+    };
 };
-export declare function MuffinRecordList({ resource, filter, sort }: TProps): import("react").JSX.Element;
+export declare function MuffinRecordList({ resource, filter, sort, highlightBy }: TProps): import("react").JSX.Element;
 export {};

package/dist/MuffinRecordList.js

@@ -1,13 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { Datagrid, useGetList, useRecordContext, useTranslate } from "react-admin";
+import { Datagrid, useGetList, useRecordContext, useTheme, useTranslate, } from "react-admin";
 import { useMuffinResourceOpts } from "./hooks";
 import { buildAdmin } from "./utils";
-export function MuffinRecordList({ resource, filter, sort }) {
+export function MuffinRecordList({ resource, filter, sort, highlightBy }) {
     const record = useRecordContext();
+    const theme = useTheme()[0];
     const translate = useTranslate();
     const { list: { fields }, } = useMuffinResourceOpts(resource);
     const { data, isPending } = useGetList(resource, { sort, filter: filter(record) });
-    return (_jsxs(Box, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", children: translate(`resources.${resource}.name`, { smart_count: 2 }) }), _jsx(Datagrid, { resource: resource, bulkActionButtons: false, isPending: isPending, data: data, children: buildAdmin(["list-fields", resource], fields) })] }));
+    const rowSx = (row) => {
+        if (!highlightBy)
+            return {};
+        const { field, value } = highlightBy(record);
+        const selectColor = theme === "dark" ? "#646D7E" : "#B4CFEC";
+        return { backgroundColor: row[field] === value ? selectColor : "" };
+    };
+    return (_jsxs(Box, { sx: { p: 2 }, children: [_jsx(Typography, { variant: "h6", children: translate(`resources.${resource}.name`, { smart_count: 2 }) }), _jsx(Datagrid, { resource: resource, bulkActionButtons: false, isPending: isPending, data: data, rowSx: rowSx, children: buildAdmin(["list-fields", resource], fields) })] }));
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "13.1.1";
+export declare const VERSION = "13.2.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "13.1.1";
+export const VERSION = "13.2.0";

package/package.json

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

package/src/MuffinRecordList.tsx

@@ -1,6 +1,13 @@
 import Box from "@mui/material/Box"
 import Typography from "@mui/material/Typography"
-import { Datagrid, type SortPayload, useGetList, useRecordContext, useTranslate } from "react-admin"
+import {
+  Datagrid,
+  type SortPayload,
+  useGetList,
+  useRecordContext,
+  useTheme,
+  useTranslate,
+} from "react-admin"
 import { useMuffinResourceOpts } from "./hooks"
 import { buildAdmin } from "./utils"
 
@@ -8,20 +15,34 @@ type TProps = {
   resource: string
   filter: (record: any) => Record<string, any>
   sort?: SortPayload
+  highlightBy?: (record: any) => { field: string; value: string }
 }
-export function MuffinRecordList({ resource, filter, sort }: TProps) {
+export function MuffinRecordList({ resource, filter, sort, highlightBy }: TProps) {
   const record = useRecordContext()
+  const theme = useTheme()[0]
   const translate = useTranslate()
   const {
     list: { fields },
   } = useMuffinResourceOpts(resource)
   const { data, isPending } = useGetList(resource, { sort, filter: filter(record) })
+  const rowSx = (row: any) => {
+    if (!highlightBy) return {}
+    const { field, value } = highlightBy(record)
+    const selectColor = theme === "dark" ? "#646D7E" : "#B4CFEC"
+    return { backgroundColor: row[field] === value ? selectColor : "" }
+  }
   return (
     <Box sx={{ p: 2 }}>
       <Typography variant="h6">
         {translate(`resources.${resource}.name`, { smart_count: 2 })}
       </Typography>
-      <Datagrid resource={resource} bulkActionButtons={false} isPending={isPending} data={data}>
+      <Datagrid
+        resource={resource}
+        bulkActionButtons={false}
+        isPending={isPending}
+        data={data}
+        rowSx={rowSx}
+      >
         {buildAdmin(["list-fields", resource], fields)}
       </Datagrid>
     </Box>

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "13.1.1"
+export const VERSION = "13.2.0"