@tencentcloud/chat-uikit-react 2.3.1 → 3.0.1

package/src/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.tsx

@@ -0,0 +1,127 @@
+import type React from 'react';
+import { useUIKit, IconChevronLeft } from '@tencentcloud/uikit-base-component-react';
+import { useConversationListState, View, Avatar as DefaultAvatar, useUIOpenControlState } from 'tuikit-atomicx-react';
+import cs from 'classnames';
+import { ChatHeaderActions } from '../ChatHeaderActions';
+import classes from './ChatHeaderUI.module.scss';
+import type { IUserStatus } from '../../../types/user';
+import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import type { AvatarProps } from 'tuikit-atomicx-react';
+
+interface IChatHeaderUIProps {
+  /** Custom title, if not provided, will use conversation info */
+  title: string;
+  /** Whether it's a group conversation */
+  isGroup: boolean;
+  /** Custom avatar image URL */
+  avatar?: string;
+  /** Whether the peer is typing */
+  isPeerTyping?: boolean;
+  /** user status */
+  userStatus?: IUserStatus | undefined;
+  /** Whether to show user status */
+  enableUserStatus?: boolean;
+  /** Whether it's a system conversation */
+  system?: boolean | undefined;
+  /** IM conversation model */
+  conversation?: IConversationModel | undefined;
+  /** Whether to show call features */
+  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
+  /** Custom avatar component */
+  Avatar?: React.ComponentType<AvatarProps> | undefined;
+  /** Additional class names */
+  className?: string | undefined;
+  /** Additional style */
+  style?: React.CSSProperties | undefined;
+  /** Search click callback */
+  onSearchClick?: (() => void) | undefined;
+}
+
+const UserStatus = {
+  Online: 'Online',
+  Offline: 'Offline',
+};
+
+const ChatHeaderUI = (props: IChatHeaderUIProps) => {
+  const {
+    title,
+    avatar,
+    isPeerTyping = false,
+    system = false,
+    userStatus,
+    enableUserStatus = true,
+    chatHeaderActions,
+    Avatar,
+    isGroup,
+    className,
+    style,
+  } = props;
+
+  const { t } = useUIKit();
+
+  const { setChatSettingOpen, setChatSearchOpen } = useUIOpenControlState();
+  const { setActiveConversation } = useConversationListState();
+
+  if (system) {
+    return (
+      <View
+        className={cs(classes['chat-header'], className)}
+        style={style}
+      >
+        System Notice
+      </View>
+    );
+  }
+
+  function clearCurrentConversation() {
+    setActiveConversation('');
+    setChatSettingOpen(false);
+    setChatSearchOpen(false);
+  }
+
+  return (
+    <View
+      className={cs(classes['chat-header'], className)}
+      style={style}
+    >
+      <View className={classes['chat-header__container']}>
+        <View className={classes['chat-header__left']}>
+          <button className={cs(classes['icon-button'], classes['chat-header__back-icon'])} onClick={clearCurrentConversation}>
+            <IconChevronLeft
+              onClick={clearCurrentConversation}
+              size="28px"
+            />
+          </button>
+          {
+            Avatar
+              ? (
+                <Avatar src={avatar || ''} />
+              )
+              : (
+                <DefaultAvatar src={avatar || ''} />
+              )
+          }
+          <View className={classes['chat-header__info']}>
+            <View className={classes['chat-header__title']}>
+              {title}
+              {!isGroup && isPeerTyping && (
+                <span className={classes['chat-header__typing-indicator']}>
+                  {' '}
+                  {t('TUIChat.Typing')}
+                </span>
+              )}
+            </View>
+            {!isGroup && enableUserStatus && (userStatus?.statusType === 1
+              ? <View className={classes['chat-header__live']}>{t(`TUIChat.${UserStatus.Online}`)}</View>
+              : <View className={classes['chat-header__live']}>{t(`TUIChat.${UserStatus.Offline}`)}</View>)}
+          </View>
+        </View>
+        <ChatHeaderActions
+          chatHeaderActions={chatHeaderActions}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ChatHeaderUI;

package/src/components/ChatHeader/ChatHeaderUI/index.ts

@@ -0,0 +1,3 @@
+import ChatHeaderUI from './ChatHeaderUI';
+
+export default ChatHeaderUI;

package/src/components/ChatHeader/index.ts

@@ -1,2 +1,2 @@
 export * from './ChatHeader';
-export * from './ChatHeaderDefault';
+export * from './ChatHeaderActions';

package/src/components/Checkbox/index.tsx

@@ -10,7 +10,7 @@ interface onChangeParams {
 
 interface SelectProps {
   checked?: boolean;
-  className?: string;
+  className?: string | undefined;
   onChange?: (data?: onChangeParams) => void;
   value?: any;
   id?: string;

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .info {
   @include theme() {

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

@@ -1,2 +1,2 @@
-@import "./layout.scss";
-@import "./color.scss";
+@forward "./layout";
+@forward "./color";

package/src/components/DivWithEdit/DivWithEdit.tsx

@@ -1,12 +1,12 @@
-import React, {
-  PropsWithChildren, useLayoutEffect, useRef, useState,
+import type {
+  PropsWithChildren } from 'react';
+import { useLayoutEffect, useState,
 } from 'react';
-import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
-
-import './styles/index.scss';
 import { WithSelect } from './WithSelect';
 import { WithText } from './WithText';
+import './styles/index.scss';
+import { IconEdit1 } from '@tencentcloud/uikit-base-component-react';
 
 const elements = {
   text: WithText,
@@ -14,18 +14,18 @@ const elements = {
 };
 
 interface DivWithEditProps {
-  name?: string,
-  value?: string,
-  confirm?: (data?:any) => void,
-  className?: string,
-  classEditName?: string,
-  type?: string,
-  isEdit?: boolean,
-  toggle?: (name:string) => void,
-  close: () => void,
+  name?: string | undefined;
+  value?: string | undefined;
+  confirm?: ((data?: any) => void) | undefined;
+  className?: string | undefined;
+  classEditName?: string | undefined;
+  type?: string | undefined;
+  isEdit?: boolean | undefined;
+  toggle?: ((name: string) => void) | undefined;
+  close: () => void;
 }
 
-export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<T>) {
+export function DivWithEdit<T extends DivWithEditProps>(props: PropsWithChildren<T>) {
   const {
     value: propsValue,
     className,
@@ -49,7 +49,7 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
   }, [propsValue]);
 
   const handleConfirm = (data: any) => {
-    confirm && confirm({
+    confirm?.({
       name,
       value: data,
     });
@@ -63,28 +63,34 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
         close={close}
       >
         {
-        !isEdit && (
-        <div className="show">
-          <p>{value || '-'}</p>
-          <div className="icon">
-            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle && name && toggle(name); }} />
-          </div>
-        </div>
-        )
-      }
+          !isEdit && (
+            <div className="show">
+              <p>{value || '-'}</p>
+              <div 
+                className="icon icon-edit"
+                onClick={() => {
+                  if (toggle && name) {
+                    toggle(name);
+                  }
+              }}>
+                <IconEdit1 />
+              </div>
+            </div>
+          )
+        }
         {
-        isEdit
-        && (
-        <WithEditElements
-          value={value}
-          confirm={handleConfirm}
-          className={classEditName}
-          close={close}
-        >
-          {children}
-        </WithEditElements>
-        )
-      }
+          isEdit
+          && (
+            <WithEditElements
+              value={value}
+              confirm={handleConfirm}
+              className={classEditName}
+              close={close}
+            >
+              {children}
+            </WithEditElements>
+          )
+        }
       </Popup>
     </div>
   );

package/src/components/DivWithEdit/WithSelect.tsx

@@ -3,6 +3,7 @@ import { Icon, IconTypes } from '../Icon';
 
 import './styles/index.scss';
 import { WithEditProps } from './WithText';
+import { IconChevronDown } from '@tencentcloud/uikit-base-component-react';
 
 interface WithSelectProps extends WithEditProps {
   list?: Array<any>,
@@ -19,10 +20,14 @@ export function WithSelect<T extends WithSelectProps>(props:PropsWithChildren<T>
 
   return (
     <div className={`edit ${className}`}>
-      <span>{value}</span>
-      <Icon className="icon" width={12} height={7} type={IconTypes.ARROW_DOWN} onClick={confirm} />
-      <div className="select">
-        {children}
+      <div className='select'>
+        <label>{value}</label>
+        <div className="select-content">
+          {children}
+        </div>
+      </div>
+      <div className='select-btn' onClick={confirm}>
+        <IconChevronDown />
       </div>
     </div>
   );

package/src/components/DivWithEdit/WithText.tsx

@@ -2,6 +2,7 @@ import React, {
   PropsWithChildren, useLayoutEffect, useRef, useState,
 } from 'react';
 import { Icon, IconTypes } from '../Icon';
+import { IconCheck } from '@tencentcloud/uikit-base-component-react';
 
 export interface WithEditProps {
   value?: string,
@@ -40,7 +41,9 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
       {/* // eslint-disable-next-line
       // @ts-ignore */}
       <input ref={inputRef} type="text" value={value} onChange={handleChange} />
-      <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />
+      <div onClick={handleConfirm} >
+        <IconCheck />
+      </div>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .div-with-edit {
   flex: 1;
@@ -21,6 +21,10 @@
     position: relative;
     word-break: break-all;
 
+    p {
+      margin: 0;
+    }
+
     .icon-edit {
       display: none;
     }
@@ -43,11 +47,7 @@
     align-items: center;
     justify-content: space-between;
     position: relative;
-    padding: 0 10px;
-
-    @include theme() {
-      border-bottom: 1px solid get(stroke-color-primary);
-    }
+    // padding: 0 10px;
 
     input {
       flex: 1;
@@ -61,6 +61,14 @@
     }
 
     .select {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .select-content {
       position: absolute;
       min-width: 100%;
       z-index: 2;
@@ -73,7 +81,7 @@
         box-shadow: 0 11px 20px 0 get(shadow-color);
       }
 
-      &-list {
+      .select-list {
         &-item {
           padding: 7px 10px;
 

package/src/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import type React from 'react';
 import './styles/index.scss';
-import { IconTypes } from './type';
 import { ICON_CONFIG } from './config';
+import type { IconTypes } from './type';
 
 const changeTypeToIconComponent = (type: IconTypes) => {
   const src = ICON_CONFIG[type].url || '';
@@ -13,8 +13,8 @@ export interface IconProps {
   type?: IconTypes;
   height?: number;
   width?: number;
-  onClick?: (event: React.BaseSyntheticEvent) => void;
-  className?: string;
+  onClick?: ((event: React.BaseSyntheticEvent) => void) | undefined;
+  className?: string | undefined;
 }
 export function Icon(props: React.PropsWithChildren<IconProps>) {
   const {

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

@@ -1,4 +1,4 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 $primary-color: royalblue;
 
@@ -42,13 +42,13 @@ $primary-color: royalblue;
   animation: circle infinite 1s linear;
 
   @include theme() {
-    border: 3px solid get(text-color-disable);
+    border: 3px solid get(text-color-disabled);
     border-top-color: transparent;
   }
 
   &:hover {
     @include theme() {
-      border: 3px solid get(text-color-disable);
+      border: 3px solid get(text-color-disabled);
       border-top-color: transparent;
     }
   }

package/src/components/IconFont/Icon.module.scss

@@ -0,0 +1,42 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.icon-font {
+  font-family: iconfont, Arial, sans-serif !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: middle;
+  display: inline-block;
+  user-select: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-button {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: none;
+  // inline-flex: keeps button width snug while aligning icon & text
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+
+  @include theme() {
+    color: get(text-color-link);
+    background-color: get(dropdown-color-default);
+
+    &:hover {
+      background-color: get(dropdown-color-hover);
+    }
+
+    &:active {
+      background-color: get(dropdown-color-active);
+    }
+  }
+}

package/src/components/IconFont/Icon.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Button } from '@mui/base/Button';
+import cs from 'classnames';
+import classes from './Icon.module.scss';
+
+interface IBaseIconProps {
+  name: string;
+  size?: number | undefined;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+
+interface IPureIconProps extends IBaseIconProps {
+  variant?: 'icon' | undefined;
+  hotSize?: never;
+  onClick?: never;
+}
+
+interface IButtonIconProps extends IBaseIconProps {
+  variant: 'button';
+  hotSize: number;
+  borderRadius?: number | undefined;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | undefined;
+}
+
+type IconProps = IPureIconProps | IButtonIconProps;
+
+const Icon = React.forwardRef((props: IconProps, ref: React.Ref<HTMLButtonElement>) => {
+  const {
+    name,
+    size = 20,
+    variant = 'icon',
+    hotSize = 0,
+    onClick,
+    className,
+    style,
+  } = props;
+
+  if (variant === 'button') {
+    const { borderRadius } = props as IButtonIconProps;
+    return (
+      <Button
+        ref={ref}
+        className={cs(classes['icon-button'], className)}
+        style={{
+          padding: hotSize,
+          borderRadius,
+          ...style,
+        }}
+        onClick={onClick}
+      >
+        <i
+          className={cs(classes['icon-font'])}
+          style={{ fontSize: size, width: size, height: size }}
+          dangerouslySetInnerHTML={{ __html: name }}
+        />
+      </Button>
+    );
+  }
+
+  const BasicIcon = <i ref={ref} className={cs(classes['icon-font'], className)} style={{ fontSize: size, width: size, height: size, ...style }} dangerouslySetInnerHTML={{ __html: name }} />;
+
+  return BasicIcon;
+});
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/components/IconFont/index.ts

@@ -0,0 +1,3 @@
+import Icon from './Icon';
+
+export default Icon;

package/src/components/Input/Input.tsx

@@ -1,25 +1,26 @@
 /* eslint-disable react/display-name */
+import type { InputHTMLAttributes } from 'react';
 import React, {
-  useRef, useState, useImperativeHandle, InputHTMLAttributes,
+  useRef, useState, useImperativeHandle,
 } from 'react';
-import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
+import './index.scss';
 
 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;
+  className?: string | undefined;
+  inputClassName?: string | undefined;
+  placeholder?: string | undefined;
+  clearable?: boolean | undefined;
+  prefix?: React.ReactNode | undefined;
+  suffix?: React.ReactNode | undefined;
+  value?: InputHTMLAttributes<HTMLInputElement>['value'] | undefined;
+  border?: '' | 'bottom' | undefined;
+  disabled?: boolean | undefined;
+  maxLength?: number | undefined;
+  onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
+  onBlur?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+  onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
+  onKeyDown?: ((event: React.KeyboardEvent<HTMLInputElement>) => void) | undefined;
 }
 export interface InputRef {
   focus: (options?: object) => void;
@@ -63,6 +64,13 @@ export const Input = React.forwardRef<InputRef, InputProps>(
         onKeyDown(e);
       }
     };
+    const focus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus({
+          preventScroll: true,
+        });
+      }
+    };
     const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
@@ -82,13 +90,6 @@ export const Input = React.forwardRef<InputRef, InputProps>(
         onChange?.(e);
       }
     };
-    const focus = () => {
-      if (inputRef.current) {
-        inputRef.current.focus({
-          preventScroll: true,
-        });
-      }
-    };
     useImperativeHandle(ref, () => ({
       focus,
       blur: () => {
@@ -115,7 +116,16 @@ 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/index.scss

@@ -0,0 +1,64 @@
+@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
+
+.tui-kit-input-box {
+  //width: 100%;
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  padding: 0 8px;
+  height: 38px;
+  box-sizing: border-box;
+
+  @include theme() {
+    background-color: get(bg-color-input);
+  }
+
+  &.tui-kit-input-box--focus {
+    @include theme() {
+      outline: 1px solid get(text-color-link);
+    }
+  }
+
+  &.tui-kit-input-border--bottom {
+    outline: none;
+    border-radius: 0;
+
+    @include theme() {
+      border-bottom: 1px solid get(stroke-color-primary);
+      background-color: get(bg-color-operate);
+    }
+  }
+
+  .tui-kit-input {
+    margin-left: 6px;
+    margin-right: auto;
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    border-radius: 10px;
+    border: none;
+    box-sizing: border-box;
+    font-size: 14px;
+    min-width: 0;
+    height: 100%;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
+    &:focus {
+      border: none;
+      outline: none;
+    }
+
+    &::placeholder {
+      padding: 2px 0;
+
+      @include theme() {
+        color: get(text-color-disabled);
+      }
+    }
+  }
+}