@topconsultnpm/sdkui-react 6.20.0-dev1.15 → 6.20.0-dev1.16

package/lib/components/base/TMAccordionNew.js

@@ -0,0 +1,326 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { ContextMenu, LoadIndicator } from 'devextreme-react';
+import { LocalStorageService } from '@topconsultnpm/sdk-ts';
+import TMTooltip from './TMTooltip';
+const Container = styled.div `
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 5px;
+    
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: #f1f3f5;
+        border-radius: 4px;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background: #adb5bd;
+        border-radius: 4px;
+        
+        &:hover {
+            background: #868e96;
+        }
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+    }
+`;
+const AccordionItem = styled.div `
+    margin-bottom: 16px;
+    border-radius: 5px;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    overflow: hidden;
+    transition: box-shadow 0.3s ease;
+    
+    &:hover {
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    }
+`;
+const AccordionHeader = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    background: ${props => `linear-gradient(135deg, ${props.$color}15 0%, ${props.$color}08 100%)`};
+    border-left: 4px solid ${props => props.$color};
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        background: ${props => `linear-gradient(135deg, ${props.$color}25 0%, ${props.$color}15 100%)`};
+    }
+`;
+const AccordionTitle = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex: 1;
+`;
+const TitleText = styled.h3 `
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #212529;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const BadgeContainer = styled.div `
+    display: flex;
+    align-items: center;
+    gap: 6px;
+`;
+const Badge = styled.div `
+    min-width: 22px;
+    height: 22px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${props => props.$color};
+    color: white;
+    border-radius: 11px;
+    font-size: 11px;
+    font-weight: 700;
+    box-shadow: 0 2px 6px ${props => props.$color}40;
+`;
+const CustomComponentContainer = styled.div `
+    padding: 8px;
+`;
+const ErrorMessage = styled.div `
+    padding: 20px;
+    text-align: center;
+    color: #fa5252;
+    font-size: 14px;
+    font-weight: 500;
+`;
+const ToggleIcon = styled.div `
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: white;
+    border-radius: 6px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: ${props => props.$isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const AccordionContent = styled.div `
+    max-height: ${props => props.$isOpen ? `${props.$maxHeight}px` : '0'};
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+`;
+const ItemsList = styled.div `
+    padding: 4px;
+`;
+const ListItem = styled.div `
+    padding: 2px;
+    margin: 2px 0;
+    border-radius: 6px;
+    background: ${props => props.$isSelected ? `${props.$color}30` : 'transparent'};
+    border: none;
+    transition: background 0.2s ease;
+    cursor: pointer;
+    
+    &:hover {
+        background: ${props => props.$isSelected ? `${props.$color}40` : `${props.$color}08`};
+    }
+`;
+const LoadingContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 200px;
+`;
+const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '#7950f2'];
+const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
+    const [openAccordions, setOpenAccordions] = useState({});
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [contextMenuItems, setContextMenuItems] = useState([]);
+    const [focusedItem, setFocusedItem] = useState(undefined);
+    const [headerContextGroupId, setHeaderContextGroupId] = useState(null);
+    const [headerContextVisible, setHeaderContextVisible] = useState(false);
+    const [headerContextPosition, setHeaderContextPosition] = useState(null);
+    useEffect(() => {
+        const initialState = {};
+        if (!groups || groups.length === 0) {
+            setIsInitialized(true);
+            return;
+        }
+        if (localStorageKey) {
+            const savedState = LocalStorageService.getItem(localStorageKey);
+            if (savedState && savedState.length === groups.length) {
+                groups.forEach((group, index) => {
+                    initialState[group.id] = savedState[index] === '1';
+                });
+            }
+            else {
+                groups.forEach(group => {
+                    initialState[group.id] = group.isExpanded !== false;
+                });
+            }
+        }
+        else {
+            groups.forEach(group => {
+                initialState[group.id] = group.isExpanded !== false;
+            });
+        }
+        setOpenAccordions(initialState);
+        setIsInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (!isInitialized || !groups)
+            return;
+        setOpenAccordions(prev => {
+            const newState = { ...prev };
+            groups.forEach(group => {
+                if (!(group.id in newState)) {
+                    newState[group.id] = group.isExpanded !== false;
+                }
+            });
+            Object.keys(newState).forEach(groupId => {
+                if (!groups.some(g => g.id === groupId)) { //nosonar
+                    delete newState[groupId];
+                }
+            });
+            return newState;
+        });
+    }, [groups, isInitialized]);
+    useEffect(() => {
+        if (!isInitialized || !groups)
+            return;
+        if (localStorageKey && Object.keys(openAccordions).length === groups.length) {
+            const stateString = groups.map(group => openAccordions[group.id] ? '1' : '0').join('');
+            LocalStorageService.setItem(localStorageKey, stateString);
+        }
+    }, [openAccordions, groups, localStorageKey, isInitialized]);
+    const toggleAccordion = (groupId) => {
+        setOpenAccordions(prev => ({ ...prev, [groupId]: !prev[groupId] }));
+    };
+    const handleItemClick = (item, group) => {
+        if (onSelectedItemChange) {
+            onSelectedItemChange(item);
+        }
+        if (group.onItemClick) {
+            group.onItemClick(item);
+        }
+    };
+    const handleItemDoubleClick = (item, group) => {
+        if (group.onItemDoubleClick) {
+            group.onItemDoubleClick(item);
+        }
+    };
+    const handleContextMenu = (event, item, group) => {
+        event.preventDefault();
+        if (!group.contextMenuItems) {
+            return;
+        }
+        const menuItems = typeof group.contextMenuItems === 'function'
+            ? group.contextMenuItems(item)
+            : group.contextMenuItems;
+        if (menuItems.length === 0) {
+            return;
+        }
+        setAnchorEl(event.currentTarget);
+        setContextMenuItems(menuItems);
+    };
+    const closeContextMenu = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleHeaderContextMenu = (event, groupId) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setHeaderContextPosition({ x: event.clientX, y: event.clientY });
+        setHeaderContextGroupId(groupId);
+        setHeaderContextVisible(true);
+    };
+    const handleHeaderClick = (event, groupId) => {
+        if (event.button !== 0)
+            return;
+        toggleAccordion(groupId);
+    };
+    const closeHeaderContextMenu = useCallback(() => {
+        setHeaderContextVisible(false);
+        setHeaderContextPosition(null);
+        setHeaderContextGroupId(null);
+    }, []);
+    const headerContextMenuItems = headerContextGroupId ? [
+        {
+            text: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
+            onClick: () => {
+                toggleAccordion(headerContextGroupId);
+                closeHeaderContextMenu();
+            }
+        }
+    ] : [];
+    const getGroupColor = (group, index) => {
+        return group.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+    };
+    const renderBadges = (group, color) => {
+        if (group.badges && group.badges.length > 0) {
+            return (_jsx(BadgeContainer, { children: group.badges.map((badgeData, idx) => {
+                    const badgeKey = `${group.id}-badge-${badgeData.badge}-${idx}`;
+                    const badge = _jsx(Badge, { "$color": color, children: badgeData.badge });
+                    if (badgeData.tooltip) {
+                        return (_jsx(TMTooltip, { content: badgeData.tooltip, children: badge }, badgeKey));
+                    }
+                    return _jsx("span", { children: badge }, badgeKey);
+                }) }));
+        }
+        if (group.dataSource && group.dataSource.length > 0) {
+            return _jsx(Badge, { "$color": color, children: group.dataSource.length });
+        }
+        return null;
+    };
+    const renderAccordion = (group, index) => {
+        const color = getGroupColor(group, index);
+        const isOpen = openAccordions[group.id] ?? true;
+        if (group.customComponent) {
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+        }
+        if (!group.dataSource || group.dataSource.length === 0)
+            return null;
+        if (!group.renderItem) {
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+        }
+        const itemHeight = group.itemHeight || 80;
+        const maxHeight = group.dataSource.length * itemHeight + 20;
+        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+                            const isSelected = selectedItem === item;
+                            const isFocused = focusedItem === item;
+                            return (_jsx(ListItem, { "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
+                        }) }) })] }, group.id));
+    };
+    if (!isInitialized) {
+        return (_jsx(LoadingContainer, { children: _jsx(LoadIndicator, { height: 40, width: 40 }) }));
+    }
+    if (!groups || groups.length === 0) {
+        return (_jsx(Container, { children: _jsx(ErrorMessage, { children: "\u26A0\uFE0F No accordion groups defined" }) }));
+    }
+    const handleContainerContextMenu = (event) => {
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), anchorEl && contextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })), headerContextPosition && headerContextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: headerContextMenuItems, visible: headerContextVisible, position: { my: 'left top', at: 'left top', offset: `${headerContextPosition.x} ${headerContextPosition.y}` }, onHiding: closeHeaderContextMenu }))] }));
+};
+export default TMAccordion;

package/lib/components/base/TMAlert.d.ts

@@ -0,0 +1,73 @@
+interface AlertVariant {
+    variant: string;
+    color: string;
+    borderColor: string;
+    icon: JSX.Element;
+    textColor: string;
+}
+interface AlertModes {
+    warning: AlertVariant;
+    error: AlertVariant;
+    success: AlertVariant;
+    info: AlertVariant;
+}
+declare const TMAlertPosition: {
+    readonly TOP_RIGHT: {
+        readonly top: "10px";
+        readonly right: "10px";
+        readonly position: "absolute";
+    };
+    readonly TOP_CENTER: {
+        readonly top: "10px";
+        readonly left: "50%";
+        readonly transform: "translateX(-50%)";
+        readonly position: "absolute";
+    };
+    readonly TOP_LEFT: {
+        readonly top: "10px";
+        readonly left: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_RIGHT: {
+        readonly bottom: "10px";
+        readonly right: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_LEFT: {
+        readonly bottom: "10px";
+        readonly left: "10px";
+        readonly position: "absolute";
+    };
+    readonly BOTTOM_CENTER: {
+        readonly bottom: "10px";
+        readonly left: "50%";
+        readonly transform: "translateX(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_RIGHT: {
+        readonly top: "50%";
+        readonly right: "10px";
+        readonly transform: "translateY(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_LEFT: {
+        readonly top: "50%";
+        readonly left: "10px";
+        readonly transform: "translateY(-50%)";
+        readonly position: "absolute";
+    };
+    readonly CENTER_CENTER: {
+        readonly top: "50%";
+        readonly left: "50%";
+        readonly transform: "translate(-50%, -50%)";
+        readonly position: "absolute";
+    };
+};
+declare const ShowAlert: ({ mode, message, duration, title, position }: {
+    mode: keyof AlertModes;
+    message: string;
+    duration?: number;
+    title?: string;
+    position?: keyof typeof TMAlertPosition;
+}) => void;
+export default ShowAlert;

package/lib/components/base/TMAlert.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom/client';
+import { IconCloseCircle, IconInfo, IconSuccess, IconWarning } from '../../helper';
+const TMAlertPosition = {
+    TOP_RIGHT: { top: '10px', right: '10px', position: 'absolute' },
+    TOP_CENTER: { top: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    TOP_LEFT: { top: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_RIGHT: { bottom: '10px', right: '10px', position: 'absolute' },
+    BOTTOM_LEFT: { bottom: '10px', left: '10px', position: 'absolute' },
+    BOTTOM_CENTER: { bottom: '10px', left: '50%', transform: 'translateX(-50%)', position: 'absolute' },
+    CENTER_RIGHT: { top: '50%', right: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_LEFT: { top: '50%', left: '10px', transform: 'translateY(-50%)', position: 'absolute' },
+    CENTER_CENTER: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' },
+};
+const Mode = {
+    warning: {
+        variant: 'warning',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #EAD305 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#ba873d',
+        textColor: '#6e5024',
+        icon: _jsx(IconWarning, { fontSize: 16, color: '#F0AD4E' }),
+    },
+    error: {
+        variant: 'error',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #E87A8E 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#a8413e',
+        textColor: '#4a1b1b',
+        icon: _jsx(IconCloseCircle, { fontSize: 16, color: '#D9534F' }),
+    },
+    success: {
+        variant: 'success',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #6DB735 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#4d994d',
+        textColor: '#203d20',
+        icon: _jsx(IconSuccess, { fontSize: 16, color: '#5CB85C' }),
+    },
+    info: {
+        variant: 'info',
+        color: 'transparent linear-gradient(272deg, #FFFFFF 0%, #679CE8 100%) 0% 0% no-repeat padding-box',
+        borderColor: '#285f8f',
+        textColor: '#16354f',
+        icon: _jsx(IconInfo, { fontSize: 16, color: '#337AB7' }),
+    },
+};
+// const TMAlert = ({ mode, duration = 5000, message, position = 'BOTTOM_CENTER' }: { mode: keyof AlertModes, duration?: number, message: string, position?: keyof typeof TMAlertPosition }) => {
+const TMAlert = ({ mode, duration = 1000, title, message, position = 'BOTTOM_RIGHT' }) => {
+    const [currentWidth, setCurrentWidth] = useState(window.innerWidth);
+    const [container] = useState(document.getElementsByClassName('tm-alert-temporary-container'));
+    useEffect(() => {
+        window.addEventListener('resize', () => {
+            setCurrentWidth(window.innerWidth);
+        });
+    }, [currentWidth]);
+    useEffect(() => {
+        const tiemout = setTimeout(() => {
+            let container = document.getElementsByClassName('tm-alert-temporary-container');
+            container[0]?.remove();
+        }, duration + 50);
+        return () => {
+            clearTimeout(tiemout);
+        };
+    }, [container]);
+    // Determine the style for the alert container based on the position prop
+    const alertContainerStyle = TMAlertPosition[position];
+    return (_jsx("div", { style: { width: '100%', paddingTop: '3px', ...alertContainerStyle }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms`, position: 'relative', float: 'right', zIndex: '20000999', width: '356px', height: '86px', borderRadius: '8px', overflow: 'hidden', border: '2px white solid', boxShadow: '0px 3px 6px #00000029' }, children: _jsx("div", { className: 'tm-alert-animation-style', style: { animationDuration: `${duration}ms` }, children: _jsxs("div", { className: 'tm-alert-container', style: { background: Mode[mode].color, animationDuration: `${duration}ms` }, children: [_jsxs("div", { className: "tm-alert-context", style: { position: 'relative' }, children: [_jsx("div", { className: 'tm-alert-icon', style: { position: 'absolute', top: '12px', left: '12px', paddingTop: '1px' }, children: Mode[mode].icon }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '15px', left: '45px', textAlign: 'left', fontSize: '1.1rem', fontWeight: 'bold', maxWidth: '280px' }, children: title }), _jsx("div", { style: { color: Mode[mode].textColor, position: 'absolute', top: '35px', left: '45px', textAlign: 'left', fontSize: '1rem', maxWidth: '280px' }, children: message })] }), _jsx("div", { className: 'tm-alert-loading', style: { backgroundImage: `linear-gradient(to right, ${Mode[mode].borderColor}, ${Mode[mode].textColor})`, animationDuration: `${duration}ms` } })] }) }) }) }));
+};
+const ShowAlert = ({ mode, message, duration, title, position = 'BOTTOM_RIGHT' }) => {
+    let container = document.createElement('div');
+    container.setAttribute("class", 'tm-alert-temporary-container');
+    document.body.appendChild(container);
+    // container.style.position = 'relative'
+    container.style.display = 'flex';
+    const root = ReactDOM.createRoot(container);
+    root.render(_jsx(React.StrictMode, { children: _jsx(TMAlert, { message: message, mode: mode, duration: duration, title: title, position: position }) }));
+};
+export default ShowAlert;

package/lib/components/base/TMAreaManager.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ITopMediaSession } from '@topconsultnpm/sdk-ts';
+export declare class TMFileSystemItem {
+    dataItem: any;
+    name: string;
+    thumbnail: string;
+    isDirectory: boolean;
+    size: number | undefined;
+    dateModified: Date | undefined;
+}
+interface ITMAreaManager {
+    width?: string;
+    height?: string;
+    areaChoose?: any;
+    initialPath?: string;
+    areaStatus?: boolean;
+    isPathChooser?: boolean;
+    showOnlyFolders?: boolean;
+    tmSession?: ITopMediaSession;
+    selectionMode?: 'single' | 'multiple';
+    onFileChanged?: (event: string) => void;
+    onFolderChanged?: (event: string) => void;
+}
+declare const TMAreaManager: React.FC<ITMAreaManager>;
+export default TMAreaManager;