IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-24 09:40:21 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix SonarQube code smells for PgTree directory.

Browse Source
This commit is contained in:
Anil Sahoo 2024-11-19 15:45:00 +05:30 committed by GitHub
parent 8be65ceb7b
commit 6d5b1673e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/pgadmin/static/js/components/PgTree/FileTreeItem/index.tsx
View File

@ -39,7 +39,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
public static readonly renderHeight: number = 24; public static readonly renderHeight: number = 24;
private static readonly itemIdToRefMap: Map<number, HTMLDivElement> = new Map(); private static readonly itemIdToRefMap: Map<number, HTMLDivElement> = new Map();
private static readonly refToItemIdMap: Map<number, HTMLDivElement> = new Map(); private static readonly refToItemIdMap: Map<number, HTMLDivElement> = new Map();
private fileTreeEvent: IFileTreeXTriggerEvents; private readonly fileTreeEvent: IFileTreeXTriggerEvents;
constructor(props) { constructor(props) {
super(props); super(props);
@ -119,7 +119,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
this.setActiveFile(this.props.item); this.setActiveFile(this.props.item);
} }
private setActiveFile = async (FileOrDir): Promise<void> => { private readonly setActiveFile = async (FileOrDir): Promise<void> => {
this.props.changeDirectoryCount(FileOrDir.parent); this.props.changeDirectoryCount(FileOrDir.parent);
if(FileOrDir._loaded !== true) { if(FileOrDir._loaded !== true) {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'added', FileOrDir); this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'added', FileOrDir);
@ -142,7 +142,7 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
} }
} }
private handleDivRef = (r: HTMLDivElement) => { private readonly handleDivRef = (r: HTMLDivElement) => {
if (r === null) { if (r === null) {
FileTreeItem.itemIdToRefMap.delete(this.props.item.id); FileTreeItem.itemIdToRefMap.delete(this.props.item.id);
} else { } else {
@ -151,42 +151,42 @@ export class FileTreeItem extends React.Component<IItemRendererXProps & IItemRen
} }
}; };
private handleContextMenu = (ev: React.MouseEvent) => { private readonly handleContextMenu = (ev: React.MouseEvent) => {
const { item, itemType, onContextMenu } = this.props; const { item, itemType, onContextMenu } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
onContextMenu(ev, item as FileOrDir); onContextMenu(ev, item as FileOrDir);
} }
}; };
private handleClick = (ev: React.MouseEvent) => { private readonly handleClick = (ev: React.MouseEvent) => {
const { item, itemType, onClick } = this.props; const { item, itemType, onClick } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
onClick(ev, item as FileEntry, itemType); onClick(ev, item as FileEntry, itemType);
} }
}; };
private handleDoubleClick = (ev: React.MouseEvent) => { private readonly handleDoubleClick = (ev: React.MouseEvent) => {
const { item, itemType, onDoubleClick } = this.props; const { item, itemType, onDoubleClick } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
onDoubleClick(ev, item as FileEntry, itemType); onDoubleClick(ev, item as FileEntry, itemType);
} }
}; };
private handleMouseEnter = (ev: React.MouseEvent) => { private readonly handleMouseEnter = (ev: React.MouseEvent) => {
const { item, itemType, onMouseEnter } = this.props; const { item, itemType, onMouseEnter } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
onMouseEnter?.(ev, item as FileEntry); onMouseEnter?.(ev, item as FileEntry);
} }
}; };
private handleMouseLeave = (ev: React.MouseEvent) => { private readonly handleMouseLeave = (ev: React.MouseEvent) => {
const { item, itemType, onMouseLeave } = this.props; const { item, itemType, onMouseLeave } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
onMouseLeave?.(ev, item as FileEntry); onMouseLeave?.(ev, item as FileEntry);
} }
}; };
private handleDragStartItem = (e: React.DragEvent) => { private readonly handleDragStartItem = (e: React.DragEvent) => {
const { item, itemType, events } = this.props; const { item, itemType, events } = this.props;
if (itemType === ItemType.File || itemType === ItemType.Directory) { if (itemType === ItemType.File || itemType === ItemType.Directory) {
const ref = FileTreeItem.itemIdToRefMap.get(item.id); const ref = FileTreeItem.itemIdToRefMap.get(item.id);

94
web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
View File

@ -20,17 +20,17 @@ import AutoSizer from 'react-virtualized-auto-sizer';
export class FileTreeX extends React.Component<IFileTreeXProps> { export class FileTreeX extends React.Component<IFileTreeXProps> {
private fileTreeHandle: IFileTreeXHandle; private fileTreeHandle: IFileTreeXHandle;
private activeFileDec: Decoration; private readonly activeFileDec: Decoration;
private pseudoActiveFileDec: Decoration; private readonly pseudoActiveFileDec: Decoration;
private activeFile: FileOrDir; private activeFile: FileOrDir;
private pseudoActiveFile: FileOrDir; private pseudoActiveFile: FileOrDir;
private wrapperRef: React.RefObject<HTMLDivElement> = React.createRef(); private readonly wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
private events: Notificar<FileTreeXEvent>; private readonly events: Notificar<FileTreeXEvent>;
private disposables: DisposablesComposite; private readonly disposables: DisposablesComposite;
private keyboardHotkeys: KeyboardHotkeys; private keyboardHotkeys: KeyboardHotkeys;
private fileTreeEvent: IFileTreeXTriggerEvents; private fileTreeEvent: IFileTreeXTriggerEvents;
private hoverTimeoutId: React.RefObject<number|null> = React.createRef<number|null>(); private readonly hoverTimeoutId: React.RefObject<number|null> = React.createRef<number|null>();
private hoverDispatchId: React.RefObject<number|null> = React.createRef<number|null>(); private readonly hoverDispatchId: React.RefObject<number|null> = React.createRef<number|null>();
constructor(props: IFileTreeXProps) { constructor(props: IFileTreeXProps) {
super(props); super(props);
this.events = new Notificar(); this.events = new Notificar();
@ -98,11 +98,11 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.disposables.dispose(); this.disposables.dispose();
} }
private handleTreeEvent = () => { private readonly handleTreeEvent = () => {
this.fileTreeEvent = this.props.onEvent; this.fileTreeEvent = this.props.onEvent;
}; };
private handleTreeReady = (handle: IFileTreeHandle) => { private readonly handleTreeReady = (handle: IFileTreeHandle) => {
const { onReady, model } = this.props; const { onReady, model } = this.props;
const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div'); const scrollDiv = this.wrapperRef.current?.querySelector('div')?.querySelector('div');
if(this.props.onScroll) { if(this.props.onScroll) {
@ -169,7 +169,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private onItemMouseEnter = (ev: React.MouseEvent, item: FileEntry | Directory) => { private readonly onItemMouseEnter = (ev: React.MouseEvent, item: FileEntry | Directory) => {
clearTimeout(this.hoverDispatchId.current??undefined); clearTimeout(this.hoverDispatchId.current??undefined);
(this.hoverDispatchId as any).current = setTimeout(()=>{ (this.hoverDispatchId as any).current = setTimeout(()=>{
clearTimeout(this.hoverTimeoutId.current??undefined); clearTimeout(this.hoverTimeoutId.current??undefined);
@ -177,7 +177,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}, 500); }, 500);
}; };
private onItemMouseLeave = (ev: React.MouseEvent) => { private readonly onItemMouseLeave = (ev: React.MouseEvent) => {
clearTimeout(this.hoverTimeoutId.current??undefined); clearTimeout(this.hoverTimeoutId.current??undefined);
clearTimeout(this.hoverDispatchId.current??undefined); clearTimeout(this.hoverDispatchId.current??undefined);
(this.hoverTimeoutId as any).current = setTimeout(()=>{ (this.hoverTimeoutId as any).current = setTimeout(()=>{
@ -185,7 +185,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}, 100); }, 100);
}; };
private setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise<void> => { private readonly setActiveFile = async (fileOrDirOrPath: FileOrDir | string, ensureVisible, align): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -202,13 +202,13 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH); this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH);
if (fileH && ensureVisible === true) { if (fileH && ensureVisible === true) {
const alignTree = align !== undefined && align !== null ? align : 'auto'; const alignTree = align ?? 'auto';
await this.fileTreeHandle.ensureVisible(fileH, alignTree); await this.fileTreeHandle.ensureVisible(fileH, alignTree);
} }
} }
}; };
private ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => { private readonly ensureVisible = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -218,7 +218,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => { private readonly deSelectActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -230,7 +230,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => { private readonly setPseudoActiveFile = async (fileOrDirOrPath: FileOrDir | string): Promise<void> => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -251,7 +251,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH); this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'selected', fileH);
}; };
private create = async (parentDir, itemData): Promise<void> => { private readonly create = async (parentDir, itemData): Promise<void> => {
if (parentDir == undefined || parentDir == null) { if (parentDir == undefined || parentDir == null) {
parentDir = this.props.model.root; parentDir = this.props.model.root;
} }
@ -281,13 +281,13 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return newItem; return newItem;
}; };
private update = async (item, itemData): Promise<void> => { private readonly update = async (item, itemData): Promise<void> => {
item._metadata.data = itemData; item._metadata.data = itemData;
await this.props.update(item.path, itemData); await this.props.update(item.path, itemData);
this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'updated', item); this.events.dispatch(FileTreeXEvent.onTreeEvents, window.event, 'updated', item);
}; };
private refresh = async (item): Promise<void> => { private readonly refresh = async (item): Promise<void> => {
const isOpen = item.isExpanded; const isOpen = item.isExpanded;
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
for(const entry of item.children) { for(const entry of item.children) {
@ -312,7 +312,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private unload = async (item): Promise<void> => { private readonly unload = async (item): Promise<void> => {
const isOpen = item.isExpanded; const isOpen = item.isExpanded;
if (item.children && item.children.length > 0) { if (item.children && item.children.length > 0) {
for(const entry of item.children) { for(const entry of item.children) {
@ -325,7 +325,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private remove = async (item): Promise<void> => { private readonly remove = async (item): Promise<void> => {
const {remove, model } = this.props; const {remove, model } = this.props;
const path = item.path; const path = item.path;
await remove(path, false); await remove(path, false);
@ -346,7 +346,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private first = async (fileOrDirOrPath: FileOrDir | string) => { private readonly first = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -359,7 +359,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return null; return null;
}; };
private parent = async (fileOrDirOrPath: FileOrDir | string) => { private readonly parent = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -372,7 +372,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private hasParent = async (fileOrDirOrPath: FileOrDir | string) => { private readonly hasParent = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -384,7 +384,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false; return false;
}; };
private children = async (fileOrDirOrPath: FileOrDir | string) => { private readonly children = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -397,7 +397,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private isOpen = async (fileOrDirOrPath: FileOrDir | string) => { private readonly isOpen = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -409,7 +409,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false; return false;
}; };
private isClosed = async (fileOrDirOrPath: FileOrDir | string) => { private readonly isClosed = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -421,7 +421,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return false; return false;
}; };
private itemData = async (fileOrDirOrPath: FileOrDir | string) => { private readonly itemData = async (fileOrDirOrPath: FileOrDir | string) => {
const fileH = typeof fileOrDirOrPath === 'string' const fileH = typeof fileOrDirOrPath === 'string'
? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath) ? await this.fileTreeHandle.getFileHandle(fileOrDirOrPath)
: fileOrDirOrPath; : fileOrDirOrPath;
@ -433,7 +433,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
return null; return null;
}; };
private setLabel = async(pathOrDir: string | Directory, label: string): Promise<void> => { private readonly setLabel = async(pathOrDir: string | Directory, label: string): Promise<void> => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -454,7 +454,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private changeDirectoryCount = async(pathOrDir: string | Directory): Promise<void> => { private readonly changeDirectoryCount = async(pathOrDir: string | Directory): Promise<void> => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -474,7 +474,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private closeDir = async (pathOrDir: string | Directory) => { private readonly closeDir = async (pathOrDir: string | Directory) => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -488,7 +488,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private toggleDirectory = async (pathOrDir: string | Directory) => { private readonly toggleDirectory = async (pathOrDir: string | Directory) => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -517,7 +517,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
} }
}; };
private addIcon = async (pathOrDir: string | Directory, icon) => { private readonly addIcon = async (pathOrDir: string | Directory, icon) => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -530,7 +530,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private addCssClass = async (pathOrDir: string | Directory, cssClass) => { private readonly addCssClass = async (pathOrDir: string | Directory, cssClass) => {
const dir = typeof pathOrDir === 'string' const dir = typeof pathOrDir === 'string'
? await this.fileTreeHandle.getFileHandle(pathOrDir) ? await this.fileTreeHandle.getFileHandle(pathOrDir)
: pathOrDir; : pathOrDir;
@ -546,25 +546,25 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private showLoader = (ref: HTMLDivElement) => { private readonly showLoader = (ref: HTMLDivElement) => {
// get label ref and add loading class // get label ref and add loading class
ref.style.background = 'none'; ref.style.background = 'none';
const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement;
if (label$) label$.classList.add('loading'); if (label$) label$.classList.add('loading');
}; };
private hideLoader = (ref: HTMLDivElement) => { private readonly hideLoader = (ref: HTMLDivElement) => {
// remove loading class. // remove loading class.
ref.style.background = 'none'; ref.style.background = 'none';
const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement; const label$ = ref.querySelector('i.directory-toggle') as HTMLDivElement;
if (label$) label$.classList.remove('loading'); if (label$) label$.classList.remove('loading');
}; };
private handleBlur = () => { private readonly handleBlur = () => {
this.events.dispatch(FileTreeXEvent.OnBlur); this.events.dispatch(FileTreeXEvent.OnBlur);
}; };
private handleItemClicked = async (ev: React.MouseEvent, item: FileOrDir, type: ItemType) => { private readonly handleItemClicked = async (ev: React.MouseEvent, item: FileOrDir, type: ItemType) => {
if (type === ItemType.Directory && ev.target.className.includes('directory-toggle')) { if (type === ItemType.Directory && ev.target.className.includes('directory-toggle')) {
await this.toggleDirectory(item as Directory); await this.toggleDirectory(item as Directory);
} }
@ -572,42 +572,42 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => { private readonly handleItemDoubleClicked = async (ev: React.MouseEvent, item: FileOrDir) => {
await this.toggleDirectory(item as Directory); await this.toggleDirectory(item as Directory);
await this.setActiveFile(item as FileEntry); await this.setActiveFile(item as FileEntry);
}; };
private getItemFromDOM = (clientReact) => { private readonly getItemFromDOM = (clientReact) => {
return FileTreeItem.refToItemIdMap.get(clientReact); return FileTreeItem.refToItemIdMap.get(clientReact);
}; };
private getDOMFromItem = (item: FileOrDir) => { private readonly getDOMFromItem = (item: FileOrDir) => {
return FileTreeItem.itemIdToRefMap.get(item.id); return FileTreeItem.itemIdToRefMap.get(item.id);
}; };
private handleClick = (ev: React.MouseEvent) => { private readonly handleClick = (ev: React.MouseEvent) => {
// clicked in "blank space" // clicked in "blank space"
if (ev.currentTarget === ev.target) { if (ev.currentTarget === ev.target) {
this.setPseudoActiveFile(null); this.setPseudoActiveFile(null);
} }
}; };
private handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => { private readonly handleItemCtxMenu = (ev: React.MouseEvent, item: FileOrDir) => {
return this.props.onContextMenu?.(ev, item); return this.props.onContextMenu?.(ev, item);
}; };
private handleKeyDown = (ev: React.KeyboardEvent) => { private readonly handleKeyDown = (ev: React.KeyboardEvent) => {
return this.keyboardHotkeys.handleKeyDown(ev); return this.keyboardHotkeys.handleKeyDown(ev);
}; };
private onResize = () => { private readonly onResize = () => {
if (this.wrapperRef.current != null) { if (this.wrapperRef.current != null) {
this.resize(); this.resize();
} }
}; };
private resize = (scrollX, scrollY) => { private readonly resize = (scrollX, scrollY) => {
const scrollXPos = scrollX || 0; const scrollXPos = scrollX || 0;
const scrollYPos = scrollY || this.props.model.state.scrollOffset; const scrollYPos = scrollY || this.props.model.state.scrollOffset;
const div = this.wrapperRef.current.querySelector('div').querySelector('div') as HTMLDivElement; const div = this.wrapperRef.current.querySelector('div').querySelector('div') as HTMLDivElement;
@ -617,7 +617,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
}; };
private changeResolvePath = async (item: FileOrDir): Promise<void> => { private readonly changeResolvePath = async (item: FileOrDir): Promise<void> => {
// Change the path as per pgAdmin requirement: Item Id wise // Change the path as per pgAdmin requirement: Item Id wise
if (item.type === FileType.File) { if (item.type === FileType.File) {
item.resolvedPathCache = item.parent.path + '/' + item._metadata.data.id; item.resolvedPathCache = item.parent.path + '/' + item._metadata.data.id;

20
web/pgadmin/static/js/components/PgTree/services/keyboardHotkeys.ts
View File

@ -3,7 +3,7 @@ import { FileEntry, Directory, FileType } from 'react-aspen';
import { FileTreeXEvent, IFileTreeXHandle } from '../types'; import { FileTreeXEvent, IFileTreeXHandle } from '../types';
export class KeyboardHotkeys { export class KeyboardHotkeys {
private hotkeyActions = { private readonly hotkeyActions = {
'ArrowUp': () => this.jumpToPrevItem(), 'ArrowUp': () => this.jumpToPrevItem(),
'ArrowDown': () => this.jumpToNextItem(), 'ArrowDown': () => this.jumpToNextItem(),
'ArrowRight': () => this.expandOrJumpToFirstChild(), 'ArrowRight': () => this.expandOrJumpToFirstChild(),
@ -34,17 +34,17 @@ export class KeyboardHotkeys {
} }
}; };
private jumpToFirstItem = (): void => { private readonly jumpToFirstItem = (): void => {
const { root } = this.fileTreeX.getModel(); const { root } = this.fileTreeX.getModel();
this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(0), true); this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(0), true);
}; };
private jumpToLastItem = (): void => { private readonly jumpToLastItem = (): void => {
const { root } = this.fileTreeX.getModel(); const { root } = this.fileTreeX.getModel();
this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(root.branchSize - 1), true); this.fileTreeX.setActiveFile(root.getFileEntryAtIndex(root.branchSize - 1), true);
}; };
private jumpToNextItem = (): void => { private readonly jumpToNextItem = (): void => {
const { root } = this.fileTreeX.getModel(); const { root } = this.fileTreeX.getModel();
let currentPseudoActive = this.fileTreeX.getActiveFile(); let currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { if (!currentPseudoActive) {
@ -63,7 +63,7 @@ export class KeyboardHotkeys {
} }
}; };
private jumpToPrevItem = (): void => { private readonly jumpToPrevItem = (): void => {
const { root } = this.fileTreeX.getModel(); const { root } = this.fileTreeX.getModel();
let currentPseudoActive = this.fileTreeX.getActiveFile(); let currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { if (!currentPseudoActive) {
@ -103,7 +103,7 @@ export class KeyboardHotkeys {
} }
} }
private selectFileOrToggleDirState = (): void => { private readonly selectFileOrToggleDirState = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile(); const currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { return; } if (!currentPseudoActive) { return; }
if (currentPseudoActive.type === FileType.Directory) { if (currentPseudoActive.type === FileType.Directory) {
@ -113,7 +113,7 @@ export class KeyboardHotkeys {
} }
}; };
private toggleDirectoryExpand = (): void => { private readonly toggleDirectoryExpand = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile(); const currentPseudoActive = this.fileTreeX.getActiveFile();
if (!currentPseudoActive) { return; } if (!currentPseudoActive) { return; }
if (currentPseudoActive.type === FileType.Directory) { if (currentPseudoActive.type === FileType.Directory) {
@ -121,7 +121,7 @@ export class KeyboardHotkeys {
} }
}; };
private resetSteppedOrSelectedItem = (): void => { private readonly resetSteppedOrSelectedItem = (): void => {
const currentPseudoActive = this.fileTreeX.getActiveFile(); const currentPseudoActive = this.fileTreeX.getActiveFile();
if (currentPseudoActive) { if (currentPseudoActive) {
return this.resetSteppedItem(); return this.resetSteppedItem();
@ -129,11 +129,11 @@ export class KeyboardHotkeys {
this.fileTreeX.setActiveFile(null); this.fileTreeX.setActiveFile(null);
}; };
private resetSteppedItem = () => { private readonly resetSteppedItem = () => {
this.fileTreeX.setActiveFile(null); this.fileTreeX.setActiveFile(null);
}; };
private copyEntry = () => { private readonly copyEntry = () => {
const currentPseudoActive = this.fileTreeX.getActiveFile(); const currentPseudoActive = this.fileTreeX.getActiveFile();
this.events.dispatch(FileTreeXEvent.onTreeEvents, null, 'copied', currentPseudoActive); this.events.dispatch(FileTreeXEvent.onTreeEvents, null, 'copied', currentPseudoActive);
}; };

2
web/pgadmin/static/js/components/PgTree/types.ts
View File

@ -9,7 +9,7 @@ export interface IFileTreeXTriggerEvents {
} }
export interface IItemRendererX extends IItemRenderer { export interface IItemRendererX extends IItemRenderer {
getBoundingClientRectForItem(item: FileEntry | Directory): ClientRect getBoundingClientRectForItem(item: FileEntry | Directory): DOMRect
} }
// Here imagination is your limit! IFileTreeHandle has core low-level features you can build on top of as your application needs // Here imagination is your limit! IFileTreeHandle has core low-level features you can build on top of as your application needs