@dashadmin/dash-admin 1.3.73 → 1.3.74-srcfree.2

package/src/layout/MotionWrapper.tsx

@@ -1,236 +0,0 @@
-import { motion } from "framer-motion";
-import { Outlet } from "react-router";
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-
-export interface IMotionWrapper {
-    pageTransition?: boolean,
-    loadingSpinner?: boolean,
-    transitionDuration?: number
-    maxTimeOut?: number
-    initialShow?: boolean
-    usePortalForBackground?: boolean // Control portal usage for background
-    usePortalForSpinner?: boolean // Control portal usage for spinner
-    portalTarget?: string | HTMLElement // Target element for portal
-    spinnerPortalTarget?: string | HTMLElement // Separate target for spinner portal
-}
-
-/*
-
-// Both background and spinner in portals (same target)
-<MotionWrapper 
-    usePortalForBackground={true}
-    usePortalForSpinner={true}
-    initialShow={true}
-/>
-
-// Both in portals with different targets
-<MotionWrapper 
-    usePortalForBackground={true}
-    usePortalForSpinner={true}
-    portalTarget="#app-background"
-    spinnerPortalTarget="#app-spinner"
-    initialShow={true}
-/>
-
-// Only spinner in portal
-<MotionWrapper 
-    usePortalForSpinner={true}
-    spinnerPortalTarget="body"
-    initialShow={true}
-/>
-
-// Normal rendering (default behavior)
-<MotionWrapper initialShow={true} />
-*/
-
-export const SpinnerComponent: React.FC<{ transitionDuration: number, show: boolean }> = ({ transitionDuration, show }) => {
-    return <motion.div layout
-        className={`${show ? 'slide-in' : 'slide-out'} lds-ring`}
-        initial={{ scaleY: 1, scaleX: 1 }}
-        animate={{ scaleY: 0, scaleX: 0 }}
-        exit={{ scaleY: 1, scaleX: 1 }}
-        transition={{ duration: transitionDuration, ease: [0.33, 1, 0.33, 1] }}
-        variants={{
-            initial: {
-                opacity: 1,
-                transition: { duration: transitionDuration },
-            },
-            in: {
-                opacity: 0,
-                transition: { duration: transitionDuration },
-            },
-            out: {
-                opacity: 1,
-                transition: { duration: transitionDuration },
-            },
-        }}
-        style={{
-            position: 'fixed',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            zIndex: 10000, // Higher than background
-            pointerEvents: 'none'
-        }}
-    >
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-    </motion.div>
-}
-
-export const MotionWrapperBackground: React.FC<{ transitionDuration: number, show: boolean }> = ({ transitionDuration, show }) => {
-    return <motion.div layout
-        className={'motion-wrapper-bg'}
-        initial={{ scaleY: 1, scaleX: 1 }}
-        animate={{ scaleY: 0, scaleX: 0 }}
-        exit={{ scaleY: 1, scaleX: 1 }}
-        transition={{ duration: transitionDuration, ease: [0.33, 1, 0.33, 1] }}
-        variants={{
-            initial: {
-                opacity: 1,
-                transition: { duration: transitionDuration },
-            },
-            in: {
-                opacity: 0,
-                transition: { duration: transitionDuration },
-            },
-            out: {
-                opacity: 1,
-                transition: { duration: transitionDuration },
-            },
-        }}
-        style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100vw',
-            height: '100vh',
-            zIndex: 9999, // High z-index for portal usage
-            pointerEvents: 'none' // Allow clicks to pass through
-        }}
-    />
-}
-
-const MotionWrapper: React.FC<IMotionWrapper> = (props) => {
-    const { 
-        pageTransition = true, 
-        loadingSpinner = true, 
-        transitionDuration = 0.5, 
-        maxTimeOut = 1000, 
-        initialShow = false,
-        usePortalForBackground = false,
-        usePortalForSpinner = false,
-        portalTarget = 'body',
-        spinnerPortalTarget = 'body'
-    } = props;
-    
-    const [show, setShow] = useState(initialShow);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const [backgroundPortalContainer, setBackgroundPortalContainer] = useState<HTMLElement | null>(null);
-    const [spinnerPortalContainer, setSpinnerPortalContainer] = useState<HTMLElement | null>(null);
-
-    // Set up portal containers
-    useEffect(() => {
-        // Background portal container
-        if (usePortalForBackground) {
-            let container: HTMLElement;
-            
-            if (typeof portalTarget === 'string') {
-                container = document.querySelector(portalTarget) as HTMLElement;
-                if (!container) {
-                    container = document.body; // Fallback to body
-                }
-            } else {
-                container = portalTarget;
-            }
-            
-            setBackgroundPortalContainer(container);
-        }
-
-        // Spinner portal container
-        if (usePortalForSpinner) {
-            let container: HTMLElement;
-            
-            if (typeof spinnerPortalTarget === 'string') {
-                container = document.querySelector(spinnerPortalTarget) as HTMLElement;
-                if (!container) {
-                    container = document.body; // Fallback to body
-                }
-            } else {
-                container = spinnerPortalTarget;
-            }
-            
-            setSpinnerPortalContainer(container);
-        }
-    }, [usePortalForBackground, usePortalForSpinner, portalTarget, spinnerPortalTarget]);
-
-    // Update local state when initialShow prop changes
-    useEffect(() => {
-        if (initialShow && !isAnimating) {
-            setIsAnimating(true);
-            setShow(true);
-            
-            // Set up timeout to hide elements after maxTimeOut
-            const timer = setTimeout(() => {
-                setShow(false);
-                // Add a small delay before marking animation as complete
-                setTimeout(() => {
-                    setIsAnimating(false);
-                }, transitionDuration * 1000);
-            }, maxTimeOut);
-
-            return () => {
-                clearTimeout(timer);
-            };
-        }
-    }, [initialShow, maxTimeOut, transitionDuration, isAnimating]);
-
-    const renderBackground = () => {
-        if (!pageTransition) return null;
-        
-        const backgroundComponent = (
-            <MotionWrapperBackground 
-                transitionDuration={transitionDuration} 
-                show={show} 
-            />
-        );
-
-        // Render in portal if enabled and container is available
-        if (usePortalForBackground && backgroundPortalContainer) {
-            return createPortal(backgroundComponent, backgroundPortalContainer);
-        }
-
-        // Render normally
-        return backgroundComponent;
-    };
-
-    const renderSpinner = () => {
-        if (!loadingSpinner) return null;
-        
-        const spinnerComponent = (
-            <SpinnerComponent 
-                transitionDuration={transitionDuration} 
-                show={show} 
-            />
-        );
-
-        // Render in portal if enabled and container is available
-        if (usePortalForSpinner && spinnerPortalContainer) {
-            return createPortal(spinnerComponent, spinnerPortalContainer);
-        }
-
-        // Render normally
-        return spinnerComponent;
-    };
-
-    return <>
-        {renderSpinner()}
-        {renderBackground()}
-        <Outlet />
-    </>;
-}
-
-export default MotionWrapper;

