@applica-software-guru/react-admin 1.5.317 → 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.317"
+  "version": "1.5.319"
 }

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

@@ -1,10 +1,10 @@
 import { BulkActionsToolbar } from '@/components/ra-lists/BulkActionsToolbar';
 import { DatagridContextProvider } from '@/components/ra-lists/Datagrid/DatagridContextProvider';
-import { Table } from '@mui/material';
+import { Table, Typography } from '@mui/material';
 import clsx from 'clsx';
 import difference from 'lodash/difference';
 import union from 'lodash/union';
-import { Identifier, sanitizeListRestProps, useListContext } from 'ra-core';
+import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
 import { FC, cloneElement, createElement, isValidElement, useCallback, useEffect, useMemo, useRef } from 'react';
 import * as React from 'react';
 import {
@@ -14,10 +14,10 @@ import {
   DatagridHeader,
   DatagridLoading,
   DatagridRoot,
-  ListNoResults,
   PureDatagridBody,
   DatagridProps as RaDatagridProps
 } from 'react-admin';
+import { Empty } from '@/components/ra-lists/Empty';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
@@ -106,7 +106,7 @@ const Datagrid = React.forwardRef((props, ref) => {
     header = DatagridHeader,
     children,
     className,
-    empty = DefaultEmpty,
+    empty,
     expand,
     bulkActionsToolbar = false,
     bulkActionButtons = defaultBulkActionButtons,
@@ -123,6 +123,7 @@ const Datagrid = React.forwardRef((props, ref) => {
     ...rest
   } = props;
 
+  const translate = useTranslate();
   const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = useListContext(props);
   const hasBulkActions = !!bulkActionButtons !== false;
   const contextValue = useMemo(() => ({ isRowExpandable, expandSingle }), [isRowExpandable, expandSingle]);
@@ -165,6 +166,17 @@ const Datagrid = React.forwardRef((props, ref) => {
     [data, isRowSelectable, onSelect, onToggleItem, selectedIds]
   );
 
+  const DefaultEmpty = (
+    <Empty
+      sx={{ '& .ApplicaEmpty-icon': { fontSize: '7em' } }}
+      title={
+        <Typography variant="subtitle1" style={{ color: 'inherit' }} gutterBottom>
+          {translate('ra.navigation.no_results')}
+        </Typography>
+      }
+    />
+  );
+
   if (isLoading === true) {
     return (
       <DatagridLoading
@@ -183,11 +195,7 @@ const Datagrid = React.forwardRef((props, ref) => {
    * the Datagrid displays the empty component.
    */
   if (data == null || data.length === 0 || total === 0) {
-    if (empty) {
-      return empty;
-    }
-
-    return null;
+    return empty || DefaultEmpty;
   }
 
   /**
@@ -307,7 +315,5 @@ function sanitizeRestProps(props) {
 }
 Datagrid.displayName = 'Datagrid';
 
-const DefaultEmpty = <ListNoResults />;
-
 export { Datagrid };
 export type { DatagridProps };

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

@@ -1,9 +1,10 @@
 /* eslint-disable filenames/match-regex */
 import { DropboxOutlined } from '@ant-design/icons';
-import { Typography } from '@mui/material';
-import { 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 = {
   /**
@@ -23,12 +24,67 @@ type EmptyProps = {
    **/
   className?: string;
   hasCreate?: boolean;
+  /**
+   * The icon of the empty page.
+   *
+   * @example <DropboxOutlined />
+   * @example <DropboxOutlined style={{ fontSize: '9em' }} />
+   **/
+  icon?: React.ReactNode;
+  /**
+   * The title of the empty page.
+   *
+   * @example 'No data available'
+   * @example translate('ra_text')
+   **/
+  title?: string | React.ReactNode;
+  /**
+   * The subtitle of the empty page.
+   *
+   * @example 'Please add some data'
+   * @example translate('ra_text')
+   **/
+  subtitle?: string | React.ReactNode;
+  sx?: SxProps;
 };
 
 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.
@@ -36,7 +92,16 @@ const StyledToolbar = styled('div')(({ theme }) => ({
  * @example
  * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
  */
-function Empty({ actions, className, hasCreate: _hasCreate, ...props }: EmptyProps): JSX.Element {
+function Empty({
+  actions,
+  className,
+  hasCreate: _hasCreate,
+  icon = <DropboxOutlined className={EmptyClasses.icon} />,
+  title,
+  subtitle,
+  sx,
+  ...props
+}: EmptyProps): JSX.Element {
   const { hasCreate } = useResourceDefinition(props);
   const canCreate = _hasCreate ?? hasCreate;
   const resource = useResourceContext(props);
@@ -53,58 +118,30 @@ function Empty({ actions, className, hasCreate: _hasCreate, ...props }: EmptyPro
   const inviteMessage = translate('ra.page.invite');
 
   return (
-    <Root className={className}>
-      <div className={EmptyClasses.message}>
-        <DropboxOutlined className={EmptyClasses.icon} />
+    <Root className={clsx(`${PREFIX}-root`, className)} sx={sx}>
+      <Box className={EmptyClasses.message}>
+        {icon}
         <Typography variant="h4" paragraph>
-          {translate(`resources.${resource}.empty`, {
-            _: emptyMessage
-          })}
-        </Typography>
-        {canCreate ? (
-          <Typography variant="body1">
-            {translate(`resources.${resource}.invite`, {
-              _: inviteMessage
+          {title ||
+            translate(`resources.${resource}.empty`, {
+              _: emptyMessage
             })}
-          </Typography>
-        ) : null}
-      </div>
-
-      <StyledToolbar className={EmptyClasses.toolbar}>{actions}</StyledToolbar>
+        </Typography>
+        {subtitle ||
+          (canCreate ? (
+            <Typography variant="body1">
+              {translate(`resources.${resource}.invite`, {
+                _: inviteMessage
+              })}
+            </Typography>
+          ) : null)}
+      </Box>
+      <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'
-  },
-
-  [`& .${EmptyClasses.toolbar}`]: {
-    textAlign: 'center',
-    marginTop: '2em'
-  }
-}));
-
 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 };