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

package/lib/components/base/TMDataGridExportForm.js

@@ -1,215 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Workbook } from 'exceljs';
-import { buildValueToLabelMapFromDataColumns, getExceptionMessage, SDKUI_Localizator } from '../../helper';
-import TMCheckBox from '../editors/TMCheckBox';
-import TMButton from './TMButton';
-import TMModal from './TMModal';
-import { TMExceptionBoxManager } from './TMPopUp';
-import { ResultTypes } from '@topconsultnpm/sdk-ts';
-import TMSpinner from './TMSpinner';
-import { TMResultManager } from '../forms/TMResultDialog';
-import TMDropDown from '../editors/TMDropDown';
-const formatDataSource = [
-    { value: 'csv', display: 'CSV' },
-    { value: 'xlsx', display: 'XLSX' },
-];
-const TMDataGridExportForm = (props) => {
-    const { searchResult, dataSource, dataColumns, selectedRowKeys, onCloseExportForm } = props;
-    // State to track the selected export format (default: 'csv')
-    const [formatSelected, setFormatSelected] = useState('csv');
-    // Boolean state to indicate whether to export only the selected items
-    const [exportSelectedOnly, setExportSelectedOnly] = useState(selectedRowKeys.length > 0 ? true : false);
-    // Boolean state to indicate whether to export the "description" fields in data lists
-    const [exportDescriptionsForDataLists, setExportDescriptionsForDataLists] = useState(true);
-    // Boolean state to indicate whether to hide the selection and format during export
-    const [exportSelectedFormatColumns, setExportSelectedFormatColumns] = useState(false);
-    const onStatusValueChange = (e) => {
-        if (!e?.target?.value)
-            return;
-        setFormatSelected(e.target.value);
-    };
-    // Function to trigger download of a file represented by a Blob with the given file extension
-    const downloadFile = (blob, extension) => {
-        // Helper function to ensure numbers (e.g., 4 -> '04') are two digits
-        const formatNumber = (n) => n.toString().padStart(2, '0');
-        // Helper function to generate a timestamp string in the format 'YYYY-MM-DD_HH-MM-SS'
-        const getTimestamp = () => {
-            const now = new Date();
-            const date = `${now.getFullYear()}-${formatNumber(now.getMonth() + 1)}-${formatNumber(now.getDate())}`;
-            const time = `${formatNumber(now.getHours())}-${formatNumber(now.getMinutes())}-${formatNumber(now.getSeconds())}`;
-            return `${date}_${time}`;
-        };
-        // Create a temporary URL representing the file Blob
-        const url = URL.createObjectURL(blob);
-        // Create an anchor element to trigger the download
-        const a = document.createElement('a');
-        a.href = url;
-        // Set the filename using a localized prefix and the generated timestamp
-        a.download = `${SDKUI_Localizator.SearchResult}_${getTimestamp()}.${extension}`;
-        // Append the anchor to the document, click it to start download, then remove it
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        // Revoke the created URL to release memory
-        URL.revokeObjectURL(url);
-    };
-    const handleExport = async () => {
-        // Exit early if dataSource or dataColumns are not defined to avoid errors
-        if (!dataSource || !dataColumns)
-            return;
-        let result = [];
-        try {
-            TMSpinner.show({ description: SDKUI_Localizator.Loading });
-            // Retrieve columns from the search result, or use an empty array if not available
-            const columns = searchResult?.dtdResult?.columns ?? [];
-            // If exportDescriptionsForDataLists is true, build a map of values to labels for the columns; otherwise use an empty Map
-            const valueToNameMap = exportDescriptionsForDataLists ? await buildValueToLabelMapFromDataColumns(columns) : new Map();
-            // Create a Set from selectedRowKeys for efficient lookup
-            const selectedSet = new Set(selectedRowKeys);
-            // If exporting only selected rows, filter the dataSource accordingly; otherwise use the full dataSource
-            const rowsToExport = exportSelectedOnly ? dataSource.filter((item) => selectedSet.has(item.rowIndex)) : dataSource;
-            // Filter columns to only those that are visible; optionally hide 'object' data types based on the `hideSelection` flag
-            let visibleColumns = dataColumns.filter(col => {
-                if (!exportSelectedFormatColumns) {
-                    return col.visible !== false && col.dataField !== "FILEEXT";
-                }
-                else {
-                    return col.visible !== false;
-                }
-            });
-            // Function to get the value for a column and its value in a row
-            const getValue = (col, value) => {
-                // Replace raw value with corresponding label from the map if applicable
-                let result = value;
-                if (exportDescriptionsForDataLists && col.dataField && valueToNameMap.size > 0) {
-                    const mapForField = valueToNameMap.get(col.dataField);
-                    if (mapForField) {
-                        result = mapForField.get(value) ?? value;
-                    }
-                    else {
-                        result = value;
-                    }
-                }
-                // If the column is a datetime type, attempt to format it as a locale date string
-                if (col.dataType === 'datetime' && result) {
-                    const parsedDate = new Date(result);
-                    if (!isNaN(parsedDate.getTime())) {
-                        result = parsedDate.toLocaleDateString();
-                    }
-                }
-                // Return the cleaned string value, stripping double quotes to avoid CSV formatting issues
-                return (result ?? '').toString().replace(/"/g, '');
-            };
-            switch (formatSelected) {
-                case 'csv': {
-                    const getHeaderName = (col) => col.caption ?? col.dataField;
-                    const headers = !exportSelectedFormatColumns ? visibleColumns.map(getHeaderName) : [SDKUI_Localizator.SelectedSingular, ...visibleColumns.map(getHeaderName)];
-                    const csvRows = [];
-                    csvRows.push(headers.join(';'));
-                    rowsToExport.forEach((item, idx) => {
-                        const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
-                        const rowValues = [];
-                        if (exportSelectedFormatColumns) {
-                            const status = selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected;
-                            rowValues.push(status || '');
-                        }
-                        visibleColumns.forEach(col => {
-                            if (col.dataField) {
-                                rowValues.push(getValue(col, item[col.dataField]));
-                            }
-                        });
-                        csvRows.push(rowValues.join(';'));
-                    });
-                    const blob = new Blob([csvRows.join('\r\n')], { type: 'text/csv;charset=utf-8;' });
-                    downloadFile(blob, formatSelected);
-                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
-                    break;
-                }
-                case 'xlsx': {
-                    // Create a new Excel workbook and add a worksheet with localized name
-                    const workbook = new Workbook();
-                    const worksheet = workbook.addWorksheet(SDKUI_Localizator.SearchResult);
-                    // Map visible columns to worksheet column definitions
-                    const baseColumns = visibleColumns.map(col => ({ header: col.caption !== undefined ? col.caption : col.dataField, key: col.dataField, width: 10, style: { numFmt: '@' } }));
-                    // Add a selection status column at the beginning if hideSelection is false
-                    const headers = !exportSelectedFormatColumns ? baseColumns : [{ header: SDKUI_Localizator.SelectedSingular, key: '_selected', width: 10, style: { numFmt: '@' } }, ...baseColumns];
-                    worksheet.columns = headers;
-                    // Style the header row cells: font, fill color, and border
-                    worksheet.getRow(1).eachCell({ includeEmpty: true }, cell => {
-                        cell.font = { name: 'Segoe UI', size: 9 };
-                        cell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'C0C0C0' } };
-                        cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
-                    });
-                    // Add rows to worksheet
-                    rowsToExport.forEach((item, idx) => {
-                        // Get original index of the item in dataSource
-                        const originalIndex = exportSelectedOnly ? selectedRowKeys[idx] : dataSource.indexOf(item);
-                        const rowObj = {};
-                        // Add selection status if hideSelection is false
-                        if (exportSelectedFormatColumns) {
-                            rowObj._selected = selectedSet.has(originalIndex) ? SDKUI_Localizator.SelectedSingular : SDKUI_Localizator.Deselected;
-                        }
-                        // Add data for each visible column
-                        visibleColumns.forEach(col => {
-                            if (col.dataField) {
-                                rowObj[col.dataField] = getValue(col, item[col.dataField]);
-                            }
-                        });
-                        worksheet.addRow(rowObj);
-                    });
-                    // Adjust column widths based on header and cell contents without iterating each cell manually
-                    worksheet.columns.forEach(col => {
-                        if (!col || !col.header || !col.key)
-                            return;
-                        const headerLength = col.header.toString().length;
-                        // 'getColumn' accetta solo string | number, col.key è garantito perché controllato sopra
-                        const maxDataLength = worksheet.getColumn(col.key).values.reduce((max, val) => {
-                            const strVal = val !== undefined && val !== null ? val.toString() : '';
-                            const length = strVal.length;
-                            return length > max ? length : max;
-                        }, 0);
-                        col.width = Math.max(headerLength, maxDataLength) + 2;
-                    });
-                    // Apply font and border styling to all cells in all rows in a single pass
-                    worksheet.eachRow((row) => {
-                        row.eachCell({ includeEmpty: true }, cell => {
-                            cell.font = { name: 'Segoe UI', size: 9 };
-                            cell.border = { top: { style: 'thin' }, left: { style: 'thin' }, bottom: { style: 'thin' }, right: { style: 'thin' } };
-                        });
-                    });
-                    // Generate Excel file as a buffer
-                    const buffer = await workbook.xlsx.writeBuffer();
-                    // Create a Blob from the buffer for downloading
-                    const blob = new Blob([buffer], { type: 'application/octet-stream' });
-                    // Trigger the file download with extension 'xlsx'
-                    downloadFile(blob, formatSelected);
-                    result.push({ rowIndex: 1, id1: 1, id2: 0, description: SDKUI_Localizator.OperationSuccess, resultType: ResultTypes.SUCCESS });
-                    break;
-                }
-                default:
-                    break;
-            }
-        }
-        catch (error) {
-            result.push({ rowIndex: 1, id1: 1, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(error) });
-            // Show any exceptions in a custom exception box
-            TMExceptionBoxManager.show({ exception: error });
-        }
-        finally {
-            TMSpinner.hide();
-            TMResultManager.show(result, SDKUI_Localizator.Export, "ID", undefined);
-            onCloseExportForm();
-        }
-    };
-    return _jsx(TMModal, { title: `${SDKUI_Localizator.Export}`, width: '400px', height: '250px', onClose: onCloseExportForm, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '6px 12px', height: '100%', width: '100%' }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMDropDown, { label: SDKUI_Localizator.Format, value: formatSelected, dataSource: formatDataSource, onValueChanged: onStatusValueChange }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { elementStyle: {
-                            opacity: selectedRowKeys.length === 0 ? 0.5 : 1,
-                            cursor: selectedRowKeys.length === 0 ? 'not-allowed' : 'pointer'
-                        }, label: `${SDKUI_Localizator.ExportOnlySelectedDocuments} (${selectedRowKeys.length})`, value: exportSelectedOnly, disabled: selectedRowKeys.length === 0, onValueChanged: () => { setExportSelectedOnly(prev => !prev); } }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { label: SDKUI_Localizator.ExportDataListsDescriptionField, value: exportDescriptionsForDataLists, onValueChanged: () => { setExportDescriptionsForDataLists(prev => !prev); } }) }), _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: _jsx(TMCheckBox, { label: SDKUI_Localizator.ExportSelectedColumnsAndFormatLabel, value: exportSelectedFormatColumns, onValueChanged: () => { setExportSelectedFormatColumns(prev => !prev); } }) }), _jsx("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        gap: '10px',
-                        marginTop: '5px'
-                    }, children: _jsx(TMButton, { caption: SDKUI_Localizator.Export, btnStyle: 'normal', color: 'success', showTooltip: false, onClick: handleExport }) })] }) });
-};
-export default TMDataGridExportForm;

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

