vitalif
/
likeopera-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extract attachment list to its own component

master
Vitaliy Filippov 2016-06-22 22:12:52 +03:00
parent 21d76306a4
commit c0fbd7cd64
1 changed files with 40 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
mail.js
View File

@ -736,12 +736,11 @@ function formatDate(dt)
return (h < 10 ? '0' : '')+h+':'+(m < 10 ? '0' : '')+m;
}
var ComposeWindow = React.createClass({
var AttachList = React.createClass({
getInitialState: function()
{
return {
attachments: [],
text: '',
attachScroll: 0
};
},
@ -759,10 +758,6 @@ var ComposeWindow = React.createClass({
{
this.setState({ attachScroll: ev.target.scrollTop });
},
changeText: function(ev)
{
this.setState({ text: ev.target.value });
},
attachKeyDown: function(ev)
{
if (!this.state.attachments.length)
@ -867,6 +862,44 @@ var ComposeWindow = React.createClass({
}
},
render: function()
{
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.attachKeyDown}
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+' ('+formatBytes(a.size)+')'} key={'a'+i} data-i={i}
className={'attachment'+(a.selected ? ' selected' : '')} onMouseDown={this.selectAttachment}>
<div className="name">{a.name}</div>
<div className="size">{formatBytes(a.size)}</div>
</div>
)}
</div>
</div>
}
});
var ComposeWindow = React.createClass({
getInitialState: function()
{
return {
text: ''
};
},
changeText: function(ev)
{
this.setState({ text: ev.target.value });
},
render: function()
{
return <div className="compose">
<div className="actions">
@ -903,28 +936,7 @@ var ComposeWindow = React.createClass({
<div className="value"><input /></div>
</div>
</div>
<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.attachKeyDown}
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+' ('+formatBytes(a.size)+')'} key={'a'+i} data-i={i}
className={'attachment'+(a.selected ? ' selected' : '')} onMouseDown={this.selectAttachment}>
<div className="name">{a.name}</div>
<div className="size">{formatBytes(a.size)}</div>
</div>
)}
</div>
</div>
<AttachList />
</div>
<div className="text">
<textarea onChange={this.changeText} defaultValue={this.state.text}></textarea>