some issues fixed, new feature added to chatlist: customStatusComponents

emregudur · emregudur · commit 55f759bab1f9 · 2022-11-17T13:41:59.000+03:00
diff --git a/example/components/ChatListExample.tsx b/example/components/ChatListExample.tsx
@@ -1,11 +1,35 @@
 import Identicon from 'identicon.js'
 import loremIpsum from 'lorem-ipsum'
 import React, { useEffect, useState } from 'react'
-import { FaSquare } from 'react-icons/fa'
-import { MdOutlineMoreVert } from 'react-icons/md'
+import { BsListTask } from 'react-icons/bs'
 import ChatList from '../../src/ChatList/ChatList'
-import Dropdown from '../../src/Dropdown/Dropdown'
 import SideBar from '../../src/SideBar/SideBar'
+import { IChatItemProps } from '../../src/type'
+
+function Test(params: any) {
+  return (
+    <div className='rce-citem-body--bottom-status-icon' onClick={() => console.log('clicked')}>
+      <span
+        style={{
+          'fontSize': '10px',
+          'position': 'absolute',
+          'padding': '2px',
+          'right': '-12px',
+          'top': '-6px',
+          'background': 'red',
+          'color': 'white',
+          'borderRadius': '100%',
+          'width': '12px',
+          'height': '12px',
+          'textAlign': 'center',
+        }}
+      >
+        {Math.ceil(Math.random() * 9) + 1}
+      </span>
+      <BsListTask />
+    </div>
+  )
+}
 
 function ChatListExample() {
   const photo = (size: number) => {
@@ -15,7 +39,7 @@ function ChatListExample() {
     }).toString()
   }
 
-  const [chatListAray, setChatListAray] = useState([
+  const [chatListAray, setChatListAray] = useState<IChatItemProps[]>([
     {
       id: String(Math.random()),
       avatar: `data:image/png;base64,${photo(20)}`,
@@ -30,50 +54,7 @@ function ChatListExample() {
       muted: Math.floor((Math.random() * 10) % 2) === 1,
       showMute: Math.floor((Math.random() * 10) % 2) === 1,
       showVideoCall: Math.floor((Math.random() * 10) % 2) === 1,
-      dropdownMenu: (
-        <Dropdown
-          onSelect={() => {}}
-          animationPosition='norteast'
-          title='Dropdown Title'
-          buttonProps={{
-            type: 'transparent',
-            color: '#cecece',
-            icon: {
-              component: <MdOutlineMoreVert />,
-              size: 24,
-            },
-          }}
-          items={[
-            {
-              icon: {
-                component: <FaSquare />,
-                float: 'left',
-                color: 'red',
-                size: 22,
-              },
-              text: 'Menu Item',
-            },
-            {
-              icon: {
-                component: <FaSquare />,
-                float: 'left',
-                color: 'purple',
-                size: 22,
-              },
-              text: 'Menu Item',
-            },
-            {
-              icon: {
-                component: <FaSquare />,
-                float: 'left',
-                color: 'yellow',
-                size: 22,
-              },
-              text: 'Menu Item',
-            },
-          ]}
-        />
-      ),
+      customStatusComponents: [Test],
     },
   ])
 
@@ -95,50 +76,7 @@ function ChatListExample() {
         muted: Math.floor((Math.random() * 10) % 2) === 1,
         showMute: Math.floor((Math.random() * 10) % 2) === 1,
         showVideoCall: Math.floor((Math.random() * 10) % 2) === 1,
-        dropdownMenu: (
-          <Dropdown
-            onSelect={() => {}}
-            animationPosition='norteast'
-            title='Dropdown Title'
-            buttonProps={{
-              type: 'transparent',
-              color: '#cecece',
-              icon: {
-                component: <MdOutlineMoreVert />,
-                size: 24,
-              },
-            }}
-            items={[
-              {
-                icon: {
-                  component: <FaSquare />,
-                  float: 'left',
-                  color: 'red',
-                  size: 22,
-                },
-                text: 'Menu Item',
-              },
-              {
-                icon: {
-                  component: <FaSquare />,
-                  float: 'left',
-                  color: 'purple',
-                  size: 22,
-                },
-                text: 'Menu Item',
-              },
-              {
-                icon: {
-                  component: <FaSquare />,
-                  float: 'left',
-                  color: 'yellow',
-                  size: 22,
-                },
-                text: 'Menu Item',
-              },
-            ]}
-          />
-        ),
+        customStatusComponents: [Test],
       },
     ])
   }, [chatListAray])
