|
|
|
|
@ -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,75 +78,92 @@ export class FileList extends React.Component<IFileListProps, {}> {
|
|
|
|
|
public render()
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<ul
|
|
|
|
|
className="mat-list"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
this.props.dataList.map(file =>
|
|
|
|
|
<>
|
|
|
|
|
<ul
|
|
|
|
|
className="mat-list"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={file.file_id}
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
className="look-mat"
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, file.file_id, file.name)}
|
|
|
|
|
this.props.dataList.map(file =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={file.file_id}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${file.logo}`} />
|
|
|
|
|
</div>
|
|
|
|
|
<p style={{ padding: "5px 0" }} title={file.name}>
|
|
|
|
|
{file.name}
|
|
|
|
|
<div className="flex-center" style={{
|
|
|
|
|
flex: "0 1"
|
|
|
|
|
}}>
|
|
|
|
|
<Button
|
|
|
|
|
text="下载"
|
|
|
|
|
intent={Intent.PRIMARY}
|
|
|
|
|
onClick={() => this.handleDownloadFile(file.file_id)}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
text="打开"
|
|
|
|
|
intent={Intent.SUCCESS}
|
|
|
|
|
onClick={() => this.handleOpenFile(file.file_id)}
|
|
|
|
|
/>
|
|
|
|
|
<div
|
|
|
|
|
className="look-mat"
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, file.file_id, file.name)}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${file.logo}`} />
|
|
|
|
|
</div>
|
|
|
|
|
</p>
|
|
|
|
|
<Popover
|
|
|
|
|
position={Position.RIGHT}
|
|
|
|
|
content={
|
|
|
|
|
<Card>
|
|
|
|
|
<p>确认删除文件</p>
|
|
|
|
|
<div>
|
|
|
|
|
<Button style={{ marginRight: 10 }}
|
|
|
|
|
className={Classes.POPOVER_DISMISS}
|
|
|
|
|
text="取消" />
|
|
|
|
|
<Button
|
|
|
|
|
className={Classes.POPOVER_DISMISS}
|
|
|
|
|
intent={Intent.PRIMARY}
|
|
|
|
|
onClick={() => this.props.deleteFun(file)}
|
|
|
|
|
text="确定" />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
}
|
|
|
|
|
target={<Button
|
|
|
|
|
icon="cross"
|
|
|
|
|
minimal
|
|
|
|
|
/>}
|
|
|
|
|
/>
|
|
|
|
|
<Checkbox
|
|
|
|
|
className={file.isChecked && "selected"}
|
|
|
|
|
inline={true}
|
|
|
|
|
checked={file.isChecked}
|
|
|
|
|
onChange={e =>
|
|
|
|
|
{
|
|
|
|
|
this.props.select(e, file);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
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={{
|
|
|
|
|
flex: "0 1"
|
|
|
|
|
}}>
|
|
|
|
|
<Button
|
|
|
|
|
text="下载"
|
|
|
|
|
intent={Intent.PRIMARY}
|
|
|
|
|
onClick={() => this.handleDownloadFile(file.file_id)}
|
|
|
|
|
/>
|
|
|
|
|
<Button
|
|
|
|
|
text="打开"
|
|
|
|
|
intent={Intent.SUCCESS}
|
|
|
|
|
onClick={() => this.handleOpenFile(file.file_id)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</p>
|
|
|
|
|
<Popover
|
|
|
|
|
position={Position.RIGHT}
|
|
|
|
|
content={
|
|
|
|
|
<Card>
|
|
|
|
|
<p>确认删除文件</p>
|
|
|
|
|
<div>
|
|
|
|
|
<Button style={{ marginRight: 10 }}
|
|
|
|
|
className={Classes.POPOVER_DISMISS}
|
|
|
|
|
text="取消" />
|
|
|
|
|
<Button
|
|
|
|
|
className={Classes.POPOVER_DISMISS}
|
|
|
|
|
intent={Intent.PRIMARY}
|
|
|
|
|
onClick={() => this.props.deleteFun(file)}
|
|
|
|
|
text="确定" />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
}
|
|
|
|
|
target={<Button
|
|
|
|
|
icon="cross"
|
|
|
|
|
minimal
|
|
|
|
|
/>}
|
|
|
|
|
/>
|
|
|
|
|
<Checkbox
|
|
|
|
|
className={file.isChecked && "selected"}
|
|
|
|
|
inline={true}
|
|
|
|
|
checked={file.isChecked}
|
|
|
|
|
onChange={e =>
|
|
|
|
|
{
|
|
|
|
|
this.props.select(e, file);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
<Checkbox
|
|
|
|
|
checked={this.isShowSize}
|
|
|
|
|
style={{ position: "absolute", left: 20, bottom: 50 }}
|
|
|
|
|
label="显示文件大小"
|
|
|
|
|
onChange={() => this.isShowSize = !this.isShowSize}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
ChenX