@applica-software-guru/react-admin 1.5.346 → 1.5.348

package/package.json

@@ -108,5 +108,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.346"
+  "version": "1.5.348"
 }

package/src/components/ra-lists/Empty.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable filenames/match-regex */
-import { DropboxOutlined } from '@ant-design/icons';
 import { Box, SxProps, Typography, styled } from '@mui/material';
 import { useGetResourceLabel, useResourceContext, useResourceDefinition, useTranslate } from 'ra-core';
 import * as React from 'react';
 import { CreateButton } from '@/components/ra-buttons';
 import clsx from 'clsx';
+import { EmptyIcon, NotFoundIcon } from './icons';
 
 type EmptyProps = {
   /**
@@ -72,25 +72,31 @@ const Root = styled('span', {
   height: 'calc(100vh - 200px)',
   [`& .${EmptyClasses.message}`]: {
     textAlign: 'center',
-    opacity: theme.palette.mode === 'light' ? 0.5 : 0.8,
+    opacity: theme.palette.mode === 'light' ? 1 : 0.8,
     margin: '0 1em',
     color: theme.palette.mode === 'light' ? 'inherit' : theme.palette.text.primary
   },
-
   [`& .${EmptyClasses.icon}`]: {
     fontSize: '9em',
     marginTop: '16px',
     marginBottom: '16px'
   },
-
   [`& .${EmptyClasses.toolbar}`]: {
     textAlign: 'center'
   }
 }));
 
+function getEmptyIcon({ icon, className }: { icon?: React.ReactNode; className?: string }) {
+  if (icon !== undefined) return icon;
+  if (className?.includes('RaList-noResults')) {
+    return <NotFoundIcon className={EmptyClasses.icon} />;
+  }
+  return <EmptyIcon className={EmptyClasses.icon} />;
+}
+
 /**
- * The Empty component is used to display a message when the list is empty.
- * This component can be used only inside a List component.
+ * Mostra una pagina vuota per le liste senza risultati o senza dati.
+ * Da usare solo all'interno di un componente List.
  *
  * @example
  * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
@@ -98,19 +104,17 @@ const Root = styled('span', {
 function Empty({
   actions,
   className,
-  hasCreate: _hasCreate,
-  icon = <DropboxOutlined className={EmptyClasses.icon} />,
+  hasCreate: hasCreateProp,
+  icon,
   title,
   subtitle,
   sx,
   ...props
 }: EmptyProps): JSX.Element {
   const { hasCreate } = useResourceDefinition(props);
-  const canCreate = _hasCreate !== undefined ? _hasCreate : hasCreate;
+  const canCreate = hasCreateProp !== undefined ? hasCreateProp : hasCreate;
   const resource = useResourceContext(props);
-
   const translate = useTranslate();
-
   const getResourceLabel = useGetResourceLabel();
   const resourceName = resource
     ? translate(`resources.${resource}.forcedCaseName`, {
@@ -118,14 +122,13 @@ function Empty({
         _: getResourceLabel(resource, 0)
       })
     : translate('ra.empty.no_resource');
-
   const emptyMessage = translate('ra.page.empty', { name: resourceName });
   const inviteMessage = translate('ra.page.invite');
 
   return (
     <Root className={clsx(`${PREFIX}-root`, className)} sx={sx}>
       <Box className={EmptyClasses.message}>
-        {icon}
+        {getEmptyIcon({ icon, className })}
         <Typography variant="h4" paragraph>
           {title ||
             translate(`resources.${resource}.empty`, {
@@ -142,7 +145,7 @@ function Empty({
           ) : null)}
       </Box>
       <StyledToolbar className={EmptyClasses.toolbar}>
-        {actions || (canCreate ? <CreateButton disableFloatingButton /> : null)}
+        {actions || (canCreate ? <CreateButton variant="contained" size="medium" disableFloatingButton /> : null)}
       </StyledToolbar>
     </Root>
   );

package/src/components/ra-lists/List.tsx

@@ -121,10 +121,15 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
     '& .MuiButton-root': {
       margin: 0
     },
+
     '& .RaList-actions': {
       minHeight: 80,
       alignItems: 'center',
       padding: theme.spacing(2.5),
+      borderTopLeftRadius: `${theme.shape.borderRadius}px`,
+      borderTopRightRadius: `${theme.shape.borderRadius}px`,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
       [theme.breakpoints.down('sm')]: {
         flexDirection: 'row'
       },
@@ -193,10 +198,23 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      height: 'calc(100vh - 260px)'
+      height: 'calc(100vh - 260px)',
+      backgroundColor: theme.palette.background.paper,
+      border: '1px solid',
+      borderTop: 'none',
+      borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+      borderBottomLeftRadius: `${theme.shape.borderRadius}px`,
+      borderBottomRightRadius: `${theme.shape.borderRadius}px`
     }
   },
 
+  '& .RaList-noResults': {
+    backgroundColor: theme.palette.background.paper,
+    border: '1px solid',
+    borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+    borderRadius: `${theme.shape.borderRadius}px`
+  },
+
   '& .RaEmpty-toolbar': {
     margin: theme.spacing(2)
   }