|
|
|
|
@ -6,9 +6,12 @@ import { CURRENT_HOST } from '../../../Common/HostUrl';
|
|
|
|
|
import { MouseKey } from '../../../Common/KeyEnum';
|
|
|
|
|
import { getFileSize } from '../../../Common/Utils';
|
|
|
|
|
import '../../Css/dataList.less';
|
|
|
|
|
import { AnyObject } from '../../Store/BoardInterface';
|
|
|
|
|
import { AnyObject, DatalistColumnWidthOption } from '../../Store/BoardInterface';
|
|
|
|
|
import { userConfigStore } from '../../Store/UserConfigStore';
|
|
|
|
|
import { BoardModalType } from '../Board/BoardModalType';
|
|
|
|
|
import { ScaleImages } from '../Template/ScaleImages';
|
|
|
|
|
import { RenderBackGroundImg } from '../ToolBar/ResourceLibrary/Resource_ResourceList';
|
|
|
|
|
import { datalistStore } from './DatalistStore';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export interface IDataListProps
|
|
|
|
|
@ -24,7 +27,7 @@ export interface IDataListProps
|
|
|
|
|
isSmaller?: boolean;
|
|
|
|
|
dbclickImg?: (data: AnyObject) => void;
|
|
|
|
|
dragStart?: (data: AnyObject) => void;
|
|
|
|
|
preview?: boolean;
|
|
|
|
|
preview?: boolean; //是否可预览
|
|
|
|
|
isSvg?: boolean;
|
|
|
|
|
handleMounseDown?: (e: React.MouseEvent<HTMLElement>, data: AnyObject) => void;
|
|
|
|
|
liStyle?: React.CSSProperties;
|
|
|
|
|
@ -35,7 +38,7 @@ export interface IDataListProps
|
|
|
|
|
canDrag?: boolean;
|
|
|
|
|
isFromResource?: boolean; //数据来自资源库
|
|
|
|
|
isTemplateListUse?: boolean; //模块管理使用UI
|
|
|
|
|
openScaleImages?: IObservableValue<boolean>,
|
|
|
|
|
openScaleImages?: IObservableValue<boolean>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@observer
|
|
|
|
|
@ -50,6 +53,101 @@ export class DataList extends React.Component<IDataListProps> {
|
|
|
|
|
isSmaller: false,
|
|
|
|
|
};
|
|
|
|
|
private currentData: any;
|
|
|
|
|
private DataListEl = React.createRef<HTMLDivElement>();
|
|
|
|
|
private titleType = [["name", "名称"], ["date", "修改日期"], ["size", "大小"], ["operate", "操作"]];
|
|
|
|
|
private curColumnWidthEl: { name: Element[], date: Element[], size: Element[], operate: Element[]; } = { name: [], date: [], size: [], operate: [] };
|
|
|
|
|
private curColumnWidth: DatalistColumnWidthOption = null;
|
|
|
|
|
|
|
|
|
|
private handleResizeEl = (e: React.PointerEvent<HTMLElement>, title: string) =>
|
|
|
|
|
{
|
|
|
|
|
const columnWidthEl = this.curColumnWidthEl[title] as HTMLElement[];
|
|
|
|
|
if (columnWidthEl.length === 0) return;
|
|
|
|
|
|
|
|
|
|
this.UpDataColumnWidth();
|
|
|
|
|
const dataListEl = this.DataListEl.current;
|
|
|
|
|
const targetEl = (e.target as HTMLElement);
|
|
|
|
|
targetEl.classList.add("resize-focus");
|
|
|
|
|
targetEl.setPointerCapture(e.pointerId);
|
|
|
|
|
|
|
|
|
|
const clientX = e.clientX;
|
|
|
|
|
const originalWidth = (columnWidthEl[0] as HTMLElement).offsetWidth;
|
|
|
|
|
const minWidthEl = Array.from(dataListEl.querySelectorAll<HTMLDivElement>(".min-width"));
|
|
|
|
|
const curMinWidth = minWidthEl[0].offsetWidth;
|
|
|
|
|
let isMove = false;
|
|
|
|
|
let newWidth: number;
|
|
|
|
|
|
|
|
|
|
targetEl.onmousemove = (ev) =>
|
|
|
|
|
{
|
|
|
|
|
isMove = true;
|
|
|
|
|
const currentWidth = ev.clientX - clientX + originalWidth;
|
|
|
|
|
newWidth = Math.max(120, Math.min(500, currentWidth));
|
|
|
|
|
if (newWidth === originalWidth) return;
|
|
|
|
|
|
|
|
|
|
dataListEl.style.display = "none";
|
|
|
|
|
minWidthEl.forEach((el) => { el.style.minWidth = `${curMinWidth}px`; });
|
|
|
|
|
columnWidthEl.forEach((resizeEl: HTMLElement) => { resizeEl.style.width = `${newWidth}px`; });
|
|
|
|
|
dataListEl.style.display = "flex";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
targetEl.onmouseup = (ev) =>
|
|
|
|
|
{
|
|
|
|
|
if (isMove)
|
|
|
|
|
{
|
|
|
|
|
this.curColumnWidth[title] = newWidth;
|
|
|
|
|
datalistStore.m_Option.resizeUI[this.props.idKey] = this.curColumnWidth;
|
|
|
|
|
minWidthEl.forEach((el) => { el.style.minWidth = "100%"; });
|
|
|
|
|
}
|
|
|
|
|
targetEl.classList.remove("resize-focus");
|
|
|
|
|
targetEl.releasePointerCapture(e.pointerId);
|
|
|
|
|
targetEl.onmousemove = null;
|
|
|
|
|
targetEl.onmouseup = null;
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private UpDataColumnWidthEl = async () =>
|
|
|
|
|
{
|
|
|
|
|
const { idKey, dataList, showInfos } = this.props;
|
|
|
|
|
if (dataList.length === 0 || !showInfos) return;
|
|
|
|
|
for (const title in this.curColumnWidthEl)
|
|
|
|
|
{
|
|
|
|
|
this.curColumnWidthEl[title] = Array.from(
|
|
|
|
|
this.DataListEl.current.querySelectorAll<HTMLDivElement>(`.title-type-${title}`)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const columnWidthOption = datalistStore.m_Option.resizeUI[idKey];
|
|
|
|
|
|
|
|
|
|
if (columnWidthOption)
|
|
|
|
|
{
|
|
|
|
|
this.curColumnWidth = columnWidthOption;
|
|
|
|
|
this.UpDataColumnWidth();
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
let columnWidth = {} as DatalistColumnWidthOption;
|
|
|
|
|
for (const title in this.curColumnWidthEl)
|
|
|
|
|
{
|
|
|
|
|
columnWidth[title] = Math.floor((this.curColumnWidthEl[title][0] as HTMLElement).offsetWidth);
|
|
|
|
|
}
|
|
|
|
|
this.curColumnWidth = columnWidth;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private UpDataColumnWidth = () =>
|
|
|
|
|
{
|
|
|
|
|
const dataListEl = this.DataListEl.current;
|
|
|
|
|
dataListEl.style.display = "none";
|
|
|
|
|
for (const title in this.curColumnWidthEl)
|
|
|
|
|
{
|
|
|
|
|
this.curColumnWidthEl[title].forEach((el: HTMLElement) => { el.style.width = `${this.curColumnWidth[title]}px`; });
|
|
|
|
|
}
|
|
|
|
|
dataListEl.style.display = "flex";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
private SaveConfig = () =>
|
|
|
|
|
{
|
|
|
|
|
userConfigStore.SaveConfig(BoardModalType.DatalistStore, datalistStore, { toaster: false }); //保存配置
|
|
|
|
|
};
|
|
|
|
|
renderBigData = () =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
@ -68,46 +166,45 @@ export class DataList extends React.Component<IDataListProps> {
|
|
|
|
|
onMouseUp={(e) => this.handleMouseUp(e, data)}
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
this.props.preview ? <Popover
|
|
|
|
|
interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
|
|
|
|
|
hoverOpenDelay={1000}
|
|
|
|
|
usePortal={false}
|
|
|
|
|
content={
|
|
|
|
|
<div
|
|
|
|
|
style={{
|
|
|
|
|
width: 360,
|
|
|
|
|
height: 360,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${data.path}`} alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
target={
|
|
|
|
|
<div
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, data)}
|
|
|
|
|
onDoubleClick={() => this.handleDbImgClick(data)}
|
|
|
|
|
className={this.props.hintClassName}
|
|
|
|
|
draggable="true"
|
|
|
|
|
style={{ outline: "none" }}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${data.thumbs ? data.thumbs['100'].path : data.path}`} alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
/> :
|
|
|
|
|
this.props.preview ?
|
|
|
|
|
<Popover
|
|
|
|
|
interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
|
|
|
|
|
hoverOpenDelay={1000}
|
|
|
|
|
usePortal={false}
|
|
|
|
|
content={
|
|
|
|
|
<div style={{ width: 360, height: 360 }}>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${data.path}`} alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
target={
|
|
|
|
|
<div
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, data)}
|
|
|
|
|
onDoubleClick={() => this.handleDbImgClick(data)}
|
|
|
|
|
className={this.props.hintClassName}
|
|
|
|
|
draggable="true"
|
|
|
|
|
style={{ outline: "none" }}
|
|
|
|
|
>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${data.thumbs ? data.thumbs['100'].path : data.path}`} alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
:
|
|
|
|
|
<div
|
|
|
|
|
className={this.props.hintClassName}
|
|
|
|
|
onDoubleClick={() => this.handleDbImgClick(data)}
|
|
|
|
|
draggable="true"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
(this.props.isSvg && !data.logo.endsWith(".png")) ? <svg
|
|
|
|
|
width="100px"
|
|
|
|
|
height="100px"
|
|
|
|
|
version="1.1"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<path d={data.logo} fill="transparent" stroke="black" strokeWidth="1" />
|
|
|
|
|
</svg> :
|
|
|
|
|
(this.props.isSvg && !data.logo.endsWith(".png")) ?
|
|
|
|
|
<svg
|
|
|
|
|
width="100px"
|
|
|
|
|
height="100px"
|
|
|
|
|
version="1.1"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<path d={data.logo} fill="transparent" stroke="black" strokeWidth="1" />
|
|
|
|
|
</svg>
|
|
|
|
|
:
|
|
|
|
|
<div className="imglist" >
|
|
|
|
|
{
|
|
|
|
|
this.props.isTemplateListUse &&
|
|
|
|
|
@ -133,12 +230,9 @@ export class DataList extends React.Component<IDataListProps> {
|
|
|
|
|
<div className="data-title" title={data.name}>
|
|
|
|
|
{data.name}
|
|
|
|
|
{
|
|
|
|
|
this.props.renderButtons && <div className="flex-center" style={{
|
|
|
|
|
flex: "0 1"
|
|
|
|
|
}}>
|
|
|
|
|
{
|
|
|
|
|
this.props.renderButtons(data)
|
|
|
|
|
}
|
|
|
|
|
this.props.renderButtons &&
|
|
|
|
|
<div className="flex-center">
|
|
|
|
|
{this.props.renderButtons(data)}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
@ -162,90 +256,115 @@ export class DataList extends React.Component<IDataListProps> {
|
|
|
|
|
};
|
|
|
|
|
renderSmall = () =>
|
|
|
|
|
{
|
|
|
|
|
const { dataList, isSmaller, idKey, selectData, activeId, isSvg, isFromResource, renderButtons } = this.props;
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{
|
|
|
|
|
this.props.dataList.length > 0 && !this.props.isSmaller &&
|
|
|
|
|
dataList.length > 0 && !isSmaller &&
|
|
|
|
|
<div className="info-header">
|
|
|
|
|
<div><span>名称</span></div>
|
|
|
|
|
<div><span>修改日期</span></div>
|
|
|
|
|
<div><span>大小</span></div>
|
|
|
|
|
<div><span>操作</span></div>
|
|
|
|
|
<div className="info-title min-width">
|
|
|
|
|
<div className="title">
|
|
|
|
|
{
|
|
|
|
|
this.titleType.map(title =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<React.Fragment key={title[0]}>
|
|
|
|
|
<div className={`title-item ${"title-type-" + title[0]}`}>
|
|
|
|
|
<span>{title[1]}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="resize" onPointerDown={(e) => this.handleResizeEl(e, title[0])}></div>
|
|
|
|
|
</React.Fragment>);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
<ul className={"mat-list data-list-info"}>
|
|
|
|
|
{
|
|
|
|
|
this.props.dataList.map(data =>
|
|
|
|
|
<div className='data-list-info'>
|
|
|
|
|
<ul className="mat-list min-width">
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={data[this.props.idKey]}
|
|
|
|
|
data-id={data[this.props.idKey]}
|
|
|
|
|
className={this.props.selectData.has(data[this.props.idKey]) ? "selected " : "" + this.props.activeId === data[this.props.idKey] ? "active" : ""}
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, data)}
|
|
|
|
|
onMouseUp={(e) => this.handleMouseUp(e, data)}
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
onDragStart={() => this.handleDragStart(data)}
|
|
|
|
|
draggable="true"
|
|
|
|
|
style={{ padding: "5px 0", height: 50, display: "grid", gridTemplateColumns: "50px 1fr" }}
|
|
|
|
|
dataList.map(data =>
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<li
|
|
|
|
|
key={data[idKey]}
|
|
|
|
|
data-id={data[idKey]}
|
|
|
|
|
className={selectData.has(data[idKey]) ? "selected " : "" + activeId === data[idKey] ? "active" : ""}
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, data)}
|
|
|
|
|
onMouseUp={(e) => this.handleMouseUp(e, data)}
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
this.props.isSvg ?
|
|
|
|
|
<>
|
|
|
|
|
<svg
|
|
|
|
|
width="40px"
|
|
|
|
|
height="40px"
|
|
|
|
|
viewBox="0 0 100 100"
|
|
|
|
|
version="1.1"
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
>
|
|
|
|
|
<path
|
|
|
|
|
d={data.logo}
|
|
|
|
|
fill="transparent"
|
|
|
|
|
stroke="black"
|
|
|
|
|
strokeWidth="1" />
|
|
|
|
|
<div
|
|
|
|
|
onDragStart={() => this.handleDragStart(data)}
|
|
|
|
|
draggable="true"
|
|
|
|
|
className="file-title-item title-type-name"
|
|
|
|
|
>
|
|
|
|
|
{
|
|
|
|
|
isSvg ?
|
|
|
|
|
<svg width="40px" height="40px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
<path d={data.logo} fill="transparent" stroke="black" strokeWidth="1" />
|
|
|
|
|
</svg>
|
|
|
|
|
<div className='data-title' style={{ width: "100%", alignSelf: "center" }}>{data.name}</div>
|
|
|
|
|
</>
|
|
|
|
|
:
|
|
|
|
|
<>
|
|
|
|
|
:
|
|
|
|
|
<div>
|
|
|
|
|
<img src={`${CURRENT_HOST}/${this.props.isFromResource ? RenderBackGroundImg(data.logo, "320x320") : data.logo ?? data.path}`} />
|
|
|
|
|
<img src={`${CURRENT_HOST}/${isFromResource ? RenderBackGroundImg(data.logo, "320x320") : data.logo ?? data.path}`} />
|
|
|
|
|
</div>
|
|
|
|
|
<div className='data-title' style={{ width: "100%", alignSelf: "center" }}>{data.name}</div>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
{!this.props.isSmaller &&
|
|
|
|
|
<>
|
|
|
|
|
<div>
|
|
|
|
|
{data.update_date ?? data.create_date}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
getFileSize(parseFloat(data.size))
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
{
|
|
|
|
|
this.props.renderButtons && this.props.renderButtons(data)
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</>}
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
}
|
|
|
|
|
<div className='data-title' style={{ width: "100%", alignSelf: "center", textAlign: "left" }}>{data.name}</div>
|
|
|
|
|
</div>
|
|
|
|
|
{
|
|
|
|
|
!isSmaller &&
|
|
|
|
|
<>
|
|
|
|
|
<div className="file-title-item title-type-date">
|
|
|
|
|
<span>
|
|
|
|
|
{data.update_date ?? data.create_date}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='file-title-item title-type-size'>
|
|
|
|
|
<span>
|
|
|
|
|
{getFileSize(parseFloat(data.size))}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className='file-title-item title-type-operate'>
|
|
|
|
|
<span>
|
|
|
|
|
{renderButtons && renderButtons(data)}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</>}
|
|
|
|
|
</li>
|
|
|
|
|
);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
componentDidMount(): void
|
|
|
|
|
{
|
|
|
|
|
this.UpDataColumnWidthEl();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps: Readonly<IDataListProps>, prevState: Readonly<{}>, snapshot?: any): void
|
|
|
|
|
{
|
|
|
|
|
if (!prevProps.showInfos && this.props.showInfos)
|
|
|
|
|
this.UpDataColumnWidthEl();
|
|
|
|
|
if (prevProps.showInfos && !this.props.showInfos)
|
|
|
|
|
this.SaveConfig();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount(): void
|
|
|
|
|
{
|
|
|
|
|
const { dataList, showInfos } = this.props;
|
|
|
|
|
if (dataList.length > 0 && showInfos)
|
|
|
|
|
this.SaveConfig();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public render()
|
|
|
|
|
{
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
id="data-list"
|
|
|
|
|
ref={this.DataListEl}
|
|
|
|
|
className={this.props.className}
|
|
|
|
|
style={this.props.style ?? {}}
|
|
|
|
|
onMouseDown={(e) => this.handleMouseDown(e, {})}
|
|
|
|
|
|
黄诗津
1 year ago
committed by