@tencentcloud/chat-uikit-react 3.0.0 → 3.0.2

package/src/components/Contact/ContactList/index.scss

@@ -1,111 +0,0 @@
-@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-contacts-list {
-  flex: 1 1 auto;
-  min-width: 360px;
-  max-width: 360px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-  overflow: hidden scroll;
-
-  @include theme() {
-    color: get(text-color-primary);
-  }
-
-  .tui-contacts-title {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .tui-contacts-list-title {
-    display: flex;
-    padding: 10px 20px;
-    cursor: pointer;
-  }
-
-  .tui-contacts-list-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 20px;
-
-    .contacts-list-icon {
-      font-size: 12px;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-    }
-  }
-
-  .tui-contacts-list-item {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    padding: 10px 20px;
-    text-align: center;
-    font-size: 14px;
-
-    .tui-contacts-list-item-card {
-      display: flex;
-      padding: 0 10px;
-      overflow: hidden;
-      align-items: center;
-      justify-content: space-between;
-      flex: 1;
-    }
-
-    .tui-contacts-list-item-container {
-      margin-left: 10px;
-    }
-
-    .text-ellipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .tui-contacts-list-item-text {
-      color: #999;
-      font-size: 12px;
-      text-align: left;
-
-      @extend .text-ellipsis;
-    }
-
-    .tui-contacts-list-btn-text {
-      color: #999;
-      font-size: 12px;
-      text-align: left;
-    }
-
-    .tui-contacts-list-item-name {
-      @extend .text-ellipsis;
-    }
-  }
-
-  .application-btn {
-    width: 30px;
-    height: 14px;
-    padding: 5px;
-    border-radius: 15px;
-    font-size: 10px;
-    text-align: center;
-    line-height: 14px;
-    letter-spacing: 0;
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    border: 1px solid #006eff;
-    background: #006eff;
-    color: #fff;
-  }
-}
-
-.tui-contacts-list-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
-}

