Messages focus feature added.

kubraturan · abdurrahmanekr · commit eabdf86cd1a2 · 2019-06-20T17:43:58.000+03:00
diff --git a/README.md b/README.md
@@ -145,6 +145,7 @@ import { MessageBox } from 'react-chat-elements'
 | avatar | none | url | message box avatar url |
 | renderAddCmp | none | function (component) | adding custom components to message box |
 | copiableDate | false | boolean | message box date text copiable |
+| messageFocus | false | boolean | used in message focus feature in MessageList component, makes style of the component focused |
 
 
 ## SystemMessage Component
@@ -204,6 +205,9 @@ import { MessageList } from 'react-chat-elements'
 | downButtonBadge | none | boolean | message list downButton badge content |
 | onDownButtonClick | none | function | message list onDownButtonClick |
 | onContextMenu | none | function | message list item onContextMenu event, gets 3 parameters: message item, index of item, event |
+| focusedMessage | none | string | id of a message to focus on, this prop makes the MessageList scroll into MessageBox item of given message id |
+| scrollBlock | 'center' | string | used in scroll into focusedMessage as value of block property in parameter of scrollIntoView function |
+
 
 ## ChatList Component
 
diff --git a/src/MessageBox/MessageBox.css b/src/MessageBox/MessageBox.css
@@ -64,6 +64,19 @@
     min-width: 140px;
 }
 
