implemented navigation within source browser

scm-ui/src/repos/sources/components/FileTreeLeaf.js

@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import * as React from "react";
 import injectSheet from "react-jss";
 import { DateFromNow } from "@scm-manager/ui-components";
 import FileSize from "./FileSize";
@@ -15,25 +15,46 @@ const styles = {
 
 type Props = {
   file: File,
+  baseUrl: string,
 
   // context props
   classes: any
 };
 
 class FileTreeLeaf extends React.Component<Props> {
+  createLink = (file: File) => {
+    let link = this.props.baseUrl;
+    if (file.path) {
+      link += "/" + file.path + "/";
+    }
+    return link;
+  };
+
+  createFileIcon = (file: File) => {
+    if (file.directory) {
+      return (
+        <Link to={this.createLink(file)}>
+          <FileIcon file={file} />
+        </Link>
+      );
+    }
+    return <FileIcon file={file} />;
+  };
+
+  createFileName = (file: File) => {
+    if (file.directory) {
+      return <Link to={this.createLink(file)}>{file.name}</Link>;
+    }
+    return file.name;
+  };
+
   render() {
     const { file, classes } = this.props;
 
     return (
       <tr>
-        <td className={classes.iconColumn}>
-          <Link to="#todo">
-            <FileIcon file={file} />
-          </Link>
-        </td>
-        <td>
-          <Link to="#todo">{file.name}</Link>
-        </td>
+        <td className={classes.iconColumn}>{this.createFileIcon(file)}</td>
+        <td>{this.createFileName(file)}</td>
         <td>
           <FileSize bytes={file.length} />
         </td>