package/src/components/Contact/hooks/useTUIContact.tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import TUIChatEngine, {
-  TUIStore,
-  StoreName,
-  IGroupModel,
-} from '@tencentcloud/chat-uikit-engine';
-import { useUIManagerState } from '../../../states';
-
-function useTUIContact() {
-  const { chat } = useUIManagerState();
-  const [friendList, setFriendList] = useState([]);
-  const [blockList, setBlockList] = useState([]);
-  const [friendApplicationList, setFriendApplicationList] = useState([]);
-  const [blocklistProfile, setBlocklistProfile] = useState([]);
-  const [groupList, setGroupList] = useState<IGroupModel[]>();
-
-  const [isShowContactList, setShowContactList] = useState(true);
-
-  useEffect(() => {
-    TUIStore.watch(StoreName.GRP, {
-      groupList: onGroupListUpdated,
-    });
-    getFriendList();
-    getBlocklist();
-    getFriendApplicationList();
-  }, [chat]);
-
-  const onGroupListUpdated = (list: IGroupModel[]) => {
-    setGroupList(list);
-  };
-  useEffect(() => {
-    chat?.on(TUIChatEngine.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
-    chat?.on(TUIChatEngine.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
-    chat?.on(
-      TUIChatEngine.EVENT.FRIEND_APPLICATION_LIST_UPDATED,
-      onFriendApplicationListUpdated,
-    );
-  }, [chat]);
-  const getFriendApplicationList = async () => {
-    const { data } = await chat.getFriendApplicationList();
-    setFriendApplicationList(data?.friendApplicationList);
-  };
-
-  const getFriendList = async () => {
-    const { code, data } = await chat?.getFriendList();
-    if (code === 0) {
-      setFriendList(data);
-    }
-  };
-  const getBlocklist = async () => {
-    const { data: _blocklist } = await chat?.getBlacklist();
-    if (_blocklist.length === 0) {
-      return;
-    }
-    setBlockList(_blocklist);
-    getBlocklistProfile(_blocklist);
-  };
-
-  const getBlocklistProfile = async (_blocklist: string[]) => {
-    const { data } = await chat.getUserProfile({
-      userIDList: _blocklist,
-    });
-    setBlocklistProfile(data);
-  };
-  const onFriendApplicationListUpdated = (event: any) => {
-    setFriendApplicationList(event?.data?.friendApplicationList);
-  };
-  const onBlocklistUpdated = (event: any) => {
-    setBlockList(event.data);
-    getBlocklistProfile(event.data);
-  };
-
-  const onFriendListUpdated = (event: any) => {
-    setFriendList(event.data);
-  };
-
-  return {
-    friendList,
-    groupList,
-    blocklistProfile,
-    friendApplicationList,
-    blockList,
-    isShowContactList,
-    setShowContactList,
-  };
-}
-
-export default useTUIContact;

package/src/components/Contact/index.scss

@@ -1,91 +0,0 @@
-@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-contacts {
-  height: 100%;
-  min-width: 360px;
-  max-width: 360px;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  text-align: initial;
-  overflow: hidden;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  .tui-contacts-header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 10px 20px 10px 10px;
-  }
-
-  .tui-contact-input {
-    width: 100%;
-  }
-
-  .tui-contacts-add {
-    color: #147aff;
-    font-size: 20px;
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    text-align: center;
-
-    .tui-conversation-create-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .tui-contacts-add-header {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding: 16px 20px;
-    text-align: center;
-    margin-bottom: 10px;
-
-    @include theme() {
-      background-color: get(bg-color-operate);
-    }
-
-    .tui-contacts-add-header-title {
-      font-size: 20px;
-      font-weight: 600;
-      margin-left: 10px;
-
-      @include theme() {
-        color: get(text-color-primary);
-      }
-    }
-  }
-
-  .no-result {
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    &-icon {
-      margin: 100px auto 50px;
-    }
-
-    &-message {
-      font-size: 16px;
-      line-height: 22px;
-
-      @include theme() {
-        color: get(text-color-secondary);
-      }
-    }
-  }
-}
-
-.tui-contacts-h5 {
-  min-width: 100%;
-  width: 100%;
-  max-width: 100%;
-}

package/src/components/Contact/index.ts

@@ -1,3 +0,0 @@
-export * from './ContactList/ContactList';
-export * from './ContactInfo/ContactInfo';
-export * from './Contact';

package/src/components/ContactSearch/ContactSearch.tsx

@@ -1,102 +0,0 @@
-import React, { useState } from 'react';
-import { useUIKit } from '@tencentcloud/uikit-base-component-react';
-import { defaultUserAvatar } from '../../constant/avatar';
-import { useTUIContactContext } from '../../context';
-import { useUIManagerState } from '../../states';
-import { Icon, IconTypes } from '../Icon';
-import { Input } from '../Input';
-import useContactSearch from './hooks/useContactSearch';
-import './index.scss';
-import { Avatar } from 'tuikit-atomicx-react';
-
-export function UnMemoizedContactSearch<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManagerState('TUIContactSearch');
-  const { t } = useUIKit();
-  const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
-  const [isShowSearchResult, setShowSearchResult] = useState(false);
-  const { checkFriend, isBlock, getUserProfile } = useContactSearch();
-  const [searchedValue, setSearchedValue] = useState('');
-  const [searchResult, setSearchResult] = useState([]);
-
-  const searchValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target?.value === '') {
-      setShowContactList && setShowContactList(true);
-      setShowSearchResult(false);
-      setSearchResult([]);
-      return;
-    }
-    setShowSearchResult(true);
-    setSearchedValue(e.target?.value);
-    setShowContactList && setShowContactList(false);
-  };
-
-  const searchValueBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchedValue(e.target?.value);
-  };
-
-  const onFocusSearch = () => {
-    setActiveContact();
-  };
-
-  const getUserProfileHandler = async () => {
-    if (searchedValue) {
-      getUserProfile(searchedValue).then((res: any) => {
-        const { data: userProfile } = res;
-        setSearchResult(userProfile);
-      });
-    }
-  };
-  const setContactProfile = async (profile: any) => {
-    const isFriend = await checkFriend(profile);
-    if (isFriend) {
-      const friendProfile = friendList?.find(item => item.userID === searchedValue);
-      friendProfile && setActiveContact({ type: 'friend', data: friendProfile });
-      return;
-    }
-    if (isBlock(profile.userID)) {
-      setActiveContact({ type: 'block', data: profile });
-      return;
-    }
-    setActiveContact({ type: 'addFriend', data: profile });
-  };
-  return (
-    <div className="tui-contact-search">
-      <Input
-        className="tui-contact-search-input"
-        placeholder={t('TUIContact.Enter a userID')}
-        clearable
-        value={searchedValue}
-        onBlur={searchValueBlur}
-        onFocus={onFocusSearch}
-        onChange={searchValueChange}
-        onKeyDown={getUserProfileHandler}
-        prefix={<Icon type={IconTypes.SEARCH} height={16} width={16} />}
-      />
-      {isShowSearchResult && searchResult.length === 0
-        ? (
-          <div className="tui-contact-search-item">
-            {t('TUIContact.No Result')}
-
-          </div>
-        )
-        : searchResult.map((item, index) => {
-          const { userID, avatar, nick } = item;
-          return (
-            <div
-              className="tui-contact-search-item"
-              role="button"
-              tabIndex={0}
-              key={userID}
-              onClick={() => {
-                setContactProfile(item);
-              }}
-            >
-              <Avatar src={avatar || defaultUserAvatar} />
-              <div className="search-item-name">{nick || userID}</div>
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-export const ContactSearch = React.memo(UnMemoizedContactSearch);

package/src/components/ContactSearch/hooks/useContactSearch.tsx

@@ -1,31 +0,0 @@
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { useTUIContactContext } from '../../../context';
-import { useUIManagerState } from '../../../states';
-
-function useContactSearch() {
-  const { blockList } = useTUIContactContext('TUIContactList');
-  const { chat } = useUIManagerState();
-
-  const checkFriend = (info: any): Promise<any> => chat.checkFriend({
-    userIDList: [info?.userID],
-    type: TUIChatEngine.TYPES.SNS_CHECK_TYPE_BOTH,
-  }).then((res: any) => res?.data?.successUserIDList[0]?.relation
-    === TUIChatEngine.TYPES.SNS_TYPE_BOTH_WAY);
-
-  const isBlock = (userID: string) => (
-    blockList?.includes(userID)
-  );
-  const getUserProfile = (userID: string) => (
-    chat.getUserProfile({
-      userIDList: [userID],
-    })
-  );
-
-  return {
-    checkFriend,
-    isBlock,
-    getUserProfile,
-  };
-}
-
-export default useContactSearch;

package/src/components/ContactSearch/index.scss

@@ -1,33 +0,0 @@
-@use "@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-contact-search {
-  width: 100%;
-  position: relative;
-  text-align: initial;
-  align-items: center;
-  justify-content: space-between;
-
-  .tui-contact-search-input {
-    margin: 0 10px;
-  }
-
-  .tui-contact-search-text {
-    color: #147aff;
-    font-size: 14px;
-  }
-
-  .tui-contact-search-item {
-    position: absolute;
-    margin: 10px 20px;
-    display: flex;
-    align-items: center;
-
-    @include theme() {
-      color: get(text-color-primary);
-    }
-
-    .search-item-name {
-      padding-left: 10px;
-    }
-  }
-}