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

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

@@ -0,0 +1,82 @@
+import { useRecordContext, useTranslate } from 'ra-core';
+
+import PropTypes from 'prop-types';
+import { Typography } from '@mui/material';
+import { get } from 'lodash';
+import { styled } from '@mui/material/styles';
+
+const Root = styled('div', {
+  name: 'ApplicaBaseAttachmentField',
+  overridesResolver: (props, styles) => styles.root
+})({
+  display: 'inline-block'
+});
+
+const StyledList = styled('ul')({
+  display: 'inline-block'
+});
+
+export type BaseAttachmentFieldProps = {
+  src: string;
+  title: string | ((record: any) => string) | JSX.Element;
+  target: string;
+  download: boolean | string;
+  ping: string;
+  rel: string;
+  emptyText: string;
+  source: string;
+  className: string;
+  disabled?: boolean;
+  record: any;
+  onClick: (e: any) => void;
+};
+
+export const BaseAttachmentField = (props: BaseAttachmentFieldProps): JSX.Element | any => {
+  const { className, emptyText, source, title, ...rest } = props;
+  const record = useRecordContext(props);
+  const sourceValue = get(record, source);
+  const translate = useTranslate();
+
+  if (!sourceValue) {
+    return emptyText ? (
+      <Typography component="span" variant="body2" className={className} {...rest}>
+        {emptyText && translate(emptyText, { _: emptyText })}
+      </Typography>
+    ) : (
+      <Root className={className} {...rest} />
+    );
+  }
+
+  if (Array.isArray(sourceValue)) {
+    return (
+      <StyledList className={className} {...rest}>
+        {sourceValue.map((file, index) => {
+          const fileTitleValue = title instanceof String ? get(file, title as string)?.toString() : title;
+          return <li key={index}>{fileTitleValue}</li>;
+        })}
+      </StyledList>
+    );
+  }
+
+  const titleValue = title instanceof String ? get(record, title as string)?.toString() : title;
+
+  return (
+    <Root className={className} {...rest}>
+      {titleValue}
+    </Root>
+  );
+};
+
+BaseAttachmentField.propTypes = {
+  className: PropTypes.string,
+  emptyText: PropTypes.string,
+  source: PropTypes.string.isRequired,
+  src: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  target: PropTypes.string,
+  download: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  ping: PropTypes.string,
+  rel: PropTypes.string
+};
+
+export default BaseAttachmentField;

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/FormHeader.tsx

@@ -0,0 +1,63 @@
+import { CardHeader, Divider } from '@mui/material';
+
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useTranslate } from 'react-admin';
+
+const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
+  marginTop: theme.spacing(4),
+  marginLeft: 0,
+  marginRight: 0,
+  paddingLeft: 0,
+  paddingRight: 0
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  marginLeft: `-${theme.spacing(2.5)}`,
+  marginRight: `-${theme.spacing(2.5)}`,
+  marginBottom: theme.spacing(2),
+  width: `calc(100% + ${theme.spacing(5)})`
+}));
+
+export type FormHeaderProps = {
+  title: string;
+  divider?: boolean;
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+/**
+ * Componente che implementa l'header di una form.
+ * Può essere inserito all'interno di un CardForm o di un SimpleForm e mostra un titolo
+ * con divider che copre l'intera larghezza della form.
+ *
+ * @param {FormHeaderProps} props
+ * @returns {JSX.Element}
+ */
+const FormHeader = ({ title, divider, variant }: FormHeaderProps): JSX.Element => {
+  const translate = useTranslate();
+  return (
+    <Fragment>
+      <StyledCardHeader
+        title={translate(title, { _: title })}
+        titleTypographyProps={{
+          variant
+        }}
+      />
+      {divider && <StyledDivider />}
+    </Fragment>
+  );
+};
+
+FormHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  divider: PropTypes.bool,
+  variant: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])
+};
+
+FormHeader.defaultProps = {
+  divider: true,
+  variant: 'h4'
+};
+
+export default FormHeader;

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

