From c0fbd7cd6414a51fcfa576959df3477404dd5424 Mon Sep 17 00:00:00 2001
From: Vitaliy Filippov <vitalif@yourcmc.ru>
Date: Wed, 22 Jun 2016 22:12:52 +0300
Subject: [PATCH] Extract attachment list to its own component

---
 mail.js | 68 +++++++++++++++++++++++++++++++++------------------------
 1 file changed, 40 insertions(+), 28 deletions(-)

diff --git a/mail.js b/mail.js
index 325e876..3bdf5b9 100644
--- a/mail.js
+++ b/mail.js
@@ -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>