|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import { Button, Dialog } from '@blueprintjs/core';
|
|
|
|
|
import { Button, Dialog, Tab, Tabs, TabId } from '@blueprintjs/core';
|
|
|
|
|
import * as React from 'react';
|
|
|
|
|
|
|
|
|
|
import { FilePanel } from './FilePanel';
|
|
|
|
@ -14,6 +14,19 @@ export interface SoucePanelState
|
|
|
|
|
{
|
|
|
|
|
showIndex: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const TexturePanel: React.SFC<{}> = () => (
|
|
|
|
|
//todo
|
|
|
|
|
<h5>我的贴图</h5>
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const ModelPanel: React.SFC<{}> = () => (
|
|
|
|
|
//todo
|
|
|
|
|
<h5>我的模型</h5>
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 资源管理器面板
|
|
|
|
|
* TODO:贴图,模型面板组件,和材质组件类似
|
|
|
|
@ -22,13 +35,16 @@ export interface SoucePanelState
|
|
|
|
|
* @class SoucePanel
|
|
|
|
|
* @extends {React.Component<SoucePanelProps, SoucePanelState>}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
export default class SoucePanel extends React.Component<SoucePanelProps, SoucePanelState> {
|
|
|
|
|
ref: React.RefObject<HTMLDivElement>;
|
|
|
|
|
constructor(props: SoucePanelProps)
|
|
|
|
|
{
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
showIndex: 0
|
|
|
|
|
}
|
|
|
|
|
this.ref = React.createRef();
|
|
|
|
|
}
|
|
|
|
|
handleClick = (i: number) =>
|
|
|
|
|
{
|
|
|
|
@ -36,14 +52,22 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
|
|
|
|
|
showIndex: i
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
componentDidMount()
|
|
|
|
|
{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
componentDidUpdate()
|
|
|
|
|
{
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render()
|
|
|
|
|
{
|
|
|
|
|
const DialogStyle: React.CSSProperties = {
|
|
|
|
|
position: "absolute",
|
|
|
|
|
top: 0,
|
|
|
|
|
width: "80%",
|
|
|
|
|
height: window.innerHeight - 150,
|
|
|
|
|
minWidth: 755
|
|
|
|
|
width: "48%",
|
|
|
|
|
minWidth: 725
|
|
|
|
|
}
|
|
|
|
|
return (
|
|
|
|
|
<Dialog
|
|
|
|
@ -52,47 +76,35 @@ export default class SoucePanel extends React.Component<SoucePanelProps, SoucePa
|
|
|
|
|
onClose={() => this.props.handleClose()}
|
|
|
|
|
title="资源管理器"
|
|
|
|
|
style={DialogStyle}
|
|
|
|
|
onOpening={() =>
|
|
|
|
|
{
|
|
|
|
|
this.ref.current.parentElement.className = "bp3-dark bp3-dialog"
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
className="bp3-dialog-body"
|
|
|
|
|
ref={this.ref}
|
|
|
|
|
className="souce-panel bp3-dialog-body"
|
|
|
|
|
style={{
|
|
|
|
|
display: "flex",
|
|
|
|
|
justifyContent: "space-between"
|
|
|
|
|
}}>
|
|
|
|
|
<div style={
|
|
|
|
|
{
|
|
|
|
|
width: "20%"
|
|
|
|
|
}
|
|
|
|
|
}>
|
|
|
|
|
<div
|
|
|
|
|
className="bp3-card bp3-elevation-0 bp3-interactive"
|
|
|
|
|
onClick={() => this.handleClick(0)}
|
|
|
|
|
>
|
|
|
|
|
<h5>我的文件</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className="bp3-card bp3-elevation-0 bp3-interactive"
|
|
|
|
|
onClick={() => this.handleClick(1)}
|
|
|
|
|
>
|
|
|
|
|
<h5>我的材质</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className="bp3-card bp3-elevation-0 bp3-interactive"
|
|
|
|
|
onClick={() => this.handleClick(2)}
|
|
|
|
|
>
|
|
|
|
|
<h5>我的贴图</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
className="bp3-card bp3-elevation-0 bp3-interactive"
|
|
|
|
|
onClick={() => this.handleClick(3)}
|
|
|
|
|
|
|
|
|
|
<Tabs
|
|
|
|
|
id="Tabs"
|
|
|
|
|
vertical={true}
|
|
|
|
|
>
|
|
|
|
|
<h5>我的模型</h5>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{/* TODO:相应数据传入 */}
|
|
|
|
|
<Tab id="fl" title="我的文件" panel={<FilePanel callback={this.props.handleClose} />} />
|
|
|
|
|
<Tab id="mt" title="我的材质" panel={<MaterialPanel />} />
|
|
|
|
|
<Tab id="tt" title="我的贴图" panel={<TexturePanel />} />
|
|
|
|
|
<Tab id="md" title="我的模型" panel={<ModelPanel />} />
|
|
|
|
|
</Tabs>
|
|
|
|
|
{/* TODO:相应数据传入
|
|
|
|
|
<FilePanel isShow={this.state.showIndex === 0} callback={this.props.handleClose} />
|
|
|
|
|
<MaterialPanel isShow={this.state.showIndex === 1} />
|
|
|
|
|
<MaterialPanel isShow={this.state.showIndex === 1} /> */}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="bp3-dialog-footer">
|
|
|
|
|
<div className="bp3-dialog-footer-actions">
|
|
|
|
|
<Button
|
|
|
|
|