@tencentcloud/chat-uikit-react 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -44
- package/dist/cjs/components/ConversationCreate/ConversationCreatGroupDetail.js +1 -1
- package/dist/esm/components/ConversationCreate/ConversationCreatGroupDetail.js +1 -1
- package/package.json +1 -1
- package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx +4 -1
package/README.md
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
_English | [简体中文](readme.zh_cn.md)_
|
|
1
2
|
# [chat-uikit-react](https://www.tencentcloud.com/document/product/1047/34279/)
|
|
2
3
|
>chat-uikit-react is a UI component library based on Tencent Cloud IM SDK. It provides universal UI components to offer features such as conversation, chat, relationship chain, group, and audio/video call features.
|
|
3
4
|
With these UI components, you can quickly build your own business logic.
|
|
@@ -14,6 +15,7 @@ We have built demos to illustrate the chatting feature.
|
|
|
14
15
|
|
|
15
16
|
You can preview these [demos](https://web.sdk.qcloud.com/im/demo/intl/index.html) on our website and obtain their [open source code](https://github.com/TencentCloud/chat-uikit-react) in GitHub.
|
|
16
17
|
|
|
18
|
+
|
|
17
19
|
## Running Demo
|
|
18
20
|
|
|
19
21
|
### Step 1. Download the source code
|
|
@@ -48,50 +50,6 @@ $ npm run start
|
|
|
48
50
|
4. Enter a message in the input box and press **Enter** to send it.
|
|
49
51
|
|
|
50
52
|
|
|
51
|
-
## Integrating chat-uikit-react
|
|
52
|
-
|
|
53
|
-
### Step 1. Installation
|
|
54
|
-
```
|
|
55
|
-
$ npm install @tencentcloud/chat-uikit-react
|
|
56
|
-
```
|
|
57
|
-
### Step 2. Usage
|
|
58
|
-
```tsx
|
|
59
|
-
import React, { useEffect, useState } from 'react';
|
|
60
|
-
import { TUIKit } from '@tencentcloud/chat-uikit-react';
|
|
61
|
-
import '@tencentcloud/chat-uikit-react/dist/cjs/index.css';
|
|
62
|
-
import TIM, { ChatSDK } from 'tim-js-sdk/tim-js-friendship';
|
|
63
|
-
import TIMUploadPlugin from 'tim-upload-plugin';
|
|
64
|
-
|
|
65
|
-
// Create TIM instance and log in
|
|
66
|
-
const init = async () => {
|
|
67
|
-
return new Promise((resolve, reject) => {
|
|
68
|
-
const tim = TIM.create({ SDKAppID: 0 });
|
|
69
|
-
tim?.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });
|
|
70
|
-
const onReady = () => { resolve(tim); };
|
|
71
|
-
tim.on(TIM.EVENT.SDK_READY, onReady);
|
|
72
|
-
tim.login({
|
|
73
|
-
userID: 'xxx',
|
|
74
|
-
userSig: 'xxx',
|
|
75
|
-
});
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
export function SampleChat() {
|
|
80
|
-
const [tim, setTim] = useState<ChatSDK>();
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
(async ()=>{
|
|
83
|
-
const tim = await init()
|
|
84
|
-
setTim(tim)
|
|
85
|
-
})()
|
|
86
|
-
}, [])
|
|
87
|
-
|
|
88
|
-
return (
|
|
89
|
-
<div style={{height: '100vh',width: '100vw'}}>
|
|
90
|
-
<TUIKit tim={tim}></TUIKit>
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
}
|
|
94
|
-
```
|
|
95
53
|
### Quick links
|
|
96
54
|
- [Web demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)
|
|
97
55
|
- [Client APIs](https://www.tencentcloud.com/document/product/1047/33999)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),a=require("../Input/Input.js"),s=require("../Icon/Icon.js"),n=require("../Icon/type.js"),i=require("../Avatar/Avatar.js"),o=require("../Avatar/default.js"),u=require("./ConversationCreate.js"),c=require("./ConversationGroupTypeInfo.js"),p=require("../../context/TUIKitContext.js");require("../../context/TUIMessageContext.js"),exports.ConversationCreatGroupDetail=function(l){var d=this,g=l.profileList,v=l.pageState,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),r=require("react"),a=require("../Input/Input.js"),s=require("../Icon/Icon.js"),n=require("../Icon/type.js"),i=require("../Avatar/Avatar.js"),o=require("../Avatar/default.js"),u=require("./ConversationCreate.js"),c=require("./ConversationGroupTypeInfo.js"),p=require("../../context/TUIKitContext.js");require("../../context/TUIMessageContext.js"),exports.ConversationCreatGroupDetail=function(l){var d=this,g=l.profileList,v=l.pageState,m=l.setPageState,x=l.createConversation,_=l.setConversationCreated,f=p.useTUIKitContext(),h=f.setActiveConversation,j=f.myProfile,C=e.__spreadArray([],g,!0);C.unshift(j);var I=C.map((function(e){return e.nick||e.userID})).toString(),b=r.useState(I.length>=15?"".concat(I.slice(0,12),"..."):I),y=b[0],N=b[1],G=r.useState(""),A=G[0],T=G[1],q=r.useState("Work"),P=q[0],k=q[1],S=function(e,t){var r=e.target.value;switch(t){case"name":N(r);break;case"id":T(r);break;case"type":k(r)}};return v!==u.PageStateTypes.GROUP_TYPE?t.jsxs(t.Fragment,{children:[t.jsxs("div",e.__assign({className:"tui-conversation-create-group-detail"},{children:[t.jsx("div",e.__assign({className:"create-group-box create-group-name"},{children:t.jsx(a.Input,{maxLength:15,value:y,onChange:function(e){S(e,"name")},border:"bottom",customClassName:"input-group-name",clearable:!0,prefix:t.jsx("div",e.__assign({className:"input-group-title"},{children:"Group Name"}))})})),t.jsx("div",e.__assign({className:"create-group-box create-group-id"},{children:t.jsx(a.Input,{border:"bottom",customClassName:"input-group-text",clearable:!0,value:A,onChange:function(e){S(e,"id")},prefix:t.jsx("div",e.__assign({className:"input-group-title"},{children:"Group ID"}))})})),t.jsx("div",e.__assign({className:"create-group-box create-group-type"},{children:t.jsx(a.Input,{disabled:!0,border:"bottom",customClassName:"input-group-text",prefix:t.jsx("div",e.__assign({className:"input-group-title"},{children:"Group of type"})),suffix:t.jsx(s.Icon,{onClick:function(){m(u.PageStateTypes.GROUP_TYPE)},type:n.IconTypes.ARROW_RIGHT,width:7,height:12}),value:P,onChange:function(e){S(e,"type")}})})),t.jsx("div",e.__assign({className:"create-group-illustrate"},{children:c.typeInfoList.find((function(e){return e.type===P})).des})),t.jsxs("div",e.__assign({className:"create-group-portrait"},{children:[t.jsx("div",e.__assign({className:"create-group-portrait-title"},{children:"Participants"})),t.jsx("div",e.__assign({className:"create-group-portrait-info-container"},{children:g.map((function(r){var a=r.avatar,s=r.userID,n=r.nick;return t.jsxs("div",e.__assign({className:"create-group-portrait-info"},{children:[t.jsx(i.Avatar,{shape:"square",size:50,image:a||o.defaultUserAvatar}),t.jsx("div",e.__assign({className:"create-group-portrait-info-nick"},{children:n}))]}),s)}))}))]}))]})),t.jsx("div",e.__assign({className:"tui-conversation-create-next-container"},{children:t.jsx("div",e.__assign({role:"presentation",className:"tui-conversation-create-next",onClick:function(){return e.__awaiter(d,void 0,void 0,(function(){var t,r,a;return e.__generator(this,(function(e){switch(e.label){case 0:return t=g.map((function(e){return{userID:e.userID}})),r=function(e){switch(e){case"Work":return o.defaultGroupAvatarWork;case"Public":return o.defaultGroupAvatarPublic;case"Meeting":return o.defaultGroupAvatarMeeting;case"AVChatRoom":return o.defaultGroupAvatarAVChatRoom;default:return""}}(P),[4,x({name:y,type:c.GroupType[P],groupID:A,avatar:r,memberList:t})];case 1:return a=e.sent(),h(a),_(!1),[2]}}))}))}},{children:"Create"}))}))]}):t.jsx(c.ConversationGroupTypeInfo,{groupType:P,setGroupType:k,setPageState:m})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__spreadArray as e,__assign as t,__awaiter as r,__generator as a}from"tslib";import{jsxs as
|
|
1
|
+
import{__spreadArray as e,__assign as t,__awaiter as r,__generator as a}from"tslib";import{jsxs as i,Fragment as o,jsx as n}from"react/jsx-runtime";import{useState as c}from"react";import{Input as s}from"../Input/Input.js";import{Icon as u}from"../Icon/Icon.js";import{IconTypes as p}from"../Icon/type.js";import{Avatar as l}from"../Avatar/Avatar.js";import{defaultUserAvatar as m,defaultGroupAvatarAVChatRoom as d,defaultGroupAvatarMeeting as f,defaultGroupAvatarPublic as v,defaultGroupAvatarWork as g}from"../Avatar/default.js";import{PageStateTypes as h}from"./ConversationCreate.js";import{ConversationGroupTypeInfo as C,typeInfoList as N,GroupType as b}from"./ConversationGroupTypeInfo.js";import{useTUIKitContext as x}from"../../context/TUIKitContext.js";import"../../context/TUIMessageContext.js";function I(I){var y=this,j=I.profileList,k=I.pageState,P=I.setPageState,G=I.createConversation,T=I.setConversationCreated,A=x(),D=A.setActiveConversation,R=A.myProfile,w=e([],j,!0);w.unshift(R);var S=w.map((function(e){return e.nick||e.userID})).toString(),U=c(S.length>=15?"".concat(S.slice(0,12),"..."):S),L=U[0],O=U[1],W=c(""),_=W[0],E=W[1],M=c("Work"),Y=M[0],q=M[1],z=function(e,t){var r=e.target.value;switch(t){case"name":O(r);break;case"id":E(r);break;case"type":q(r)}};return k!==h.GROUP_TYPE?i(o,{children:[i("div",t({className:"tui-conversation-create-group-detail"},{children:[n("div",t({className:"create-group-box create-group-name"},{children:n(s,{maxLength:15,value:L,onChange:function(e){z(e,"name")},border:"bottom",customClassName:"input-group-name",clearable:!0,prefix:n("div",t({className:"input-group-title"},{children:"Group Name"}))})})),n("div",t({className:"create-group-box create-group-id"},{children:n(s,{border:"bottom",customClassName:"input-group-text",clearable:!0,value:_,onChange:function(e){z(e,"id")},prefix:n("div",t({className:"input-group-title"},{children:"Group ID"}))})})),n("div",t({className:"create-group-box create-group-type"},{children:n(s,{disabled:!0,border:"bottom",customClassName:"input-group-text",prefix:n("div",t({className:"input-group-title"},{children:"Group of type"})),suffix:n(u,{onClick:function(){P(h.GROUP_TYPE)},type:p.ARROW_RIGHT,width:7,height:12}),value:Y,onChange:function(e){z(e,"type")}})})),n("div",t({className:"create-group-illustrate"},{children:N.find((function(e){return e.type===Y})).des})),i("div",t({className:"create-group-portrait"},{children:[n("div",t({className:"create-group-portrait-title"},{children:"Participants"})),n("div",t({className:"create-group-portrait-info-container"},{children:j.map((function(e){var r=e.avatar,a=e.userID,o=e.nick;return i("div",t({className:"create-group-portrait-info"},{children:[n(l,{shape:"square",size:50,image:r||m}),n("div",t({className:"create-group-portrait-info-nick"},{children:o}))]}),a)}))}))]}))]})),n("div",t({className:"tui-conversation-create-next-container"},{children:n("div",t({role:"presentation",className:"tui-conversation-create-next",onClick:function(){return r(y,void 0,void 0,(function(){var e,t,r;return a(this,(function(a){switch(a.label){case 0:return e=j.map((function(e){return{userID:e.userID}})),t=function(e){switch(e){case"Work":return g;case"Public":return v;case"Meeting":return f;case"AVChatRoom":return d;default:return""}}(Y),[4,G({name:L,type:b[Y],groupID:_,avatar:t,memberList:e})];case 1:return r=a.sent(),D(r),T(!1),[2]}}))}))}},{children:"Create"}))}))]}):n(C,{groupType:Y,setGroupType:q,setPageState:P})}export{I as ConversationCreatGroupDetail};
|
package/package.json
CHANGED
|
@@ -71,9 +71,12 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
|
|
|
71
71
|
const getDes = () => typeInfoList.find((item) => item.type === groupType).des;
|
|
72
72
|
|
|
73
73
|
const next = async () => {
|
|
74
|
+
const memberList = profileList.map((item) => ({
|
|
75
|
+
userID: item.userID,
|
|
76
|
+
}));
|
|
74
77
|
const avatar = getDefaultAvatar(groupType);
|
|
75
78
|
const conversation = await createConversation({
|
|
76
|
-
name: groupName, type: GroupType[groupType], groupID, avatar,
|
|
79
|
+
name: groupName, type: GroupType[groupType], groupID, avatar, memberList,
|
|
77
80
|
});
|
|
78
81
|
setActiveConversation(conversation);
|
|
79
82
|
setConversationCreated(false);
|