improve&refactor: abstract the common chat module and improve scrollToBottom fn usage

Author: aermin

README.md

@@ -7,7 +7,7 @@
 
 ### 项目展示：
 
-github对gif图有限制，我就直接截图了，具体详情建议直接[线上体验](https://im.aermin.top)。给个star呀~
+github对gif图有限制，我就直接截图了，具体详情建议直接[线上体验](https://im.aermin.top)。***可以的话给个star支持一下*** 😄
 
 ![image](https://user-images.githubusercontent.com/24861316/53351929-e1d33300-395c-11e9-84a9-0a9fd793b5a1.png)
 
@@ -153,6 +153,8 @@ ps: 本地发表情和发文件和github登录无法使用，需要自己去gith
   - [x] 发表情
   - [x] 发文件
   - [x] 下载文件
+  - [ ] 图片方法查看
+  - [ ] @某人/Enter快捷键发送信息
   - [ ] 支持Markdown
   - [ ] 支持Quote
 

src/components/ChatItem/style.scss

@@ -5,11 +5,15 @@
     margin: 36px 0;
     .image-render {
         background-color: #fff !important;
+        max-width: 80%;
         img {
          max-width: 80%;
          max-height: 80%;
         }
     }
+    .msg-render {
+        max-width: 50%;
+    }
     .other-file-render {
         font-size: 16px;
         color: $blue;
@@ -19,7 +23,6 @@
         }
     }
     .msg-render {
-        max-width: 60%;
         font-size: 14px;
         word-wrap:break-word;
         .invitingCard {
@@ -93,8 +96,8 @@
             background-color: $my-msg-color;
             border-radius: 6px;
         }
-         .image-render img {
+        .image-render img {
              float: right;
-         }
+        }
     }
 }

src/components/GroupChat/index.js

@@ -12,6 +12,7 @@ import Modal from '../Modal';
 import './style.scss';
 import PersonalInfo from '../PersonalInfo';
 import notification from '../Notification';
+import Chat from '../../modules/Chat';
 
 class GroupChat extends Component {
   constructor() {
@@ -25,6 +26,7 @@ class GroupChat extends Component {
       personalInfo: {},
       visible: false,
     };
+    this._chat = new Chat();
   }
 
   sendMessage = (inputMsg = '', attachments = []) => {
@@ -49,20 +51,11 @@ class GroupChat extends Component {
     };
     this._sendByMe = true;
     window.socket.emit('sendGroupMsg', data);
-    this.scrollToBottom();
+    this._chat.scrollToBottom();
     updateAllChatContent({ allChatContent, newChatContent: data, action: 'send' });
     updateHomePageList({ data, homePageList, myUserId: userId });
   }
 
-  scrollToBottom(time = 0) {
-    const ulDom = document.getElementsByClassName('chat-content-list')[0];
-    if (ulDom) {
-      setTimeout(() => {
-        ulDom.scrollTop = ulDom.scrollHeight + 10000;
-      }, time);
-    }
-  }
-
   joinGroup = () => {
     const { userId } = this._userInfo;
     const {
@@ -106,11 +99,6 @@ class GroupChat extends Component {
     this.setState({ showGroupChatInfo: value });
   }
 
-  clearUnreadHandle() {
-    const { homePageList, clearUnread, chatId } = this.props;
-    clearUnread({ homePageList, chatFromId: chatId });
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     const { relatedCurrentChat, chatId } = nextProps;
     if (relatedCurrentChat || chatId !== this.props.chatId || this._sendByMe) {
@@ -127,19 +115,6 @@ class GroupChat extends Component {
     return false;
   }
 
-  componentDidMount() {
-    const { allChatContent, chatId } = this.props;
-    const chatItem = allChatContent.groupChat && allChatContent.groupChat.get(chatId);
-    this.clearUnreadHandle();
-    // (产品设计) 当查找没加过的群，点击去没群内容，请求出群内容，避免不了解而加错群
-    if (!chatItem) {
-      window.socket.emit('getOneGroupMsg', { groupId: chatId }, (groupMsgAndInfo) => {
-        this.setState({ groupMsgAndInfo });
-      });
-    }
-    this.scrollToBottom();
-  }
-
   _showPersonalInfo(value) {
     this.setState({ showPersonalInfo: value });
   }
@@ -157,6 +132,27 @@ class GroupChat extends Component {
     });
   }
 
+  componentDidMount() {
+    const {
+      allChatContent, homePageList, clearUnread, chatId
+    } = this.props;
+    const chatItem = allChatContent.groupChat && allChatContent.groupChat.get(chatId);
+    this._chat.clearUnreadHandle({ homePageList, clearUnread, chatFromId: chatId });
+    // (产品设计) 当查找没加过的群，点击去没群内容，请求出群内容，避免不了解而加错群
+    if (!chatItem) {
+      window.socket.emit('getOneGroupMsg', { groupId: chatId }, (groupMsgAndInfo) => {
+        this.setState({ groupMsgAndInfo });
+      });
+    }
+    this._chat.scrollToBottom();
+  }
+
+  componentWillUpdate() {
+    if (this._chat.isScrollInBottom) {
+      this._chat.scrollToBottom();
+    }
+  }
+
   render() {
     const { chatId, allChatContent } = this.props;
     const {

src/components/PrivateChat/index.js

@@ -5,6 +5,7 @@ import InputArea from '../InputArea';
 import ChatContentList from '../ChatContentList';
 import PersonalInfo from '../PersonalInfo';
 import notification from '../Notification';
+import Chat from '../../modules/Chat';
 
 export default class PrivateChat extends Component {
   constructor() {
@@ -15,6 +16,7 @@ export default class PrivateChat extends Component {
     this.state = {
       showPersonalInfo: false
     };
+    this._chat = new Chat();
   }
 
   sendMessage = (inputMsg = '', attachments = []) => {
@@ -38,7 +40,7 @@ export default class PrivateChat extends Component {
     };
     this._sendByMe = true;
     window.socket.emit('sendPrivateMsg', data);
-    this.scrollToBottom();
+    this._chat.scrollToBottom();
     updateAllChatContent({ allChatContent, newChatContent: data, action: 'send' });
     const dataForHomePage = { ...data, name: location.search.split('=')[1] };
     updateHomePageList({ data: dataForHomePage, homePageList, myUserId: userId });
@@ -66,27 +68,20 @@ export default class PrivateChat extends Component {
     });
   }
 
-  scrollToBottom(time = 0) {
-    const ulDom = document.getElementsByClassName('chat-content-list')[0];
-    if (ulDom) {
-      setTimeout(() => {
-        ulDom.scrollTop = ulDom.scrollHeight + 10000;
-      }, time);
-    }
-  }
-
   _showPersonalInfo(value) {
     this.setState({ showPersonalInfo: value });
   }
 
-  clearUnreadHandle() {
+  componentDidMount() {
     const { homePageList, clearUnread, chatId } = this.props;
-    clearUnread({ homePageList, chatFromId: chatId });
+    this._chat.clearUnreadHandle({ homePageList, clearUnread, chatFromId: chatId });
+    this._chat.scrollToBottom();
   }
 
-  componentDidMount() {
-    this.clearUnreadHandle();
-    this.scrollToBottom();
+  componentWillUpdate() {
+    if (this._chat.isScrollInBottom) {
+      this._chat.scrollToBottom();
+    }
   }
 
   shouldComponentUpdate(nextProps, nextState) {

src/modules/Chat/index.js

@@ -0,0 +1,22 @@
+export default class Chat {
+  scrollToBottom(time = 0) {
+    const ulDom = document.getElementsByClassName('chat-content-list')[0];
+    if (ulDom) {
+      setTimeout(() => {
+        ulDom.scrollTop = ulDom.scrollHeight + 10000;
+      }, time);
+    }
+  }
+
+  clearUnreadHandle({ homePageList, clearUnread, chatId }) {
+    clearUnread({ homePageList, chatFromId: chatId });
+  }
+
+  get isScrollInBottom() {
+    const ulDom = document.getElementsByClassName('chat-content-list')[0];
+    if (ulDom) {
+      return (ulDom.scrollTop + ulDom.clientHeight) === ulDom.scrollHeight;
+    }
+    return false;
+  }
+}