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

package/lib/components/base/TMAreaManager.js

@@ -1,733 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import FileManager, { Column, Details, ItemView, Permissions, Notifications, ContextMenu, Toolbar, Item } from 'devextreme-react/file-manager';
-import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts';
-import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
-import FileSystemError from "devextreme/file_management/error";
-import Button from "devextreme/ui/button";
-import { alert, confirm } from "devextreme/ui/dialog";
-import { loadMessages } from 'devextreme/localization';
-import { Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
-import { TMExceptionBoxManager } from './TMPopUp';
-import ShowAlert from './TMAlert';
-import { TMLayoutWaitingContainer } from './TMWaitPanel';
-import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
-import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
-import { TMColors } from '../../utils/theme';
-import styled from 'styled-components';
-import { renderToStaticMarkup } from 'react-dom/server';
-export class TMFileSystemItem {
-    constructor() {
-        this.name = "";
-        this.thumbnail = "";
-        this.isDirectory = false;
-        this.size = 0;
-    }
-}
-let abortController = new AbortController();
-const svgString = encodeURIComponent(renderToStaticMarkup(_jsx(IconFolderForCSS, { fill: "#9fc6e7" })));
-const svgDataUrl = `data:image/svg+xml,${svgString}`;
-const StyledFileManagerWrapper = styled.div `
-  .dx-filemanager .dx-treeview-item .dx-icon-folder {
-    display: none !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content {
-    position: relative !important;
-    padding-left: 26px !important;
-    min-height: 22px !important;
-  }
-  .dx-filemanager .dx-treeview-item .dx-treeview-item-content::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 60%;
-    width: 20px;
-    height: 20px;
-    transform: translateY(-50%);
-    background-image: url("${svgDataUrl}");
-    background-size: contain;
-    background-repeat: no-repeat;
-    display: inline-block;
-    z-index: 1;
-  }
-`;
-const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false }) => {
-    // State to store the instance of CustomFileSystemProvider. It is initialized once and used for managing file system operations.
-    const [areaProvider, setAreaProvider] = useState();
-    // LEFT PANEL = PARENT DIR | RIGHT PANEL = File Sytem Item
-    // State to maintain the selected parent dir (Support area - left panel)
-    const [parentDir, setParentDir] = useState(null);
-    // State to maintain the selected parent path (Support area - left panel)
-    const [currentRoute, setCurrentRoute] = useState('');
-    // State to maintain the Area Descriptor Array (Support area - left panel)
-    const [areas, setAreas] = useState([]);
-    // State to maintain the Area Descriptor Name Set (Support area - left panel)
-    const [areasRoots, setAreasRoots] = useState(new Set());
-    // State to store the file system items of the current directory's parent
-    const [parentDirectoryFileSystemItems, setParentDirectoryFileSystemItems] = useState([]);
-    // State to maintain the selected area file (File System Item - right panel)
-    const [areaFile, setAreaFile] = useState('');
-    // State to maintain the selected area folder (File System Item - right panel)
-    const [areaFolder, setAreaFolder] = useState('');
-    // State to maintain the focused/clicked file system item (File System Item - right panel)
-    const [focusedFileSystemItem, setFocusedFileSystemItem] = useState(undefined);
-    // State to maintain the number of selected items)
-    const [selectedItemsCount, setSelectedItemsCount] = useState(0);
-    // State to maintain the counter values (total item into selected support area and selected items)
-    const [counterValues, setCounterValues] = useState(new Map());
-    // State to maintain the selection mode (File System Item - right panel)
-    const [selectionMode, setSelectionMode] = useState('single');
-    /* State to manage the Wait Panel */
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showPrimary, setShowPrimary] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
-    // Timer ID to store reference for any scheduled operation
-    let timerId = null;
-    // Prefix for area folder names
-    const AreaFolderNamePrefix = "AID_";
-    // Prefix for area paths, indicating a specific file system location
-    const AreaPathPrefix = "tmarea:\\\\";
-    // Arrays to store resolve functions for existing and non-existing files
-    let resolvesForExistingFiles = [];
-    let resolvesForNonExistingFiles = [];
-    // Promise to store the directory content for a destination folder
-    let destinationDirectoryContentPromise = null;
-    // Reference to the file manager component
-    const fileManagerRef = useRef(null);
-    // Cache for uploaded file IDs, mapping file paths to their corresponding IDs
-    let _cacheUploadFileId = new Map();
-    useEffect(() => {
-        const defaultCounterItems = new Map([
-            [
-                String(SDKUI_Localizator.AllItems),
-                {
-                    key: String(SDK_Localizator.Areas),
-                    show: true,
-                    caption: String(SDK_Localizator.Areas),
-                    value: areasRoots.size,
-                    icon: _jsx(IconCloud, {}),
-                    order: 0
-                }
-            ],
-            [
-                String(SDKUI_Localizator.All),
-                {
-                    key: String(SDKUI_Localizator.AllFilesAndFoldersInSupportArea),
-                    show: true,
-                    caption: String(SDKUI_Localizator.AllFilesAndFoldersInSupportArea),
-                    value: focusedFileSystemItem?.name === '' ? 0 : parentDirectoryFileSystemItems.length,
-                    icon: _jsx(IconAll, {}),
-                    order: 0
-                }
-            ],
-            [
-                String(CounterItemKey.selectedItems),
-                {
-                    key: String(CounterItemKey.selectedItems),
-                    show: true,
-                    caption: String(SDKUI_Localizator.SelectedItems),
-                    value: selectedItemsCount,
-                    icon: _jsx(IconSelected, {}),
-                    order: 1
-                }
-            ]
-        ]);
-        setCounterValues(defaultCounterItems);
-    }, [areasRoots, focusedFileSystemItem, parentDirectoryFileSystemItems, selectedItemsCount]);
-    useEffect(() => {
-        // If areaProvider is already set, exit early to prevent reinitialization
-        if (areaProvider)
-            return;
-        // Initialize a new instance of CustomFileSystemProvider with necessary methods
-        setAreaProvider(new CustomFileSystemProvider({
-            copyItem, // Function to copy an item
-            getItems, // Function to retrieve items
-            moveItem, // Function to move an item
-            renameItem, // Function to rename an item
-            deleteItem, // Function to delete an item
-            downloadItems, // Function to download items
-            uploadFileChunk, // Function to upload file chunks
-            createDirectory // Function to create a directory
-        }));
-        // Load localization messages for different languages
-        loadMessages({
-            "it": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Sei sicuro di voler eliminare {0}?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Sei sicuro di voler eliminare {0} elementi?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Sposta"
-            },
-            "fr": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Êtes-vous sûr de vouloir supprimer {0}?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Êtes-vous sûr de vouloir supprimer {0} éléments?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Déplacer"
-            },
-            "pt": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Tem a certeza de que pretende eliminar {0}?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Tem a certeza de que pretende eliminar {0} itens?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Mover"
-            },
-            "de": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Möchten Sie {0} wirklich löschen?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Möchten Sie {0} Elemente wirklich löschen?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Verschieben"
-            },
-            "es": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "¿Estás seguro de que quieres eliminar {0}?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "¿Estás seguro de que quieres eliminar {0} artículos?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Mover"
-            },
-            "en": {
-                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Are you sure you want to delete {0}?",
-                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Are you sure you want to delete {0} items?",
-                "dxFileManager-dialogDirectoryChooserMoveButtonText": "Move"
-            }
-        });
-    }, []); // Empty dependency array ensures this effect runs only once when the component mounts
-    useEffect(() => {
-        const btnNewDir = document.querySelector(".dx-filemanager-wrapper [aria-label='Nuova cartella']");
-        const instanceBtnNewDir = Button.getInstance(btnNewDir);
-        const btnSearchFile = document.querySelector(".dx-filemanager-wrapper [aria-label='Carica i files']");
-        const instanceBtnSearchFile = Button.getInstance(btnSearchFile);
-        if (currentRoute === '') {
-            instanceBtnNewDir?.option("disabled", true);
-            instanceBtnSearchFile?.option("disabled", true);
-        }
-        else {
-            instanceBtnNewDir?.option("disabled", false);
-            instanceBtnSearchFile?.option("disabled", false);
-        }
-    }, [parentDir, currentRoute]);
-    useEffect(() => {
-        if (!props.initialPath?.startsWith(AreaPathPrefix))
-            return;
-        //Rimuovere i prefissi
-        let curFld = props.initialPath?.replace(AreaPathPrefix, '').replace(AreaFolderNamePrefix, '');
-        const keys = curFld?.split("\\");
-        if (!keys || keys.length === 0)
-            return;
-        const aid = keys[0];
-        const ad = areas.find(ad => ad.id?.toString() == aid);
-        //sostituire ID Area con il nome
-        curFld = curFld?.replace(keys[0], ad?.name ?? '').replaceAll("\\", "/");
-        if (!props.showOnlyFolders) {
-            fileManagerRef.current?.instance().option("focusedItemKey", curFld);
-            // Se lavoriamo con i files impostiamo la folder parent
-            curFld = curFld.replace(keys[keys.length - 1], "");
-        }
-        fileManagerRef.current?.instance().option("currentPath", curFld);
-    }, [areas]);
-    useEffect(() => {
-        props.onFolderChanged?.(areaFolder);
-    }, [areaFolder]);
-    useEffect(() => {
-        props.onFileChanged?.(areaFile);
-    }, [areaFile]);
-    useEffect(() => {
-        setSelectionMode('multiple');
-        fileManagerRef.current?.instance().refresh();
-    }, [props.areaStatus]);
-    const checkTargetDirectory = (operationType, e, data, resolve) => {
-        const fileExists = !!data.find((x) => x.name === (operationType === 'copyOrMove' ? e.item.name : e.fileData.name));
-        if (fileExists) {
-            resolvesForExistingFiles.push(resolve);
-        }
-        else {
-            resolvesForNonExistingFiles.push(resolve);
-        }
-        if (!timerId) {
-            timerId = setTimeout(() => {
-                const showDialog = resolvesForExistingFiles.length > 0;
-                if (showDialog) {
-                    let msg = '';
-                    if (resolvesForExistingFiles.length === 1) {
-                        msg = SDKUI_Localizator.FileManager_QuestionAlreadyExistsFile.replaceParams(operationType === 'copyOrMove' ? e.item.name : e.fileData.name);
-                    }
-                    else {
-                        msg = SDKUI_Localizator.FileManager_QuestionAlreadyExistsFiles.replaceParams(resolvesForExistingFiles.length.toString());
-                    }
-                    const result = confirm(msg, SDKUI_Localizator.Attention);
-                    result.then((dialogResult) => {
-                        resolvesForNonExistingFiles.forEach((res) => {
-                            res({
-                                cancel: false,
-                            });
-                        });
-                        if (dialogResult) {
-                            resolvesForExistingFiles.forEach((res) => {
-                                res({
-                                    cancel: false,
-                                });
-                            });
-                        }
-                        else {
-                            resolvesForExistingFiles.forEach((res) => {
-                                res({
-                                    cancel: fileExists,
-                                    errorCode: fileExists ? 1 : 0,
-                                    errorText: fileExists ? SDKUI_Localizator.OverwritingCanceled : "",
-                                });
-                            });
-                        }
-                        clearTempData();
-                    });
-                }
-                else {
-                    resolvesForNonExistingFiles.forEach((res) => {
-                        res({
-                            cancel: false,
-                        });
-                    });
-                    clearTempData();
-                }
-            }, 200);
-        }
-    };
-    const onItemCopying = (e) => {
-        new Promise((resolve) => {
-            const provider = e.component.option("fileSystemProvider");
-            if (!destinationDirectoryContentPromise) {
-                destinationDirectoryContentPromise = new Promise((res) => {
-                    provider.getItems(e.destinationDirectory).then((data) => {
-                        res(data);
-                        checkTargetDirectory('copyOrMove', e, data, resolve);
-                    });
-                });
-            }
-            else {
-                destinationDirectoryContentPromise.then((data) => {
-                    checkTargetDirectory('copyOrMove', e, data, resolve);
-                });
-            }
-        });
-    };
-    const onFileUploading = (e) => {
-        new Promise((resolve) => {
-            const provider = e.component.option("fileSystemProvider");
-            if (!destinationDirectoryContentPromise) {
-                destinationDirectoryContentPromise = new Promise((res) => {
-                    provider.getItems(e.destinationDirectory).then((data) => {
-                        res(data);
-                        checkTargetDirectory('upload', e, data, resolve);
-                    });
-                });
-            }
-            else {
-                destinationDirectoryContentPromise.then((data) => {
-                    checkTargetDirectory('upload', e, data, resolve);
-                });
-            }
-        });
-    };
-    const clearTempData = () => {
-        timerId = null;
-        resolvesForExistingFiles = [];
-        resolvesForNonExistingFiles = [];
-        destinationDirectoryContentPromise = null;
-    };
-    const getAreaPath = (aid, subFolder) => {
-        if (aid <= 0)
-            return '';
-        if (subFolder === undefined)
-            subFolder = '';
-        let areaPath = `${AreaPathPrefix}${AreaFolderNamePrefix}${aid}\\${subFolder.replaceAll("/", "\\")}`;
-        if (props.showOnlyFolders && !areaPath.toLowerCase().endsWith("\\"))
-            areaPath += "\\";
-        return areaPath;
-    };
-    const blobToBase64Async = async (file) => {
-        return new Promise((resolve, reject) => {
-            const fileReader = new FileReader();
-            fileReader.onerror = () => reject(fileReader.error);
-            fileReader.onloadend = () => {
-                const dataUrl = fileReader.result;
-                // remove "data:mime/type;base64," prefix from data url
-                const base64 = dataUrl.substring(dataUrl.indexOf(',') + 1);
-                resolve(base64);
-            };
-            fileReader.readAsDataURL(file);
-        });
-    };
-    const createDirectory = async (parentDirectory, name) => {
-        if (parentDirectory.path === '' && parentDirectory.name === '') {
-            throw new FileSystemError(5, parentDirectory, SDKUI_Localizator.SelectSupportAreaMessage);
-        }
-        const ad = parentDirectory.dataItem.dataItem;
-        const aid = ad.id;
-        const subFolder = parentDirectory.path === ad.name ? '' : parentDirectory.path.replace(ad.name + '/', '');
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        await tms?.NewAreaEngine().AddFolderAsync(aid, subFolder, name);
-    };
-    const copyItem = async (item, destinationDirectory) => {
-        copyOrMoveItem(item, destinationDirectory, false);
-    };
-    const moveItem = async (item, destinationDirectory) => {
-        copyOrMoveItem(item, destinationDirectory, true);
-    };
-    const copyOrMoveItem = async (itemSource, destinationDirectory, deleteSource) => {
-        const adSource = itemSource.dataItem.dataItem;
-        const aidSource = adSource.id;
-        let subFolderSource = '';
-        const adDest = destinationDirectory.dataItem.dataItem;
-        const aidDest = adDest.id;
-        const subFolderDest = destinationDirectory.path === adDest.name ? '' : destinationDirectory.path.replace(adDest.name + '/', '');
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        if (itemSource.isDirectory) {
-            subFolderSource = itemSource.path === adSource.name ? '' : itemSource.path.replace(adSource.name + '/', '');
-            await tms?.NewAreaEngine().CopyFolderAsync(aidSource, subFolderSource, aidDest, subFolderDest, deleteSource, true).catch((err) => { throw new FileSystemError(5, itemSource, err.message ?? SDKUI_Localizator.Error); });
-        }
-        else {
-            subFolderSource = itemSource.parentPath === adSource.name ? '' : itemSource.parentPath.replace(adSource.name + '/', '');
-            await tms?.NewAreaEngine().CopyFilesAsync(aidSource, subFolderSource, [itemSource.name], aidDest, subFolderDest, deleteSource, true).catch((err) => { throw new FileSystemError(5, itemSource, err.message ?? SDKUI_Localizator.Error); });
-        }
-    };
-    const deleteItem = async (item) => {
-        const ad = item.dataItem.dataItem;
-        const aid = ad.id;
-        const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        if (item.isDirectory) {
-            await tms?.NewAreaEngine().DeleteFoldersAsync(aid, subFolder, [item.name]).catch((err) => { throw new FileSystemError(5, item, err.message ?? SDKUI_Localizator.GetFolderDeletionErrorMessage); });
-        }
-        else {
-            await tms?.NewAreaEngine().DeleteFilesAsync(aid, subFolder, [item.name]).catch((err) => { throw new FileSystemError(5, item, err.message ?? SDKUI_Localizator.GetFolderDeletionErrorMessage); });
-        }
-    };
-    const downloadItems = async (items) => {
-        try {
-            setShowWaitPanel(true);
-            setShowPrimary(items.length > 1);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let i = 0;
-            setWaitPanelMaxValuePrimary(items.length);
-            let firstBlock = true;
-            let maxFileSize = 0;
-            for (const item of items) {
-                if (item.isDirectory)
-                    continue;
-                if (abortController.signal.aborted) {
-                    ShowAlert({ message: 'Operazione interrotta', mode: 'warning', title: "Download files", duration: 3000 });
-                    return;
-                }
-                setWaitPanelTextPrimary(`Download ${item.name}`);
-                const ad = item.dataItem.dataItem;
-                const aid = ad?.id;
-                const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
-                const tms = props.tmSession ?? SDK_Globals.tmSession;
-                const file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, abortController.signal, (pd) => {
-                    if (firstBlock) {
-                        maxFileSize = pd.ProgressBarMaximum ?? 0;
-                        setWaitPanelMaxValueSecondary(maxFileSize);
-                        firstBlock = false;
-                    }
-                    setWaitPanelValueSecondary(pd.ProgressBarValue);
-                    setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                    if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                        setWaitPanelMaxValueSecondary(0);
-                        setWaitPanelValueSecondary(0);
-                        setWaitPanelTextSecondary('');
-                        firstBlock = true;
-                    }
-                });
-                setWaitPanelValuePrimary(i + 1);
-                const fileURL = window.URL.createObjectURL(file);
-                const alink2 = document.createElement('a');
-                alink2.href = fileURL;
-                alink2.download = file?.name;
-                alink2.target = "_blank";
-                alink2.rel = "noreferrer";
-                alink2.click();
-                i++;
-            }
-        }
-        catch (ex) {
-            const err = ex;
-            if (err.name === 'CanceledError') {
-                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
-            }
-            else
-                TMExceptionBoxManager.show({ exception: ex });
-        }
-        finally {
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
-        }
-    };
-    // Asynchronous function to retrieve the items in a given directory (parentDirectory)
-    const getItems = async (parentDirectory) => {
-        // Set the parent directory to the current state
-        setParentDir(parentDirectory);
-        // Initialize an empty array to hold the file system items
-        const fileSystem = [];
-        // Retrieve the current session or use the global session if not available
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        // Check if the parent directory is the root (empty name)
-        if (parentDirectory.name === "") {
-            // Retrieve all area descriptors asynchronously
-            const adlist = await tms?.NewAreaEngine().RetrieveAllAsync().catch((err) => TMExceptionBoxManager.show({ exception: err }));
-            const areasRootsName = new Set();
-            // Iterate over each area descriptor and create corresponding file system items
-            for (const ad of adlist) {
-                // Localize the name of the area
-                ad.name = ad?.nameLoc;
-                if (ad.name)
-                    areasRootsName.add(ad.name);
-                // Create a new file system item for each area descriptor
-                const fsi = new TMFileSystemItem();
-                fsi.name = ad.name ?? ''; // Use the localized name or an empty string if undefined
-                fsi.dataItem = ad; // Store the area descriptor as data
-                fsi.dateModified = ad.lastUpdateTime; // Store the last update time
-                fsi.isDirectory = true; // Since this represents a directory, mark it as a directory
-                fileSystem.push(fsi); // Add the file system item to the list
-            }
-            // Set the areas
-            setAreas(adlist);
-            setAreasRoots(areasRootsName);
-            setParentDirectoryFileSystemItems([]);
-        }
-        else {
-            // If the parent directory is not the root, retrieve files within the area
-            const ad = parentDirectory.dataItem.dataItem;
-            const aid = ad?.id; // Get the area ID
-            const path = parentDirectory.pathKeys.length === 1 ? "" : parentDirectory.path; // Determine the path
-            // Retrieve all files in the area, based on the path, asynchronously
-            const files = await tms?.NewAreaEngine().RetrieveAllFilesAsync(aid, path.replace(ad.name + '/', '')).catch((err) => TMExceptionBoxManager.show({ exception: err }));
-            // Iterate over each file descriptor and create corresponding file system items
-            files.forEach((file) => {
-                const fsi = new TMFileSystemItem();
-                fsi.name = file.name ?? ''; // Set the file name, defaulting to an empty string if undefined
-                fsi.dataItem = ad; // Store the area descriptor as data
-                fsi.dateModified = file.lastUpdateTime; // Store the file's last modified time
-                fsi.isDirectory = file.isFld == 1; // Mark as a directory if the 'isFld' field is 1 (directory)
-                fsi.size = file.size; // Store the file size
-                fileSystem.push(fsi); // Add the file system item to the list
-            });
-            setParentDirectoryFileSystemItems(fileSystem);
-        }
-        // Return the constructed list of file system items (directories or files)
-        return fileSystem;
-    };
-    const renameItem = async (item, newName) => {
-        const ad = item.dataItem.dataItem;
-        const aid = ad.id;
-        const msg = `${SDKUI_Localizator.FromTime} "${item.name}" ${SDKUI_Localizator.ToTime} "${newName}"`;
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        if (item.isDirectory) {
-            const oldSubFolder = item.path === ad.name ? '' : item.path.replace(ad.name + '/', '');
-            const newSubFolder = item.parentPath.replace(ad.name, '') + '/' + newName;
-            await tms?.NewAreaEngine().RenameFolderAsync(aid, oldSubFolder, newSubFolder).then(() => ShowAlert({ message: `${msg}`, mode: 'info', title: SDKUI_Localizator.RenameFolder, duration: 3000 })).catch((err) => { throw new FileSystemError(5, item, err.message ?? SDKUI_Localizator.Error); });
-        }
-        else {
-            const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
-            await tms?.NewAreaEngine().RenameFileAsync(aid, subFolder, item.name, newName).then(() => ShowAlert({ message: `${msg}`, mode: 'info', title: SDKUI_Localizator.RenameFile, duration: 3000 })).catch((err) => { throw new FileSystemError(5, item, err.message ?? SDKUI_Localizator.Error); });
-        }
-    };
-    const uploadFileChunk = async (file, uploadInfo, destinationDirectory) => {
-        try {
-            // Retrieve the current TM session 
-            const tms = props.tmSession ?? SDK_Globals.tmSession;
-            // If there's no session, abort the function
-            if (!tms)
-                return;
-            // Create a new instance of UploadFileEngine, which handles the file upload
-            const ufe = tms.NewUploadFileEngine();
-            // Generate a unique key based on the file properties (name, size, and last modified date)
-            const key = `${file.name}_${file.size}_${file.lastModified}`;
-            // Check if an upload file ID already exists in the cache for this file
-            let uploadFileId = _cacheUploadFileId.get(key);
-            // If it's the first chunk of the file (chunkIndex is 0), start the file upload
-            if (uploadInfo.chunkIndex === 0) {
-                // Begin uploading the file
-                uploadFileId = await ufe.UploadFileBegin(file.name, file.size, true);
-                // Store the upload file ID in cache
-                _cacheUploadFileId.set(key, uploadFileId);
-            }
-            // Create an array to store promises for chunk uploads
-            const chunkPromises = [];
-            // Iterate through the chunks and prepare the upload tasks
-            for (let chunkIndex = 0; chunkIndex < uploadInfo.chunkCount; chunkIndex++) {
-                const chunkBlob = uploadInfo.chunkIndex === chunkIndex ? uploadInfo.chunkBlob : null;
-                if (!chunkBlob)
-                    continue;
-                let fd = new FileDescriptor();
-                fd.fileTransferMode = FileTransferModes.Base64;
-                fd.base64Content = await blobToBase64Async(chunkBlob);
-                // Add the chunk upload promise
-                chunkPromises.push(ufe.UploadFileSendChunk(uploadFileId, fd));
-            }
-            // Wait for all chunks to be uploaded concurrently
-            await Promise.all(chunkPromises);
-            // If it's the last chunk of the file (chunkIndex is equal to chunkCount - 1), finalize the upload
-            if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
-                // Retrieve the destination directory and associated area descriptor (area to upload to)
-                const ad = destinationDirectory?.dataItem?.dataItem;
-                const aid = ad.id;
-                // Determine the subfolder path if it's not the root folder
-                const subFolder = destinationDirectory.path === ad.name ? '' : destinationDirectory.path.replace(ad.name + '/', '');
-                // Finalize the upload process and add the file to the server
-                let fd = new FileDescriptor();
-                fd.uploadFileIDContent = uploadFileId;
-                fd.fileTransferMode = FileTransferModes.UploadFileID;
-                await tms?.NewAreaEngine().AddFileAsync(aid, subFolder, fd, true, abortController?.signal);
-                // Remove the upload file ID from cache after the upload is complete
-                _cacheUploadFileId.delete(key);
-                if (fileManagerRef.current) {
-                    fileManagerRef.current.instance().refresh();
-                }
-            }
-        }
-        catch (error) {
-            // console.error('Error uploading file:', error);
-            throw new FileSystemError(5, undefined, error.message ?? SDKUI_Localizator.Error);
-        }
-    };
-    const onCurrentDirectoryChanged = (e) => {
-        setCurrentRoute(e.directory.path);
-        setFocusedFileSystemItem(e.directory);
-        if (e.directory.path === '' && e.directory.name === '')
-            return;
-        let ad = e.directory.dataItem.dataItem;
-        if (!ad)
-            return;
-        let aid = ad.id;
-        let subFolder = e.directory.path.replace(ad.name + '/', '').replace(ad.name, '');
-        setAreaFolder(getAreaPath(aid, subFolder));
-        e.component.option("fileSystemProvider").getItems(e.directory).then((items) => {
-            setParentDirectoryFileSystemItems(items);
-        });
-    };
-    const onSelectionChanged = async (e) => {
-        setSelectedItemsCount(e.selectedItems.length);
-    };
-    const onFocusedItemChanged = (e) => {
-        if (!e.item)
-            return;
-        let ad = e.item.dataItem.dataItem;
-        if (!ad)
-            return;
-        let aid = ad.id;
-        let path = e.item.path.replace(ad.name + '/', '');
-        if (e.item.isDirectory) {
-            setAreaFile('');
-            setAreaFolder(getAreaPath(aid, path));
-        }
-        else {
-            setAreaFolder('');
-            setAreaFile(getAreaPath(aid, path));
-        }
-        setFocusedFileSystemItem(e.item);
-    };
-    const customizeIcon = useCallback((fileSystemItem) => {
-        if (fileSystemItem.isDirectory) {
-            return svgToString(_jsx(IconFolder, { fontSize: 20, color: TMColors.iconLight }));
-        }
-        else {
-            const fileExtension = fileSystemItem.getFileExtension();
-            switch (fileExtension.toLowerCase()) {
-                case '.pdf':
-                    return IconPdf;
-                case '.xls':
-                case '.xlsx':
-                case '.csv':
-                    return IconXls;
-                case '.txt':
-                    return IconTxt;
-                case '.xml':
-                    return IconXml;
-                case '.dwg':
-                    return IconDwg;
-                case '.dcm':
-                    return IconDicom;
-                case '.slddrw':
-                    return IconSlddrw;
-                case '.mp4':
-                    return IconMp4;
-                case '.doc':
-                case '.docx':
-                case '.dotx':
-                case '.rtf':
-                    return IconDocx;
-                case '.ppt':
-                case '.pptx':
-                    return IconPpt;
-                case '.msg':
-                case '.eml':
-                    return IconEmail;
-                case '.exe':
-                    return IconExe;
-                case '.htm':
-                case '.html':
-                    return IconHtml;
-                case '.p7m':
-                    return IconSigned;
-                case '.png':
-                case '.jpg':
-                case '.jpeg':
-                case '.svg':
-                case '.tiff':
-                case '.tif':
-                case '.ico':
-                case '.gif':
-                case '.webp':
-                    return IconImage;
-                case '.zip':
-                case '.rar':
-                case '.7z':
-                    return IconZip;
-                default:
-                    return IconTxt;
-            }
-        }
-    }, []);
-    const onSelectedFileOpened = async (e) => {
-        if (props.isPathChooser)
-            props.areaChoose();
-        else
-            downloadItems([e.file]);
-    };
-    const onContextMenuItemClick = async (e) => {
-        if (e.viewArea === 'navPane' && e.itemData === 'refresh') {
-            const tms = props.tmSession ?? SDK_Globals.tmSession;
-            await tms?.NewAreaEngine().RetrieveAllAsync(true);
-        }
-    };
-    const getSubFolders = async (dir) => {
-        const ad = dir?.dataItem?.dataItem;
-        const aid = ad?.id;
-        const tms = props.tmSession ?? SDK_Globals.tmSession;
-        const path = dir.pathKeys.length === 1 ? "" : dir.path;
-        return tms?.NewAreaEngine()
-            .RetrieveAllFilesAsync(aid, path.replace(ad?.name + '/', ''))
-            .then(allFilesAndFolders => {
-            const folders = allFilesAndFolders?.filter(item => item.isFld === 1).map(item => item.name);
-            return folders;
-        })
-            .catch(err => TMExceptionBoxManager.show({ exception: err }));
-    };
-    const onDirectoryCreating = async (e) => {
-        const folders = await getSubFolders(e.parentDirectory);
-        if (folders?.includes(e.name)) {
-            alert(`"${e.name}" ${SDKUI_Localizator.FolderExist}`, SDKUI_Localizator.Attention);
-        }
-    };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
-                    /* onItemMoved={() => setCounter(counter => counter + 1)}
-                    onItemCopied={() => setCounter(counter => counter + 1)}
-                    onItemDeleted={() => setCounter(counter => counter - 1)}
-                    onFileUploaded={() => setCounter(counter => counter + 1)} */
-                    onCurrentDirectoryChanged: onCurrentDirectoryChanged, selectionMode: props.selectionMode === 'single' ? 'single' : selectionMode, children: [_jsxs(Toolbar, { children: [_jsx(Item, { name: "showNavPane", visible: true }), _jsx(Item, { name: "create", visible: true }), _jsx(Item, { name: "upload", visible: true }), _jsx(Item, { name: "separator", location: 'after' }), _jsx(Item, { name: "switchView", visible: true }), _jsx(Item, { name: "refresh", visible: true })] }), _jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), move: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), create: focusedFileSystemItem && focusedFileSystemItem.name !== "", upload: focusedFileSystemItem && focusedFileSystemItem.name !== "", rename: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), delete: focusedFileSystemItem && focusedFileSystemItem.name !== "" && !areasRoots.has(focusedFileSystemItem.name), download: true }), _jsx(ItemView, { children: _jsxs(Details, { children: [_jsx(Column, { dataField: "thumbnail", cssClass: 'file-thumbnail' }, "thumbnail"), _jsx(Column, { dataField: "name", caption: SDKUI_Localizator.Name }, "name"), _jsx(Column, { dataField: 'size', width: '120px', alignment: 'center', dataType: 'number', caption: SDKUI_Localizator.File_Size }, "size"), _jsx(Column, { dataField: 'dateModified', width: '160px', alignment: 'center', dataType: 'datetime', caption: SDKUI_Localizator.Date_Modified }, "dateModified")] }) }), _jsx(Notifications, { showPopup: true, showPanel: true })] }), _jsx("div", { style: { width: "100%", height: "30px", overflowY: "hidden" }, children: _jsx(TMCounterContainer, { items: counterValues }) })] }) }));
-};
-export default TMAreaManager;