@topconsultnpm/sdkui-react 6.17.0-test10

package/lib/components/base/TMAreaManager.js

@@ -0,0 +1,733 @@
+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;