@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.tsx

@@ -0,0 +1,42 @@
+import { useTranslation } from 'react-i18next';
+import { Icon, IconTypes } from '../../Icon';
+import { Input, InputProps } from '../../Input';
+import classNames from 'classnames';
+
+import './ConversationSearchInput.scss';
+
+type IConversationSearchInputProps = InputProps;
+
+function ConversationSearchInput(props: IConversationSearchInputProps) {
+  const {
+    className,
+    placeholder,
+    clearable,
+    value,
+    onChange,
+    prefix = <Icon type={IconTypes.SEARCH} height={16} width={16} />,
+    onFocus,
+    onBlur,
+  } = props;
+  const { t } = useTranslation();
+  return (
+    <Input
+      className={classNames(
+        'uikit-conversation-search-input',
+        className,
+      )}
+      placeholder={placeholder || t('TUIConversation.Search')}
+      clearable={clearable}
+      value={value}
+      onChange={onChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      prefix={prefix}
+    />
+  );
+}
+
+export {
+  ConversationSearchInput,
+  IConversationSearchInputProps,
+};

package/src/components/ConversationSearch/ConversationSearchInput/index.ts

@@ -0,0 +1 @@
+export * from './ConversationSearchInput';

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.scss

@@ -0,0 +1,15 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-conversation-search-result {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  overflow: auto;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import cs from 'classnames';
+import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { ConversationPreview as DefaultConversationPreview, IConversationPreviewProps } from '../../ConversationPreview';
+import { Avatar as DefaultAvatar, AvatarProps } from '../../Avatar';
+import { PlaceHolder, PlaceHolderTypes } from '../../PlaceHolder';
+
+import './ConversationSearchResult.scss';
+
+interface IConversationSearchResultProps {
+  /** Whether to show the search result */
+  visible?: boolean;
+  /** The search result */
+  searchResult?: IConversationModel[];
+  /** The search input value */
+  searchValue?: string;
+  /** The custom ResultPreview component */
+  ResultPreview?: React.ComponentType<IConversationPreviewProps>;
+  /** The custom Avatar component */
+  Avatar?: React.ComponentType<AvatarProps>;
+  /** The custom no result Placeholder component */
+  PlaceholderNoResult?: React.ReactNode;
+  /**  Callback when the ResultPreview is clicked */
+  onSelectResult?: (conversation: IConversationModel) => void;
+  /** The custom class name */
+  className?: string;
+  /** The custom css style */
+  style?: React.CSSProperties;
+}
+
+function ConversationSearchResult(props: IConversationSearchResultProps) {
+  const {
+    visible = false,
+    searchResult,
+    searchValue,
+    Avatar = DefaultAvatar,
+    ResultPreview = DefaultConversationPreview,
+    PlaceholderNoResult = <PlaceHolder type={PlaceHolderTypes.NO_RESULTS} searchString={searchValue} />,
+    onSelectResult,
+    className,
+    style,
+  } = props;
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cs('uikit-conversation-search-result', className)}
+      style={style}
+    >
+      {searchResult?.length === 0
+        ? PlaceholderNoResult
+        : (searchResult?.map(item => (
+            <ResultPreview
+              key={item.conversationID}
+              conversation={item}
+              Avatar={Avatar}
+              highlightMatchString={searchValue}
+              onSelectConversation={onSelectResult}
+            />
+          ))
+          )}
+    </div>
+  );
+}
+
+export {
+  ConversationSearchResult,
+  IConversationSearchResultProps,
+};

package/src/components/ConversationSearch/ConversationSearchResult/index.ts

@@ -0,0 +1 @@
+export * from './ConversationSearchResult';

package/src/components/ConversationSearch/index.ts

@@ -1,2 +1,3 @@
-export * from './ConversationSearchInput';
-export * from './ConversationSearchResult';
+export * from './ConversationSearchInput/ConversationSearchInput';
+export * from './ConversationSearchResult/ConversationSearchResult';
+export * from './ConversationSearch';

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/EmptyStateIndicator/EmptyStateIndicator.tsx

