@applica-software-guru/react-admin 1.2.117 → 1.2.119

package/package.json

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

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

@@ -4,8 +4,7 @@ import { Card, Collapse, List, ListItem, ListItemProps, ListItemIcon, ListItemTe
 import { useSetActiveItem, useSyncWithLocation } from './Provider';
 import { IItem } from './types';
 import { useCallback, useMemo, useState } from 'react';
-import { useNavigate } from 'react-router';
-import { useChildren, useIsActive } from './hooks';
+import { useChildren, useIsActive, useNavigateForm } from './hooks';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 import { getLevel } from './utils';
 import { useThemeConfig } from '../../../hooks';
@@ -93,7 +92,7 @@ function useNavMenuItem(
   const { id } = item,
     isActive = useIsActive(id),
     level = getLevel(id),
-    navigate = useNavigate(),
+    navigate = useNavigateForm(),
     syncWithLocation = useSyncWithLocation(),
     setActiveItem = useSetActiveItem(),
     items = useChildren(id),

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

@@ -1,10 +1,11 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useReducer } from 'react';
 import _ from 'lodash';
 import { IItem } from './types';
-import { useLocation } from 'react-router';
+import { matchPath, useLocation } from 'react-router';
 import { getItemsIds } from './utils';
 
 enum ActionType {
+  SET_FORM_ROOT_PATH = 'setFormRootPath',
   SET_SYNC_WITH_LOCATION = 'setSyncWithLocation',
   SET_ACTIVE_ITEM = 'setActiveItem',
   ADD_ITEM = 'addItem',
@@ -13,13 +14,19 @@ enum ActionType {
 
 type IProviderProps = React.PropsWithChildren<{
   syncWithLocation?: boolean;
+  rootMatchString?: string;
 }>;
 type IState = {
+  formRootPath?: string;
   syncWithLocation: boolean;
   items: Array<IItem>;
   activeItem?: string;
 };
 type IAction =
+  | {
+      type: ActionType.SET_FORM_ROOT_PATH;
+      payload: string;
+    }
   | {
       type: ActionType.SET_SYNC_WITH_LOCATION;
       payload: boolean;
@@ -46,6 +53,8 @@ function reducer(state: IState, action: IAction): IState {
   const newState = _.clone(state),
     { type, payload } = action;
   switch (type) {
+    case ActionType.SET_FORM_ROOT_PATH:
+      return _.extend(newState, { formRootPath: payload });
     case ActionType.SET_SYNC_WITH_LOCATION:
       return _.extend(newState, { syncWithLocation: payload });
     case ActionType.SET_ACTIVE_ITEM:
@@ -85,11 +94,40 @@ const Context = createContext<IContext | undefined>(undefined);
 
 function Provider(props: IProviderProps) {
   const syncWithLocation = Boolean(props.syncWithLocation ?? true),
+    { rootMatchString } = props,
     { pathname } = useLocation(),
     [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState)),
-    { items } = state,
+    { formRootPath, items } = state,
     value = useMemo(() => ({ state: state, dispatch: dispatch }), [state, dispatch]);
 
+  useEffect(() => {
+    // I possibili match sono ordinati per priorità (è fondamentale).
+    const matchStrings = [
+      'entities/:resource/create/*',
+      ':resource/create/*',
+      'entities/:resource/:id/show',
+      ':resource/:id/show',
+      'entities/:resource/:id/*',
+      ':resource/:id/*'
+    ];
+    if (rootMatchString !== undefined) {
+      matchStrings.push(rootMatchString);
+    }
+    const match = _.chain(matchStrings)
+        .map((s) => matchPath(s, pathname))
+        .reject((m) => m === null)
+        .first()
+        .value(),
+      pathnameBase = match?.pathnameBase;
+
+    if (pathnameBase !== undefined && pathnameBase !== formRootPath) {
+      dispatch({
+        type: ActionType.SET_FORM_ROOT_PATH,
+        payload: pathnameBase
+      });
+    }
+  }, [pathname, formRootPath, rootMatchString]);
+
   useEffect(() => {
     dispatch({
       type: ActionType.SET_SYNC_WITH_LOCATION,
@@ -98,16 +136,14 @@ function Provider(props: IProviderProps) {
   }, [syncWithLocation, dispatch]);
 
   useEffect(() => {
-    if (syncWithLocation) {
-      const match = pathname.match(/([^/]+)$/);
-      if (match && match[0]) {
-        dispatch({
-          type: ActionType.SET_ACTIVE_ITEM,
-          payload: match[0]
-        });
-      }
+    if (syncWithLocation && formRootPath !== undefined) {
+      const locationItem = pathname.replace(`${formRootPath}/`, '');
+      dispatch({
+        type: ActionType.SET_ACTIVE_ITEM,
+        payload: locationItem
+      });
     }
-  }, [dispatch, pathname, syncWithLocation, items]);
+  }, [dispatch, formRootPath, pathname, items]);
 
   return <Context.Provider value={value}>{props.children}</Context.Provider>;
 }
@@ -132,6 +168,11 @@ function useFormDispatch(): IDispatch {
   return context.dispatch;
 }
 
+function useFormRootPath(): string | undefined {
+  const state = useFormState();
+  return state.formRootPath;
+}
+
 function useActiveItem(): string | undefined {
   const state = useFormState();
   return state.activeItem;
@@ -192,5 +233,5 @@ function useRemoveItem(): (item: string | IItem) => void {
   return removeItem;
 }
 
-export { Provider, useItems, useSyncWithLocation, useActiveItem, useSetActiveItem, useAddItem, useRemoveItem };
+export { Provider, useItems, useSyncWithLocation, useFormRootPath, useActiveItem, useSetActiveItem, useAddItem, useRemoveItem };
 export type { IProviderProps };

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

@@ -1,8 +1,9 @@
 import _ from 'lodash';
-import { useMemo } from 'react';
-import { useActiveItem, useItems } from './Provider';
+import { useCallback, useMemo } from 'react';
+import { useActiveItem, useFormRootPath, useItems } from './Provider';
 import { IItem } from './types';
 import { getLevel, isChild } from './utils';
+import { useNavigate } from 'react-router';
 
 function useIsActive(id: string): boolean {
   const activeItem = useActiveItem();
@@ -22,4 +23,17 @@ function useChildren(id?: string): Array<IItem> {
   return children;
 }
 
-export { useChildren, useIsActive };
+function useNavigateForm(): (id: string) => void {
+  const formRootPath = useFormRootPath(),
+    navigate = useNavigate(),
+    navigateSection = useCallback(
+      (id: string) => {
+        navigate(`${formRootPath}/${id}`);
+      },
+      [formRootPath, navigate]
+    );
+
+  return navigateSection;
+}
+
+export { useChildren, useIsActive, useNavigateForm };

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

@@ -1,7 +1,16 @@
 import { Form } from './Form';
 import { BaseForm } from './BaseForm';
 import { Content } from './Content';
-import { Provider, useActiveItem, useItems, useSyncWithLocation, useSetActiveItem, useAddItem, useRemoveItem } from './Provider';
+import {
+  Provider,
+  useActiveItem,
+  useItems,
+  useSyncWithLocation,
+  useSetActiveItem,
+  useAddItem,
+  useRemoveItem,
+  useFormRootPath
+} from './Provider';
 import { Sidebar, SidebarSection, SidebarSectionPosition, useSidebarChildren } from './Sidebar';
 import { NavMenu, NavMenuItem, useNavMenuItem } from './NavMenu';
 import { Tab, Group, useBaseItemChildren } from './Tab';
@@ -12,6 +21,7 @@ type IForm = typeof Form & {
   Provider: typeof Provider;
   useItems: typeof useItems;
   useSyncWithLocation: typeof useSyncWithLocation;
+  useFormRootPath: typeof useFormRootPath;
   useActiveItem: typeof useActiveItem;
   useSetActiveItem: typeof useSetActiveItem;
   useAddItem: typeof useAddItem;
@@ -34,6 +44,7 @@ DefaultForm.Content = Content;
 DefaultForm.Provider = Provider;
 DefaultForm.useItems = useItems;
 DefaultForm.useSyncWithLocation = useSyncWithLocation;
+DefaultForm.useFormRootPath = useFormRootPath;
 DefaultForm.useActiveItem = useActiveItem;
 DefaultForm.useSetActiveItem = useSetActiveItem;
 DefaultForm.useAddItem = useAddItem;