@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Conversation } from '@tencentcloud/chat';
-import { TUIKitContextValue, useTUIKitContext } from '../../context';
+import type { Conversation } from '@tencentcloud/chat';
+import { useUIKit, useUIManager } from '../../context';
 import { ConversationPreviewContent } from './ConversationPreviewContent';
 import { AvatarProps } from '../Avatar';
 
@@ -8,34 +8,34 @@ import {
   getDisplayImage, getDisplayMessage, getDisplayTitle, getDisplayTime,
 } from './utils';
 
-export interface ConversationPreviewUIComponentProps extends ConversationPreviewProps{
+export interface ConversationPreviewUIComponentProps extends ConversationPreviewProps {
   /** If the component's Conversation is the active (selected) Conversation */
-  active?: boolean,
+  active?: boolean;
   /** Image of Conversation to display */
-  displayImage?: string,
+  displayImage?: string;
   /** Title of Conversation to display */
-  displayTitle?: string | React.ReactElement,
+  displayTitle?: string | React.ReactElement;
   /** Message of Conversation to display */
-  displayMessage?: string | React.ReactElement,
+  displayMessage?: string | React.ReactElement;
   /** Time of Conversation to display */
-  displayTime?: string,
+  displayTime?: string;
   /** Number of unread Messages */
-  unread?: number,
+  unread?: number;
 }
 export interface ConversationPreviewProps {
-  conversation: Conversation,
-  activeConversation?: Conversation,
-  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>,
-  Avatar?: React.ComponentType<AvatarProps>
-  setActiveConversation?: TUIKitContextValue['setActiveConversation'],
-  searchValue?: string,
-  conversationUpdateCount?: number
-  activeConversationID?: string,
-  setActiveConversationID?: (conversationID: string) => void,
+  conversation: Conversation;
+  activeConversation?: Conversation;
+  Preview?: React.ComponentType<ConversationPreviewUIComponentProps>;
+  Avatar?: React.ComponentType<AvatarProps>;
+  setActiveConversation?: (conversation: Conversation | undefined) => void;
+  searchValue?: string;
+  conversationUpdateCount?: number;
+  activeConversationID?: string;
+  setActiveConversationID?: (conversationID: string) => void;
 }
 export function ConversationPreview<T extends ConversationPreviewProps>(
   props: T,
-):React.ReactElement {
+) {
   const {
     activeConversation,
     conversation,
@@ -43,11 +43,11 @@ export function ConversationPreview<T extends ConversationPreviewProps>(
     searchValue,
     conversationUpdateCount,
   } = props;
-  const { language } = useTUIKitContext('TUIConversation');
+  const { language } = useUIKit();
   const {
     setActiveConversation,
     myProfile,
-  } = useTUIKitContext('ConversationPreview');
+  } = useUIManager('ConversationPreview');
   const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
   const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
   const [displayMessage, setDisplayMessage] = useState(myProfile && getDisplayMessage(conversation, myProfile, language));

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -10,7 +10,7 @@ import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 import { Plugins } from '../Plugins';
 import { useConversation } from '../../hooks';
-import { useTUIKitContext } from '../../context';
+import { useUIKit, useUIManager } from '../../context';
 
 export interface IPluginsRef {
   closeMore?: () => void,
@@ -34,7 +34,8 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
 
   const { t } = useTranslation();
   const conversationPreviewButton = useRef<HTMLButtonElement | null>(null);
-  const { chat, conversation: activeConversation } = useTUIKitContext('ConversationPreviewContent');
+  const { chat } = useUIKit();
+  const { conversation: activeConversation } = useUIManager('ConversationPreviewContent');
   const { pinConversation, deleteConversation } = useConversation(chat);
   const activeClass = active ? 'conversation-preview-content--active' : '';
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
@@ -123,6 +124,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
       onTouchStart={() => handleH5LongPress('touchstart')}
       onTouchEnd={() => handleH5LongPress('touchend')}
       ref={conversationPreviewButton}
+      id={conversation.conversationID}
     >
       <div className="avatar">
         <Avatar image={displayImage} name={displayTitle} size={40} />

package/src/components/ConversationPreview/styles/index.scss

@@ -16,7 +16,7 @@
   padding: 0 20px;
 
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-operate);
   }
 
   .content {
@@ -35,7 +35,7 @@
       width: 100%;
 
       @include theme() {
-        color: get(text-primary);
+        color: get(text-color-primary);
       }
     }
 
@@ -51,14 +51,14 @@
       padding: 1px 0;
 
       @include theme() {
-        color: get(text-secondary);
+        color: get(text-color-secondary);
       }
     }
   }
 
   .external {
     text-align: right;
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     display: flex;
     flex-direction: column;
 
@@ -76,7 +76,7 @@
       padding: 1px 0;
 
       @include theme() {
-        color: get(text-secondary);
+        color: get(text-color-secondary);
       }
     }
 
