@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/ConversationList/ConversationList.tsx

@@ -1,155 +0,0 @@
-import React, { PropsWithChildren, useState } from 'react';
-import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useConversationList, ConversationListProvider } from '../../context/ConversationListContext';
-import { ConversationListHeader as DefaultConversationListHeader, type IConversationListHeaderProps } from './ConversationListHeader';
-import { ConversationListContent as DefaultConversationListContent, type IConversationListContentProps } from './ConversationListContent';
-import { ConversationSearch as DefaultConversationSearch, type IConversationSearchProps } from '../ConversationSearch';
-import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI, type IConversationPreviewUIProps } from '../ConversationPreview';
-import { ConversationCreate as DefaultConversationCreate, type IConversationCreateProps } from '../ConversationCreate';
-import { ConversationActions as DefaultConversationActions, type IConversationActionsConfig, type IConversationActionsProps } from '../ConversationActions';
-import { PlaceHolder as DefaultPlaceHolder, PlaceHolderTypes } from '../PlaceHolder';
-import { Avatar as DefaultAvatar, AvatarProps } from '../Avatar';
-import { isH5 } from '../../utils/env';
-import cs from 'classnames';
-
-import './ConversationList.scss';
-
-interface IConversationListProps {
-  /** Determines whether the conversation search input appears on the conversation list view. (Default: True) */
-  enableSearch?: boolean;
-  /** Determines whether the conversation creation button appears on the conversation list view. (Default: True) */
-  enableCreate?: boolean;
-  /** Determines whether the conversation action button appears on the conversation list view. (Default: True) */
-  enableActions?: boolean;
-  /** Specifies the prop to customize action on the conversation list item. */
-  actionsConfig?: IConversationActionsConfig;
-  /** Specifies a react component to customize the header of the conversation list. */
-  Header?: React.ComponentType<IConversationListHeaderProps>;
-  /** Specifies a react component to customize the conversation list component. */
-  List?: React.ComponentType<IConversationListContentProps>;
-  /** Specifies a react component to customize the conversation preview. */
-  Preview?: React.ComponentType<IConversationPreviewUIProps>;
-  /** Specifies a react component to customize the conversation create component. */
-  ConversationCreate?: React.ComponentType<IConversationCreateProps>;
-  /** Specifies a react component to customize the conversation search. */
-  ConversationSearch?: React.ComponentType<IConversationSearchProps>;
-  /** Specifies a react component to customize the conversation actions in conversation preview. */
-  ConversationActions?: React.ComponentType<IConversationActionsProps>;
-  /** Specifies a react component to customize the placeholder when the conversation list is empty. */
-  PlaceholderEmptyList?: React.ReactNode;
-  /** Specifies a react component to customize the placeholder when the conversation list is loading. */
-  PlaceholderLoading?: React.ReactNode;
-  /** Specifies a react component to customize the placeholder when the conversation list loaded error. */
-  PlaceholderLoadError?: React.ReactNode;
-  /** Specifies a react component to customize the avatar in list. */
-  Avatar?: React.ComponentType<AvatarProps>;
-  /** Specifies a function to filter conversations in the conversation list. */
-  filter?: (conversationList: IConversationModel[]) => IConversationModel[];
-  /** Specifies a function to sort conversations in the conversation list. */
-  sort?: (conversationList: IConversationModel[]) => IConversationModel[];
-  /** Specifies the prop to receive callback when a user clicks a conversation in the conversation list. */
-  onSelectConversation?: (conversation: IConversationModel) => void;
-  /** Specifies the prop to execute custom operations before creating a channel. */
-  onBeforeCreateConversation?: (params: string | CreateGroupParams) => string | CreateGroupParams;
-  /** Specifies the prop to receive callback when a conversation is created. */
-  onConversationCreated?: (conversation: IConversationModel) => void;
-  /** The custom class name */
-  className?: string;
-  /** The custom css style */
-  style?: React.CSSProperties;
-}
-
-function ConversationListComponent<T extends IConversationListProps>(
-  props: T,
-): React.ReactElement {
-  const {
-    enableSearch = true,
-    enableCreate = true,
-    enableActions = true,
-    actionsConfig,
-    Header = DefaultConversationListHeader,
-    List = DefaultConversationListContent,
-    Preview = DefaultConversationPreviewUI,
-    ConversationCreate = DefaultConversationCreate,
-    ConversationSearch = DefaultConversationSearch,
-    ConversationActions = DefaultConversationActions,
-    PlaceholderEmptyList = <DefaultPlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} />,
-    PlaceholderLoading = <DefaultPlaceHolder type={PlaceHolderTypes.LOADING} />,
-    PlaceholderLoadError = <DefaultPlaceHolder type={PlaceHolderTypes.WRONG} />,
-    Avatar = DefaultAvatar,
-    onSelectConversation,
-    onBeforeCreateConversation,
-    onConversationCreated,
-    className,
-    style,
-  } = props;
-
-  const {
-    conversationList,
-    filteredAndSortedConversationList,
-    isLoading,
-    isLoadError,
-  } = useConversationList();
-
-  const [isCreateModelShow, setIsCreateModelShow] = useState(false);
-
-  return (
-    <div
-      className={cs(className, 'uikit-chat-list', {
-        'uikit-chat-list--mobile': isH5,
-      })}
-      style={style}
-    >
-      <Header>
-        <ConversationSearch
-          visible={enableSearch}
-          conversationList={conversationList}
-          Avatar={Avatar}
-          ResultPreview={ConversationPreview}
-        />
-        <ConversationCreate
-          className={cs({
-            'uikit-chat-list__header--creating': isCreateModelShow,
-          })}
-          visible={enableCreate}
-          onChangeCreateModelVisible={visible => setIsCreateModelShow(visible)}
-          onBeforeCreateConversation={onBeforeCreateConversation}
-          onConversationCreated={onConversationCreated}
-        />
-      </Header>
-      <List
-        empty={filteredAndSortedConversationList.length === 0}
-        loading={isLoading}
-        error={isLoadError}
-        PlaceholderEmptyList={PlaceholderEmptyList}
-        PlaceholderLoadError={PlaceholderLoadError}
-        PlaceholderLoading={PlaceholderLoading}
-      >
-        {filteredAndSortedConversationList.map((conversation: IConversationModel) => (
-          <ConversationPreview
-            key={conversation.conversationID}
-            conversation={conversation}
-            enableActions={enableActions}
-            Preview={Preview}
-            Avatar={Avatar}
-            ConversationActions={ConversationActions}
-            onSelectConversation={onSelectConversation}
-            actionsConfig={actionsConfig}
-          />
-        ))}
-      </List>
-    </div>
-  );
-}
-
-function ConversationList<T extends IConversationListProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  return (
-    <ConversationListProvider filter={props.filter} sort={props.sort}>
-      <ConversationListComponent {...props} />
-    </ConversationListProvider>
-  );
-}
-
-export { ConversationList, IConversationListProps };

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -1,16 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-chat-list__container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden auto;
-  box-sizing: border-box;
-  min-width: 0;
-  text-align: initial;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-  }
-}

