@tencentcloud/chat-uikit-react 1.0.2 → 1.0.3
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/CHANGELOG.md +7 -0
- package/README.md +44 -2
- package/dist/cjs/components/TUIMessageList/TUIMessageList.js +1 -1
- package/dist/esm/components/TUIMessageList/TUIMessageList.js +1 -1
- package/package.json +1 -1
- package/src/components/TUIMessageList/TUIMessageList.tsx +2 -1
- package/src/components/TUIProfile/TUIProfileDefault.tsx +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
_English | [简体中文](readme.zh_cn.md)_
|
|
2
1
|
# [chat-uikit-react](https://www.tencentcloud.com/document/product/1047/34279/)
|
|
3
2
|
>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.
|
|
4
3
|
With these UI components, you can quickly build your own business logic.
|
|
@@ -15,7 +14,6 @@ We have built demos to illustrate the chatting feature.
|
|
|
15
14
|
|
|
16
15
|
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.
|
|
17
16
|
|
|
18
|
-
|
|
19
17
|
## Running Demo
|
|
20
18
|
|
|
21
19
|
### Step 1. Download the source code
|
|
@@ -50,6 +48,50 @@ $ npm run start
|
|
|
50
48
|
4. Enter a message in the input box and press **Enter** to send it.
|
|
51
49
|
|
|
52
50
|
|
|
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
|
+
```
|
|
53
95
|
### Quick links
|
|
54
96
|
- [Web demo](https://web.sdk.qcloud.com/im/demo/intl/index.html)
|
|
55
97
|
- [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"),s=require("react"),i=require("../../context/TUIChatStateContext.js"),n=require("../../context/TUIChatActionContext.js");require("../../context/TUIMessageContext.js");var r=require("../../context/ComponentContext.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),s=require("react"),i=require("../../context/TUIChatStateContext.js"),n=require("../../context/TUIChatActionContext.js");require("../../context/TUIMessageContext.js");var r=require("../../context/ComponentContext.js"),a=require("./hooks/useEnrichedMessageList.js"),l=require("./hooks/useMessageListElement.js"),o=require("../InfiniteScrollPaginator/InfiniteScroll.js"),c=require("../EmptyStateIndicator/EmptyStateIndicator.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(u){var d=this,g=u.messageList,h=u.highlightedMessageId,m=u.loadMore,v=u.intervalsTimer,f=u.className,I=s.useState(null),M=I[0],x=I[1],T=s.useState(!1),j=T[0],_=T[1],p=i.useTUIChatStateContext("TUIMessageList"),C=p.messageList,L=p.highlightedMessageId,S=p.isCompleted,q=p.isSameLastMessageID,E=p.messageListRef,U=p.noMore,y=p.TUIMessageListConfig,b=n.useTUIChatActionContext(),N=b.loadMore,k=b.setHighlightedMessageId,w=r.useComponentContext(),H=w.TUIMessage,A=w.EmptyStateIndicator,P=void 0===A?c.EmptyStateIndicator:A,V=h||(null==y?void 0:y.highlightedMessageId)||L,D=60*(v||(null==y?void 0:y.intervalsTimer)||30),O=a({messageList:g||(null==y?void 0:y.messageList)||C}).messageList,R=m||(null==y?void 0:y.loadMore)||N,z=l({enrichedMessageList:O,TUIMessage:H,intervalsTimer:D});return s.useEffect((function(){e.__awaiter(d,void 0,void 0,(function(){var t,s,i,n,r;return e.__generator(this,(function(e){switch(e.label){case 0:return t=null===(r=null==M?void 0:M.parentElement)||void 0===r?void 0:r.parentElement,!S&&(null==t?void 0:t.clientHeight)>=(null==M?void 0:M.clientHeight)?[4,R()]:[3,2];case 1:e.sent(),e.label=2;case 2:return!(null==M?void 0:M.children)||j&&q||(s=(null==M?void 0:M.children)||[],i=s[s.length-1],n=setTimeout((function(){null==i||i.scrollIntoView({block:"end"}),_(!0),clearTimeout(n)}),100)),[2]}}))}))}),[z,j]),s.useEffect((function(){if(V){var e=null==M?void 0:M.querySelector("[data-message-id='".concat(V,"']"));if(!e)return;var t=e.children[1].children;t[t.length-1].classList.add("high-lighted"),null==e||e.scrollIntoView({block:"center"});var s=setTimeout((function(){t[t.length-1].classList.remove("high-lighted"),clearTimeout(s),k("")}),1e3)}}),[V]),t.jsxs("div",e.__assign({className:"message-list ".concat(f," ").concat(j?"":"hide"),ref:E},{children:[U,U&&t.jsx("p",e.__assign({className:"no-more"},{children:"No More"})),t.jsx(o.InfiniteScroll,e.__assign({className:"message-list-infinite-scroll",hasMore:!0,loadMore:R,threshold:1},{children:t.jsx("ul",e.__assign({ref:x},{children:(null==z?void 0:z.length)>0?z:t.jsx(P,{listType:"message"})}))}))]}))}var g=u(s).default.memo(d);exports.TUIMessageList=function(s){return t.jsx(g,e.__assign({},s))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as e,__awaiter as t,__generator as i}from"tslib";import{jsx as s,jsxs as o}from"react/jsx-runtime";import n,{useState as l,useEffect as r}from"react";import{useTUIChatStateContext as a}from"../../context/TUIChatStateContext.js";import{useTUIChatActionContext as
|
|
1
|
+
import{__assign as e,__awaiter as t,__generator as i}from"tslib";import{jsx as s,jsxs as o}from"react/jsx-runtime";import n,{useState as l,useEffect as r}from"react";import{useTUIChatStateContext as a}from"../../context/TUIChatStateContext.js";import{useTUIChatActionContext as c}from"../../context/TUIChatActionContext.js";import"../../context/TUIMessageContext.js";import{useComponentContext as m}from"../../context/ComponentContext.js";import d from"./hooks/useEnrichedMessageList.js";import h from"./hooks/useMessageListElement.js";import{InfiniteScroll as g}from"../InfiniteScrollPaginator/InfiniteScroll.js";import{EmptyStateIndicator as u}from"../EmptyStateIndicator/EmptyStateIndicator.js";function f(n){var f=this,v=n.messageList,p=n.highlightedMessageId,M=n.loadMore,I=n.intervalsTimer,T=n.className,L=l(null),x=L[0],j=L[1],C=l(!1),S=C[0],E=C[1],U=a("TUIMessageList"),b=U.messageList,y=U.highlightedMessageId,N=U.isCompleted,k=U.isSameLastMessageID,w=U.messageListRef,H=U.noMore,V=U.TUIMessageListConfig,q=c(),A=q.loadMore,D=q.setHighlightedMessageId,P=m(),R=P.TUIMessage,z=P.EmptyStateIndicator,B=void 0===z?u:z,F=p||(null==V?void 0:V.highlightedMessageId)||y,G=60*(I||(null==V?void 0:V.intervalsTimer)||30),J=d({messageList:v||(null==V?void 0:V.messageList)||b}).messageList,K=M||(null==V?void 0:V.loadMore)||A,O=h({enrichedMessageList:J,TUIMessage:R,intervalsTimer:G});return r((function(){t(f,void 0,void 0,(function(){var e,t,s,o,n;return i(this,(function(i){switch(i.label){case 0:return e=null===(n=null==x?void 0:x.parentElement)||void 0===n?void 0:n.parentElement,!N&&(null==e?void 0:e.clientHeight)>=(null==x?void 0:x.clientHeight)?[4,K()]:[3,2];case 1:i.sent(),i.label=2;case 2:return!(null==x?void 0:x.children)||S&&k||(t=(null==x?void 0:x.children)||[],s=t[t.length-1],o=setTimeout((function(){null==s||s.scrollIntoView({block:"end"}),E(!0),clearTimeout(o)}),100)),[2]}}))}))}),[O,S]),r((function(){if(F){var e=null==x?void 0:x.querySelector("[data-message-id='".concat(F,"']"));if(!e)return;var t=e.children[1].children;t[t.length-1].classList.add("high-lighted"),null==e||e.scrollIntoView({block:"center"});var i=setTimeout((function(){t[t.length-1].classList.remove("high-lighted"),clearTimeout(i),D("")}),1e3)}}),[F]),o("div",e({className:"message-list ".concat(T," ").concat(S?"":"hide"),ref:w},{children:[H,H&&s("p",e({className:"no-more"},{children:"No More"})),s(g,e({className:"message-list-infinite-scroll",hasMore:!0,loadMore:K,threshold:1},{children:s("ul",e({ref:j},{children:(null==O?void 0:O.length)>0?O:s(B,{listType:"message"})}))}))]}))}var v=n.memo(f);function p(t){return s(v,e({},t))}export{p as TUIMessageList};
|
package/package.json
CHANGED
|
@@ -28,6 +28,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
|
|
|
28
28
|
highlightedMessageId: propsHighlightedMessageId,
|
|
29
29
|
loadMore: propsLoadMore,
|
|
30
30
|
intervalsTimer: propsIntervalsTimer,
|
|
31
|
+
className: propsClassName,
|
|
31
32
|
} = props;
|
|
32
33
|
|
|
33
34
|
const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
|
|
@@ -99,7 +100,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
|
|
|
99
100
|
}, [highlightedMessageId]);
|
|
100
101
|
|
|
101
102
|
return (
|
|
102
|
-
<div className={`message-list ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
|
|
103
|
+
<div className={`message-list ${propsClassName} ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
|
|
103
104
|
{noMore}
|
|
104
105
|
{noMore && <p className="no-more">No More</p>}
|
|
105
106
|
<InfiniteScroll
|
|
@@ -119,7 +119,7 @@ function TUIProfileDefaultWithContext <T extends TUIProfileDefaultProps>(
|
|
|
119
119
|
calendarClassName="tui-profile-birthday-calendar"
|
|
120
120
|
isOpen
|
|
121
121
|
format="y-MM-dd"
|
|
122
|
-
onChange={(value) => { editBirthday(value); }}
|
|
122
|
+
onChange={(value:Date) => { editBirthday(value); }}
|
|
123
123
|
value={showBirthdayFormat(`${userInfo?.birthday}`)}
|
|
124
124
|
/>
|
|
125
125
|
),
|