@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/ChatSetting/ChatSetting.tsx

@@ -1,117 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { TUIStore } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { Icon, IconTypes } from '../Icon';
-import { Avatar, defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
-import { Switch } from '../Switch';
-import { useUIManagerStore } from '../../store';
-import { isH5, isPC } from '../../utils/env';
-import { getMessageProfile } from '../ConversationPreview/utils';
-import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-
-import './styles/index.scss';
-
-function UnMemoizedChatSetting<T>(
-): React.ReactElement {
-  const { t } = useUIKit();
-  const [conversation, setConversation] = useState<IConversationModel>();
-  const [profile, setProfile] = useState<any>();
-  const [isPinned, setIsPinned] = useState<boolean>(false);
-  const [forceUpdateCount, setForceUpdateCount] = useState(0);
-  const {
-    conversation: activeConversation,
-    setActiveConversation,
-    TUIManageShow,
-    setTUIManageShow,
-  } = useUIManagerStore('TUIManage');
-
-  const pinChatChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsPinned(e.target.checked);
-    if (conversation?.conversationID) {
-      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
-      conversationModel && conversationModel.pinConversation();
-    }
-  };
-  const handleDelete = () => {
-    if (conversation?.conversationID) {
-      const conversationModel = TUIStore.getConversationModel(conversation?.conversationID);
-      conversationModel && conversationModel.deleteConversation();
-    }
-    setActiveConversation(undefined);
-  };
-  const close = () => {
-    setTUIManageShow && setTUIManageShow(false);
-  };
-  useEffect(() => {
-    setConversation(activeConversation);
-    activeConversation && setProfile(getMessageProfile(activeConversation));
-    setIsPinned(activeConversation ? activeConversation.isPinned : false);
-  }, [activeConversation, forceUpdateCount]);
-  // eslint-disable-next-line
-  // @ts-ignore
-  return (
-    TUIManageShow
-    && activeConversation && (
-      <div className={`tui-manage ${isH5 ? 'tui-h5-manage' : ''}`}>
-        <div className="tui-manage-title">
-          {isPC && (
-            <Icon
-              onClick={close}
-              type={IconTypes.CANCEL}
-              width={9}
-              height={16}
-            />
-          )}
-          {isH5 && (
-            <Icon onClick={close} type={IconTypes.BACK} width={9} height={16} />
-          )}
-          <span style={{ marginLeft: '10px' }}>
-            {t('TUIConversation.Conversation Information')}
-          </span>
-        </div>
-        <div className="tui-manage-container">
-          <div className="tui-manage-info">
-            <div className="info-avatar">
-              <Avatar
-                size={64}
-                image={
-                  profile?.avatar
-                  || (profile?.groupID
-                    ? defaultGroupAvatarWork
-                    : defaultUserAvatar)
-                }
-              />
-            </div>
-            <div className="info-name">{profile?.nick || profile?.name}</div>
-            <div className="info-id">
-              ID:
-              {profile?.userID || profile?.groupID}
-            </div>
-          </div>
-          <div className="tui-manage-handle">
-            <div className="manage-handle-box">
-              <div className="manage-handle-title">
-                {t('TUIConversation.Pin')}
-              </div>
-              <Switch onChange={(e: any) => { pinChatChange(e); }} checked={isPinned} />
-            </div>
-            {isPC && (
-              <div
-                className="manage-handle-box"
-                role="presentation"
-                onClick={handleDelete}
-              >
-                <div className="manage-handle-title red">
-                  {t('TUIConversation.Delete')}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    )
-  );
-}
-
-export const ChatSetting = React.memo(UnMemoizedChatSetting) as unknown as
-typeof UnMemoizedChatSetting;

package/src/components/ChatSetting/index.ts

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

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

@@ -1,104 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-manage {
-  display: flex;
-  flex-direction: column;
-  width: 22%;
-  max-width: 300px;
-  min-width: 200px;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-    border-left: 1px solid get(stroke-color-primary);
-  }
-
-  .red {
-    color: #ff584c !important;
-  }
-
-  .tui-manage-title {
-    display: flex;
-    align-items: center;
-    padding: 24px 10px;
-
-    span {
-      margin-right: 10px;
-      font-weight: 700;
-      font-size: 14px;
-    }
-  }
-
-  .tui-manage-container {
-    .tui-manage-info {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-
-      .info-avatar {
-        margin-top: 40px;
-        margin-bottom: 20px;
-      }
-
-      .info-name {
-        text-align: center;
-        font-weight: 700;
-        font-size: 24px;
-        margin-bottom: 10px;
-      }
-
-      .info-id {
-        font-size: 16px;
-        margin-bottom: 30px;
-        text-align: center;
-
-        @include theme() {
-          color: get(text-color-secondary);
-        }
-      }
-    }
-
-    .tui-manage-handle {
-      .manage-handle-box {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 10px;
-
-        @include theme() {
-          background: get(bg-color-operate);
-        }
-
-        &:nth-child(2) {
-          margin-top: 10px;
-          cursor: pointer;
-        }
-
-        .manage-handle-title {
-          font-size: 16px;
-
-          @include theme() {
-            color: get(text-color-primary);
-          }
-        }
-      }
-    }
-  }
-}
-
-.tui-manage.tui-h5-manage {
-  border-left: none;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  max-width: 100%;
-  min-width: 100%;
-  z-index: 1;
-
-  @include theme() {
-    background: get(bg-color-operate);
-  }
-}

package/src/components/ConversationActions/ConversationActions.scss

@@ -1,45 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-conversation-actions {
-  display: flex;
-  justify-content: flex-end;
-  flex: 1 1;
-
-  .uikit-conversation-actions__container {
-    top: 0;
-    right: 0;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 10%);
-    bottom: initial;
-    padding: 14px 0;
-    box-sizing: border-box;
-    text-align: start;
-    white-space: nowrap;
-
-    .uikit-conversation-actions__item {
-      font-size: 16px;
-      /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-      font-family: PingFangSC-Medium;
-      line-height: 19px;
-      padding: 6px 16px;
-      cursor: pointer;
-      font-weight: 500;
-      box-sizing: border-box;
-
-      &:hover {
-        @include theme() {
-          background-color: get(dropdown-color-active);
-        }
-      }
-    }
-
-    .uikit-conversation-actions__item--delete {
-      @include theme() {
-        color: get(text-color-error);
-      }
-    }
-  }
-
-  .uikit-conversation-actions__popup-icon {
-    transform: scale(1.5);
-  }
-}