package/src/layout/ResourceMenu.tsx

@@ -1,164 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRedirect, useRefresh, useTranslate } from 'react-admin';
-import { useDispatch } from 'react-redux';
-import { useLocation } from 'react-router';
-import IAppResourceConfig from '../interfaces/IAppResourceConfig';
-import { IPageState, DASH_REDUX_ACTIONS } from 'dash-admin-state';
-import useVirtualHash from '../hooks/useVirtualHash';
-import { Button, ButtonGroup } from '@mui/material';
-import DashResourceButton from 'dash-auto-admin/src/toolbar/buttons/DashResourceButton';
-import RefreshIcon from '@mui/icons-material/Refresh';
-
-/**
- * Check if a string looks like a translation key
- */
-const isTranslationKey = (value: string): boolean => {
-    if (!value || typeof value !== 'string') return false;
-    // Translation keys typically contain dots and are lowercase
-    return value.includes('.') && value === value.toLowerCase();
-};
-
-export interface IResourceMenu {
-    resourceConfig: IAppResourceConfig;
-    locale?: string;
-}
-
-/**
- * Resource Menu
- *
- * @description Renders the op tabs navigation menu
- *
- * @param {IResourceMenu} props - Functional Component Props
- * @param {IDashAutoAdminResourceConfig} props.resourceConfig - Resource Config
- *
- * @returns {JSX.Element} - JSX element
- */
-const ResourceMenu: React.FC<IResourceMenu> = (props) => {
-    const { resourceConfig, locale } = props;
-    const { resourceMenuDisabled = false, resourceMenuPosition = 'top' } =
-        resourceConfig;
-
-    const redirect = useRedirect();
-    const translate = useTranslate();
-    const { hash, setVirtualHash } = useVirtualHash();
-    const location = useLocation();
-
-    /**
-     * Translate a label if it's a translation key, otherwise return as-is
-     */
-    const translateLabel = (label: string): string => {
-        if (!label) return '';
-        if (isTranslationKey(label)) {
-            const translated = translate(label, { _: label });
-            // If translation returns the key itself, use the label as-is
-            return translated === label ? label : translated;
-        }
-        return label;
-    };
-
-    const dispatch = useDispatch();
-    const updatePageState = (menuItem) => {
-        const newPageState: IPageState = {
-            title: translateLabel(menuItem?.title),
-            //icon: item?.icon,
-            //subTitle: item?.group,
-        };
-        dispatch(DASH_REDUX_ACTIONS.updatePage(newPageState));
-    };
-
-    const handleMenuClick = (menuItem, e) => {
-        updatePageState(menuItem);
-       
-        // @deprecated - removed currentAppPath logic that caused path duplication
-        let _redirect =  menuItem.redirect?.startsWith('/')
-                    ? menuItem.redirect
-                    : `/${menuItem.redirect}`.replace(/\/+/g, '/');
-        
-        
-
-        menuItem.redirect ? redirect(_redirect) : menuItem?.onClick();
-    };
-
-
-    const [resourceMenu, setResourceMenu] = useState(null);
-    const loc = useLocation();
-
-    useEffect(() => {
-        const val = Array.isArray(resourceConfig.menu)
-            ? resourceConfig.menu
-            : typeof resourceConfig.menu === 'function'
-                ? resourceConfig.menu()
-                : null;
-        setResourceMenu(val);
-    }, [resourceConfig.menu, locale]);
-
-    useEffect(() => {
-        const val = Array.isArray(resourceConfig.menu)
-            ? resourceConfig.menu
-            : typeof resourceConfig.menu === 'function'
-                ? resourceConfig.menu()
-                : null;
-        setResourceMenu(val);
-    }, [loc, resourceConfig.menu, locale]);
-
-    //const refresh = useRefresh();
-
-    return (
-        <div className={`dash-module-${resourceMenuPosition}`}>
-           
-                
-                
-            
-            {resourceConfig.mainAction && (
-                <div className='dash-module-action'>
-
-                        
-                        
-                           {/* <DashResourceButton
-                                resourceConfig={resourceConfig}
-                                label={"Refrescar"}
-                                mode={resourceConfig.mainAction?.mode || 'custom'}  >
-                                 <Button
-                                onClick={() => refresh()}
-                            >
-                                <RefreshIcon />
-                            </Button>
-                            </DashResourceButton>*/}
-
-
-                            {(resourceConfig.create !== false) && !location.pathname.endsWith('/create') && <DashResourceButton
-                                size='small'    
-                                resourceConfig={resourceConfig}
-                                label={translateLabel(resourceConfig.mainAction.title)}
-                                mode={resourceConfig.mainAction?.mode || 'create'}  />
-                            }
-                            {resourceConfig.navActions && resourceConfig.navActions.map((action) => action)}
-                      
-                </div>
-            )}
-            <div className={`dash-module-${resourceMenuPosition}-content`}>
-                <ul className='dash-module-horizontal-nav'>
-                    {resourceMenu &&
-                        resourceMenu.map((menuItem, index) => {
-                            let active: boolean = location.pathname === menuItem?.redirect;
-                            return (
-                                <li
-                                    key={index}
-                                    onClick={(e) => handleMenuClick(menuItem, e)}
-                                    className={active ? 'active' : null}
-                                >
-                                    <span className={'dash-link'}>
-                                        <i className={`icon icon-${menuItem?.icon}`} />
-                                        <span>{translateLabel(menuItem.title)}</span>
-                                    </span>
-                                </li>
-                            );
-                        })}
-                </ul>
-
-            </div>
-        </div>
-    );
-};
-
-export default ResourceMenu;