package/src/components/ConversationList/ConversationListContent/ConversationListContent.tsx

@@ -1,63 +0,0 @@
-import cs from 'classnames';
-import { PlaceHolder, PlaceHolderTypes } from '../../PlaceHolder';
-import './ConversationListContent.scss';
-
-interface IConversationListContentProps {
-  /** Renders a customized component in the conversation list main. */
-  children: React.ReactNode;
-  /** Indicates whether the chat list is empty */
-  empty?: boolean;
-  /** Indicates whether the chat list is currently loading */
-  loading?: boolean;
-  /** Indicates whether there was an error loading the chat list */
-  error?: boolean;
-  /** A custom component to display when the chat list is empty */
-  PlaceholderEmptyList?: React.ReactNode;
-  /** A custom component to display while the chat list is loading */
-  PlaceholderLoading?: React.ReactNode;
-  /** A custom component to display when there is an error loading the chat list */
-  PlaceholderLoadError?: React.ReactNode;
-  /** The custom class name */
-  className?: string;
-  /** The custom css style */
-  style?: React.CSSProperties;
-}
-
-function ConversationListContent<T extends IConversationListContentProps>(
-  props: T,
-): React.ReactElement {
-  const {
-    children,
-    empty = false,
-    loading = false,
-    error = false,
-    PlaceholderEmptyList = <PlaceHolder type={PlaceHolderTypes.NO_CONVERSATIONS} />,
-    PlaceholderLoading = <PlaceHolder type={PlaceHolderTypes.LOADING} />,
-    PlaceholderLoadError = <PlaceHolder type={PlaceHolderTypes.WRONG} />,
-    className,
-    style,
-  } = props;
-
-  let content;
-
-  if (error) {
-    content = PlaceholderLoadError;
-  } else if (loading) {
-    content = PlaceholderLoading;
-  } else if (empty) {
-    content = PlaceholderEmptyList;
-  } else {
-    content = children;
-  }
-
-  return (
-    <div
-      className={cs('uikit-chat-list__container', className)}
-      style={style}
-    >
-      {content}
-    </div>
-  );
-}
-
-export { ConversationListContent, IConversationListContentProps };