@@ -1,12 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 
-export interface EmptyStateIndicatorProps{
+export interface EmptyStateIndicatorProps {
   /** List Type: conversation | message */
   listType?: 'conversation' | 'message' | 'chat';
 }
 
-function UnMemoizedEmptyStateIndicator
-<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>) {
+function UnMemoizedEmptyStateIndicator<T extends EmptyStateIndicatorProps>(props: PropsWithChildren<T>) {
   const { listType } = props;
 
   if (listType === 'conversation') { return <p role="listitem">You have no conversation currently</p>; }

package/src/components/Icon/Icon.tsx

@@ -3,18 +3,18 @@ import './styles/index.scss';
 import { IconTypes } from './type';
 import { ICON_CONFIG } from './config';
 
-const changeTypeToIconComponent = (type:IconTypes) => {
+const changeTypeToIconComponent = (type: IconTypes) => {
   const src = ICON_CONFIG[type].url || '';
-  return <img className={`icon-image icon-image-${type}`} src={src} alt={type} />;
+  return src && <img className={`icon-image icon-image-${type}`} src={src} alt={type} />;
 };
-export const changeTypeToIconClassName = (type:IconTypes) => ICON_CONFIG[type]?.className || '';
+export const changeTypeToIconClassName = (type: IconTypes) => ICON_CONFIG[type]?.className || '';
 
 export interface IconProps {
-  type?: IconTypes,
-  height?: number,
-  width?: number,
-  onClick?: (event: React.BaseSyntheticEvent) => void,
-  className?: string
+  type?: IconTypes;
+  height?: number;
+  width?: number;
+  onClick?: (event: React.BaseSyntheticEvent) => void;
+  className?: string;
 }
 export function Icon(props: React.PropsWithChildren<IconProps>) {
   const {

package/src/components/Icon/config.ts

@@ -41,19 +41,22 @@ 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 IconMuteUrl from './images/mute.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 +233,20 @@ export const ICON_CONFIG:IconConfig = {
     url: IconAddCircleUrl,
     className: 'tui-kit-icon-add-friend',
   },
+  [IconTypes.LOADING]: {
+    url: '',
+    className: 'tui-kit-icon-loading',
+  },
+  [IconTypes.MUTE]: {
+    url: IconMuteUrl,
+    className: 'tui-kit-icon-mute',
+  },
+  [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/mute.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="design-iconfont">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M4.13744611,6.61713753 L20.551,23 L0,23 L0,21 L3,21 L3,11 C3,9.40883362 3.41291862,7.91410954 4.13744611,6.61713753 Z M21.481,21 L24,21 L24,23 L23.485,23 L21.481,21 Z M12,2 C16.9705627,2 21,6.02943725 21,11 L21,20.52 L5.36684476,4.91705738 C7.01203082,3.12402075 9.37475086,2 12,2 Z" fill="#CCC" transform="translate(4 3)"/>
+    <path fill="#CCC" fill-rule="nonzero" d="M13 0L13 4 11 4 11 0z" transform="translate(4 3)"/>
+    <path stroke="#CCC" d="M8.5 24.5H15.5V25.5H8.5z" transform="translate(4 3)"/>
+    <path stroke="#CCC" stroke-width="2" transform="matrix(-1 0 0 1 31.089472 3)" d="M25.4499982 0.1546001L1.63947409 23.8855564"/>
+  </g>
+</svg>

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/styles/index.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 $primary-color: royalblue;
 
 .tui-kit-icon {
@@ -6,25 +8,58 @@ $primary-color: royalblue;
   align-items: center;
   cursor: pointer;
   position: relative;
+  user-select: none;
+
   .icon-image {
     width: 100%;
   }
-  &:hover{
+
+  &:hover {
     color: $primary-color;
-    border-color: currentColor;
+    border-color: currentcolor;
   }
-  &::after{
-    content: '';
+
+  &::after {
+    content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     opacity: 0;
     box-shadow: 0 0 0 6px $primary-color;
-    transition: .3s;
+    transition: 0.3s;
   }
-  &:active::after{
+
+  &:active::after {
     box-shadow: none;
     opacity: 0.4;
     transition: 0s;
   }
 }
+
+.tui-kit-icon-loading {
+  cursor: wait;
+  border-radius: 100%;
+  animation: circle infinite 1s linear;
+
+  @include theme() {
+    border: 3px solid get(text-color-disable);
+    border-top-color: transparent;
+  }
+
+  &:hover {
+    @include theme() {
+      border: 3px solid get(text-color-disable);
+      border-top-color: transparent;
+    }
+  }
+}
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Icon/type.ts

@@ -43,4 +43,8 @@ export enum IconTypes {
   UNVECTOR = 'unvector',
   VOICE = 'voice',
   ADDFRIEND = 'addFriend',
+  LOADING = 'loading',
+  MUTE = 'mute',
+  VIDEOCALL = 'videoCall',
+  VOICECALL = 'voiceCall',
 }

package/src/components/Input/Input.tsx

@@ -5,20 +5,21 @@ import React, {
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
 
-export interface InputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'>
-{
-  className?: string,
-  customClassName?: string,
-  placeholder?: string,
-  clearable?: boolean,
-  prefix?: React.ReactNode,
-  suffix?: React.ReactNode,
-  value?: InputHTMLAttributes<HTMLInputElement>['value'],
-  border?: '' | 'bottom',
-  disabled?: boolean,
-  maxLength?: number,
-  onKeyDown?: (options?: object) => void
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
+  className?: string;
+  inputClassName?: string;
+  placeholder?: string;
+  clearable?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  value?: InputHTMLAttributes<HTMLInputElement>['value'];
+  border?: '' | 'bottom';
+  disabled?: boolean;
+  maxLength?: number;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 export interface InputRef {
   focus: (options?: object) => void;
@@ -28,8 +29,8 @@ export interface InputRef {
 export const Input = React.forwardRef<InputRef, InputProps>(
   (props: InputProps, ref): React.ReactElement => {
     const {
-      className = "",
-      customClassName = "",
+      className = '',
+      inputClassName = '',
       placeholder,
       clearable = false,
       prefix,
@@ -38,14 +39,14 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       onBlur,
       onFocus,
       onKeyDown,
-      value: propsValue = "",
-      border = "",
+      value: propsValue = '',
+      border = '',
       disabled = false,
       maxLength = undefined,
     } = props;
 
     const [focused, setFocused] = useState<boolean>(false);
-    const enterCodeList = ["Enter", "NumpadEnter"];
+    const enterCodeList = ['Enter', 'NumpadEnter'];
     const [value, setValue] = useState(propsValue);
     const inputRef = useRef<HTMLInputElement>(null);
     const handleFocus = (e: any) => {
@@ -66,7 +67,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       setValue('');
       focus();
       const currentTarget = inputRef?.current?.cloneNode(
-        true
+        true,
       ) as HTMLInputElement;
       const event = Object.create(e, {
         target: { value: currentTarget },
@@ -103,7 +104,7 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           <input
             maxLength={maxLength}
             disabled={disabled}
-            className={`tui-kit-input ${customClassName}`}
+            className={`tui-kit-input ${inputClassName}`}
             placeholder={placeholder}
             ref={inputRef}
             value={value}
@@ -114,9 +115,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           />
           {suffix}
           {(clearable && value)
-          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => {clearInput(e)}} />}
+          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => { clearInput(e); }} />}
         </div>
       </div>
     );
-  }
+  },
 );

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);
+      }
     }
   }
 }