@topconsultnpm/sdkui-react-beta 6.13.34 → 6.13.35

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

@@ -1,69 +0,0 @@
-import { ITMPanelProps } from './TMPanel';
-export declare const defaultTMPanelManagerToolbarStyles: {
-    container: {
-        backgroundColor: string;
-        padding: string;
-    };
-    items: {
-        width: string;
-        height: string;
-        inactiveBackgroundColor: string;
-        activeBackgroundColor: string;
-        borderRadius: string;
-        marginBottom: string;
-        iconFontSize: string;
-        iconColor: string;
-    };
-};
-export interface TMPanelManagerMatrixColumn {
-    rows: Array<TMPanelManagerMatrixRow>;
-    width?: string;
-}
-export interface ExtendedTMPanelProps extends ITMPanelProps {
-    showCustomMaximizeMinimizeButton?: boolean;
-}
-export interface TMPanelManagerMatrixRow {
-    id: string;
-    hidden: boolean;
-    content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toogleMaximizeMinimizePanelCallback: (id: string) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
-    height?: string;
-    width?: string;
-    panel?: ExtendedTMPanelProps;
-}
-export interface TMPanelManagerToolbarStyles {
-    container?: {
-        backgroundColor?: string;
-        padding?: string;
-    };
-    items?: {
-        width?: string;
-        height?: string;
-        inactiveBackgroundColor?: string;
-        activeBackgroundColor?: string;
-        borderRadius?: string;
-        marginBottom?: string;
-        iconFontSize?: string;
-        iconColor?: string;
-    };
-}
-export interface TMPanelManagerToolbarItem {
-    id: string;
-    icon: string | JSX.Element;
-    tooltipName: string;
-    panelManagerMatrixRowId: string;
-    alternativePanelManagerMatrixRowId?: Array<string>;
-    beginGroup?: boolean;
-    disabled?: boolean;
-    visible?: boolean;
-}
-export interface TMPanelManagerToolbar {
-    items: Array<TMPanelManagerToolbarItem>;
-    styles?: TMPanelManagerToolbarStyles;
-}
-export declare const calculatePanelSizes: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>, hiddenIds: Set<string>) => Map<string, {
-    height: string;
-}>;
-export declare const getInitialMobilePanelID: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>) => string | undefined;
-export declare const DesktopToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
-export declare const MobileToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
-export declare const getDynamicColumnWidth: (col: TMPanelManagerMatrixColumn | undefined, hiddenPanelIds: Set<string>, allColumns: Array<TMPanelManagerMatrixColumn>) => string;

package/lib/components/base/TMPanelManagerMatrixUtils.js

