fcr-ui-scene-mobile 3.4.0

package/lib/modules/chat/chat-notification/index.css

@@ -0,0 +1,71 @@
+.fcr-message-notification-wrapper {
+  position: absolute;
+  bottom: 10px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.fcr-message-notification-content {
+  display: flex;
+  border: 2px solid var(--fcr_ui_scene_black3, #0000004d);
+  background: var(--fcr_ui_scene_black6, #00000099);
+  height: 50px;
+  padding: 7px;
+  backdrop-filter: blur(50px);
+  border-radius: 16px;
+  color: var(--fcr_ui_scene_white10);
+  margin: 10px;
+  align-items: center;
+  min-width: 200px;
+  max-width: 100%;
+}
+
+.fcr-message-notice-avatar {
+  width: 36px;
+  height: 36px;
+  margin-right: 10px;
+}
+
+.fcr-message-notice-avatar .fcr-avatar {
+  border-radius: 10px;
+}
+
+.fcr-message-notice-content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.fcr-message-notice-name {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 600;
+  font-family: Montserrat;
+}
+
+.fcr-message-notice-msg {
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 400;
+  font-family: PingFang HK;
+}
+
+.fcr-word-break {
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+.fcr-break-one-line {
+  -webkit-line-clamp: 1;
+}
+
+.fcr-message-notification-content .fcr-msg-bar-break-max-width {
+  max-width: 290px;
+}

package/lib/modules/chat/chat-notification/index.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+export declare const MessageNotificationWrapper: () => import("react/jsx-runtime").JSX.Element;
+export default MessageNotificationWrapper;

package/lib/modules/chat/chat-notification/index.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.MessageNotificationWrapper = void 0;
+require("core-js/modules/web.timers.js");
+var _react = require("react");
+require("./index.css");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _mobxReact = require("mobx-react");
+var _context = require("../../layout/context");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+var notificationTimeout = 5 * 1000;
+var MessageNotification = (0, _mobxReact.observer)(function () {
+  var _latestMessage$from$u, _latestMessage$from, _latestMessage$from2;
+  var _useContext = (0, _react.useContext)(_context.LayoutStoreContext),
+    latestMessage = _useContext.latestMessage,
+    unreadMsgCnt = _useContext.unreadMsgCnt,
+    resetLastMessage = _useContext.resetLastMessage;
+  var timerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!unreadMsgCnt) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    timerRef.current = setTimeout(function () {
+      resetLastMessage();
+    }, notificationTimeout);
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.id, unreadMsgCnt]);
+  return !latestMessage || unreadMsgCnt === 0 ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-message-notification-wrapper",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: 'fcr-message-notification-content',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-message-notice-avatar",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+          nickName: (_latestMessage$from$u = latestMessage === null || latestMessage === void 0 || (_latestMessage$from = latestMessage.from) === null || _latestMessage$from === void 0 ? void 0 : _latestMessage$from.userName) !== null && _latestMessage$from$u !== void 0 ? _latestMessage$from$u : '',
+          size: 36,
+          textSize: 14
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-message-notice-content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-message-notice-name",
+          children: latestMessage === null || latestMessage === void 0 || (_latestMessage$from2 = latestMessage.from) === null || _latestMessage$from2 === void 0 ? void 0 : _latestMessage$from2.userName
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-message-notice-msg', {
+            'fcr-break-one-line fcr-word-break': true,
+            'fcr-msg-bar-break-max-width': true
+          }),
+          children: latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.content
+        })]
+      })]
+    })
+  });
+});
+var MessageNotificationWrapper = exports.MessageNotificationWrapper = function MessageNotificationWrapper() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MessageNotification, {})
+  });
+};
+var _default = exports["default"] = MessageNotificationWrapper;

package/lib/modules/chat/chat-select/index.css

