85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
import React from 'react';
|
|
|
|
import ListWithSelection from './ListWithSelection.js';
|
|
import Util from './Util.js';
|
|
|
|
export default class AttachList extends ListWithSelection
|
|
{
|
|
state = {
|
|
...this.state,
|
|
attachments: [],
|
|
attachScroll: 0
|
|
}
|
|
|
|
addAttachments = (ev) =>
|
|
{
|
|
let a = this.state.attachments;
|
|
if (ev.target.files)
|
|
for (let i = 0; i < ev.target.files.length; i++)
|
|
a.push(ev.target.files[i]);
|
|
this.setState({ attachments: a });
|
|
// reset file input
|
|
ev.target.innerHTML = ev.target.innerHTML;
|
|
}
|
|
|
|
scrollAttachList = (ev) =>
|
|
{
|
|
this.setState({ attachScroll: ev.target.scrollTop });
|
|
}
|
|
|
|
deleteSelected = () =>
|
|
{
|
|
for (let i = this.state.attachments.length-1; i >= 0; i--)
|
|
if (this.state.selected[i])
|
|
this.state.attachments.splice(i, 1);
|
|
this.setState({ attachments: this.state.attachments });
|
|
}
|
|
|
|
getTotalItems = () =>
|
|
{
|
|
return this.state.attachments.length;
|
|
}
|
|
|
|
getPageSize = () =>
|
|
{
|
|
return this.refs.a0 ? Math.round(this.refs.scroll.offsetHeight / this.refs.a0.offsetHeight) : 1;
|
|
}
|
|
|
|
getItemOffset = (index) =>
|
|
{
|
|
let item = this.refs['a'+index];
|
|
return [ item.offsetTop, item.offsetHeight ];
|
|
}
|
|
|
|
getScrollPaddingTop = () =>
|
|
{
|
|
return this.refs.title.offsetHeight;
|
|
}
|
|
|
|
render()
|
|
{
|
|
return <div className="attach">
|
|
<div className="no-attach" style={this.state.attachments.length ? { display: 'none' } : null}>
|
|
<input type="file" multiple="multiple" onChange={this.addAttachments} />
|
|
</div>
|
|
<div ref="scroll" className="attach-list" tabIndex="1" onScroll={this.scrollAttachList} onKeyDown={this.onListKeyDown}
|
|
style={this.state.attachments.length ? null : { display: 'none' }}>
|
|
<div ref="title" className="title" style={{ top: this.state.attachScroll }}>
|
|
<div className="name">Attachment <a className="button">
|
|
<img src="icons/attach.png" />
|
|
<input type="file" multiple="multiple" onChange={this.addAttachments} />
|
|
</a></div>
|
|
<div className="size">Size</div>
|
|
</div>
|
|
{this.state.attachments.map((a, i) =>
|
|
<div ref={'a'+i} title={a.name+' ('+Util.formatBytes(a.size)+')'} key={'a'+i} data-i={i}
|
|
className={'attachment'+(this.isSelected(i) ? ' selected' : '')} onMouseDown={this.onListItemClick}>
|
|
<div className="name">{a.name}</div>
|
|
<div className="size">{Util.formatBytes(a.size)}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|