fcr-ui-scene 3.4.1 → 3.4.3

package/lib/modules/chat/components/chat-select/index.js

@@ -0,0 +1,234 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatSelect = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _input = require("agora-ui-foundation/lib/components/input");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+require("./index.css");
+var _reactVirtualized = require("react-virtualized");
+var _type2 = require("fcr-core/lib/type");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _fcr_defaultpage = _interopRequireDefault(require("../../../../../public/assets/fcr_defaultpage.png"));
+var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
+var _types = require("../../types");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ChatSelect = exports.ChatSelect = (0, _mobxReact.observer)(function (_ref) {
+  var type = _ref.type,
+    title = _ref.title,
+    bottomBar = _ref.bottomBar,
+    users = _ref.candidateUsers,
+    selectedUid = _ref.selectedUid,
+    onSelect = _ref.onSelect;
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    filterKey = _useState2[0],
+    setFilterKey = _useState2[1];
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _ref$current;
+    (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.recomputeGridSize();
+  }, [selectedUid]);
+  var filterUsers = users.filter(function (user) {
+    return user.userName.includes(filterKey);
+  });
+  var listHeight = 0;
+  if (filterUsers.length < 5) {
+    listHeight = filterUsers.length * 40;
+  } else {
+    listHeight = 5 * 40;
+  }
+  var rowCount = filterUsers.length;
+  var handleFilterChange = function handleFilterChange(search) {
+    setFilterKey(search);
+  };
+  var t = (0, _i18n.useI18n)();
+  var rowRenderer = function rowRenderer(_ref2) {
+    var index = _ref2.index,
+      key = _ref2.key,
+      style = _ref2.style;
+    var datum = filterUsers[index];
+    if (!datum) {
+      return null;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: selectedUid === users[index].userId ? 'candidate-container-selected' : 'candidate-container',
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        pointerEvents: 'all'
+      }),
+      onClick: function onClick(_) {
+        var user = filterUsers[index];
+        onSelect(user);
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          background: (0, _helper.getNameColor)(datum.userName)
+        },
+        className: (0, _classnames["default"])('candidate-avatar', {
+          'candidate-avatar-all': datum.userId === _types.USER_ALL
+        }),
+        children: type === 'private-chat' && datum.userName === _types.USER_ALL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 16,
+          type: _type.FcrIconType.FCR_USERS,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }) :
+        /*#__PURE__*/
+        // datum.userName.charAt(0).toLocaleUpperCase()
+        (0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          isShowFirstLetter: true,
+          size: 32,
+          nickName: datum.userName,
+          textSize: 14
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "candidate",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "candidate-info",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames["default"])('candidate-name', {
+              'candidate-name-active': selectedUid === users[index].userId
+            }),
+            style: {
+              color: (0, _helper.getNameColor)(datum.userName)
+            },
+            children: highlightMatches(datum.userName, filterKey).map(function (value, i) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: value !== null && value !== void 0 && value.isHighlight ? 'candidate-highlight' : '',
+                children: value.data
+              }, "".concat(i));
+            })
+          }), datum.userId !== _types.USER_ALL && (datum.userRole === _type2.FcrUserRole.COHOST || datum.userRole === _type2.FcrUserRole.HOST) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+            txt: t(datum.userRole === _type2.FcrUserRole.HOST ? 'fmt_role_host' : 'fmt_role_cohost'),
+            styles: {
+              width: 'fit-content'
+            },
+            type: "gray",
+            lineHeight: "small",
+            classnames: datum.userRole === _type2.FcrUserRole.HOST ? 'host' : 'cohost'
+          })]
+        }), selectedUid === users[index].userId ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "candidate-select",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_CHOOSEIT,
+            size: 24,
+            colors: {
+              iconPrimary: 'var(--fcr_web_ui_scene_mainicon2)'
+            }
+          })
+        }) : null]
+      })]
+    }, key);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-search",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.FcrInput, {
+        iconPrefix: {
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          type: _type.FcrIconType.FCR_V2_SEARCH
+        },
+        onChange: function onChange(value) {
+          handleFilterChange(value);
+        },
+        placeholder: t('fmt_attendies_button_serach'),
+        shape: "rounded",
+        value: filterKey
+      })
+    }), filterUsers.length > 5 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-border"
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-body",
+      children: filterUsers.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-no-data",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: _fcr_defaultpage["default"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: t('fmt_chat_tips_nodata')
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "assign-host-body-list",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
+          ref: ref
+          // autoHeight={true}
+          ,
+          className: 'candidate-list',
+          width: 230,
+          height: listHeight,
+          rowCount: rowCount,
+          rowHeight: 40,
+          rowRenderer: rowRenderer
+        })
+      })
+    }), bottomBar]
+  });
+});
+function highlightMatches(str, matchStr) {
+  var result = [];
+  var matchLen = matchStr.length;
+  var start = 0;
+  if (matchStr.length === 0) {
+    return [{
+      data: str,
+      isHighlight: false
+    }];
+  }
+  while (start < str.length) {
+    var matchStart = str.indexOf(matchStr, start);
+    if (matchStart === -1) {
+      result.push({
+        data: str.slice(start),
+        isHighlight: false
+      });
+      break;
+    }
+    if (start !== matchStart) {
+      result.push({
+        data: str.slice(start, matchStart),
+        isHighlight: false
+      });
+    }
+    result.push({
+      data: matchStr,
+      isHighlight: true
+    });
+    start = matchStart + matchLen;
+  }
+  return result;
+}

package/lib/modules/chat/components/message-list/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import '../../index.css';
+import { MessageListProps } from '../../types';
+export declare const MessageList: ({ styles, updateReadMsgIndex, userId: localUserId, setMultiSelectActive, multiSelectActive, copyMap, setCopyMap, selectCnt, copyTips, }: React.PropsWithChildren<MessageListProps>) => import("react/jsx-runtime").JSX.Element;