@applica-software-guru/react-admin 1.5.318 → 1.5.319

package/package.json

@@ -107,5 +107,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.318"
+  "version": "1.5.319"
 }

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

@@ -18,7 +18,6 @@ import {
   DatagridProps as RaDatagridProps
 } from 'react-admin';
 import { Empty } from '@/components/ra-lists/Empty';
-import { DropboxOutlined } from '@ant-design/icons';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
@@ -169,7 +168,7 @@ const Datagrid = React.forwardRef((props, ref) => {
 
   const DefaultEmpty = (
     <Empty
-      icon={<DropboxOutlined style={{ fontSize: '7em', marginBottom: '16px' }} />}
+      sx={{ '& .ApplicaEmpty-icon': { fontSize: '7em' } }}
       title={
         <Typography variant="subtitle1" style={{ color: 'inherit' }} gutterBottom>
           {translate('ra.navigation.no_results')}

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

@@ -1,10 +1,10 @@
 /* eslint-disable filenames/match-regex */
 import { DropboxOutlined } from '@ant-design/icons';
-import { Box, Typography } from '@mui/material';
-import { SxProps, styled } from '@mui/material/styles';
+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';
 
 type EmptyProps = {
   /**
@@ -52,6 +52,39 @@ const StyledToolbar = styled('div')(({ theme }) => ({
   padding: theme.spacing(2)
 }));
 
+const PREFIX = 'ApplicaEmpty';
+
+const EmptyClasses = {
+  message: `${PREFIX}-message`,
+  icon: `${PREFIX}-icon`,
+  toolbar: `${PREFIX}-toolbar`
+};
+
+const Root = styled('span', {
+  name: PREFIX,
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({ theme }) => ({
+  flex: 1,
+  height: 'calc(100vh - 200px)',
+  [`& .${EmptyClasses.message}`]: {
+    textAlign: 'center',
+    opacity: theme.palette.mode === 'light' ? 0.5 : 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'
+  }
+}));
+
 /**
  * The Empty component is used to display a message when the list is empty.
  * This component can be used only inside a List component.
@@ -85,7 +118,7 @@ function Empty({
   const inviteMessage = translate('ra.page.invite');
 
   return (
-    <Root className={className} sx={sx}>
+    <Root className={clsx(`${PREFIX}-root`, className)} sx={sx}>
       <Box className={EmptyClasses.message}>
         {icon}
         <Typography variant="h4" paragraph>
@@ -94,50 +127,21 @@ function Empty({
               _: emptyMessage
             })}
         </Typography>
-        {canCreate ? (
-          <Typography variant="body1">
-            {subtitle ||
-              translate(`resources.${resource}.invite`, {
+        {subtitle ||
+          (canCreate ? (
+            <Typography variant="body1">
+              {translate(`resources.${resource}.invite`, {
                 _: inviteMessage
               })}
-          </Typography>
-        ) : null}
+            </Typography>
+          ) : null)}
       </Box>
-      <StyledToolbar className={EmptyClasses.toolbar}>{(canCreate ? <CreateButton /> : null) || actions}</StyledToolbar>
+      <StyledToolbar className={EmptyClasses.toolbar}>
+        {(canCreate ? <CreateButton disableFloatingButton /> : null) || actions}
+      </StyledToolbar>
     </Root>
   );
 }
 
-const PREFIX = 'ApplicaEmpty';
-
-const EmptyClasses = {
-  message: `${PREFIX}-message`,
-  icon: `${PREFIX}-icon`,
-  toolbar: `${PREFIX}-toolbar`
-};
-
-const Root = styled('span', {
-  name: PREFIX,
-  overridesResolver: (_, styles) => styles.root
-})(({ theme }) => ({
-  flex: 1,
-  height: 'calc(100vh - 200px)',
-  [`& .${EmptyClasses.message}`]: {
-    textAlign: 'center',
-    opacity: theme.palette.mode === 'light' ? 0.5 : 0.8,
-    margin: '0 1em',
-    color: theme.palette.mode === 'light' ? 'inherit' : theme.palette.text.primary
-  },
-
-  [`& .${EmptyClasses.icon}`]: {
-    fontSize: '9em',
-    marginBottom: '16px'
-  },
-
-  [`& .${EmptyClasses.toolbar}`]: {
-    textAlign: 'center'
-  }
-}));
-
 export { Empty, EmptyClasses };
 export type { EmptyProps };

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

@@ -181,12 +181,19 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
         paddingTop: 0,
         paddingBottom: 0
       },
-      // Resolve a defect related to the usage of AntDesin icons with Mantis and React-Admin.
+      // Resolve a defect related to the usage of AntDesign icons with Mantis and React-Admin.
       // These two lines are not needed if you are not using AntDesign icons.
       '& .icon span': {
         top: -1,
         left: -1
       }
+    },
+    '& .ApplicaEmpty-root': {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: 'calc(100vh - 260px)'
     }
   },
 

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

@@ -1,13 +1,21 @@
-import { styled } from '@mui/material/styles';
-import { SimpleList as RaSimpleList } from 'react-admin';
+import { SimpleList as RaSimpleList, SimpleListProps, useTranslate } from 'react-admin';
+import { Empty } from '@/components/ra-lists/Empty';
+import { Typography } from '@mui/material';
 
-const SimpleList = styled(RaSimpleList, {
-  name: 'ApplicaSimpleList',
-  slot: 'root'
-})(({ theme }) => ({
-  padding: theme.spacing(1),
-  paddingTop: 0,
-  paddingBottom: 0
-}));
+function SimpleList({ empty, ...props }: SimpleListProps): JSX.Element {
+  const translate = useTranslate();
+  const DefaultEmpty = (
+    <Empty
+      sx={{ '& .ApplicaEmpty-icon': { fontSize: '7em' } }}
+      title={
+        <Typography variant="subtitle1" style={{ color: 'inherit' }} gutterBottom>
+          {translate('ra.navigation.no_results')}
+        </Typography>
+      }
+    />
+  );
+
+  return <RaSimpleList {...props} empty={empty || DefaultEmpty} />;
+}
 
 export { SimpleList };