Mini avatar added.

Author: einan

package.json

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

src/Avatar/Avatar.css

@@ -90,3 +90,15 @@
   width: 35px;
   border-radius: 20px;
 }
+
+.rce-mini-avatar-container {
+    position: absolute;
+    right: 5px;
+    bottom: 2.5px;
+}
+
+.rce-citem-avatar .rce-mini-avatar-container img {
+    width: 35px !important;
+    height: 35px !important;
+    border: 2px solid #FFF !important;
+}

src/Avatar/Avatar.tsx

@@ -58,22 +58,32 @@ const Avatar: React.FC<IAvatarProps> = ({ type = 'default', size = 'default', la
   }
 
   return (
-    // @ts-ignore
-    <div className={classNames('rce-avatar-container', type, size, props.className)}>
-      {props.letterItem ? (
-        <div className='rce-avatar-letter-background' style={{ backgroundColor: stringToColour(props.letterItem.id) }}>
-          <span className='rce-avatar-letter'>{props.letterItem.letter}</span>
+    <>
+        {/* @ts-ignore */}
+        <div className={classNames('rce-avatar-container', type, size, props.className)}>
+            {props.letterItem ? (
+                <div className='rce-avatar-letter-background' style={{ backgroundColor: stringToColour(props.letterItem.id) }}>
+                    <span className='rce-avatar-letter'>{props.letterItem.letter}</span>
+                </div>
+            ) : (
+                <img
+                    alt={props.alt}
+                    src={src}
+                    onError={props.onError}
+                    className={classNames('rce-avatar', { 'rce-avatar-lazy': isLazyImage })}
+                />
+            )}
+            {props.sideElement}
         </div>
-      ) : (
-        <img
-          alt={props.alt}
-          src={src}
-          onError={props.onError}
-          className={classNames('rce-avatar', { 'rce-avatar-lazy': isLazyImage })}
-        />
-      )}
-      {props.sideElement}
-    </div>
+
+        {props.miniImage && (
+            <div className='rce-mini-avatar-container'>
+                <img
+                    src={props.miniImage}
+                />
+            </div>
+        )}
+    </>
   )
 }
 export default Avatar

src/ChatItem/ChatItem.tsx

@@ -109,6 +109,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
                         onError={onAvatarError}
                         lazyLoadingImage={lazyLoadingImage}
                         type={classNames('circle', { 'flexible': avatarFlexible })}
+                        miniImage={props.miniAvatar}
                     />
                 </div>,
                 <div key={'rce-citem-body'} className='rce-citem-body'>

src/type.d.ts

@@ -29,7 +29,8 @@ import React from 'react'
  * @prop onDragLeave The Chat Item's drop leave function and optional.
  * @prop onDragComponent The Chat Item's drag component and optional.
  * @prop letterItem The Chat Item's avatar letterItem and optional.
- * @prop subTextElement The Chat Item's sub text element and optional
+ * @prop subTextElement The Chat Item's sub text element and optional.
+ * @prop miniAvatar The Chat Item's mini avatar and optional.
  */
 export interface IChatItemProps {
   id: string | number
@@ -64,6 +65,7 @@ export interface IChatItemProps {
   letterItem?: ILetterItem
   customStatusComponents?: React.ElementType<any>[]
   subTextElement?: JSX.Element
+  miniAvatar?: string
 }
 
 /**
@@ -1030,6 +1032,7 @@ export interface IPopupProps {
  * @prop statusColorType The Avatar's status color type and optional.
  * @prop statusColor The Avatar's status color and optional.
  * @prop statusText The Avatar's status text and optional.
+ * @prop miniImage The Avatar's mini image and optional.
  */
 export interface IAvatarProps {
   src: string
@@ -1045,6 +1048,7 @@ export interface IAvatarProps {
   statusColorType?: string
   statusColor?: string
   statusText?: string
+  miniImage?: string
 }
 
 /**