@syncfusion/ej2-filemanager 30.1.37 → 30.1.39

package/dist/ts/file-manager/layout/navigation-pane.ts

@@ -1,919 +0,0 @@
-import { TreeView as BaseTreeView, NodeSelectEventArgs, NodeExpandEventArgs, DrawNodeEventArgs } from '@syncfusion/ej2-navigations';
-import { NodeEditEventArgs, NodeClickEventArgs } from '@syncfusion/ej2-navigations';
-import { isNullOrUndefined as isNOU, select, setValue, getValue, DragEventArgs, Draggable } from '@syncfusion/ej2-base';
-import { KeyboardEvents, KeyboardEventArgs, Touch, closest } from '@syncfusion/ej2-base';
-import { DataManager, Query } from '@syncfusion/ej2-data';
-import * as events from '../base/constant';
-import * as CLS from '../base/classes';
-import { IFileManager, ReadArgs, FileLoadEventArgs, NotifyArgs, FileOpenEventArgs, FileSelectEventArgs } from '../base/interface';
-import { read, Download, GetDetails, Delete, isFileSystemData } from '../common/operations';
-import { createDialog } from '../pop-up/dialog';
-import { updatePath, getPath, getDirectories } from '../common/utility';
-import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getDirectoryPath, getModule, getPathId } from '../common/index';
-import { copyFiles, cutFiles, removeActive, pasteHandler, getParentPath, readDropPath } from '../common/index';
-import { hasEditAccess, createDeniedDialog, hasDownloadAccess, getAccessClass } from '../common/index';
-
-/**
- * NavigationPane module
- */
-export class NavigationPane {
-
-    /* Internal variables */
-    private parent: IFileManager;
-    public treeObj: BaseTreeView;
-    public activeNode: Element;
-    private keyboardModule: KeyboardEvents;
-    private keyConfigs: { [key: string]: string };
-    private expandNodeTarget: string;
-    public removeNodes: string[] = [];
-    public moveNames: string[] = [];
-    public touchClickObj: Touch;
-    // Specifies the previously selected nodes in the treeview control.
-    public previousSelected: string[] = [];
-    private isDrag: boolean = false;
-    private dragObj: Draggable;
-    private isPathDragged: boolean = false;
-    private isRenameParent: boolean = false;
-    private isRightClick: boolean = false;
-    private isSameNodeClicked: boolean = false;
-    private isNodeExpandCalled: boolean = false;
-    private renameParent: string = null;
-    // Specifies whether the nodeClicked event of the treeview control is triggered or not.
-    private isNodeClickCalled: boolean = false;
-    // Specifies whether to restrict node selection in the treeview control.
-    private restrictSelecting: boolean = false;
-    /**
-     * Constructor for the TreeView module
-     *
-     * @param {IFileManager} parent - specifies the parent element.
-     * @hidden
-     */
-    /* istanbul ignore next */
-    constructor(parent?: IFileManager) {
-        this.parent = parent;
-        this.addEventListener();
-        this.keyConfigs = {
-            altEnter: 'alt+enter',
-            esc: 'escape',
-            del: 'delete',
-            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
-            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
-            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
-            ctrlShiftN: 'ctrl+shift+n',
-            shiftF10: 'shift+F10',
-            f2: 'f2'
-        };
-    }
-
-    private onInit(): void {
-        if (!isNOU(this.treeObj)) { return; }
-        const rootData: { [key: string]: Object; } = getValue(this.parent.pathId[0], this.parent.feParent);
-        setValue('_fm_icon', 'e-fe-folder', rootData);
-        const attr: Object = {};
-        const id: string = getValue('id', rootData);
-        if (!isNOU(id)) {
-            setValue('data-id', id, attr);
-        }
-        if (!hasEditAccess(rootData)) {
-            setValue('class', getAccessClass(rootData), attr);
-        }
-        if (!isNOU(attr)) {
-            setValue('_fm_htmlAttr', attr, rootData);
-        }
-        this.treeObj = new BaseTreeView({
-            fields: {
-                dataSource: [rootData], id: '_fm_id', parentID: '_fm_pId', expanded: '_fm_expanded', selected: '_fm_selected', text: 'name',
-                hasChildren: 'hasChild', iconCss: '_fm_icon', htmlAttributes: '_fm_htmlAttr', tooltip: 'name'
-            },
-            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
-            sortOrder: this.parent.navigationPaneSettings.sortOrder,
-            nodeSelecting: this.onNodeSelecting.bind(this),
-            nodeSelected: this.onNodeSelected.bind(this),
-            nodeExpanding: this.onNodeExpand.bind(this),
-            nodeClicked: this.onNodeClicked.bind(this),
-            allowEditing: true,
-            nodeEditing: this.onNodeEditing.bind(this),
-            drawNode: this.onDrowNode.bind(this),
-            enableRtl: this.parent.enableRtl,
-            dataBound: this.addDragDrop.bind(this)
-        });
-        this.treeObj.isStringTemplate = true;
-        this.treeObj.appendTo('#' + this.parent.element.id + CLS.TREE_ID);
-        this.wireEvents();
-    }
-
-    private addDragDrop(): void {
-        if (!this.parent.isMobile && this.treeObj) {
-            if (this.parent.allowDragAndDrop && isNOU(this.dragObj)) {
-                this.dragObj = new Draggable(this.treeObj.element, {
-                    cursorAt: this.parent.dragCursorPosition,
-                    dragTarget: '.' + CLS.FULLROW,
-                    distance: 5,
-                    dragArea: this.parent.element,
-                    drag: draggingHandler.bind(this, this.parent),
-                    dragStart: (args: DragEventArgs) => {
-                        dragStartHandler(this.parent, args, this.dragObj);
-                    },
-                    dragStop: dragStopHandler.bind(this, this.parent),
-                    enableTailMode: true,
-                    enableAutoScroll: false,
-                    helper: this.dragHelper.bind(this)
-                });
-            } else if (!this.parent.allowDragAndDrop && this.dragObj) {
-                this.dragObj.destroy();
-                this.dragObj = null;
-            }
-        }
-    }
-
-    public dragHelper(args: { element: HTMLElement, sender: MouseEvent & TouchEvent }): HTMLElement {
-        const dragTarget: Element = <Element>args.sender.target;
-        if (!dragTarget.classList.contains(CLS.FULLROW)) { return null; }
-        const dragLi: Element = closest(dragTarget, 'li');
-        this.parent.dragPath = '';
-        this.parent.dragData = [];
-        this.parent.activeElements = [];
-        this.parent.activeElements = [dragLi];
-        this.parent.dragNodes = [];
-        getModule(this.parent, dragLi);
-        this.parent.dragData = <{ [key: string]: Object; }[]>this.getTreeData(dragLi);
-        this.parent.dragPath = this.getDragPath(dragLi, <string>this.parent.dragData[0].name);
-        this.parent.dragNodes.push(<string>this.parent.dragData[0].name);
-        createVirtualDragElement(this.parent);
-        return this.parent.virtualDragElement;
-    }
-
-    private getDragPath(dragLi: Element, text: string): string {
-        const path: string = this.getDropPath(dragLi, text);
-        return getParentPath(path);
-    }
-
-    private getDropPath(node: Element, text: string): string {
-        const id: string = node.getAttribute('data-id');
-        const newText: string = this.parent.hasId ? id : text;
-        return getPath(node, newText, this.parent.hasId);
-    }
-
-    private onDrowNode(args: DrawNodeEventArgs): void {
-        const eventArgs: FileLoadEventArgs = {
-            element: args.node,
-            fileDetails: args.nodeData,
-            module: 'NavigationPane'
-        };
-        this.parent.trigger('fileLoad', eventArgs);
-    }
-
-    private addChild(files: { [key: string]: Object; }[], target: string, prevent: boolean): void {
-        const directories: Object[] = getDirectories(files);
-        const targetDirectory: object[] = this.getTreeData(target);
-        if ( directories.length > 0 && targetDirectory.length > 0 &&
-            ((directories[0] as { [key: string]: Object }).filterPath == null ||
-            isNOU(targetDirectory[0])
-            && (targetDirectory[0] as { [key: string]: Object }).filterPath == null
-            || (directories[0] as { [key: string]: Object }).filterPath !==
-            (targetDirectory[0] as { [key: string]: Object }).filterPath)
-        ) {
-            let length: number = 0;
-            const folders: { [key: string]: Object; }[] = <{ [key: string]: Object; }[]>directories;
-            while (length < directories.length) {
-                // eslint-disable-next-line camelcase
-                folders[parseInt(length.toString(), 10)]._fm_icon = 'e-fe-folder';
-                const attr: Object = {};
-                const id: string = getValue('id', folders[length as number]);
-                if (!isNOU(id)) {
-                    setValue('data-id', id, attr);
-                }
-                if (!hasEditAccess(folders[length as number])) {
-                    setValue('class', getAccessClass(folders[length as number]), attr);
-                }
-                if (!isNOU(attr)) {
-                    setValue('_fm_htmlAttr', attr, folders[length as number]);
-                }
-                length++;
-            }
-            const element: Element = select('[data-uid="' + target + '"]', this.treeObj.element);
-            const childElements: Element = select('ul', element);
-            if (isNOU(childElements)) {
-                this.treeObj.addNodes(directories as { [key: string]: Object; }[], target, null, prevent);
-            }
-        }
-    }
-
-    // Node Selecting event handler
-    private onNodeSelecting(args: NodeSelectEventArgs): void {
-        if (!args.isInteracted && !this.isRightClick &&
-            !this.isSameNodeClicked && !this.isPathDragged && !this.isRenameParent || this.restrictSelecting) {
-            this.restrictSelecting = false;
-            this.isNodeClickCalled = false;
-            return;
-        }
-        if (!this.renameParent) {
-            this.parent.activeModule = 'navigationpane';
-            const nodeData: Object[] = this.getTreeData(getValue('id', args.nodeData));
-            if (args.node.getAttribute('data-uid') !== this.parent.pathId[this.parent.pathId.length - 1] && !this.isRightClick && !this.isNodeClickCalled || this.isSameNodeClicked || this.isPathDragged) {
-                this.isNodeClickCalled = false;
-                if (!this.isSameNodeClicked)
-                {
-                    this.isSameNodeClicked = true;
-                    const selecEventArgs: FileSelectEventArgs =
-                    { action: args.action, fileDetails: nodeData[0], isInteracted: args.isInteracted };
-                    this.parent.trigger('fileSelect', selecEventArgs);
-                }
-                if (!this.isRightClick)
-                {
-                    const eventArgs: FileOpenEventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
-                    this.parent.trigger('fileOpen', eventArgs);
-                    args.cancel = eventArgs.cancel;
-                }
-                if (args.cancel) {
-                    this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] !== args.node.getAttribute('data-uid') : false;
-                    this.isNodeClickCalled = true;
-                    this.isSameNodeClicked = false;
-                    this.isPathDragged = false;
-                    this.previousSelected = this.treeObj.selectedNodes;
-                    this.treeObj.setProperties({selectedNodes: [args.node.getAttribute('data-uid')]});
-                }
-            }
-            else if (this.previousSelected[0] !== args.node.getAttribute('data-uid')){
-                this.isSameNodeClicked = true;
-                const selecEventArgs: FileSelectEventArgs =
-                { action: args.action, fileDetails: nodeData[0], isInteracted: this.isNodeClickCalled };
-                this.parent.trigger('fileSelect', selecEventArgs);
-            }
-        }
-    }
-
-    // Opens the folder while clicking open context menu item in the treeview.
-    public openFileOnContextMenuClick(node: HTMLLIElement): void {
-        const data: object[] = this.treeObj.getTreeData(node);
-        this.parent.selectedItems = [];
-        this.parent.itemData = data;
-        this.activeNode = node;
-        this.parent.activeModule = 'navigationpane';
-        const eventArgs: FileOpenEventArgs = { cancel: false, fileDetails: data[0], module: 'NavigationPane' };
-        this.parent.trigger('fileOpen', eventArgs);
-        this.isNodeClickCalled = true;
-        if (!eventArgs.cancel){
-            updatePath(node, this.parent.itemData[0], this.parent);
-            read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
-            this.parent.visitedItem = node;
-            this.isPathDragged = this.isRenameParent = this.isRightClick = false;
-            this.treeObj.setProperties({selectedNodes: [node.getAttribute('data-uid')]});
-        }
-    }
-
-    private onNodeSelected(args: NodeSelectEventArgs): void {
-        if (this.parent.breadcrumbbarModule && this.parent.breadcrumbbarModule.searchObj && !this.renameParent) {
-            this.parent.breadcrumbbarModule.searchObj.element.value = '';
-            this.parent.isFiltered = false;
-            this.isNodeClickCalled = false;
-        }
-        this.parent.searchedItems = [];
-        if (!args.isInteracted && !this.isRightClick && !this.isSameNodeClicked && !this.isPathDragged && !this.isRenameParent) {
-            this.parent.pathId = getPathId(args.node);
-            return;
-        }
-        this.activeNode = args.node;
-        this.parent.activeModule = 'navigationpane';
-        const nodeData: Object[] = this.getTreeData(getValue('id', args.nodeData));
-        this.parent.selectedItems = [];
-        this.parent.itemData = nodeData;
-        const previousPath: string = this.parent.path;
-        if (!this.isRightClick && this.isSameNodeClicked ) {
-            updatePath(args.node, this.parent.itemData[0], this.parent);
-        }
-        else {
-            this.parent.pathId = getPathId(args.node);
-            this.parent.visitedItem = args.node;
-        }
-        if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
-            this.expandNodeTarget = 'add';
-        }
-        if (previousPath !== this.parent.path) {
-            if (!this.isRightClick && this.isSameNodeClicked) {
-                read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
-                this.isNodeClickCalled = true;
-            }
-            this.parent.visitedItem = args.node;
-        }
-        this.isPathDragged = this.isRenameParent = this.isRightClick = this.isSameNodeClicked = false;
-    }
-    /* istanbul ignore next */
-    private onPathDrag(args: object[]): void {
-        this.isPathDragged = true;
-        this.selectResultNode(args[0]);
-    }
-    /* istanbul ignore next */
-    private onNodeExpand(args: NodeExpandEventArgs): void {
-        if (!args.isInteracted && !this.isDrag) { return; }
-        if (args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
-            this.isNodeExpandCalled = true;
-            const text: string = getValue('text', args.nodeData);
-            const id: string = args.node.getAttribute('data-id');
-            const isId: boolean = isNOU(id) ? false : true;
-            const newText: string = isNOU(id) ? text : id;
-            const path: string = getPath(args.node, newText, isId);
-            this.expandNodeTarget = args.node.getAttribute('data-uid');
-            this.parent.expandedId = this.expandNodeTarget;
-            this.parent.itemData = this.getTreeData(getValue('id', args.nodeData));
-            this.parent.pathId.push(getValue('id', args.nodeData));
-            read(this.parent, events.nodeExpand, path);
-        }
-    }
-
-    /* istanbul ignore next */
-    private onNodeExpanded(args: ReadArgs): void {
-        this.addChild(args.files, this.expandNodeTarget, false);
-        this.parent.expandedId = null;
-        this.isNodeExpandCalled = false;
-    }
-
-    private onNodeClicked(args: NodeClickEventArgs): void {
-        this.parent.activeModule = 'navigationpane';
-        this.previousSelected = this.treeObj.selectedNodes;
-        this.activeNode = args.node;
-        if ((args.event.which === 3) && (args.node.getAttribute('data-uid') !== this.treeObj.selectedNodes[0])) {
-            this.isRightClick = true;
-            this.isNodeClickCalled = true;
-            this.treeObj.setProperties({selectedNodes: [args.node.getAttribute('data-uid')]});
-        } else if (args.node.getAttribute('data-uid') === this.treeObj.selectedNodes[0] && this.parent.selectedItems.length !== 0) {
-            this.parent.setProperties({ selectedItems: [] }, true);
-            const layout: string = (this.parent.view === 'LargeIcons') ? 'largeiconsview' : 'detailsview';
-            this.parent.notify(events.modelChanged, { module: layout, newProp: { selectedItems: [] } });
-        } else if (args.node.getAttribute('data-uid') === this.treeObj.selectedNodes[0] && !this.isNodeClickCalled && !this.isNodeExpandCalled) {
-            if (args.event.which === 3)
-            {
-                this.isRightClick = true;
-            }
-            this.isSameNodeClicked = true;
-            this.isNodeClickCalled = true;
-        }
-    }
-
-    /* istanbul ignore next */
-    private onNodeEditing(args: NodeEditEventArgs): void {
-        if (!isNOU(args.innerHtml)) {
-            args.cancel = true;
-        }
-    }
-
-    private onPathChanged(args: ReadArgs): void {
-        this.parent.isCut = false;
-        const currFiles: { [key: string]: Object; }[] = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feFiles);
-        if (this.expandNodeTarget === 'add') {
-            const sNode: Element = select('[data-uid="' + this.treeObj.selectedNodes[0] + '"]', this.treeObj.element);
-            const ul: Element = (!isNOU(sNode)) ? select('.' + CLS.LIST_PARENT, sNode) : null;
-            if (isNOU(ul)) {
-                this.addChild(args.files, this.treeObj.selectedNodes[0], true);
-            }
-            this.expandNodeTarget = '';
-        }
-        if (isNOU(currFiles)) {
-            setValue(this.parent.pathId[this.parent.pathId.length - 1], args.files, this.parent.feFiles);
-        }
-        if (this.parent.uploadObj.directoryUpload && !(this.parent.hasId)) {
-            this.updateTree(args);
-        }
-    }
-
-    private updateTree(args: ReadArgs): void {
-        if (this.treeObj) {
-            const id: string = this.treeObj.selectedNodes[0];
-            this.updateTreeNode(args, id);
-        }
-    }
-
-    private updateTreeNode(args: ReadArgs, id: string): void {
-        const toExpand: boolean = this.treeObj.expandedNodes.indexOf(id) === -1 ? false : true;
-        this.removeChildNodes(id);
-        this.addChild(args.files, id, !toExpand);
-    }
-
-    private removeChildNodes(id: string): void {
-        const sNode: Element = select('[data-uid="' + id + '"]', this.treeObj.element);
-        const parent: Element = select('.' + CLS.LIST_PARENT, sNode);
-        const childs: Element[] = parent ? Array.prototype.slice.call(parent.children) : null;
-        if (childs) { this.treeObj.removeNodes(childs); }
-    }
-
-    private onOpenEnd(args: ReadArgs): void {
-        const sleId: string = this.parent.pathId[this.parent.pathId.length - 1];
-        this.treeObj.expandAll(this.treeObj.selectedNodes);
-        this.treeObj.setProperties({selectedNodes: [sleId]});
-        this.expandNodeTarget = 'add';
-        this.onPathChanged(args);
-    }
-
-    private onOpenInit(args: NotifyArgs): void {
-        if (this.parent.activeModule === 'navigationpane') {
-            if (args.target.querySelector('.' + CLS.ICONS)) {
-                this.treeObj.expandAll(this.treeObj.selectedNodes);
-            }
-        }
-    }
-
-    private onInitialEnd(args: ReadArgs): void {
-        this.onInit();
-        this.addChild(args.files, getValue('_fm_id', args.cwd), false);
-    }
-
-    private onFinalizeEnd(args: ReadArgs): void {
-        this.onInit();
-        const id: string = getValue('_fm_id', args.cwd);
-        this.addChild(args.files, id, false);
-        this.treeObj.setProperties({ selectedNodes: [this.parent.pathId[this.parent.pathId.length - 1]]});
-    }
-
-    private onCreateEnd(args: ReadArgs): void {
-        this.updateTree(args);
-    }
-
-    private onSelectedData(): void {
-        if (this.parent.activeModule === 'navigationpane') {
-            this.updateItemData();
-        }
-    }
-
-    private onDeleteInit(): void {
-        if (this.parent.activeModule === 'navigationpane') {
-            this.updateActionData();
-            const name: string = getValue('name', this.parent.itemData[0]);
-            Delete(this.parent, [name], this.parent.path, 'delete');
-        }
-    }
-
-    /* istanbul ignore next */
-    private onDeleteEnd(args: ReadArgs): void {
-        if (this.parent.activeModule === 'navigationpane') {
-            const selectedNode: string = this.treeObj.selectedNodes[0];
-            const selcetedEle: Element = select('[data-uid="' + selectedNode + '"]', this.treeObj.element);
-            const selectedNodeEle: HTMLElement = closest(selcetedEle, '.' + CLS.LIST_PARENT).parentElement;
-            this.treeObj.selectedNodes = [selectedNodeEle.getAttribute('data-uid')];
-            this.treeObj.dataBind();
-        }
-        this.updateTree(args);
-    }
-
-    private onRefreshEnd(args: ReadArgs): void {
-        this.updateTree(args);
-    }
-
-    private onRenameInit(): void {
-        if (this.parent.activeModule === 'navigationpane') {
-            this.updateRenameData();
-        }
-    }
-    /* istanbul ignore next */
-    private onRenameEndParent(args: ReadArgs): void {
-        const id: string = this.renameParent ? this.renameParent : this.parent.pathId[this.parent.pathId.length - 1];
-        this.updateTreeNode(args, id);
-        this.parent.expandedId = null;
-        if (this.renameParent) {
-            this.renameParent = null;
-        } else {
-            let resultData: Object[] = [];
-            if (this.parent.hasId) {
-                resultData = new DataManager(this.treeObj.getTreeData()).
-                    executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
-            } else {
-                const nData: Object[] = new DataManager(this.treeObj.getTreeData()).
-                    executeLocal(new Query().where(this.treeObj.fields.text, 'equal', this.parent.renameText, false));
-                if (nData.length > 0) {
-                    resultData = new DataManager(nData).
-                        executeLocal(new Query().where('_fm_pId', 'equal', id, false));
-                }
-            }
-            if (resultData.length > 0) {
-                const id: string = this.previousSelected.length > 0 && this.treeObj.getTreeData(this.previousSelected[0]).length !== 0
-                    ? this.previousSelected[0] : getValue(this.treeObj.fields.id, resultData[0]);
-                this.treeObj.selectedNodes = [id];
-                this.treeObj.dataBind();
-                this.updateItemData();
-            }
-        }
-    }
-
-    /* istanbul ignore next */
-    private onRenameEnd(args: ReadArgs): void {
-        if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
-            this.updateTree(args);
-        } else {
-            const data: { [key: string]: Object; }[] = this.treeObj.getTreeData();
-            let resultData: Object[] = [];
-            if (this.parent.hasId) {
-                resultData = new DataManager(data).
-                    executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
-            } else {
-                const nData: Object[] = new DataManager(data).
-                    executeLocal(new Query().where(this.treeObj.fields.text, 'equal', this.parent.currentItemText, false));
-                if (nData.length > 0) {
-                    resultData = new DataManager(nData).
-                        executeLocal(new Query().where('filterPath', 'equal', this.parent.filterPath, false));
-                }
-            }
-            if (resultData.length > 0) {
-                this.renameParent = getValue(this.treeObj.fields.parentID, resultData[0]);
-                this.parent.expandedId = this.renameParent;
-                this.parent.itemData = this.getTreeData(this.renameParent);
-                read(this.parent, events.renameEndParent, this.parent.filterPath.replace(/\\/g, '/'));
-            }
-        }
-    }
-
-    private onPropertyChanged(e: NotifyArgs): void {
-        if (e.module !== this.getModuleName() && e.module !== 'common') {
-            /* istanbul ignore next */
-            return;
-        }
-        for (const prop of Object.keys(e.newProp)) {
-            switch (prop) {
-            case 'allowDragAndDrop':
-                this.addDragDrop();
-                break;
-            case 'navigationPaneSettings':
-                read(this.parent, events.finalizeEnd, this.parent.path);
-                if (e.oldProp.navigationPaneSettings.sortOrder !== e.newProp.navigationPaneSettings.sortOrder) {
-                    this.treeObj.sortOrder = e.newProp.navigationPaneSettings.sortOrder;
-                }
-                break;
-            }
-        }
-    }
-
-    /* istanbul ignore next */
-    private onDownLoadInit(): void {
-        this.doDownload();
-    }
-
-    private onSelectionChanged(e: NotifyArgs): void {
-        this.treeObj.setProperties({selectedNodes: [e.selectedNode]});
-    }
-
-    private onClearPathInit(e: NotifyArgs): void {
-        this.removeChildNodes(e.selectedNode);
-    }
-
-    private onDragEnd(args: ReadArgs): void {
-        if (isFileSystemData(this.parent)) {
-            this.moveNames = [];
-            const obj: object[] = this.parent.dragData;
-            for (let i: number = 0; i < obj.length; i++) {
-                if (getValue('isFile', obj[i as number]) === false) {
-                    this.moveNames.push(getValue('_fm_id', obj[i as number]));
-                }
-            }
-        }
-        let moveNames: string[] = [];
-        if (this.parent.isPasteError || this.parent.isSearchDrag) {
-            moveNames = this.getMoveNames(args.files, this.parent.isSearchDrag, this.parent.dragPath);
-        } else {
-            moveNames = this.moveNames;
-        }
-        this.treeObj.removeNodes(moveNames);
-    }
-    private getMoveNames(files: { [key: string]: Object; }[], flag: boolean, path: string): string[] {
-        const moveNames: string[] = [];
-        for (let i: number = 0; i < files.length; i++) {
-            if (!files[i as number].isFile) {
-                if (!this.parent.hasId) {
-                    let name: string = <string>(files[i as number].previousName);
-                    if (flag) {
-                        path = path + files[i as number].previousName;
-                        const index: number = path.lastIndexOf('/');
-                        name = path.substring(index + 1);
-                        path = path.substring(0, index + 1);
-                    }
-                    const resultData: Object[] = new DataManager(this.treeObj.getTreeData()).
-                        executeLocal(new Query().where(this.treeObj.fields.text, 'equal', name, false));
-                    for (let j: number = 0; j < resultData.length; j++) {
-                        let fPath: string = getValue('filterPath', resultData[j as number]);
-                        fPath = fPath.replace(/\\/g, '/');
-                        if (fPath === path) {
-                            moveNames.push(getValue(this.treeObj.fields.id, resultData[j as number]));
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        return moveNames;
-    }
-
-    private onCutEnd(args: ReadArgs): void {
-        let moveNames: string[] = [];
-        if (this.parent.isPasteError || this.parent.isSearchCut) {
-            this.moveNames = this.getMoveNames(args.files, this.parent.isSearchCut, this.parent.targetPath);
-        } else {
-            moveNames = this.moveNames;
-        }
-        this.treeObj.removeNodes(moveNames);
-    }
-    /* istanbul ignore next */
-    private selectResultNode(resultObj: object): void {
-        if (!this.parent.hasId) {
-            const path: string = getValue('filterPath', resultObj);
-            const itemname: string = getValue('name', resultObj);
-            const data: Object[] = new DataManager(this.treeObj.getTreeData()).
-                executeLocal(new Query().where(this.treeObj.fields.text, 'equal', itemname, false));
-            if (data.length > 0) {
-                const resultData: Object[] = new DataManager(data).
-                    executeLocal(new Query().where('filterPath', 'equal', path, false));
-                if (resultData.length > 0) {
-                    const id: string = getValue(this.treeObj.fields.id, resultData[0]);
-                    this.treeObj.selectedNodes = [id];
-                    this.treeObj.dataBind();
-                }
-            }
-        } else {
-            const selectedNode: { [key: string]: Object; } =
-            this.treeObj.getTreeData().filter((obj: {name: string}) => obj.name === (resultObj as {name: string}).name)[0];
-            this.treeObj.selectedNodes = [getValue('_fm_id', selectedNode)];
-            this.treeObj.dataBind();
-        }
-    }
-    private onDropPath(args: ReadArgs): void {
-        this.onpasteEnd(args);
-        this.selectResultNode(this.parent.dropData);
-        this.parent.isDropEnd = !this.parent.isPasteError;
-    }
-
-    private onpasteEnd(args: ReadArgs): void {
-        let resultData: Object[] = [];
-        if (this.parent.hasId) {
-            resultData = new DataManager(this.treeObj.getTreeData()).
-                executeLocal(new Query().where('id', 'equal', getValue('id', args.cwd), false));
-        } else {
-            const nData: Object[] = new DataManager(this.treeObj.getTreeData()).
-                executeLocal(new Query().where(this.treeObj.fields.text, 'equal', getValue('name', args.cwd), false));
-            if (nData.length > 0) {
-                resultData = new DataManager(nData).
-                    executeLocal(new Query().where('filterPath', 'equal', getValue('filterPath', args.cwd), false));
-            }
-        }
-        if (resultData.length > 0) {
-            const id: string = getValue(this.treeObj.fields.id, resultData[0]);
-            const toExpand: boolean = this.treeObj.expandedNodes.indexOf(id) === -1;
-            this.removeChildNodes(id);
-            this.addChild(args.files, id, toExpand);
-        }
-        this.parent.expandedId = null;
-        this.onPathChanged(args);
-        if (this.parent.isDragDrop) { this.checkDropPath(args); }
-    }
-    /* istanbul ignore next */
-    private checkDropPath(args: ReadArgs): void {
-        if (isFileSystemData(this.parent) && (this.parent.path === this.parent.dropPath || this.parent.targetModule === 'navigationpane')) {
-            return;
-        }
-        if ((this.parent.dropPath.indexOf(getDirectoryPath(this.parent, args)) === -1)) {
-            this.parent.isDropEnd = false;
-            readDropPath(this.parent);
-        } else {
-            this.parent.isDropEnd = !this.parent.isPasteError;
-        }
-    }
-
-    private onpasteInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            this.updateItemData();
-        }
-        this.moveNames = [];
-        const obj: object[] = this.parent.isDragDrop ? this.parent.dragData : this.parent.actionRecords;
-        for (let i: number = 0; i < obj.length; i++) {
-            if (getValue('isFile', obj[i as number]) === false) {
-                this.moveNames.push(getValue('_fm_id', obj[i as number]));
-            }
-        }
-    }
-    private oncutCopyInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            this.parent.activeRecords = this.getTreeData(this.treeObj.selectedNodes[0]);
-            this.parent.activeElements = [this.activeNode];
-        }
-    }
-
-    private addEventListener(): void {
-        this.parent.on(events.modelChanged, this.onPropertyChanged, this);
-        this.parent.on(events.downloadInit, this.onDownLoadInit, this);
-        this.parent.on(events.initialEnd, this.onInitialEnd, this);
-        this.parent.on(events.finalizeEnd, this.onFinalizeEnd, this);
-        this.parent.on(events.pathChanged, this.onPathChanged, this);
-        this.parent.on(events.pasteEnd, this.onpasteEnd, this);
-        this.parent.on(events.cutEnd, this.onCutEnd, this);
-        this.parent.on(events.pasteInit, this.onpasteInit, this);
-        this.parent.on(events.nodeExpand, this.onNodeExpanded, this);
-        this.parent.on(events.createEnd, this.onCreateEnd, this);
-        this.parent.on(events.selectedData, this.onSelectedData, this);
-        this.parent.on(events.deleteInit, this.onDeleteInit, this);
-        this.parent.on(events.deleteEnd, this.onDeleteEnd, this);
-        this.parent.on(events.refreshEnd, this.onRefreshEnd, this);
-        this.parent.on(events.updateTreeSelection, this.onSelectionChanged, this);
-        this.parent.on(events.openInit, this.onOpenInit, this);
-        this.parent.on(events.openEnd, this.onOpenEnd, this);
-        this.parent.on(events.destroy, this.destroy, this);
-        this.parent.on(events.renameInit, this.onRenameInit, this);
-        this.parent.on(events.renameEnd, this.onRenameEnd, this);
-        this.parent.on(events.renameEndParent, this.onRenameEndParent, this);
-        this.parent.on(events.clearPathInit, this.onClearPathInit, this);
-        this.parent.on(events.cutCopyInit, this.oncutCopyInit, this);
-        this.parent.on(events.dropInit, this.onDropInit, this);
-        this.parent.on(events.menuItemData, this.onMenuItemData, this);
-        this.parent.on(events.dragEnd, this.onDragEnd, this);
-        this.parent.on(events.dragging, this.onDragging, this);
-        this.parent.on(events.dropPath, this.onDropPath, this);
-        this.parent.on(events.detailsInit, this.onDetailsInit, this);
-        this.parent.on(events.pathDrag, this.onPathDrag, this);
-    }
-
-    private removeEventListener(): void {
-        this.parent.off(events.initialEnd, this.onInitialEnd);
-        this.parent.off(events.downloadInit, this.onDownLoadInit);
-        this.parent.off(events.finalizeEnd, this.onFinalizeEnd);
-        this.parent.off(events.selectedData, this.onSelectedData);
-        this.parent.off(events.modelChanged, this.onPropertyChanged);
-        this.parent.off(events.pathChanged, this.onPathChanged);
-        this.parent.off(events.pasteEnd, this.onpasteEnd);
-        this.parent.off(events.cutEnd, this.onCutEnd);
-        this.parent.off(events.pasteInit, this.onpasteInit);
-        this.parent.off(events.updateTreeSelection, this.onSelectionChanged);
-        this.parent.off(events.nodeExpand, this.onNodeExpanded);
-        this.parent.off(events.createEnd, this.onCreateEnd);
-        this.parent.off(events.refreshEnd, this.onRefreshEnd);
-        this.parent.off(events.openInit, this.onOpenInit);
-        this.parent.off(events.openEnd, this.onOpenEnd);
-        this.parent.off(events.destroy, this.destroy);
-        this.parent.off(events.renameInit, this.onRenameInit);
-        this.parent.off(events.renameEnd, this.onRenameEnd);
-        this.parent.off(events.renameEndParent, this.onRenameEndParent);
-        this.parent.off(events.clearPathInit, this.onClearPathInit);
-        this.parent.off(events.deleteInit, this.onDeleteInit);
-        this.parent.off(events.deleteEnd, this.onDeleteEnd);
-        this.parent.off(events.cutCopyInit, this.oncutCopyInit);
-        this.parent.off(events.dropInit, this.onDropInit);
-        this.parent.off(events.dragEnd, this.onDragEnd);
-        this.parent.off(events.dragging, this.onDragging);
-        this.parent.off(events.dropPath, this.onDropPath);
-        this.parent.off(events.detailsInit, this.onDetailsInit);
-        this.parent.off(events.menuItemData, this.onMenuItemData);
-        this.parent.off(events.pathDrag, this.onPathDrag);
-    }
-
-    /* istanbul ignore next */
-    private onDetailsInit(): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            const dataobj: Object[] = this.getTreeData(this.treeObj.selectedNodes[0]);
-            this.parent.itemData = dataobj;
-        }
-    }
-
-    private onMenuItemData(args: { [key: string]: Object; }): void {
-        if (this.parent.activeModule === this.getModuleName()) {
-            const liEle: Element = closest(<Element>args.target, 'li');
-            this.parent.itemData = this.getTreeData(liEle.getAttribute('data-uid'));
-        }
-    }
-
-    /* istanbul ignore next */
-    private onDragging(args: DragEventArgs): void {
-        const ele: Element = closest(args.target, 'li');
-        if (ele.classList.contains('e-node-collapsed')) {
-            this.isDrag = true;
-            const level: number = parseInt(ele.getAttribute('aria-level'), 10);
-            this.treeObj.expandAll([ele.getAttribute('data-uid')], level + 1);
-            this.isDrag = false;
-        }
-    }
-
-    private onDropInit(args: DragEventArgs): void {
-        if (this.parent.targetModule === this.getModuleName()) {
-            const dropLi: Element = closest(args.target, 'li');
-            this.parent.dropData = this.getTreeData(dropLi)[0];
-            this.parent.dropPath = this.getDropPath(dropLi, getValue('name', this.parent.dropData));
-        }
-    }
-
-    /**
-     * For internal use only - Get the module name.
-     *
-     * @returns {string} - returns the module name.
-     * @private
-     */
-    private getModuleName(): string {
-        return 'navigationpane';
-    }
-
-    public destroy(): void {
-        if (this.parent.isDestroyed) { return; }
-        this.removeEventListener();
-        if (this.treeObj) {
-            this.unWireEvents();
-            this.treeObj.destroy();
-        }
-    }
-    private wireEvents(): void {
-        this.keyboardModule = new KeyboardEvents(
-            this.treeObj.element,
-            {
-                keyAction: this.keyDown.bind(this),
-                keyConfigs: this.keyConfigs,
-                eventName: 'keydown'
-            }
-        );
-    }
-
-    private unWireEvents(): void {
-        this.keyboardModule.destroy();
-    }
-
-    /* istanbul ignore next */
-    private keyDown(e: KeyboardEventArgs): void {
-        const action: string = e.action;
-        switch (action) {
-        case 'altEnter':
-            this.parent.notify(events.detailsInit, {});
-            GetDetails(this.parent, [], this.parent.path, 'details');
-            break;
-        case 'esc':
-            removeActive(this.parent);
-            break;
-        case 'del':
-            if (this.parent.pathId[0] !== this.activeNode.getAttribute('data-uid')) {
-                this.updateItemData();
-                if (!hasEditAccess(this.parent.itemData[0])) {
-                    createDeniedDialog(this.parent, this.parent.itemData[0], events.permissionEdit);
-                } else {
-                    this.removeNodes = [];
-                    createDialog(this.parent, 'Delete');
-                }
-            }
-            break;
-        case 'ctrlC':
-            copyFiles(this.parent);
-            break;
-        case 'ctrlV':
-            this.parent.folderPath = '';
-            pasteHandler(this.parent);
-            break;
-        case 'ctrlX':
-            cutFiles(this.parent);
-            break;
-        case 'shiftF10':
-            this.updateItemData();
-            if (!hasDownloadAccess(this.parent.itemData[0])) {
-                createDeniedDialog(this.parent, this.parent.itemData[0], events.permissionDownload);
-                return;
-            }
-            if (this.parent.selectedItems.length !== 0) {
-                this.doDownload();
-            }
-            break;
-        case 'f2':
-            if (this.parent.selectedItems.length === 0) {
-                const data: Object = this.getTreeData(this.treeObj.selectedNodes[0])[0];
-                if (!hasEditAccess(data)) {
-                    createDeniedDialog(this.parent, data, events.permissionEdit);
-                } else {
-                    this.updateRenameData();
-                    createDialog(this.parent, 'Rename');
-                }
-            }
-            break;
-        }
-    }
-
-    private getTreeData(args: string | Element): object[] {
-        const data: object[] = this.treeObj.getTreeData(args);
-        for (let i: number = 0; i < data.length; i++) {
-            if (isNOU(getValue('hasChild', data[i as number]))) { setValue('hasChild', false, data[i as number]); }
-        }
-        return data;
-    }
-
-    private updateRenameData(): void {
-        this.updateItemData();
-        this.parent.currentItemText = getValue('name', this.parent.itemData[0]);
-    }
-
-    private updateItemData(): void {
-        const data: Object = this.getTreeData(this.treeObj.selectedNodes[0])[0];
-        this.parent.itemData = [data];
-        this.parent.isFile = false;
-    }
-
-    private updateActionData(): void {
-        this.updateItemData();
-        const node: HTMLLIElement = select('[data-uid="' + this.parent.pathId[this.parent.pathId.length - 1] + '"]', this.treeObj.element);
-        updatePath(node, this.parent.itemData[0], this.parent);
-        const newPath: string = getParentPath(this.parent.path);
-        this.parent.setProperties({ path: newPath }, true);
-        this.parent.pathId.pop();
-        this.parent.pathNames.pop();
-    }
-    /* istanbul ignore next */
-    private doDownload(): void {
-        const newPath: string = getParentPath(this.parent.path);
-        const itemId: string = this.treeObj.selectedNodes[0];
-        const name: string = (itemId === this.parent.pathId[0]) ? '' : getValue('name', this.parent.itemData[0]);
-        Download(this.parent, newPath, [name]);
-    }
-}