Merge branch 'master' into icon-library-change

Author: einann

README.md

@@ -4,7 +4,7 @@
 
 ## Reactjs chat elements
 
-## NOTE: this package not support react-native anymore.
+## NOTE: this package does not support react-native anymore.
 
 ## **[Full Documentation](https://detaysoft.github.io/docs-react-chat-elements/)**, **[Changelog](https://github.com/Detaysoft/react-chat-elements/blob/master/CHANGELOG.md)**
 

example/App.css

@@ -114,3 +114,13 @@ button {
 .rce-mlist {
   padding: 1rem 0;
 }
+
+.chat-item-sub-text {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    column-gap: 3px;
+    margin-top: 3px;
+    opacity: 0.7;
+    color: teal;
+}

example/components/ChatListExample.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'
 import ChatList from '../../src/ChatList/ChatList'
 import SideBar from '../../src/SideBar/SideBar'
 import { IChatItemProps } from '../../src/type'
+import { FaUsers } from 'react-icons/fa'
 
 import { HugeiconsIcon } from '@hugeicons/react';
 // @ts-ignore
@@ -84,21 +85,18 @@ function ChatListExample() {
       showMute: Math.floor((Math.random() * 10) % 2) === 1,
       showVideoCall: Math.floor((Math.random() * 10) % 2) === 1,
       customStatusComponents: [Test],
-      subList: nested && [getRandomLiteChat(), getRandomLiteChat()]
+      subTextElement: Math.floor((Math.random() * 100) % 2) === 1 ? getSubTextElement() : <></>,
     };
   }
 
-  const getRandomLiteChat: any = () => {
-    return {
-      id: String(Math.random()),
-      avatar: `data:image/png;base64,${photo(20)}`,
-      avatarFlexible: true,
-      title: loremIpsum({ count: 2, units: 'words' }),
-      subtitle: loremIpsum({ count: 1, units: 'sentences' }),
-      date: new Date(),
-      unread: Math.floor((Math.random() * 10) % 3),
-    };
-  };
+  const getSubTextElement = () => {
+    return (
+        <div className='chat-item-sub-text'>
+            <FaUsers />
+            <span>{loremIpsum({ count: 2, units: 'words' })}</span>
+        </div>
+    )
+  }
 
   return (
     <div className='chat-list'>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "12.0.16",
+  "version": "12.0.18",
   "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.css

@@ -186,6 +186,10 @@
   height: 18px;
 }
 
+.rce-citem-body--subinfo {
+  display: flex;
+}
+
 .rce-container-citem.subitem .rce-citem {
   height: 40px;
   padding-left: 30px;

src/ChatList/ChatList.tsx

@@ -30,10 +30,6 @@ const ChatList: React.FC<IChatListProps> = props => {
     props.onDragLeave?.(e, id)
   }
 
-  const onExpand: ChatListEvent = (item, index, event) => {
-    if (props.onExpand instanceof Function) props.onExpand(item, index, event)
-  }
-
   return (
     <div className={classNames('rce-container-clist', props.className)}>
       {props.dataSource.map((x, i: number) => (
@@ -53,33 +49,7 @@ const ChatList: React.FC<IChatListProps> = props => {
                 onDragLeave={onDragLeaveMW}
                 onDragComponent={props.onDragComponent}
                 setDragStates={setDragStates}
-                onExpandItem={(e: React.MouseEvent<HTMLElement>) => onExpand(x, i, e)}
-                expanded={x.expanded}
             />
-            {x.subList && x.subList.length > 0 && (
-            <>
-              {x.expanded && x.subList.map((sub, j) => (
-                <ChatItem
-                  {...sub}
-                  className='subitem'
-                  avatarSize='xsmall'
-                  key={`${i}-${j}`}
-                  lazyLoadingImage={props.lazyLoadingImage}
-                  onAvatarError={(e: React.MouseEvent<HTMLElement>) => onAvatarError(sub, j, e)}
-                  onContextMenu={(e: React.MouseEvent<HTMLElement>) => onContextMenu(sub, j, e)}
-                  onClick={(e: React.MouseEvent<HTMLElement>) => onClick(sub, j, e)}
-                  onClickMute={(e: React.MouseEvent<HTMLElement>) => props.onClickMute?.(sub, j, e)}
-                  onClickVideoCall={(e: React.MouseEvent<HTMLElement>) => props.onClickVideoCall?.(sub, j, e)}
-                  onDragOver={props?.onDragOver}
-                  onDragEnter={props?.onDragEnter}
-                  onDrop={props.onDrop}
-                  onDragLeave={onDragLeaveMW}
-                  onDragComponent={props.onDragComponent}
-                  setDragStates={setDragStates}
-                />
-              ))}
-            </>
-          )}
         </>
       ))}
     </div>

src/type.d.ts

@@ -29,9 +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 subList The Chat Item's sub chat items and optional.
- * @prop onExpandItem The Chat Item's expand function onExpandItem(id: string) and optional.
- * @prop expanded The Chat Item's expanded 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
@@ -65,9 +64,8 @@ export interface IChatItemProps {
   onDragComponent?: any
   letterItem?: ILetterItem
   customStatusComponents?: React.ElementType<any>[]
-  subList?: IChatItemProps[]
-  onExpandItem?: Function
-  expanded?: boolean;
+  subTextElement?: JSX.Element
+  miniAvatar?: string
 }
 
 /**
@@ -97,7 +95,6 @@ export interface ILetterItem {
  * @prop onDrop The Chat Item's drop function and optional.
  * @prop onDragLeave The Chat Item's drop leave function and optional.
  * @prop onDragComponent The Chat Item's drag component and optional.
- * @prop onExpand The Chat Item's expand function and optional.
  */
 export interface IChatListProps {
   id: string | number
@@ -115,7 +112,6 @@ export interface IChatListProps {
   onDrop?: Function
   onDragLeave?: Function
   onDragComponent?: Function
-  onExpand?: Function
 }
 
 /**
@@ -1036,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
@@ -1051,6 +1048,7 @@ export interface IAvatarProps {
   statusColorType?: string
   statusColor?: string
   statusText?: string
+  miniImage?: string
 }
 
 /**