@@ -0,0 +1,183 @@
+.leave-container {
+  position: relative;
+  padding: 8px 20px 20px;
+  max-height: 368px;
+}
+
+.leave-confirm {
+  width: 100%;
+  height: 36px;
+  margin-top: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fcr_ui_scene_white10);
+  background: var(--fcr_ui_scene_ramp_red6);
+  border-radius: var(--fcr_cornerradius_l);
+
+  font-family: Helvetica Neue;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 24px;
+
+  cursor: pointer;
+}
+
+.assign-host-search {
+  width: 100%;
+  height: 36px;
+  margin-top: 10px;
+}
+.assign-host-border {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 0px;
+  border-top: 1px solid var(--fcr_ui_scene_line1, rgba(74, 76, 95, 0.5));
+  opacity: 0.3;
+}
+
+.assign-host-body {
+  margin-top: 10px;
+}
+
+.candidate-list {
+  padding-right: 5px;
+}
+
+.candidate-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  /* width: 215px !important; */
+}
+
+.candidate-container-selected {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  /* width: 215px !important; */
+  border-radius: var(--fcr_cornerradius_l);
+}
+.candidate-container-selected:hover,
+.candidate-container:hover {
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.candidate-avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--for_head5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 5px;
+  /* text */
+  color: var(--fcr_ui_scene_white10);
+  font-family: Verdana;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 14px;
+}
+.candidate-avatar .fcr-avatar {
+  border-radius: var(--fcr_cornerradius_m);
+}
+
+.candidate-avatar-all {
+  background: var(--for_head1);
+}
+
+.candidate {
+  /* text */
+  font-family: Verdana;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 12px;
+  text-align: left;
+  display: flex;
+  align-items: center;
+
+  /* max-width: calc(215px - 26px - 16px); */
+  height: 20px;
+  margin: 0 3px;
+  color: var(--fcr_ui_scene_icontext1);
+}
+
+.candidate:first-child,
+.candidate:nth-child(2) {
+  flex-grow: 1;
+}
+
+.candidate-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  /* zxq-TODO: 样式调试 */
+  max-width: 270px;
+}
+
+.candidate-name-active {
+  color: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.candidate-select {
+  width: 24px;
+  height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-left: auto;
+}
+
+.candidate-info .fcr-text-bubble {
+  color: var(--fcr_ui_scene_inverse);
+  padding: 2px 5px;
+  margin-top: 4px;
+  border-radius: 3px;
+  font-weight: 400;
+}
+
+.candidate-info .host {
+  background: var(--fcr_ui_scene_icontext5);
+}
+
+.candidate-info .cohost {
+  background: #83bc53;
+}
+
+.candidate-highlight {
+  background: var(--fcr_ui_scene_ramp_brand3);
+}
+
+.fcr-no-data {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fcr-no-data span {
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 14px;
+  font-family: PingFang HK;
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-chat-select-tabs-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.fcr-chat-select-tabs-container .fcr-input input {
+  font-size: 16px;
+}
+
+.fcr-chat-select-tabs-container .fcr-input input::placeholder {
+  font-size: 12px;
+}
+
+.fcr-chat-select-tabs-container .fcr-input input .not-empty {
+  font-size: 12px;
+}

package/lib/modules/chat/chat-select/index.d.ts

@@ -0,0 +1,12 @@
+import './index.css';
+import { FcrUserInfo } from 'fcr-core/lib/type';
+interface ChatSelectProps {
+    type: 'assign-host' | 'private-chat';
+    title?: React.ReactNode;
+    bottomBar?: React.ReactNode;
+    candidateUsers: FcrUserInfo[];
+    selectedUid: string;
+    onSelect: (user: FcrUserInfo) => void;
+}
+export declare const ChatSelect: ({ type, title, bottomBar, candidateUsers: users, selectedUid, onSelect }: ChatSelectProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,223 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChatSelect = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.map.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 _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 _store = require("../store");
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _helper = require("agora-ui-foundation/lib/components/avatar/helper");
+var _jsxRuntime = require("react/jsx-runtime");
+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;
+}
+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 filterUsers = users.filter(function (user) {
+    return user.userName.includes(filterKey);
+  });
+  var rowCount = filterUsers.length;
+  var listHeight = filterUsers.length * 64;
+  if (rowCount > 7) {
+    listHeight = 7 * 64;
+  } else {
+    listHeight = rowCount * 64;
+  }
+  var handleFilterChange = function handleFilterChange(search) {
+    setFilterKey(search);
+  };
+  var t = (0, _i18n.useI18n)();
+  var rowRenderer = function rowRenderer(_ref2) {
+    var _ref3;
+    var index = _ref2.index,
+      key = _ref2.key,
+      style = _ref2.style;
+    var datum = filterUsers[index];
+    if (!datum) {
+      return null;
+    }
+    var indexUser = filterUsers[index];
+    if (!indexUser) {
+      return;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: selectedUid === indexUser.userId ? 'candidate-container-selected' : 'candidate-container',
+        style: style,
+        onClick: function onClick(_) {
+          onSelect(indexUser);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            background: (0, _helper.getNameColor)(datum.userName)
+          },
+          className: (0, _classnames["default"])('candidate-avatar', {
+            'candidate-avatar-all': datum.userId === _store.USER_ALL
+          }),
+          children: type === 'private-chat' && datum.userName === _store.USER_ALL ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            size: 16,
+            type: _type.FcrIconType.FCR_USERS,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          }) : /*#__PURE__*/(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 === indexUser.userId
+              }),
+              children: highlightMatches(datum.userName, filterKey).map(function (value) {
+                return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: value !== null && value !== void 0 && value.isHighlight ? 'candidate-highlight' : '',
+                  children: value.data
+                });
+              })
+            }), datum.userId !== _store.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 === indexUser.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), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "assign-host-border",
+        style: {
+          top: ((_ref3 = style === null || style === void 0 ? void 0 : style.top) !== null && _ref3 !== void 0 ? _ref3 : 0) + 64 - 1
+        }
+      })]
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "leave-container",
+    children: [title, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: "mobile-assign-host-search",
+      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 === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-no-data",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_DEFAULTPAGE
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t('fmt_chat_tips_nodata')
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "assign-host-body",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+        style: {
+          alignSelf: 'stretch'
+        },
+        children: function children(_ref4) {
+          var width = _ref4.width;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
+            className: 'candidate-list',
+            width: width,
+            height: listHeight,
+            rowCount: rowCount,
+            rowHeight: 64,
+            rowRenderer: rowRenderer
+          });
+        }
+      })
+    }), bottomBar]
+  });
+});

package/lib/modules/chat/contex.d.ts

@@ -0,0 +1,2 @@
+import ChatStore from './store';
+export declare const StoreContext: import("react").Context<ChatStore>;

package/lib/modules/chat/contex.js

@@ -0,0 +1,9 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoreContext = void 0;
+var _react = require("react");
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/chat/demo-wrapper.d.ts

@@ -0,0 +1 @@
+export declare const DemoWrapper: React.FC;

package/lib/modules/chat/demo-wrapper.js

@@ -0,0 +1,42 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DemoWrapper = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var DemoWrapper = exports.DemoWrapper = function DemoWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: 'flex',
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 20
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        background: 'aliceblue',
+        marginTop: 160,
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          marginTop: 20,
+          marginBottom: 50,
+          display: 'flex',
+          height: 500,
+          width: 340
+        },
+        children: children
+      })
+    })
+  });
+};