Merge pull request #133 from Detaysoft/meeting-message-title

Meeting message avatar limit has been added.

Author: abdurrahmanekr

example/App.js

@@ -127,7 +127,9 @@ export class App extends Component {
                                 title: loremIpsum({ count: 2, units: 'words' }),
                                 avatars: Array(this.token() + 2).fill(1).map(x => ({
                                     src: `data:image/png;base64,${this.photo()}`,
+                                    title: "react, rce"
                                 })),
+                                avatarsLimit: 5,
                             },
                             record: {
                                 avatar: `data:image/png;base64,${this.photo()}`,

src/MeetingMessage/MeetingMessage.css

@@ -229,6 +229,74 @@
 
 .rce-mitem-avatar {
     padding: 0 3px 0 0;
+    display: flex;
+}
+
+.rce-mitem-tooltip {
+    display: inline;
+    position: relative;
+}
+
+.rce-mitem-tooltip-text {
+    margin: 5px
+}
+
+.rce-mitem-tooltip-text:after{
+    content: "";
+    left: 15%;
+    top: 29px;
+    position: absolute;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 11px solid #444;
+    opacity: 0;
+    transition: opacity 0.8s linear 0.2s;
+  }
+
+.rce-mitem-tooltip[tooltip]:after {
+    display: flex;
+    justify-content: center;
+    background: #444;
+    border-radius: 8px;
+    color: #fff;
+    content: attr(tooltip);
+    font-size: 14px;
+    padding: 5px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.8s linear 0.2s;
+    min-width: 415px;
+    max-width: 415px;
+    top: 40px;
+    right: -13px;
+    z-index: 1;
+}
+
+.rce-mitem-tooltip-text:hover:after {
+    opacity: 1;
+    transition: opacity 0.8s linear;
+}
+
+.rce-mitem-tooltip[tooltip]:hover:after {
+    opacity: 1;
+    transition: opacity 0.8s linear  0.1s;
+}
+
+.rce-mitem-tooltip[tooltip]:hover .rce-mitem-tooltip-text:after {
+    opacity: 1;
+}
+
+.rce-mitem-length {
+    color: #fff;
+    font-size: 14px;
+    background: #e48989;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    border-radius: 50%;
 }
 
 .rce-mitem-avatar img {

src/MeetingMessage/MeetingMessage.js

@@ -165,13 +165,25 @@ export class MeetingMessage extends Component {
                                                         </div>
                                                         <div className="rce-mitem-avatar-content">
                                                             {
-                                                                x.event.avatars &&
-                                                                x.event.avatars.map((x, i) => x instanceof Avatar ? x : (
-                                                                    <div key={i} className="rce-mitem-avatar">
-                                                                        <Avatar
-                                                                            src={x.src}/>
-                                                                    </div>
-                                                                ))
+                                                                <div className="rce-mitem-avatar">
+                                                                    {
+                                                                        x.event.avatars &&
+                                                                        x.event.avatars.slice(0, x.event.avatarsLimit).map((x, i) => x instanceof Avatar ? x : (
+                                                                            <Avatar
+                                                                                key={i}
+                                                                                src={x.src} />
+                                                                        ))
+                                                                    }
+                                                                    {
+                                                                        x.event.avatars && x.event.avatarsLimit &&
+                                                                        x.event.avatars.length > x.event.avatarsLimit &&
+                                                                        <div className='rce-mitem-length rce-mitem-tooltip' tooltip={x.event.avatars.slice(x.event.avatarsLimit, x.event.avatars.length).map(avatar => avatar.title).join(",")}>
+                                                                            <span className="rce-mitem-tooltip-text" >
+                                                                                {'+' + (x.event.avatars.length - x.event.avatarsLimit)}
+                                                                            </span>
+                                                                        </div>
+                                                                    }
+                                                                </div>
                                                             }
                                                         </div>
                                                         {

src/MessageBox/MessageBox.css

@@ -1,7 +1,7 @@
 .rce-container-mbox {
     flex-direction: column;
     display: block;
-    overflow: hidden;
+    overflow-x: hidden;
     min-width: 200px;
 }