statusColorType added.

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,8 +3,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    box-sizing: border-box;
-    position: relative;
 }
 
 .rce-avatar-container .rce-avatar {
@@ -72,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

@@ -3,23 +3,10 @@
     display: block;
     overflow: hidden;
     min-width: 240px;
-    position: relative;
 }
 
-.rce-container-citem::after {
-    content: "";
-    width: 85%;
-    height: 1px;
-    background: #f1f1f1;
-    margin: auto;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-.rce-container-citem:last-of-type::after {
-    opacity: 0;
+.rce-container-citem.rce-citem-status-encircle {
+    position: relative;
 }
 
 .rce-citem {
@@ -40,14 +27,27 @@
 }
 
 .rce-citem-avatar {
-    padding: 0 13px 0 13px;
+    position: relative;
+    padding: 0 15px 0 15px;
     justify-content: center;
     display: flex;
     align-items: center;
 }
 
 .rce-citem-status {
+    width: 20px;
+    height: 20px;
+    bottom: 10px;
+    right: 10px;
     position: absolute;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ccc;
+}
+
+.rce-citem-avatar.rce-citem-status-encircle .rce-citem-status {
     left:0;
     right:0;
     top: 0;
@@ -56,9 +56,6 @@
     height: 100%;
     background: transparent;
     margin: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     border-radius: 100%;
 }
 
@@ -83,6 +80,7 @@
     display: flex;
     justify-content: center;
     padding-right: 15px;
+    border-bottom: 1px solid rgba(0,0,0,.05);
     overflow: hidden;
 }
 

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={{boxShadow: `inset 0 0 0 2px ${this.props.statusColor}, inset 0 0 0 5px #FFFFFF`}}>
+                                <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,