Customizable reference many count and improve stories to test it.

Author: Madeorsk

packages/ra-ui-materialui/src/field/ReferenceManyCount.stories.tsx

@@ -8,6 +8,12 @@ import {
 } from 'ra-core';
 
 import { ReferenceManyCount } from './ReferenceManyCount';
+import {
+    defaultDarkTheme,
+    defaultLightTheme,
+    ThemeProvider,
+    ThemesContext,
+} from '../theme';
 
 export default {
     title: 'ra-ui-materialui/fields/ReferenceManyCount',
@@ -26,27 +32,37 @@ const comments = [
     { id: 5, post_id: 2, is_published: false },
 ];
 
-export const Wrapper = ({ dataProvider, children }) => (
+export const Wrapper = ({ dataProvider, children, defaultTheme = 'light' }) => (
     <TestMemoryRouter>
-        <DataProviderContext.Provider value={dataProvider}>
-            <QueryClientProvider
-                client={
-                    new QueryClient({
-                        defaultOptions: {
-                            queries: {
-                                retry: false,
-                            },
-                        },
-                    })
-                }
-            >
-                <ResourceContextProvider value="posts">
-                    <RecordContextProvider value={post}>
-                        {children}
-                    </RecordContextProvider>
-                </ResourceContextProvider>
-            </QueryClientProvider>
-        </DataProviderContext.Provider>
+        <ThemesContext.Provider
+            value={{
+                lightTheme: defaultLightTheme,
+                darkTheme: defaultDarkTheme,
+                defaultTheme: defaultTheme as 'dark' | 'light',
+            }}
+        >
+            <ThemeProvider>
+                <DataProviderContext.Provider value={dataProvider}>
+                    <QueryClientProvider
+                        client={
+                            new QueryClient({
+                                defaultOptions: {
+                                    queries: {
+                                        retry: false,
+                                    },
+                                },
+                            })
+                        }
+                    >
+                        <ResourceContextProvider value="posts">
+                            <RecordContextProvider value={post}>
+                                {children}
+                            </RecordContextProvider>
+                        </ResourceContextProvider>
+                    </QueryClientProvider>
+                </DataProviderContext.Provider>
+            </ThemeProvider>
+        </ThemesContext.Provider>
     </TestMemoryRouter>
 );
 

packages/ra-ui-materialui/src/field/ReferenceManyCount.tsx

@@ -8,6 +8,11 @@ import {
     RaRecord,
 } from 'ra-core';
 import { Typography, TypographyProps, CircularProgress } from '@mui/material';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 import ErrorIcon from '@mui/icons-material/Error';
 
 import { FieldProps } from './types';
@@ -29,8 +34,13 @@ import { Link } from '../Link';
  * <ReferenceManyCount reference="comments" target="post_id" variant="h1" />
  */
 export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
-    props: ReferenceManyCountProps<RecordType>
+    inProps: ReferenceManyCountProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         reference,
         target,
@@ -72,29 +82,32 @@ export const ReferenceManyCount = <RecordType extends RaRecord = RaRecord>(
         total
     );
 
-    return link && record ? (
-        <Link
-            to={{
-                pathname: createPath({ resource: reference, type: 'list' }),
-                search: `filter=${JSON.stringify({
-                    ...(filter || {}),
-                    [target]: record[source],
-                })}`,
-            }}
-            variant="body2"
-            onClick={e => e.stopPropagation()}
-            {...sanitizeFieldRestProps(rest)}
-        >
-            {body}
-        </Link>
-    ) : (
-        <Typography
+    return (
+        <StyledTypography
             component="span"
             variant="body2"
             {...sanitizeFieldRestProps(rest)}
         >
-            {body}
-        </Typography>
+            {link && record ? (
+                <Link
+                    to={{
+                        pathname: createPath({
+                            resource: reference,
+                            type: 'list',
+                        }),
+                        search: `filter=${JSON.stringify({
+                            ...(filter || {}),
+                            [target]: record[source],
+                        })}`,
+                    }}
+                    onClick={e => e.stopPropagation()}
+                >
+                    {body}
+                </Link>
+            ) : (
+                body
+            )}
+        </StyledTypography>
     );
 };
 
@@ -112,3 +125,29 @@ export interface ReferenceManyCountProps<RecordType extends RaRecord = RaRecord>
     link?: boolean;
     timeout?: number;
 }
+
+const PREFIX = 'RaReferenceManyCount';
+
+const StyledTypography = styled(Typography, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<ReferenceManyCountProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}