refine-mantine 1.3.5 → 1.5.0

package/dist/index.d.ts

@@ -130,7 +130,10 @@ type EditProps = RefineCrudEditProps<SaveButtonProps, DeleteButtonProps, GroupPr
 declare const Edit: React$1.FC<EditProps>;
 //#endregion
 //#region src/components/crud/List.d.ts
-type ListProps = RefineCrudListProps<CreateButtonProps, GroupProps, CardProps, GroupProps, BoxProps>;
+type ListProps = RefineCrudListProps<CreateButtonProps, GroupProps, CardProps, GroupProps, BoxProps, ListExtraProps>;
+interface ListExtraProps {
+  isLoading?: boolean;
+}
 declare const List: React$1.FC<ListProps>;
 //#endregion
 //#region src/components/crud/Show.d.ts

package/dist/index.js

@@ -801,7 +801,7 @@ const Edit = (props) => {
 //#endregion
 //#region src/components/crud/List.tsx
 const List = (props) => {
-	const { canCreate, children, createButtonProps: createButtonPropsFromProps, resource: resourceFromProps, wrapperProps, contentProps, headerProps, headerButtonProps, headerButtons: headerButtonsFromProps, breadcrumb: breadcrumbFromProps, title } = props;
+	const { canCreate, children, createButtonProps: createButtonPropsFromProps, resource: resourceFromProps, wrapperProps, contentProps, headerProps, headerButtonProps, headerButtons: headerButtonsFromProps, breadcrumb: breadcrumbFromProps, title, isLoading } = props;
 	const translate = useTranslate();
 	const { options: { breadcrumb: globalBreadcrumb } = {} } = useRefineContext();
 	const getUserFriendlyName = useUserFriendlyName();
@@ -821,27 +821,34 @@ const List = (props) => {
 	return /* @__PURE__ */ jsxs(Card, {
 		p: "md",
 		...wrapperProps,
-		children: [/* @__PURE__ */ jsxs(Group, {
-			justify: "space-between",
-			align: "center",
-			...headerProps,
-			children: [/* @__PURE__ */ jsxs(Stack, {
-				gap: "xs",
-				children: [breadcrumbComponent, title ?? /* @__PURE__ */ jsx(Title, {
-					order: 3,
-					className: RefinePageHeaderClassNames.Title,
-					children: translate(`${identifier}.titles.list`, getUserFriendlyName(resource?.meta?.label ?? identifier, "plural"))
+		children: [
+			/* @__PURE__ */ jsx(LoadingOverlay, {
+				visible: isLoading ?? false,
+				zIndex: 1e3
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				align: "center",
+				...headerProps,
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					gap: "xs",
+					children: [breadcrumbComponent, title ?? /* @__PURE__ */ jsx(Title, {
+						order: 3,
+						className: RefinePageHeaderClassNames.Title,
+						children: translate(`${identifier}.titles.list`, getUserFriendlyName(resource?.meta?.label ?? identifier, "plural"))
+					})]
+				}), /* @__PURE__ */ jsx(Group, {
+					gap: "xs",
+					...headerButtonProps,
+					children: headerButtons
 				})]
-			}), /* @__PURE__ */ jsx(Group, {
-				gap: "xs",
-				...headerButtonProps,
-				children: headerButtons
-			})]
-		}), /* @__PURE__ */ jsx(Box, {
-			pt: "sm",
-			...contentProps,
-			children
-		})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				pt: "sm",
+				...contentProps,
+				children
+			})
+		]
 	});
 };
 

package/package.json

@@ -93,5 +93,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.3.5"
+  "version": "1.5.0"
 }

package/src/components/crud/Empty.tsx

@@ -0,0 +1,45 @@
+import { Group, Stack, type StackProps, ThemeIcon, type ThemeIconProps, Title } from "@mantine/core";
+import { type TitleProps, useResourceParams, useTranslate, useUserFriendlyName } from "@refinedev/core";
+import { IconGhost3Filled, type ReactNode } from "@tabler/icons-react";
+import { CreateButton, type CreateButtonProps } from "../buttons/CreateButton";
+import { ImportButton, type ImportButtonProps } from "../buttons/ImportButton";
+
+interface EmptyProps {
+  createButtonProps?: CreateButtonProps;
+  icon?: ReactNode;
+  themeIconProps?: ThemeIconProps;
+  titleProps?: TitleProps;
+  importButtonProps?: ImportButtonProps;
+  stackProps?: StackProps;
+}
+
+export const Empty: React.FC<EmptyProps> = ({
+  stackProps,
+  icon,
+  themeIconProps,
+  titleProps,
+  createButtonProps,
+  importButtonProps,
+}) => {
+  const { resource, identifier } = useResourceParams();
+  const getUserFriendlyName = useUserFriendlyName();
+  const t = useTranslate();
+  const resourcePlural = getUserFriendlyName(identifier ?? "resource", "plural");
+
+  return (
+    <Stack align="center" gap="md" {...stackProps}>
+      <ThemeIcon variant="light" size="xl" {...themeIconProps}>
+        {icon ?? resource?.meta?.icon ?? <IconGhost3Filled />}
+      </ThemeIcon>
+      <Title order={4} {...titleProps}>
+        {t(`${identifier}.titles.list`, `No ${resourcePlural} Yet`)}
+      </Title>
+      <Group>
+        <CreateButton {...createButtonProps} />
+        {importButtonProps && (
+          <ImportButton {...importButtonProps} />
+        )}
+      </Group>
+    </Stack>
+  );
+}

package/src/components/crud/List.story.tsx

@@ -1,11 +1,12 @@
 import { ActionIcon, Avatar, Badge, Card, Group, Menu, SimpleGrid, Text } from "@mantine/core";
 import { useList } from "@refinedev/core";
-import { IconDots, IconEye, IconPencil, IconTrash } from "@tabler/icons-react";
-import { Default } from "../table/Table.story";
-import { List } from "./List";
+import { IconDots } from "@tabler/icons-react";
+import { DeleteButton } from "../buttons/DeleteButton";
 import { EditButton } from "../buttons/EditButton";
 import { ShowButton } from "../buttons/ShowButton";
-import { DeleteButton } from "../buttons/DeleteButton";
+import { Default as DefaultTableStory } from "../table/Table.story";
+import { Empty } from "./Empty";
+import { List } from "./List";
 
 export default {
   title: 'Crud/List',
@@ -23,7 +24,7 @@ interface UserRecord {
 }
 
 export const Cards = () => {
-  const { result } = useList<UserRecord>({
+  const { result, query: { isLoading } } = useList<UserRecord>({
     resource: "users",
     pagination: {
       pageSize: 100,
@@ -31,7 +32,7 @@ export const Cards = () => {
   });
 
   return (
-    <List resource="users">
+    <List resource="users" isLoading={isLoading}>
       <SimpleGrid cols={{
         xs: 1,
         sm: 3,
@@ -89,5 +90,13 @@ export const Cards = () => {
 export const Table = () => 
   // see Tables/Table for further details
   <List resource="products">
-    <Default />
+    <DefaultTableStory />
+  </List>;
+
+export const Loading = () =>
+  <List resource="products" isLoading />;
+
+export const EmptyList = () =>
+  <List resource="products">
+    <Empty />
   </List>;

package/src/components/crud/List.tsx

@@ -1,5 +1,5 @@
 import type { BoxProps, CardProps, GroupProps } from "@mantine/core";
-import { Box, Card, Group, Stack, Title } from "@mantine/core";
+import { Box, Card, Group, LoadingOverlay, Stack, Title } from "@mantine/core";
 import {
   useRefineContext,
   useResourceParams,
@@ -22,9 +22,14 @@ export type ListProps = RefineCrudListProps<
   GroupProps,
   CardProps,
   GroupProps,
-  BoxProps
+  BoxProps,
+  ListExtraProps
 >;
 
+interface ListExtraProps {
+  isLoading?: boolean;
+}
+
 export const List: React.FC<ListProps> = (props) => {
   const {
     canCreate,
@@ -38,6 +43,7 @@ export const List: React.FC<ListProps> = (props) => {
     headerButtons: headerButtonsFromProps,
     breadcrumb: breadcrumbFromProps,
     title,
+    isLoading,
   } = props;
   const translate = useTranslate();
   const { options: { breadcrumb: globalBreadcrumb } = {} } = useRefineContext();
@@ -81,6 +87,7 @@ export const List: React.FC<ListProps> = (props) => {
 
   return (
     <Card p="md" {...wrapperProps}>
+      <LoadingOverlay visible={isLoading ?? false} zIndex={1000} />
       <Group justify="space-between" align="center" {...headerProps}>
         <Stack gap="xs">
           {breadcrumbComponent}