diff --git a/README.md b/README.md
index e3e2cd457..b303fea37 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,7 @@ class Demo extends Component {
onMessageWasSent={this._onMessageWasSent.bind(this)}
messageList={this.state.messageList}
showEmoji
+ showFilePicker
/>
)
}
@@ -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
diff --git a/demo/src/index.js b/demo/src/index.js
index dedcf9090..d52404c71 100644
--- a/demo/src/index.js
+++ b/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}
/>
diff --git a/demo/src/messageHistory.js b/demo/src/messageHistory.js
index f4d38cf00..22ac5330f 100644
--- a/demo/src/messageHistory.js
+++ b/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,
diff --git a/package.json b/package.json
index 1e1756958..c53eea8ac 100644
--- a/package.json
+++ b/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"
}
diff --git a/src/components/ChatWindow.js b/src/components/ChatWindow.js
index 445bf1247..e02b4d0a1 100644
--- a/src/components/ChatWindow.js
+++ b/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}
/>
);
@@ -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;
diff --git a/src/components/Launcher.js b/src/components/Launcher.js
index 7b4306cd4..60e5e1e33 100644
--- a/src/components/Launcher.js
+++ b/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}
/>
);
@@ -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;
diff --git a/src/components/Messages/ImageMessage.js b/src/components/Messages/ImageMessage.js
new file mode 100644
index 000000000..0abad853f
--- /dev/null
+++ b/src/components/Messages/ImageMessage.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+const ImageMessage = (props) => {
+ return (
+
+ );
+};
+
+export default ImageMessage;
\ No newline at end of file
diff --git a/src/components/Messages/index.js b/src/components/Messages/index.js
index 0efd6d2e2..c0665f660 100644
--- a/src/components/Messages/index.js
+++ b/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