[Wiki] Support show folder (#2334)

frontend/src/components/tree-dir-view/tree-dir-list.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+class TreeDirList extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isMourseEnter: false
+    }
+  }
+
+  onMainNodeClick = () => {
+    this.props.onMainNodeClick(this.props.node);
+  }
+
+  render() {
+    let node = this.props.node;
+    return (
+      <tr className='row' onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
+        <td className="dirent-icon" style={{width: "5%"}}>
+          <img src={node.type === "dir" ? "/media/img/folder-192.png" : "/media/img/file/192/txt.png"}></img>
+        </td>
+        <td style={{width: "60%"}}>
+          <a className="custom-link" onClick={this.onMainNodeClick}>{node.name}</a>
+        </td>
+        <td style={{width: "15%"}}>{node.size}</td>
+        <td style={{width: "20%"}} title={node.last_update_time}>{node.last_update_time}</td>
+      </tr>
+    )
+  }
+}
+
+export default TreeDirList;

frontend/src/components/tree-dir-view/tree-dir-view.js

@@ -0,0 +1,33 @@
+import React, { Component } from "react";
+import TreeDirList from './tree-dir-list'
+import "../../css/tree-dir-view.css";
+const gettext = window.gettext;
+
+class TreeDirView extends React.Component {
+  render() {
+    let node = this.props.node;
+    let children = node.hasChildren() ? node.children : null;
+
+    return (
+      <table className="doc-view-container">
+        <thead className="doc-view-header">
+          <tr className="row">
+            <th style={{width: "5%"}}></th>
+            <th style={{width: "60%"}}>{gettext('Name')}</th>
+            <th style={{width: "15%"}}>{gettext('Size')}</th>
+            <th style={{width: "20%"}}>{gettext('Last Update')}</th>
+          </tr>
+        </thead>
+        <tbody className="doc-view-body">
+          {children && children.map((node, index) => {
+            return (
+              <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}></TreeDirList>
+            )
+          })}
+        </tbody>
+      </table>
+    )
+  }
+}
+
+export default TreeDirView;