@applica-software-guru/react-admin 1.3.146 → 1.3.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.146",
+  "version": "1.3.147",
   "private": false,
   "repository": {
     "type": "git",
@@ -61,7 +61,7 @@
     "ra-core": "^4.14.5",
     "ra-i18n-polyglot": "^4.14.1",
     "ra-ui-materialui": "4.14.5",
-    "react-admin": "^4.14.4",
+    "react-admin": "4.14.5",
     "react-device-detect": "^2.2.3",
     "react-hook-form": "^7.43.9",
     "react-router": "^6.1.0",
@@ -101,12 +101,12 @@
     "vitest": "^0.33.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-admin": "4.14.5",
     "@mui/base": "5.0.0-beta.19",
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "5.0.0-alpha.148",
-    "@mui/material": "5.14.13"
+    "@mui/material": "5.14.13",
+    "react": "^18.2.0",
+    "react-admin": "4.14.5",
+    "react-dom": "^18.2.0"
   }
 }

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

@@ -12,7 +12,7 @@ type ICreateProps<
 > = CreateProps<RecordType, Error, ResultRecordType> & {
   children: React.ReactNode;
   useDefaults?: boolean;
-  queryOptions?: UseQueryOptions
+  queryOptions?: UseQueryOptions;
 };
 
 type IResourceDefaultValue = object;
@@ -46,7 +46,13 @@ function Create(props: ICreateProps) {
           }
         });
     }, [resource, useDefaults, search, dataProvider]),
-    _queryOptions = useMemo<UseQueryOptions>(() => _.chain(queryOptions).extend({ queryKey: [resource, search], queryFn: fetch }).value(), [resource, search, fetch, queryOptions]),
+    _queryOptions = useMemo<UseQueryOptions>(
+      () =>
+        _.chain(queryOptions)
+          .extend({ queryKey: [resource, search], queryFn: fetch })
+          .value(),
+      [resource, search, fetch, queryOptions]
+    ),
     { data, isLoading } = useQuery(_queryOptions),
     passProps = _.omit(props, ['useDefaults']);
 
@@ -73,7 +79,8 @@ const StyledCreate = styled(Create, {
     backgroundColor: theme.palette.background.default
   },
   '& .RaCreate-main>.MuiPaper-root:first-of-type': {
-    overflow: 'visible'
+    overflow: 'visible',
+    backgroundColor: theme.palette.background.default
   }
 }));
 

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

@@ -24,7 +24,8 @@ const StyledEdit = styled(RaEdit, {
     // 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'
+    overflow: 'visible',
+    backgroundColor: theme.palette.background.default
   }
 }));
 

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

@@ -0,0 +1,70 @@
+import { TabbedForm as RaTabbedForm, TabbedFormProps as RaTabbedFormProps, DeleteWithConfirmButton, SaveButton } from 'react-admin';
+import MainCard from '../MainCard';
+import { useResourceTitle } from '../../hooks';
+import Toolbar from './Toolbar';
+import { styled } from '@mui/system';
+import ActionsMenu from '../ActionsMenu';
+
+export type TabbedFormProps = RaTabbedFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode | boolean;
+  secondary?: string | React.ReactNode;
+};
+
+const StyledTabbedForm = styled(RaTabbedForm, {
+  name: 'RaApplicaTabbedForm',
+  slot: 'Root'
+})(({ theme, modal }: { theme: any; modal: boolean }) => ({
+  '& .MuiGrid-root.MuiGrid-container': {
+    paddingBottom: theme.spacing(modal ? 0 : 1)
+  } as any,
+  [theme.breakpoints.down('sm')]: {
+    paddingBottom: 0
+  }
+}));
+
+const ApplicaTabbedForm = (props: TabbedFormProps) => {
+  const { title, modal, content, subheader, secondary, sx, ...rest } = props;
+  const cardTitle = useResourceTitle(title);
+
+  return (
+    <MainCard
+      title={cardTitle}
+      modal={modal}
+      content={content}
+      subheader={subheader}
+      secondary={secondary}
+      sx={{
+        ...sx,
+        '& .MuiToolbar-root': {
+          paddingLeft: '20px !important',
+          paddingRight: '20px !important'
+        }
+      }}
+      border={!modal}
+      divider
+    >
+      {/** @ts-ignore */}
+      <StyledTabbedForm toolbar={<Toolbar />} {...rest} />
+    </MainCard>
+  );
+};
+
+ApplicaTabbedForm.defaultProps = {
+  toolbar: (
+    <Toolbar>
+      <SaveButton type="button" />
+    </Toolbar>
+  ),
+  secondary: (
+    <ActionsMenu>
+      <DeleteWithConfirmButton />
+    </ActionsMenu>
+  )
+};
+
+ApplicaTabbedForm.Tab = RaTabbedForm.Tab;
+
+export default ApplicaTabbedForm;

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

@@ -1,7 +1,7 @@
 import { Toolbar as RaToolbar } from 'react-admin';
 import { styled } from '@mui/system';
 
-const ApplicaStyledToolbar = styled(RaToolbar, {
+const StyledToolbar = styled(RaToolbar, {
   name: 'RaApplicaToolbar',
   slot: 'Root'
 })(({ theme }) => ({
@@ -21,7 +21,7 @@ const ApplicaStyledToolbar = styled(RaToolbar, {
   }
 }));
 
-const Toolbar = (props) => <ApplicaStyledToolbar {...props} />;
+const Toolbar = (props) => <StyledToolbar {...props} />;
 
 Toolbar.defaultProps = {
   ...RaToolbar.defaultProps

package/src/hooks/useResourceTitle.jsx

@@ -9,6 +9,9 @@ const useResourceTitle = (title) => {
   const mode = record?.id ? 'edit' : 'create';
 
   const cardTitle = useMemo(() => {
+    if (title === false) {
+      return undefined;
+    }
     const defaultTitle = `resources.${resource}.title`;
     return (
       title ||

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

@@ -1,19 +0,0 @@
-import { TabbedForm as RaTabbedForm } from 'react-admin';
-import { styled } from '@mui/system';
-
-const ApplicaStyledTabbedForm = styled(RaTabbedForm, {
-  name: 'RaApplicaTabbedForm',
-  slot: 'Root'
-})(() => ({}));
-
-ApplicaStyledTabbedForm.propTypes = {
-  ...RaTabbedForm.propTypes
-};
-
-ApplicaStyledTabbedForm.defaultProps = {
-  ...RaTabbedForm.defaultProps
-};
-
-ApplicaStyledTabbedForm.Tab = RaTabbedForm.Tab;
-
-export default ApplicaStyledTabbedForm;