package/src/layout/ResoureLayout.tsx

@@ -1,105 +0,0 @@
-import React, { PropsWithChildren, useMemo } from 'react';
-import ResourceMenu from './ResourceMenu';
-import IAppResourceConfig from '../interfaces/IAppResourceConfig';
-import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
-
-/**
- * Resource Layout
- *
- * @description The resource is the wrapper for all the views methods available in the ResourceTemplate such as ['show','edit','list','view']
- * its parent HoC is the ResourceTemplate
- * The main goal is to provide a side navigation around the main content.
- *
- * Notice: side styles are not implemented in DASH V2 project
- *
- * @param {IResourceLayout} props - Functional Component Props
- * @param {IDashAutoAdminResourceConfig} props.resourceConfig - Resource Config
- * @param {string} props.position - "top"
- * @param {boolean} props.showToolbar - default true, shows or hide the navigation toolbar
- * @param {JSX.Element} props.children - Children content such as Show, Edit, DataGrid
- *
- * @returns {JSX.Element} - JSX element
- */
-
-export interface IResourceLayout extends PropsWithChildren {
-	/** React Auto Admin Resource Config */
-	resourceConfig: IAppResourceConfig;
-    /** Current locale */
-    locale?: string;
-}
-
-// Memoized ResourceMenu component
-const MemoizedResourceMenu = React.memo(({ 
-	resourceConfig,
-    locale
-}: { 
-	resourceConfig: IAppResourceConfig;
-    locale?: string;
-}) => (
-	<ResourceMenu resourceConfig={resourceConfig} locale={locale} />
-), (prevProps, nextProps) => {
-	return prevProps.resourceConfig === nextProps.resourceConfig && prevProps.locale === nextProps.locale;
-});
-
-const ResourceLayout: React.FC<IResourceLayout> = (props) => {
-	const { resourceConfig, children, locale } = props;
-
-	// Memoize the destructured values to prevent unnecessary recalculations
-	const { resourceMenuDisabled, resourceMenuPosition } = useMemo(() => ({
-		resourceMenuDisabled: resourceConfig.resourceMenuDisabled ?? false,
-		resourceMenuPosition: resourceConfig.resourceMenuPosition ?? 'top'
-	}), [resourceConfig.resourceMenuDisabled, resourceConfig.resourceMenuPosition]);
-
-	// Memoize the condition for showing the menu
-	const shouldShowMenu = useMemo(() => {
-      
-		return (resourceConfig.mainAction ||
-			(resourceConfig.menu && resourceConfig.menu.length > 0)) &&
-			!resourceMenuDisabled;
-	}, [
-		resourceConfig.mainAction,
-		resourceConfig.menu,
-		resourceMenuDisabled
-	]);
-
-	// Memoize the header content
-	const headerContent = useMemo(() => {
-		if (!shouldShowMenu) return null;
-
-		return (
-			<div className='dash-module-box-header'>
-				<div className='dash-module-sidenav dash-d-none dash-d-lg-flex'>
-					<MemoizedResourceMenu resourceConfig={resourceConfig} locale={locale} />
-				</div>
-			</div>
-		);
-	}, [shouldShowMenu, resourceConfig]);
-
-	return (
-		<div className='dash-app-module'>
-			<div className='dash-module-horizontal-box' style={{ maxWidth: '100%' }}>
-				{headerContent}
-				<div className='dash-module-box-content'>
-					{children}
-				</div>
-			</div>
-		</div>
-	);
-};
-
-// Memoize the entire component
-export default React.memo(ResourceLayout, (prevProps, nextProps) => {
-	// Compare resourceConfig reference and locale
-	const propsEqual = prevProps.resourceConfig === nextProps.resourceConfig && 
-                      prevProps.locale === nextProps.locale;
-	
-	// Debug logging (remove in production)
-	if (!propsEqual) {
-		console.log('ResourceLayout re-rendering:', {
-			resourceConfigChanged: prevProps.resourceConfig !== nextProps.resourceConfig,
-            localeChanged: prevProps.locale !== nextProps.locale
-		});
-	}
-
-	return propsEqual;
-});

