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

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.318"
 }

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,11 @@ import {
   DatagridHeader,
   DatagridLoading,
   DatagridRoot,
-  ListNoResults,
   PureDatagridBody,
   DatagridProps as RaDatagridProps
 } from 'react-admin';
+import { Empty } from '@/components/ra-lists/Empty';
+import { DropboxOutlined } from '@ant-design/icons';
 
 const defaultBulkActionButtons = <BulkDeleteButton />;
 
@@ -106,7 +107,7 @@ const Datagrid = React.forwardRef((props, ref) => {
     header = DatagridHeader,
     children,
     className,
-    empty = DefaultEmpty,
+    empty,
     expand,
     bulkActionsToolbar = false,
     bulkActionButtons = defaultBulkActionButtons,
@@ -123,6 +124,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 +167,17 @@ const Datagrid = React.forwardRef((props, ref) => {
     [data, isRowSelectable, onSelect, onToggleItem, selectedIds]
   );
 
+  const DefaultEmpty = (
+    <Empty
+      icon={<DropboxOutlined style={{ fontSize: '7em', marginBottom: '16px' }} />}
+      title={
+        <Typography variant="subtitle1" style={{ color: 'inherit' }} gutterBottom>
+          {translate('ra.navigation.no_results')}
+        </Typography>
+      }
+    />
+  );
+
   if (isLoading === true) {
     return (
       <DatagridLoading
@@ -183,11 +196,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 +316,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, Typography } from '@mui/material';
+import { SxProps, styled } from '@mui/material/styles';
 import { useGetResourceLabel, useResourceContext, useResourceDefinition, useTranslate } from 'ra-core';
 import * as React from 'react';
+import { CreateButton } from '@/components/ra-buttons';
 
 type EmptyProps = {
   /**
@@ -23,6 +24,28 @@ 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 }) => ({
@@ -36,7 +59,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,24 +85,25 @@ 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={className} sx={sx}>
+      <Box className={EmptyClasses.message}>
+        {icon}
         <Typography variant="h4" paragraph>
-          {translate(`resources.${resource}.empty`, {
-            _: emptyMessage
-          })}
+          {title ||
+            translate(`resources.${resource}.empty`, {
+              _: emptyMessage
+            })}
         </Typography>
         {canCreate ? (
           <Typography variant="body1">
-            {translate(`resources.${resource}.invite`, {
-              _: inviteMessage
-            })}
+            {subtitle ||
+              translate(`resources.${resource}.invite`, {
+                _: inviteMessage
+              })}
           </Typography>
         ) : null}
-      </div>
-
-      <StyledToolbar className={EmptyClasses.toolbar}>{actions}</StyledToolbar>
+      </Box>
+      <StyledToolbar className={EmptyClasses.toolbar}>{(canCreate ? <CreateButton /> : null) || actions}</StyledToolbar>
     </Root>
   );
 }
@@ -97,12 +130,12 @@ const Root = styled('span', {
   },
 
   [`& .${EmptyClasses.icon}`]: {
-    fontSize: '9em'
+    fontSize: '9em',
+    marginBottom: '16px'
   },
 
   [`& .${EmptyClasses.toolbar}`]: {
-    textAlign: 'center',
-    marginTop: '2em'
+    textAlign: 'center'
   }
 }));