@tencentcloud/chat-uikit-react 3.0.2 → 3.4.2

package/src/components/ChatHeader/ChatHeaderActions/ChatHeaderActions.module.scss

@@ -1,44 +0,0 @@
-@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.chat-header-actions {
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-left: auto;
-  gap: 8px;
-
-  &__button {
-    @include theme() {
-      color: get(text-color-link);
-    }
-  }
-}
-
-.icon-button {
-  flex: 0 0 auto;
-  border: none;
-  padding: 4px;
-  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/ChatHeader/ChatHeaderActions/ChatHeaderActions.tsx

@@ -1,105 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { CallMediaType } from '@tencentcloud/call-uikit-react';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import { useUIKit, IconSearch, IconVideoDefault, IconCall1, IconHorizontalMoreTwo } from '@tencentcloud/uikit-base-component-react';
-import { useUIOpenControlState, View, useConversationListState, startCall } from 'tuikit-atomicx-react';
-import cs from 'classnames';
-import classes from './ChatHeaderActions.module.scss';
-
-interface IChatHeaderActionsProps {
-  /** Whether to enable call features */
-  chatHeaderActions?: Array<'videoCall' | 'audioCall' | 'chatSetting' | 'search'> | undefined;
-  /** Additional class names */
-  className?: string | undefined;
-  /** Additional style */
-  style?: React.CSSProperties | undefined;
-}
-
-const ChatHeaderActions = (props: IChatHeaderActionsProps) => {
-  const {
-    chatHeaderActions = ['videoCall', 'audioCall', 'search', 'chatSetting'],
-    className,
-    style,
-  } = props;
-
-  const { searchConfig } = useUIKit();
-
-  const { toggleChatSetting, toggleChatSearch } = useUIOpenControlState();
-  const { activeConversation } = useConversationListState();
-
-  // Check if call feature is available
-  // Check if TUICallKit service is available
-  const isSupportCall: boolean = useMemo<boolean>(() => !!TUICore.getService(TUIConstants.TUICalling.SERVICE.NAME), []);
-  const isGroup: boolean = activeConversation?.type === TUIChatEngine.TYPES.CONV_GROUP;
-
-  // Handle call button click
-  const startCalling = useCallback((callMediaType: CallMediaType) => {
-    // Check if call is supported
-    if (!isSupportCall) {
-      return;
-    }
-
-    // Check if user is available
-    if (!activeConversation?.userProfile?.userID) {
-      throw new Error('User ID is not available in Call.');
-    }
-
-    startCall({
-      callType: activeConversation.type,
-      callMediaType,
-      userIDList: [activeConversation.userProfile.userID],
-    });
-  }, [activeConversation, isSupportCall]);
-
-  const actionButtons = useMemo(() => {
-    const buttonConfig = {
-      videoCall: {
-        icon: <IconVideoDefault size="28px" />,
-        onClick: () => startCalling(CallMediaType.VIDEO),
-        show: isSupportCall && !isGroup,
-      },
-      audioCall: {
-        icon: <IconCall1 size="28px" />,
-        onClick: () => startCalling(CallMediaType.AUDIO),
-        show: isSupportCall && !isGroup,
-      },
-      search: {
-        icon: <IconSearch size="28px" />,
-        onClick: toggleChatSearch,
-        show: !searchConfig?.hideSearch,
-      },
-      chatSetting: {
-        icon: <IconHorizontalMoreTwo size="28px" />,
-        onClick: toggleChatSetting,
-        show: true,
-      },
-    };
-
-    return chatHeaderActions
-      .filter(action => !!buttonConfig[action]?.show)
-      .map((action) => {
-        const config = buttonConfig[action];
-        return (
-          <button
-            key={action}
-            className={cs(classes['icon-button'])}
-            onClick={config.onClick}
-          >
-            {config.icon}
-          </button>
-        );
-      });
-  }, [chatHeaderActions, isSupportCall, startCalling, isGroup, toggleChatSetting]);
-
-  return (
-    <View
-      className={cs(classes['chat-header-actions'], className)}
-      style={style}
-    >
-      {actionButtons}
-    </View>
-  );
-};
-export { ChatHeaderActions };
-export type { IChatHeaderActionsProps };

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

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

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

@@ -1,42 +0,0 @@
-@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

@@ -1,68 +0,0 @@
-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

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

package/src/styles/fonts/icon-font.scss

@@ -1,18 +0,0 @@
-@font-face {
-  font-family: iconfont;
-  src:
-    url("../../assets/fonts/iconfont.woff2") format("woff2"),
-    url("../../assets/fonts/iconfont.woff") format("woff"),
-    url("../../assets/fonts/iconfont.ttf") format("truetype");
-}
-
-.iconfont {
-  font-family: iconfont, Arial, sans-serif !important;
-  font-size: 20px;
-  font-style: normal;
-  line-height: 1;
-  vertical-align: bottom;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0.2px;
-  -moz-osx-font-smoothing: grayscale;
-}