@@ -1,155 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ScrollView } from "devextreme-react";
-import { SDKUI_Globals } from '../../helper';
-import TMTooltip from './TMTooltip';
-export const defaultTMPanelManagerToolbarStyles = {
-    container: {
-        backgroundColor: '#f0f0f0',
-        padding: '6px'
-    },
-    items: {
-        width: '35px',
-        height: '35px',
-        inactiveBackgroundColor: '#e57373',
-        activeBackgroundColor: '#81c784',
-        borderRadius: '50%',
-        marginBottom: '6px',
-        iconFontSize: "25px",
-        iconColor: '#ffffff'
-    }
-};
-;
-// Helper to calculate sizes based on hidden panel IDs
-export const calculatePanelSizes = (panelMatrixMap, hiddenIds) => {
-    const sizes = new Map();
-    panelMatrixMap.forEach((column) => {
-        const visiblePanels = column.rows.filter(p => !hiddenIds.has(p.id));
-        const hiddenPanels = column.rows.filter(p => hiddenIds.has(p.id));
-        if (visiblePanels.length > 0) {
-            const totalVisibleHeight = visiblePanels.reduce((sum, panel) => {
-                return sum + parseFloat(panel.height || '0');
-            }, 0);
-            visiblePanels.forEach(panel => {
-                const originalHeight = parseFloat(panel.height || '0');
-                const newHeightPercent = (originalHeight / totalVisibleHeight) * 100;
-                sizes.set(panel.id, { height: `${newHeightPercent}%` });
-            });
-        }
-        hiddenPanels.forEach(panel => {
-            sizes.set(panel.id, { height: '0%' });
-        });
-    });
-    return sizes;
-};
-export const getInitialMobilePanelID = (panelMatrixMap) => {
-    const firstEntry = panelMatrixMap.values().next().value?.rows;
-    if (!firstEntry)
-        return undefined;
-    const visiblePanel = firstEntry.find((row) => !row.hidden);
-    return visiblePanel?.id;
-};
-export const DesktopToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
-    return _jsx("div", { style: {
-            width: '40px',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            borderRadius: '8px',
-            alignItems: 'center',
-            marginLeft: SDKUI_Globals.userSettings.themeSettings.gutters,
-            // customizable properties
-            backgroundColor: toolbar.styles?.container?.backgroundColor ?? defaultTMPanelManagerToolbarStyles.container.backgroundColor,
-            padding: toolbar.styles?.container?.padding ?? defaultTMPanelManagerToolbarStyles.container.padding,
-        }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
-            return _jsxs("div", { children: [item.beginGroup && index !== 0 && (_jsx("hr", { style: { margin: '10px 0', borderTop: '1px solid #c6c6c6', width: '100%' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            border: 'none',
-                            cursor: 'pointer',
-                            transition: 'background-color 0.3s, transform 0.2s',
-                            // customizable properties
-                            width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
-                            height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
-                            backgroundColor: item.disabled ? '#cccccc'
-                                : hiddenPanelIds.has(item.panelManagerMatrixRowId)
-                                    ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
-                                    : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
-                            borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
-                            marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.transform = 'scale(1.1)';
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.transform = 'scale(1)';
-                        }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Desktop-Toolbar-Item-" + item.id);
-        }) }, "TMPanelManagerMatrix-Desktop-Toolbar");
-};
-export const MobileToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
-    return _jsx("div", { style: {
-            width: '100%',
-            height: '60px',
-            background: 'linear-gradient(135deg, #e0eafc, #cfdef3)',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            borderRadius: '12px',
-            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.15)',
-            alignItems: 'center',
-            padding: '5px',
-        }, children: _jsx("div", { style: {
-                display: "flex",
-                overflow: "hidden",
-                borderRadius: "12px",
-                backgroundColor: "#ffffff",
-                boxShadow: "0 6px 12px rgba(0,0,0,0.1)",
-                width: "100%",
-                height: '100%',
-            }, children: _jsx(ScrollView, { direction: "horizontal", showScrollbar: "always", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1, style: { whiteSpace: "nowrap", width: "100%" }, children: _jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center", padding: "5px" }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
-                        return _jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [item.beginGroup && index !== 0 && (_jsx("div", { style: { height: '35px', width: '1px', backgroundColor: '#c6c6c6', margin: '0 8px' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        border: 'none',
-                                        cursor: 'pointer',
-                                        transition: 'background-color 0.3s, transform 0.2s',
-                                        // customizable properties
-                                        width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
-                                        height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
-                                        backgroundColor: item.disabled ? '#cccccc'
-                                            : hiddenPanelIds.has(item.panelManagerMatrixRowId)
-                                                ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
-                                                : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
-                                        borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
-                                        marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.transform = 'scale(1.1)';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.transform = 'scale(1)';
-                                    }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Mobile-Toolbar-Item-" + item.id);
-                    }) }) }) }) }, "TMPanelManagerMatrix-Mobile-Toolbar");
-};
-export const getDynamicColumnWidth = (col, hiddenPanelIds, allColumns) => {
-    if (!col)
-        return '100%';
-    // If all rows in the column are hidden, return width 0%
-    const allRowsHidden = col.rows.every(row => hiddenPanelIds.has(row.id));
-    if (allRowsHidden)
-        return '100%';
-    // Calculate which columns are visible (at least one row not hidden)
-    const visibleColumns = allColumns.filter(c => c.rows.some(r => !hiddenPanelIds.has(r.id)));
-    const visibleCount = visibleColumns.length;
-    // If all columns are visible, use the original widths
-    if (visibleCount === allColumns.length) {
-        return col.width ?? `${100 / visibleCount}%`;
-    }
-    // If some columns are hidden, redistribute the 100% width among visible columns
-    // proportionally to their original widths
-    // First, sum the original widths (in percent) of the visible columns
-    const totalPercent = visibleColumns.reduce((sum, c) => {
-        const w = c.width ? parseFloat(c.width) : (100 / visibleCount);
-        return sum + w;
-    }, 0);
-    // Calculate the width percentage for this column based on its original width proportion
-    const thisPercent = col.width ? parseFloat(col.width) : (100 / visibleCount);
-    return `${(thisPercent / totalPercent) * 100}%`;
-};