@@ -0,0 +1,59 @@
+import { Disposition, DispositionProps } from './types';
+
+import { Form } from 'react-admin';
+import LongFormSidebar from './LongFormSidebar';
+import LongFormTab from './LongFormTab';
+import LongFormView from './LongFormView';
+import PropTypes from 'prop-types';
+import useFormRootPath from './useFormRootPath';
+import { useThemeConfig } from '../../../hooks';
+
+export type LongFormProps = {
+  syncWithLocation?: boolean;
+  spacing?: number;
+  tabsDisposition?: Disposition;
+  contentDisposition?: Disposition;
+  children: React.ReactNode;
+  sticky?: boolean;
+};
+
+/**
+ * Consente di disegnare un form di tipo LongForm secondo la documentazione di React-Admin.
+ *
+ * @link https://marmelab.com/react-admin/LongForm.html
+ *
+ * @param {LongFormProps}
+ * @returns {JSX.Element}
+ */
+const LongForm = ({ spacing: _spacing, ...props }: LongFormProps): JSX.Element => {
+  const formRootPathname = useFormRootPath();
+  const { spacing: _themeSpacing } = useThemeConfig();
+  const spacing = _spacing || _themeSpacing;
+  return (
+    <Form formRootPathname={formRootPathname} {...props}>
+      {/** @ts-ignore */}
+      <LongFormView formRootPathname={formRootPathname} {...props} spacing={spacing} />
+    </Form>
+  );
+};
+
+LongForm.propTypes = {
+  syncWithLocation: PropTypes.bool,
+  spacing: PropTypes.number,
+  tabsDisposition: 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 }
+};
+
+LongForm.Tab = LongFormTab;
+LongForm.Sidebar = LongFormSidebar;
+
+export default LongForm;

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

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useMediaQuery } from '@mui/material';
+
+const StyledSidebar = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2)
+}));
+
+export type LongFormSidebarProps = {
+  visibility?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  position: 'top' | 'bottom';
+  children: React.ReactNode;
+};
+
+/**
+ * Consente di specificare, all'interno di un form di tipo LongForm, una sezione da visualizzare prima o dopo i tab di navigazione.
+ * @example
+ * <LongForm>
+ *  <LongForm.Sidebar position="top">Contenuto prima della navigazione</LongForm.Sidebar>
+ *  <LongForm.Tab>Tab 1</LongForm.Tab>
+ *  <LongForm.Tab>Tab 2</LongForm.Tab>
+ *  <LongForm.Sidebar position="bottom">Contenuto dopo la navigazione</LongForm.Sidebar>
+ * </LongForm>
+ *
+ * @param {LongFormSidebarProps}
+ * @returns {JSX.Element | null}
+ */
+const LongFormSidebar = ({ children, visibility }: LongFormSidebarProps): JSX.Element | null => {
+  const isVisible = useMediaQuery((theme: any) => theme.breakpoints.up(visibility));
+  return isVisible ? <StyledSidebar>{children}</StyledSidebar> : null;
+};
+
+LongFormSidebar.propTypes = {
+  visibility: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),
+  position: PropTypes.oneOf(['top', 'bottom']).isRequired,
+  children: PropTypes.node.isRequired
+};
+
+LongFormSidebar.defaultProps = {
+  position: 'top',
+  visibility: 'md'
+};
+
+export default LongFormSidebar;

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

@@ -1,19 +1,30 @@
-import {
-  Avatar,
-  ListItemButton,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-  Stack,
-} from '@mui/material'
-import { FormGroupContextProvider, useTranslate } from 'react-admin'
-import React, { useCallback } from 'react'
+import { Avatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack } from '@mui/material';
+import { FormGroupContextProvider, useTranslate } from 'react-admin';
+import React, { useCallback } from 'react';
 
-import { Link } from 'react-router-dom'
-import PropTypes from 'prop-types'
-import { useLocation } from 'react-router'
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { useLocation } from 'react-router';
 
