Closable eklendi ve avatar şartı düzenlendi.

Author: esracoskun

README.md

@@ -572,7 +572,8 @@ import { MeetingItem } from 'react-chat-elements'
         src: 'https://facebook.github.io/react/img/logo.svg'
     ]}
     onMeetingClick={console.log}
-    onShareClick={console.log}/>
+    onShareClick={console.log}
+    onCloseClick={console.log}/>
 ```
 #### MeetingItem props
 
@@ -583,9 +584,11 @@ import { MeetingItem } from 'react-chat-elements'
 | date | none | date | MeetingItem date |
 | dateString | none | string | MeetingItem represents dateString or timeagojs(now, date) |
 | lazyLoadingImage | none | image path | lazy loading image |
+| closable | true | boolean | MeetingItem closable |
 | onClick | none | function | MeetingItem on click |
 | onMeetingClick | none | function | MeetingItem on meeting click |
 | onShareClick | none | function | MeetingItem on share click |
+| onCloseClick | none | function | MeetingItem on close click |
 | avatars | none | date | MeetingItem avatars |
 | avatarLimit | 5 | date | MeetingItem avatars limit |
 
@@ -594,6 +597,8 @@ import { MeetingItem } from 'react-chat-elements'
 
 ![meetingList-photo](https://user-images.githubusercontent.com/15075759/90499889-ce201b80-e152-11ea-9cdb-7c3ef0e04b4e.png)
 
+![meetingClosable](https://user-images.githubusercontent.com/53093667/90954468-2588f900-e47d-11ea-865e-10522e05f23f.gif)
+
 ```javascript
 import { MeetingList } from 'react-chat-elements'
 
@@ -623,6 +628,7 @@ import { MeetingList } from 'react-chat-elements'
 | onClick | none | function | meeting list item on click (meeting(object) is returned) |
 | onMeetingClick | none | function | meeting list item on meeting click (meeting(object) is returned) |
 | onShareClick | none | function | meeting list item on share click (meeting(object) is returned) |
+| onCloseClick | none | function | meeting list item on close click (meeting(object) is returned) |
 | onContextMenu | none | function | meeting list item on context menu (meeting(object) is returned) |
 | onAvatarError | none | function | meeting list item on error avatar img |
 | lazyLoadingImage | none | image path | lazy loading image |

example/App.js

@@ -198,6 +198,7 @@ export class App extends Component {
                     avatars: Array(this.token() + 2).fill(1).map(x => ({
                         src: `data:image/png;base64,${this.photo()}`,
                     })),
+                    closable: true,
                 };
         }
     }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "10.10.2",
+  "version": "10.10.3",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",

src/MeetingItem/MeetingItem.css

@@ -51,7 +51,7 @@
 }
 
 .rce-mtitem-body--functions {
-    width: 60px;
+    width: 70px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -94,6 +94,22 @@
     transition: 300ms;
 }
 
+.rce-mtitem-closable {
+    font-size: 25px;
+    color: #fff;
+    background:#ff4a4f;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100%;
+    padding: 3px;
+    margin-right: 7px;
+}
+
+.rce-mtitem:hover .rce-mtitem-closable {
+    display: flex;
+}
+
 .rce-mtitem-share {
     font-size: 30px;
     display: flex;
@@ -104,7 +120,6 @@
     transition: 300ms;
 }
 
-
 .rce-mtitem-button:hover,
 .rce-mtitem-share:hover {
     opacity: 0.8;

src/MeetingItem/MeetingItem.js

@@ -3,6 +3,7 @@ import './MeetingItem.css';
 
 import MdVideoCall from 'react-icons/lib/md/video-call';
 import MdLink from 'react-icons/lib/md/link';
+import MdCall from 'react-icons/lib/md/call';
 
 import Avatar from '../Avatar/Avatar';
 
@@ -37,7 +38,7 @@ export class MeetingItem extends Component {
                     <div className="rce-mtitem-body">
                         <div className="rce-mtitem-body--avatars">
                             {
-                                this.props.avatars.slice(0, 5).map((x, i) => x instanceof Avatar ? x : (
+                                this.props.avatars.slice(0, AVATAR_LIMIT).map((x, i) => x instanceof Avatar ? x : (
                                     <Avatar
                                         key={i}
                                         src={x.src}
@@ -67,12 +68,20 @@ export class MeetingItem extends Component {
                                 this.props.avatars.length > AVATAR_LIMIT &&
                                 <div className='rce-avatar-container circle small rce-mtitem-letter'>
                                     <span>
-                                        {'+' + AVATAR_LIMIT}
+                                        {'+' + (this.props.avatars.length - AVATAR_LIMIT)}
                                     </span>
                                 </div>
                             }
                         </div>
                         <div className="rce-mtitem-body--functions">
+                            {
+                                this.props.closable &&
+                                <div
+                                    className="rce-mtitem-closable"
+                                    onClick={this.props.onCloseClick}>
+                                    <MdCall />
+                                </div>
+                            }
                             <div
                                 className='rce-mtitem-button'
                                 onClick={this.props.onMeetingClick}>

src/MeetingList/MeetingList.js

@@ -33,6 +33,11 @@ export class MeetingList extends Component {
             this.props.onShareClick(item, i, e);
     }
 
+    onCloseClick(item, i, e) {
+        if (this.props.onCloseClick instanceof Function)
+            this.props.onCloseClick(item, i, e);
+    }
+
     render() {
         return (
             <div
@@ -49,7 +54,8 @@ export class MeetingList extends Component {
                             onContextMenu={(e) => this.onContextMenu(x, i, e)}
                             onClick={(e) => this.onClick(x, i, e)}
                             onMeetingClick={(e) => this.onMeetingClick(x, i, e)}
-                            onShareClick={(e) => this.onShareClick(x, i, e)}/>
+                            onShareClick={(e) => this.onShareClick(x, i, e)}
+                            onCloseClick={(e) => this.onCloseClick(x, i, e)}/>
                     ))
                 }
             </div>