whyuzeim 1.0.0

package/README.md

@@ -0,0 +1,11 @@
+# 介绍
+
+IM 组件
+
+# 使用
+
+```
+import {IM} from "yuze-im"
+
+<IM></IM>
+```

package/cjs/AddMember/image/ic_close.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z' fill='white' fill-opacity='0.4'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/AddMember/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./style/index.scss";
+interface IAddMember {
+    name?: string;
+}
+declare const AddMember: React.FC<IAddMember>;
+export default AddMember;

package/cjs/AddMember/index.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/esm/toConsumableArray');
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/esm/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/esm/slicedToArray');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var classNames = require('classnames');
+var React = require('react');
+var ic_close = require('./image/ic_close.svg.js');
+var agoraChatUikit = require('agora-chat-uikit');
+var index = require('../ContactList/index.js');
+var index$1 = require('../TypeItem/index.js');
+var context = require('../IM/context.js');
+var antd = require('antd');
+var usehooksTs = require('usehooks-ts');
+require('./style/index.scss');
+
+var AddMember = function AddMember() {
+  var _useContext = React.useContext(context.Context),
+    setRightComponent = _useContext.setRightComponent;
+  var _useState = React.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    keyword = _useState2[0],
+    setKeyword = _useState2[1];
+  var _useState3 = React.useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    memberids = _useState4[0],
+    setMemberids = _useState4[1];
+  var _useContext2 = React.useContext(context.Context),
+    http = _useContext2.http;
+  var handleAddMember = React.useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var result;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          result = http.post("/capi/account/imchannel/inviteruser", {
+            sendbirdid: agoraChatUikit.rootStore.conversationStore.currentCvs.conversationId,
+            memberids: memberids
+          });
+          console.log(result);
+          setRightComponent && setRightComponent(undefined);
+          setMemberids([]);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [http, memberids, setRightComponent]);
+  var handleDebouncdAddMember = usehooksTs.useDebounceCallback(handleAddMember, 100);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-addMember w-full h-full")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("yuze-addMember-header flex flex-row items-center justify-between gap-4")
+  }, /*#__PURE__*/React.createElement("img", {
+    src: ic_close,
+    className: "cursor-pointer",
+    onClick: function onClick() {
+      setRightComponent && setRightComponent(undefined);
+    }
+  }), /*#__PURE__*/React.createElement(agoraChatUikit.Input, {
+    className: "flex-1",
+    onChange: function onChange(event) {
+      setKeyword(event.target.value);
+    },
+    onClear: function onClear() {
+      setKeyword("");
+    }
+  }), /*#__PURE__*/React.createElement(antd.Button, {
+    className: "yuze-addMember-confirm",
+    type: "primary",
+    onClick: handleDebouncdAddMember
+  }, "Confirm")), /*#__PURE__*/React.createElement("div", {
+    className: "yuze-addMember-member p-4"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "block text-center"
+  }, "Member"), /*#__PURE__*/React.createElement(index, {
+    className: "yuze-searchBox-list-content p-4",
+    keyword: keyword,
+    groupId: "",
+    memberids: memberids,
+    renderItem: function renderItem(item) {
+      return /*#__PURE__*/React.createElement(index$1, {
+        name: item.name,
+        key: item.id,
+        avatar: item.headimgurl,
+        rightNode: /*#__PURE__*/React.createElement(agoraChatUikit.Checkbox, {
+          className: "yuze-addMember-checkbox",
+          onChange: function onChange(event) {
+            if (event.target.checked) {
+              var _context2;
+              setMemberids(_concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(memberids), [item.userid]));
+            } else {
+              var filterMember = _filterInstanceProperty(memberids).call(memberids, function (child) {
+                return child !== item.id;
+              });
+              setMemberids(filterMember);
+            }
+          }
+        })
+      });
+    }
+  })));
+};
+
+module.exports = AddMember;

package/cjs/AddMember/style/index.scss

