@applica-software-guru/react-admin 1.0.37 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.37",
+  "version": "1.0.38",
   "private": false,
   "repository": {
     "type": "git",
@@ -70,6 +70,7 @@
     "react-hook-form": "^7.43.9",
     "react-router": "^6.1.0",
     "react-router-dom": "^6.1.0",
+    "react-sticky-box": "^2.0.4",
     "simplebar": "^6.2.5",
     "simplebar-react": "^3.2.4"
   },
@@ -96,9 +97,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "typescript": "^4.6.4",
+    "vite": "^4.4.2",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-linter": "^2.0.2",
-    "vite": "^4.4.2",
     "vitest": "^0.33.0"
   },
   "peerDependencies": {

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

@@ -1,13 +1,19 @@
-import { Edit as RaEdit } from 'react-admin'
-import { styled } from '@mui/material/styles'
+import { Edit as RaEdit } from 'react-admin';
+import { styled } from '@mui/material/styles';
 
 const StyledEdit = styled(RaEdit, {
   name: 'RaApplicaEdit',
-  slot: 'root',
+  slot: 'root'
 })(({ theme }) => ({
   '& .RaEdi-card, & > div > div > form': {
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.default
   },
-}))
+  '& .RaEdit-main>.MuiPaper-root:first-child': {
+    // 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'
+  }
+}));
 
-export default StyledEdit
+export default StyledEdit;

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

@@ -14,6 +14,7 @@ export type LongFormProps = {
   tabsDisposition?: Disposition;
   contentDisposition?: Disposition;
   children: React.ReactNode;
+  sticky?: boolean;
 };
 
 /**
@@ -40,11 +41,13 @@ LongForm.propTypes = {
   syncWithLocation: PropTypes.bool,
   spacing: PropTypes.number,
   tabsDisposition: DispositionProps,
-  contentDisposition: DispositionProps
+  contentDisposition: DispositionProps,
+  sticky: PropTypes.bool
 };
 
 LongForm.defaultProps = {
   syncWithLocation: false,
+  sticky: true,
   spacing: 2,
   tabsDisposition: { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 },
   contentDisposition: { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 }

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

@@ -11,7 +11,6 @@ const StyledList = styled(List, {
   slot: 'Root'
 })(({ theme }) => ({
   p: 0,
-
   '& .MuiListItemIcon-root': {
     minWidth: 32,
     color: theme.palette.grey[500]

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

@@ -1,5 +1,5 @@
 import { Disposition, DispositionProps } from './types';
-import React, { ReactElement, useMemo, useState } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import { Route, Routes, matchPath, useLocation, useResolvedPath } from 'react-router';
 import { getTabbedFormTabFullPath, useResourceContext } from 'react-admin';
 
@@ -8,18 +8,24 @@ import LongFormHeader from './LongFormSidebar';
 import LongFormTab from './LongFormTab';
 import LongFormTabs from './LongFormTabs';
 import PropTypes from 'prop-types';
+import StickyBox from 'react-sticky-box';
 import { styled } from '@mui/material/styles';
 
 const StyledGrid = styled(Grid, {
-  name: 'RaLongFormView',
+  name: 'ApplicaLongFormView',
   slot: 'Root'
 })(({ theme }) => ({
   '& .MuiToolbar-root': {
     marginTop: theme.spacing(2),
-    marginLeft: `-${theme.spacing(3)}`,
-    marginRight: `-${theme.spacing(3)}`,
+    marginLeft: `-${theme.spacing(2)}`,
+    marginRight: `-${theme.spacing(2.5)}`,
     marginBottom: `-${theme.spacing(2)}`,
     borderTop: `1px solid ${theme.palette.divider}`
+  },
+  '& form > .MuiToolbar-root': {
+    // È molto importante: questa regola serve per poter inserire form, all'interno di altri form, evitando
+    // che la toolbar del form interno recepisca gli stili della regola precedente (che genera un padding strano).
+    margin: 0
   }
 }));
 
@@ -34,6 +40,7 @@ export type LongFormViewProps = {
   tabs: React.ReactElement;
   tabsDisposition: Disposition;
   contentDisposition: Disposition;
+  sticky?: boolean;
 };
 
 const LongFormView = ({
@@ -44,6 +51,7 @@ const LongFormView = ({
   tabs,
   tabsDisposition,
   contentDisposition,
+  sticky,
   ...props
 }: LongFormViewProps) => {
   const [tabValue, setTabValue] = useState(0);
@@ -71,9 +79,9 @@ const LongFormView = ({
       },
       tabChildrens
     );
-  return (
-    <StyledGrid container spacing={spacing * 2}>
-      <Grid item {...tabsDisposition}>
+  const sidebarContent = useMemo(
+    () => (
+      <Fragment>
         {topSidebars}
         {syncWithLocation ? (
           <Routes>
@@ -83,7 +91,22 @@ const LongFormView = ({
           renderTabs()
         )}
         {bottomSidebars}
+      </Fragment>
+    ),
+    [topSidebars, syncWithLocation, renderTabs, bottomSidebars]
+  );
+  return (
+    <StyledGrid container spacing={spacing * 2}>
+      <Grid item {...tabsDisposition}>
+        {sticky ? (
+          <StickyBox offsetTop={74} offsetBottom={spacing * 2}>
+            {sidebarContent}
+          </StickyBox>
+        ) : (
+          sidebarContent
+        )}
       </Grid>
+
       <Grid item {...contentDisposition}>
         {/* All tabs are rendered (not only the one in focus), to allow validation
             on tabs not in focus. The tabs receive a `hidden` property, which they'll

package/src/components/ra-forms/{SimpleForm.jsx → SimpleForm.tsx}

@@ -1,69 +1,80 @@
 import {
   DeleteWithConfirmButton,
   SimpleForm as RaSimpleForm,
+  SimpleFormProps as RaSimpleFormProps,
   SaveButton,
-  useRecordContext,
-} from 'react-admin'
+  useRecordContext
+} from 'react-admin';
 
-import ActionsMenu from '../ActionsMenu'
-import MainCard from '../MainCard'
-import PropTypes from 'prop-types'
-import React from 'react'
-import Toolbar from './Toolbar'
-import { styled } from '@mui/system'
-import { useResourceTitle } from '../../hooks'
+import ActionsMenu from '../ActionsMenu';
+import MainCard from '../MainCard';
+import PropTypes from 'prop-types';
+import Toolbar from './Toolbar';
+import { styled } from '@mui/system';
+import { useResourceTitle } from '../../hooks';
 
 const ApplicaStyledSimpleForm = styled(RaSimpleForm, {
   name: 'RaApplicaSimpleForm',
-  slot: 'Root',
-})(({ theme, modal }) => ({
+  slot: 'Root'
+})(({ theme, modal }: { theme: any; modal: boolean }) => ({
   '& .MuiGrid-root.MuiGrid-container': {
-    paddingBottom: theme.spacing(modal ? 2 : 1),
-  },
-}))
+    paddingBottom: theme.spacing(modal ? 2 : 1)
+  }
+}));
 
-const SimpleForm = ({ title, modal, content, subheader, secondary, ...props }) => {
-  const cardTitle = useResourceTitle(title)
-  const record = useRecordContext()
+export type SimpleFormProps = RaSimpleFormProps & {
+  modal?: boolean;
+  content?: boolean;
+  subheader?: string | React.ReactNode;
+  title?: string | React.ReactNode;
+  secondary?: string | React.ReactNode;
+};
+
+const SimpleForm = ({ title, modal, content, subheader, secondary, sx, ...props }: SimpleFormProps) => {
+  const cardTitle = useResourceTitle(title);
+  const record = useRecordContext();
   return (
+    // @ts-ignore
     <MainCard
       content={content}
       title={cardTitle}
       subheader={subheader}
       secondary={record?.id ? secondary : null}
+      sx={sx}
       border={!modal}
       divider
     >
+      {/* @ts-ignore */}
       <ApplicaStyledSimpleForm toolbar={<Toolbar />} {...props} />
     </MainCard>
