video call, mute button attrs

Author: Emre Güdür

README.md

@@ -96,6 +96,8 @@ import { ChatItem } from 'react-chat-elements'
 | statusColorType | badge | string | ChatItem status color type (encircle, badge) |
 | statusText | none | color | ChatItem status text |
 | 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

@@ -198,6 +198,8 @@ export class App extends Component {
                     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"
@@ -319,8 +321,8 @@ export class App extends Component {
                             this.state.list === 'chat' ?
                             <ChatList
                                 dataSource={chatSource}
-                                onClickMute={console.log}
-                                onClickVideoCall={console.log} />
+                                onClickMute={({...props}) => console.log(props)}
+                                onClickVideoCall={({...props}) => console.log(props)} />
                             :
                             <MeetingList
                                 onMeetingClick={console.log}

src/ChatItem/ChatItem.css

@@ -172,4 +172,5 @@
 .rce-citem-body--bottom-tools-item svg {
     width: 18px;
     height: 18px;
+    fill: #575757;
 }

src/ChatItem/ChatItem.js

@@ -13,13 +13,45 @@ 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(
@@ -72,9 +104,9 @@ export class ChatItem extends Component {
                             <div className="rce-citem-body--bottom-title">
                                 {this.props.subtitle}
                             </div>
-                            <div className="rce-citem-body--bottom-tools">
+                            <div className="rce-citem-body--bottom-tools" onMouseEnter={this.handleOnMouseEnter} onMouseLeave={this.handleOnMouseLeave}>
                                 {
-                                    this.props.onClickMute instanceof Function &&
+                                    this.props.showMute &&
                                     <div className="rce-citem-body--bottom-tools-item"
                                         onClick={this.props.onClickMute}>
                                         {
@@ -88,7 +120,7 @@ export class ChatItem extends Component {
                                     </div>
                                 }
                                 {
-                                    this.props.onClickVideoCall instanceof Function &&
+                                    this.props.showVideoCall &&
                                     <div className="rce-citem-body--bottom-tools-item"
                                         onClick={this.props.onClickVideoCall}>
                                         <MdVideoCall />
@@ -97,7 +129,7 @@ export class ChatItem extends Component {
                             </div>
                             <div className="rce-citem-body--bottom-tools-item-hidden-hover">
                                 {
-                                    this.props.onClickMute instanceof Function &&
+                                    this.props.showMute &&
                                     this.props.muted &&
                                     <div className="rce-citem-body--bottom-tools-item">
                                         <MdVolumeOff />
@@ -134,6 +166,8 @@ ChatItem.defaultProps = {
     dateString: null,
     lazyLoadingImage: undefined,
     onAvatarError: () => void(0),
+    showMute: null,
+    showVideoCall: null,
 }
 
 export default ChatItem;

src/ChatList/ChatList.js

@@ -12,16 +12,6 @@ export class ChatList extends Component {
             this.props.onClick(item, i, e);
     }
 
-    onClickMute(item, i, e) {
-        if (this.props.onClickMute instanceof Function)
-            this.props.onClickMute(item, i, e);
-    }
-
-    onClickVideoCall(item, i, e) {
-        if (this.props.onClickVideoCall instanceof Function)
-            this.props.onClickVideoCall(item, i, e);
-    }
-
     onContextMenu(item, i, e) {
         e.preventDefault();
         if (this.props.onContextMenu instanceof Function)
@@ -48,8 +38,8 @@ export class ChatList extends Component {
                             onAvatarError={(e) => this.onAvatarError(x, i, e)}
                             onContextMenu={(e) => this.onContextMenu(x, i, e)}
                             onClick={(e) => this.onClick(x, i, e)}
-                            onClickMute={(e) => this.onClickMute(x, i, e)}
-                            onClickVideoCall={(e) => this.onClickVideoCall(x, i, e)}/>
+                            onClickMute={(e) => this.props.onClickMute(x, i, e)}
+                            onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}/>
                     ))
                 }
             </div>
@@ -61,6 +51,9 @@ ChatList.defaultProps = {
     dataSource: [],
     onClick: null,
     lazyLoadingImage: undefined,
+    mute: null,
+    onClickMute: null,
+    onClickVideoCall: null,
 };
 
 export default ChatList;