Adding allowFilePicker and showInputText options

README.md

@@ -80,6 +80,7 @@ class Demo extends Component {
         onMessageWasSent={this._onMessageWasSent.bind(this)}
         messageList={this.state.messageList}
         showEmoji
+        showFilePicker
       />
     </div>)
   }
@@ -107,6 +108,8 @@ Launcher props:
 | onFilesSelected  | function([fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)) | no | Called after file has been selected from dialogue in chat window. |
 | onMessageWasSent | function([message](#message-objects)) | yes | Called when a message is sent, with a message object as an argument. |
 | showEmoji        | boolean | no | Whether or not to show the emoji button in the input bar. Defaults to `true`.
+| showFilePicker   | boolean | no | Whether or not to show the file picker icon in the input bar. Defaults to `true`.
+| allowInputText   | boolean | no | Whether or not to allow user to input text in the input bar. Defaults to `true`.
 
 
 ### Message Objects

demo/src/index.js

@@ -78,7 +78,9 @@ class Demo extends Component {
         newMessagesCount={this.state.newMessagesCount}
         handleClick={this._handleClick.bind(this)}
         isOpen={this.state.isOpen}
-        showEmoji
+        showEmoji={this.state.showEmoji}
+        showFilePicker={this.state.showFilePicker}
+        allowInputText={this.state.allowInputText}
       />
       <img className="demo-monster-img" src={monsterImgUrl} />
       <Footer />

demo/src/messageHistory.js

@@ -18,6 +18,7 @@ export default [
   {type: 'text', author: 'me', data: { text: 'No forget the story. '} },
   {type: 'text', author: 'them', data: { text: "You've got to have a story."} },
   {type: 'emoji', author: 'me', data: { emoji: '😋'} },
+  {type: 'image', author: 'them', data: { url: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png', alt: '...', width: 50, height: 50} },
   {type: 'file', author: 'me',
     data: {
       url: monsterImgUrl,

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-chat-window",
-  "version": "1.2.0",
+  "name": "react-chat-window-clone",
+  "version": "1.2.14",
   "description": "react-chat-window React component",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,31 +19,41 @@
   },
   "dependencies": {
     "emoji-js": "3.2.2",
-    "gh-pages": "^1.2.0",
-    "prop-types": "15.5.10",
-    "react-highlight.js": "1.0.5",
+    "gh-pages": "^6.1.1",
+    "prop-types": "^15.8.1",
+    "react-highlight.js": "^1.0.0",
     "react-linkify": "^0.2.1",
-    "socket.io-client": "2.0.3"
+    "socket.io-client": "^2.5.0",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.62.2"
   },
   "peerDependencies": {
     "react": "15.x"
   },
   "devDependencies": {
+    "@babel/core": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
     "babel-eslint": "^10.0.1",
+    "css-loader": "^6.8.1",
     "eslint": "^5.13.0",
     "eslint-plugin-react": "^7.12.4",
     "nwb": "^0.23.0",
-    "react": "15.6.1",
-    "react-dom": "15.6.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "svg-inline-loader": "^0.8.0",
+    "webpack-cli": "^4.0.0"
   },
-  "author": "kingofthestack",
-  "homepage": "https://kingofthestack.github.io/react-chat-window/",
+  "author": "mvsknitw",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/kingofthestack/react-chat-window.git"
+    "url": "git+https://github.com/mvsknitw/react-chat-window.git"
   },
   "keywords": [
     "react-component"
-  ]
+  ],
+  "bugs": {
+    "url": "https://github.com/mvsknitw/react-chat-window/issues"
+  },
+  "homepage": "https://github.com/mvsknitw/react-chat-window#readme"
 }

src/components/ChatWindow.js

@@ -39,6 +39,8 @@ class ChatWindow extends Component {
           onSubmit={this.onUserInputSubmit.bind(this)}
           onFilesSelected={this.onFilesSelected.bind(this)}
           showEmoji={this.props.showEmoji}
+          showFilePicker={this.props.showFilePicker}
+          allowInputText={this.props.allowInputText}
         />
       </div>
     );
@@ -51,7 +53,9 @@ ChatWindow.propTypes = {
   onClose: PropTypes.func.isRequired,
   onFilesSelected: PropTypes.func,
   onUserInputSubmit: PropTypes.func.isRequired,
-  showEmoji: PropTypes.bool
+  showEmoji: PropTypes.bool,
+  showFilePicker: PropTypes.bool,
+  allowInputText: PropTypes.bool,
 };
 
 export default ChatWindow;

src/components/Launcher.js

@@ -60,6 +60,8 @@ class Launcher extends Component {
           isOpen={isOpen}
           onClose={this.handleClick.bind(this)}
           showEmoji={this.props.showEmoji}
+          showFilePicker={this.props.showFilePicker}
+          allowInputText={this.props.allowInputText}
         />
       </div>
     );
@@ -84,11 +86,15 @@ Launcher.propTypes = {
   messageList: PropTypes.arrayOf(PropTypes.object),
   mute: PropTypes.bool,
   showEmoji: PropTypes.bool,
+  showFilePicker: PropTypes.bool,
+  allowInputText: PropTypes.bool,
 };
 
 Launcher.defaultProps = {
   newMessagesCount: 0,
-  showEmoji: true
+  showEmoji: true,
+  showFilePicker: true,
+  allowInputText: true,
 };
 
 export default Launcher;

src/components/Messages/ImageMessage.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+const ImageMessage = (props) => {
+  return (
+    <img src={props.data.url} alt={props.data.alt} width={props.data.width} height={props.data.height} />
+  );
+};
+
+export default ImageMessage;

src/components/Messages/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import TextMessage from './TextMessage';
 import EmojiMessage from './EmojiMessage';
 import FileMessage from './FileMessage';
+import ImageMessage from './ImageMessage';
 import chatIconUrl from './../../assets/chat-icon.svg';
 
 
@@ -15,6 +16,8 @@ class Message extends Component {
       return <EmojiMessage {...this.props.message} />;
     case 'file':
       return <FileMessage {...this.props.message} />;
+    case 'image':
+      return <ImageMessage {...this.props.message} />;
     default:
       console.error(`Attempting to load message with unsupported file type '${type}'`);
     }

src/components/UserInput.js

@@ -130,7 +130,7 @@ class UserInput extends Component {
     const { emojiPickerIsOpen, inputActive } = this.state;
     return (
       <form className={`sc-user-input ${(inputActive ? 'active' : '')}`}>
-        <div
+        {this.props.allowInputText && <div
           role="button"
           tabIndex="0"
           onFocus={() => { this.setState({ inputActive: true }); }}
@@ -142,7 +142,7 @@ class UserInput extends Component {
           placeholder="Write a reply..."
           className="sc-user-input--text"
         >
-        </div>
+        </div>}
         <div className="sc-user-input--buttons">
           <div className="sc-user-input--button"></div>
           <div className="sc-user-input--button">
@@ -152,7 +152,7 @@ class UserInput extends Component {
               tooltip={this._renderEmojiPopup()}
             />}
           </div>
-          {this._renderSendOrFileIcon()}
+          {this.props.showFilePicker && this._renderSendOrFileIcon()}
         </div>
       </form>
     );
@@ -162,7 +162,9 @@ class UserInput extends Component {
 UserInput.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onFilesSelected: PropTypes.func.isRequired,
-  showEmoji: PropTypes.bool
+  showEmoji: PropTypes.bool,
+  showFilePicker: PropTypes.bool,
+  allowInputText: PropTypes.bool,
 };
 
 export default UserInput;