@tencentcloud/chat-uikit-react 2.1.4 → 2.2.2
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/dist/cjs/components/ConversationPreview/ConversationPreviewContent.js +1 -1
- package/dist/cjs/components/TUIContact/TUIContactInfo/TUIContactInfo.d.ts +1 -1
- package/dist/cjs/components/TUIContact/TUIContactInfo/TUIContactInfo.js +1 -1
- package/dist/cjs/components/TUIContact/TUIContactInfo/friendInfo.js +1 -1
- package/dist/cjs/components/TUIContact/TUIContactInfo/groupInfo.js +1 -0
- package/dist/cjs/components/TUIContact/TUIContactList/TUIContactList.js +1 -1
- package/dist/cjs/components/TUIContact/hooks/useTUIContact.js +1 -1
- package/dist/cjs/components/TUIKit/TUIKit.js +1 -1
- package/dist/cjs/components/TUIKit/hooks/useTUIKit.d.ts +7 -2
- package/dist/cjs/components/TUIKit/hooks/useTUIKit.js +1 -1
- package/dist/cjs/locales/en/TUIContact.js +1 -1
- package/dist/cjs/locales/zh_cn/TUIContact.js +1 -1
- package/dist/esm/components/ConversationPreview/ConversationPreviewContent.js +1 -1
- package/dist/esm/components/TUIContact/TUIContactInfo/TUIContactInfo.d.ts +1 -1
- package/dist/esm/components/TUIContact/TUIContactInfo/TUIContactInfo.js +1 -1
- package/dist/esm/components/TUIContact/TUIContactInfo/friendInfo.js +1 -1
- package/dist/esm/components/TUIContact/TUIContactInfo/groupInfo.js +1 -0
- package/dist/esm/components/TUIContact/TUIContactList/TUIContactList.js +1 -1
- package/dist/esm/components/TUIContact/hooks/useTUIContact.js +1 -1
- package/dist/esm/components/TUIKit/TUIKit.js +1 -1
- package/dist/esm/components/TUIKit/hooks/useTUIKit.d.ts +7 -2
- package/dist/esm/components/TUIKit/hooks/useTUIKit.js +1 -1
- package/dist/esm/locales/en/TUIContact.js +1 -1
- package/dist/esm/locales/zh_cn/TUIContact.js +1 -1
- package/package.json +1 -1
- package/scripts/publish-intl-experience-demo.js +14 -0
- package/src/components/ConversationPreview/ConversationPreviewContent.tsx +1 -1
- package/src/components/TUIContact/TUIContactInfo/TUIContactInfo.tsx +5 -3
- package/src/components/TUIContact/TUIContactInfo/friendInfo.tsx +10 -10
- package/src/components/TUIContact/TUIContactInfo/groupInfo.tsx +65 -0
- package/src/components/TUIContact/TUIContactList/TUIContactList.tsx +71 -65
- package/src/components/TUIContact/hooks/useTUIContact.tsx +14 -0
- package/src/components/TUIKit/TUIKit.tsx +4 -3
- package/src/components/TUIKit/hooks/useTUIKit.tsx +9 -3
- package/src/locales/en/TUIContact.ts +1 -0
- package/src/locales/zh_cn/TUIContact.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("react/jsx-runtime"),i=require("react"),t=require("react-i18next"),s=require("@tencentcloud/chat-uikit-engine"),o=require("../../utils/env.js"),r=require("../Avatar/Avatar.js"),a=require("../Icon/Icon.js"),c=require("../Icon/type.js"),u=require("../Plugins/index.js"),l=require("../../hooks/useConversation.js"),v=require("../../context/TUIKitContext.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function m(d){var m,h=d.conversation,p=d.Avatar,x=void 0===p?r.Avatar:p,C=d.displayImage,f=d.displayTitle,j=d.displayMessage,_=d.displayTime,g=d.unread,I=d.active,T=d.activeConversationID,N=d.setActiveConversationID,q=d.setActiveConversation,P=t.useTranslation().t,w=i.useRef(null),y=v.useTUIKitContext("ConversationPreviewContent"),b=y.chat,M=y.conversation,D=l.useConversation(b),U=D.pinConversation,k=D.deleteConversation,A=I?"conversation-preview-content--active":"",E=g&&g>=1?"conversation-preview-content--unread":"",R=h.isPinned?"conversation-preview-content--pin":"",S=i.useState(!1),F=S[0],K=S[1],O=i.useRef(null);i.useEffect((function(){T!==h.conversationID&&K(!1)}),[T]);var z=function(e){if(!o.isPC){var n=h.conversationID;switch(N&&N(n),e){case"touchstart":m=setTimeout(i,500);break;case"touchend":clearTimeout(m),setTimeout((function(){}),200)}}function i(){clearTimeout(m),K(!0)}},L=function(e,n){var i,t=h.conversationID,s=h.isPinned;switch(e.stopPropagation(),K(!1),(null===(i=null==O?void 0:O.current)||void 0===i?void 0:i.closeMore)&&O.current.closeMore(),n){case"pin":U({conversationID:t,isPinned:!s});break;case"delete":k(t),q&&
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),n=require("react/jsx-runtime"),i=require("react"),t=require("react-i18next"),s=require("@tencentcloud/chat-uikit-engine"),o=require("../../utils/env.js"),r=require("../Avatar/Avatar.js"),a=require("../Icon/Icon.js"),c=require("../Icon/type.js"),u=require("../Plugins/index.js"),l=require("../../hooks/useConversation.js"),v=require("../../context/TUIKitContext.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function m(d){var m,h=d.conversation,p=d.Avatar,x=void 0===p?r.Avatar:p,C=d.displayImage,f=d.displayTitle,j=d.displayMessage,_=d.displayTime,g=d.unread,I=d.active,T=d.activeConversationID,N=d.setActiveConversationID,q=d.setActiveConversation,P=t.useTranslation().t,w=i.useRef(null),y=v.useTUIKitContext("ConversationPreviewContent"),b=y.chat,M=y.conversation,D=l.useConversation(b),U=D.pinConversation,k=D.deleteConversation,A=I?"conversation-preview-content--active":"",E=g&&g>=1?"conversation-preview-content--unread":"",R=h.isPinned?"conversation-preview-content--pin":"",S=i.useState(!1),F=S[0],K=S[1],O=i.useRef(null);i.useEffect((function(){T!==h.conversationID&&K(!1)}),[T]);var z=function(e){if(!o.isPC){var n=h.conversationID;switch(N&&N(n),e){case"touchstart":m=setTimeout(i,500);break;case"touchend":clearTimeout(m),setTimeout((function(){}),200)}}function i(){clearTimeout(m),K(!0)}},L=function(e,n){var i,t=h.conversationID,s=h.isPinned;switch(e.stopPropagation(),K(!1),(null===(i=null==O?void 0:O.current)||void 0===i?void 0:i.closeMore)&&O.current.closeMore(),n){case"pin":U({conversationID:t,isPinned:!s});break;case"delete":k(t),q&&t===(null==M?void 0:M.conversationID)&&q(void 0)}};return n.jsxs("button",e.__assign({type:"button","aria-selected":I,role:"option",className:"conversation-preview-container ".concat(A," ").concat(E," ").concat(R),onClick:function(){s.TUIConversationService.switchConversation(null==h?void 0:h.conversationID),q&&q(h),(null==w?void 0:w.current)&&w.current.blur()},onMouseEnter:function(){K(!0)},onMouseLeave:function(){K(!1)},onTouchStart:function(){return z("touchstart")},onTouchEnd:function(){return z("touchend")},ref:w},{children:[n.jsx("div",e.__assign({className:"avatar"},{children:n.jsx(x,{image:C,name:f,size:40})})),n.jsxs("div",e.__assign({className:"content"},{children:[n.jsx("div",e.__assign({className:"title text-ellipsis"},{children:f})),n.jsx("div",e.__assign({className:"message"},{children:j}))]})),n.jsxs("div",e.__assign({className:"external"},{children:[g?n.jsx("div",e.__assign({className:"unread"},{children:g<=99?g:"99+"})):n.jsx("div",{className:"unread"}),F?n.jsx("div",e.__assign({className:"".concat(F?"more--hover":"more")},{children:n.jsx(u.Plugins,{customClass:"more-handle-box",ref:O,plugins:[n.jsx("div",e.__assign({role:"presentation",className:"more-handle-item",onClick:function(e){L(e,"pin")}},{children:P(h.isPinned?"TUIConversation.Unpin":"TUIConversation.Pin")})),n.jsx("div",e.__assign({className:"more-handle-item",style:{color:"#FF584C"},onClick:function(e){L(e,"delete")},role:"presentation"},{children:P("TUIConversation.Delete")}))],showNumber:0,MoreIcon:n.jsx(a.Icon,{className:"icon-more",width:16,height:16,type:c.IconTypes.MORE})})})):n.jsx("div",e.__assign({className:"time"},{children:_}))]}))]}))}require("../../context/TUIMessageContext.js");var h=d(i).default.memo(m);exports.ConversationPreviewContent=h,exports.unMemoConversationPreviewContent=m;
|
|
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
|
|
|
2
2
|
|
|
3
3
|
interface TUIContactInfoProps {
|
|
4
4
|
className?: string;
|
|
5
|
-
|
|
5
|
+
showChats?: () => void;
|
|
6
6
|
}
|
|
7
7
|
declare function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(props: PropsWithChildren<T>): React.ReactElement;
|
|
8
8
|
declare const TUIContactInfo: React.MemoExoticComponent<typeof UnMemoizedTUIContactInfo>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),o=require("../../../context/TUIKitContext.js");require("../../../context/TUIMessageContext.js");var i=require("../../../utils/env.js"),r=require("./friendInfo.js"),a=require("./blockInfo.js"),d=require("./addFriendInfo.js"),l=require("./groupInfo.js"),u=require("./friendApplication.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(n){var s=n.showChats,c=o.useTUIKitContext("TUIContact").contactData;return(null==c?void 0:c.type)?t.jsxs("div",e.__assign({className:"tui-contact-info ".concat(i.isH5?"tui-contact-info-h5":""," ")},{children:["addFriend"===(null==c?void 0:c.type)&&t.jsx(d.AddFriendInfo,{profile:null==c?void 0:c.data}),"friend"===(null==c?void 0:c.type)&&t.jsx(r.FriendInfo,{showChats:s,friend:null==c?void 0:c.data}),"block"===(null==c?void 0:c.type)&&t.jsx(a.BlockInfo,{profile:null==c?void 0:c.data}),"group"===(null==c?void 0:c.type)&&t.jsx(l.GroupInfo,{showChats:s,group:null==c?void 0:c.data}),"friendApplication"===(null==c?void 0:c.type)&&t.jsx(u.FriendApplicationInfo,{application:null==c?void 0:c.data})]})):t.jsx(t.Fragment,{children:" "})}var f=s(n).default.memo(c);exports.TUIContactInfo=f,exports.UnMemoizedTUIContactInfo=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),i=require("react-i18next"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),i=require("react-i18next"),s=require("@tencentcloud/chat-uikit-engine"),r=require("../../../context/TUIKitContext.js");require("../../../context/TUIMessageContext.js");var a=require("./basicInfo.js"),c=require("../../Switch/Switch.js"),o=require("./hooks/useContactInfo.js"),u=require("../../DivWithEdit/DivWithEdit.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function d(l){var d=this,f=r.useTUIKitContext("TUIContact"),m=f.chat,v=f.contactData,h=f.setActiveContact,x=f.setActiveConversation,_=i.useTranslation().t,j=l.friend,C=l.showChats,b=j.userID,g=j.profile,I=j.remark,k=n.useState(""),p=k[0],q=k[1],T=n.useState(""),N=T[0],U=T[1],w=n.useState(!1),S=w[0],D=w[1],E=o(),F=E.addToBlocklist,M=E.deleteFriend;n.useEffect((function(){D(!1),U(I)}),[v,I]);return t.jsxs(t.Fragment,{children:[t.jsx(a.BasicInfo,{profile:g}),t.jsxs("div",e.__assign({className:"tui-contact-info-content"},{children:[t.jsxs("div",e.__assign({className:"content-item"},{children:[t.jsx("p",e.__assign({className:"content-item-label"},{children:_("TUIContact.remark")})),t.jsx(u.DivWithEdit,{name:"remark",className:"content-item-text",value:N,type:"text",toggle:function(){q("remark")},isEdit:"remark"===p,confirm:function(e){m.updateFriend({userID:b,remark:null==e?void 0:e.value}),U(null==e?void 0:e.value),q("")},close:function(){q("")}})]})),t.jsxs("div",e.__assign({className:"content-item"},{children:[t.jsx("p",e.__assign({className:"content-item-label"},{children:_("TUIContact.block")})),t.jsx(c.Switch,{className:"content-item-text",onChange:function(){return e.__awaiter(d,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return[4,F(b)];case 1:return e.sent(),D(!0),h(),[2]}}))}))},checked:S})]})),t.jsxs("div",e.__assign({className:"content-btn-container"},{children:[t.jsx("div",e.__assign({className:"content-item-btn delete-btn",role:"button",tabIndex:0,onClick:function(){return e.__awaiter(d,void 0,void 0,(function(){return e.__generator(this,(function(e){switch(e.label){case 0:return[4,M(b)];case 1:return e.sent(),h(),[2]}}))}))}},{children:_("TUIContact.Delete friend")})),t.jsx("div",e.__assign({className:"content-item-btn confirm-btn",role:"button",tabIndex:0,onClick:function(){var e="C2C".concat(b);C&&C(),s.TUIConversationService.switchConversation(e).then((function(e){x(e.getConversation())}))}},{children:_("TUIContact.Send Message")}))]}))]}))]})}var f=l(n).default.memo(d);exports.FriendInfo=f,exports.UnMemoizedFriendInfo=d;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),n=require("react"),a=require("react-i18next"),r=require("@tencentcloud/chat-uikit-engine"),i=require("../../../context/TUIKitContext.js");require("../../../context/TUIMessageContext.js");var s=require("../../Icon/Icon.js"),o=require("../../Icon/type.js"),c=require("../../../utils/env.js"),u=require("../../Avatar/Avatar.js"),d=require("../../Avatar/default.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(n){var v=n.group,l=n.showChats,h=i.useTUIKitContext("TUIContact"),x=h.setActiveContact,j=h.setActiveConversation,g=a.useTranslation().t,m=v.groupID,_=v.name,f=v.avatar;return t.jsxs(t.Fragment,{children:[t.jsxs("div",e.__assign({className:"tui-contact-info-header"},{children:[c.isH5&&t.jsx(s.Icon,{width:9,height:16,type:o.IconTypes.BACK,onClick:function(){r.TUIConversationService.switchConversation(""),x()}}),t.jsxs("div",e.__assign({className:"header-container"},{children:[t.jsxs("div",e.__assign({className:"header-container-avatar"},{children:[t.jsx(u.Avatar,{size:60,image:f||d.defaultUserAvatar}),t.jsx("div",e.__assign({className:"header-container-name"},{children:_||m}))]})),t.jsx("div",e.__assign({className:"header-container-text"},{children:"groupID:".concat(m)}))]}))]})),t.jsx("div",e.__assign({className:"tui-contact-info-content"},{children:t.jsx("div",e.__assign({className:"content-btn-container"},{children:t.jsx("div",e.__assign({className:"content-item-btn confirm-btn",role:"button",tabIndex:0,onClick:function(){var e="GROUP".concat(m);l&&l(),r.TUIConversationService.switchConversation(e).then((function(e){j(e.getConversation())}))}},{children:g("TUIContact.Send Message")}))}))}))]})}var h=v(n).default.memo(l);exports.GroupInfo=h,exports.UnMemoizedGroupInfo=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),s=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),s=require("react/jsx-runtime"),e=require("react"),i=require("react-i18next"),a=require("@tencentcloud/chat"),n=require("../../../utils/env.js"),c=require("../../../context/TUIKitContext.js");require("../../../context/TUIMessageContext.js");var r=require("../../../context/TUIContactContext.js"),o=require("../TUIContactInfo/hooks/useContactInfo.js"),l=require("../hooks/useTUIContact.js"),u=require("../../Avatar/Avatar.js"),d=require("../../Avatar/default.js"),x=require("../../Icon/images/right-arrow.svg.js"),_=require("../../Icon/images/down-arrow.png.js");function p(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var m=p(e),j=p(a);function v(){var a=c.useTUIKitContext().setActiveContact,p=i.useTranslation().t,m=r.useTUIContactContext("TUIContactList"),v=m.isShowContactList,g=m.friendList,h=m.blocklistProfile,f=m.friendApplicationList,I=o().acceptFriendApplication,C=l().groupList,N=e.useState(!1),T=N[0],S=N[1],b=e.useState(!1),U=b[0],A=b[1],q=e.useState(!1),w=q[0],k=q[1],L=e.useState(!1),P=L[0],y=L[1],E=function(e){var i=e.type,n=e.isShow,c=e.setShow,r=e.list,o=e.title;return s.jsxs(s.Fragment,{children:[s.jsxs("div",t.__assign({className:"tui-contacts-title",role:"button",tabIndex:0,onClick:function(){return c(!n)}},{children:[s.jsx("div",t.__assign({className:"tui-contacts-list-title"},{children:o})),s.jsx("div",t.__assign({className:"tui-contacts-list-icon"},{children:s.jsx("img",{src:n?_:x,alt:""})}))]})),n&&(null==r?void 0:r.map((function(e){var n=e.profile||e,c=n.userID,r=n.groupID,o=n.avatar,l=n.name,x=n.nick,_=e.remark||x||c||l||r;return s.jsxs("div",t.__assign({role:"button",tabIndex:0,className:"tui-contacts-list-item",onClick:function(){a({type:i,data:e})}},{children:[s.jsx(u.Avatar,{size:30,image:o||d.defaultUserAvatar}),s.jsx("div",t.__assign({className:"tui-contacts-list-item-container"},{children:s.jsx("p",t.__assign({className:"tui-contacts-list-item-name"},{children:_}))}))]}),c||r)})))]})};return v&&s.jsxs("div",t.__assign({className:"tui-contacts-list ".concat(n.isH5?"tui-contacts-list-h5":""," ")},{children:[s.jsxs("div",t.__assign({className:"tui-contacts-title",role:"button",tabIndex:0,onClick:function(){return S(!T)}},{children:[s.jsx("p",t.__assign({className:"tui-contacts-list-title"},{children:p("TUIContact.New Contacts")})),s.jsx("div",t.__assign({className:"tui-contacts-list-icon"},{children:s.jsx("img",{src:T?_:x,alt:""})}))]})),T&&(null==f?void 0:f.map((function(e,i){var n=e.userID,c=e.avatar,r=e.nick,o=e.wording,l=e.type;return s.jsxs("div",t.__assign({role:"button",tabIndex:0,className:"tui-contacts-list-item",onClick:function(t){t.stopPropagation(),a({type:"friendApplication",data:e})}},{children:[s.jsx(u.Avatar,{size:30,image:c||d.defaultUserAvatar}),s.jsxs("div",t.__assign({className:"tui-contacts-list-item-card"},{children:[s.jsxs("div",{children:[s.jsx("p",t.__assign({className:"tui-contacts-list-item-name text-ellipsis"},{children:r||n})),""!==o&&s.jsx("p",t.__assign({className:"tui-contacts-list-item-text text-ellipsis"},{children:o}))]}),l===j.default.TYPES.SNS_APPLICATION_SENT_BY_ME&&s.jsx("p",t.__assign({className:"tui-contacts-list-btn-text text-ellipsis"},{children:p("TUIContact.waiting for verification")})),l===j.default.TYPES.SNS_APPLICATION_SENT_TO_ME&&s.jsx("div",t.__assign({className:"application-btn",role:"button",tabIndex:0,onClick:function(t){!function(t,s){t.stopPropagation(),I(s),a()}(t,n)}},{children:p("TUIContact.Agree")}))]}))]}),n)}))),s.jsx(E,{type:"block",title:p("TUIContact.Blocked List"),isShow:w,setShow:k,list:h}),s.jsx(E,{type:"group",title:p("TUIContact.Group List"),setShow:y,isShow:P,list:C}),s.jsx(E,{type:"friend",title:p("TUIContact.Friends"),setShow:A,isShow:U,list:g})]}))}var g=m.default.memo(v);exports.TUIContactList=g;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var t=require("tslib"),e=require("react"),n=require("@tencentcloud/chat"),i=require("../../../context/TUIKitContext.js");function
|
|
1
|
+
"use strict";var t=require("tslib"),e=require("react"),n=require("@tencentcloud/chat"),i=require("@tencentcloud/chat-uikit-engine"),r=require("../../../context/TUIKitContext.js");function a(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}require("react/jsx-runtime"),require("../../../context/TUIMessageContext.js");var u=a(n);module.exports=function(){var n=this,a=r.useTUIKitContext().chat,o=e.useState([]),c=o[0],s=o[1],l=e.useState([]),f=l[0],d=l[1],v=e.useState([]),_=v[0],L=v[1],h=e.useState([]),T=h[0],g=h[1],E=e.useState(),S=E[0],p=E[1],I=e.useState(!0),w=I[0],A=I[1];e.useEffect((function(){i.TUIStore.watch(i.StoreName.GRP,{groupList:D}),P(),U(),b()}),[a]);var D=function(t){p(t)};e.useEffect((function(){null==a||a.on(u.default.EVENT.BLACKLIST_UPDATED,C),null==a||a.on(u.default.EVENT.FRIEND_LIST_UPDATED,N),null==a||a.on(u.default.EVENT.FRIEND_APPLICATION_LIST_UPDATED,x)}),[a]);var b=function(){return t.__awaiter(n,void 0,void 0,(function(){var e;return t.__generator(this,(function(t){switch(t.label){case 0:return[4,a.getFriendApplicationList()];case 1:return e=t.sent().data,L(null==e?void 0:e.friendApplicationList),[2]}}))}))},P=function(){return t.__awaiter(n,void 0,void 0,(function(){var e,n,i;return t.__generator(this,(function(t){switch(t.label){case 0:return[4,a.getFriendList()];case 1:return e=t.sent(),n=e.code,i=e.data,0===n&&s(i),[2]}}))}))},U=function(){return t.__awaiter(n,void 0,void 0,(function(){var e;return t.__generator(this,(function(t){switch(t.label){case 0:return[4,a.getBlacklist()];case 1:return 0===(e=t.sent().data).length||(d(e),q(e)),[2]}}))}))},q=function(e){return t.__awaiter(n,void 0,void 0,(function(){var n;return t.__generator(this,(function(t){switch(t.label){case 0:return[4,a.getUserProfile({userIDList:e})];case 1:return n=t.sent().data,g(n),[2]}}))}))},x=function(t){var e;L(null===(e=null==t?void 0:t.data)||void 0===e?void 0:e.friendApplicationList)},C=function(t){d(t.data),q(t.data)},N=function(t){s(t.data)};return{friendList:c,groupList:S,blocklistProfile:T,friendApplicationList:_,blockList:f,isShowContactList:w,setShowContactList:A}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),a=require("react"),n=require("@tencentcloud/chat-uikit-engine"),s=require("@tencentcloud/tui-core"),r=require("react-i18next"),i=require("../../utils/env.js"),o=require("./hooks/useTUIKit.js"),c=require("./hooks/useCreateTUIKitContext.js"),T=require("../../context/TUIKitContext.js"),u=require("../TUIConversation/TUIConversation.js"),l=require("../TUIChat/TUIChat.js"),I=require("../TUIManage/TUIManage.js"),C=require("../TUIProfile/TUIProfile.js");require("../TUIProfile/TUIProfileDefault.js"),require("@tencentcloud/chat"),require("../../context/TUIMessageContext.js"),require("../Icon/config.js"),require("../Icon/type.js");var U=require("../TUIContact/TUIContactInfo/TUIContactInfo.js"),v=require("../TUIContact/TUIContact.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tslib"),t=require("react/jsx-runtime"),a=require("react"),n=require("@tencentcloud/chat-uikit-engine"),s=require("@tencentcloud/tui-core"),r=require("react-i18next"),i=require("../../utils/env.js"),o=require("./hooks/useTUIKit.js"),c=require("./hooks/useCreateTUIKitContext.js"),T=require("../../context/TUIKitContext.js"),u=require("../TUIConversation/TUIConversation.js"),l=require("../TUIChat/TUIChat.js"),I=require("../TUIManage/TUIManage.js"),C=require("../TUIProfile/TUIProfile.js");require("../TUIProfile/TUIProfileDefault.js"),require("@tencentcloud/chat"),require("../../context/TUIMessageContext.js"),require("../Icon/config.js"),require("../Icon/type.js");var U=require("../TUIContact/TUIContactInfo/TUIContactInfo.js"),v=require("../TUIContact/TUIContact.js"),h=require("../../constants.js");require("../../locales/index.js");var d=require("../Icon/images/chats.svg.js"),j=require("../Icon/images/chats-selected.svg.js"),A=require("../Icon/images/contacts.svg.js"),m=require("../Icon/images/contacts-selected.svg.js"),g=[{id:1,name:h.TUIKIT_TABBAR.CHATS,icon:d,selectedIcon:j,value:h.TUIKIT_TABBAR.CHATS},{id:2,name:h.TUIKIT_TABBAR.CONTACTS,icon:A,selectedIcon:m,value:h.TUIKIT_TABBAR.CONTACTS}],x={className:"sample-h5-input",isTransmitter:!0};function _(a){var n=a.moduleValue,s=a.tabbarRender,r=a.setModuleValue;return t.jsxs(t.Fragment,{children:[t.jsxs("div",e.__assign({className:"sample-chat-left-container"},{children:[t.jsx(C.TUIProfile,{className:"sample-chat-profile"}),s,n===h.TUIKIT_TABBAR.CHATS&&t.jsx(u.TUIConversation,{}),n===h.TUIKIT_TABBAR.CONTACTS&&t.jsx(v.TUIContact,{})]})),n===h.TUIKIT_TABBAR.CHATS&&t.jsxs(t.Fragment,{children:[t.jsx(l.TUIChat,{}),t.jsx(I.TUIManage,{})]}),n===h.TUIKIT_TABBAR.CONTACTS&&t.jsx(v.TUIContact,{children:t.jsx(U.TUIContactInfo,{showChats:function(){r(h.TUIKIT_TABBAR.CHATS)}})})]})}function f(a){var n=a.moduleValue,s=a.contactData,r=a.tabbarRender,i=a.currentConversationID,o=a.setModuleValue;return t.jsxs(t.Fragment,{children:[!i&&!s&&t.jsxs("div",e.__assign({className:"sample-chat-h5-container"},{children:[t.jsx(C.TUIProfile,{className:"sample-profile"}),r,n===h.TUIKIT_TABBAR.CHATS&&t.jsx(u.TUIConversation,{}),n===h.TUIKIT_TABBAR.CONTACTS&&t.jsx(v.TUIContact,{})]})),n===h.TUIKIT_TABBAR.CHATS&&i&&t.jsxs(t.Fragment,{children:[t.jsx(l.TUIChat,{TUIMessageInputConfig:x}),t.jsx(I.TUIManage,{})]}),n===h.TUIKIT_TABBAR.CONTACTS&&s&&t.jsx(v.TUIContact,{children:t.jsx(U.TUIContactInfo,{showChats:function(){o(h.TUIKIT_TABBAR.CHATS)}})})]})}exports.TUIKit=function(u){var l=a.useState("chats"),I=l[0],C=l[1],U=r.useTranslation().t,v=u.children,h=u.chat,d=void 0===h?s.TUILogin.getContext().chat:h,j=u.customClasses,A=u.activeConversation,m=u.language,x=void 0===m?"en":m;window.tencent_cloud_im_csig_react_uikit_23F_xa=!0;var B=o.useTUIKit({chat:d,activeConversation:A,language:x}),S=B.conversation,q=B.contactData,K=B.setActiveConversation,p=B.myProfile,N=B.TUIManageShow,R=B.setTUIManageShow,w=B.TUIProfileShow,M=B.setTUIProfileShow,P=B.setActiveContact,b=c.useCreateTUIKitContext({chat:d,language:x,conversation:S,contactData:q,setActiveConversation:K,customClasses:j,myProfile:p,TUIManageShow:N,setTUIManageShow:R,TUIProfileShow:w,setTUIProfileShow:M,setActiveContact:P});a.useEffect((function(){return n.TUIStore.watch(n.StoreName.CONV,{currentConversation:V}),function(){n.TUIStore.unwatch(n.StoreName.CONV,{currentConversation:V})}}),[]);var V=function(e){K(null==e?void 0:e.getConversation())},H=t.jsx("div",e.__assign({className:"sample-chat-tab"},{children:g.map((function(a){return t.jsxs("div",e.__assign({className:"sample-chat-tab-container",role:"presentation",onClick:function(){var e;e=a.value,C(e),n.TUIConversationService.switchConversation("")}},{children:[t.jsx("img",{src:I===a.value?a.selectedIcon:a.icon,alt:""}),t.jsx("p",e.__assign({className:"sample-chat-tab-text ".concat(I===a.value?"sample-chat-tab-active":"")},{children:U(a.name)}))]}),a.id)}))}));return t.jsx(T.TUIKitProvider,e.__assign({value:b},{children:t.jsx("div",e.__assign({className:"tui-kit"},{children:v||i.isPC&&t.jsx(_,{moduleValue:I,tabbarRender:H,setModuleValue:C})||i.isH5&&t.jsx(f,{contactData:q,moduleValue:I,tabbarRender:H,currentConversationID:(null==S?void 0:S.conversationID)||"",setModuleValue:C})}))}))};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { IGroupModel } from '@tencentcloud/chat-uikit-engine';
|
|
2
3
|
import { ChatSDK, Conversation, Profile, Friend, FriendApplication } from '@tencentcloud/chat';
|
|
3
4
|
|
|
4
5
|
interface blockData {
|
|
@@ -17,7 +18,11 @@ interface addFriendData {
|
|
|
17
18
|
type: 'addFriend';
|
|
18
19
|
data: Profile;
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
+
interface GroupData {
|
|
22
|
+
type: 'group';
|
|
23
|
+
data: IGroupModel;
|
|
24
|
+
}
|
|
25
|
+
type UseContactParams = blockData | friendData | friendApplicationData | addFriendData | GroupData | undefined;
|
|
21
26
|
interface UseChatParams {
|
|
22
27
|
chat: ChatSDK;
|
|
23
28
|
activeConversation?: Conversation;
|
|
@@ -32,7 +37,7 @@ declare const useTUIKit: ({ chat, activeConversation: paramsActiveConversation,
|
|
|
32
37
|
setTUIManageShow: React.Dispatch<React.SetStateAction<boolean>>;
|
|
33
38
|
TUIProfileShow: boolean;
|
|
34
39
|
setTUIProfileShow: React.Dispatch<React.SetStateAction<boolean>>;
|
|
35
|
-
setActiveContact: (actionContactData
|
|
40
|
+
setActiveContact: (actionContactData?: UseContactParams) => void;
|
|
36
41
|
};
|
|
37
42
|
|
|
38
43
|
export { UseChatParams, UseContactParams, useTUIKit };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@tencentcloud/chat-uikit-engine"),n=require("react-i18next");exports.useTUIKit=function(a){var o=a.chat,i=a.activeConversation,r=a.language,s=n.useTranslation().i18n,c=e.useState(i),u=c[0],f=c[1],l=e.useState(),v=l[0],S=l[1],I=e.useState(!1),g=I[0],h=I[1],T=e.useState(!1),U=T[0],d=T[1],w=e.useState(),D=w[0],P=w[1];e.useEffect((function(){s.changeLanguage(r),t.TUIStore.watch(t.StoreName.USER,{userProfile:function(e){S(e)}})}),[r]);var C=e.useCallback((function(e){e&&(null==o||o.setMessageRead({conversationID:e.conversationID})),u&&(null==e?void 0:e.conversationID)!==u.conversationID&&h(!1),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@tencentcloud/chat-uikit-engine"),n=require("react-i18next");exports.useTUIKit=function(a){var o=a.chat,i=a.activeConversation,r=a.language,s=n.useTranslation().i18n,c=e.useState(i),u=c[0],f=c[1],l=e.useState(),v=l[0],S=l[1],I=e.useState(!1),g=I[0],h=I[1],T=e.useState(!1),U=T[0],d=T[1],w=e.useState(),D=w[0],P=w[1];e.useEffect((function(){s.changeLanguage(r),t.TUIStore.watch(t.StoreName.USER,{userProfile:function(e){S(e)}})}),[r]);var C=e.useCallback((function(e){e&&(null==o||o.setMessageRead({conversationID:e.conversationID})),u&&(null==e?void 0:e.conversationID)!==u.conversationID&&h(!1),f(e)}),[o]);return e.useEffect((function(){i&&f(i)}),[i]),{conversation:u,contactData:D,setActiveConversation:C,myProfile:v,TUIManageShow:g,setTUIManageShow:h,TUIProfileShow:U,setTUIProfileShow:d,setActiveContact:function(e){P(e)}}};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";module.exports={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};
|
|
1
|
+
"use strict";module.exports={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","Group List":"Group List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";module.exports={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};
|
|
1
|
+
"use strict";module.exports={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","Group List":"我的群聊","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as e}from"tslib";import{jsxs as n,jsx as o}from"react/jsx-runtime";import t,{useRef as i,useState as r,useEffect as a}from"react";import{useTranslation as c}from"react-i18next";import{TUIConversationService as s}from"@tencentcloud/chat-uikit-engine";import{isPC as l}from"../../utils/env.js";import{Avatar as
|
|
1
|
+
import{__assign as e}from"tslib";import{jsxs as n,jsx as o}from"react/jsx-runtime";import t,{useRef as i,useState as r,useEffect as a}from"react";import{useTranslation as c}from"react-i18next";import{TUIConversationService as s}from"@tencentcloud/chat-uikit-engine";import{isPC as l}from"../../utils/env.js";import{Avatar as v}from"../Avatar/Avatar.js";import{Icon as m}from"../Icon/Icon.js";import{IconTypes as u}from"../Icon/type.js";import{Plugins as d}from"../Plugins/index.js";import{useConversation as p}from"../../hooks/useConversation.js";import{useTUIKitContext as h}from"../../context/TUIKitContext.js";import"../../context/TUIMessageContext.js";function f(t){var f,C=t.conversation,I=t.Avatar,N=void 0===I?v:I,T=t.displayImage,x=t.displayTitle,g=t.displayMessage,w=t.displayTime,j=t.unread,D=t.active,b=t.activeConversationID,y=t.setActiveConversationID,M=t.setActiveConversation,P=c().t,k=i(null),U=h("ConversationPreviewContent"),A=U.chat,E=U.conversation,F=p(A),z=F.pinConversation,K=F.deleteConversation,L=D?"conversation-preview-content--active":"",O=j&&j>=1?"conversation-preview-content--unread":"",R=C.isPinned?"conversation-preview-content--pin":"",S=r(!1),q=S[0],B=S[1],G=i(null);a((function(){b!==C.conversationID&&B(!1)}),[b]);var H=function(e){if(!l){var n=C.conversationID;switch(y&&y(n),e){case"touchstart":f=setTimeout(o,500);break;case"touchend":clearTimeout(f),setTimeout((function(){}),200)}}function o(){clearTimeout(f),B(!0)}},J=function(e,n){var o,t=C.conversationID,i=C.isPinned;switch(e.stopPropagation(),B(!1),(null===(o=null==G?void 0:G.current)||void 0===o?void 0:o.closeMore)&&G.current.closeMore(),n){case"pin":z({conversationID:t,isPinned:!i});break;case"delete":K(t),M&&t===(null==E?void 0:E.conversationID)&&M(void 0)}};return n("button",e({type:"button","aria-selected":D,role:"option",className:"conversation-preview-container ".concat(L," ").concat(O," ").concat(R),onClick:function(){s.switchConversation(null==C?void 0:C.conversationID),M&&M(C),(null==k?void 0:k.current)&&k.current.blur()},onMouseEnter:function(){B(!0)},onMouseLeave:function(){B(!1)},onTouchStart:function(){return H("touchstart")},onTouchEnd:function(){return H("touchend")},ref:k},{children:[o("div",e({className:"avatar"},{children:o(N,{image:T,name:x,size:40})})),n("div",e({className:"content"},{children:[o("div",e({className:"title text-ellipsis"},{children:x})),o("div",e({className:"message"},{children:g}))]})),n("div",e({className:"external"},{children:[o("div",j?e({className:"unread"},{children:j<=99?j:"99+"}):{className:"unread"}),o("div",q?e({className:"".concat(q?"more--hover":"more")},{children:o(d,{customClass:"more-handle-box",ref:G,plugins:[o("div",e({role:"presentation",className:"more-handle-item",onClick:function(e){J(e,"pin")}},{children:P(C.isPinned?"TUIConversation.Unpin":"TUIConversation.Pin")})),o("div",e({className:"more-handle-item",style:{color:"#FF584C"},onClick:function(e){J(e,"delete")},role:"presentation"},{children:P("TUIConversation.Delete")}))],showNumber:0,MoreIcon:o(m,{className:"icon-more",width:16,height:16,type:u.MORE})})}):e({className:"time"},{children:w}))]}))]}))}var C=t.memo(f);export{C as ConversationPreviewContent,f as unMemoConversationPreviewContent};
|
|
@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react';
|
|
|
2
2
|
|
|
3
3
|
interface TUIContactInfoProps {
|
|
4
4
|
className?: string;
|
|
5
|
-
|
|
5
|
+
showChats?: () => void;
|
|
6
6
|
}
|
|
7
7
|
declare function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(props: PropsWithChildren<T>): React.ReactElement;
|
|
8
8
|
declare const TUIContactInfo: React.MemoExoticComponent<typeof UnMemoizedTUIContactInfo>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as o}from"tslib";import{jsx as t,Fragment as i,jsxs as n}from"react/jsx-runtime";import r from"react";import{useTUIKitContext as
|
|
1
|
+
import{__assign as o}from"tslib";import{jsx as t,Fragment as i,jsxs as n}from"react/jsx-runtime";import r from"react";import{useTUIKitContext as l}from"../../../context/TUIKitContext.js";import"../../../context/TUIMessageContext.js";import{isH5 as a}from"../../../utils/env.js";import{FriendInfo as e}from"./friendInfo.js";import{BlockInfo as d}from"./blockInfo.js";import{AddFriendInfo as p}from"./addFriendInfo.js";import{GroupInfo as m}from"./groupInfo.js";import{FriendApplicationInfo as f}from"./friendApplication.js";function c(r){var c=r.showChats,s=l("TUIContact").contactData;return(null==s?void 0:s.type)?n("div",o({className:"tui-contact-info ".concat(a?"tui-contact-info-h5":""," ")},{children:["addFriend"===(null==s?void 0:s.type)&&t(p,{profile:null==s?void 0:s.data}),"friend"===(null==s?void 0:s.type)&&t(e,{showChats:c,friend:null==s?void 0:s.data}),"block"===(null==s?void 0:s.type)&&t(d,{profile:null==s?void 0:s.data}),"group"===(null==s?void 0:s.type)&&t(m,{showChats:c,group:null==s?void 0:s.data}),"friendApplication"===(null==s?void 0:s.type)&&t(f,{application:null==s?void 0:s.data})]})):t(i,{children:" "})}var s=r.memo(c);export{s as TUIContactInfo,c as UnMemoizedTUIContactInfo};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as t,__awaiter as e,__generator as n}from"tslib";import{jsxs as
|
|
1
|
+
import{__assign as t,__awaiter as e,__generator as n}from"tslib";import{jsxs as i,Fragment as o,jsx as c}from"react/jsx-runtime";import r,{useState as a,useEffect as s}from"react";import{useTranslation as m}from"react-i18next";import{TUIConversationService as l}from"@tencentcloud/chat-uikit-engine";import{useTUIKitContext as d}from"../../../context/TUIKitContext.js";import"../../../context/TUIMessageContext.js";import{BasicInfo as u}from"./basicInfo.js";import{Switch as f}from"../../Switch/Switch.js";import h from"./hooks/useContactInfo.js";import{DivWithEdit as v}from"../../DivWithEdit/DivWithEdit.js";function p(r){var p=this,C=d("TUIContact"),b=C.chat,k=C.contactData,I=C.setActiveContact,x=C.setActiveConversation,N=m().t,T=r.friend,g=r.showChats,j=T.userID,U=T.profile,w=T.remark,D=a(""),E=D[0],S=D[1],A=a(""),F=A[0],M=A[1],W=a(!1),y=W[0],B=W[1],K=h(),q=K.addToBlocklist,z=K.deleteFriend;s((function(){B(!1),M(w)}),[k,w]);return i(o,{children:[c(u,{profile:U}),i("div",t({className:"tui-contact-info-content"},{children:[i("div",t({className:"content-item"},{children:[c("p",t({className:"content-item-label"},{children:N("TUIContact.remark")})),c(v,{name:"remark",className:"content-item-text",value:F,type:"text",toggle:function(){S("remark")},isEdit:"remark"===E,confirm:function(t){b.updateFriend({userID:j,remark:null==t?void 0:t.value}),M(null==t?void 0:t.value),S("")},close:function(){S("")}})]})),i("div",t({className:"content-item"},{children:[c("p",t({className:"content-item-label"},{children:N("TUIContact.block")})),c(f,{className:"content-item-text",onChange:function(){return e(p,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,q(j)];case 1:return t.sent(),B(!0),I(),[2]}}))}))},checked:y})]})),i("div",t({className:"content-btn-container"},{children:[c("div",t({className:"content-item-btn delete-btn",role:"button",tabIndex:0,onClick:function(){return e(p,void 0,void 0,(function(){return n(this,(function(t){switch(t.label){case 0:return[4,z(j)];case 1:return t.sent(),I(),[2]}}))}))}},{children:N("TUIContact.Delete friend")})),c("div",t({className:"content-item-btn confirm-btn",role:"button",tabIndex:0,onClick:function(){var t="C2C".concat(j);g&&g(),l.switchConversation(t).then((function(t){x(t.getConversation())}))}},{children:N("TUIContact.Send Message")}))]}))]}))]})}var C=r.memo(p);export{C as FriendInfo,p as UnMemoizedFriendInfo};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{__assign as t}from"tslib";import{jsxs as e,Fragment as n,jsx as o}from"react/jsx-runtime";import i from"react";import{useTranslation as r}from"react-i18next";import{TUIConversationService as a}from"@tencentcloud/chat-uikit-engine";import{useTUIKitContext as c}from"../../../context/TUIKitContext.js";import"../../../context/TUIMessageContext.js";import{Icon as s}from"../../Icon/Icon.js";import{IconTypes as m}from"../../Icon/type.js";import{isH5 as d}from"../../../utils/env.js";import{Avatar as l}from"../../Avatar/Avatar.js";import{defaultUserAvatar as h}from"../../Avatar/default.js";function v(i){var v=i.group,f=i.showChats,p=c("TUIContact"),u=p.setActiveContact,C=p.setActiveConversation,I=r().t,g=v.groupID,x=v.name,j=v.avatar;return e(n,{children:[e("div",t({className:"tui-contact-info-header"},{children:[d&&o(s,{width:9,height:16,type:m.BACK,onClick:function(){a.switchConversation(""),u()}}),e("div",t({className:"header-container"},{children:[e("div",t({className:"header-container-avatar"},{children:[o(l,{size:60,image:j||h}),o("div",t({className:"header-container-name"},{children:x||g}))]})),o("div",t({className:"header-container-text"},{children:"groupID:".concat(g)}))]}))]})),o("div",t({className:"tui-contact-info-content"},{children:o("div",t({className:"content-btn-container"},{children:o("div",t({className:"content-item-btn confirm-btn",role:"button",tabIndex:0,onClick:function(){var t="GROUP".concat(g);f&&f(),a.switchConversation(t).then((function(t){C(t.getConversation())}))}},{children:I("TUIContact.Send Message")}))}))}))]})}var f=i.memo(v);export{f as GroupInfo,v as UnMemoizedGroupInfo};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as t}from"tslib";import{jsxs as i,jsx as n}from"react/jsx-runtime";import
|
|
1
|
+
import{__assign as t}from"tslib";import{jsxs as i,jsx as o,Fragment as n}from"react/jsx-runtime";import e,{useState as c}from"react";import{useTranslation as a}from"react-i18next";import s from"@tencentcloud/chat";import{isH5 as r}from"../../../utils/env.js";import{useTUIKitContext as l}from"../../../context/TUIKitContext.js";import"../../../context/TUIMessageContext.js";import{useTUIContactContext as m}from"../../../context/TUIContactContext.js";import p from"../TUIContactInfo/hooks/useContactInfo.js";import d from"../hooks/useTUIContact.js";import{Avatar as u}from"../../Avatar/Avatar.js";import{defaultUserAvatar as f}from"../../Avatar/default.js";import h from"../../Icon/images/right-arrow.svg.js";import v from"../../Icon/images/down-arrow.png.js";function I(){var e=l().setActiveContact,I=a().t,C=m("TUIContactList"),N=C.isShowContactList,x=C.friendList,T=C.blocklistProfile,g=C.friendApplicationList,S=p().acceptFriendApplication,b=d().groupList,w=c(!1),k=w[0],A=w[1],U=c(!1),j=U[0],L=U[1],P=c(!1),_=P[0],y=P[1],E=c(!1),D=E[0],M=E[1],O=function(c){var a=c.type,s=c.isShow,r=c.setShow,l=c.list,m=c.title;return i(n,{children:[i("div",t({className:"tui-contacts-title",role:"button",tabIndex:0,onClick:function(){return r(!s)}},{children:[o("div",t({className:"tui-contacts-list-title"},{children:m})),o("div",t({className:"tui-contacts-list-icon"},{children:o("img",{src:s?v:h,alt:""})}))]})),s&&(null==l?void 0:l.map((function(n){var c=n.profile||n,s=c.userID,r=c.groupID,l=c.avatar,m=c.name,p=c.nick,d=n.remark||p||s||m||r;return i("div",t({role:"button",tabIndex:0,className:"tui-contacts-list-item",onClick:function(){e({type:a,data:n})}},{children:[o(u,{size:30,image:l||f}),o("div",t({className:"tui-contacts-list-item-container"},{children:o("p",t({className:"tui-contacts-list-item-name"},{children:d}))}))]}),s||r)})))]})};return N&&i("div",t({className:"tui-contacts-list ".concat(r?"tui-contacts-list-h5":""," ")},{children:[i("div",t({className:"tui-contacts-title",role:"button",tabIndex:0,onClick:function(){return A(!k)}},{children:[o("p",t({className:"tui-contacts-list-title"},{children:I("TUIContact.New Contacts")})),o("div",t({className:"tui-contacts-list-icon"},{children:o("img",{src:k?v:h,alt:""})}))]})),k&&(null==g?void 0:g.map((function(n,c){var a=n.userID,r=n.avatar,l=n.nick,m=n.wording,p=n.type;return i("div",t({role:"button",tabIndex:0,className:"tui-contacts-list-item",onClick:function(t){t.stopPropagation(),e({type:"friendApplication",data:n})}},{children:[o(u,{size:30,image:r||f}),i("div",t({className:"tui-contacts-list-item-card"},{children:[i("div",{children:[o("p",t({className:"tui-contacts-list-item-name text-ellipsis"},{children:l||a})),""!==m&&o("p",t({className:"tui-contacts-list-item-text text-ellipsis"},{children:m}))]}),p===s.TYPES.SNS_APPLICATION_SENT_BY_ME&&o("p",t({className:"tui-contacts-list-btn-text text-ellipsis"},{children:I("TUIContact.waiting for verification")})),p===s.TYPES.SNS_APPLICATION_SENT_TO_ME&&o("div",t({className:"application-btn",role:"button",tabIndex:0,onClick:function(t){!function(t,i){t.stopPropagation(),S(i),e()}(t,a)}},{children:I("TUIContact.Agree")}))]}))]}),a)}))),o(O,{type:"block",title:I("TUIContact.Blocked List"),isShow:_,setShow:y,list:T}),o(O,{type:"group",title:I("TUIContact.Group List"),setShow:M,isShow:D,list:b}),o(O,{type:"friend",title:I("TUIContact.Friends"),setShow:L,isShow:j,list:x})]}))}var C=e.memo(I);export{C as TUIContactList};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__awaiter as t,__generator as n}from"tslib";import{useState as i,useEffect as r}from"react";import e from"@tencentcloud/chat";import{useTUIKitContext as
|
|
1
|
+
import{__awaiter as t,__generator as n}from"tslib";import{useState as i,useEffect as r}from"react";import o from"@tencentcloud/chat";import{TUIStore as e,StoreName as c}from"@tencentcloud/chat-uikit-engine";import{useTUIKitContext as a}from"../../../context/TUIKitContext.js";import"react/jsx-runtime";import"../../../context/TUIMessageContext.js";function u(){var u=this,s=a().chat,l=i([]),f=l[0],d=l[1],v=i([]),p=v[0],L=v[1],h=i([]),m=h[0],T=h[1],E=i([]),A=E[0],I=E[1],g=i(),D=g[0],P=g[1],b=i(!0),w=b[0],x=b[1];r((function(){e.watch(c.GRP,{groupList:C}),U(),_(),N()}),[s]);var C=function(t){P(t)};r((function(){null==s||s.on(o.EVENT.BLACKLIST_UPDATED,F),null==s||s.on(o.EVENT.FRIEND_LIST_UPDATED,j),null==s||s.on(o.EVENT.FRIEND_APPLICATION_LIST_UPDATED,k)}),[s]);var N=function(){return t(u,void 0,void 0,(function(){var t;return n(this,(function(n){switch(n.label){case 0:return[4,s.getFriendApplicationList()];case 1:return t=n.sent().data,T(null==t?void 0:t.friendApplicationList),[2]}}))}))},U=function(){return t(u,void 0,void 0,(function(){var t,i,r;return n(this,(function(n){switch(n.label){case 0:return[4,s.getFriendList()];case 1:return t=n.sent(),i=t.code,r=t.data,0===i&&d(r),[2]}}))}))},_=function(){return t(u,void 0,void 0,(function(){var t;return n(this,(function(n){switch(n.label){case 0:return[4,s.getBlacklist()];case 1:return 0===(t=n.sent().data).length||(L(t),S(t)),[2]}}))}))},S=function(i){return t(u,void 0,void 0,(function(){var t;return n(this,(function(n){switch(n.label){case 0:return[4,s.getUserProfile({userIDList:i})];case 1:return t=n.sent().data,I(t),[2]}}))}))},k=function(t){var n;T(null===(n=null==t?void 0:t.data)||void 0===n?void 0:n.friendApplicationList)},F=function(t){L(t.data),S(t.data)},j=function(t){d(t.data)};return{friendList:f,groupList:D,blocklistProfile:A,friendApplicationList:m,blockList:p,isShowContactList:w,setShowContactList:x}}export{u as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__assign as t}from"tslib";import{jsx as e,jsxs as o,Fragment as a}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";import{TUIStore as i,StoreName as c}from"@tencentcloud/chat-uikit-engine";import{TUILogin as
|
|
1
|
+
import{__assign as t}from"tslib";import{jsx as e,jsxs as o,Fragment as a}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";import{TUIStore as i,StoreName as c,TUIConversationService as s}from"@tencentcloud/chat-uikit-engine";import{TUILogin as l}from"@tencentcloud/tui-core";import{useTranslation as m}from"react-i18next";import{isPC as u,isH5 as C}from"../../utils/env.js";import{useTUIKit as h}from"./hooks/useTUIKit.js";import{useCreateTUIKitContext as d}from"./hooks/useCreateTUIKitContext.js";import{TUIKitProvider as f}from"../../context/TUIKitContext.js";import{TUIConversation as v}from"../TUIConversation/TUIConversation.js";import{TUIChat as T}from"../TUIChat/TUIChat.js";import{TUIManage as p}from"../TUIManage/TUIManage.js";import{TUIProfile as I}from"../TUIProfile/TUIProfile.js";import"../TUIProfile/TUIProfileDefault.js";import"@tencentcloud/chat";import"../../context/TUIMessageContext.js";import"../Icon/config.js";import"../Icon/type.js";import{TUIContactInfo as g}from"../TUIContact/TUIContactInfo/TUIContactInfo.js";import{TUIContact as U}from"../TUIContact/TUIContact.js";import{TUIKIT_TABBAR as S}from"../../constants.js";import"../../locales/index.js";import j from"../Icon/images/chats.svg.js";import A from"../Icon/images/chats-selected.svg.js";import N from"../Icon/images/contacts.svg.js";import w from"../Icon/images/contacts-selected.svg.js";var b=[{id:1,name:S.CHATS,icon:j,selectedIcon:A,value:S.CHATS},{id:2,name:S.CONTACTS,icon:N,selectedIcon:w,value:S.CONTACTS}],x={className:"sample-h5-input",isTransmitter:!0};function M(n){var r=n.moduleValue,i=n.tabbarRender,c=n.setModuleValue;return o(a,{children:[o("div",t({className:"sample-chat-left-container"},{children:[e(I,{className:"sample-chat-profile"}),i,r===S.CHATS&&e(v,{}),r===S.CONTACTS&&e(U,{})]})),r===S.CHATS&&o(a,{children:[e(T,{}),e(p,{})]}),r===S.CONTACTS&&e(U,{children:e(g,{showChats:function(){c(S.CHATS)}})})]})}function P(n){var r=n.moduleValue,i=n.contactData,c=n.tabbarRender,s=n.currentConversationID,l=n.setModuleValue;return o(a,{children:[!s&&!i&&o("div",t({className:"sample-chat-h5-container"},{children:[e(I,{className:"sample-profile"}),c,r===S.CHATS&&e(v,{}),r===S.CONTACTS&&e(U,{})]})),r===S.CHATS&&s&&o(a,{children:[e(T,{TUIMessageInputConfig:x}),e(p,{})]}),r===S.CONTACTS&&i&&e(U,{children:e(g,{showChats:function(){l(S.CHATS)}})})]})}function V(a){var v=n("chats"),T=v[0],p=v[1],I=m().t,g=a.children,U=a.chat,S=void 0===U?l.getContext().chat:U,j=a.customClasses,A=a.activeConversation,N=a.language,w=void 0===N?"en":N;window.tencent_cloud_im_csig_react_uikit_23F_xa=!0;var x=h({chat:S,activeConversation:A,language:w}),V=x.conversation,D=x.contactData,H=x.setActiveConversation,O=x.myProfile,_=x.TUIManageShow,k=x.setTUIManageShow,R=x.TUIProfileShow,y=x.setTUIProfileShow,K=x.setActiveContact,F=d({chat:S,language:w,conversation:V,contactData:D,setActiveConversation:H,customClasses:j,myProfile:O,TUIManageShow:_,setTUIManageShow:k,TUIProfileShow:R,setTUIProfileShow:y,setActiveContact:K});r((function(){return i.watch(c.CONV,{currentConversation:q}),function(){i.unwatch(c.CONV,{currentConversation:q})}}),[]);var q=function(t){H(null==t?void 0:t.getConversation())},z=e("div",t({className:"sample-chat-tab"},{children:b.map((function(a){return o("div",t({className:"sample-chat-tab-container",role:"presentation",onClick:function(){var t;t=a.value,p(t),s.switchConversation("")}},{children:[e("img",{src:T===a.value?a.selectedIcon:a.icon,alt:""}),e("p",t({className:"sample-chat-tab-text ".concat(T===a.value?"sample-chat-tab-active":"")},{children:I(a.name)}))]}),a.id)}))}));return e(f,t({value:F},{children:e("div",t({className:"tui-kit"},{children:g||u&&e(M,{moduleValue:T,tabbarRender:z,setModuleValue:p})||C&&e(P,{contactData:D,moduleValue:T,tabbarRender:z,currentConversationID:(null==V?void 0:V.conversationID)||"",setModuleValue:p})}))}))}export{V as TUIKit};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { IGroupModel } from '@tencentcloud/chat-uikit-engine';
|
|
2
3
|
import { ChatSDK, Conversation, Profile, Friend, FriendApplication } from '@tencentcloud/chat';
|
|
3
4
|
|
|
4
5
|
interface blockData {
|
|
@@ -17,7 +18,11 @@ interface addFriendData {
|
|
|
17
18
|
type: 'addFriend';
|
|
18
19
|
data: Profile;
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
+
interface GroupData {
|
|
22
|
+
type: 'group';
|
|
23
|
+
data: IGroupModel;
|
|
24
|
+
}
|
|
25
|
+
type UseContactParams = blockData | friendData | friendApplicationData | addFriendData | GroupData | undefined;
|
|
21
26
|
interface UseChatParams {
|
|
22
27
|
chat: ChatSDK;
|
|
23
28
|
activeConversation?: Conversation;
|
|
@@ -32,7 +37,7 @@ declare const useTUIKit: ({ chat, activeConversation: paramsActiveConversation,
|
|
|
32
37
|
setTUIManageShow: React.Dispatch<React.SetStateAction<boolean>>;
|
|
33
38
|
TUIProfileShow: boolean;
|
|
34
39
|
setTUIProfileShow: React.Dispatch<React.SetStateAction<boolean>>;
|
|
35
|
-
setActiveContact: (actionContactData
|
|
40
|
+
setActiveContact: (actionContactData?: UseContactParams) => void;
|
|
36
41
|
};
|
|
37
42
|
|
|
38
43
|
export { UseChatParams, UseContactParams, useTUIKit };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useState as n,useEffect as t,useCallback as o}from"react";import{TUIStore as e,StoreName as a}from"@tencentcloud/chat-uikit-engine";import{useTranslation as i}from"react-i18next";var r=function(r){var c=r.chat,s=r.activeConversation,u=r.language,v=i().i18n,f=n(s),l=f[0],g=f[1],h=n(),I=h[0],m=h[1],w=n(!1),D=w[0],S=w[1],U=n(!1),p=U[0],P=U[1],T=n(),d=T[0],C=T[1];t((function(){v.changeLanguage(u),e.watch(a.USER,{userProfile:function(n){m(n)}})}),[u]);var M=o((function(n){n&&(null==c||c.setMessageRead({conversationID:n.conversationID})),l&&(null==n?void 0:n.conversationID)!==l.conversationID&&S(!1),
|
|
1
|
+
import{useState as n,useEffect as t,useCallback as o}from"react";import{TUIStore as e,StoreName as a}from"@tencentcloud/chat-uikit-engine";import{useTranslation as i}from"react-i18next";var r=function(r){var c=r.chat,s=r.activeConversation,u=r.language,v=i().i18n,f=n(s),l=f[0],g=f[1],h=n(),I=h[0],m=h[1],w=n(!1),D=w[0],S=w[1],U=n(!1),p=U[0],P=U[1],T=n(),d=T[0],C=T[1];t((function(){v.changeLanguage(u),e.watch(a.USER,{userProfile:function(n){m(n)}})}),[u]);var M=o((function(n){n&&(null==c||c.setMessageRead({conversationID:n.conversationID})),l&&(null==n?void 0:n.conversationID)!==l.conversationID&&S(!1),g(n)}),[c]);return t((function(){s&&g(s)}),[s]),{conversation:l,contactData:d,setActiveConversation:M,myProfile:I,TUIManageShow:D,setTUIManageShow:S,TUIProfileShow:p,setTUIProfileShow:P,setActiveContact:function(n){C(n)}}};export{r as useTUIKit};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};export{e as default};
|
|
1
|
+
var e={"Enter a userID":"Enter a userID","Enter the verification info":"Enter the verification info","Request to join":"Request to join",Requested:"Requested",Accept:"Accept",Refuse:"Refuse",Handled:"Handled",Friends:"Friends","Send Message":"Send Message",Signature:"Signature","New Contacts":"New Contacts","Blocked List":"Blocked List","Group List":"Group List","No Result":"No Result",ID:"ID",User:"User","Add Friend":"Add Friend",remark:"remark",block:"block","Delete friend":"Delete friend","waiting for verification":"waiting for verification","verification info":"verification info","Send application":"Send application",Agree:"Agree"};export{e as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};export{e as default};
|
|
1
|
+
var e={"Enter a userID":"请输入用户 ID，回车搜索","Enter the verification info":"请填写验证信息","Request to join":"申请加入",Requested:"已申请",Accept:"接受",Refuse:"拒绝",Handled:"已处理",Friends:"我的好友","Send Message":"发送消息",Signature:"个性签名","Successful application, waiting for the administrator to agree to join the group application":"等待管理员同意","New Contacts":"新的联系人","Blocked List":"黑名单","Group List":"我的群聊","No Result":"无搜索结果",ID:"ID",User:"联系人","Add Friend":"添加好友",remark:"备注",block:"加入黑名单","Delete friend":"删除好友","waiting for verification":"等待验证","verification info":"验证信息","Send application":"发送申请",Agree:"同意"};export{e as default};
|
package/package.json
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
const fs = require('fs');
|
|
2
|
+
const path = require('path');
|
|
3
|
+
const { execSync } = require('child_process');
|
|
4
|
+
|
|
5
|
+
// Change directory to tuikit/examples/sample-chat
|
|
6
|
+
process.chdir(path.join('examples', 'sample-chat'));
|
|
7
|
+
|
|
8
|
+
// Change directory to src
|
|
9
|
+
process.chdir('src');
|
|
10
|
+
process.chdir('demo');
|
|
11
|
+
// Remove file
|
|
12
|
+
fs.unlinkSync('SampleChat.tsx');
|
|
13
|
+
// Rename index-intl.tsx to index
|
|
14
|
+
fs.renameSync('SampleChat-experience.tsx', 'SampleChat.tsx');
|
|
@@ -103,7 +103,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
|
|
|
103
103
|
break;
|
|
104
104
|
case 'delete':
|
|
105
105
|
deleteConversation(conversationID);
|
|
106
|
-
if (setActiveConversation &&
|
|
106
|
+
if (setActiveConversation && conversationID === activeConversation?.conversationID) {
|
|
107
107
|
setActiveConversation(undefined);
|
|
108
108
|
}
|
|
109
109
|
break;
|
|
@@ -6,17 +6,18 @@ import { isH5 } from '../../../utils/env';
|
|
|
6
6
|
import { FriendInfo } from './friendInfo';
|
|
7
7
|
import { BlockInfo } from './blockInfo';
|
|
8
8
|
import { AddFriendInfo } from './addFriendInfo';
|
|
9
|
+
import { GroupInfo } from './groupInfo';
|
|
9
10
|
import { FriendApplicationInfo } from './friendApplication';
|
|
10
11
|
import './index.scss';
|
|
11
12
|
|
|
12
13
|
interface TUIContactInfoProps {
|
|
13
14
|
className?: string,
|
|
14
|
-
|
|
15
|
+
showChats?: () => void,
|
|
15
16
|
}
|
|
16
17
|
export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
|
|
17
18
|
props: PropsWithChildren<T>,
|
|
18
19
|
): React.ReactElement {
|
|
19
|
-
const {
|
|
20
|
+
const { showChats } = props;
|
|
20
21
|
const { contactData } = useTUIKitContext('TUIContact');
|
|
21
22
|
if (!contactData?.type) {
|
|
22
23
|
return (<> </>);
|
|
@@ -24,8 +25,9 @@ export function UnMemoizedTUIContactInfo<T extends TUIContactInfoProps>(
|
|
|
24
25
|
return (
|
|
25
26
|
<div className={`tui-contact-info ${isH5 ? 'tui-contact-info-h5' : ''} `}>
|
|
26
27
|
{contactData?.type === 'addFriend' && (<AddFriendInfo profile={contactData?.data} />)}
|
|
27
|
-
{contactData?.type === 'friend' && (<FriendInfo
|
|
28
|
+
{contactData?.type === 'friend' && (<FriendInfo showChats={showChats} friend={contactData?.data} />)}
|
|
28
29
|
{contactData?.type === 'block' && (<BlockInfo profile={contactData?.data} />)}
|
|
30
|
+
{contactData?.type === 'group' && (<GroupInfo showChats={showChats} group={contactData?.data} />)}
|
|
29
31
|
{contactData?.type === 'friendApplication' && <FriendApplicationInfo application={contactData?.data} />}
|
|
30
32
|
</div>
|
|
31
33
|
);
|
|
@@ -1,18 +1,17 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
2
|
import { useTranslation } from 'react-i18next';
|
|
3
3
|
import { Friend } from '@tencentcloud/chat';
|
|
4
|
-
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
|
|
4
|
+
import { TUIConversationService, IConversationModel } from '@tencentcloud/chat-uikit-engine';
|
|
5
5
|
import { useTUIKitContext } from '../../../context';
|
|
6
6
|
import { BasicInfo } from './basicInfo';
|
|
7
7
|
import { Switch } from '../../Switch';
|
|
8
8
|
import useContactInfo from './hooks/useContactInfo';
|
|
9
9
|
import { DivWithEdit } from '../../DivWithEdit';
|
|
10
|
-
import { useConversation } from '../../../hooks';
|
|
11
10
|
import '../index.scss';
|
|
12
11
|
|
|
13
12
|
interface Props {
|
|
14
13
|
friend: Friend;
|
|
15
|
-
|
|
14
|
+
showChats?: () => void,
|
|
16
15
|
}
|
|
17
16
|
export function UnMemoizedFriendInfo<T extends Props>(
|
|
18
17
|
props: T,
|
|
@@ -21,7 +20,7 @@ export function UnMemoizedFriendInfo<T extends Props>(
|
|
|
21
20
|
chat, contactData, setActiveContact, setActiveConversation,
|
|
22
21
|
} = useTUIKitContext('TUIContact');
|
|
23
22
|
const { t } = useTranslation();
|
|
24
|
-
const { friend,
|
|
23
|
+
const { friend, showChats } = props;
|
|
25
24
|
const { userID, profile, remark } = friend;
|
|
26
25
|
const [isEditName, setIsEditRemark] = useState('');
|
|
27
26
|
const [remarkValue, setRemarkValue] = useState('');
|
|
@@ -30,7 +29,6 @@ export function UnMemoizedFriendInfo<T extends Props>(
|
|
|
30
29
|
addToBlocklist,
|
|
31
30
|
deleteFriend,
|
|
32
31
|
} = useContactInfo();
|
|
33
|
-
const { createConversation } = useConversation(chat);
|
|
34
32
|
useEffect(() => {
|
|
35
33
|
setIsAddToBlocklist(false);
|
|
36
34
|
setRemarkValue(remark);
|
|
@@ -59,12 +57,14 @@ export function UnMemoizedFriendInfo<T extends Props>(
|
|
|
59
57
|
await deleteFriend(userID);
|
|
60
58
|
setActiveContact();
|
|
61
59
|
};
|
|
62
|
-
const openC2CConversation =
|
|
60
|
+
const openC2CConversation = () => {
|
|
63
61
|
const conversationID = `C2C${userID}`;
|
|
64
|
-
|
|
65
|
-
TUIConversationService.switchConversation(conversationID)
|
|
66
|
-
|
|
67
|
-
|
|
62
|
+
showChats && showChats();
|
|
63
|
+
TUIConversationService.switchConversation(conversationID).then(
|
|
64
|
+
(conversationModel: IConversationModel) => {
|
|
65
|
+
setActiveConversation(conversationModel.getConversation());
|
|
66
|
+
}
|
|
67
|
+
);
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
return (
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useTranslation } from 'react-i18next';
|
|
3
|
+
import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
|
|
4
|
+
import { useTUIKitContext } from '../../../context';
|
|
5
|
+
import { Icon, IconTypes } from '../../Icon';
|
|
6
|
+
import { isH5 } from '../../../utils/env';
|
|
7
|
+
import '../index.scss';
|
|
8
|
+
import { Avatar, defaultUserAvatar } from '../../Avatar';
|
|
9
|
+
|
|
10
|
+
interface Props {
|
|
11
|
+
group: IGroupModel;
|
|
12
|
+
showChats?: () => void,
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export function UnMemoizedGroupInfo<T extends Props>(
|
|
16
|
+
props: T,
|
|
17
|
+
): React.ReactElement {
|
|
18
|
+
const { group, showChats } = props;
|
|
19
|
+
|
|
20
|
+
const { setActiveContact, setActiveConversation } = useTUIKitContext('TUIContact');
|
|
21
|
+
const { t } = useTranslation();
|
|
22
|
+
const { groupID, name, avatar } = group;
|
|
23
|
+
|
|
24
|
+
const back = () => {
|
|
25
|
+
TUIConversationService.switchConversation('');
|
|
26
|
+
setActiveContact();
|
|
27
|
+
};
|
|
28
|
+
const openGroupConversation = () => {
|
|
29
|
+
const conversationID = `GROUP${groupID}`;
|
|
30
|
+
showChats && showChats();
|
|
31
|
+
TUIConversationService.switchConversation(conversationID).then(
|
|
32
|
+
(conversationModel: IConversationModel) => {
|
|
33
|
+
setActiveConversation(conversationModel.getConversation());
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<>
|
|
40
|
+
<div className="tui-contact-info-header">
|
|
41
|
+
{isH5 && (
|
|
42
|
+
<Icon
|
|
43
|
+
width={9}
|
|
44
|
+
height={16}
|
|
45
|
+
type={IconTypes.BACK}
|
|
46
|
+
onClick={back}
|
|
47
|
+
/>
|
|
48
|
+
)}
|
|
49
|
+
<div className="header-container">
|
|
50
|
+
<div className="header-container-avatar">
|
|
51
|
+
<Avatar size={60} image={avatar || defaultUserAvatar} />
|
|
52
|
+
<div className="header-container-name">{name || groupID}</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div className="header-container-text">{`groupID:${groupID}`}</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div className="tui-contact-info-content">
|
|
58
|
+
<div className="content-btn-container">
|
|
59
|
+
<div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={openGroupConversation}>{t('TUIContact.Send Message')}</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
export const GroupInfo = React.memo(UnMemoizedGroupInfo);
|
|
@@ -4,13 +4,20 @@ import TencentCloudChat from '@tencentcloud/chat';
|
|
|
4
4
|
import { isH5 } from '../../../utils/env';
|
|
5
5
|
import { useTUIKitContext, useTUIContactContext } from '../../../context';
|
|
6
6
|
import useContactInfo from '../TUIContactInfo/hooks/useContactInfo';
|
|
7
|
-
|
|
7
|
+
import useTUIContact from '../hooks/useTUIContact';
|
|
8
8
|
import { Avatar, defaultUserAvatar } from '../../Avatar';
|
|
9
9
|
import rightArrow from '../../Icon/images/right-arrow.svg';
|
|
10
10
|
import downArrow from '../../Icon/images/down-arrow.png';
|
|
11
|
-
|
|
12
11
|
import './index.scss';
|
|
13
12
|
|
|
13
|
+
interface RenderContactListProps {
|
|
14
|
+
type: 'group' | 'block' | 'friend' ,
|
|
15
|
+
isShow: boolean,
|
|
16
|
+
title: string,
|
|
17
|
+
list: Array<any> | undefined,
|
|
18
|
+
setShow: (value: boolean) => void
|
|
19
|
+
}
|
|
20
|
+
|
|
14
21
|
function UnMemoizedTUIContactList<T>(): React.ReactElement {
|
|
15
22
|
const { setActiveContact } = useTUIKitContext();
|
|
16
23
|
const { t } = useTranslation();
|
|
@@ -20,16 +27,56 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
|
|
|
20
27
|
const {
|
|
21
28
|
acceptFriendApplication,
|
|
22
29
|
} = useContactInfo();
|
|
23
|
-
|
|
30
|
+
const { groupList } = useTUIContact();
|
|
24
31
|
const [iShowFriendApplication, setShowFriendApplication] = useState(false);
|
|
25
32
|
const [iShowFriends, setShowFriends] = useState(false);
|
|
26
33
|
const [isShowBlocklist, setShowBlocklist] = useState(false);
|
|
34
|
+
const [isShowGrouplist, setShowGrouplist] = useState(false);
|
|
27
35
|
|
|
28
36
|
const acceptFriendApplicationHandle = (e: any, userID: string) => {
|
|
29
37
|
e.stopPropagation();
|
|
30
38
|
acceptFriendApplication(userID);
|
|
31
39
|
setActiveContact();
|
|
32
40
|
};
|
|
41
|
+
|
|
42
|
+
const RenderContactList = ({ type, isShow, setShow, list, title } : RenderContactListProps) => {
|
|
43
|
+
return (
|
|
44
|
+
<>
|
|
45
|
+
<div
|
|
46
|
+
className="tui-contacts-title"
|
|
47
|
+
role="button"
|
|
48
|
+
tabIndex={0}
|
|
49
|
+
onClick={() => setShow(!isShow)}
|
|
50
|
+
>
|
|
51
|
+
<div className="tui-contacts-list-title">{title}</div>
|
|
52
|
+
<div className="tui-contacts-list-icon">
|
|
53
|
+
<img src={isShow ? downArrow : rightArrow} alt="" />
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
{isShow
|
|
57
|
+
&& list?.map((item: any) => {
|
|
58
|
+
const { userID, groupID, avatar, name, nick } = item.profile || item;
|
|
59
|
+
const showName = item.remark || nick || userID || name || groupID;
|
|
60
|
+
return (
|
|
61
|
+
<div
|
|
62
|
+
role="button"
|
|
63
|
+
tabIndex={0}
|
|
64
|
+
className="tui-contacts-list-item"
|
|
65
|
+
key={userID || groupID}
|
|
66
|
+
onClick={() => {
|
|
67
|
+
setActiveContact({ type, data: item });
|
|
68
|
+
}}
|
|
69
|
+
>
|
|
70
|
+
<Avatar size={30} image={avatar || defaultUserAvatar} />
|
|
71
|
+
<div className="tui-contacts-list-item-container">
|
|
72
|
+
<p className="tui-contacts-list-item-name">{ showName }</p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
})}
|
|
77
|
+
</>
|
|
78
|
+
);
|
|
79
|
+
}
|
|
33
80
|
// eslint-disable-next-line
|
|
34
81
|
// @ts-ignore
|
|
35
82
|
return (
|
|
@@ -96,68 +143,27 @@ function UnMemoizedTUIContactList<T>(): React.ReactElement {
|
|
|
96
143
|
</div>
|
|
97
144
|
);
|
|
98
145
|
})}
|
|
99
|
-
<
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
setActiveContact({ type: 'block', data: item });
|
|
121
|
-
}}
|
|
122
|
-
>
|
|
123
|
-
<Avatar size={30} image={avatar || defaultUserAvatar} />
|
|
124
|
-
<div className="tui-contacts-list-item-container">
|
|
125
|
-
<p className="tui-contacts-list-item-name">{ nick || userID}</p>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
);
|
|
129
|
-
})}
|
|
130
|
-
<div
|
|
131
|
-
className="tui-contacts-title"
|
|
132
|
-
role="button"
|
|
133
|
-
tabIndex={0}
|
|
134
|
-
onClick={() => setShowFriends(!iShowFriends)}
|
|
135
|
-
>
|
|
136
|
-
<div className="tui-contacts-list-title">{t('TUIContact.Friends')}</div>
|
|
137
|
-
<div className="tui-contacts-list-icon">
|
|
138
|
-
<img src={iShowFriends ? downArrow : rightArrow} alt="" />
|
|
139
|
-
</div>
|
|
140
|
-
</div>
|
|
141
|
-
{iShowFriends
|
|
142
|
-
&& friendList?.map((item, index) => {
|
|
143
|
-
const { userID, avatar, nick } = item.profile;
|
|
144
|
-
return (
|
|
145
|
-
<div
|
|
146
|
-
className="tui-contacts-list-item"
|
|
147
|
-
key={userID}
|
|
148
|
-
role="button"
|
|
149
|
-
tabIndex={0}
|
|
150
|
-
onClick={() => {
|
|
151
|
-
setActiveContact({ type: 'friend', data: item });
|
|
152
|
-
}}
|
|
153
|
-
>
|
|
154
|
-
<Avatar size={30} image={avatar || defaultUserAvatar} />
|
|
155
|
-
<div className="tui-contacts-list-item-container">
|
|
156
|
-
<p className="tui-contacts-list-item-name">{item.remark || nick || userID}</p>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
);
|
|
160
|
-
})}
|
|
146
|
+
<RenderContactList
|
|
147
|
+
type={'block'}
|
|
148
|
+
title={t('TUIContact.Blocked List')}
|
|
149
|
+
isShow={isShowBlocklist}
|
|
150
|
+
setShow={setShowBlocklist}
|
|
151
|
+
list={blocklistProfile}
|
|
152
|
+
/>
|
|
153
|
+
<RenderContactList
|
|
154
|
+
type={'group'}
|
|
155
|
+
title={t('TUIContact.Group List')}
|
|
156
|
+
setShow={setShowGrouplist}
|
|
157
|
+
isShow={isShowGrouplist}
|
|
158
|
+
list={groupList}
|
|
159
|
+
/>
|
|
160
|
+
<RenderContactList
|
|
161
|
+
type={'friend'}
|
|
162
|
+
title={t('TUIContact.Friends')}
|
|
163
|
+
setShow={setShowFriends}
|
|
164
|
+
isShow={iShowFriends}
|
|
165
|
+
list={friendList}
|
|
166
|
+
/>
|
|
161
167
|
</div>
|
|
162
168
|
)
|
|
163
169
|
);
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
2
|
import TencentCloudChat from '@tencentcloud/chat';
|
|
3
|
+
import {
|
|
4
|
+
TUIStore,
|
|
5
|
+
StoreName,
|
|
6
|
+
IGroupModel,
|
|
7
|
+
} from '@tencentcloud/chat-uikit-engine';
|
|
3
8
|
import { useTUIKitContext } from '../../../context';
|
|
4
9
|
|
|
5
10
|
function useTUIContact() {
|
|
@@ -8,14 +13,22 @@ function useTUIContact() {
|
|
|
8
13
|
const [blockList, setBlockList] = useState([]);
|
|
9
14
|
const [friendApplicationList, setFriendApplicationList] = useState([]);
|
|
10
15
|
const [blocklistProfile, setBlocklistProfile] = useState([]);
|
|
16
|
+
const [groupList, setGroupList] = useState<IGroupModel[]>();
|
|
17
|
+
|
|
11
18
|
const [isShowContactList, setShowContactList] = useState(true);
|
|
12
19
|
|
|
13
20
|
useEffect(() => {
|
|
21
|
+
TUIStore.watch(StoreName.GRP, {
|
|
22
|
+
groupList: onGroupListUpdated,
|
|
23
|
+
});
|
|
14
24
|
getFriendList();
|
|
15
25
|
getBlocklist();
|
|
16
26
|
getFriendApplicationList();
|
|
17
27
|
}, [chat]);
|
|
18
28
|
|
|
29
|
+
const onGroupListUpdated = (list: IGroupModel[]) => {
|
|
30
|
+
setGroupList(list);
|
|
31
|
+
};
|
|
19
32
|
useEffect(() => {
|
|
20
33
|
chat?.on(TencentCloudChat.EVENT.BLACKLIST_UPDATED, onBlocklistUpdated);
|
|
21
34
|
chat?.on(TencentCloudChat.EVENT.FRIEND_LIST_UPDATED, onFriendListUpdated);
|
|
@@ -64,6 +77,7 @@ function useTUIContact() {
|
|
|
64
77
|
|
|
65
78
|
return {
|
|
66
79
|
friendList,
|
|
80
|
+
groupList,
|
|
67
81
|
blocklistProfile,
|
|
68
82
|
friendApplicationList,
|
|
69
83
|
blockList,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren, useState, useEffect } from 'react';
|
|
2
2
|
import { ChatSDK, Conversation } from '@tencentcloud/chat';
|
|
3
|
-
import { TUIStore, StoreName, IConversationModel } from '@tencentcloud/chat-uikit-engine';
|
|
3
|
+
import { TUIStore, StoreName, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
|
|
4
4
|
import { TUILogin } from '@tencentcloud/tui-core';
|
|
5
5
|
import { useTranslation } from 'react-i18next';
|
|
6
6
|
import { isH5, isPC } from '../../utils/env';
|
|
@@ -81,7 +81,7 @@ function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCPro
|
|
|
81
81
|
{moduleValue === TUIKIT_TABBAR.CONTACTS && (
|
|
82
82
|
<TUIContact>
|
|
83
83
|
<TUIContactInfo
|
|
84
|
-
|
|
84
|
+
showChats={() => {
|
|
85
85
|
setModuleValue(TUIKIT_TABBAR.CHATS);
|
|
86
86
|
}}
|
|
87
87
|
/>
|
|
@@ -113,7 +113,7 @@ function RenderForH5({
|
|
|
113
113
|
{ moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
|
|
114
114
|
<TUIContact>
|
|
115
115
|
<TUIContactInfo
|
|
116
|
-
|
|
116
|
+
showChats={() => {
|
|
117
117
|
setModuleValue(TUIKIT_TABBAR.CHATS);
|
|
118
118
|
}}
|
|
119
119
|
/>
|
|
@@ -176,6 +176,7 @@ export function TUIKit<
|
|
|
176
176
|
|
|
177
177
|
const switchTabbar = (value: string) => {
|
|
178
178
|
setModuleValue(value);
|
|
179
|
+
TUIConversationService.switchConversation('');
|
|
179
180
|
};
|
|
180
181
|
const onCurrentConversation = (conversationModel: IConversationModel) => {
|
|
181
182
|
setActiveConversation(conversationModel?.getConversation());
|
|
@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react';
|
|
|
2
2
|
import {
|
|
3
3
|
TUIStore,
|
|
4
4
|
StoreName,
|
|
5
|
+
IGroupModel
|
|
5
6
|
} from '@tencentcloud/chat-uikit-engine';
|
|
6
7
|
import { useTranslation } from 'react-i18next';
|
|
7
8
|
import {
|
|
@@ -32,8 +33,13 @@ interface addFriendData {
|
|
|
32
33
|
data: Profile
|
|
33
34
|
}
|
|
34
35
|
|
|
36
|
+
interface GroupData {
|
|
37
|
+
type: 'group',
|
|
38
|
+
data: IGroupModel
|
|
39
|
+
}
|
|
40
|
+
|
|
35
41
|
export type UseContactParams = blockData | friendData |
|
|
36
|
-
friendApplicationData | addFriendData| undefined;
|
|
42
|
+
friendApplicationData | addFriendData| GroupData | undefined;
|
|
37
43
|
|
|
38
44
|
export interface UseChatParams{
|
|
39
45
|
chat: ChatSDK,
|
|
@@ -68,11 +74,11 @@ export const useTUIKit = ({
|
|
|
68
74
|
if (conversation && (activeConversation?.conversationID !== conversation.conversationID)) {
|
|
69
75
|
setTUIManageShow(false);
|
|
70
76
|
}
|
|
71
|
-
|
|
77
|
+
setConversation(activeConversation);
|
|
72
78
|
},
|
|
73
79
|
[chat],
|
|
74
80
|
);
|
|
75
|
-
const setActiveContact = (actionContactData
|
|
81
|
+
const setActiveContact = (actionContactData?: UseContactParams) => {
|
|
76
82
|
setContactData(actionContactData);
|
|
77
83
|
};
|
|
78
84
|
|
|
@@ -13,6 +13,7 @@ const TUIContact = {
|
|
|
13
13
|
'Successful application, waiting for the administrator to agree to join the group application': '等待管理员同意',
|
|
14
14
|
'New Contacts': '新的联系人',
|
|
15
15
|
'Blocked List': '黑名单',
|
|
16
|
+
'Group List': '我的群聊',
|
|
16
17
|
'No Result': '无搜索结果',
|
|
17
18
|
'ID': 'ID',
|
|
18
19
|
'User': '联系人',
|