Merge pull request #103 from Detaysoft/chat-item-status

the status color shape  of chat item has been changed to circular shape

Author: abdurrahmanekr

README.md

@@ -91,6 +91,7 @@ import { ChatItem } from 'react-chat-elements'
 | onClick | none | function | ChatItem on click |
 | onContextMenu | none | function | ChatItem on context menu |
 | 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 |
 
@@ -522,4 +523,4 @@ import { SpotifyMessage } from 'react-chat-elements'
 | view | list | string | spotify view type (list or coverart) |
 | data | {} | object | message data |
 | width | 300 | int | spotify embed width |
-| height | 380 | int | spotify embed height |
+| height | 380 | int | spotify embed height |

example/App.js

@@ -127,6 +127,7 @@ export class App extends Component {
                     avatar: `data:image/png;base64,${this.photo()}`,
                     avatarFlexible: true,
                     statusColor: 'lightgreen',
+                    statusColorType: parseInt(Math.random() * 100 % 2) === 1 ? 'encircle' : undefined,
                     alt: loremIpsum({ count: 2, units: 'words' }),
                     title: loremIpsum({ count: 2, units: 'words' }),
                     date: new Date(),

src/Avatar/Avatar.css

@@ -3,7 +3,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    overflow: hidden;
 }
 
 .rce-avatar-container .rce-avatar {
@@ -71,3 +70,8 @@
 .rce-avatar-lazy {
     animation: avatarLazy normal 2s infinite ease-in-out;
 }
+
+.rce-avatar-container.rce-citem-avatar-encircle-status {
+    box-sizing: border-box;
+    position: relative;
+}

src/ChatItem/ChatItem.css

@@ -5,6 +5,10 @@
     min-width: 240px;
 }
 
+.rce-container-citem.rce-citem-status-encircle {
+    position: relative;
+}
+
 .rce-citem {
     position: relative;
     background: white;
@@ -43,6 +47,18 @@
     background: #ccc;
 }
 
+.rce-citem-avatar.rce-citem-status-encircle .rce-citem-status {
+    left:0;
+    right:0;
+    top: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    margin: auto;
+    border-radius: 100%;
+}
+
 .rce-citem-avatar img {
     width: 50px;
     height: 50px;

src/ChatItem/ChatItem.js

@@ -12,20 +12,34 @@ import classNames from 'classnames';
 export class ChatItem extends Component {
 
     render() {
+        const statusColorType = this.props.statusColorType;
+
         return (
             <div
                 className={classNames('rce-container-citem', this.props.className)}
                 onClick={this.props.onClick}
                 onContextMenu={this.props.onContextMenu}>
                 <div className="rce-citem">
-                    <div className="rce-citem-avatar">
+                    <div className={classNames(
+                            "rce-citem-avatar",
+                            {
+                                'rce-citem-status-encircle': statusColorType === 'encircle',
+                            }
+                        )}>
                         <Avatar
                             src={this.props.avatar}
                             alt={this.props.alt}
+                            className={statusColorType === 'encircle' ? 'rce-citem-avatar-encircle-status' : ''}
                             size="large"
                             sideElement={
                                 this.props.statusColor &&
-                                <span className='rce-citem-status' style={{backgroundColor: this.props.statusColor}}>
+                                <span
+                                    className='rce-citem-status'
+                                    style={statusColorType === 'encircle' ? {
+                                        boxShadow: `inset 0 0 0 2px ${this.props.statusColor}, inset 0 0 0 5px #FFFFFF`
+                                    } : {
+                                        backgroundColor: this.props.statusColor,
+                                    }}>
                                     {this.props.statusText}
                                 </span>
                             }
@@ -80,6 +94,7 @@ ChatItem.defaultProps = {
     date: new Date(),
     unread: 0,
     statusColor: null,
+    statusColorType: 'badge',
     statusText: null,
     dateString: null,
     lazyLoadingImage: undefined,