From 4fd2c44f73cd92235468ae94b35d24394ec446bf Mon Sep 17 00:00:00 2001 From: aermin Date: Wed, 27 Feb 2019 19:23:10 +0800 Subject: [PATCH] improve&refactor: abstract the common chat module and improve scrollToBottom fn usage --- README.md | 4 ++- src/components/ChatItem/style.scss | 9 +++-- src/components/GroupChat/index.js | 52 +++++++++++++---------------- src/components/PrivateChat/index.js | 25 ++++++-------- src/modules/Chat/index.js | 22 ++++++++++++ 5 files changed, 65 insertions(+), 47 deletions(-) create mode 100644 src/modules/Chat/index.js diff --git a/README.md b/README.md index f3067aa83..30b8eee41 100644 --- a/README.md +++ b/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 diff --git a/src/components/ChatItem/style.scss b/src/components/ChatItem/style.scss index 65ac3ed08..dbd1d440c 100644 --- a/src/components/ChatItem/style.scss +++ b/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; - } + } } } \ No newline at end of file diff --git a/src/components/GroupChat/index.js b/src/components/GroupChat/index.js index 4ce5adcca..29516a43b 100644 --- a/src/components/GroupChat/index.js +++ b/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 { diff --git a/src/components/PrivateChat/index.js b/src/components/PrivateChat/index.js index f77306fd1..4c359f2d9 100644 --- a/src/components/PrivateChat/index.js +++ b/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) { diff --git a/src/modules/Chat/index.js b/src/modules/Chat/index.js new file mode 100644 index 000000000..e33082269 --- /dev/null +++ b/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; + } +}