Merge pull request #126 from Detaysoft/meet-closable

Closable eklendi ve avatar şartı düzenlendi.

Author: abdurrahmanekr

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

@@ -21,6 +21,12 @@
     background: #fbfbfb;
 }
 
+.rce-mtitem-top {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    justify-content: space-between;
+}
 
 .rce-mtitem-subject {
     padding: 0 10px;
@@ -51,7 +57,7 @@
 }
 
 .rce-mtitem-body--functions {
-    width: 60px;
+    width: 70px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -66,7 +72,7 @@
 }
 
 .rce-mtitem-body--avatars .rce-avatar-container {
-    margin-left: -15px;
+    margin-left: -10px;
     border: 2px solid #fff;
 }
 
@@ -94,6 +100,23 @@
     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;
+    cursor: pointer;
+}
+
 .rce-mtitem-share {
     font-size: 30px;
     display: flex;
@@ -102,9 +125,10 @@
     color: #5ba7c5;
     margin: -10px 0;
     transition: 300ms;
+    position: relative;
+    left: -10px;
 }
 
-
 .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';
 
@@ -31,13 +32,20 @@ export class MeetingItem extends Component {
                 onClick={this.props.onClick}
                 onContextMenu={this.props.onContextMenu}>
                 <div className="rce-mtitem">
-                    <div className="rce-mtitem-subject">
-                        {subject}
+                    <div className="rce-mtitem-top">
+                        <div className="rce-mtitem-subject">
+                            {subject}
+                        </div>
+                        <div
+                            className="rce-mtitem-share"
+                            onClick={this.props.onShareClick}>
+                            <MdLink />
+                        </div>
                     </div>
                     <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 +75,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}>
@@ -81,11 +97,6 @@ export class MeetingItem extends Component {
                         </div>
                     </div>
                     <div className="rce-mtitem-footer">
-                        <div
-                            className="rce-mtitem-share"
-                            onClick={this.props.onShareClick}>
-                            <MdLink />
-                        </div>
                         <span className='rce-mtitem-date'>
                             {dateText}
                         </span>

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>