@topconsultnpm/sdkui-react-beta 6.8.81 → 6.8.83

package/lib/assets/thumbnails/index.js

@@ -0,0 +1,19 @@
+import IconFolder from './folder.png';
+import IconPdf from './pdf.png';
+import IconTxt from './txt.png';
+import IconXls from './xls.png';
+import IconDocx from './doc.png';
+import IconImage from './image.png';
+import IconZip from './zip.png';
+import IconXml from './xml.png';
+import IconMp4 from './mp4.png';
+import IconEmail from './email.png';
+import IconPpt from './ppt.png';
+import IconSigned from './p7m.png';
+import IconOther from './other.png';
+import IconExe from './exe.png';
+import IconHtml from './html.png';
+import IconDwg from './dwg.png';
+import IconDicom from './dicom.png';
+import IconSlddrw from './slddrw.png';
+export { IconFolder, IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconOther, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw };

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

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

package/lib/components/base/TMAreaManager.js

@@ -0,0 +1,583 @@
+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 } from 'devextreme-react/file-manager';
+import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+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, IconSelected, SDKUI_Localizator } from '../../helper';
+import { TMExceptionBoxManager } from './TMPopUp';
+import ShowAlert from './TMAlert';
+import { IconFolder, IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
+import { TMLayoutWaitingContainer } from './TMWaitPanel';
+import TMCounterBar from './TMCounterBar';
+export class TMFileSystemItem {
+    constructor() {
+        this.name = "";
+        this.thumbnail = "";
+        this.isDirectory = false;
+        this.size = 0;
+    }
+}
+let abortController = new AbortController();
+const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false }) => {
+    const [counter, setCounter] = useState(0);
+    const [areaFile, setAreaFile] = useState('');
+    const [areaFolder, setAreaFolder] = useState('');
+    const [currentRoute, setCurrentRoute] = useState('');
+    const [parentDir, setParentDir] = useState(null);
+    const [areas, setAreas] = useState([]);
+    const [selectedItemsCount, setSelectedItemsCount] = useState(0);
+    const [areaProvider, setAreaProvider] = useState();
+    const [selectionMode, setSelectionMode] = useState('single');
+    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);
+    let timerId = null;
+    const AreaFolderNamePrefix = "AID_";
+    const AreaPathPrefix = "tmarea:\\\\";
+    let resolvesForExistingFiles = [];
+    let resolvesForNonExistingFiles = [];
+    let destinationDirectoryContentPromise = null;
+    const fileManagerRef = useRef(null);
+    let _cacheUploadFileId = new Map();
+    useEffect(() => {
+        if (areaProvider)
+            return;
+        setAreaProvider(new CustomFileSystemProvider({
+            copyItem,
+            getItems,
+            moveItem,
+            renameItem,
+            deleteItem,
+            downloadItems,
+            uploadFileChunk,
+            createDirectory
+        }));
+        loadMessages({
+            "it": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Sei sicuro di voler eliminare {0}?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Sei sicuro di voler eliminare {0} elementi?"
+            },
+            "fr": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Êtes-vous sûr de vouloir supprimer {0}?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Êtes-vous sûr de vouloir supprimer {0} éléments?"
+            },
+            "pt": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Tem a certeza de que pretende eliminar {0}?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Tem a certeza de que pretende eliminar {0} itens?"
+            },
+            "de": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Möchten Sie {0} wirklich löschen?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Möchten Sie {0} Elemente wirklich löschen?"
+            },
+            "es": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "¿Estás seguro de que quieres eliminar {0}?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "¿Estás seguro de que quieres eliminar {0} artículos?"
+            },
+            "en": {
+                "dxFileManager-dialogDeleteItemSingleItemConfirmation": "Are you sure you want to delete {0}?",
+                "dxFileManager-dialogDeleteItemMultipleItemsConfirmation": "Are you sure you want to delete {0} items?"
+            }
+        });
+    }, []);
+    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 === '') {
+            initCounter();
+            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 initCounter = async () => {
+        const tms = props.tmSession ?? SDK_Globals.tmSession;
+        const adlist = await tms?.NewAreaEngine().RetrieveAllAsync();
+        if (adlist)
+            setCounter(adlist.length);
+    };
+    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, "Selezionare un'area di appoggio");
+        }
+        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) => { TMExceptionBoxManager.show({ exception: err }); });
+        }
+        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) => { TMExceptionBoxManager.show({ exception: err }); });
+        }
+    };
+    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) => TMExceptionBoxManager.show({ exception: err }));
+        }
+        else {
+            await tms?.NewAreaEngine().DeleteFilesAsync(aid, subFolder, [item.name]).catch((err) => TMExceptionBoxManager.show({ exception: err }));
+        }
+    };
+    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);
+        }
+    };
+    const getItems = async (parentDirectory) => {
+        setParentDir(parentDirectory);
+        const fileSystem = [];
+        const tms = props.tmSession ?? SDK_Globals.tmSession;
+        if (parentDirectory.name === "") {
+            const adlist = await tms?.NewAreaEngine().RetrieveAllAsync().catch((err) => TMExceptionBoxManager.show({ exception: err }));
+            setAreas(adlist);
+            for (const ad of adlist) {
+                ad.name = SDK_Globals.useLocalizedName ? ad?.nameLoc : ad?.name;
+                const fsi = new TMFileSystemItem();
+                fsi.name = ad.name ?? '';
+                fsi.dataItem = ad;
+                fsi.dateModified = ad.lastUpdateTime;
+                fsi.isDirectory = true;
+                fileSystem.push(fsi);
+            }
+        }
+        else {
+            const ad = parentDirectory.dataItem.dataItem;
+            const aid = ad?.id;
+            const path = parentDirectory.pathKeys.length === 1 ? "" : parentDirectory.path;
+            const files = await tms?.NewAreaEngine().RetrieveAllFilesAsync(aid, path.replace(ad.name + '/', '')).catch((err) => TMExceptionBoxManager.show({ exception: err }));
+            files.forEach((file) => {
+                const fsi = new TMFileSystemItem();
+                fsi.name = file.name ?? '';
+                fsi.dataItem = ad;
+                fsi.dateModified = file.lastUpdateTime;
+                fsi.isDirectory = file.isFld == 1;
+                fsi.size = file.size;
+                fileSystem.push(fsi);
+            });
+        }
+        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) => TMExceptionBoxManager.show({ exception: err }));
+        }
+        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) => TMExceptionBoxManager.show({ exception: err }));
+        }
+    };
+    // aumentare chunk size
+    const uploadFileChunk = async (file, uploadInfo, destinationDirectory) => {
+        try {
+            const tms = props.tmSession ?? SDK_Globals.tmSession;
+            if (!tms)
+                return;
+            const ufe = tms.NewUploadFileEngine();
+            const key = `${file.name}_${file.size}_${file.lastModified}`;
+            let uploadFileId = _cacheUploadFileId.get(key);
+            if (uploadInfo.chunkIndex === 0) {
+                uploadFileId = await ufe.UploadFileBegin(file.name, file.size, true);
+                _cacheUploadFileId.set(key, uploadFileId);
+            }
+            let fd = new FileDescriptor();
+            fd.fileTransferMode = FileTransferModes.Base64;
+            fd.base64Content = await blobToBase64Async(uploadInfo.chunkBlob);
+            await ufe.UploadFileSendChunk(uploadFileId, fd);
+            if (uploadInfo.chunkIndex === uploadInfo.chunkCount - 1) {
+                const ad = destinationDirectory?.dataItem?.dataItem;
+                const aid = ad.id;
+                const subFolder = destinationDirectory.path === ad.name ? '' : destinationDirectory.path.replace(ad.name + '/', '');
+                fd = new FileDescriptor();
+                fd.uploadFileIDContent = uploadFileId;
+                fd.fileTransferMode = FileTransferModes.UploadFileID;
+                await tms?.NewAreaEngine().AddFileAsync(aid, subFolder, fd, true, abortController?.signal);
+                _cacheUploadFileId.delete(key);
+            }
+        }
+        catch (err) {
+            TMExceptionBoxManager.show({ exception: err });
+        }
+    };
+    const onCurrentDirectoryChanged = (e) => {
+        setCurrentRoute(e.directory.path);
+        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) => {
+            setCounter(items.length);
+        });
+    };
+    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));
+        }
+    };
+    const customizeIcon = useCallback((fileSystemItem) => {
+        if (fileSystemItem.isDirectory) {
+            return IconFolder;
+        }
+        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;
+        const allFilesAndFolders = await tms?.NewAreaEngine().RetrieveAllFilesAsync(aid, path.replace(ad.name + '/', ''));
+        const folders = allFilesAndFolders?.filter(item => item.isFld === 1).map(item => item.name);
+        return folders;
+    };
+    const onDirectoryCreating = async (e) => {
+        const folders = await getSubFolders(e.parentDirectory);
+        if (folders?.includes(e.name)) {
+            alert(`"${e.name}" ${SDKUI_Localizator.FolderExist}`, SDKUI_Localizator.Attention);
+        }
+    };
+    const counters = [{ icon: _jsx(IconAll, {}), text: counter.toString(), tooltip: SDKUI_Localizator.AllItems }, { icon: _jsx(IconSelected, {}), text: selectedItemsCount.toString(), tooltip: SDKUI_Localizator.SelectedItems }];
+    return (_jsxs(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(FileManager, { width: props.width, ref: fileManagerRef, height: props.height, 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: [_jsx(ContextMenu, { items: ["create", "upload", "rename", "move", "copy", "delete", "refresh", "download"] }), _jsx(Permissions, { copy: true, move: true, create: true, upload: true, rename: true, delete: true, 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: false })] }), _jsx(TMCounterBar, { items: counters })] }));
+};
+export default TMAreaManager;

package/lib/components/base/TMCounterBar.js

@@ -7,6 +7,8 @@ const StyledList = styled.div `
     align-items: center;
     border: 1px solid #dadada;
     border-top: 0;
+    width: 100%;
+    margin-top: -3px;
 `;
 const StyledListItem = styled.div `
     display: flex;