@dashadmin/dash-admin 1.3.72 → 1.3.74-srcfree.1

package/src/layout/MotionWrapper.original.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/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;