|
|
|
@ -6,6 +6,8 @@ import { appUi } from '../../Layout/ApplicationLayout';
|
|
|
|
|
import { AppToaster } from '../Toaster';
|
|
|
|
|
import { inflate, MaterialIn, MaterialInAndAppendAppData } from '../../../Common/SerializeMaterial';
|
|
|
|
|
import { MaterialUrls, CURRENT_HOST } from '../../../Common/HostUrl';
|
|
|
|
|
import { observable } from 'mobx';
|
|
|
|
|
import { getFileSize } from '../../../Common/Utils';
|
|
|
|
|
|
|
|
|
|
export interface IImgListProps
|
|
|
|
|
{
|
|
|
|
@ -17,6 +19,7 @@ export interface IImgListProps
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
export class MaterialList extends React.Component<IImgListProps, {}> {
|
|
|
|
|
@observable private isShowSize = false;
|
|
|
|
|
private readyMtl;
|
|
|
|
|
private handleGetMtlJson = async (mat: { material_id: string }): Promise<string | undefined> =>
|
|
|
|
|
{
|
|
|
|
@ -71,60 +74,77 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
|
|
|
|
|
public render()
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<ul
|
|
|
|
|
className="mat-list"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
this.props.dataList.map(mtl =>
|
|
|
|
|
<>
|
|
|
|
|
<ul
|
|
|
|
|
className="mat-list"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={mtl.image_id}
|
|
|
|
|
onDragStart={() => this.handleDragStart(mtl)}
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
className="look-mat hint editor-lint"
|
|
|
|
|
onDoubleClick={() => this.handleDbClick(mtl)}
|
|
|
|
|
this.props.dataList.map(mtl =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={mtl.image_id}
|
|
|
|
|
onDragStart={() => this.handleDragStart(mtl)}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${mtl.logo}`} />
|
|
|
|
|
</div>
|
|
|
|
|
<p title={mtl.name}>{mtl.name}</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(mtl)}
|
|
|
|
|
text="确定" />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
}
|
|
|
|
|
target={<Button
|
|
|
|
|
icon="cross"
|
|
|
|
|
minimal
|
|
|
|
|
/>}
|
|
|
|
|
/>
|
|
|
|
|
<Checkbox
|
|
|
|
|
className={mtl.isChecked && "selected"}
|
|
|
|
|
inline={true}
|
|
|
|
|
checked={mtl.isChecked}
|
|
|
|
|
onChange={e =>
|
|
|
|
|
<div
|
|
|
|
|
className="look-mat hint editor-lint"
|
|
|
|
|
onDoubleClick={() => this.handleDbClick(mtl)}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${mtl.logo}`} />
|
|
|
|
|
</div>
|
|
|
|
|
{
|
|
|
|
|
this.props.select(e, mtl);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
this.isShowSize &&
|
|
|
|
|
<div style={{
|
|
|
|
|
position: "absolute",
|
|
|
|
|
left: 5,
|
|
|
|
|
bottom: 25,
|
|
|
|
|
background: "#fff"
|
|
|
|
|
}}>{getFileSize(parseFloat(mtl.size))}</div>
|
|
|
|
|
}
|
|
|
|
|
<p title={mtl.name}>{mtl.name}</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(mtl)}
|
|
|
|
|
text="确定" />
|
|
|
|
|
</div>
|
|
|
|
|
</Card>
|
|
|
|
|
}
|
|
|
|
|
target={<Button
|
|
|
|
|
icon="cross"
|
|
|
|
|
minimal
|
|
|
|
|
/>}
|
|
|
|
|
/>
|
|
|
|
|
<Checkbox
|
|
|
|
|
className={mtl.isChecked && "selected"}
|
|
|
|
|
inline={true}
|
|
|
|
|
checked={mtl.isChecked}
|
|
|
|
|
onChange={e =>
|
|
|
|
|
{
|
|
|
|
|
this.props.select(e, mtl);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</li>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
<Checkbox
|
|
|
|
|
checked={this.isShowSize}
|
|
|
|
|
style={{ position: "absolute", left: 20, bottom: 50 }}
|
|
|
|
|
label="显示文件大小"
|
|
|
|
|
onChange={() => this.isShowSize = !this.isShowSize}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|