+.rce-mbox.message-focus {
+    animation-iteration-count: 4;
+    -webkit-animation-iteration-count: 5;
+    -webkit-animation-duration: 1s;
+    animation-name: message-box-default-focus;
+    animation-duration: 1s;
+}
+
+@-webkit-keyframes message-box-default-focus {
+    from {background-color: #fff;}
+    to {background-color: #dfdfdf;}
+}
+
 .rce-mbox-body {
     margin: 0;
     padding: 0;
@@ -78,6 +91,19 @@
     border-top-left-radius: 5px;
 }
 
+.rce-mbox.rce-mbox-right.message-focus {
+    animation-iteration-count: 4;
+    -webkit-animation-iteration-count: 5;
+    -webkit-animation-duration: 1s;
+    animation-name: message-box-right-focus;
+    animation-duration: 1s;
+}
+
+@-webkit-keyframes message-box-right-focus {
+    from {background-color: #d4f1fb;}
+    to {background-color: #b8dae6;}
+}
+
 .rce-mbox-text {
     font-size: 13.6px;
     word-break: break-word;
@@ -134,6 +160,19 @@
     filter: drop-shadow( 2px 0px 1px rgba(0, 0, 0, .2));
 }
 
+.rce-mbox-right-notch.message-focus {
+    animation-iteration-count: 4;
+    -webkit-animation-iteration-count: 5;
+    -webkit-animation-duration: 1s;
+    animation-name: message-right-notch-focus;
+    animation-duration: 1s;
+}
+
+@-webkit-keyframes message-right-notch-focus {
+    from {fill: #d4f1fb;}
+    to {fill: #b8dae6;}
+}
+
 .rce-mbox-left-notch {
     position: absolute;
     left: -14px;
@@ -143,6 +182,19 @@
     fill: white;
 }
 
+.rce-mbox-left-notch.message-focus {
+    animation-iteration-count: 4;
+    -webkit-animation-iteration-count: 5;
+    -webkit-animation-duration: 1s;
+    animation-name: message-left-notch-focus;
+    animation-duration: 1s;
+}
+
+@-webkit-keyframes message-left-notch-focus {
+    from {fill: #fff;}
+    to {fill: #dfdfdf;}
+}
+
 .rce-mbox-title {
     margin: 0;
     margin-bottom: 8px;
@@ -170,4 +222,4 @@
 
 .rce-mbox-title > .rce-avatar-container {
     margin-right: 5px;
-}
+}
diff --git a/src/MessageBox/MessageBox.js b/src/MessageBox/MessageBox.js
@@ -50,7 +50,8 @@ export class MessageBox extends Component {
                             className={classNames(
                                 positionCls,
                                 {'rce-mbox--clear-padding': thatAbsoluteTime},
-                                {'rce-mbox--clear-notch': !this.props.notch}
+                                {'rce-mbox--clear-notch': !this.props.notch},
+                                { 'message-focus': this.props.messageFocus},
                             )}>
                             <div
                                 className='rce-mbox-body'
@@ -187,12 +188,18 @@ export class MessageBox extends Component {
                             {
                                 this.props.notch &&
                                 (this.props.position === 'right' ?
-                                    <svg className="rce-mbox-right-notch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                    <svg className={classNames(
+                                        "rce-mbox-right-notch",
+                                        { 'message-focus': this.props.messageFocus},
+                                    )} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                         <path d="M0 0v20L20 0" />
                                     </svg>
                                     :
                                     <div>
-                                        <svg className="rce-mbox-left-notch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                        <svg className={classNames(
+                                                "rce-mbox-left-notch",
+                                                { 'message-focus': this.props.messageFocus},
+                                            )} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                             <defs>
                                                 <filter id="filter1" x="0" y="0">
                                                     <feOffset result="offOut" in="SourceAlpha" dx="-2" dy="-5" />
@@ -234,6 +241,7 @@ MessageBox.defaultProps = {
     renderAddCmp: null,
     copiableDate: false,
     onContextMenu: null,
+    messageFocus: false,
 };
 
 
diff --git a/src/MessageList/MessageList.js b/src/MessageList/MessageList.js
@@ -1,7 +1,9 @@
-import React, { Component } from 'react';
+import React, { Component, } from 'react';
 import './MessageList.css';
 
-import MessageBox from '../MessageBox/MessageBox';
+import {
+    MessageBox,
+} from '../MessageBox/MessageBox';
 
 import FaChevronDown from 'react-icons/lib/fa/chevron-down';
 
@@ -14,10 +16,24 @@ export class MessageList extends Component {
         this.state = {
             scrollBottom: 0,
             downButton: false,
+            messageFocus: false,
         };
 
         this.loadRef = this.loadRef.bind(this);
+        this.createReferenceOfMessage = this.createReferenceOfMessage.bind(this);
         this.onScroll = this.onScroll.bind(this);
+        this.messageRefs = [];
+    }
+
+    scrollIntoMessage(focusedMessage) {
+        var message = this.messageRefs.find(x => x.messageId === focusedMessage);
+        if (message !== undefined) {
+            this.setState({
+                messageFocus: true,
+            }, () => {
+                message.ref.scrollIntoView({block: this.props.scrollBlock, behavior: 'smooth',});
+            });
+        }
     }
 
     checkScroll() {
@@ -35,12 +51,15 @@ export class MessageList extends Component {
         }
     }
 
-    componentWillReceiveProps() {
+    componentWillReceiveProps(nextProps) {
         if (!this.mlistRef)
             return;
         this.setState({
             scrollBottom: this.getBottom(this.mlistRef),
         }, this.checkScroll.bind(this));
+
+        if (nextProps.focusedMessage)
+            this.scrollIntoMessage(nextProps.focusedMessage);
     }
 
     getBottom(e) {
@@ -83,6 +102,22 @@ export class MessageList extends Component {
             this.props.cmpRef(ref);
     }
 
+    createReferenceOfMessage(ref, messageId) {
+        var check = this.messageRefs.find(res => res.messageId === messageId);
+
+        if (check !== undefined) {
+            var index = this.messageRefs.indexOf(check);
+            if (index !== -1) {
+                this.messageRefs.splice(index, 1);
+            }
+        }
+
+        this.messageRefs.push({
+            ref: ref,
+            messageId: messageId,
+        });
+    }
+
     onScroll(e) {
         var bottom = this.getBottom(e.target);
         this.state.scrollBottom = bottom;
@@ -92,15 +127,15 @@ export class MessageList extends Component {
                 this.setState({
                     downButton: true,
                     scrollBottom: bottom,
-                })
+                });
             }
         } else {
             if (this.state.downButton !== false) {
                 this.state.downButton = false;
                 this.setState({
                     downButton: false,
                     scrollBottom: bottom,
-                })
+                });
             }
         }
 
@@ -128,16 +163,22 @@ export class MessageList extends Component {
                     className='rce-mlist'>
                     {
                         this.props.dataSource.map((x, i) => (
-                            <MessageBox
-                                key={i}
-                                {...x}
-                                onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
-                                onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
-                                onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
-                                onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
-                                onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
-                                onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
+                            <div
+                                ref={ref =>  this.createReferenceOfMessage(ref, x.id)}>
+                                <MessageBox
+                                    key={i}
+                                    {...x}
+                                    focusedMessage={this.props.focusedMessage}
+                                    messageFocus={x.id === this.props.focusedMessage && this.state.messageFocus}
+                                    onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
+                                    onFocus={this.props.onFocus && ((e) => this.onFocus(x, i, e)) }
+                                    onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
+                                    onTitleClick={this.props.onTitleClick && ((e) => this.onTitleClick(x, i, e))}
+                                    onForwardClick={this.props.onForwardClick && ((e) => this.onForwardClick(x, i, e))}
+                                    onClick={this.props.onClick && ((e) => this.onClick(x, i, e))}
+                                    onContextMenu={this.props.onContextMenu && ((e) => this.onContextMenu(x, i, e))}
                                 />
+                            </div>
                         ))
                     }
                 </div>
@@ -175,6 +216,8 @@ MessageList.defaultProps = {
     toBottomHeight: 300,
     downButton: true,
     downButtonBadge: null,
+    focusedMessage: null,
+    scrollBlock: 'center',
 };
 
 export default MessageList;