package/src/layout/TransitionWrapper.tsx

@@ -1,125 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-
-export interface ITransitionWrapper {
-  pageTransition?: boolean;
-  loadingSpinner?: boolean;
-  transitionDuration?: number;
-}
-
-const TransitionWrapper: React.FC<ITransitionWrapper> = (props) => {
-  const {
-    pageTransition = true,
-    loadingSpinner = true,
-    transitionDuration = 500 // in ms
-  } = props;
-  
-  const location = useLocation();
-  const [displayLocation, setDisplayLocation] = useState(location);
-  const [showSpinner, setShowSpinner] = useState(false);
-  const [spinnerOpacity, setSpinnerOpacity] = useState(0);
-  const [isReady, setIsReady] = useState(true);
-  
-  useEffect(() => {
-    // Skip transition for same route
-    if (!pageTransition || location.pathname === displayLocation.pathname) {
-      return;
-    }
-    
-    // Sequence the transition
-    const sequence = async () => {
-      // Step 1: Mark as not ready (prevents premature outlet updates)
-      setIsReady(false);
-      
-      // Step 2: Show spinner container with opacity 0
-      setShowSpinner(true);
-      
-      // Step 3: Wait a frame to ensure DOM is updated
-      await new Promise(resolve => requestAnimationFrame(resolve));
-      
-      // Step 4: Fade in spinner
-      setSpinnerOpacity(1);
-      
-      // Step 5: Wait for spinner to fully fade in
-      await new Promise(resolve => setTimeout(resolve, transitionDuration));
-      
-      // Step 6: Update outlet content (while spinner is fully visible)
-      setDisplayLocation(location);
-      
-      // Step 7: Wait a moment to ensure outlet content is updated
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // Step 8: Start fading out spinner
-      setSpinnerOpacity(0);
-      
-      // Step 9: Wait for spinner to fully fade out
-      await new Promise(resolve => setTimeout(resolve, transitionDuration));
-      
-      // Step 10: Hide spinner container
-      setShowSpinner(false);
-      
-      // Step 11: Mark as ready for next transition
-      setIsReady(true);
-    };
-    
-    sequence();
-  }, [location, displayLocation, pageTransition, transitionDuration]);
-  
-  return (
-    <div className="transition-container" style={{ position: 'relative', height: '100%' }}>
-      {/* Main content */}
-      <div>
-        <Outlet key={displayLocation.pathname} />
-      </div>
-      
-      {/* Spinner overlay */}
-      {loadingSpinner && showSpinner && (
-        <div 
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: 'rgba(255, 255, 255, 0.8)',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 1000,
-            opacity: spinnerOpacity,
-            transition: `opacity ${transitionDuration}ms ease-in-out`,
-          }}
-        >
-          <div className="spinner">
-            <style>{`
-              .spinner {
-                display: inline-block;
-                position: relative;
-                width: 80px;
-                height: 80px;
-              }
-              .spinner:after {
-                content: " ";
-                display: block;
-                border-radius: 50%;
-                width: 0;
-                height: 0;
-                margin: 8px;
-                box-sizing: border-box;
-                border: 32px solid #3f51b5;
-                border-color: #3f51b5 transparent #3f51b5 transparent;
-                animation: spinner 1.2s infinite;
-              }
-              @keyframes spinner {
-                0% { transform: rotate(0); }
-                100% { transform: rotate(360deg); }
-              }
-            `}</style>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TransitionWrapper;