@@ -84,22 +84,25 @@
       display: flex;
       justify-content: flex-end;
       flex: 1 1;
+
       .icon-more {
         transform: scale(1.5);
-        &:hover {
-        }
       }
 
       .more-handle-box {
         top: 0;
         right: 0;
-        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
         bottom: initial;
         padding: 14px 0;
         box-sizing: border-box;
         text-align: start;
         white-space: nowrap;
 
+        @include theme() {
+          background-color: get(dropdown-color-default);
+          box-shadow: 0 0 10px get(shadow-color);
+        }
+
         .more-handle-item {
           font-size: 16px;
           font-family: PingFangSC-Medium;
@@ -109,15 +112,19 @@
           font-weight: 500;
           box-sizing: border-box;
 
+          @include theme() {
+            color: get(text-color-primary);
+          }
+
           &.delete {
             @include theme() {
-              color: get(status-danger);
+              color: get(text-color-error);
             }
           }
 
           &:hover {
             @include theme() {
-              background-color: get(bg-active);
+              background-color: get(dropdown-color-hover);
             }
           }
         }
@@ -127,7 +134,7 @@
 
   &:hover {
     @include theme() {
-      background-color: get(bg-active);
+      background-color: get(list-color-hover);
     }
   }
 
@@ -139,19 +146,12 @@
 
   &.conversation-preview-content--active {
     @include theme() {
-      background-color: get(bg-active);
-    }
-
-    .title {
-      @include theme() {
-        color: get(status-info);
-      }
+      background-color: get(list-color-active);
     }
   }
 
   &.conversation-preview-content--unread {
     .unread {
-      width: 16px;
       height: 13px;
       border-radius: 16px;
       display: flex;
@@ -164,7 +164,7 @@
       color: #fff;
 
       @include theme() {
-        background-color: get(status-danger);
+        background-color: get(text-color-error);
       }
     }
   }

package/src/components/ConversationPreview/utils.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
 import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
-import { getTimeStamp } from '../untils';
+import { getTimeStamp } from '../utils';
 
 interface TProfile extends Profile, Group {}
 export const getMessageProfile = (conversation: Conversation): TProfile => {
@@ -55,7 +55,8 @@ export const getDisplayTitle = (
           (textItem.toLowerCase() === searchValue.toLowerCase())
             ? (
                 <span key={index} style={{ color: highlightColor }}>{textItem}</span>
-              ) : (
+              )
+            : (
                 <span key={index}>{textItem}</span>
               ),
         )}

package/src/components/DivWithEdit/styles/index.scss

@@ -1,14 +1,18 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .div-with-edit {
   flex: 1;
   display: flex;
   max-width: 100%;
   box-sizing: border-box;
   height: 30px;
-  &-popup{
+
+  &-popup {
     flex: 1;
     display: flex;
     max-width: 100%;
   }
+
   .show {
     flex: 1;
     display: flex;
@@ -16,54 +20,70 @@
     justify-content: space-between;
     position: relative;
     word-break: break-all;
+
+    .icon-edit {
+      display: none;
+    }
+
     &:hover {
       .icon-edit {
         display: flex;
       }
     }
-    .icon-edit {
-      display: none;
-    }
   }
+
   .icon {
     margin-left: 10px;
     width: 25px;
   }
+
   .edit {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    border-bottom: 1px solid #EEEEEE;
     padding: 0 10px;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+    }
+
     input {
       flex: 1;
       font-size: inherit;
       border: none;
+
       &:focus {
         border: none;
         outline: none;
       }
     }
+
     .select {
       position: absolute;
-      box-sizing: border-box;
       min-width: 100%;
       z-index: 2;
-      background: #FFFFFF;
-      box-shadow: 0 11px 20px 0 rgb(0,0,0.3);
       top: 100%;
       border-radius: 5px;
       padding: 10px 0;
+
+      @include theme() {
+        background: get(dropdown-color-default);
+        box-shadow: 0 11px 20px 0 get(shadow-color);
+      }
+
       &-list {
         &-item {
           padding: 7px 10px;
+
           &:hover {
-            background: #f2f7ff;
+            @include theme() {
+              background: get(dropdown-color-hover);
+            }
           }
         }
       }
     }
   }
-}
+}