@@ -0,0 +1,47 @@
+.yuze-addMember {
+  background-color: var(--im-main-backgroundColor);
+  .yuze-addMember-header {
+    height: 64px;
+    box-sizing: border-box;
+    padding: 0 10px;
+    & > span {
+      color: var(--im-main-fontColor);
+    }
+  }
+  .yuze-addMember-member {
+    height: calc(100% - 64px);
+    & > span {
+      height: 34px;
+      color: var(--im-main-fontColor);
+      border-bottom: solid 1px #fff;
+    }
+  }
+  &-confirm {
+    background-color: var(--im-main-buttonColor) !important;
+    color: var(--im-five-fontColor) !important;
+    width: 100px;
+  }
+  &-checkbox {
+    .cui-checkbox--mark {
+      width: 20px;
+      height: 20px;
+      border-radius: 10px;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: none !important;
+      &::after {
+        position: relative;
+        left: 0;
+        right: 0;
+        width: 5px;
+        height: 10px;
+      }
+    }
+    input:checked ~ .cui-checkbox--mark {
+      background-color: var(--im-checkbox-backgroundColor);
+      border: none;
+    }
+  }
+}

package/cjs/ChatBox/JoinGroupDialog/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style/index.scss';
+interface GroupJoinDialogProps {
+    visible: boolean;
+    onClose: () => void;
+    shareGroupInfo?: any;
+    userId: string;
+}
+declare const JoinGroupDialog: React.FC<GroupJoinDialogProps>;
+export default JoinGroupDialog;

package/cjs/ChatBox/JoinGroupDialog/index.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var _asyncToGenerator = require('@babel/runtime-corejs3/helpers/esm/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime-corejs3/regenerator');
+var React = require('react');
+var antd = require('antd');
+var context = require('../../IM/context.js');
+var agoraChatUikit = require('agora-chat-uikit');
+require('./style/index.scss');
+
+var JoinGroupDialog = function JoinGroupDialog(props) {
+  var _props$shareGroupInfo6;
+  var _useContext = React.useContext(context.Context),
+    http = _useContext.http;
+  var joinGroup = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _props$shareGroupInfo;
+      var params, _yield$http$post, data, _props$shareGroupInfo2, _props$shareGroupInfo3, _props$shareGroupInfo4, _props$shareGroupInfo5, conversation;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            params = {
+              channelurl: (_props$shareGroupInfo = props.shareGroupInfo) === null || _props$shareGroupInfo === void 0 ? void 0 : _props$shareGroupInfo.sendbirdid,
+              inviteruid: props.userId
+            };
+            _context.next = 3;
+            return http.post('/capi/account/imchannel/apply/join', params);
+          case 3:
+            _yield$http$post = _context.sent;
+            data = _yield$http$post.data;
+            if ((data === null || data === void 0 ? void 0 : data.code) === 1512112) {
+              antd.message.info('Application successful, waiting for admin review');
+            } else if ((data === null || data === void 0 ? void 0 : data.code) === 200) {
+              //加入成功.
+              props.onClose();
+              conversation = {
+                chatType: 'groupChat',
+                conversationId: (_props$shareGroupInfo2 = props.shareGroupInfo) === null || _props$shareGroupInfo2 === void 0 ? void 0 : _props$shareGroupInfo2.sendbirdid,
+                lastMessage: {},
+                unreadCount: 0,
+                name: props === null || props === void 0 || (_props$shareGroupInfo3 = props.shareGroupInfo) === null || _props$shareGroupInfo3 === void 0 ? void 0 : _props$shareGroupInfo3.name,
+                avatarUrl: props === null || props === void 0 || (_props$shareGroupInfo4 = props.shareGroupInfo) === null || _props$shareGroupInfo4 === void 0 ? void 0 : _props$shareGroupInfo4.headimgurl
+              };
+              agoraChatUikit.rootStore.conversationStore.addConversation(conversation);
+              agoraChatUikit.rootStore.conversationStore.setCurrentCvs({
+                conversationId: (_props$shareGroupInfo5 = props.shareGroupInfo) === null || _props$shareGroupInfo5 === void 0 ? void 0 : _props$shareGroupInfo5.sendbirdid,
+                chatType: 'groupChat'
+              });
+            } else {
+              antd.message.error(data === null || data === void 0 ? void 0 : data.msg);
+            }
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function joinGroup() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(antd.Modal, {
+    open: props.visible,
+    onCancel: props.onClose,
+    destroyOnClose: true,
+    centered: true,
+    getContainer: false,
+    width: window.innerWidth <= 768 ? '90%' : '420px' // 动态设置宽度
+    ,
+    footer: null,
+    mask: true,
+    className: "customModal" // 使用自定义样式
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-3 cursor-pointer"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "w-14 h-14 rounded-md",
+    src: props.shareGroupInfo.headimgurl,
+    alt: "Group"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex-1 overflow-hidden"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: "text-[var(--im-main-fontColor)] text-lg font-medium truncate"
+  }, (_props$shareGroupInfo6 = props.shareGroupInfo.name) !== null && _props$shareGroupInfo6 !== void 0 ? _props$shareGroupInfo6 : "-"), /*#__PURE__*/React.createElement("p", {
+    className: "text-[var(--im-second-fontColor)] text-sm truncate"
+  }, props.shareGroupInfo.members, " members"))), /*#__PURE__*/React.createElement("div", {
+    className: "text-[var(--im-main-fontColor)] text-xs font-normal mt-6"
+  }, "Owner: ", /*#__PURE__*/React.createElement("span", {
+    className: "text-[var(--im-green)]"
+  }, props.shareGroupInfo.ownername)), /*#__PURE__*/React.createElement("div", {
+    className: "flex justify-between mt-6 gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center cursor-pointer w-40 h-12 text-[var(--im-main-fontColor)] text-base font-semibold rounded-md rounded-md outline-1 outline-offset-[-1px] outline-[var(--im-group-join-cancel-line)]",
+    onClick: function onClick() {
+      return props.onClose();
+    }
+  }, "Cancel"), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center cursor-pointer w-40 h-12 text-lg text-[var(--im-six-fontColor)] font-normal rounded-md bg-[var(--im-green)] hover:opacity-80",
+    onClick: joinGroup
+  }, "Join")));
+};
+
+module.exports = JoinGroupDialog;

