@applica-software-guru/react-admin 1.1.113 → 1.2.115

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

@@ -1,122 +0,0 @@
-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';
-
-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,
-  hidden,
-  unmountOnExit,
-  label,
-  icon,
-  value,
-  syncWithLocation,
-  selected,
-  onChange,
-  children,
-  badgeColor,
-  badgeContent,
-  ...props
-}: LongFormTabProps) => {
-  const translate = useTranslate();
-  const location = useLocation();
-  const propsForLink = {
-    component: Link,
-    to: { ...location, pathname: 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}>
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
-      <ListItemText primary={tabLabel} />
-      {badgeContent && (
-        <ListItemSecondaryAction>
-          <Avatar
-            sx={{
-              width: 24,
-              height: 24,
-              fontSize: 12,
-              // @ts-ignore
-              backgroundColor: (theme) => theme.palette[badgeColor]?.main,
-              // @ts-ignore
-              color: (theme) => theme.palette[badgeColor]?.contrastText
-            }}
-          >
-            {badgeContent}
-          </Avatar>
-        </ListItemSecondaryAction>
-      )}
-    </ListItemButton>
-  );
-
-  const renderContent = () =>
-    unmountOnExit && hidden ? null : (
-      <FormGroupContextProvider name={value.toString()}>
-        <Stack
-          alignContent={'stretch'}
-          style={hidden ? hiddenStyle : {}}
-          id={`tabpanel-${value}`}
-          aria-labelledby={`tabheader-${value}`}
-          // Set undefined instead of false because WAI-ARIA Authoring Practices 1.1
-          // notes that aria-hidden="false" currently behaves inconsistently across browsers.
-          aria-hidden={hidden || undefined}
-          {...props}
-        >
-          {children}
-        </Stack>
-      </FormGroupContextProvider>
-    );
-
-  return intent === 'header' ? renderTab() : renderContent();
-};
-
-LongFormTab.propTypes = {
-  intent: PropTypes.oneOf(['header', 'content', 'sidebar']),
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  url: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  syncWithLocation: PropTypes.bool,
-  onChange: PropTypes.func,
-  selected: PropTypes.bool,
-  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])
-};
-
-LongFormTab.defaultProps = {
-  badgeColor: 'default',
-  unmountOnExit: false
-};
-
-export default LongFormTab;

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

@@ -1,72 +0,0 @@
-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

@@ -1,161 +0,0 @@
-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': {
-    position: 'initial',
-    marginTop: theme.spacing(2),
-    marginLeft: `-${theme.spacing(3)}`,
-    marginRight: `-${theme.spacing(3)}`,
-    marginBottom: `-${theme.spacing(2)}`,
-    borderTop: `1px solid ${theme.palette.divider}`,
-    [theme.breakpoints.down('sm')]: {
-      position: 'initial !important',
-      width: 'auto !important'
-    }
-  },
-  '& 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,
-    marginRight: `-${theme.spacing(0.5)}`,
-    [theme.breakpoints.down('sm')]: {
-      marginRight: theme.spacing(0.5)
-    }
-  }
-}));
-
-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/src/components/ra-forms/LongForm/index.tsx

@@ -1,2 +0,0 @@
-import LongForm from './LongForm';
-export default LongForm;

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

@@ -1,21 +0,0 @@
-import { matchPath, useLocation } from 'react-router-dom';
-
-/**
- * Restituisce il path di base del form in base ad una serie di specifici match di path che è possibile incontrare.
- */
-const useFormRootPath = (): string => {
-  const location = useLocation();
-  // I possibili match sono ordinati per priorità (è fondamentale).
-  const allPossibleMatches = ['entities/:resource/create/*', ':resource/create/*', 'entities/:resource/:id/*', ':resource/:id/*'];
-
-  for (const possibleMatch of allPossibleMatches) {
-    const match = matchPath(possibleMatch, location.pathname);
-    if (match) {
-      return match.pathnameBase;
-    }
-  }
-
-  return '';
-};
-
-export default useFormRootPath;