!394 fix #IYRL4

Merge pull request !394 from ZoeLeeFZ/showFileSize

src/UI/Components/SourceManage/FileList.tsx

@@ -1,11 +1,12 @@
 import { Button, Card, Checkbox, Classes, ContextMenu, Intent, Menu, MenuItem, Popover, Position } from '@blueprintjs/core';
-import { IObservableValue } from 'mobx';
+import { IObservableValue, observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import * as React from 'react';
 import { CURRENT_HOST } from '../../../Common/HostUrl';
 import { MouseKey } from '../../../Common/KeyEnum';
 import { FileServer } from '../../../DatabaseServices/FileServer';
 import { TopPanelStore } from '../../Store/TopPanelStore';
+import { FixedNotZero } from '../../../Common/Utils';
 
 export interface IFileListProps
 {
@@ -16,9 +17,23 @@ export interface IFileListProps
     isRename: IObservableValue<boolean>;
     info: { fid: string, name: string };
 }
+
+function getFileSize(size: number)
+{
+    let units = ["B", "KB", "MB", "GB"];
+    for (let u of units)
+    {
+        if (size > 1 && size < 1024)
+            return FixedNotZero(size, 2) + u;
+        else
+            size /= 1024;
+    }
+}
+
 @inject('store')
 @observer
 export class FileList extends React.Component<IFileListProps, {}> {
+    @observable isShowSize = false;
     handleOpenFile = async (fid: string) =>
     {
         let server = FileServer.GetInstance() as FileServer;
@@ -63,6 +78,7 @@ export class FileList extends React.Component<IFileListProps, {}> {
     public render()
     {
         return (
+            <>
                 <ul
                     className="mat-list"
                 >
@@ -79,6 +95,15 @@ export class FileList extends React.Component<IFileListProps, {}> {
                                     >
                                         <img src={`${CURRENT_HOST}/${file.logo}`} />
                                     </div>
+                                    {
+                                        this.isShowSize &&
+                                        <div style={{
+                                            position: "absolute",
+                                            left: 5,
+                                            bottom: 60,
+                                            background: "#fff"
+                                        }}>{getFileSize(parseFloat(file.size))}</div>
+                                    }
                                     <p style={{ padding: "5px 0" }} title={file.name}>
                                         {file.name}
                                         <div className="flex-center" style={{
@@ -132,6 +157,13 @@ export class FileList extends React.Component<IFileListProps, {}> {
                         })
                     }
                 </ul>
+                <Checkbox
+                    checked={this.isShowSize}
+                    style={{ position: "absolute", left: 20, bottom: 50 }}
+                    label="显示文件大小"
+                    onChange={() => this.isShowSize = !this.isShowSize}
+                />
+            </>
         );
     }
 }