@applica-software-guru/react-admin 1.3.166 → 1.3.168

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.166",
+  "version": "1.3.168",
   "private": false,
   "repository": {
     "type": "git",

package/src/components/Layout/Content.tsx

@@ -5,6 +5,7 @@ import { Loading } from 'ra-ui-materialui';
 import { ErrorInfo, Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import Error, { ErrorProps } from './Error';
+import { useTheme } from '@mui/material/styles';
 
 type ILayoutContentProps = React.PropsWithChildren & {
   error?: React.ComponentType<ErrorProps>;
@@ -19,6 +20,7 @@ function LayoutContent(props: ILayoutContentProps) {
   const handleError = (error: Error, info: ErrorInfo) => {
     setErrorInfo(info);
   };
+  const theme = useTheme();
 
   return (
     <ErrorBoundary
@@ -37,7 +39,10 @@ function LayoutContent(props: ILayoutContentProps) {
               position: 'relative',
               minHeight: 'calc(100vh - 110px)',
               display: 'flex',
-              flexDirection: 'column'
+              flexDirection: 'column',
+              [theme.breakpoints.down('sm')]: {
+                px: '12px',
+              }
             }}
           >
             {props.children}

package/src/components/Layout/Navigation/NavGroup.jsx

@@ -37,8 +37,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
   const { pathname } = { pathname: '' }; // useLocation()
   const { horizontal, downLg } = useLayoutMediaState();
   const menu = useMenuConfig();
-  const { drawerOpen, selectedID } = menu;
-  const { activeID } = useMenuConfig();
+  const { drawerOpen, selectedID, activeID } = menu;
 
   const [anchorEl, setAnchorEl] = useState(null);
   const [currentItem, setCurrentItem] = useState(item);

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

@@ -79,9 +79,17 @@ const StyledCreate = styled(Create, {
     backgroundColor: theme.palette.background.default
   },
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
-    overflow: 'visible',
     backgroundColor: theme.palette.background.default
-  }
+  },
+  // 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
+  // di tutti gli elementi presenti all'interno della pagina.
+  '& .RaCreate-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+    overflow: 'visible'
+  },
+  '& .RaCreate-main:has(.tabbed-form) .MuiTableContainer-root': {
+    width: 'inherit',
+  },
 }));
 
 export default StyledCreate;

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

@@ -21,11 +21,16 @@ const StyledEdit = styled(RaEdit, {
     borderTop: `1px solid ${theme.palette.divider}`
   },
   '& .RaEdit-main>.MuiPaper-root:first-of-type': {
-    // 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
-    // di tutti gli elementi presenti all'interno della pagina.
-    overflow: 'visible',
     backgroundColor: theme.palette.background.default
+  },
+  // 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
+  // di tutti gli elementi presenti all'interno della pagina.
+  '& .RaEdit-main:has(.ApplicaLongFormView)>.MuiPaper-root:first-of-type': {
+    overflow: 'visible'
+  },
+  '& .RaEdit-main:has(.tabbed-form) .MuiTableContainer-root': {
+    width: 'inherit'
   }
 }));
 

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

@@ -42,7 +42,7 @@ function BaseForm(props: IBaseFormProps) {
     formProps = _.omit(props, ['spacing']);
 
   return (
-    <Form {...formProps}>
+    <Form {...formProps} className='ApplicaLongFormView'>
       <StyledGrid container spacing={spacing * 2}>
         {props.children}
       </StyledGrid>

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslateLabel } from 'ra-core';
 import { styled, useTheme } from '@mui/material/styles';
-
+import ActionsMenu from '../../ActionsMenu';
 import { PlusCircleOutlined } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from '../../../contexts';
@@ -52,6 +52,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
     disableActions = false,
     disableAdd = false,
     disableRemove = false,
+    enableClearAll = false,
     className,
     empty,
     template = {}
@@ -143,6 +144,7 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
 
   // @ts-ignore
   const tableBorderColor = theme.palette.mode === 'dark' ? theme.palette.grey.A400 : theme.palette.grey.A800;
+  const showClearAllButton = fields.length > 0 && enableClearAll;
 
   return fields ? (
     // @ts-ignore
@@ -175,9 +177,17 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
                 })}
 
                 {!disableActions && (
-                  <TableCell sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', verticalAlign: 'top' }} key={'actions'}>
-                    <Typography display={'flex'} variant="subtitle1" fontWeight={500} color="text.primary" textTransform="none" />
-                  </TableCell>
+                  showClearAllButton ? (
+                    <TableCell key='actions' sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                      <ActionsMenu horizontal>
+                        <Typography color="error" onClick={() => setConfirmIsOpen(true)}>
+                          {translate('ra.action.delete')}
+                        </Typography>
+                      </ActionsMenu>
+                    </TableCell>
+                  ) : (
+                    <TableCell key='empty_actions' />
+                  )
                 )}
               </TableRow>
             </TableHead>