package/src/components/ConversationActions/ConversationActions.tsx

@@ -1,172 +0,0 @@
-// ConversationActions.tsx
-import React, { useRef, useEffect } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import cs from 'classnames';
-
-import { Plugins } from '../Plugins';
-import { Icon, IconTypes } from '../Icon';
-
-import './ConversationActions.scss';
-
-interface IConversationActionsConfig {
-  /** Determines whether the pin button appears on the conversation actions list view. (Default: True) */
-  enablePin?: boolean;
-  /**  Determines whether the mute button appears on the conversation actions list view. (Default: True) */
-  enableMute?: boolean;
-  /** Determines whether the delete button appears on the conversation actions list view. (Default: True) */
-  enableDelete?: boolean;
-  /** Function to override the default behavior when user pin or unpin a conversation.  */
-  onConversationPin?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
-  /** Function to override the default behavior when user mute or unmute a conversation. */
-  onConversationMute?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
-  /** Function to override the default behavior when user delete a conversation. */
-  onConversationDelete?: (conversation: IConversationModel, e?: React.MouseEvent) => void;
-  /**
-   * An object containing custom conversation actions (key) and object (value).
-   * Each value is an object with the following properties:
-   * enable: Determines whether the custom action is enabled. (Default: True)
-   * label: The label of the custom action.
-   * onClick: The function to be called when the custom action is clicked.
-   * Note: The key of the custom action must be unique.
-   */
-  customConversationActions?: Record<string, IConversationActionItem>;
-  /** The icon react element to be displayed in the action popup. */
-  PopupIcon?: React.ReactElement;
-  /** An array of react elements to be displayed in the action popup. */
-  PopupElements?: React.ReactElement[];
-  /** The function to be called when the action popup is clicked. */
-  onClick?: (e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void;
-}
-
-interface IConversationActionsProps extends IConversationActionsConfig {
-  /** The conversation model. */
-  conversation: IConversationModel;
-  /** The class name of the root element. */
-  className?: string;
-  /** The style of the root element. */
-  style?: React.CSSProperties;
-}
-
-interface IConversationActionItem {
-  /** Determines whether the custom action is enabled. (Default: True)  */
-  enable?: boolean;
-  /** label: The label of the custom action. */
-  label: string;
-  /** onClick: The function to be called when the custom action is clicked. */
-  onClick: (conversation: IConversationModel, e?: React.MouseEvent) => void;
-}
-
-interface IPluginsRef {
-  closeMore?: () => void;
-}
-
-const ConversationActions = (props: IConversationActionsProps) => {
-  const {
-    conversation,
-    PopupIcon,
-    enablePin = true,
-    enableMute: isMuteEnabled = true,
-    enableDelete: isDeleteEnabled = true,
-    onConversationPin,
-    onConversationMute,
-    onConversationDelete,
-    customConversationActions,
-    PopupElements,
-    onClick,
-    className,
-    style,
-  } = props;
-
-  const { t } = useUIKit();
-  const pluginsRef = useRef<IPluginsRef>(null);
-  const [conversationActions, setConversationActions] = React.useState<Record<string, IConversationActionItem>>({});
-
-  const defaultConversationActions: Record<string, IConversationActionItem> = {
-    delete: {
-      enable: isDeleteEnabled,
-      label: t('TUIConversation.Delete'),
-      onClick: onConversationDelete || ((_conversation: IConversationModel) => { _conversation.deleteConversation(); }),
-    },
-    pin: {
-      enable: enablePin,
-      label: t(conversation.isPinned ? 'TUIConversation.Unpin' : 'TUIConversation.Pin'),
-      onClick: onConversationPin || ((_conversation: IConversationModel) => { _conversation.pinConversation(); }),
-    },
-    mute: {
-      enable: isMuteEnabled,
-      label: t(conversation.isMuted ? 'TUIConversation.Unmute' : 'TUIConversation.Mute'),
-      onClick: onConversationMute || ((_conversation: IConversationModel) => { _conversation.muteConversation(); }),
-    },
-  };
-
-  useEffect(() => {
-    setConversationActions({
-      ...defaultConversationActions,
-      ...customConversationActions,
-    });
-  }, [conversation, customConversationActions]);
-
-  const onClickMenuItem = (e: React.MouseEvent, key: string) => {
-    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
-    onClick?.(e, key, conversation);
-    conversationActions[key]?.onClick(conversation, e);
-  };
-
-  return (
-    <div
-      className={cs({
-        'uikit-conversation-actions': true,
-        className,
-      })}
-      style={style}
-      onClick={(e: React.MouseEvent) => {
-        e.stopPropagation();
-      }}
-    >
-      <Plugins
-        customClass="uikit-conversation-actions__container"
-        ref={pluginsRef}
-        plugins={(
-          PopupElements
-          || (
-            Object.keys(conversationActions).map((key: string) => {
-              if (conversationActions[key].enable === false) return null;
-              return (
-                <div
-                  key={key}
-                  className={cs(
-                    'uikit-conversation-actions__item',
-                    [`uikit-conversation-actions__item--${key}`],
-                  )}
-                  onClick={e => onClickMenuItem(e, key)}
-                >
-                  {conversationActions[key].label}
-                </div>
-              );
-            })
-          )
-        )}
-        showNumber={0}
-        MoreIcon={(
-          PopupIcon
-          || (
-            <Icon
-              className="uikit-conversation-actions__popup-icon"
-              width={16}
-              height={16}
-              type={IconTypes.MORE}
-            />
-          )
-        )}
-      />
-    </div>
-  );
-};
-
-export {
-  ConversationActions,
-  IConversationActionsProps,
-  IConversationActionItem,
-  IConversationActionsConfig,
-};

package/src/components/ConversationActions/index.ts

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

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -1,136 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { CreateGroupParams, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import cs from 'classnames';
-
-import { Icon, IconTypes } from '../Icon';
-import { ConversationCreateButton } from './ConversationCreateButton';
-import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
-import { ConversationCreateGroupDetail } from './ConversationCreateGroupDetail';
-
-import './styles/index.scss';
-
-export interface IConversationCreateProps {
-  visible?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
-  onConversationCreated?: (conversation: IConversationModel) => void;
-  onChangeCreateModelVisible: (visible: boolean) => void;
-  conversationList?: IConversationModel[];
-}
-export enum PageStateTypes {
-  USER_SELECT = 'Next',
-  CREATE_DETAIL = 'Create',
-  GROUP_TYPE = 'GroupType',
-}
-export function ConversationCreate<T extends IConversationCreateProps>(props: T) {
-  const {
-    visible = true,
-    className,
-    style,
-    onChangeCreateModelVisible,
-    conversationList = [],
-    onBeforeCreateConversation,
-    onConversationCreated,
-  } = props;
-  const { t } = useUIKit();
-
-  const [showCreateModel, setShowCreateModel] = useState(false);
-  const [isCreateGroup, setIsCreateGroup] = useState(false);
-  const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
-  const [selectList, setSelectList] = useState([]);
-
-  const _onConversationCreated = (conversation: IConversationModel) => {
-    setShowCreateModel(false);
-    resetCreatePageState();
-    TUIConversationService.switchConversation(conversation.conversationID);
-    onConversationCreated?.(conversation);
-  };
-
-  useEffect(() => {
-    onChangeCreateModelVisible(showCreateModel);
-  }, [onChangeCreateModelVisible, showCreateModel]);
-
-  const back = () => {
-    if (isCreateGroup) {
-      switch (pageState) {
-        case PageStateTypes.USER_SELECT:
-          setIsCreateGroup(false);
-          break;
-        case PageStateTypes.CREATE_DETAIL:
-          setPageState(PageStateTypes.USER_SELECT);
-          setSelectList([]);
-          break;
-        case PageStateTypes.GROUP_TYPE:
-          setPageState(PageStateTypes.CREATE_DETAIL);
-          break;
-        default:
-      }
-    } else {
-      setShowCreateModel(false);
-      resetCreatePageState();
-    }
-  };
-
-  function resetCreatePageState() {
-    setIsCreateGroup(false);
-    setPageState(PageStateTypes.USER_SELECT);
-    setSelectList([]);
-  }
-
-  return useMemo(() => {
-    if (!visible) {
-      return null;
-    }
-
-    return (
-      <div
-        className={cs(
-          'uikit-conversation-create-container',
-          className,
-        )}
-        style={style}
-      >
-        {!showCreateModel && (
-          <ConversationCreateButton
-            onClick={() => setShowCreateModel(true)}
-          />
-        )}
-        {showCreateModel && (
-          <div className="tui-conversation-create">
-            <div className="tui-conversation-create-header">
-              <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
-              <div className="title">{t(!isCreateGroup ? 'TUIConversation.Start chat' : 'TUIConversation.Add Participants')}</div>
-            </div>
-            {
-              pageState === PageStateTypes.USER_SELECT
-                ? (
-                    <ConversationCreateUserSelectList
-                      isCreateGroup={isCreateGroup}
-                      setIsCreateGroup={setIsCreateGroup}
-                      selectList={selectList}
-                      setSelectList={setSelectList as React.Dispatch<React.SetStateAction<any[]>>}
-                      conversationList={conversationList}
-                      onBeforeCreateConversation={onBeforeCreateConversation}
-                      onConversationCreated={_onConversationCreated}
-                      setPageState={setPageState}
-                    />
-                  )
-                : (
-                    <ConversationCreateGroupDetail
-                      pageState={pageState}
-                      setPageState={setPageState}
-                      profileList={selectList.map((item: any) => item?.profile)}
-                      onBeforeCreateConversation={onBeforeCreateConversation}
-                      onConversationCreated={_onConversationCreated}
-                    />
-                  )
-            }
-          </div>
-        )}
-      </div>
-
-    );
-  }, [visible, className, showCreateModel, isCreateGroup, pageState, selectList, conversationList, onBeforeCreateConversation]);
-}

package/src/components/ConversationCreate/ConversationCreateButton.tsx

@@ -1,46 +0,0 @@
-// ConversationSearch.tsx
-import React from 'react';
-import cs from 'classnames';
-import { Icon, IconTypes } from '../Icon';
-import './styles/conversationCreateButton.scss';
-
-interface IConversationCreateButtonProps {
-  visible?: boolean;
-  onClick?: (event: React.BaseSyntheticEvent) => void;
-  height?: number;
-  width?: number;
-  className?: string;
-}
-
-const ConversationCreateButton = (props: IConversationCreateButtonProps) => {
-  const {
-    visible = true,
-    className,
-    onClick,
-    height = 24,
-    width = 24,
-  } = props;
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <div className={cs(
-      'tui-conversation-create-button',
-      className)}
-    >
-      <Icon
-        onClick={onClick}
-        type={IconTypes.CREATE}
-        height={height}
-        width={width}
-      />
-    </div>
-  );
-};
-
-export {
-  ConversationCreateButton,
-  IConversationCreateButtonProps,
-};