@applica-software-guru/react-admin 1.4.225 → 1.5.228

package/src/components/ra-forms/ChangePasswordForm.tsx

@@ -1,17 +1,20 @@
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { SimpleForm } from '@/components/ra-forms/SimpleForm';
+import { Toolbar } from '@/components/ra-forms/Toolbar';
+import { TextInput } from '@/components/ra-inputs';
 import { Alert, AlertTitle, Grid } from '@mui/material';
-import { EditContextProvider, ResourceContextProvider, required, useAuthProvider, useNotify, useTranslate } from 'ra-core';
-import { SaveButton } from 'react-admin';
-import { SimpleForm } from './SimpleForm';
-import { TextInput } from '../ra-inputs';
-import { Toolbar } from '../ra-forms';
+import {
+  EditContextProvider,
+  ResourceContextProvider,
+  required,
+  useAuthProvider,
+  useNotify,
+  useTranslate
+} from 'ra-core';
 import { useCallback, useState } from 'react';
-import { useThemeConfig } from '../../hooks';
+import { SaveButton } from 'react-admin';
 
-export type ChangePasswordFormProps = {
-  onSuccess: () => void;
-  firstAccess?: boolean;
-};
-export function ChangePasswordForm({ onSuccess, firstAccess }: ChangePasswordFormProps): JSX.Element {
+function ChangePasswordForm({ onSuccess, firstAccess }: ChangePasswordFormProps): JSX.Element {
   const { spacing } = useThemeConfig();
   const [saving, setSaving] = useState(false);
   const authProvider = useAuthProvider();
@@ -32,7 +35,7 @@ export function ChangePasswordForm({ onSuccess, firstAccess }: ChangePasswordFor
         })
         .finally(() => setSaving(false));
     },
-    [authProvider, onSuccess]
+    [authProvider, onSuccess, notify]
   );
   return (
     <ResourceContextProvider value="user/change-password">
@@ -73,4 +76,10 @@ export function ChangePasswordForm({ onSuccess, firstAccess }: ChangePasswordFor
     </ResourceContextProvider>
   );
 }
-export default ChangePasswordForm;
+type ChangePasswordFormProps = {
+  onSuccess: () => void;
+  firstAccess?: boolean;
+};
+
+export { ChangePasswordForm };
+export type { ChangePasswordFormProps };

package/src/components/ra-forms/Create.tsx

@@ -1,10 +1,18 @@
+// eslint-disable-next-line filenames/match-regex
+import { CircularProgress, Stack } from '@mui/material';
+import { Theme, styled } from '@mui/material/styles';
 import _ from 'lodash';
-import { CreateProps, Identifier, Create as RaCreate, RaRecord, useDataProvider, useResourceContext } from 'react-admin';
-import { Stack, CircularProgress } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { useCallback, createContext, useContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  CreateProps,
+  Identifier,
+  Create as RaCreate,
+  RaRecord,
+  useDataProvider,
+  useResourceContext
+} from 'react-admin';
+import { UseQueryOptions, useQuery } from 'react-query';
 import { useLocation } from 'react-router';
-import { useQuery, UseQueryOptions } from 'react-query';
 
 type ICreateProps<
   RecordType extends Omit<RaRecord, 'id'> = any,