@@ -1,15 +0,0 @@
-import React from 'react';
-declare enum DeviceType {
-    MOBILE = "mobile",
-    TABLET = "tablet",
-    DESKTOP = "desktop"
-}
-interface DeviceContextProps {
-    deviceType?: DeviceType;
-}
-declare const DeviceContext: React.Context<DeviceContextProps | undefined>;
-declare const TMDeviceProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-declare const useDeviceType: () => DeviceType | undefined;
-export { DeviceContextProps, DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMDeviceProvider.js

@@ -1,41 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, createContext, useMemo, useContext } from 'react';
-var DeviceType;
-(function (DeviceType) {
-    DeviceType["MOBILE"] = "mobile";
-    DeviceType["TABLET"] = "tablet";
-    DeviceType["DESKTOP"] = "desktop";
-})(DeviceType || (DeviceType = {}));
-const DESKTOP_BREAKPOINT = 1024;
-const TABLET_BREAKPOINT = 768;
-const DeviceContext = createContext(undefined);
-const TMDeviceProvider = ({ children }) => {
-    const [deviceType, setDeviceType] = useState(DeviceType.DESKTOP);
-    const updateDeviceType = () => {
-        const width = window.innerWidth;
-        if (width >= DESKTOP_BREAKPOINT) {
-            setDeviceType(DeviceType.DESKTOP);
-        }
-        else if (width >= TABLET_BREAKPOINT) {
-            setDeviceType(DeviceType.TABLET);
-        }
-        else {
-            setDeviceType(DeviceType.MOBILE);
-        }
-    };
-    useEffect(() => {
-        updateDeviceType();
-        window.addEventListener('resize', updateDeviceType);
-        return () => window.removeEventListener('resize', updateDeviceType);
-    }, []);
-    const contextValue = useMemo(() => ({ deviceType }), [deviceType]);
-    return (_jsxs(DeviceContext.Provider, { value: contextValue, children: [" ", children, " "] }));
-};
-const useDeviceType = () => {
-    const context = useContext(DeviceContext);
-    if (!context) {
-        throw new Error('DeviceProvider does not exsist');
-    }
-    return context.deviceType;
-};
-export { DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

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

@@ -1,23 +0,0 @@
-import React from 'react';
-export interface ITMDropDownMenuRef {
-    focus: () => void;
-}
-export interface ITMDropDownMenu {
-    content: JSX.Element;
-    color?: string;
-    backgroundColor?: string;
-    disabled?: boolean;
-    borderRadius?: string;
-    items?: ITMDropDownMenuItem[];
-    onMenuShown?: () => void;
-}
-export interface ITMDropDownMenuItem {
-    icon?: any;
-    text: any;
-    items?: ITMDropDownMenuItem[];
-    disabled?: boolean;
-    beginGroup?: boolean;
-    onClick?: () => void;
-}
-declare const TMDropDownMenu: React.ForwardRefExoticComponent<ITMDropDownMenu & React.RefAttributes<ITMDropDownMenuRef>>;
-export default TMDropDownMenu;

package/lib/components/base/TMDropDownMenu.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
-import ContextMenu from 'devextreme-react/context-menu';
-import { FontSize, TMColors } from '../../utils/theme';
-import { genUniqueId } from '../../helper';
-const StyledContent = styled.div `
-    cursor: pointer;
-    border-radius: ${props => props.$borderRadius};
-    color: ${props => props.$color};
-    /* background-color: ${props => props.$backgroundColor}; */
-    background-color: transparent;
-    opacity: ${props => props.$disabled ? 0.4 : 1};
-    pointer-events: ${props => props.$disabled ? 'none' : ''};
-    user-select: none;
-    display: flex;
-    align-items: center;
-
-    &:focus {
-        outline: none;
-        border-bottom: ${props => props.$disabled ? '' : '2px solid'};
-        border-bottom-color: ${TMColors.primary};
-    }
-`;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
-`;
-const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
-    const [id, setID] = useState('');
-    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
-    useEffect(() => { setID(genUniqueId()); }, [content]);
-    useImperativeHandle(ref, () => ({
-        focus: () => {
-            dropDownMenuElementRef.current?.focus();
-        },
-    }));
-    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
-});
-export default TMDropDownMenu;

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

@@ -1,39 +0,0 @@
-import { ValidationItem } from "@topconsultnpm/sdk-ts";
-export type Colors = 'error' | 'warning' | 'success' | 'info' | 'primary' | 'secondary' | 'tertiary' | 'standard';
-type IconModes = 'outside' | 'inside' | 'none';
-type LabelModes = 'left' | 'top' | 'none';
-export type Sizes = 'small' | 'medium' | 'large';
-export type TMEditorButtonData = {
-    icon: any;
-    text?: string;
-    onClick?: () => void;
-};
-export interface ITMEditorBase {
-    backgroundColor?: string;
-    buttons?: TMEditorButtonData[];
-    customActionIcon?: any;
-    disabled?: boolean;
-    elementStyle?: React.CSSProperties;
-    flexBase?: number;
-    fontSize?: string;
-    height?: string;
-    horizontalFlexBase?: number;
-    icon?: any;
-    iconMode?: IconModes;
-    iconSize?: Sizes;
-    isModifiedWhen?: boolean;
-    label?: string;
-    labelColor?: string;
-    labelMode?: LabelModes;
-    labelPosition?: 'top' | 'left' | 'right';
-    labelAlign?: boolean;
-    placeHolder?: string;
-    readOnly?: boolean;
-    showId?: boolean;
-    showClearButton?: boolean;
-    value?: any;
-    validationItems?: ValidationItem[];
-    width?: string;
-    borderRadius?: string;
-}
-export {};

package/lib/components/base/TMEditorBase.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,45 +0,0 @@
-import { FileItem, TMFileManagerContextMenuItem } from "./TMFileManagerUtils";
-interface TMFileManagerProps {
-    /** The currently focused file */
-    focusedFile: FileItem | undefined;
-    /** Callback to handle changes in the focused file */
-    handleFocusedFile: (fileItem: FileItem | undefined) => void;
-    /** Array of selected files */
-    selectedFiles: Array<FileItem>;
-    /** Callback to handle file selection changes */
-    handleSelectedFiles: (fileItem: Array<FileItem>) => void;
-    /** Selected Folder */
-    selectedFolder: FileItem | undefined;
-    /** Callback to handle folder focus changes */
-    handleFocusedFolder: (folderItem: FileItem | undefined) => void;
-    /** Callback to refresh the file manager */
-    refreshCallback: () => Promise<void>;
-    /** Represents the file system tree structure */
-    treeFs: FileItem;
-    /** Context menu items for folders */
-    folderContextMenuItems: Array<TMFileManagerContextMenuItem>;
-    /** Context menu items for files */
-    fileContextMenuItems: Array<TMFileManagerContextMenuItem>;
-    /** Optional: Callback to handle folder selection changes */
-    handleSelectedFolder?: (folderItem: FileItem | undefined) => void;
-    /** Optional: Callback for handling double-click events on a file */
-    onDoubleClickHandler?: (fileItem: FileItem | undefined) => void;
-    /** Optional: Session User ID */
-    userID?: number;
-    /** Optional: Determines the view mode of the file manager (Can be either 'thumbnails' or 'details') */
-    viewMode?: 'thumbnails' | 'details';
-    /** Optional: Callback for handling drop file */
-    handleDropFileCallback?: (files: Array<File>) => void;
-    /** Optional: Number of total founded */
-    dcmtsFound?: number;
-    /** Optional: Flag to show or hide the panel */
-    showPanel?: boolean;
-    /** Optional: Callback to handle panel close */
-    onClosePanel?: () => void;
-    /** Optional: Flag to allow panel maximization */
-    allowMaximize?: boolean;
-    /** Optional: Callback to handle back button */
-    onMaximizePanel?: () => void;
-}
-declare const TMFileManager: (props: TMFileManagerProps) => import("react/jsx-runtime").JSX.Element;
-export default TMFileManager;