@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

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

@@ -1,53 +1,93 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.uikit-conversation-create-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-conversation-create {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+}
+
 .tui-conversation-create-header {
-  background-color: #f9fafb;
   display: flex;
   flex-direction: row;
   padding: 16px 20px;
   align-items: center;
   text-align: center;
 
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
   .title {
     margin-left: 10px;
     font-weight: 600;
     font-size: 16px;
-    font-family: PingFangSC-Medium;
     line-height: 32px;
     letter-spacing: -0.41px;
-    color: #000;
+
+    @include theme() {
+      color: get(text-color-primary);
+    }
   }
 }
 
+.tui-conversation-create-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .tui-conversation-create-search-input {
   margin: 10px;
 }
 
 .tui-user {
-  padding: 10px;
+  padding: 6px;
   display: flex;
   align-items: center;
   text-align: center;
   cursor: pointer;
 
   &:hover {
-    background-color: rgba(0, 110, 255, 10%);
+    @include theme() {
+      background-color: get(list-color-hover);
+    }
   }
 
   .tui-user-name {
     margin-left: 10px;
-    font-weight: 400;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
-    line-height: 20px;
-    color: #000;
     width: 80%;
     text-align: left;
 
+    @include theme() {
+      color: get(text-color-primary);
+    }
+
     &.active {
       font-weight: 600;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 20px;
-      color: rgba(3, 101, 249, 100%);
+
+      @include theme() {
+        color: get(text-color-link);
+      }
     }
   }
 }
@@ -71,20 +111,23 @@
   .tui-conversation-create-next {
     cursor: pointer;
     text-align: center;
-    background-color: rgba(3, 101, 249, 100%);
     border-radius: 31px;
     font-size: 14px;
-    font-family: PingFangSC-Medium;
-    line-height: 20px;
     color: #fff;
     padding: 12px 36px;
+
+    @include theme() {
+      background-color: get(text-color-link);
+    }
   }
 }
 
-.tui-conversation-create {
+.tui-conversation-create-select-list-container {
   overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 10px;
 
-  .tui-conversation-create-container {
+  .tui-conversation-create-select-list {
     position: relative;
 
     .tui-group-container {
@@ -95,9 +138,11 @@
       .title {
         font-weight: 600;
         font-size: 14px;
-        font-family: PingFangSC-Medium;
-        line-height: 20px;
         padding: 10px;
+
+        @include theme() {
+          color: get(text-color-primary);
+        }
       }
     }
   }

package/src/components/ConversationList/ConversationList.scss

@@ -0,0 +1,29 @@
+@use "../../styles/colors/color-theme" as *;
+
+.uikit-chat-list {
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  text-align: initial;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+  }
+
+  .uikit-chat-list__header--searching {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .uikit-chat-list__header--creating {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/components/ConversationList/ConversationList.tsx

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

@@ -0,0 +1,16 @@
+@use "../../../styles/colors/color-theme" 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

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

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

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

@@ -0,0 +1,28 @@
+@use "../../../styles/colors/color-theme" 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

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

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

package/src/components/ConversationList/index.ts

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

package/src/components/ConversationPreview/ConversationPreview.scss

@@ -0,0 +1,137 @@
+@use "../../styles/colors/color-theme" 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);
+      }
+    }
+  }
+}