Merge pull request #771 from rgarmsen2295/plt-143

PLT-143 Support for text drag and drop

web/react/components/create_comment.jsx

@@ -28,6 +28,7 @@ export default class CreateComment extends React.Component {
         this.handleUploadStart = this.handleUploadStart.bind(this);
         this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
         this.handleUploadError = this.handleUploadError.bind(this);
+        this.handleTextDrop = this.handleTextDrop.bind(this);
         this.removePreview = this.removePreview.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
@@ -178,6 +179,11 @@ export default class CreateComment extends React.Component {
             this.setState({serverError: err});
         }
     }
+    handleTextDrop(text) {
+        const newText = this.state.messageText + text;
+        this.handleUserInput(newText);
+        Utils.setCaretPosition(React.findDOMNode(this.refs.textbox.refs.message), newText.length);
+    }
     removePreview(id) {
         let previews = this.state.previews;
         let uploadsInProgress = this.state.uploadsInProgress;
@@ -264,6 +270,7 @@ export default class CreateComment extends React.Component {
                             onUploadStart={this.handleUploadStart}
                             onFileUpload={this.handleFileUploadComplete}
                             onUploadError={this.handleUploadError}
+                            onTextDrop={this.handleTextDrop}
                             postType='comment'
                             channelId={this.props.channelId}
                         />

web/react/components/create_post.jsx

@@ -31,6 +31,7 @@ export default class CreatePost extends React.Component {
         this.handleUploadStart = this.handleUploadStart.bind(this);
         this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
         this.handleUploadError = this.handleUploadError.bind(this);
+        this.handleTextDrop = this.handleTextDrop.bind(this);
         this.removePreview = this.removePreview.bind(this);
         this.onChange = this.onChange.bind(this);
         this.getFileCount = this.getFileCount.bind(this);
@@ -230,6 +231,11 @@ export default class CreatePost extends React.Component {
             this.setState({serverError: err});
         }
     }
+    handleTextDrop(text) {
+        const newText = this.state.messageText + text;
+        this.handleUserInput(newText);
+        Utils.setCaretPosition(React.findDOMNode(this.refs.textbox.refs.message), newText.length);
+    }
     removePreview(id) {
         let previews = this.state.previews;
         let uploadsInProgress = this.state.uploadsInProgress;
@@ -334,6 +340,7 @@ export default class CreatePost extends React.Component {
                                 onUploadStart={this.handleUploadStart}
                                 onFileUpload={this.handleFileUploadComplete}
                                 onUploadError={this.handleUploadError}
+                                onTextDrop={this.handleTextDrop}
                                 postType='post'
                                 channelId=''
                             />

web/react/components/file_upload.jsx

@@ -110,7 +110,7 @@ export default class FileUpload extends React.Component {
         if (typeof files !== 'string' && files.length) {
             this.uploadFiles(files);
         } else {
-            this.props.onUploadError('Invalid file upload', -1);
+            this.props.onTextDrop(e.originalEvent.dataTransfer.getData('Text'));
         }
     }
 
@@ -266,6 +266,7 @@ FileUpload.propTypes = {
     getFileCount: React.PropTypes.func,
     onFileUpload: React.PropTypes.func,
     onUploadStart: React.PropTypes.func,
+    onTextDrop: React.PropTypes.func,
     channelId: React.PropTypes.string,
     postType: React.PropTypes.string
 };

web/react/components/user_settings/custom_theme_chooser.jsx

@@ -53,9 +53,12 @@ export default class CustomThemeChooser extends React.Component {
 
         const elements = [];
         let colors = '';
-        Constants.THEME_ELEMENTS.forEach((element) => {
+        Constants.THEME_ELEMENTS.forEach((element, index) => {
             elements.push(
-                <div className='col-sm-4 form-group'>
+                <div
+                    className='col-sm-4 form-group'
+                    key={'custom-theme-key' + index}
+                >
                     <label className='custom-label'>{element.uiName}</label>
                     <div
                         className='input-group color-picker'

web/react/components/user_settings/premade_theme_chooser.jsx

@@ -23,7 +23,10 @@ export default class PremadeThemeChooser extends React.Component {
                 }
 
                 premadeThemes.push(
-                    <div className='col-sm-3 premade-themes'>
+                    <div
+                        className='col-sm-3 premade-themes'
+                        key={'premade-theme-key' + k}
+                    >
                         <div
                             className={activeClass}
                             onClick={() => this.props.updateTheme(premadeTheme)}