@tencentcloud/chat-uikit-react 0.0.1

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo, useState } from 'react';
+import './styles/index.scss';
+import { Conversation } from 'tim-js-sdk';
+import { Icon, IconTypes } from '../Icon';
+import { ConversationCreateUserSelectList } from './ConversationCreateUserSelectList';
+import { ConversationCreatGroupDetail } from './ConversationCreatGroupDetail';
+import { useTUIKitContext } from '../../context';
+import { useConversation } from '../../hooks';
+
+export interface ConversationCreateProps {
+  className?: string,
+  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
+  conversationList?: Array<Conversation>
+}
+export enum PageStateTypes {
+  USER_SELECT='Next',
+  CREATE_DETAIL='Create',
+  GROUP_TYPE='GroupType',
+}
+export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
+  const { className = '', setConversationCreated, conversationList = [] } = props;
+  const [isCreateGroup, setIsCreateGroup] = useState(false);
+  const [pageState, setPageState] = useState<PageStateTypes>(PageStateTypes.USER_SELECT);
+  const [selectList, setSelectList] = useState([]);
+  const { tim } = useTUIKitContext();
+  const { createConversation } = useConversation(tim);
+  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 {
+      setConversationCreated(false);
+    }
+  };
+  return useMemo(() => (
+    <>
+      <div className="tui-conversation-create-header">
+        <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
+        <div className="title">{ !isCreateGroup ? 'New Chat' : 'Add Participants'}</div>
+      </div>
+      {pageState === PageStateTypes.USER_SELECT ? (
+        <ConversationCreateUserSelectList
+          isCreateGroup={isCreateGroup}
+          setIsCreateGroup={setIsCreateGroup}
+          className={className}
+          selectList={selectList}
+          setSelectList={setSelectList}
+          conversationList={conversationList}
+          setConversationCreated={setConversationCreated}
+          setPageState={setPageState}
+        />
+      ) : (
+        <ConversationCreatGroupDetail
+          pageState={pageState}
+          setPageState={setPageState}
+          profileList={selectList.map((item) => item.profile)}
+          createConversation={createConversation}
+          setConversationCreated={setConversationCreated}
+        />
+      )}
+    </>
+  ), [isCreateGroup, selectList, pageState]);
+}

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Profile } from 'tim-js-sdk';
+import { Avatar, defaultUserAvatar } from '../Avatar';
+import './styles/conversationCreateSelectView.scss';
+import { Icon, IconTypes } from '../Icon';
+
+interface ValueProps {
+  profile: Profile,
+  domList: Array<HTMLInputElement>,
+}
+export interface ConversationCreateSelectViewProps{
+  selectList: Array<ValueProps>,
+  setSelectList: React.Dispatch<React.SetStateAction<Array<ValueProps>>>,
+}
+export function ConversationCreateSelectView(props:ConversationCreateSelectViewProps) {
+  const { selectList, setSelectList } = props;
+  const close = (domList, index) => {
+    // eslint-disable-next-line no-param-reassign
+    domList.forEach((dom) => { dom.checked = false; });
+    selectList.splice(index, 1);
+    setSelectList([...selectList]);
+  };
+  return (
+    <div className="conversation-create-select-view">
+      {
+        selectList.map((item, index) => {
+          const { profile, domList } = item;
+          const { nick, userID, avatar } = profile;
+          return (
+            <div className="select-view-info" key={userID}>
+              <Icon
+                height={12}
+                width={12}
+                type={IconTypes.CLOSE}
+                className="select-view-info-close"
+                onClick={() => { close(domList, index); }}
+              />
+              <Avatar image={avatar || defaultUserAvatar} size={40} />
+              <div className="select-view-info-nick">{nick || userID}</div>
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -0,0 +1,158 @@
+import React, { useRef, useState } from 'react';
+import { Conversation } from 'tim-js-sdk';
+import { Input } from '../Input';
+import { Icon, IconTypes } from '../Icon';
+import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from './ConversationCreateSelectView';
+import { Avatar, defaultUserAvatar } from '../Avatar';
+import { useConversationCreate } from './hooks/useConversationCreate';
+import { useTUIKitContext } from '../../context';
+import { PageStateTypes } from './ConversationCreate';
+import { useConversation } from '../../hooks';
+import { Toast } from '../Toast';
+
+export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps{
+  isCreateGroup: boolean,
+  setIsCreateGroup: React.Dispatch<React.SetStateAction<boolean>>,
+  setConversationCreated: React.Dispatch<React.SetStateAction<boolean>>,
+  className: string,
+  conversationList: Array<Conversation>,
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
+}
+export function ConversationCreateUserSelectList(props: ConversationCreateUserSelectListProps) {
+  const {
+    isCreateGroup,
+    selectList,
+    setSelectList,
+    className,
+    conversationList,
+    setIsCreateGroup,
+    setConversationCreated,
+    setPageState,
+  } = props;
+  const [searchValue, setSearchValue] = useState('');
+  const { tim, setActiveConversation } = useTUIKitContext();
+  const [friendList, setFriendList] = useState({});
+  const {
+    getFriendListSortSearchResult,
+  } = useConversationCreate(tim, conversationList, (newFriendListResult) => {
+    setFriendList(newFriendListResult);
+  });
+  const { createConversation } = useConversation(tim);
+  const userCheckedList = useRef(new Map());
+  const searchValueChange = async (e) => {
+    const { value } = e.target;
+    setSearchValue(value);
+    setFriendList(await getFriendListSortSearchResult(value));
+  };
+  const createGroup = () => {
+    setIsCreateGroup(true);
+    userCheckedList.current.clear();
+    setSelectList([]);
+  };
+  const getUserChecked = (userID, dom) => {
+    if (!dom) return;
+    if (!userCheckedList.current.has(userID)) {
+      userCheckedList.current.set(userID, []);
+    }
+    const list = userCheckedList.current.get(userID);
+    if (list.length !== 0 && list.some((item) => item.id === dom.id)) {
+      return;
+    }
+    list.push(dom);
+  };
+  const userSelectListChange = (e, profile, domList = []) => {
+    const { userID } = profile;
+    const { checked } = e.target;
+    // eslint-disable-next-line no-param-reassign
+    domList.forEach((dom) => { dom.checked = checked; });
+    if (checked) {
+      selectList.push({ profile, domList });
+    } else {
+      selectList.splice(selectList.findIndex((item) => item.profile.userID === userID), 1);
+    }
+    setSelectList([...selectList]);
+  };
+  const createC2CConversation = async (profile) => {
+    if (isCreateGroup) return;
+    const { userID } = profile;
+    const conversation = await createConversation(`C2C${userID}`);
+    setConversationCreated(false);
+    setActiveConversation(conversation);
+  };
+  const next = () => {
+    if (selectList && selectList.length === 0) {
+      Toast({ text: 'Participant cannot be empty.', type: 'error' });
+      return;
+    }
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  };
+  return (
+    <>
+      <Input
+        className="tui-conversation-create-search-input"
+        placeholder="Search"
+        clearable
+        value={searchValue}
+        onChange={searchValueChange}
+        prefix={<Icon type={IconTypes.SEARCH} height={16} width={16} />}
+      />
+      {(isCreateGroup) && (
+        <ConversationCreateSelectView selectList={selectList} setSelectList={setSelectList} />
+      )}
+      {!isCreateGroup && (
+        <div role="presentation" className="tui-user" onClick={createGroup}>
+          <Icon type={IconTypes.ADD} />
+          <div className="tui-user-name active">New Group</div>
+        </div>
+      )}
+      <div className={`tui-conversation-create ${className}`}>
+        <div className="tui-conversation-create-container">
+          <div className="tui-group-container">
+            {Object.keys(friendList).map(
+              (key) => friendList[key].length !== 0 && (
+                <div className="tui-group-box" key={key}>
+                  <div className="title">{key}</div>
+                  {friendList[key].map((profile, index) => {
+                    const { userID, nick, avatar } = profile;
+                    return (
+                      <label
+                        role="presentation"
+                        className="tui-user tui-user-checkbox-label"
+                        htmlFor={`userChecked-${key}-${userID}`}
+                        key={userID}
+                        onClick={(e) => {
+                          createC2CConversation(profile);
+                        }}
+                      >
+                        <Avatar size={30} image={avatar || defaultUserAvatar} />
+                        <div className="tui-user-name">{nick || `${userID}` }</div>
+                        {isCreateGroup && (
+                          <input
+                            onChange={(e) => {
+                              userSelectListChange(e, profile, userCheckedList.current.get(userID));
+                            }}
+                            type="checkbox"
+                            ref={(dom) => {
+                              getUserChecked(userID, dom);
+                            }}
+                            id={`userChecked-${key}-${userID}`}
+                            className="tui-user-checkbox"
+                          />
+                        )}
+                      </label>
+                    );
+                  })}
+                </div>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+      {isCreateGroup && (
+        <div className="tui-conversation-create-next-container">
+          <div role="presentation" className="tui-conversation-create-next" onClick={next}>Next</div>
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import './styles/conversationGroupTypeInfo.scss';
+import TIM from 'tim-js-sdk';
+import { PageStateTypes } from './ConversationCreate';
+import { Icon, IconTypes } from '../Icon';
+
+export enum GroupType {
+  Work= TIM.TYPES.GRP_WORK,
+  Public= TIM.TYPES.GRP_PUBLIC,
+  Meeting= TIM.TYPES.GRP_MEETING,
+  AVChatRoom= TIM.TYPES.GRP_AVCHATROOM,
+}
+export interface ConversationGroupTypeInfoProps {
+  groupType: string,
+  setGroupType: React.Dispatch<React.SetStateAction<string>>,
+  setPageState: React.Dispatch<React.SetStateAction<PageStateTypes>>,
+}
+export const typeInfoList = [
+  { type: 'Work', des: 'Users can join the group only via invitation by existing members. The invitation does not need to be agreed by the invitee or approved by the group owner. See the documentation for details.' },
+  { type: 'Public', des: 'After a public group is created, the group owner can designate group admins. To join the group, a user needs to search the group ID and send a request, which needs to be approved by the group owner or an admin before the user can join the group. See the documentation for details.' },
+  { type: 'Meeting', des: 'After the group is created, a user can join and quit the group freely and can view the messages sent before joining the group. It is suitable for scenarios that integrate Tencent Real-Time Communication (TRTC), such as audio and video conferences and online education. See the documentation for details.' },
+  { type: 'AVChatRoom', des: 'After a group is created, a user can join and quit the group freely. The group can have an unlimited number of members, but it does not store message history. It can be combined with Live Video Broadcasting (LVB) to support on-screen comment scenarios. See the documentation for details.' },
+];
+export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps) {
+  const { groupType, setGroupType, setPageState } = props;
+
+  const selectGroupType = (type: string) => {
+    setGroupType(type);
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  };
+  return (
+    <div className="tui-conversation-group-type-info">
+      {typeInfoList.map(({ type, des }) => (
+        <div
+          key={type}
+          role="presentation"
+          className={`group-type-info-box ${type === groupType ? 'group-type-info-box--active' : ''} `}
+          onClick={() => { selectGroupType(type); }}
+        >
+          <div className="group-type-info-title">
+            {type === groupType && <Icon className="box-active-icon" type={IconTypes.RIGHT} width={16} height={16} />}
+            {type}
+          </div>
+          <div className="group-type-info-description">{des}</div>
+        </div>
+      ))}
+      <a className="group-type-info-document" target="_blank" href="https://www.tencentcloud.com/document/product/1047/33515?lang=en&pg=#group-features" rel="bookmark noreferrer">Details</a>
+    </div>
+  );
+}

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import TIM from 'tim-js-sdk';
+import { strChineseFirstPy } from '../static/word';
+import { useProfile } from '../../../hooks';
+
+export const useConversationCreate = (
+  tim,
+  conversationList,
+  setFriendListResultHandler?:(
+    newFriendListResult: object,
+    setFriendListResult: React.Dispatch<React.SetStateAction<{string:Array<object>}>>
+  ) => void,
+) => {
+  const [friendListSortResult, setFriendListSortResult] = useState({});
+  const getFirstLetter = (str: string) => {
+    const temp = str.trim();
+    const uni = temp.charCodeAt(0);
+    if (uni > 40869 || uni < 19968) {
+      return temp.charAt(0);
+    }
+    return strChineseFirstPy.charAt(uni - 19968);
+  };
+  const queryFriendList = async () => {
+    const frequentlyConversationProfile = conversationList.filter(
+      (item) => item.type === TIM.TYPES.CONV_C2C,
+    ).slice(0, 5).map((item) => item.userProfile);
+    const { code, data } = await tim.getFriendList();
+    if (code === 0) {
+      const sortResult = handleData(
+        data.map((item) => item.profile),
+        frequentlyConversationProfile,
+      );
+      setFriendListSortResult(sortResult);
+      if (setFriendListResultHandler) {
+        setFriendListResultHandler(sortResult, setFriendListSortResult);
+      }
+    }
+  };
+  const handleData = (profileList, frequentlyConversationProfile = []) => {
+    const sortResult = {
+      'Frequently Contacted': frequentlyConversationProfile,
+      '#': [],
+    };
+    for (let i = 65; i <= 90; i += 1) {
+      sortResult[String.fromCharCode(i)] = [];
+    }
+    profileList.forEach((profile) => {
+      const { nick, userID } = profile;
+      const first = getFirstLetter(nick || userID);
+      if (first >= 'a' && first <= 'z') {
+        sortResult[first.toLocaleUpperCase()].push(profile);
+      } else if (first < 'A' || first > 'z') {
+        sortResult['#'].push(profile);
+      } else {
+        sortResult[first].push(profile);
+      }
+    });
+    Object.keys(sortResult).forEach((key) => {
+      sortResult[key].sort((a, b) => {
+        const { nick: aNick, userID: aUserID } = a;
+        const { nick: bNick, userID: bUserID } = b;
+        if (aNick || aUserID < bNick || bUserID) {
+          return 1;
+        } if (aNick || aUserID === bNick || bUserID) {
+          return 1;
+        }
+        return -1;
+      });
+    });
+    return sortResult;
+  };
+  const { getUserProfile } = useProfile(tim);
+  const getFriendListSortSearchResult = async (searchValue: string) => {
+    if (!searchValue) return friendListSortResult;
+    const { data: profileList } = await getUserProfile([searchValue]);
+
+    const result = {};
+    let isIncludes = false;
+    Object.keys(friendListSortResult).forEach((key) => {
+      result[key] = friendListSortResult[key].filter(
+        ({ nick, userID }) => {
+          const tempNick = nick.toLocaleLowerCase();
+          const tempSearchValue = searchValue.toLocaleLowerCase();
+          const includes = tempNick
+            ? tempNick.includes(tempSearchValue) : userID.includes(tempSearchValue);
+          isIncludes = isIncludes || includes;
+          return includes;
+        },
+      );
+    });
+    if (process.env?.REACT_APP_ONLINE === 'TencentCloudDemo') {
+      return result;
+    }
+    return !isIncludes ? handleData(profileList) : result;
+  };
+  useEffect(() => {
+    queryFriendList();
+  }, [tim]);
+  return {
+    getFirstLetter,
+    queryFriendList,
+    getFriendListSortSearchResult,
+    friendListSortResult,
+  };
+};

package/src/components/ConversationCreate/index.ts

@@ -0,0 +1,6 @@
+export * from './ConversationCreate';
+export * from './ConversationCreateSelectView';
+export * from './ConversationCreatGroupDetail';
+export * from './ConversationCreateUserSelectList';
+export * from './hooks/useConversationCreate';
+export * from './ConversationGroupTypeInfo';