@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/layout/ApplicationLayout.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useState } from 'react';
+import { Button, useRedirect, useStore, useTranslate } from 'react-admin';
+import useVirtualHash from '../hooks/useVirtualHash';
+import { IDashAutoAdminResourceConfig } from 'dash-auto-admin';
+
+/**
+ * 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 IApplicationLayoutMenuItem {
+    title: string;
+    onClick?: () => void;
+    redirect?: string;
+    icon?: string;
+}
+
+export interface IApplicationLayoutMainAction {
+    title: string;
+    type?: 'link' | 'text' | 'ghost' | 'default' | 'primary' | 'dashed';
+    icon?: string;
+    onClick?: () => void;
+    redirect?: string;
+    fn?: 'redirect' | 'virtualhash';
+}
+
+export interface IApplicationLayout {
+    resourceConfig: IDashAutoAdminResourceConfig;
+    children?: React.ReactNode;
+}
+
+const ApplicationLayout: React.FC<IApplicationLayout> = ({
+    resourceConfig,
+    children,
+}) => {
+    const [drawerState, setDrawerState] = useState<boolean>(false);
+    const redirect = useRedirect();
+    const translate = useTranslate();
+    const { setVirtualHash } = useVirtualHash();
+    const [, setResourceConfig] = useStore('resourceConfig', resourceConfig);
+
+    /**
+     * 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;
+    };
+
+    useEffect(() => {
+        setResourceConfig(resourceConfig);
+    }, [resourceConfig, setResourceConfig]);
+
+    const toggleDrawer = () => setDrawerState(!drawerState);
+
+    const handleMenuClick = (menuItem: IApplicationLayoutMenuItem) => {
+        if (menuItem.redirect) {
+            // @deprecated - removed currentAppPath logic that caused path duplication
+            const _redirect = menuItem.redirect?.startsWith('/')
+                    ? menuItem.redirect
+                    : `/${menuItem.redirect}`.replace(/\/+/g, '/')
+        
+            redirect(_redirect);
+
+        } else if (menuItem.onClick) {
+            menuItem.onClick();
+        }
+    };
+
+    const handleMainAction = (e: React.MouseEvent) => {
+        e.preventDefault();
+        
+        if (!resourceConfig.mainAction) return;
+
+        const fn = resourceConfig.mainAction.fn === 'virtualhash' ? setVirtualHash : redirect;
+        
+        if (resourceConfig.mainAction.redirect) {
+
+
+              const fn = resourceConfig.mainAction.fn === 'virtualhash' ? setVirtualHash : redirect;
+        
+        let _redirect = resourceConfig.mainAction.redirect;
+
+        // @deprecated - removed currentAppPath logic that caused path duplication
+        if (resourceConfig.mainAction.fn !== 'virtualhash') {
+
+            _redirect = resourceConfig.mainAction.redirect?.startsWith('/')
+                    ? resourceConfig.mainAction.redirect
+                    : `/${resourceConfig.mainAction.redirect}`.replace(/\/+/g, '/');
+        }
+        
+            fn(_redirect);
+            
+           
+        } else if (resourceConfig.mainAction.onClick) {
+            //debugger;
+            resourceConfig.mainAction.onClick();
+        }
+    };
+
+    const getMenu = () => {
+        if (!resourceConfig.menu) return [];
+        return Array.isArray(resourceConfig.menu) ? resourceConfig.menu : resourceConfig.menu();
+    };
+
+
+    const TopResourceMenu: React.FC = () => {
+        const menu = getMenu();
+
+        return (
+            <div className="dash-module-top">
+                <div className="dash-module-top-content">
+                    {menu.length > 0 && (
+                        <ul className="dash-module-horizontal-nav">
+                            {menu.map((menuItem, index) => (
+                                <li
+                                    key={index}
+                                    /* @ts-ignore */
+                                    onClick={() => handleMenuClick(menuItem)}
+                                >
+                                    <span className="dash-link">
+                                        {menuItem.icon && (
+                                            <i className={`icon icon-${menuItem.icon}`} />
+                                        )}
+                                        <span>{translateLabel(menuItem.title)}</span>
+                                    </span>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+
+                    {resourceConfig.mainAction && (
+                        <>
+                      
+                        <div className="dash-module-action">
+                            <Button
+                             /* @ts-ignore */
+                                type={resourceConfig.mainAction.type}
+                                className="dash-btn-block"
+                                onClick={handleMainAction}
+                            >
+                                {translateLabel(resourceConfig.mainAction.title)}
+                            </Button>
+                        </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    const hasNavigation = resourceConfig.mainAction || resourceConfig.menu;
+
+    return (
+        <div className="dash-app-module">
+      
+            <div
+                className="dash-module-horizontal-box"
+                style={!resourceConfig.menu ? { maxWidth: '100%' } : {}}
+            >
+                {hasNavigation && (
+                    <div className="dash-module-box-header">
+                        {/* Top navigation for desktop */}
+                 
+                        <div className="dash-module-sidenav dash-d-none dash-d-lg-flex">
+                            <TopResourceMenu />
+                        </div>
+
+                        {/* Mobile menu button */}
+                        <span className="dash-drawer-btn dash-d-flex dash-d-lg-none">
+                            <i
+                                className="icon icon-menu dash-icon-btn"
+                                aria-label="Menu"
+                                onClick={toggleDrawer}
+                            />
+                        </span>
+                    </div>
+                )}
+
+                <div className="dash-module-box-content">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ApplicationLayout;

package/src/layout/MotionWrapper.original.tsx

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

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