Fix SimpleList items UI when linkType=false

marmelab · Nov 14, 2024 · 51c0426 · 51c0426
1 parent 3b95137
commit 51c0426
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 27 deletions.
diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState } from 'react';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import {
     Resource,
@@ -9,6 +10,7 @@ import {
 } from 'ra-core';
 import defaultMessages from 'ra-language-english';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
+import { Box, FormControlLabel, FormGroup, Switch } from '@mui/material';
 
 import { SimpleList } from './SimpleList';
 import { AdminUI } from '../../AdminUI';
@@ -149,15 +151,99 @@ export const FullApp = () => (
     </Wrapper>
 );
 
-export const LinkTypeFalse = () => (
-    <Wrapper>
-        <SimpleList
-            primaryText={record => record.title}
-            secondaryText={record => record.author}
-            linkType={false}
-        />
-    </Wrapper>
-);
+export const LinkTypeFalse = () => {
+    const [linkType, setLinkType] = useState<false | undefined>(false);
+    const [leftIcon, setLeftIcon] = useState(true);
+    const [leftAvatar, setLeftAvatar] = useState(true);
+    const [rightIcon, setRightIcon] = useState(true);
+    const [rightAvatar, setRightAvatar] = useState(true);
+    return (
+        <Wrapper>
+            <FormGroup
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                }}
+            >
+                <Box>
+                    <FormControlLabel
+                        control={
+                            <Switch
+                                checked={leftIcon}
+                                onChange={() => setLeftIcon(!leftIcon)}
+                            />
+                        }
+                        label="Left Icon"
+                    />
+                    <FormControlLabel
+                        control={
+                            <Switch
+                                checked={leftAvatar}
+                                onChange={() => setLeftAvatar(!leftAvatar)}
+                            />
+                        }
+                        label="Left Avatar"
+                    />
+                </Box>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={linkType === false}
+                            onChange={() =>
+                                setLinkType(
+                                    linkType === false ? undefined : false
+                                )
+                            }
+                        />
+                    }
+                    label="LinkType False"
+                />
+                <Box>
+                    <FormControlLabel
+                        control={
+                            <Switch
+                                checked={rightAvatar}
+                                onChange={() => setRightAvatar(!rightAvatar)}
+                            />
+                        }
+                        label="Right Avatar"
+                    />
+                    <FormControlLabel
+                        control={
+                            <Switch
+                                checked={rightIcon}
+                                onChange={() => setRightIcon(!rightIcon)}
+                            />
+                        }
+                        label="Right Icon"
+                    />
+                </Box>
+            </FormGroup>
+            <SimpleList
+                primaryText={record => record.title}
+                secondaryText={record => record.author}
+                linkType={linkType}
+                leftIcon={
+                    leftIcon ? record => <span>{record.id}</span> : undefined
+                }
+                rightIcon={
+                    rightIcon ? record => <span>{record.year}</span> : undefined
+                }
+                leftAvatar={
+                    leftAvatar
+                        ? record => <span>{record.title[0]}</span>
+                        : undefined
+                }
+                rightAvatar={
+                    rightAvatar
+                        ? record => <span>{record.author[0]}</span>
+                        : undefined
+                }
+            />
+        </Wrapper>
+    );
+};
 
 export const NoPrimaryText = () => (
     <Wrapper recordRepresentation="title">

diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.tsx
@@ -129,7 +129,14 @@ export const SimpleList = <RecordType extends RaRecord = any>(
         <Root className={className} {...sanitizeListRestProps(rest)}>
             {data.map((record, rowIndex) => (
                 <RecordContextProvider key={record.id} value={record}>
-                    <ListItem disablePadding>
+                    <ListItem
+                        disablePadding
+                        sx={{
+                            '.MuiListItem-container': {
+                                width: '100%',
+                            },
+                        }}
+                    >
                         <LinkOrNot
                             linkType={linkType}
                             resource={resource}
@@ -275,36 +282,20 @@ const LinkOrNot = (
         id,
         children,
         record,
-        sx,
         ...rest
     } = props;
     const createPath = useCreatePath();
     const type =
         typeof linkType === 'function' ? linkType(record, id) : linkType;
 
     if (type === false) {
-        return (
-            <ListItemText
-                // @ts-ignore
-                component="div"
-                sx={{
-                    px: 2,
-                    py: 1,
-                    m: 0,
-                    ...sx,
-                }}
-                {...rest}
-            >
-                {children}
-            </ListItemText>
-        );
+        return <ListItem {...rest}>{children}</ListItem>;
     }
     return (
         // @ts-ignore
         <ListItemButton
             component={Link}
             to={createPath({ resource, id, type })}
-            sx={sx}
             {...rest}
         >
             {children}