package/src/components/ConversationList/ConversationListContent/index.ts

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

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.scss

@@ -1,28 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-chat-list__header {
-  display: flex;
-  overflow: hidden;
-  flex-direction: row;
-  justify-content: flex-end;
-  box-sizing: border-box;
-  min-width: 0;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-    color: get(text-color-primary);
-  }
-
-  .uikit-conversation-search + .uikit-conversation-create-container .uikit-conversation-create-button {
-    margin-left: 0;
-  }
-
-  .uikit-chat-list__header__left,
-  .uikit-chat-list__header__right {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-  }
-}

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.tsx

@@ -1,43 +0,0 @@
-import cs from 'classnames';
-import './ConversationListHeader.scss';
-
-interface IConversationListHeaderProps {
-  /** The main of the conversation list header */
-  children: React.ReactNode;
-  /** A custom component to display in the left area of header */
-  left?: React.ReactNode;
-  /** A custom component to display in the right area of header */
-  right?: React.ReactNode;
-  /** The custom class name */
-  className?: string;
-  /** The custom css style */
-  style?: React.CSSProperties;
-}
-
-function ConversationListHeader<T extends IConversationListHeaderProps>(
-  props: T,
-): React.ReactElement {
-  const {
-    children,
-    left,
-    right,
-    className,
-    style,
-  } = props;
-
-  return (
-    <div
-      className={cs(
-        'uikit-chat-list__header',
-        className,
-      )}
-      style={style}
-    >
-      <div className="uikit-chat-list__header__left">{left}</div>
-      {children}
-      <div className="uikit-chat-list__header__right">{right}</div>
-    </div>
-  );
-}
-
-export { ConversationListHeader, IConversationListHeaderProps };

package/src/components/ConversationList/ConversationListHeader/index.ts

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

package/src/components/ConversationList/index.ts

@@ -1,3 +0,0 @@
-export * from './ConversationList';
-export * from './ConversationListHeader';
-export * from './ConversationListContent';

package/src/components/ConversationPreview/ConversationPreview.scss

@@ -1,137 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.uikit-conversation-preview {
-  display: flex;
-  align-items: center;
-  border: none;
-  height: 64px;
-  cursor: pointer;
-  line-height: 17px;
-  padding: 0 20px;
-  flex: 0 0 auto;
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: PingFangSC-Medium;
-
-  @include theme() {
-    background-color: get(list-color-default);
-    color: get(text-color-primary);
-  }
-
-  &:hover {
-    @include theme() {
-      background-color: get(list-color-hover);
-    }
-  }
-
-  &.uikit-conversation-preview--mobile {
-    padding: 0 10px;
-  }
-
-  &.uikit-conversation-preview--pin {
-    @include theme() {
-      background-color: get(list-color-hover);
-    }
-  }
-
-  &.uikit-conversation-preview--active {
-    @include theme() {
-      background-color: get(list-color-active);
-    }
-
-    .uikit-conversation-preview__title {
-      @include theme() {
-        color: get(text-color-link);
-      }
-    }
-  }
-
-  &.uikit-conversation-preview--unread {
-    .uikit-conversation-preview__unread {
-      color: #fff;
-
-      @include theme() {
-        background-color: get(text-color-error);
-      }
-    }
-  }
-
-  .uikit-conversation-preview__content {
-    flex: 1 1 auto;
-    text-align: left;
-    margin-left: 10px;
-    min-width: 0;
-
-    .uikit-conversation-preview__title {
-      font-style: normal;
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 17px;
-      padding: 1px 0;
-      width: 100%;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-
-      .uikit-conversation-preview__title--normal {
-        @include theme() {
-          color: get(text-color-primary);
-        }
-      }
-
-      .uikit-conversation-preview__title--highlight {
-        @include theme() {
-          color: get(text-color-link);
-        }
-      }
-    }
-
-    .uikit-conversation-preview__abstract {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-
-  .uikit-conversation-preview__external {
-    text-align: right;
-    flex: 0 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    .uikit-conversation-preview__unread {
-      box-sizing: border-box;
-      height: 16px;
-      border-radius: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 2px 5px;
-      font-size: 11px;
-      font-weight: 700;
-      margin: 2px 0 2px auto;
-    }
-
-    .uikit-conversation-preview__time {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 14px;
-      padding: 1px 0;
-      text-wrap: nowrap;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-}