Skip to content

Commit

Permalink
override navigator-file
Browse files Browse the repository at this point in the history
  • Loading branch information
OmarSdt-EC committed May 25, 2021
2 parents 3fd4b4f + 7ebcb33 commit 8e9e879
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 36 deletions.
29 changes: 19 additions & 10 deletions packages/core/src/browser/tree/tree-widget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -768,20 +768,29 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
* @param props the node properties.
*/
protected renderTailDecorations(node: TreeNode, props: NodeProps): React.ReactNode {
return <div>{ }</div>;
}

protected renderTailDecorationsForCompositeNode(node: TreeNode, props: NodeProps, tailDecorations:
(TreeDecoration.TailDecoration | TreeDecoration.TailDecorationIcon | TreeDecoration.TailDecorationIconClass)[]): React.ReactNode {
return <div>{ }</div>;
const tailDecorations = this.getDecorationData(node, 'tailDecorations').filter(notEmpty).reduce((acc, current) => acc.concat(current), []);
if (tailDecorations.length === 0) {
return;
}
return this.renderTailDecorationsForNode(node, props, tailDecorations);
}

/**
* Render the tree node tail decorations if the node is not a `CompositeTreeNode`.
*/
protected renderTailDecorationsForNode(node: TreeNode, props: NodeProps, tailDecorations:
(TreeDecoration.TailDecoration | TreeDecoration.TailDecorationIcon | TreeDecoration.TailDecorationIconClass)[]): React.ReactNode {
return <div>{ }</div>;
return <React.Fragment>
{tailDecorations.map((decoration, index) => {
const { tooltip } = decoration;
const { data, fontData } = decoration as TreeDecoration.TailDecoration;
const color = (decoration as TreeDecoration.TailDecorationIcon).color;
const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS].join(' ');
const style = fontData ? this.applyFontStyles({}, fontData) : color ? { color } : undefined;
const icon = (decoration as TreeDecoration.TailDecorationIcon).icon || (decoration as TreeDecoration.TailDecorationIconClass).iconClass;
const content = data ? data : icon ? <span key={node.id + 'icon' + index} className={this.getIconClass(icon)}></span> : '';
return <div key={node.id + className + index} className={className} style={style} title={tooltip}>
{content}
</div>;
})}
</React.Fragment>;
}

/**
Expand Down
33 changes: 7 additions & 26 deletions packages/navigator/src/browser/navigator-widget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ import { CommandService, notEmpty, SelectionService } from '@theia/core/lib/comm
import {
CorePreferences, Key, TreeModel, SelectableTreeNode,
TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS,
TreeDecoration, NodeProps, CompositeTreeNode
TreeDecoration, NodeProps
} from '@theia/core/lib/browser';
import {
ContextMenuRenderer, ExpandableTreeNode,
TreeProps, TreeNode
} from '@theia/core/lib/browser';
import { FileTreeWidget, FileNode, DirNode } from '@theia/filesystem/lib/browser';
import { FileTreeWidget, FileNode, DirNode, FileStatNode } from '@theia/filesystem/lib/browser';
import { WorkspaceService, WorkspaceCommands } from '@theia/workspace/lib/browser';
import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
import { WorkspaceNode, WorkspaceRootNode } from './navigator-tree';
Expand All @@ -37,7 +37,6 @@ import * as React from '@theia/core/shared/react';
import { NavigatorContextKeyService } from './navigator-context-key-service';
import { FileNavigatorCommands } from './navigator-contribution';


export const FILE_NAVIGATOR_ID = 'files';
export const LABEL = 'No folder opened';
export const CLASS = 'theia-Files';
Expand Down Expand Up @@ -151,16 +150,17 @@ export class FileNavigatorWidget extends FileTreeWidget {
return;
}

if (CompositeTreeNode.is(node)) {
return this.renderTailDecorationsForCompositeNode(node, props, tailDecorations);
// Handle rendering of directories versus file nodes.
if (FileStatNode.is(node) && node.fileStat.isDirectory) {
return this.renderTailDecorationsForDirectoryNode(node, props, tailDecorations);
} else {
return this.renderTailDecorationsForNode(node, props, tailDecorations);
}
}

protected renderTailDecorationsForCompositeNode(node: TreeNode, props: NodeProps, tailDecorations:
protected renderTailDecorationsForDirectoryNode(node: TreeNode, props: NodeProps, tailDecorations:
(TreeDecoration.TailDecoration | TreeDecoration.TailDecorationIcon | TreeDecoration.TailDecorationIconClass)[]): React.ReactNode {
// If the node is a composite, we just want to use the decorationData with the highest priority (last element).
// If the node represents a directory, we just want to use the decorationData with the highest priority (last element).
const decoration = tailDecorations[tailDecorations.length - 1];
const { tooltip } = decoration as TreeDecoration.TailDecoration;
const { fontData } = decoration as TreeDecoration.TailDecoration;
Expand All @@ -174,25 +174,6 @@ export class FileNavigatorWidget extends FileTreeWidget {
</div>;
}

protected renderTailDecorationsForNode(node: TreeNode, props: NodeProps, tailDecorations:
(TreeDecoration.TailDecoration | TreeDecoration.TailDecorationIcon | TreeDecoration.TailDecorationIconClass)[]): React.ReactNode {

return <React.Fragment>
{tailDecorations.map((decoration, index) => {
const { tooltip } = decoration;
const { data, fontData } = decoration as TreeDecoration.TailDecoration;
const color = (decoration as TreeDecoration.TailDecorationIcon).color;
const className = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_TAIL_CLASS].join(' ');
const style = fontData ? this.applyFontStyles({}, fontData) : color ? { color } : undefined;
const icon = (decoration as TreeDecoration.TailDecorationIcon).icon || (decoration as TreeDecoration.TailDecorationIconClass).iconClass;
const content = data ? data : icon ? <span key={node.id + 'icon' + index} className={this.getIconClass(icon)}></span> : '';
return <div key={node.id + className + index} className={className} style={style} title={tooltip}>
{content}
</div>;
})}
</React.Fragment>;
}

protected shouldShowWelcomeView(): boolean {
return this.model.root === undefined;
}
Expand Down

0 comments on commit 8e9e879

Please sign in to comment.