@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -1,3 +1,10 @@
+import { useAppConfig } from '@/components/AppStateProvider';
+import { Toolbar } from '@/components/ra-forms';
+import ContentAdd from '@mui/icons-material/Add';
+import { Dialog, Fab, useMediaQuery } from '@mui/material';
+import { SxProps, Theme, styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import {
   Button,
   CreateButtonClasses,
@@ -6,23 +13,16 @@ import {
   CreateControllerResult,
   RedirectionSideEffect,
   SaveButton,
+  UseCreateMutateParams,
   useCreateController,
   useNotify,
   useRedirect,
   useResourceContext,
-  useTranslate,
-  UseCreateMutateParams
+  useTranslate
 } from 'react-admin';
-import { Dialog, Fab, useMediaQuery } from '@mui/material';
-import React, { useCallback, useState } from 'react';
-import { SxProps, Theme, styled } from '@mui/material/styles';
-import { Toolbar } from '../ra-forms';
-import clsx from 'clsx';
-import { useAppConfig } from '../../hooks';
 import { useQueryClient } from 'react-query';
-import ContentAdd from '@mui/icons-material/Add';
 
-const updateColl = (old: any, data: any) => {
+function updateColl(old: any, data: any) {
   const id = data.id;
   if (!old) return [data];
   const index = old.findIndex((record: any) => record.id === id);
@@ -31,36 +31,76 @@ const updateColl = (old: any, data: any) => {
   }
 
   return [...old.slice(0, index), { ...old[index], ...data }, ...old.slice(index + 1)];
-};
-const setManyReferenceQueryData = (res: any, data: any) => {
+}
+function setManyReferenceQueryData(res: any, data: any) {
   const result = res && res.data ? { data: updateColl(res.data, data), total: res.total + 1 } : res;
   return result;
-};
-const setManyQueryData = (coll: any, data: any) => (coll && coll.length > 0 ? updateColl(coll, data) : coll);
-const setListQueryData = (res: any, data: any) =>
-  res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
+}
+function setManyQueryData(coll: any, data: any) {
+  return coll && coll.length > 0 ? updateColl(coll, data) : coll;
+}
+function setListQueryData(res: any, data: any) {
+  return res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
+}
 
-export type CreateInDialogContentProps = CreateControllerProps & {
-  onClose: () => void;
-  record?: any;
-  redirect: RedirectionSideEffect | boolean | undefined;
-  children: React.ReactElement;
-  /**
-   * You can use it to handle the form submission yourself.
-   * Good luck with that.
-   */
-  onSubmit?: (record: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onSuccess instead
-   */
-  onSuccess?: (data: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onError instead
-   */
-  onError?: (error: any) => void;
-};
+function CreateInDialogButton({
+  fullWidth = true,
+  maxWidth = 'md',
+  label = 'ra.action.create',
+  record,
+  redirect,
+  scrollToTop = true,
+  className,
+  sx,
+  style,
+  fab = true,
+  onSubmit,
+  onSuccess,
+  onError,
+  ...controllerProps
+}: CreateInDialogButtonProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const translate = useTranslate();
+  const resource = useResourceContext();
+  const { openDialog, closeDialog } = useAppConfig();
+  const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
+  const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
+  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const isSmall = fab || isMobile;
+  return (
+    <>
+      {isSmall ? (
+        <StyledFab
+          // @ts-ignore
+          state={scrollStates[String(scrollToTop)]}
+          color="primary"
+          className={clsx(CreateButtonClasses.floating, className)}
+          aria-label={label ? translate(label) : null}
+          onClick={handleOpen}
+        >
+          <ContentAdd />
+        </StyledFab>
+      ) : (
+        <Button sx={sx} label={label} onClick={handleOpen} style={style}>
+          <ContentAdd />
+        </Button>
+      )}
+      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+        <CreateInDialogContent
+          {...controllerProps}
+          redirect={redirect}
+          record={record}
+          onClose={handleClose}
+          onSubmit={onSubmit}
+          onSuccess={onSuccess}
+          onError={onError}
+        />
+      </Dialog>
+    </>
+  );
+}
 
-const CreateInDialogContent = ({
+function CreateInDialogContent({
   onClose,
   record,
   children,
@@ -69,7 +109,8 @@ const CreateInDialogContent = ({
   onSuccess,
   onError,
   ...props
-}: CreateInDialogContentProps) => {
+}: CreateInDialogContentProps) {
+  const Child = Children.only(children);
   const queryClient = useQueryClient();
   const resource = useResourceContext();
   const redirect = useRedirect();
@@ -86,7 +127,9 @@ const CreateInDialogContent = ({
       queryClient.setQueriesData([resource, 'getMany'], (coll: any) => setManyQueryData(coll, data), {
         updatedAt
       });
-      queryClient.setQueriesData([resource, 'getManyReference'], (res: any) => setManyReferenceQueryData(res, data), { updatedAt });
+      queryClient.setQueriesData([resource, 'getManyReference'], (res: any) => setManyReferenceQueryData(res, data), {
+        updatedAt
+      });
 
       onClose();
       notify('ra.notification.created');
@@ -100,7 +143,7 @@ const CreateInDialogContent = ({
         props.mutationOptions.onSuccess(data, variables, { ...(context as any), onClose });
       }
     },
-    [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect]
+    [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect, props?.mutationOptions]
   );
   const { save, ...createProps } = useCreateController({
     ...props,
@@ -131,19 +174,27 @@ const CreateInDialogContent = ({
         } as CreateControllerResult
       }
     >
-      {React.cloneElement(children, {
-        ...children.props,
-        modal: true,
-        toolbar: (
-          <Toolbar>
-            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} disabled={createProps?.saving} />
-            <SaveButton type="button" disabled={createProps?.saving} />
-          </Toolbar>
-        )
-      })}
+      {React.isValidElement(Child)
+        ? React.cloneElement(Child, {
+            ...Child.props,
+            modal: true,
+            toolbar: (
+              <Toolbar>
+                <Button
+                  variant="text"
+                  size="medium"
+                  label="ra.action.cancel"
+                  onClick={onClose}
+                  disabled={createProps?.saving}
+                />
+                <SaveButton type="button" disabled={createProps?.saving} />
+              </Toolbar>
+            )
+          })
+        : null}
     </CreateContextProvider>
   );
-};
+}
 
 const scrollStates = {
   true: { _scrollToTop: true },
@@ -163,93 +214,55 @@ const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.ro
   }
 }));
 
-export type CreateInDialogButtonProps = CreateControllerProps & {
-  fullWidth?: boolean;
-  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-  label?: string;
-  record?: any;
-  redirect?: RedirectionSideEffect;
-  scrollToTop?: boolean;
-  className?: string;
-  sx?: SxProps;
-  style?: React.CSSProperties;
-  children: React.ReactElement;
-  /**
-   * If set to false, the button will always render as a regular button, regardless of the screen size.
-   */
-  fab: boolean;
-  /**
-   * @deprecated Use mutationOptions.onSubmit instead
-   */
-  onSubmit?: (record: any, close: () => void) => void;
-  /**
-   * @deprecated Use mutationOptions.onSuccess instead
-   */
-  onSuccess?: (data: any) => void;
-  /**
-   *
-   * @deprecated Use mutationOptions.onError instead
-   */
-  onError?: (error: any) => void;
-};
+type CreateInDialogButtonProps = CreateControllerProps &
+  PropsWithChildren<{
+    fullWidth?: boolean;
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    label?: string;
+    record?: any;
+    redirect?: RedirectionSideEffect;
+    scrollToTop?: boolean;
+    className?: string;
+    sx?: SxProps;
+    style?: React.CSSProperties;
+    /**
+     * If set to false, the button will always render as a regular button, regardless of the screen size.
+     */
+    fab: boolean;
+    /**
+     * @deprecated Use mutationOptions.onSubmit instead
+     */
+    onSubmit?: (record: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onSuccess instead
+     */
+    onSuccess?: (data: any) => void;
+    /**
+     *
+     * @deprecated Use mutationOptions.onError instead
+     */
+    onError?: (error: any) => void;
+  }>;
 
-/**
- * Allows you to handle the creation of a record, for a specific entity, or in completely custom mode, within a dialog.
- */
-export function CreateInDialogButton({
-  fullWidth = true,
-  maxWidth = 'md',
-  label = 'ra.action.create',
-  record,
-  redirect,
-  scrollToTop = true,
-  className,
-  sx,
-  style,
-  fab = true,
-  onSubmit,
-  onSuccess,
-  onError,
-  ...controllerProps
-}: CreateInDialogButtonProps): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const translate = useTranslate();
-  const resource = useResourceContext();
-  const { openDialog, closeDialog } = useAppConfig();
-  const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
-  const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
-  const isSmall = fab && useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
-  return (
-    <>
-      {isSmall ? (
-        <StyledFab
-          // @ts-ignore
-          state={scrollStates[String(scrollToTop)]}
-          color="primary"
-          className={clsx(CreateButtonClasses.floating, className)}
-          aria-label={label && translate(label)}
-          onClick={handleOpen}
-        >
-          <ContentAdd />
-        </StyledFab>
-      ) : (
-        <Button sx={sx} label={label} onClick={handleOpen} style={style}>
-          <ContentAdd />
-        </Button>
-      )}
-      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
-        <CreateInDialogContent
-          {...controllerProps}
-          redirect={redirect}
-          record={record}
-          onClose={handleClose}
-          onSubmit={onSubmit}
-          onSuccess={onSuccess}
-          onError={onError}
-        />
-      </Dialog>
-    </>
-  );
-}
+type CreateInDialogContentProps = CreateControllerProps &
+  PropsWithChildren<{
+    onClose: () => void;
+    record?: any;
+    redirect: RedirectionSideEffect | boolean | undefined;
+    /**
+     * You can use it to handle the form submission yourself.
+     * Good luck with that.
+     */
+    onSubmit?: (record: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onSuccess instead
+     */
+    onSuccess?: (data: any, close: () => void) => void;
+    /**
+     * @deprecated Use mutationOptions.onError instead
+     */
+    onError?: (error: any) => void;
+  }>;
 
-export default CreateInDialogButton;
+export { CreateInDialogButton };
+export type { CreateInDialogButtonProps };

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -1,4 +1,8 @@
-/* eslint-disable camelcase */
+import { useAppConfig } from '@/components/AppStateProvider';
+import { Toolbar } from '@/components/ra-forms';
+import { Edit } from '@mui/icons-material';
+import { Breakpoint, Dialog } from '@mui/material';
+import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import {
   Button,
   EditContextProvider,
@@ -10,23 +14,19 @@ import {
   useRecordContext,
   useResourceContext
 } from 'react-admin';
-import React, { useCallback, useState } from 'react';
-
-import { Breakpoint, Dialog } from '@mui/material';
-import { Edit } from '@mui/icons-material';
-import { Toolbar } from '../ra-forms';
-import { useAppConfig } from '../../hooks';
 
-type EditInDialogContentProps = EditControllerProps & {
-  onClose: () => void;
-  children: React.ReactElement;
-};
-const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) => {
+type EditInDialogContentProps = EditControllerProps &
+  PropsWithChildren<{
+    onClose: () => void;
+  }>;
+function EditInDialogContent({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) {
+  const Child = Children.only(children);
   const notify = useNotify();
   const record = useRecordContext();
   const resource = useResourceContext();
   const { id } = record;
   const { isLoading, data } = useGetOne(resource, { id });
+  const { onSuccess } = props;
 
   const handleSuccess = useCallback(
     (...args: any) => {
@@ -37,11 +37,11 @@ const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic',
         }
       });
       onClose();
-      if (props.onSuccess) {
-        props.onSuccess(...args);
+      if (onSuccess) {
+        onSuccess(...args);
       }
     },
-    [onClose, notify]
+    [onClose, notify, onSuccess]
   );
   const { save, saving } = useEditController({
     ...props,
@@ -64,29 +64,23 @@ const EditInDialogContent = ({ onClose, children, mutationMode = 'pessimistic',
         saving: saving
       }}
     >
-      {React.cloneElement(children, {
-        ...children.props,
-        modal: true,
-        toolbar: (
-          <Toolbar>
-            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
-            <SaveButton type="button" />
-          </Toolbar>
-        )
-      })}
+      {React.isValidElement(Child)
+        ? React.cloneElement(Child, {
+            ...Child.props,
+            modal: true,
+            toolbar: (
+              <Toolbar>
+                <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
+                <SaveButton type="button" />
+              </Toolbar>
+            )
+          })
+        : null}
     </EditContextProvider>
   );
-};
-
-export type EditInDialogButtonProps = EditControllerProps & {
-  fullWidth?: boolean;
-  maxWidth?: false | Breakpoint | undefined;
-  label?: string;
-  children: React.ReactElement;
-  style?: React.CSSProperties;
-};
+}
 
-export function EditInDialogButton({
+function EditInDialogButton({
   fullWidth = true,
   maxWidth = 'md',
   label = 'ra.action.edit',
@@ -113,4 +107,13 @@ export function EditInDialogButton({
   );
 }
 
-export default EditInDialogButton;
+type EditInDialogButtonProps = EditControllerProps &
+  PropsWithChildren<{
+    fullWidth?: boolean;
+    maxWidth?: false | Breakpoint | undefined;
+    label?: string;
+    style?: React.CSSProperties;
+  }>;
+
+export { EditInDialogButton };
+export type { EditInDialogButtonProps };

package/src/components/ra-buttons/ImpersonateUserButton.tsx

@@ -1,12 +1,12 @@
-import { Button, useAuthProvider, useRecordContext } from 'react-admin';
-import React, { useCallback, useState } from 'react';
 import { VpnKey } from '@mui/icons-material';
+import { useCallback, useState } from 'react';
+import { Button, useAuthProvider, useRecordContext } from 'react-admin';
 
-export type ImpersonateUserButtonProps = {
+type ImpersonateUserButtonProps = {
   label?: string;
 };
 
-export function ImpersonateUserButton({ label = 'ra.auth.sign_in', ...props }: ImpersonateUserButtonProps): JSX.Element {
+function ImpersonateUserButton({ label = 'ra.auth.sign_in', ...props }: ImpersonateUserButtonProps): JSX.Element {
   const record = useRecordContext();
   const [loading, setLoading] = useState(false);
   const authProvider = useAuthProvider();
@@ -37,4 +37,5 @@ export function ImpersonateUserButton({ label = 'ra.auth.sign_in', ...props }: I
   );
 }
 
-export default ImpersonateUserButton;
+export { ImpersonateUserButton };
+export type { ImpersonateUserButtonProps };

package/src/components/ra-buttons/index.ts

@@ -1,3 +1,3 @@
-export * from './ImpersonateUserButton';
 export * from './CreateInDialogButton';
 export * from './EditInDialogButton';
+export * from './ImpersonateUserButton';

package/src/components/ra-custom/ListItem.tsx

@@ -1,48 +1,15 @@
+import { useAppConfig } from '@/components/AppStateProvider';
 import { Button, ButtonProps, Stack, Typography } from '@mui/material';
+import { get } from 'lodash';
 import { FieldTitle, useRecordContext, useResourceContext } from 'ra-core';
 import React, { ElementType } from 'react';
-import { get } from 'lodash';
-import { useAppConfig } from '../../hooks';
-
-export type ListItemProps = {
-  source?: string;
-  label?: string;
-  record?: any;
-  variant?:
-    | 'body1'
-    | 'body2'
-    | 'caption'
-    | 'button'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'inherit'
-    | 'overline'
-    | 'subtitle1'
-    | 'subtitle2';
-  spaceTop?: boolean;
-  spaceBottom?: boolean;
-  leftIcon?: ElementType<any>;
-  rightIcon?: ElementType<any>;
-  component?: ElementType<any>;
-  button?: string;
-  buttonProps?: ButtonProps;
-};
-
-const defaultIconStyle = {
-  width: '1.5rem',
-  alignSelf: 'center'
-};
 
 /**
  * Implements the ListItem component designed and drawn by Applica.
  * This component can be used in different combinations of properties and allows you to view and/or modify data
  * by adding decorative elements of details and customizations in data formatting.
  */
-export function ListItem({
+function ListItem({
   source,
   label,
   variant = 'body1',
@@ -76,10 +43,11 @@ export function ListItem({
       })}
     >
       <Stack direction="row" alignItems="start">
-        {leftIcon &&
-          (React.isValidElement(leftIcon)
+        {leftIcon
+          ? React.isValidElement(leftIcon)
             ? React.cloneElement(leftIcon, { style: defaultIconStyle } as any)
-            : React.createElement(leftIcon as ElementType<any>, { style: defaultIconStyle }))}
+            : React.createElement(leftIcon as ElementType<any>, { style: defaultIconStyle })
+          : null}
         <FieldTitle label={label} source={source} resource={dialogResource || resource} />
       </Stack>
       <Stack direction="row" alignItems="center">
@@ -92,18 +60,53 @@ export function ListItem({
         ) : (
           <Typography variant={variant}>{value}</Typography>
         )}
-        {rightIcon &&
-          (React.isValidElement(rightIcon)
+        {rightIcon
+          ? React.isValidElement(rightIcon)
             ? React.cloneElement(rightIcon, { style: defaultIconStyle } as any)
-            : React.createElement(rightIcon as ElementType<any>, { style: defaultIconStyle }))}
-        {button && (
+            : React.createElement(rightIcon as ElementType<any>, { style: defaultIconStyle })
+          : null}
+        {button ? (
           <Button size="small" variant="outlined" sx={{ ml: 1, p: 0 }} {...buttonProps}>
             {button}
           </Button>
-        )}
+        ) : null}
       </Stack>
     </Stack>
   );
 }
 
-export default ListItem;
+const defaultIconStyle = {
+  width: '1.5rem',
+  alignSelf: 'center'
+};
+
+type ListItemProps = {
+  source?: string;
+  label?: string;
+  record?: any;
+  variant?:
+    | 'body1'
+    | 'body2'
+    | 'caption'
+    | 'button'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'inherit'
+    | 'overline'
+    | 'subtitle1'
+    | 'subtitle2';
+  spaceTop?: boolean;
+  spaceBottom?: boolean;
+  leftIcon?: ElementType<any>;
+  rightIcon?: ElementType<any>;
+  component?: ElementType<any>;
+  button?: string;
+  buttonProps?: ButtonProps;
+};
+
+export { ListItem };
+export type { ListItemProps };

package/src/components/ra-fields/ActionsField.tsx

@@ -1,24 +1,25 @@
+import { ActionsMenu } from '@/components/ActionsMenu';
 import { CloneButton, DeleteWithConfirmButton, EditButton } from 'react-admin';
-import ActionsMenu from '../ActionsMenu';
 
-export type ActionsFieldProps = {
-  canEdit?: boolean;
-  canDelete?: boolean;
-  canClone?: boolean;
-};
-
-export function ActionsField({ canEdit = true, canDelete = true, canClone = false }: ActionsFieldProps): JSX.Element | null {
+function ActionsField({ canEdit = true, canDelete = true, canClone = false }: ActionsFieldProps): JSX.Element | null {
   if (!canEdit && !canDelete && !canClone) {
     return null;
   }
 
   return (
     <ActionsMenu>
-      {canEdit && <EditButton />}
-      {canDelete && <DeleteWithConfirmButton />}
-      {canClone && <CloneButton />}
+      {canEdit ? <EditButton /> : null}
+      {canDelete ? <DeleteWithConfirmButton /> : null}
+      {canClone ? <CloneButton /> : null}
     </ActionsMenu>
   );
 }
 
-export default ActionsField;
+type ActionsFieldProps = {
+  canEdit?: boolean;
+  canDelete?: boolean;
+  canClone?: boolean;
+};
+
+export { ActionsField };
+export type { ActionsFieldProps };