@@ -290,6 +300,7 @@ TableFormIterator.propTypes = {
   resource: PropTypes.string,
   translate: PropTypes.func,
   disableAdd: PropTypes.bool,
+  enableClearAll: PropTypes.bool,
   disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   TransitionProps: PropTypes.shape({}),
   empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
@@ -303,6 +314,7 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   disableAdd?: boolean;
   disableActions?: boolean;
   disableRemove?: boolean;
+  enableClearAll?: boolean;
   template?: object;
   meta?: {
     // the type defined in FieldArrayRenderProps says error is boolean, which is wrong.

package/src/components/ra-inputs/BooleanInput.jsx

@@ -7,7 +7,9 @@ import { BooleanInput as RaBooleanInput } from 'react-admin';
 const ApplicaStyledBooleanInput = styled(RaBooleanInput, {
   name: 'RaApplicaBooleanInput',
   slot: 'Root'
-})(() => ({}));
+})(() => ({
+  marginTop: '0 !important'
+}));
 
 const BooleanInput = ({ horizontal, ...props }) => {
   // eslint-disable-next-line no-unused-vars

package/src/hooks/useLocalStorage.tsx

@@ -1,51 +1,48 @@
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as yup from 'yup';
 import { LocalStorage } from '../utils/localStorage';
 
 const localStorageInstance = new LocalStorage();
 
-function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
-  yup.string().required().validateSync(key);
-
-  function buildSetter(key: string, currentValue: unknown, callback: (newValue: unknown) => unknown): (newValue: unknown) => unknown {
-    return function (newValue: unknown) {
-      const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
-      localStorageInstance.set(key, updatedValue);
-      callback(updatedValue);
-      return updatedValue;
-    };
-  }
+type ISetter = (newValue: unknown) => unknown;
 
-  const [fallbackValue, updateFallbackValue] = useState(defaultValue),
-    [state, updateState] = useState(localStorageInstance.get(key) ?? defaultValue),
-    [setter, updateSetter] = useState(() => buildSetter(key, state, updateState));
+function buildSetter(key: string, currentValue: unknown, callback: ISetter): ISetter {
+  return function (newValue: unknown) {
+    const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
+    localStorageInstance.set(key, updatedValue);
+    callback(updatedValue);
+    return updatedValue;
+  };
+}
 
-  useEffect(() => {
-    if (!_.isEqual(defaultValue, fallbackValue)) {
-      updateFallbackValue(defaultValue);
-    }
-  }, [defaultValue, fallbackValue, updateFallbackValue]);
+function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
+  yup.string().required().validateSync(key);
+  const [state, setState] = useState(localStorageInstance.get(key) ?? defaultValue),
+    defaultValueRef = useRef<unknown | undefined>(defaultValue),
+    storedDefaultValue = _.isEqual(defaultValueRef.current, defaultValue) ? defaultValueRef.current : defaultValue,
+    setterRef = useRef<{ key: string; value: unknown; setter: ISetter } | undefined>(),
+    storedSetter = setterRef.current;
 
   useEffect(() => {
-    updateState(localStorageInstance.get(key) ?? fallbackValue);
-  }, [key, fallbackValue, updateState]);
+    setState(localStorageInstance.get(key) ?? storedDefaultValue);
+  }, [key, storedDefaultValue, setState]);
 
   useEffect(() => {
     function listener(value: unknown) {
-      updateState(value);
+      setState(value);
     }
     localStorageInstance.watch(key, listener);
     return () => {
       localStorageInstance.unwatch(key, listener);
     };
-  }, [key, updateState]);
+  }, [key, setState]);
 
-  useEffect(() => {
-    updateSetter(() => buildSetter(key, state, updateState));
-  }, [key, state, updateState, updateSetter]);
+  if (key !== storedSetter?.key || !_.isEqual(state, storedSetter?.value)) {
+    setterRef.current = { key, value: state, setter: buildSetter(key, state, setState) };
+  }
 
-  return [state, setter];
+  return [state, setterRef.current?.setter ?? _.noop];
 }
 
 export default useLocalStorage;