@applica-software-guru/react-admin 1.3.136 → 1.3.138

package/package.json

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

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

@@ -0,0 +1,145 @@
+import PropTypes from 'prop-types';
+import { Pagination, ReferenceManyField as RaReferenceManyField, ReferenceManyFieldProps as RaReferenceManyFieldProps } from 'react-admin';
+import { styled } from '@mui/system';
+import React from 'react';
+
+export type StyledDivProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+export type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
+  /**
+   * Default false, serve ad aggiungere un margine attorno al componente.
+   */
+  margin?: boolean;
+  /**
+   * Default false, serve ad aggiungere un bordo inferiore al componente.
+   */
+  border?: boolean;
+  /**
+   * Default undefined, serve ad aggiungere un padding superiore al componente per consentire
+   * la visualizzazione della toolbar delle bulk action buttons.
+   */
+  bulkActionButtons?: boolean | any;
+};
+
+export type StyledRootProps = ReferenceManyFieldProps & {
+  theme?: any;
+  bulkActionButtons?: boolean | any;
+};
+const StyledDiv = function ({ children, className }: StyledDivProps) {
+  return <div className={className}>{children}</div>;
+};
+
+StyledDiv.defaultProps = {
+  children: null,
+  className: ''
+};
+
+StyledDiv.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+
+const StyledRoot = styled(StyledDiv, {
+  name: 'RaApplicaReferenceManyField',
+  slot: 'root'
+})(({ theme, margin, border, bulkActionButtons }: StyledRootProps) => {
+  return {
+    marginLeft: !margin ? `-${theme.spacing(2.5)}` : 0,
+    marginRight: !margin ? `-${theme.spacing(2.5)}` : 0,
+    borderBottom: border ? `1px solid ${theme.palette.divider}` : 'none',
+    '& form': {
+      padding: theme.spacing(2)
+    },
+    '& .MuiCardContent-root': {
+      borderTop: border ? `1px solid ${theme.palette.divider}` : 'none'
+    },
+    '& .MuiToolbar-root': {
+      [theme.breakpoints.up('sm')]: {
+        marginTop: `-${theme.spacing(2)}`,
+        marginBottom: theme.spacing(margin ? 0 : 1),
+        marginLeft: theme.spacing(margin ? 1 : 2),
+        marginRight: theme.spacing(margin ? 1 : 2),
+        width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`
+      },
+      [theme.breakpoints.down('md')]: {
+        marginTop: 0
+      }
+    },
+    '& .RaDatagrid-root': {
+      overflowX: 'auto',
+      paddingTop: bulkActionButtons === false ? 0 : 48,
+      [theme.breakpoints.down('sm')]: {
+        width: 'calc(100vw - 34px)'
+      }
+    },
+    '& .RaDatagrid-table': {
+      borderBottom: `1px solid ${theme.palette.divider}`
+    },
+    '& .MuiTablePagination-toolbar': {
+      marginTop: theme.spacing(1),
+      marginBottom: 0
+    },
+    '& .RaBulkActionsToolbar-collapsed.RaBulkActionsToolbar-toolbar': {
+      minHeight: 0
+    },
+    '& .RaBulkActionsToolbar-toolbar': {
+      minHeight: 48,
+      bottom: -56,
+      '& h6': {
+        marginTop: theme.spacing(0.5)
+      },
+      '& .RaBulkActionsToolbar-topToolbar': {
+        marginTop: theme.spacing(1)
+      },
+      [theme.breakpoints.down('sm')]: {
+        bottom: -48,
+        borderRadius: 0
+      }
+    }
+  };
+});
+
+/**
+ * Consente di gestire la visualizzazione di una lista di record correlati ad un record principale.
+ * Questo componente è una versione customizzata del componente ReferenceManyField di React-Admin.
+ *
+ * Se vuoi visualizzare record e non mostrare l'elenco delle azioni disponibili (bulk action buttons)
+ * puoi impostare la prop bulkActionButtons a false e, successivamente, se utilizzi un componente interno di tipo <Datagrid />
+ * devi impostare la stessa proprietà, bulkActionButtons, a false (in questo modo viene completamente eliminato il padding
+ * superiore del componente <Datagrid />).
+ *
+ * @example
+ * import { ReferenceManyField, Datagrid } from '@applica-software-guru/react-admin';
+ *
+ * const MyComponent = (props) => (
+ *  <ReferenceManyField {...props} bulkActionButtons={false}>
+ *    <Datagrid bulkActionButtons={false}>
+ *     ...
+ *   </Datagrid>
+ * </ReferenceManyField>
+ *
+ * @param props {ReferenceManyFieldProps}
+ * @returns {JSX.Element}
+ */
+const ReferenceManyField = (props: ReferenceManyFieldProps) => (
+  <StyledRoot {...props}>
+    {/** @ts-ignore */}
+    <RaReferenceManyField pagination={<Pagination />} {...props} />
+  </StyledRoot>
+);
+
+ReferenceManyField.defaultProps = {
+  margin: false,
+  border: false
+};
+
+ReferenceManyField.propTypes = {
+  ...RaReferenceManyField.propTypes,
+  margin: PropTypes.bool,
+  border: PropTypes.bool
+};
+
+export default ReferenceManyField;

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

@@ -21,7 +21,8 @@ const StyledGrid = styled(Grid, {
     borderTop: `1px solid ${theme.palette.divider}`,
     [theme.breakpoints.down('sm')]: {
       position: 'initial !important',
-      width: 'auto !important'
+      width: 'auto !important',
+      marginRight: 0
     }
   },
   '& form > .MuiToolbar-root': {

package/src/components/ra-fields/ReferenceManyField.jsx

@@ -1,80 +0,0 @@
-import PropTypes from 'prop-types';
-import { Pagination, ReferenceManyField as RaReferenceManyField } from 'react-admin';
-import { styled } from '@mui/system';
-const StyledRoot = styled('div', {
-  name: 'RaApplicaReferenceManyField',
-  slot: 'root'
-})(({ theme, margin, border }) => ({
-  marginLeft: !margin ? `-${theme.spacing(2.5)}` : 0,
-  marginRight: !margin ? `-${theme.spacing(2.5)}` : 0,
-  borderBottom: border ? `1px solid ${theme.palette.divider}` : 'none',
-  '& form': {
-    padding: theme.spacing(2)
-  },
-  '& .MuiCardContent-root': {
-    borderTop: border ? `1px solid ${theme.palette.divider}` : 'none'
-  },
-  '& .MuiToolbar-root': {
-    [theme.breakpoints.up('sm')]: {
-      marginTop: `-${theme.spacing(2)}`,
-      marginBottom: theme.spacing(margin ? 0 : 1),
-      marginLeft: theme.spacing(margin ? 1 : 2),
-      marginRight: theme.spacing(margin ? 1 : 2),
-      width: margin ? 'auto' : `calc(100% - ${theme.spacing(5)})`
-    },
-    [theme.breakpoints.down('md')]: {
-      marginTop: 0
-    }
-  },
-  '& .RaDatagrid-root': {
-    overflowX: 'auto',
-    paddingTop: 48,
-    [theme.breakpoints.down('sm')]: {
-      width: 'calc(100vw - 34px)'
-    }
-  },
-  '& .RaDatagrid-table': {
-    borderBottom: `1px solid ${theme.palette.divider}`
-  },
-  '& .MuiTablePagination-toolbar': {
-    marginTop: theme.spacing(1),
-    marginBottom: 0
-  },
-  '& .RaBulkActionsToolbar-collapsed.RaBulkActionsToolbar-toolbar': {
-    minHeight: 0
-  },
-  '& .RaBulkActionsToolbar-toolbar': {
-    minHeight: 48,
-    bottom: -56,
-    '& h6': {
-      marginTop: theme.spacing(0.5)
-    },
-    '& .RaBulkActionsToolbar-topToolbar': {
-      marginTop: theme.spacing(1)
-    },
-    [theme.breakpoints.down('sm')]: {
-      bottom: -48,
-      borderRadius: 0
-    }
-  }
-}));
-
-const ReferenceManyField = (props) => (
-  <StyledRoot>
-    <RaReferenceManyField pagination={<Pagination />} {...props} />
-  </StyledRoot>
-);
-
-ReferenceManyField.defaultProps = {
-  ...RaReferenceManyField.defaultProps,
-  margin: false,
-  border: false
-};
-
-ReferenceManyField.propTypes = {
-  ...RaReferenceManyField.propTypes,
-  margin: PropTypes.bool,
-  border: PropTypes.bool
-};
-
-export default ReferenceManyField;