-  )
-}
+  );
+};
 
 SimpleForm.defaultProps = {
-  ...RaSimpleForm.defaultProps,
   modal: false,
   content: false,
   subheader: null,
   title: null,
   toolbar: (
     <Toolbar>
-      <SaveButton />
+      <SaveButton type="button" />
     </Toolbar>
   ),
   secondary: (
     <ActionsMenu>
       <DeleteWithConfirmButton />
     </ActionsMenu>
-  ),
-}
+  )
+};
 
 SimpleForm.propTypes = {
   ...RaSimpleForm.propTypes,
-  contained: PropTypes.bool,
+  modal: PropTypes.bool,
   content: PropTypes.bool,
+  contained: PropTypes.bool,
   subheader: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-}
+  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object])
+};
 
-export default SimpleForm
+export default SimpleForm;

package/src/index.jsx

@@ -22,6 +22,7 @@ export {
   DeleteWithConfirmButton,
   DeleteWithUndoButton,
   EditButton,
+  EditContextProvider,
   FieldTitle,
   email,
   Form,
@@ -48,7 +49,9 @@ export {
   UrlField,
   useArrayInput,
   useAuthProvider,
+  useCreateController,
   useDataProvider,
+  useEditContext,
   useGetIdentity,
   useGetList,
   useGetMany,

package/dist/components/ra-forms/SimpleForm.d.ts

@@ -1,26 +0,0 @@
-export default SimpleForm;
-declare function SimpleForm({ title, modal, content, subheader, secondary, ...props }: {
-    [x: string]: any;
-    title: any;
-    modal: any;
-    content: any;
-    subheader: any;
-    secondary: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleForm {
-    const defaultProps: any;
-    const propTypes: {
-        contained: PropTypes.Requireable<boolean>;
-        content: PropTypes.Requireable<boolean>;
-        subheader: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        secondary: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        defaultValues: PropTypes.Requireable<object>;
-        record: PropTypes.Requireable<object>;
-        toolbar: PropTypes.Requireable<NonNullable<boolean | PropTypes.ReactElementLike>>;
-        validate: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}
-import PropTypes from 'prop-types';
-//# sourceMappingURL=SimpleForm.d.ts.map

package/dist/components/ra-forms/SimpleForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleForm.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-forms/SimpleForm.jsx"],"names":[],"mappings":";AAwBA;;;;;;;4CAeC;;;;;;;;;;;;;;;;sBA9BqB,YAAY"}