package/cjs/ChatBox/JoinGroupDialog/style/index.scss

@@ -0,0 +1,4 @@
+.customModal .ant-modal-content {
+  background-color: var(--im-main-backgroundColor) !important;
+  padding: 32px !important;
+}

package/cjs/ChatBox/image/ic_chat_back.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='40' height='40' rx='20' fill='white' fill-opacity='0.05'/%3e%3cpath d='M22.3748 11.5C22.6341 11.5 22.8945 11.5901 23.1065 11.7742C23.5789 12.1837 23.6339 12.9029 23.2285 13.3807L17.1068 20.0004L23.2285 26.6201C23.6339 27.0979 23.5789 27.8171 23.1065 28.2265C22.6352 28.6343 21.9244 28.5803 21.5212 28.1031L14.7711 20.7419C14.4096 20.3152 14.4096 19.6855 14.7711 19.2589L21.5212 11.8977C21.7431 11.6352 22.0584 11.5 22.3748 11.5Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/ChatBox/image/ic_more.svg.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var img = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 3C11.175 3 10.5 3.675 10.5 4.5C10.5 5.325 11.175 6 12 6C12.825 6 13.5 5.325 13.5 4.5C13.5 3.675 12.825 3 12 3ZM12 18C11.175 18 10.5 18.675 10.5 19.5C10.5 20.325 11.175 21 12 21C12.825 21 13.5 20.325 13.5 19.5C13.5 18.675 12.825 18 12 18ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z' fill='white'/%3e%3c/svg%3e";
+
+module.exports = img;

package/cjs/ChatBox/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./style/index.scss";
+export interface IChatbox {
+    onClickHeaderBack: (cvs: {
+        conversationId: string;
+        chatType: 'singleChat' | 'groupChat';
+    }) => void;
+}
+declare const Chatbox: React.FC<IChatbox>;
+export default Chatbox;