@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/components/misc/LanguageSwitcher.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react';
+import { MouseEvent, useState, useRef, useEffect } from 'react';
+import { useLocaleState, useLocales } from 'react-admin';
+import { Avatar, useMediaQuery, useTheme } from '@mui/material';
+import LanguageIcon from '@mui/icons-material/Translate';
+import ReactDOM from 'react-dom';
+import { useWindowSize } from 'dash-utils';
+const DefaultIcon = <LanguageIcon />;
+
+export interface LanguageSwitcherButtonProps {
+    icon?: React.ReactNode;
+    languages?: { locale: string; name: string }[];
+}
+
+const LanguageSwitcher = (props: LanguageSwitcherButtonProps) => {
+    const { icon = DefaultIcon, languages: languagesProp } = props;
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const languages = useLocales({ locales: languagesProp });
+    const [locale, setLocale] = useLocaleState();
+
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const [webView, setWebView] = useState<boolean>(false);
+    const [open, setOpen] = useState(false);
+    const avatarRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const windowSize = useWindowSize();
+    useEffect(() => {
+        if(document.body.classList.contains('webview')) {
+            setWebView(true)
+        } else {
+            setWebView(false)
+        }
+    }, []);
+
+    const getNameForLocale = (locale: string): string => {
+        const language = languages.find(language => language.locale === locale);
+        return language ? language.name : '';
+    };
+
+    const changeLocale = (locale: string) => (): void => {
+        setLocale(locale);
+        setOpen(false);
+    };
+
+  const calculateMenuPosition = () => {
+    if (avatarRef.current && windowSize.width) {
+        const rect = avatarRef.current.getBoundingClientRect();
+        const menuWidth = 200; // minWidth from styles
+        
+        let left = rect.left + window.scrollX;
+        
+        // Ensure menu doesn't go off-screen using windowSize
+        if (left + menuWidth > windowSize.width) {
+            left = windowSize.width - menuWidth - 10; // 10px margin
+        }
+        if (left < 10) {
+            left = 10; // 10px margin
+        }
+        
+        setMenuPosition({ 
+            top: rect.top + window.scrollY + 30, 
+            left: left
+        });
+    }
+};
+
+    const handleLanguageMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        
+        setOpen(true);
+        calculateMenuPosition();
+    };
+
+    const handleLanguageClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setOpen(prevOpen => !prevOpen);
+        calculateMenuPosition();
+    };
+
+    const handleMouseLeave = () => {
+        if (!webView) {
+            // Add a small delay before closing to allow moving to menu
+            timeoutRef.current = setTimeout(() => {
+                setOpen(false);
+            }, 100);
+        }
+    };
+
+    const handleMenuMouseEnter = () => {
+        // Clear timeout when entering menu
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+
+    const handleMenuMouseLeave = () => {
+        if (!webView) {
+            setOpen(false);
+        }
+    };
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    // Recalculate position on screen resize
+    useEffect(() => {
+        const handleResize = () => {
+            if (open) {
+                calculateMenuPosition();
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [open, isSmallScreen]);
+
+    return (
+        <>
+            <div
+                ref={avatarRef}
+              
+                {... !webView ? { 
+                    onMouseEnter: handleLanguageMouseEnter, 
+                    onMouseLeave: handleMouseLeave 
+                } : { 
+                    onClick: handleLanguageClick 
+                }}
+            >
+                <Avatar 
+                    sizes='small' 
+                    sx={{ fontSize: '1rem' }}
+                    style={{
+                        width: '30px',
+                        height: '30px',
+                        minHeight: '30px'
+                    }}
+                     className='dash-icon-button-color dash-icon-button-bg'
+                >
+                    {getNameForLocale(locale).substring(0, 2).toUpperCase()}
+                </Avatar>
+            </div>
+
+            {open && ReactDOM.createPortal(
+                <div 
+                    ref={menuRef}
+                    className="dash-language-menu-portal"
+                    onMouseEnter={!webView ? handleMenuMouseEnter : undefined}
+                    onMouseLeave={!webView ? handleMenuMouseLeave : undefined}
+                >
+                    <div
+                        className={`dash-language-menu ${open ? 'show' : ''}`}
+                        style={{
+                            zIndex: 10000,
+                            position: 'absolute',
+                            top: menuPosition.top,
+                            left: menuPosition.left,
+                        }}
+                    >
+                        {languages.map(language => (
+                            <div
+                                key={language.locale}
+                                className={`dash-language-menu-item ${language.locale === locale ? 'selected' : ''}`}
+                                onClick={changeLocale(language.locale)}
+                                style={{
+                                    padding: '8px 16px',
+                                    cursor: 'pointer',
+                                    backgroundColor: language.locale === locale ? 'rgba(0, 0, 0, 0.08)' : 'transparent',
+                                    minWidth: '150px'
+                                }}
+                            >
+                                {language.name}
+                            </div>
+                        ))}
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+export default LanguageSwitcher;

package/src/components/misc/MUIHtmlToolTip.tsx

@@ -0,0 +1,15 @@
+import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const MUIHtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
+	<Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+	[`& .${tooltipClasses.tooltip}`]: {
+		backgroundColor: '#f5f5f9',
+		color: 'rgba(0, 0, 0, 0.87)',
+		maxWidth: 220,
+		fontSize: theme.typography.pxToRem(12),
+		border: '1px solid #dadde9',
+	},
+}));
+export default MUIHtmlTooltip;

package/src/components/misc/MuiSimpleJsonTable.tsx

@@ -0,0 +1,279 @@
+import {
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    List,
+    ListItem,
+    ListItemText,
+    Box,
+    Chip,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails,
+    Typography,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { isComponent } from 'dash-auto-admin';
+
+import React, { FC, JSX, useEffect, useState } from 'react';
+
+interface IDictEntry {
+    [x: string]: any;
+}
+
+export interface MUISimpleJsonTable {
+    tableData: any;
+    vertical: boolean;
+    ignore?: string[];
+    include?: string[];
+    dict?: IDictEntry;
+    showKey?: boolean;
+    maxDepth?: number;
+    currentDepth?: number;
+}
+
+function isJSXElement(value: any): value is JSX.Element {
+    return (
+        value &&
+        typeof value === "object" &&
+        value.$typeof === Symbol.for("react.element")
+    );
+}
+
+function isReactNode(value: any): value is React.ReactNode {
+    return (
+        typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean" ||
+        value instanceof React.Component ||
+        value instanceof React.Fragment ||
+        Array.isArray(value) && value.every((item) => isReactNode(item))
+    );
+}
+
+function isReactNodeArrayOrJSXElementArray(value: any): boolean {
+    return (
+        Array.isArray(value) &&
+        (value.every((item) => isReactNode(item)) ||
+            value.every((item) => isJSXElement(item)))
+    );
+}
+
+function isArrayOfStrings(value: any): boolean {
+    return Array.isArray(value) && value.every((item) => typeof item === 'string');
+}
+
+// Improved helper function to detect plain objects
+function isPlainObject(value: any): boolean {
+    if (value === null || value === undefined) {
+        return false;
+    }
+    
+    if (typeof value !== 'object') {
+        return false;
+    }
+    
+    if (Array.isArray(value)) {
+        return false;
+    }
+    
+    if (isJSXElement(value)) {
+        return false;
+    }
+    
+    // Check if it's a plain object (not a class instance, Date, etc.)
+    return value.constructor === Object || value.constructor === undefined;
+}
+
+const MUISimpleJsonTable: FC<MUISimpleJsonTable> = ({
+    tableData,
+    vertical,
+    ignore,
+    include,
+    dict,
+    showKey,
+    maxDepth = 3,
+    currentDepth = 0,
+}) => {
+    if (!ignore) ignore = [];
+    if (!include) include = [];
+    if (!dict) dict = {};
+    const [column, setColumn] = useState<string[]>([]);
+
+    useEffect(() => {
+        if (tableData) {
+            let cols = Object.keys(tableData);
+            if (include.length) cols = cols.filter((key) => include.includes(key));
+            if (ignore.length) cols = cols.filter((key) => !ignore.includes(key));
+            setColumn(cols);
+        } else {
+            setColumn([]);
+        }
+    }, [tableData]);
+
+    const parseValue = (value: any, key?: string) => {
+        try {
+            // Add debug logging
+            //console.log(`Parsing value for key "${key}":`, value, typeof value);
+            
+            if (value === undefined || value === null) {
+                return "n/a";
+            }
+
+            // Check for plain objects FIRST, before other checks
+            if (isPlainObject(value) && currentDepth < maxDepth) {
+                const objectKeys = Object.keys(value);
+                //console.log(`Found plain object with keys:`, objectKeys);
+                
+                if (objectKeys.length > 0) {
+                    return (
+                        <Accordion sx={{ width: '100%', boxShadow: 1, margin: 0 }}>
+                            <AccordionSummary
+                                expandIcon={<ExpandMoreIcon />}
+                                sx={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                                    minHeight: 40,
+                                    '&.Mui-expanded': {
+                                        minHeight: 40,
+                                    },
+                                }}
+                            >
+                                <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                                    {key ? `${key} (${objectKeys.length} properties)` : `Object (${objectKeys.length} properties)`}
+                                </Typography>
+                            </AccordionSummary>
+                            <AccordionDetails sx={{ padding: 1 }}>
+                                <MUISimpleJsonTable
+                                    tableData={value}
+                                    vertical={vertical}
+                                    ignore={ignore}
+                                    include={include}
+                                    dict={dict}
+                                    showKey={showKey}
+                                    maxDepth={maxDepth}
+                                    currentDepth={currentDepth + 1}
+                                />
+                            </AccordionDetails>
+                        </Accordion>
+                    );
+                }
+            }
+
+            // Array handling
+            if (Array.isArray(value)) {
+                return (
+                    <Chip
+                        label={
+                            <Box sx={{ maxHeight: 200, overflow: 'auto', width: '100%' }}>
+                                <List dense sx={{ py: 0 }}>
+                                    {value.map((item, index) => (
+                                        <ListItem key={index} sx={{ py: 0.5, px: 1 }}>
+                                            <ListItemText 
+                                                primary={String(item)} 
+                                                sx={{ 
+                                                    margin: 0,
+                                                    '& .MuiListItemText-primary': {
+                                                        fontSize: '0.875rem',
+                                                        lineHeight: 1.2
+                                                    }
+                                                }}
+                                            />
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            </Box>
+                        }
+                        sx={{ 
+                            height: 'auto',
+                            '& .MuiChip-label': {
+                                display: 'block',
+                                whiteSpace: 'normal'
+                            }
+                        }}
+                    />
+                );
+            }
+
+            // Primitive values
+            if (typeof value !== 'object') {
+                if (dict.hasOwnProperty(value)) {
+                    return dict[value];
+                }
+                return String(value);
+            }
+
+            // React components
+            if (isComponent(value) || isReactNodeArrayOrJSXElementArray(value)) {
+                return value;
+            }
+
+            // Fallback for other objects
+            if (typeof value === 'object') {
+                //console.log(`Falling back to JSON.stringify for:`, value);
+                return JSON.stringify(value);
+            }
+
+            return value;
+
+        } catch (error) {
+            //console.error('Error in parseValue:', error);
+            return "n/a";
+        }
+    };
+
+    const ThData = () => {
+        return (
+            column &&
+            column.map((data, key) => (
+                <TableCell key={key}>{parseValue(data)}</TableCell>
+            ))
+        );
+    };
+
+    const tdData = () => {
+        return vertical ? (
+            column &&
+            column.map((v, key) => {
+                return (
+                    <TableRow key={key}>
+                        {showKey && <TableCell>{parseValue(v)}</TableCell>}
+                        <TableCell>{parseValue(tableData[v], v)}</TableCell>
+                    </TableRow>
+                );
+            })
+        ) : (
+            <TableRow>
+                {column &&
+                    column.map((v, key) => {
+                        return <TableCell key={key}>{parseValue(tableData[v], v)}</TableCell>;
+                    })}
+            </TableRow>
+        );
+    };
+
+    // Add debug info at the top level
+    //console.log('MUISimpleJsonTable render:', { tableData, column, currentDepth, maxDepth });
+
+    return vertical ? (
+        <TableContainer component={Paper}>
+            <Table>
+                <TableBody>{tdData()}</TableBody>
+            </Table>
+        </TableContainer>
+    ) : (
+        <TableContainer component={Paper}>
+            <Table>
+                <TableHead>
+                    <TableRow>{ThData()}</TableRow>
+                </TableHead>
+                <TableBody>{tdData()}</TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+export default MUISimpleJsonTable;