fix: ConversationsItem title display [Object Object] and support extr… (#898)

Co-authored-by: liuyuan <[email protected]>

Author: yuanliu147

components/conversations/Item.tsx

@@ -74,7 +74,12 @@ const ConversationsItem: React.FC<ConversationsItemProps> = (props) => {
 
   // ============================ Render ============================
   return (
-    <li {...domProps} className={mergedCls} onClick={onInternalClick} title={`${info.label}`}>
+    <li
+      title={typeof info.label === 'object' ? undefined : `${info.label}`}
+      {...domProps}
+      className={mergedCls}
+      onClick={onInternalClick}
+    >
       {info.icon && <div className={`${prefixCls}-icon`}>{info.icon}</div>}
       <Typography.Text className={`${prefixCls}-label`}>{info.label}</Typography.Text>
       {!disabled && menu && (

components/conversations/__tests__/__snapshots__/index.test.tsx.snap

@@ -25,7 +25,6 @@ exports[`Conversations Component Conversations component work 1`] = `
   </li>
   <li
     class="ant-conversations-item"
-    title="[object Object]"
   >
     <span
       class="ant-typography ant-conversations-label"
@@ -142,7 +141,6 @@ exports[`Conversations Component rtl render component should be rendered correct
     >
       <li
         class="ant-conversations-item"
-        title="[object Object]"
       >
         <span
           class="ant-typography ant-typography-rtl ant-conversations-label"

components/conversations/index.tsx

@@ -157,19 +157,27 @@ const Conversations: React.FC<ConversationsProps> = (props) => {
       className={mergedCls}
     >
       {groupList.map((groupInfo, groupIndex) => {
-        const convItems = groupInfo.data.map((convInfo: Conversation, convIndex: number) => (
-          <ConversationsItem
-            key={convInfo.key || `key-${convIndex}`}
-            info={convInfo}
-            prefixCls={prefixCls}
-            direction={direction}
-            className={classnames(classNames.item, contextConfig.classNames.item)}
-            style={{ ...contextConfig.styles.item, ...styles.item }}
-            menu={typeof menu === 'function' ? menu(convInfo) : menu}
-            active={mergedActiveKey === convInfo.key}
-            onClick={onConversationItemClick}
-          />
-        ));
+        const convItems = groupInfo.data.map((convInfo: Conversation, convIndex: number) => {
+          const { label: _, disabled: __, icon: ___, ...restInfo } = convInfo;
+          return (
+            <ConversationsItem
+              {...restInfo}
+              key={convInfo.key || `key-${convIndex}`}
+              info={convInfo}
+              prefixCls={prefixCls}
+              direction={direction}
+              className={classnames(
+                classNames.item,
+                contextConfig.classNames.item,
+                convInfo.className,
+              )}
+              style={{ ...contextConfig.styles.item, ...styles.item, ...convInfo.style }}
+              menu={typeof menu === 'function' ? menu(convInfo) : menu}
+              active={mergedActiveKey === convInfo.key}
+              onClick={onConversationItemClick}
+            />
+          );
+        });
 
         // With group to show the title
         if (enableGroup) {

components/conversations/interface.ts

@@ -8,7 +8,9 @@ type GroupType = string;
  * @desc 会话数据
  * @descEN Conversation data
  */
-export interface Conversation extends AnyObject {
+export interface Conversation
+  extends AnyObject,
+    Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> {
   /**
    * @desc 唯一标识
    * @descEN Unique identifier