Merge pull request #148 from Detaysoft/chat-list-tool

added mute and video call button to chatlist

Author: esracoskun

README.md

@@ -95,7 +95,11 @@ import { ChatItem } from 'react-chat-elements'
 | statusColor | none | color | ChatItem status color |
 | statusColorType | badge | string | ChatItem status color type (encircle, badge) |
 | statusText | none | color | ChatItem status text |
-| lazyLoadingImage | none | image path | lazy loading image |
+| muted | false | bool | chat mute info |
+| showMute | false | bool | chat mute button visibilty |
+| showVideoCall | false | bool | chat video call button visibilty |
+| onClickMute | none | function | mute button |
+| onClickVideoCall | none | function | video call button |
 
 
 

example/App.js

@@ -197,6 +197,9 @@ export class App extends Component {
                     date: new Date(),
                     subtitle: loremIpsum({ count: 1, units: 'sentences' }),
                     unread: parseInt(Math.random() * 10 % 3),
+                    muted: parseInt(Math.random() * 10 % 2) === 1,
+                    showMute: parseInt(Math.random() * 10 % 2) === 1,
+                    showVideoCall: parseInt(Math.random() * 10 % 2) === 1,
                     dropdownMenu: (
                         <Dropdown
                             animationPosition="norteast"
@@ -317,7 +320,9 @@ export class App extends Component {
                         center={
                             this.state.list === 'chat' ?
                             <ChatList
-                                dataSource={chatSource} />
+                                dataSource={chatSource}
+                                onClickMute={({...props}) => console.log(props)}
+                                onClickVideoCall={({...props}) => console.log(props)} />
                             :
                             <MeetingList
                                 onMeetingClick={console.log}

package.json

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

src/ChatItem/ChatItem.css

@@ -130,3 +130,47 @@
     border-radius: 100%;
     background: red;
 }
+
+.rce-citem-body--bottom-tools {
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    display: flex;
+    height: 0;
+    opacity: 0;
+    position: absolute;
+    left: -999px;
+    transition: height .5s ease, opacity 1s ease;
+}
+
+.rce-citem:hover .rce-citem-body--bottom-tools {
+    height: 100%;
+    opacity: 1;
+    position: relative;
+    left: 0;
+}
+
+.rce-citem-body--bottom-tools-item-hidden-hover {
+    height: 100%;
+    opacity: 0.3;
+    transition: .5s ease;
+}
+
+.rce-citem:hover .rce-citem-body--bottom-tools-item-hidden-hover {
+    height: 0;
+    opacity: 0;
+    position: absolute;
+    left: -999px;
+    transition: .5s ease;
+}
+
+.rce-citem-body--bottom-tools-item {
+    width: 18px;
+    height: 18px;
+}
+
+.rce-citem-body--bottom-tools-item svg {
+    width: 18px;
+    height: 18px;
+    fill: #575757;
+}

src/ChatItem/ChatItem.js

@@ -8,17 +8,50 @@ import {
 } from'timeago.js';
 
 import classNames from 'classnames';
-import MdBlock from 'react-icons/lib/md/block';
+
+import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/lib/md';
 
 export class ChatItem extends Component {
 
+    constructor(p) {
+        super(p);
+        this.state = {
+            onHoverTool: false,
+        };
+
+        this.handleOnMouseEnter = this.handleOnMouseEnter.bind(this);
+        this.handleOnMouseLeave = this.handleOnMouseLeave.bind(this);
+        this.handleOnClick = this.handleOnClick.bind(this);
+    }
+
+    handleOnMouseEnter() {
+        this.setState({
+            onHoverTool: true,
+        });
+    }
+
+    handleOnMouseLeave() {
+        this.setState({
+            onHoverTool: false,
+        });
+    }
+
+    handleOnClick(e) {
+        e.preventDefault();
+
+        if (this.state.onHoverTool === true)
+            return;
+
+        this.props.onClick();
+    }
+
     render() {
         const statusColorType = this.props.statusColorType;
 
         return (
             <div
                 className={classNames('rce-container-citem', this.props.className)}
-                onClick={this.props.onClick}
+                onClick={this.handleOnClick}
                 onContextMenu={this.props.onContextMenu}>
                 <div className="rce-citem">
                     <div className={classNames(
@@ -71,6 +104,38 @@ export class ChatItem extends Component {
                             <div className="rce-citem-body--bottom-title">
                                 {this.props.subtitle}
                             </div>
+                            <div className="rce-citem-body--bottom-tools" onMouseEnter={this.handleOnMouseEnter} onMouseLeave={this.handleOnMouseLeave}>
+                                {
+                                    this.props.showMute &&
+                                    <div className="rce-citem-body--bottom-tools-item"
+                                        onClick={this.props.onClickMute}>
+                                        {
+                                            this.props.muted === true &&
+                                            <MdVolumeOff />
+                                        }
+                                        {
+                                            this.props.muted === false &&
+                                            <MdVolumeUp />
+                                        }
+                                    </div>
+                                }
+                                {
+                                    this.props.showVideoCall &&
+                                    <div className="rce-citem-body--bottom-tools-item"
+                                        onClick={this.props.onClickVideoCall}>
+                                        <MdVideoCall />
+                                    </div>
+                                }
+                            </div>
+                            <div className="rce-citem-body--bottom-tools-item-hidden-hover">
+                                {
+                                    this.props.showMute &&
+                                    this.props.muted &&
+                                    <div className="rce-citem-body--bottom-tools-item">
+                                        <MdVolumeOff />
+                                    </div>
+                                }
+                            </div>
                             <div className="rce-citem-body--bottom-status">
                                 {
                                     this.props.unread > 0 &&
@@ -101,6 +166,8 @@ ChatItem.defaultProps = {
     dateString: null,
     lazyLoadingImage: undefined,
     onAvatarError: () => void(0),
+    showMute: null,
+    showVideoCall: null,
 }
 
 export default ChatItem;

src/ChatList/ChatList.js

@@ -37,7 +37,9 @@ export class ChatList extends Component {
                             {...x}
                             onAvatarError={(e) => this.onAvatarError(x, i, e)}
                             onContextMenu={(e) => this.onContextMenu(x, i, e)}
-                            onClick={(e) => this.onClick(x, i, e)}/>
+                            onClick={(e) => this.onClick(x, i, e)}
+                            onClickMute={(e) => this.props.onClickMute(x, i, e)}
+                            onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}/>
                     ))
                 }
             </div>
@@ -49,6 +51,9 @@ ChatList.defaultProps = {
     dataSource: [],
     onClick: null,
     lazyLoadingImage: undefined,
+    mute: null,
+    onClickMute: null,
+    onClickVideoCall: null,
 };
 
 export default ChatList;