@applica-software-guru/react-admin 1.2.120 → 1.2.123

package/package.json

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

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

@@ -3,7 +3,7 @@ import { matchPath, useLocation } from 'react-router';
 
 import { IItem } from './types';
 import _ from 'lodash';
-import { getItemsIds } from './utils';
+import { getChildren, getItemsIds, getLevel } from './utils';
 
 enum ActionType {
   SET_FORM_ROOT_PATH = 'setFormRootPath',
@@ -62,8 +62,12 @@ function reducer(state: IState, action: IAction): IState {
       return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
     case ActionType.ADD_ITEM: {
       const id = payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
-      items.push(payload);
+        items = _.chain(newState.items)
+          .clone()
+          .reject((item: IItem) => item.id === id)
+          .concat([payload])
+          .orderBy((item) => item.index)
+          .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === undefined) {
         _.extend(newState, { activeItem: payload.id });
@@ -72,7 +76,10 @@ function reducer(state: IState, action: IAction): IState {
     }
     case ActionType.REMOVE_ITEM: {
       const id = _.isString(payload) ? payload : payload.id,
-        items = _.reject(newState.items, (item: IItem) => item.id === id);
+        items = _.chain(newState.items)
+          .clone()
+          .reject((item: IItem) => item.id === id)
+          .value();
       _.extend(newState, { items: items });
       if (newState.activeItem === id) {
         _.extend(newState, { activeItem: _.first(items)?.id ?? undefined });
@@ -138,7 +145,15 @@ function Provider(props: IProviderProps) {
 
   useEffect(() => {
     if (syncWithLocation && formRootPath !== undefined) {
-      const locationItem = pathname.replace(`${formRootPath}/`, '');
+      let locationItem = pathname.replace(formRootPath, '').replace(new RegExp(/^\/?/), '');
+      if (_.isEmpty(locationItem)) {
+        locationItem =
+          _.chain(items)
+            .filter((item) => getChildren(item.id, items).length === 0)
+            .orderBy([(item) => getLevel(item.id), (item) => item.index])
+            .first()
+            .value()?.id ?? undefined;
+      }
       dispatch({
         type: ActionType.SET_ACTIVE_ITEM,
         payload: locationItem

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

@@ -7,12 +7,12 @@ import { IItem } from './types';
 import { useIsActive } from './hooks';
 import { getId } from './utils';
 
-type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id'>>;
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'>>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
 function BaseItem(props: IBaseItemProps) {
-  const { label, icon, badge } = props,
+  const { label, icon, badge, index = 0 } = props,
     id = getId(props),
     addItem = useAddItem(),
     removeItem = useRemoveItem(),
@@ -21,6 +21,7 @@ function BaseItem(props: IBaseItemProps) {
   useEffect(() => {
     addItem({
       id: id,
+      index: index,
       label: label,
       icon: icon,
       badge: badge
@@ -28,7 +29,7 @@ function BaseItem(props: IBaseItemProps) {
     return () => {
       removeItem(id);
     };
-  }, [addItem, removeItem, label, icon, id, badge]);
+  }, [addItem, removeItem, label, icon, id, badge, index]);
 
   /* 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
@@ -57,8 +58,12 @@ function Tab(props: ITabProps) {
 function useBaseItemChildren(props: React.PropsWithChildren): Array<React.FunctionComponentElement<IBaseItemProps>> {
   const { children } = props,
     result = useMemo<Array<React.FunctionComponentElement<IBaseItemProps>>>(
-      //@ts-ignore
-      () => _.filter(Children.toArray(children), (Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group)),
+      () =>
+        //@ts-ignore
+        _.chain(Children.toArray(children))
+          .filter((Child) => isValidElement(Child) && (Child?.type === Tab || Child?.type === Group))
+          .map((Child: React.FunctionComponentElement<IBaseItemProps>, index) => cloneElement(Child, { index: index }))
+          .value(),
       [children]
     );
   return result;

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

@@ -1,8 +1,7 @@
-import _ from 'lodash';
 import { useCallback, useMemo } from 'react';
 import { useActiveItem, useFormRootPath, useItems } from './Provider';
 import { IItem } from './types';
-import { getLevel, isChild } from './utils';
+import { getChildren, isChild } from './utils';
 import { useNavigate } from 'react-router';
 
 function useIsActive(id: string): boolean {
@@ -12,13 +11,7 @@ function useIsActive(id: string): boolean {
 
 function useChildren(id?: string): Array<IItem> {
   const items = useItems(),
-    level = id !== undefined ? getLevel(id) : 0,
-    children = useMemo(() => {
-      return _.chain(items)
-        .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
-        .filter((item) => getLevel(item.id) === level + 1)
-        .value();
-    }, [items, level, id]);
+    children = useMemo(() => getChildren(id, items), [items, id]);
 
   return children;
 }

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

@@ -8,6 +8,7 @@ type Disposition = {
 
 type IItem = {
   id: string;
+  index: number;
   label: string;
   icon?: React.ReactNode;
   badge?: {

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

@@ -19,4 +19,14 @@ function getLevel(id: string): number {
   return match === null ? 0 : match.length;
 }
 
-export { getId, isChild, getItemsIds, getLevel };
+function getChildren(id: string | undefined, items: Array<IItem>) {
+  const level = id !== undefined ? getLevel(id) : 0,
+    children = _.chain(items)
+      .filter((item) => (id !== undefined ? isChild(id, item.id) : true))
+      .filter((item) => getLevel(item.id) === level + 1)
+      .value();
+
+  return children;
+}
+
+export { getId, isChild, getItemsIds, getLevel, getChildren };