diff --git a/example/components/MessageListExample.tsx b/example/components/MessageListExample.tsx
@@ -112,9 +112,11 @@ function MessageListExample() {
         referance={messageListReferance}
         dataSource={messageListArray}
         lockable={true}
-        downButton={false}
+        downButton={true}
         downButtonBadge={10}
         sendMessagePreview={true}
+        messageBoxStyles={{ backgroundColor: 'red' }}
+        notchStyle={{ fill: 'red' }}
       />
 
       <div
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "12.0.5",
+  "version": "12.0.6",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",
   "main": "dist/main.js",
diff --git a/src/Avatar/Avatar.tsx b/src/Avatar/Avatar.tsx
@@ -58,6 +58,7 @@ 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) }}>
diff --git a/src/ChatItem/ChatItem.css b/src/ChatItem/ChatItem.css
@@ -132,6 +132,16 @@
   background: red;
 }
 
+.rce-citem-body--bottom-status-icon {
+  position: relative;
+  margin-left: 3px;
+  width: 18px;
+  height: 18px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
 .rce-citem-body--bottom-tools {
   align-items: center;
   justify-content: center;
diff --git a/src/ChatItem/ChatItem.tsx b/src/ChatItem/ChatItem.tsx
@@ -71,7 +71,10 @@ const ChatItem: React.FC<IChatItemProps> = ({
       <div className='rce-citem' onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
         {!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
         {((onDrag && !props.onDragComponent) || !onDrag) && [
-          <div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
+          <div
+            key={'avatar'}
+            className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}
+          >
             <Avatar
               src={props.avatar}
               alt={props.alt}
@@ -103,7 +106,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
               type={classNames('circle', { 'flexible': avatarFlexible })}
             />
           </div>,
-          <div className='rce-citem-body'>
+          <div key={'rce-citem-body'} className='rce-citem-body'>
             <div className='rce-citem-body--top'>
               <div className='rce-citem-body--top-title'>{props.title}</div>
               <div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
@@ -132,6 +135,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
                 )}
               </div>
               <div className='rce-citem-body--bottom-status'>{unread && unread > 0 ? <span>{unread}</span> : null}</div>
+              {props.customStatusComponents !== undefined ? props.customStatusComponents.map(Item => <Item />) : null}
             </div>
           </div>,
         ]}
diff --git a/src/MessageBox/MessageBox.tsx b/src/MessageBox/MessageBox.tsx
@@ -23,7 +23,7 @@ import { format } from 'timeago.js'
 import classNames from 'classnames'
 import { MessageBoxType } from '../type'
 
-const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...props }) => {
+const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, styles, ...props }) => {
   const prevProps = useRef(focus)
   const messageRef = useRef<HTMLDivElement>(null)
 
@@ -53,6 +53,7 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...
         <SystemMessage {...props} focus={focus} notch={notch} />
       ) : (
         <div
+          style={styles}
           className={classNames(
             positionCls,
             { 'rce-mbox--clear-padding': thatAbsoluteTime },
@@ -187,6 +188,7 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...
           {notch &&
             (props.position === 'right' ? (
               <svg
+                style={props.notchStyle}
                 className={classNames('rce-mbox-right-notch', { 'message-focus': focus })}
                 xmlns='http://www.w3.org/2000/svg'
                 viewBox='0 0 20 20'
@@ -196,6 +198,7 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, ...
             ) : (
               <div>
                 <svg
+                  style={props.notchStyle}
                   className={classNames('rce-mbox-left-notch', { 'message-focus': focus })}
                   xmlns='http://www.w3.org/2000/svg'
                   viewBox='0 0 20 20'
diff --git a/src/MessageList/MessageList.tsx b/src/MessageList/MessageList.tsx
@@ -11,7 +11,7 @@ const MessageList: FC<IMessageListProps> = ({
   referance = null,
   lockable = false,
   toBottomHeight = 300,
-  downButton = true,
+  downButton,
   ...props
 }) => {
   const [scrollBottom, setScrollBottom] = useState(0)
@@ -165,13 +165,17 @@ const MessageList: FC<IMessageListProps> = ({
             onMeetingVideoLinkClick={props.onMeetingVideoLinkClick}
             onMeetingLinkClick={props.onMeetingLinkClick && ((e: React.MouseEvent<HTMLElement>) => onMeetingLinkClick(x, i, e))}
             actionButtons={props.actionButtons}
+            styles={props.messageBoxStyles}
+            notchStyle={props.notchStyle}
           />
         ))}
       </div>
       {downButton === true && _downButton && toBottomHeight !== '100%' && (
         <div className='rce-mlist-down-button' onClick={toBottom}>
           <FaChevronDown />
-          {props.downButtonBadge > 0 && <span className='rce-mlist-down-button--badge'>{props.downButtonBadge.toString()}</span>}
+          {props.downButtonBadge !== undefined ? (
+            <span className='rce-mlist-down-button--badge'>{props.downButtonBadge.toString()}</span>
+          ) : null}
         </div>
       )}
     </div>
diff --git a/src/type.d.ts b/src/type.d.ts
@@ -59,6 +59,7 @@ export interface IChatItemProps {
   onDragLeave?: Function
   onDragComponent?: any
   letterItem?: ILetterItem
+  customStatusComponents?: React.ElementType<any>[]
 }
 
 /**
@@ -533,6 +534,8 @@ export interface IMessageBoxProps {
   onMeetingLinkClick?: React.MouseEventHandler
   onMeetingTitleClick?: React.MouseEventHandler
   onMeetingVideoLinkClick?: React.MouseEventHandler
+  styles?: React.CSSProperties
+  notchStyle?: React.CSSProperties
 }
 
 /**
@@ -578,9 +581,9 @@ export interface IMessageListProps {
   actionButtons?: MeetingLinkActionButtons[]
   lockable: boolean
   toBottomHeight?: String | number
-  downButton: boolean
-  downButtonBadge: number
-  sendMessagePreview: boolean
+  downButton?: boolean
+  downButtonBadge?: number
+  sendMessagePreview?: boolean
   onScroll?: React.UIEventHandler
   onContextMenu?: MessageListEvent
   onDownButtonClick?: React.RefObject<HTMLButtonElement>
@@ -599,6 +602,8 @@ export interface IMessageListProps {
   onMeetingTitleClick?: React.MouseEventHandler
   onMeetingVideoLinkClick?: React.MouseEventHandler
   onMeetingLinkClick?: MessageListEvent
+  messageBoxStyles?: React.CSSProperties
+  notchStyle?: React.CSSProperties
 }
 
 /**
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-chat-elements",`
`3`		`- "version": "12.0.5",`
	`3`	`+ "version": "12.0.6",`
`4`	`4`	`"description": "Reactjs chat components",`
`5`	`5`	`"author": "Avare Kodcu <abdurrahmaneker58@gmail.com>",`
`6`	`6`	`"main": "dist/main.js",`
Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ const Avatar: React.FC<IAvatarProps> = ({ type = 'default', size = 'default', la`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`return (`
	`61`	`+ // @ts-ignore`
`61`	`62`	`<div className={classNames('rce-avatar-container', type, size, props.className)}>`
`62`	`63`	`{props.letterItem ? (`
`63`	`64`	`<div className='rce-avatar-letter-background' style={{ backgroundColor: stringToColour(props.letterItem.id) }}>`