fix: renderAddCmp, chatlist drag drop problem

Author: Emre Güdür

package.json

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

src/ChatItem/ChatItem.tsx

@@ -1,4 +1,4 @@
-import React, { Key, useState } from 'react'
+import React, { Key, useEffect, useState } from 'react'
 import './ChatItem.css'
 
 import Avatar from '../Avatar/Avatar'
@@ -22,6 +22,10 @@ const ChatItem: React.FC<IChatItemProps> = ({
   const [onHoverTool, setOnHoverTool] = useState(false)
   const [onDrag, setOnDrag] = useState(false)
 
+  useEffect(() => {
+    props.setDragStates(setOnDrag)
+  }, [])
+
   const handleOnMouseEnter = () => {
     setOnHoverTool(true)
   }

src/ChatList/ChatList.tsx

@@ -1,10 +1,12 @@
-import React, { Key } from 'react'
+import React, { Dispatch, Key, SetStateAction } from 'react'
 import classNames from 'classnames'
 import './ChatList.css'
 
 import ChatItem from '../ChatItem/ChatItem'
 import { IChatListProps, ChatListEvent } from '../type'
 
+let list: Dispatch<SetStateAction<any>>[] = []
+
 const ChatList: React.FC<IChatListProps> = props => {
   const onClick: ChatListEvent = (item, index, event) => {
     if (props.onClick instanceof Function) props.onClick(item, index, event)
@@ -19,6 +21,15 @@ const ChatList: React.FC<IChatListProps> = props => {
     if (props.onAvatarError instanceof Function) props.onAvatarError(item, index, event)
   }
 
+  const setDragStates = <S,>(state: Dispatch<SetStateAction<S>>) => {
+    list.push(state)
+  }
+
+  const onDragLeaveMW = (e: React.MouseEvent<HTMLElement>, id: Number | string) => {
+    if (list.length > 0) list.forEach(item => item(false))
+    props.onDragLeave(e, id)
+  }
+
   return (
     <div className={classNames('rce-container-clist', props.className)}>
       {props.dataSource.map((x, i: number) => (
@@ -34,8 +45,9 @@ const ChatList: React.FC<IChatListProps> = props => {
           onDragOver={props?.onDragOver}
           onDragEnter={props?.onDragEnter}
           onDrop={props.onDrop}
-          onDragLeave={props.onDragLeave}
+          onDragLeave={onDragLeaveMW}
           onDragComponent={props.onDragComponent}
+          setDragStates={setDragStates}
         />
       ))}
     </div>

src/MessageBox/MessageBox.tsx

@@ -48,7 +48,7 @@ const MessageBox: React.FC<MessageBoxType> = ({ focus = false, notch = true, sty
 
   return (
     <div ref={messageRef} className={classNames('rce-container-mbox', props.className)} onClick={props.onClick}>
-      {/* {props.renderAddCmp instanceof Function && props.renderAddCmp()} */}
+      {props.renderAddCmp instanceof Function && props.renderAddCmp()}
       {props.type === 'system' ? (
         <SystemMessage {...props} focus={focus} notch={notch} />
       ) : (

src/type.d.ts

@@ -57,6 +57,7 @@ export interface IChatItemProps {
   onDragEnter?: Function
   onDrop?: Function
   onDragLeave?: Function
+  setDragStates?: Function
   onDragComponent?: any
   letterItem?: ILetterItem
   customStatusComponents?: React.ElementType<any>[]
@@ -518,7 +519,7 @@ export interface ISpotifyMessageProps extends ISpotifyMessage {}
  */
 export interface IMessageBoxProps {
   onMessageFocused?: any
-  renderAddCmp?: React.Component
+  renderAddCmp?: JSX.Element
   onClick?: React.MouseEventHandler
   onOpen?: React.MouseEventHandler
   onPhotoError?: React.MouseEventHandler