@@ -19,42 +27,42 @@ type IResourceDefaultValue = object;
 const ResourceDefaultValueContext = createContext<IResourceDefaultValue>({});
 
 function CreateWithDefaults(props: ICreateProps) {
-  const { useDefaults = false, queryOptions = {} } = props,
-    resource = useResourceContext(),
-    dataProvider = useDataProvider(),
-    { search } = useLocation(),
-    url = `${resource}/new`,
-    fetch = useCallback(() => {
-      if (!useDefaults || !_.isFunction(dataProvider.get)) {
-        return Promise.resolve({});
-      }
+  const { useDefaults = false, queryOptions = {} } = props;
+  const resource = useResourceContext();
+  const dataProvider = useDataProvider();
+  const { search } = useLocation();
+  const url = `${resource}/new`;
+  const fetch = useCallback(() => {
+    if (!useDefaults || !_.isFunction(dataProvider.get)) {
+      return Promise.resolve({});
+    }
 
-      const params: { [key in string]: string } = {};
-      new URLSearchParams(search ?? '').forEach((v, k) => {
-        params[k] = v;
-      });
+    const params: { [key in string]: string } = {};
+    new URLSearchParams(search ?? '').forEach((v, k) => {
+      params[k] = v;
+    });
 
-      return dataProvider
-        .get(url, params)
-        .then((response: { data: object }) => response.data)
-        .then((data: { responseCode: string; value: object }) => {
-          const { responseCode, value } = data;
-          if (responseCode === 'ok') {
-            return value;
-          } else {
-            return Promise.reject(data);
-          }
-        });
-    }, [resource, useDefaults, search, dataProvider]),
-    _queryOptions = useMemo<UseQueryOptions>(
-      () =>
-        _.chain(queryOptions)
-          .extend({ queryKey: [resource, search], queryFn: fetch })
-          .value(),
-      [resource, search, fetch, queryOptions]
-    ),
-    { data, isLoading } = useQuery(_queryOptions),
-    passProps = _.omit(props, ['useDefaults']);
+    return dataProvider
+      .get(url, params)
+      .then((response: { data: object }) => response.data)
+      .then((data: { responseCode: string; value: object }) => {
+        const { responseCode, value } = data;
+        if (responseCode === 'ok') {
+          return value;
+        } else {
+          return Promise.reject(data);
+        }
+      });
+  }, [useDefaults, search, dataProvider, url]);
+  const _queryOptions = useMemo<UseQueryOptions>(
+    () =>
+      _.chain(queryOptions)
+        .extend({ queryKey: [resource, search], queryFn: fetch })
+        .value(),
+    [resource, search, fetch, queryOptions]
+  );
+  const { data, isLoading } = useQuery(_queryOptions);
+  const passProps = _.omit(props, ['useDefaults']);
 
   return isLoading ? (
     <Stack alignItems={'center'} justifyContent="center" flex={1} p={2}>
@@ -66,12 +74,7 @@ function CreateWithDefaults(props: ICreateProps) {
     </ResourceDefaultValueContext.Provider>
   );
 }
-
-export function useResourceDefaultValues(): IResourceDefaultValue {
-  return useContext(ResourceDefaultValueContext);
-}
-
-export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) => ({
+const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }: { theme: Theme }) => ({
   '& .RaCreate-card, & > div > div > form': {
     backgroundColor: theme.palette.background.default
   },
@@ -85,7 +88,7 @@ export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) =
     position: 'initial !important',
     paddingLeft: `${theme.spacing(2.5)} !important`,
     paddingRight: `${theme.spacing(2.5)} !important`,
-    paddingTop: '0 !important',
+    paddingTop: '0 !important'
   },
   // Ci ho messo 4 ore per scrivere questa riga di codice e risolvere un problema con react-sticky-box ed i Long Form.
   // L'overflow è di default 'hidden', a noi serve visibile per consentire a react-sticky-box di funzionare e gestire la visiblità con ancore
@@ -98,4 +101,9 @@ export const Create = styled(CreateWithDefaults, { slot: 'root' })(({ theme }) =
   }
 }));
 
-export default Create;
+function useResourceDefaultValues(): IResourceDefaultValue {
+  return useContext(ResourceDefaultValueContext);
+}
+
+export { Create, useResourceDefaultValues };
+export type { ICreateProps, IResourceDefaultValue };

package/src/components/ra-forms/Edit.tsx

@@ -1,5 +1,6 @@
-import { EditProps, Edit as RaEdit } from 'react-admin';
+// eslint-disable-next-line filenames/match-regex
 import { styled } from '@mui/material/styles';
+import { EditProps, Edit as RaEdit } from 'react-admin';
 
 const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
   '&>.MuiToolbar-root:first-of-type': {
@@ -37,9 +38,10 @@ const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
   }
 }));
 
