diff --git a/README.md b/README.md index d9eaea3f..a3801630 100644 --- a/README.md +++ b/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 | \ No newline at end of file diff --git a/example/App.js b/example/App.js index 69859f25..610b6d28 100644 --- a/example/App.js +++ b/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, }; } } diff --git a/package.json b/package.json index 62c7722b..f60a5042 100644 --- a/package.json +++ b/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 ", "main": "dist/main.js", diff --git a/src/MeetingItem/MeetingItem.css b/src/MeetingItem/MeetingItem.css index 70d20249..fcd964c7 100644 --- a/src/MeetingItem/MeetingItem.css +++ b/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; diff --git a/src/MeetingItem/MeetingItem.js b/src/MeetingItem/MeetingItem.js index 4514fb60..1dd6ef24 100644 --- a/src/MeetingItem/MeetingItem.js +++ b/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}>
-
- {subject} +
+
+ {subject} +
+
+ +
{ - 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_LIMIT &&
- {'+' + AVATAR_LIMIT} + {'+' + (this.props.avatars.length - AVATAR_LIMIT)}
}
+ { + this.props.closable && +
+ +
+ }
@@ -81,11 +97,6 @@ export class MeetingItem extends Component {
-
- -
{dateText} diff --git a/src/MeetingList/MeetingList.js b/src/MeetingList/MeetingList.js index 1457d373..fc8cfd22 100644 --- a/src/MeetingList/MeetingList.js +++ b/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 (
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)}/> )) }