package/src/components/Icon/config.ts

@@ -41,19 +41,21 @@ import IconVectorUrl from './images/vector.png';
 import IconUnvectorUrl from './images/unvector.png';
 import IconVoiceUrl from './images/voice.png';
 import IconAddCircleUrl from './images/add-friend.svg';
+import IconVideoCallUrl from './images/video-call.svg';
+import IconVoiceCallUrl from './images/voice-call.svg';
 
 import { IconTypes } from './type';
 
 interface IconConfigItem {
-  url: string,
-  className: string,
+  url: string;
+  className: string;
 }
 
 interface IconConfig {
-  [propName: string]: IconConfigItem
+  [propName: string]: IconConfigItem;
 }
 
-export const ICON_CONFIG:IconConfig = {
+export const ICON_CONFIG: IconConfig = {
   [IconTypes.MORE]: {
     url: IconMoreUrl,
     className: 'tui-kit-icon-more',
@@ -230,4 +232,12 @@ export const ICON_CONFIG:IconConfig = {
     url: IconAddCircleUrl,
     className: 'tui-kit-icon-add-friend',
   },
+  [IconTypes.VIDEOCALL]: {
+    url: IconVideoCallUrl,
+    className: 'tui-kit-icon-video-call',
+  },
+  [IconTypes.VOICECALL]: {
+    url: IconVoiceCallUrl,
+    className: 'tui-kit-icon-voice-call',
+  },
 };

package/src/components/Icon/images/video-call.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.7133 3.78811C12.7133 3.84528 12.654 3.94533 12.5353 4.08826C12.4166 4.23119 12.2894 4.39985 12.1537 4.59424C12.0181 4.78862 11.8909 5.00016 11.7722 5.22885C11.6535 5.45754 11.5942 5.69194 11.5942 5.93207C11.5942 6.17219 11.6535 6.40374 11.7722 6.62671C11.8909 6.84968 12.0181 7.05264 12.1537 7.2356C12.2894 7.41855 12.4166 7.57005 12.5353 7.69011C12.654 7.81018 12.7133 7.88736 12.7133 7.92166V9.72259C12.7133 9.91697 12.6427 10.1371 12.5014 10.3829C12.3601 10.6288 12.1848 10.8603 11.9757 11.0776C11.7666 11.2948 11.5348 11.4749 11.2805 11.6178C11.0261 11.7608 10.7859 11.8322 10.5598 11.8322H2.13229C1.82707 11.8322 1.54728 11.7779 1.29293 11.6693C1.03858 11.5607 0.815315 11.4092 0.623139 11.2148C0.430963 11.0204 0.281177 10.7917 0.173785 10.5287C0.0663918 10.2657 0.0126953 9.97986 0.0126953 9.67113V2.27876C0.0126953 2.05007 0.0635656 1.81281 0.165306 1.56697C0.267047 1.32113 0.411179 1.0953 0.597704 0.889476C0.784228 0.683656 1.00467 0.512139 1.25902 0.374926C1.51337 0.237712 1.79316 0.169106 2.09838 0.169106H10.5259C10.8311 0.169106 11.1166 0.223419 11.3822 0.332046C11.6479 0.440674 11.8796 0.589322 12.0774 0.77799C12.2753 0.966658 12.4307 1.19249 12.5437 1.45548C12.6568 1.71847 12.7133 1.99862 12.7133 2.29591V3.78811ZM17.9869 2.17585V10.0142C17.9869 10.2657 17.9219 10.4887 17.7919 10.6831C17.6619 10.8775 17.4669 10.9747 17.2069 10.9747C17.1164 10.9747 17.0006 10.9404 16.8592 10.8718C16.7179 10.8031 16.5766 10.7231 16.4353 10.6316C16.294 10.5402 16.1612 10.4487 16.0368 10.3572C15.9125 10.2657 15.8221 10.1914 15.7655 10.1342C15.6186 10.0084 15.3953 9.79119 15.0957 9.48246C14.7962 9.17373 14.4938 8.82498 14.1886 8.43621C13.8833 8.04744 13.6149 7.64724 13.3831 7.2356C13.1514 6.82396 13.0355 6.44662 13.0355 6.10358C13.0355 5.76055 13.1598 5.36892 13.4085 4.9287C13.6572 4.48847 13.9568 4.05682 14.3073 3.63374C14.6577 3.21067 15.0251 2.81904 15.4094 2.45885C15.7938 2.09867 16.116 1.8271 16.376 1.64415C16.4777 1.57554 16.6162 1.49264 16.7914 1.39545C16.9666 1.29826 17.1221 1.24966 17.2577 1.24966C17.563 1.24966 17.7608 1.33542 17.8512 1.50694C17.9417 1.67845 17.9869 1.88999 17.9869 2.14155V2.17585Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+</svg>

package/src/components/Icon/images/voice-call.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.820502 1.908L2.4211 0.335447C2.84833 -0.110789 3.54101 -0.110788 3.96825 0.335448L6.55252 3.03465C6.97975 3.48089 6.97975 4.20438 6.55252 4.65061L5.40756 5.84649C5.89906 6.92709 6.58667 7.90985 7.44288 8.73564C8.3911 9.65016 9.50662 10.3341 10.7098 10.7549L11.7569 9.66126C12.1841 9.21502 12.8768 9.21502 13.304 9.66126L15.6796 12.1424C16.1068 12.5887 16.1068 13.3122 15.6796 13.7584L13.9485 15.6199C13.9389 15.6199 13.9581 15.6199 13.9485 15.6199C13.7709 15.8055 13.5385 15.9293 13.2854 15.9734L13.128 16.0008C9.75381 15.9708 6.84954 14.6061 4.36844 12.2132C1.859 9.79292 0.271627 6.98782 0 3.43154C0 2.94579 0.202278 2.48197 0.558263 2.15147L0.820502 1.908Z" fill="#147AFF" style="fill:#147AFF;fill:color(display-p3 0.0784 0.4784 1.0000);fill-opacity:1;"/>
+</svg>

package/src/components/Icon/type.ts

@@ -43,4 +43,6 @@ export enum IconTypes {
   UNVECTOR = 'unvector',
   VOICE = 'voice',
   ADDFRIEND = 'addFriend',
+  VIDEOCALL = 'videoCall',
+  VOICECALL = 'voiceCall',
 }

package/src/components/Input/styles/index.scss

@@ -1,22 +1,32 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-kit-input-box {
   //width: 100%;
   display: flex;
   align-items: center;
   border-radius: 10px;
-  background: rgba(249, 249, 249, 94%);
   padding: 0 8px;
   height: 36px;
   box-sizing: border-box;
 
+  @include theme() {
+    background-color: get(bg-color-input);
+  }
+
   &.tui-kit-input-box--focus {
-    outline: 1px solid #147aff;
+    @include theme() {
+      outline: 1px solid get(text-color-link);
+    }
   }
 
   &.tui-kit-input-border--bottom {
-    border-bottom: 1px solid rgba(0, 0, 0, 10%);
-    background-color: #fff;
     outline: none;
     border-radius: 0;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+      background-color: get(bg-color-operate);
+    }
   }
 
   .tui-kit-input {
@@ -32,15 +42,21 @@
     box-sizing: border-box;
     font-size: 14px;
 
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     &:focus {
       border: none;
       outline: none;
     }
 
     &::placeholder {
-      font-weight: 400;
-      color: rgba(67, 60, 63, 60%);
       padding: 2px 0;
+
+      @include theme() {
+        color: get(text-color-secondary);
+      }
     }
   }
 }

package/src/components/Plugins/styles/color.scss

@@ -3,19 +3,11 @@
 .plugin-popup {
   &-box {
     border-radius: 16px;
+    overflow: hidden;
 
     @include theme() {
-      color: get(text-primary);
-    }
-
-    [data-chat-theme="light"] & {
-      background-color: var(--chat-theme-light-bg-primary);
-      box-shadow: var(--chat-theme-light-box-shadow-1);
-    }
-
-    [data-chat-theme="dark"] & {
-      background-color: var(--chat-theme-dark-bg-3);
-      box-shadow: var(--chat-theme-dark-box-shadow-1);
+      background-color: get(dropdown-color-default);
+      box-shadow: 0 0 10px 0 get(shadow-color);
     }
   }
 }

package/src/components/Profile/styles/index.scss

@@ -1,16 +1,21 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .profile {
-  font-family: PingFangSC-Medium;
-  background: #F9FAFB;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .profile-content {
     display: flex;
     align-items: center;
+
     .profile-name {
-      font-family: PingFangSC-Medium;
       font-weight: 600;
       margin-left: 10px;
       font-size: 14px;
@@ -18,6 +23,10 @@
       white-space: nowrap;
       max-width: 200px;
       overflow: hidden;
+
+      @include theme() {
+        color: get(text-color-primary);
+      }
     }
   }
 }