Skip to content

Commit 763589e

Browse files
einanneinann
authored
Merge pull request #226 from Detaysoft/subtextinfo
Sub text added to chat item.
2 parents f2efe01 + cf9ee54 commit 763589e

7 files changed

Lines changed: 55 additions & 85 deletions

File tree

‎example/App.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,13 @@ button {
114114
.rce-mlist {
115115
padding: 1rem 0;
116116
}
117+
118+
.chat-item-sub-text {
119+
display: flex;
120+
align-items: center;
121+
font-size: 12px;
122+
column-gap: 3px;
123+
margin-top: 3px;
124+
opacity: 0.7;
125+
color: teal;
126+
}

‎example/components/ChatListExample.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BsListTask } from 'react-icons/bs'
55
import ChatList from '../../src/ChatList/ChatList'
66
import SideBar from '../../src/SideBar/SideBar'
77
import { IChatItemProps } from '../../src/type'
8+
import { FaUsers } from 'react-icons/fa'
89

910
function Test(params: any) {
1011
return (
@@ -81,21 +82,18 @@ function ChatListExample() {
8182
showMute: Math.floor((Math.random() * 10) % 2) === 1,
8283
showVideoCall: Math.floor((Math.random() * 10) % 2) === 1,
8384
customStatusComponents: [Test],
84-
subList: nested && [getRandomLiteChat(), getRandomLiteChat()]
85+
subTextElement: Math.floor((Math.random() * 100) % 2) === 1 ? getSubTextElement() : <></>,
8586
};
8687
}
8788

88-
const getRandomLiteChat: any = () => {
89-
return {
90-
id: String(Math.random()),
91-
avatar: `data:image/png;base64,${photo(20)}`,
92-
avatarFlexible: true,
93-
title: loremIpsum({ count: 2, units: 'words' }),
94-
subtitle: loremIpsum({ count: 1, units: 'sentences' }),
95-
date: new Date(),
96-
unread: Math.floor((Math.random() * 10) % 3),
97-
};
98-
};
89+
const getSubTextElement = () => {
90+
return (
91+
<div className='chat-item-sub-text'>
92+
<FaUsers />
93+
<span>{loremIpsum({ count: 2, units: 'words' })}</span>
94+
</div>
95+
)
96+
}
9997

10098
return (
10199
<div className='chat-list'>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-chat-elements",
3-
"version": "12.0.15",
3+
"version": "12.0.16",
44
"description": "Reactjs chat components",
55
"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
66
"main": "dist/main.js",

‎src/ChatItem/ChatItem.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,10 @@
187187
fill: #575757;
188188
}
189189

190+
.rce-citem-body--subinfo {
191+
display: flex;
192+
}
193+
190194
.rce-container-citem.subitem .rce-citem {
191195
height: 40px;
192196
padding-left: 30px;

‎src/ChatItem/ChatItem.tsx‎

Lines changed: 28 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import classNames from 'classnames'
99

1010
import { MdVideoCall, MdVolumeOff, MdVolumeUp } from 'react-icons/md'
1111
import { IChatItemProps } from '../type'
12-
import { FaArrowDown, FaArrowUp } from 'react-icons/fa'
1312

1413
const ChatItem: React.FC<IChatItemProps> = ({
1514
avatarFlexible = false,
@@ -66,12 +65,6 @@ const ChatItem: React.FC<IChatItemProps> = ({
6665
if (onDrag) setOnDrag(false)
6766
}
6867

69-
const onExpandItem = (e: React.MouseEvent, id: string | number) => {
70-
e.preventDefault();
71-
e.stopPropagation();
72-
if (props.onExpandItem instanceof Function) props.onExpandItem(id);
73-
}
74-
7568
return (
7669
<>
7770
<div
@@ -117,43 +110,44 @@ const ChatItem: React.FC<IChatItemProps> = ({
117110
lazyLoadingImage={lazyLoadingImage}
118111
type={classNames('circle', { 'flexible': avatarFlexible })}
119112
/>
120-
{props.subList && props.subList.length > 0 && (
121-
<button className='rce-citem-expand-button' onClick={(e) => onExpandItem(e, props.id)}>
122-
{props.expanded ? <FaArrowUp /> : <FaArrowDown />}
123-
</button>
124-
)}
125113
</div>,
126114
<div key={'rce-citem-body'} className='rce-citem-body'>
127115
<div className='rce-citem-body--top'>
128-
<div className='rce-citem-body--top-title'>{props.title}</div>
129-
<div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
116+
<div className='rce-citem-body--top-title'>{props.title}</div>
117+
<div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
130118
</div>
131119

132120
<div className='rce-citem-body--bottom'>
133-
<div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
134-
<div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
135-
{props.showMute && (
136-
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
137-
{props.muted === true && <MdVolumeOff />}
138-
{props.muted === false && <MdVolumeUp />}
121+
<div className='rce-citem-body--bottom-title'>{props.subtitle}</div>
122+
<div className='rce-citem-body--bottom-tools' onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
123+
{props.showMute && (
124+
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickMute}>
125+
{props.muted === true && <MdVolumeOff />}
126+
{props.muted === false && <MdVolumeUp />}
127+
</div>
128+
)}
129+
{props.showVideoCall && (
130+
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
131+
<MdVideoCall />
132+
</div>
133+
)}
139134
</div>
140-
)}
141-
{props.showVideoCall && (
142-
<div className='rce-citem-body--bottom-tools-item' onClick={props.onClickVideoCall}>
143-
<MdVideoCall />
135+
<div className='rce-citem-body--bottom-tools-item-hidden-hover'>
136+
{props.showMute && props.muted && (
137+
<div className='rce-citem-body--bottom-tools-item'>
138+
<MdVolumeOff />
139+
</div>
140+
)}
144141
</div>
145-
)}
142+
<div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
143+
{props.customStatusComponents !== undefined ? props.customStatusComponents.map(Item => <Item />) : null}
146144
</div>
147-
<div className='rce-citem-body--bottom-tools-item-hidden-hover'>
148-
{props.showMute && props.muted && (
149-
<div className='rce-citem-body--bottom-tools-item'>
150-
<MdVolumeOff />
145+
146+
{props.subTextElement && (
147+
<div className='rce-citem-body--subinfo'>
148+
{props.subTextElement}
151149
</div>
152-
)}
153-
</div>
154-
<div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
155-
{props.customStatusComponents !== undefined ? props.customStatusComponents.map(Item => <Item />) : null}
156-
</div>
150+
)}
157151
</div>,
158152
]}
159153
</div>

‎src/ChatList/ChatList.tsx‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ const ChatList: React.FC<IChatListProps> = props => {
3030
props.onDragLeave?.(e, id)
3131
}
3232

33-
const onExpand: ChatListEvent = (item, index, event) => {
34-
if (props.onExpand instanceof Function) props.onExpand(item, index, event)
35-
}
36-
3733
return (
3834
<div className={classNames('rce-container-clist', props.className)}>
3935
{props.dataSource.map((x, i: number) => (
@@ -53,33 +49,7 @@ const ChatList: React.FC<IChatListProps> = props => {
5349
onDragLeave={onDragLeaveMW}
5450
onDragComponent={props.onDragComponent}
5551
setDragStates={setDragStates}
56-
onExpandItem={(e: React.MouseEvent<HTMLElement>) => onExpand(x, i, e)}
57-
expanded={x.expanded}
5852
/>
59-
{x.subList && x.subList.length > 0 && (
60-
<>
61-
{x.expanded && x.subList.map((sub, j) => (
62-
<ChatItem
63-
{...sub}
64-
className='subitem'
65-
avatarSize='xsmall'
66-
key={`${i}-${j}`}
67-
lazyLoadingImage={props.lazyLoadingImage}
68-
onAvatarError={(e: React.MouseEvent<HTMLElement>) => onAvatarError(sub, j, e)}
69-
onContextMenu={(e: React.MouseEvent<HTMLElement>) => onContextMenu(sub, j, e)}
70-
onClick={(e: React.MouseEvent<HTMLElement>) => onClick(sub, j, e)}
71-
onClickMute={(e: React.MouseEvent<HTMLElement>) => props.onClickMute?.(sub, j, e)}
72-
onClickVideoCall={(e: React.MouseEvent<HTMLElement>) => props.onClickVideoCall?.(sub, j, e)}
73-
onDragOver={props?.onDragOver}
74-
onDragEnter={props?.onDragEnter}
75-
onDrop={props.onDrop}
76-
onDragLeave={onDragLeaveMW}
77-
onDragComponent={props.onDragComponent}
78-
setDragStates={setDragStates}
79-
/>
80-
))}
81-
</>
82-
)}
8353
</>
8454
))}
8555
</div>

‎src/type.d.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@ import React from 'react'
2929
* @prop onDragLeave The Chat Item's drop leave function and optional.
3030
* @prop onDragComponent The Chat Item's drag component and optional.
3131
* @prop letterItem The Chat Item's avatar letterItem and optional.
32-
* @prop subList The Chat Item's sub chat items and optional.
33-
* @prop onExpandItem The Chat Item's expand function onExpandItem(id: string) and optional.
34-
* @prop expanded The Chat Item's expanded and optional.
32+
* @prop subTextElement The Chat Item's sub text element and optional
3533
*/
3634
export interface IChatItemProps {
3735
id: string | number
@@ -65,9 +63,7 @@ export interface IChatItemProps {
6563
onDragComponent?: any
6664
letterItem?: ILetterItem
6765
customStatusComponents?: React.ElementType<any>[]
68-
subList?: IChatItemProps[]
69-
onExpandItem?: Function
70-
expanded?: boolean;
66+
subTextElement?: JSX.Element
7167
}
7268

7369
/**
@@ -97,7 +93,6 @@ export interface ILetterItem {
9793
* @prop onDrop The Chat Item's drop function and optional.
9894
* @prop onDragLeave The Chat Item's drop leave function and optional.
9995
* @prop onDragComponent The Chat Item's drag component and optional.
100-
* @prop onExpand The Chat Item's expand function and optional.
10196
*/
10297
export interface IChatListProps {
10398
id: string | number
@@ -115,7 +110,6 @@ export interface IChatListProps {
115110
onDrop?: Function
116111
onDragLeave?: Function
117112
onDragComponent?: Function
118-
onExpand?: Function
119113
}
120114

121115
/**

0 commit comments

Comments
 (0)