-const hiddenStyle = { display: 'none' }
+const hiddenStyle = { display: 'none' };
+
+export type LongFormTabProps = {
+  intent: 'header' | 'content' | 'sidebar';
+  className?: string;
+  contentClassName?: string;
+  url?: string;
+  icon?: React.ReactNode;
+  label: string | React.ReactNode;
+  value: string | number;
+  syncWithLocation?: boolean;
+  onChange: (value: string | number) => void;
+  selected?: boolean;
+  hidden?: boolean;
+  unmountOnExit?: boolean;
+  children?: React.ReactNode;
+  badgeColor?: 'default' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning';
+  badgeContent?: string | number;
+};
 
 const LongFormTab = ({
   intent,
@@ -29,23 +40,19 @@ const LongFormTab = ({
   badgeColor,
   badgeContent,
   ...props
-}) => {
-  const translate = useTranslate()
-  const location = useLocation()
+}: LongFormTabProps) => {
+  const translate = useTranslate();
+  const location = useLocation();
   const propsForLink = {
     component: Link,
-    to: { ...location, pathname: value },
-  }
+    to: { ...location, pathname: value }
+  };
 
-  const tabLabel = React.isValidElement(label) ? label : translate(label, { _: label })
-  const handleChange = useCallback(() => onChange(value), [onChange, value])
+  const tabLabel = React.isValidElement(label) ? label : translate(label as string, { _: label });
+  const handleChange = useCallback(() => onChange(value), [onChange, value]);
 
   const renderTab = () => (
-    <ListItemButton
-      selected={selected}
-      {...(syncWithLocation ? propsForLink : {})}
-      onClick={handleChange}
-    >
+    <ListItemButton selected={selected} {...(syncWithLocation ? propsForLink : {})} onClick={handleChange}>
       {icon && <ListItemIcon>{icon}</ListItemIcon>}
       <ListItemText primary={tabLabel} />
       {badgeContent && (
@@ -55,8 +62,10 @@ const LongFormTab = ({
               width: 24,
               height: 24,
               fontSize: 12,
+              // @ts-ignore
               backgroundColor: (theme) => theme.palette[badgeColor]?.main,
-              color: (theme) => theme.palette[badgeColor]?.contrastText,
+              // @ts-ignore
+              color: (theme) => theme.palette[badgeColor]?.contrastText
             }}
           >
             {badgeContent}
@@ -64,14 +73,14 @@ const LongFormTab = ({
         </ListItemSecondaryAction>
       )}
     </ListItemButton>
-  )
+  );
 
   const renderContent = () =>
     unmountOnExit && hidden ? null : (
       <FormGroupContextProvider name={value.toString()}>
         <Stack
           alignContent={'stretch'}
-          style={hidden ? hiddenStyle : null}
+          style={hidden ? hiddenStyle : {}}
           id={`tabpanel-${value}`}
           aria-labelledby={`tabheader-${value}`}
           // Set undefined instead of false because WAI-ARIA Authoring Practices 1.1
@@ -82,10 +91,10 @@ const LongFormTab = ({
           {children}
         </Stack>
       </FormGroupContextProvider>
-    )
+    );
 
-  return intent === 'header' ? renderTab() : renderContent()
-}
+  return intent === 'header' ? renderTab() : renderContent();
+};
 
 LongFormTab.propTypes = {
   intent: PropTypes.oneOf(['header', 'content', 'sidebar']),
@@ -101,21 +110,13 @@ LongFormTab.propTypes = {
   hidden: PropTypes.bool,
   unmountOnExit: PropTypes.bool,
   children: PropTypes.node,
-  badgeColor: PropTypes.oneOf([
-    'default',
-    'error',
-    'info',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]),
-  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-}
+  badgeColor: PropTypes.oneOf(['default', 'error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  badgeContent: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
 
 LongFormTab.defaultProps = {
   badgeColor: 'default',
-  unmountOnExit: false,
-}
+  unmountOnExit: false
+};
 
-export default LongFormTab
+export default LongFormTab;

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

@@ -0,0 +1,72 @@
+import { matchPath, useLocation } from 'react-router';
+
+import { List } from '@mui/material';
+import MainCard from '../../MainCard';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { styled } from '@mui/system';
+
+const StyledList = styled(List, {
+  name: 'RaLongFormTabs',
+  slot: 'Root'
+})(({ theme }) => ({
+  p: 0,
+  '& .MuiListItemIcon-root': {
+    minWidth: 32,
+    color: theme.palette.grey[500]
+  },
+  '& .MuiListItemButton-root.Mui-selected': {
+    borderRight: `2px solid ${theme.palette.primary.main}`,
+    marginRight: `-2px`
+  }
+}));
+
+export type LongFormTabsProps = {
+  children: React.ReactNode;
+  syncWithLocation?: boolean;
+  value: string | number;
+  url: string;
+  onChange: (value: string | number) => void;
+};
+
+const LongFormTabs = ({ children, syncWithLocation, value, url, onChange }: LongFormTabsProps) => {
+  const location = useLocation();
+
+  return (
+    // @ts-ignore
+    <MainCard>
+      {/** @ts-ignore */}
+      <StyledList component="nav">
+        {React.Children.map(children, (tab, index) => {
+          if (!React.isValidElement(tab)) return null;
+          const tabPath = getTabbedFormTabFullPath(tab, index);
+          const selected = syncWithLocation ? !!matchPath(`${url}/${tabPath}`, location.pathname) : index === value;
+
+          return React.cloneElement(tab, {
+            // @ts-ignore
+            intent: 'header',
+            value: syncWithLocation ? tabPath : index,
+            syncWithLocation,
+            onChange,
+            url,
+            selected
+          });
+        })}
+      </StyledList>
+    </MainCard>
+  );
+};
+
+export const getTabbedFormTabFullPath = (tab: any, index: number) =>
+  tab.props.path != null ? tab.props.path : index > 0 ? index.toString() : '';
+
+LongFormTabs.propTypes = {
+  children: PropTypes.node,
+  url: PropTypes.string,
+  tabsWithErrors: PropTypes.arrayOf(PropTypes.string),
+  syncWithLocation: PropTypes.bool,
+  onChange: PropTypes.func,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+
+export default LongFormTabs;

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

@@ -0,0 +1,152 @@
+import { Disposition, DispositionProps } from './types';
+import React, { Fragment, useMemo, useState } from 'react';
+import { Route, Routes, matchPath, useLocation, useResolvedPath } from 'react-router';
+import { getTabbedFormTabFullPath, useResourceContext } from 'react-admin';
+
+import { Grid } from '@mui/material';
+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: 'ApplicaLongFormView',
+  slot: 'Root'
+})(({ theme }) => ({
+  '& .MuiToolbar-root': {
+    marginTop: theme.spacing(2),
+    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
+  }
+}));
+
+const isSidebar = (child: any, position: string) => child && child.type === LongFormHeader && child.props.position === position;
+const isTab = (child: any) => child && child.type === LongFormTab;
+
+export type LongFormViewProps = {
+  children: React.ReactNode;
+  formRootPathname: string;
+  syncWithLocation?: boolean;
+  spacing: number;
+  tabs: React.ReactElement;
+  tabsDisposition: Disposition;
+  contentDisposition: Disposition;
+  sticky?: boolean;
+};
+
+const LongFormView = ({
+  children,
+  formRootPathname,
+  syncWithLocation,
+  spacing,
+  tabs,
+  tabsDisposition,
+  contentDisposition,
+  sticky,
+  ...props
+}: LongFormViewProps) => {
+  const [tabValue, setTabValue] = useState(0);
+  const resolvedPath = useResolvedPath('');
+  const resource = useResourceContext(props);
+  const location = useLocation();
+  const topSidebars = useMemo(() => React.Children.toArray(children).find((child) => isSidebar(child, 'top')), [children]);
+  const bottomSidebars = useMemo(() => React.Children.toArray(children).find((child) => isSidebar(child, 'bottom')), [children]);
+  const tabChildrens = useMemo(() => React.Children.toArray(children).filter((child) => isTab(child)), [children]);
+
+  const handleTabChange = (value: number) => {
+    if (!syncWithLocation) {
+      setTabValue(value);
+    }
+  };
+  const renderTabs = () =>
+    React.cloneElement(
+      tabs,
+      {
+        onChange: handleTabChange,
+        syncWithLocation,
+        url: formRootPathname,
+        value: tabValue,
+        intent: 'header'
+      },
+      tabChildrens
+    );
+  const sidebarContent = useMemo(
+    () => (
+      <Fragment>
+        {topSidebars}
+        {syncWithLocation ? (
+          <Routes>
+            <Route path="/*" element={renderTabs()} />
+          </Routes>
+        ) : (
+          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
+            use to hide the tab using CSS if it's not the one in focus.
+            See https://github.com/marmelab/react-admin/issues/1866 */}
+        {React.Children.map(tabChildrens, (tab: any, index: number) => {
+          if (!tab) {
+            return null;
+          }
+          const tabPath = getTabbedFormTabFullPath(tab, index);
+          const hidden = syncWithLocation ? !matchPath(`${resolvedPath.pathname}/${tabPath}`, location.pathname) : tabValue !== index;
+
+          return React.isValidElement(tab)
+            ? React.cloneElement(tab, {
+                // @ts-ignore
+                intent: 'content',
+                resource,
+                hidden,
+                value: syncWithLocation ? tabPath : index
+              })
+            : null;
+        })}
+      </Grid>
+    </StyledGrid>
+  );
+};
+
+LongFormView.propTypes = {
+  children: PropTypes.node,
+  spacing: PropTypes.number,
+  syncWithLocation: PropTypes.bool,
+  tabs: PropTypes.element,
+  formRootPathname: PropTypes.string,
+  tabsDisposition: DispositionProps,
+  contentDisposition: DispositionProps
+};
+
+LongFormView.defaultProps = {
+  // @ts-ignore
+  tabs: <LongFormTabs />
+};
+
+export default LongFormView;

package/{dist/components/ra-forms/LongForm/index.d.ts → src/components/ra-forms/LongForm/index.tsx}

@@ -1,3 +1,2 @@
-export default LongForm;
 import LongForm from './LongForm';
-//# sourceMappingURL=index.d.ts.map
+export default LongForm;

package/src/components/ra-forms/LongForm/types.ts

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+export type Disposition = {
+  xl?: number;
+  lg?: number;
+  md?: number;
+  sm?: number;
+  xs?: number;
+};
+export const DispositionProps = PropTypes.shape({
+  xl: PropTypes.number,
+  lg: PropTypes.number,
+  md: PropTypes.number,
+  sm: PropTypes.number,
+  xs: PropTypes.number
+});