-export function Edit(props: EditProps): JSX.Element {
+function Edit(props: EditProps): JSX.Element {
   // @ts-ignore
   return <StyledEdit {...props} />;
 }
 
-export default Edit;
+export { Edit };
+export type { EditProps };

package/src/components/ra-forms/FormHeader.tsx

@@ -1,5 +1,5 @@
+/* eslint-disable filenames/match-regex */
 import { CardHeader, Divider } from '@mui/material';
-import { Fragment } from 'react';
 import { styled } from '@mui/material/styles';
 import { useTranslate } from 'react-admin';
 
@@ -18,28 +18,31 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
   width: `calc(100% + ${theme.spacing(5)})`
 }));
 
-export type FormHeaderProps = {
-  title: string;
-  divider?: boolean;
-  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
-};
-
 /**
  * Implements the header of a form.
  * Can be inserted inside a CardForm or a SimpleForm and shows a title with a divider
  * that covers the entire width of the form.
  */
-export function FormHeader({ title, divider = true, variant = 'h5' }: FormHeaderProps): JSX.Element {
+function FormHeader({ title, divider = true, variant = 'h5' }: FormHeaderProps): JSX.Element {
   const translate = useTranslate();
   return (
-    <Fragment>
+    <>
       <StyledCardHeader
         title={translate(title, { _: title })}
         titleTypographyProps={{
           variant
         }}
       />
-      {divider && <StyledDivider />}
-    </Fragment>
+      {divider ? <StyledDivider /> : null}
+    </>
   );
 }
+
+type FormHeaderProps = {
+  title: string;
+  divider?: boolean;
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+};
+
+export { FormHeader };
+export type { FormHeaderProps };

package/src/components/ra-forms/LongForm/BaseForm.tsx

@@ -1,8 +1,8 @@
-import _ from 'lodash';
-import { Form, FormProps } from 'react-admin';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
 import { Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { useThemeConfig } from '../../../hooks';
+import _ from 'lodash';
+import { Form, FormProps } from 'react-admin';
 
 type IBaseFormProps = FormProps & {
   spacing?: number;
@@ -34,7 +34,7 @@ const StyledGrid = styled(Grid, {
     paddingTop: `${theme.spacing(2.5)} !important`,
     paddingLeft: '0 !important',
     paddingRight: '0 !important',
-    paddingBottom: '0 !important',
+    paddingBottom: '0 !important'
   },
   '& form > .MuiToolbar-root': {
     // This is really important: this rule is used to insert forms inside other forms, avoiding
@@ -48,9 +48,9 @@ const StyledGrid = styled(Grid, {
 }));
 
 function BaseForm(props: IBaseFormProps) {
-  const { spacing: themeSpacing } = useThemeConfig(),
-    { spacing = themeSpacing } = props,
-    formProps = _.omit(props, ['spacing']);
+  const { spacing: themeSpacing } = useThemeConfig();
+  const { spacing = themeSpacing } = props;
+  const formProps = _.omit(props, ['spacing']);
 
   return (
     <Form {...formProps} className="LongFormView">
@@ -61,6 +61,6 @@ function BaseForm(props: IBaseFormProps) {
   );
 }
 
-export type { IBaseFormProps };
-
 export { BaseForm };
+
+export type { IBaseFormProps };

package/src/components/ra-forms/LongForm/Content.tsx

@@ -1,14 +1,14 @@
-import _ from 'lodash';
-import { Disposition } from './types';
+import { Disposition } from '@/components/ra-forms/LongForm/types';
 import { Grid, GridProps } from '@mui/material';
+import _ from 'lodash';
 
 type IContentProps = GridProps & {
   disposition?: Disposition;
 };
 
 function Content(props: IContentProps) {
-  const { disposition = { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 } } = props,
-    gridProps = _.omit(props, ['disposition']);
+  const { disposition = { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 } } = props;
+  const gridProps = _.omit(props, ['disposition']);
   return (
     <Grid {...gridProps} item {...disposition}>
       {props.children}

package/src/components/ra-forms/LongForm/Form.tsx

@@ -1,11 +1,11 @@
+import { BaseForm, IBaseFormProps } from '@/components/ra-forms/LongForm/BaseForm';
+import { Content } from '@/components/ra-forms/LongForm/Content';
+import { NavMenu } from '@/components/ra-forms/LongForm/NavMenu';
+import { IProviderProps, Provider } from '@/components/ra-forms/LongForm/Provider';
+import { Sidebar, useSidebarChildren } from '@/components/ra-forms/LongForm/Sidebar';
+import { useBaseItemChildren } from '@/components/ra-forms/LongForm/Tab';
+import { Disposition } from '@/components/ra-forms/LongForm/types';
 import _ from 'lodash';
-import { BaseForm, IBaseFormProps } from './BaseForm';
-import { Content } from './Content';
-import { Disposition } from './types';
-import { IProviderProps, Provider } from './Provider';
-import { NavMenu } from './NavMenu';
-import { Sidebar, useSidebarChildren } from './Sidebar';
-import { useBaseItemChildren } from './Tab';
 
 type IFormProps = IProviderProps &
   IBaseFormProps & {
@@ -16,11 +16,11 @@ type IFormProps = IProviderProps &
   };
 
 function Form(props: IFormProps) {
-  const { tabsDisposition, contentDisposition, spacing = 2 } = props,
-    providerProps = _.pick(props, ['syncWithLocation', 'errorCount']),
-    baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']),
-    { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props),
-    contentChildren = useBaseItemChildren(props);
+  const { tabsDisposition, contentDisposition, spacing = 2 } = props;
+  const providerProps = _.pick(props, ['syncWithLocation', 'errorCount']);
+  const baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']);
+  const { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props);
+  const contentChildren = useBaseItemChildren(props);
   return (
     <Provider {...providerProps}>
       <BaseForm {...baseFormProps} spacing={spacing}>

package/src/components/ra-forms/LongForm/NavMenu.tsx

@@ -1,25 +1,25 @@
-import _ from 'lodash';
-import { Avatar } from '../../@extended';
+import { Avatar } from '@/components/@extended/Avatar';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { useSetActiveItem, useSyncWithLocation } from '@/components/ra-forms/LongForm/Provider';
+import { useChildren, useIsActive, useNavigateForm } from '@/components/ra-forms/LongForm/hooks';
+import { IItem } from '@/components/ra-forms/LongForm/types';
+import { getLevel } from '@/components/ra-forms/LongForm/utils';
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import {
+  Badge,
   Card,
   Collapse,
   List,
   ListItem,
-  ListItemProps,
-  ListItemIcon,
-  ListItemText,
-  ListItemButton,
   ListItemAvatar,
-  Badge
+  ListItemButton,
+  ListItemIcon,
+  ListItemProps,
+  ListItemText
 } from '@mui/material';
-import { ExpandLess, ExpandMore } from '@mui/icons-material';
-import { getLevel } from './utils';
-import { IItem } from './types';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useChildren, useIsActive, useNavigateForm } from './hooks';
-import { useSetActiveItem, useSyncWithLocation } from './Provider';
-import { useThemeConfig } from '../../../hooks';
+import _ from 'lodash';
 import { useTranslate } from 'ra-core';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 type IBaseNavMenuItemProps = React.PropsWithChildren<{
   id: string;
@@ -53,20 +53,20 @@ function NavMenu() {
 }
 
 function NavMenuItem(props: INavMenuItemProps) {
-  const translate = useTranslate() ?? _.identity,
-    navMenuItemProps = useNavMenuItem(props),
-    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps,
-    { spacing } = useThemeConfig(),
-    [open, setOpen] = useState(selected),
-    onClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        setOpen(!open);
-        _onClick(e);
-      },
-      [_onClick, open]
-    ),
-    hasIcon = icon !== undefined,
-    listItemProps = _.omit(props, ['label', 'icon', 'selected', 'badge']);
+  const translate = useTranslate() ?? _.identity;
+  const navMenuItemProps = useNavMenuItem(props);
+  const { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps;
+  const { spacing } = useThemeConfig();
+  const [open, setOpen] = useState(selected);
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      setOpen(!open);
+      _onClick(e);
+    },
+    [_onClick, open]
+  );
+  const hasIcon = icon !== undefined;
+  const listItemProps = _.omit(props, ['label', 'icon', 'selected', 'badge']);
 
   useEffect(() => {
     if (selected && !open) {
@@ -77,31 +77,37 @@ function NavMenuItem(props: INavMenuItemProps) {
   return (
     <>
       <ListItem {...listItemProps} disablePadding>
-        <ListItemButton selected={selected && !isGroup} onClick={onClick} sx={{ pl: spacing * level }}>
-          {hasIcon && <ListItemIcon>{icon}</ListItemIcon>}
+        {/* @ts-ignore */}
+        <ListItemButton selected={selected ? !isGroup : null} onClick={onClick} sx={{ pl: spacing * level }}>
+          {hasIcon ? <ListItemIcon>{icon}</ListItemIcon> : null}
           <ListItemText
             inset={!hasIcon}
             primary={
               errors === 0 ? (
                 translate(label)
               ) : (
-                <Badge variant="dot" color="error" sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}>
+                <Badge
+                  variant="dot"
+                  color="error"
+                  sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}
+                >
                   {translate(label)}
                 </Badge>
               )
             }
           />
-          {badge && (
+          {badge ? (
             <ListItemAvatar>
+              {/* @ts-ignore */}
               <Avatar type="filled" size="xs" color={badge.color ?? 'default'}>
                 {badge.content}
               </Avatar>
             </ListItemAvatar>
-          )}
-          {isGroup && (open ? <ExpandLess /> : <ExpandMore />)}
+          ) : null}
+          {isGroup ? open ? <ExpandLess /> : <ExpandMore /> : null}
         </ListItemButton>
       </ListItem>
-      {isGroup && (
+      {isGroup ? (
         <Collapse in={open} timeout="auto">
           <List>
             {_.map(items, (item: IItem, index: number) => {
@@ -109,47 +115,51 @@ function NavMenuItem(props: INavMenuItemProps) {
             })}
           </List>
         </Collapse>
-      )}
+      ) : null}
     </>
   );
 }
 
-function useNavMenuItem(
-  item: INavMenuItemProps
-): IItem & { selected: boolean; onClick: React.MouseEventHandler<HTMLDivElement>; items: Array<IItem>; isGroup: boolean; level: number } {
-  const { id } = item,
-    isActive = useIsActive(id),
-    level = getLevel(id),
-    navigate = useNavigateForm(),
-    syncWithLocation = useSyncWithLocation(),
-    setActiveItem = useSetActiveItem(),
-    items = useChildren(id),
-    isGroup = !_.isEmpty(items),
-    onClick = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!isGroup) {
-          if (syncWithLocation) {
-            navigate(item.id);
-          } else {
-            setActiveItem(item.id);
-          }
+function useNavMenuItem(item: INavMenuItemProps): IItem & {
+  selected: boolean;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  items: Array<IItem>;
+  isGroup: boolean;
+  level: number;
+} {
+  const { id } = item;
+  const isActive = useIsActive(id);
+  const level = getLevel(id);
+  const navigate = useNavigateForm();
+  const syncWithLocation = useSyncWithLocation();
+  const setActiveItem = useSetActiveItem();
+  const items = useChildren(id);
+  const isGroup = !_.isEmpty(items);
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!isGroup) {
+        if (syncWithLocation) {
+          navigate(item.id);
+        } else {
+          setActiveItem(item.id);
         }
-        if (_.isFunction(item.onClick)) {
-          item.onClick(e);
-        }
-      },
-      [setActiveItem, navigate, item, syncWithLocation, isGroup]
-    ),
-    navMenuItem = useMemo(() => {
-      return {
-        ...item,
-        selected: isActive,
-        onClick: onClick,
-        items: items,
-        isGroup: isGroup,
-        level: level
-      };
-    }, [item, isActive, onClick, items, isGroup]);
+      }
+      if (_.isFunction(item.onClick)) {
+        item.onClick(e);
+      }
+    },
+    [setActiveItem, navigate, item, syncWithLocation, isGroup]
+  );
+  const navMenuItem = useMemo(() => {
+    return {
+      ...item,
+      selected: isActive,
+      onClick: onClick,
+      items: items,
+      isGroup: isGroup,
+      level: level
+    };
+  }, [item, isActive, onClick, items, isGroup, level]);
 
   return navMenuItem;
 }