fcr-ui-scene 3.8.1 → 3.9.0-alpha

package/lib-es/modules/chat/view.js

@@ -0,0 +1,307 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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) { _defineProperty(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; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.array.sort.js";
+import "core-js/modules/es.array.unshift.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { observer } from 'mobx-react';
+import { MessageList } from './components/message-list';
+import { StoreContext } from './store';
+import { ChatWrapper } from 'agora-ui-foundation/lib/components/chat-wrapper';
+import { getLanguage, useI18n } from 'agora-ui-foundation/lib/i18n';
+import { useContext, useMemo, useState } from 'react';
+import { MessageBar } from './components/chat-bar';
+import { FcrUIRoomType, FcrUserRole } from '../../type';
+import { FcrPlatform } from 'fcr-core/lib/type';
+import { handleMessageTime } from './util';
+import { FcrChatRoomConnectionState } from 'fcr-core/lib/room-control/chatroom-control/type';
+import { FcrRoomConnectorType } from 'fcr-core';
+import { USER_ALL, USER_NONE } from './types';
+import ChatTabs from './components/chat-tabs';
+import { copyText } from 'agora-ui-foundation/lib/utilities/copy-text';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var Chat = observer(function (_ref) {
+  var _chatRoomStores$FcrUI;
+  var updateReadIndex = _ref.updateReadIndex,
+    sendMsg = _ref.sendMsg,
+    localUserId = _ref.userId,
+    singling = _ref.singling,
+    handleClickUploadImage = _ref.handleClickUploadImage;
+  var t = useI18n();
+  var _useContext = useContext(StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex,
+    copyMap = _useContext.copyMap,
+    clearCopyMap = _useContext.clearCopyMap,
+    isMainRoom = _useContext.isMainRoom;
+  var defaultProps = {
+    errorMsg: t('fmt_chat_tips_exceedlimit'),
+    forbiddenTxt: t('fmt_chat_button_muteall'),
+    styles: {
+      display: 'flex',
+      height: ((_chatRoomStores$FcrUI = chatRoomStores[FcrUIRoomType.WAITING_ROOM]) !== null && _chatRoomStores$FcrUI !== void 0 && _chatRoomStores$FcrUI.userCount || 0 > 0) && isMainRoom ? 'calc(100% - 34px)' : '100%',
+      width: '100%'
+    }
+  };
+  var styles = defaultProps.styles,
+    forbiddenTxt = defaultProps.forbiddenTxt,
+    errorMsg = defaultProps.errorMsg;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    privateTargetUser = _ref2.privateTargetUser,
+    remoteUsers = _ref2.remoteUsers,
+    targetUserIsOnline = _ref2.targetUserIsOnline,
+    localIsManager = _ref2.localIsManager,
+    chatLevel = _ref2.chatLevel,
+    messageList = _ref2.messageList,
+    textMsg = _ref2.textMsg,
+    updateChatTextMsg = _ref2.updateChatTextMsg,
+    resetTargetUser = _ref2.resetTargetUser,
+    handleToast = _ref2.handleToast,
+    chatRoomState = _ref2.chatRoomState,
+    isHost = _ref2.isHost,
+    hasChatSendPublicPermission = _ref2.hasChatSendPublicPermission,
+    hasChatSendPrivatePermission = _ref2.hasChatSendPrivatePermission,
+    filterChatMember = _ref2.filterChatMember,
+    hasSendMessagePermission = _ref2.hasSendMessagePermission;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    multiSelectActive = _useState2[0],
+    setMultiSelectActive = _useState2[1];
+  var targetList = useMemo(function () {
+    var _users$;
+    var users = _toConsumableArray(remoteUsers);
+    if (((_users$ = users[0]) === null || _users$ === void 0 ? void 0 : _users$.userId) === USER_ALL) {
+      if (!hasChatSendPublicPermission) {
+        users.shift();
+      }
+    } else if (hasChatSendPublicPermission) {
+      users.unshift({
+        userId: USER_ALL,
+        userName: t('fmt_chat_option_all'),
+        userRole: FcrUserRole.ROBOT,
+        connectorType: FcrRoomConnectorType.NONE,
+        platform: FcrPlatform.WEB_DESKTOP,
+        avatar: ''
+      });
+    }
+    users = users.filter(function (user) {
+      return remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      }) || user.userId === privateTargetUser.userId || user.userId === USER_ALL;
+    });
+    users = users.map(function (user) {
+      var _remoteUsers$find;
+      return (_remoteUsers$find = remoteUsers.find(function (u) {
+        return u.userId === user.userId;
+      })) !== null && _remoteUsers$find !== void 0 ? _remoteUsers$find : user;
+    });
+    users = filterChatMember(users);
+    return users;
+  }, [chatLevel, remoteUsers, activeTabIndex, hasChatSendPublicPermission, hasChatSendPrivatePermission]);
+  var handleMultiCopyMsg = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var msgHandled, msgIndex, msg;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            msgHandled = '';
+            msgIndex = Array.from(copyMap.keys()).sort();
+            if (!(msgIndex.length === 1)) {
+              _context.next = 2;
+              break;
+            }
+            msg = messageList[msgIndex[0]].msg;
+            _context.next = 1;
+            return copyText(msg);
+          case 1:
+            return _context.abrupt("return");
+          case 2:
+            msgIndex.forEach(function (msgIdx, arrIdx) {
+              var _messageList$msgIndex, _messageList$msgIndex2, _messageList$msgIndex3;
+              var _messageList$msgIdx = messageList[msgIdx],
+                msg = _messageList$msgIdx.msg,
+                time = _messageList$msgIdx.time,
+                publisherUid = _messageList$msgIdx.uid,
+                publisherNickName = _messageList$msgIdx.nickName,
+                targetNickname = _messageList$msgIdx.target,
+                isPrivate = _messageList$msgIdx.isPrivate,
+                publisherRole = _messageList$msgIdx.role;
+              var senderNickname = publisherUid === localUserId && isPrivate ? t('fmt_settings_labels_you') : publisherNickName;
+              var needLabel = ((_messageList$msgIndex = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex === void 0 ? void 0 : _messageList$msgIndex.uid) !== publisherUid || ((_messageList$msgIndex2 = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex2 === void 0 ? void 0 : _messageList$msgIndex2.isPrivate) !== isPrivate || ((_messageList$msgIndex3 = messageList[msgIndex[arrIdx - 1]]) === null || _messageList$msgIndex3 === void 0 ? void 0 : _messageList$msgIndex3.role) !== publisherRole;
+              // 2. 复制多条消息, 一个人发的多条消息, 时间前缀只会有一个, 消息累加
+              if (needLabel) {
+                msgHandled += getLanguage() === 'zh' ? "".concat(senderNickname, "\u5BF9").concat(targetNickname, "\u8BF4(").concat(handleMessageTime(time), ")\n").concat(msg, "\n") : "".concat(senderNickname, " said to ").concat(targetNickname, "(").concat(handleMessageTime(time), ")\n").concat(msg, "\n");
+              } else {
+                msgHandled += "".concat(msg, "\n");
+              }
+            });
+            _context.next = 3;
+            return copyText(msgHandled);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleMultiCopyMsg() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var resetMultiSelectStates = function resetMultiSelectStates() {
+    setMultiSelectActive(false);
+    clearCopyMap();
+  };
+  var copyTips = function copyTips() {
+    handleToast({
+      id: 'copy-multi-msg',
+      toastProps: {
+        type: 'normal',
+        content: t('fmt_statusbar_status_coppied'),
+        size: 'small'
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-chat-container-box",
+    children: [/*#__PURE__*/_jsx(ChatTabs, {}), /*#__PURE__*/_jsx("div", {
+      style: _objectSpread({}, styles),
+      children: /*#__PURE__*/_jsx(ChatWrapper, {
+        styles: styles,
+        errorMsg: errorMsg,
+        forbiddenTxt: forbiddenTxt,
+        singling: singling,
+        forbidden: !localIsManager && !hasChatSendPublicPermission && !hasChatSendPrivatePermission,
+        isHost: isHost,
+        handMsg: function handMsg(msg) {
+          if (chatRoomState !== FcrChatRoomConnectionState.Connected) {
+            handleToast({
+              id: 'send-msg-offline',
+              toastProps: {
+                type: 'error',
+                content: t('fmt_chat_tips_Networkconnect'),
+                size: 'small'
+              }
+            });
+            return;
+          }
+          if (!localIsManager) {
+            if (privateTargetUser.userId === USER_NONE) {
+              handleToast({
+                id: 'send-msg-to-none',
+                toastProps: {
+                  type: 'normal',
+                  content: t('fmt_chat_tips_selectchat'),
+                  size: 'small'
+                }
+              });
+              return;
+            }
+
+            // if (
+            //   chatLevel === 'no_one' ||
+            //   (chatLevel !== 'everyone' &&
+            //     privateTargetUser.userId !== USER_ALL &&
+            //     !isManager(privateTargetUser.userRole))
+            // ) {
+            //   handleToast({
+            //     id: 'send-msg-to-none',
+            //     toastProps: {
+            //       type: 'normal',
+            //       content: t('fmt_chat_tips_permissionchange'),
+            //       size: 'small',
+            //     },
+            //   });
+            //   resetTargetUser();
+            //   return;
+            // }
+
+            if (privateTargetUser.userId === USER_ALL && !hasSendMessagePermission) {
+              handleToast({
+                id: 'send-msg-to-none',
+                toastProps: {
+                  type: 'normal',
+                  content: t('fmt_chat_tips_permissionchange'),
+                  size: 'small'
+                }
+              });
+              return;
+            } else if (privateTargetUser.userId !== USER_ALL && !hasChatSendPrivatePermission) {
+              handleToast({
+                id: 'send-msg-to-none',
+                toastProps: {
+                  type: 'normal',
+                  content: t('fmt_chat_tips_permissionchange'),
+                  size: 'small'
+                }
+              });
+              resetTargetUser();
+              return;
+            }
+          }
+          sendMsg(msg);
+        },
+        handleClickUploadImage: handleClickUploadImage,
+        msgBarElement: /*#__PURE__*/_jsx(MessageBar, {
+          users: targetList
+        }),
+        targetUserIsOnline: targetUserIsOnline,
+        privateTarget: privateTargetUser.userId,
+        selectTargetNickname: privateTargetUser.userName,
+        multiSelectActive: multiSelectActive,
+        selectCnt: copyMap.size,
+        onSelectCancel: function onSelectCancel() {
+          resetMultiSelectStates();
+        },
+        onSelectConfirm: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function (_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 1;
+                return handleMultiCopyMsg();
+              case 1:
+                resetMultiSelectStates();
+                copyTips();
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        })),
+        defaultMsg: textMsg,
+        updateChatTextMsg: updateChatTextMsg,
+        children: /*#__PURE__*/_jsx(MessageList, {
+          updateReadMsgIndex: updateReadIndex,
+          userId: localUserId,
+          setMultiSelectActive: setMultiSelectActive,
+          multiSelectActive: multiSelectActive
+        })
+      })
+    })]
+  });
+});

package/lib-es/modules/components/annotation-menu/index.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.unshift.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { FcrCheckbox } from 'agora-ui-foundation/lib/components/checkbox';
+import { FcrDropMenu } from 'agora-ui-foundation/lib/components/drop-menu';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+var AnnotationMenu = function AnnotationMenu(_ref) {
+  var className = _ref.className,
+    hasAnnotationAllowWritePermission = _ref.hasAnnotationAllowWritePermission,
+    allowAnnotationWriteState = _ref.allowAnnotationWriteState,
+    setAllowAnnotationWrite = _ref.setAllowAnnotationWrite,
+    onCleanAnnotationClick = _ref.onCleanAnnotationClick;
+  var transI18n = useI18n();
+  var settings = hasAnnotationAllowWritePermission ? [{
+    title: transI18n('fmt_screenshare_controlbar_settings_label_annotation_settings'),
+    key: 'annotation_setting_title',
+    type: 'title'
+  }, {
+    title: /*#__PURE__*/_jsx(FcrCheckbox, {
+      checked: allowAnnotationWriteState,
+      label: transI18n('fmt_screenshare_controlbar_annotations_options_attendees_annotate'),
+      styleType: "white"
+    }),
+    key: 'allow_other_member_add_annotation',
+    type: 'primary',
+    onButtonClick: function onButtonClick() {
+      return setAllowAnnotationWrite(!allowAnnotationWriteState);
+    }
+  }] : [];
+  var operations = onCleanAnnotationClick ? [{
+    title: transI18n('fmt_screenshare_controlbar_settings_label_annotation_controls'),
+    key: 'annotation_operation_title',
+    type: 'title'
+  }, {
+    icon: /*#__PURE__*/_jsx(FcrIcon, {
+      size: 24,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      },
+      type: FcrIconType.FCR_DELETE3
+    }),
+    title: transI18n('fmt_screenshare_controlbar_options_clear_all'),
+    key: 'clear_all_annotation',
+    type: 'primary',
+    onButtonClick: function onButtonClick() {
+      onCleanAnnotationClick();
+    }
+  }] : [];
+
+  // 在设置和操作之间添加分隔线（如果两者都有的话）
+  if (settings.length > 0 && operations.length > 0) {
+    operations.unshift({
+      key: 'divider_between_settings_and_operations',
+      title: '',
+      type: 'line'
+    });
+  }
+  var options = [].concat(settings, operations);
+  return /*#__PURE__*/_jsx(FcrDropMenu, {
+    className: classNames('security-menu', className),
+    options: options.filter(function (action) {
+      return action.type !== 'disabled';
+    }).map(function (action) {
+      if (action.type === 'primary') {
+        return _objectSpread(_objectSpread({}, action), {}, {
+          title: /*#__PURE__*/_jsx("div", {
+            className: "security-drop-menu-checkbox",
+            children: action.title
+          })
+        });
+      }
+      return _objectSpread({}, action);
+    }),
+    isOptionIconAlignsToLeft: true
+  });
+};
+export default AnnotationMenu;

package/lib-es/modules/components/apps/app-item/index.css

@@ -0,0 +1,49 @@
+.fcr-action-apps-item-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 22px;
+}
+
+.fcr-action-apps-item-wrapper .fcr-action-apps-item-extra-icon {
+  width: 12px;
+  height: 32px;
+  min-width: 12px;
+  padding: 0;
+  border: none !important;
+  overflow: hidden;
+}
+.fcr-action-apps-item-wrapper_hover .fcr-action-apps-item-extra-icon:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-action-apps-item-wrapper_hover .fcr-action-apps-item-icon-wrapper:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+.fcr-action-apps-item-icon {
+  margin: 0px 16px 8px;
+  width: 58px;
+  height: 58px;
+  border-radius: var(--fcr_cornerradius_m);
+  background: var(--fcr_mobile_ui_scene_color_popup_block2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.fcr-action-apps-item-text {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  text-align: center;
+  color: var(--fcr_ui_scene_icontext1);
+  width: 90px;
+}
+.fcr-action-apps-item-wrapper:hover .fcr-action-apps-item-text {
+  color: var(--fcr_web_ui_scene_mainicon2,);
+}
+.fcr-action-apps-item-wrapper:hover .fcr-action-apps-item-icon {
+  background: var(--fcr_web_ui_scene_hover);
+}
+.fcr-action-apps-item-wrapper:hover .fcr-action-apps-item-icon path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}

package/lib-es/modules/components/apps/app-item/index.js

@@ -0,0 +1,130 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.function.name.js";
+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) { _defineProperty(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; }
+import { FcrToolTip } from 'agora-ui-foundation/lib/components/tooltip';
+import { FcrIcon } from 'agora-ui-foundation/lib/components/icon';
+import classnames from 'classnames';
+import './index.css';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { FcrIconType } from 'agora-ui-foundation/lib/components/icon/type';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var MoreBtn = function MoreBtn(props) {
+  var config = props.config,
+    disabled = props.disabled;
+  var Component = config.component,
+    componentProps = config.componentProps;
+  var handleClick = function handleClick(e) {
+    if (!disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  };
+  return /*#__PURE__*/_jsx(FcrPopover, {
+    showArrow: false,
+    trigger: "click",
+    disable: disabled,
+    content: /*#__PURE__*/_jsx(Component, _objectSpread({}, componentProps)),
+    placement: "topLeft",
+    children: /*#__PURE__*/_jsx("div", {
+      onClick: handleClick,
+      children: /*#__PURE__*/_jsx(FcrButton, {
+        className: "fcr-action-apps-item-extra-icon",
+        type: "text",
+        children: /*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_DROPUP4,
+          size: 24,
+          colors: {
+            iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+          }
+        })
+      })
+    })
+  });
+};
+var Icon = function Icon(props) {
+  var size = 32;
+  var imgSrc = props.imgSrc,
+    fcrIconProps = props.fcrIconProps,
+    name = props.name;
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-action-apps-item-icon-wrapper",
+    children: imgSrc ? /*#__PURE__*/_jsx("img", {
+      style: {
+        width: size,
+        height: size
+      },
+      src: imgSrc,
+      alt: name
+    }) : fcrIconProps && /*#__PURE__*/_jsx(FcrIcon, _objectSpread({
+      size: size,
+      colors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    }, fcrIconProps))
+  });
+};
+export var Appitem = function Appitem(props) {
+  var name = props.name,
+    onClick = props.onClick,
+    fcrIconProps = props.fcrIconProps,
+    imgSrc = props.imgSrc,
+    disabledConfig = props.disabledConfig,
+    moreBtnConfig = props.moreBtnConfig;
+  var _ref = disabledConfig || {
+      disabled: false,
+      onDisabledClick: function onDisabledClick() {}
+    },
+    onDisabledClick = _ref.onDisabledClick,
+    disabled = _ref.disabled;
+  var fcrToolTipProps = props.fcrToolTipProps || {
+    visible: false
+  };
+  var handleClick = function handleClick(e) {
+    if (disabled) {
+      e.stopPropagation();
+      onDisabledClick();
+      return;
+    }
+    onClick(e);
+  };
+  return /*#__PURE__*/_jsx(FcrToolTip, _objectSpread(_objectSpread({
+    mouseEnterDelay: 0
+  }, fcrToolTipProps), {}, {
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classnames('fcr-action-apps-item-wrapper', {
+        // 'fcr-action-apps-item-wrapper_hover': true,
+      }),
+      onClick: handleClick,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fcr-action-apps-item-icon",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          imgSrc: imgSrc,
+          fcrIconProps: fcrIconProps,
+          name: name
+        }), moreBtnConfig && /*#__PURE__*/_jsx(MoreBtn, {
+          config: moreBtnConfig,
+          disabled: disabled
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fcr-action-apps-item-text",
+        children: name
+      })]
+    })
+  }));
+};

package/lib-es/modules/components/apps/app-list.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import { observer } from 'mobx-react';
+import { Appitem } from './app-item';
+import './index.css';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AppList = observer(function (props) {
+  var appItemProps = props.appItemProps;
+  var t = useI18n();
+  var appList = appItemProps.map(function (v) {
+    if (v.fcrToolTipProps) {
+      var _v$fcrToolTipProps;
+      return _objectSpread(_objectSpread({}, v), {}, {
+        name: t(v.name),
+        fcrToolTipProps: _objectSpread(_objectSpread({}, v.fcrToolTipProps), {}, {
+          content: t((_v$fcrToolTipProps = v.fcrToolTipProps) === null || _v$fcrToolTipProps === void 0 ? void 0 : _v$fcrToolTipProps.content)
+        })
+      });
+    }
+    return _objectSpread(_objectSpread({}, v), {}, {
+      name: t(v.name)
+    });
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: "action-bar-apps-container",
+    children: appList.map(function (config) {
+      return /*#__PURE__*/_jsx(Appitem, _objectSpread({}, config), config.name);
+    })
+  });
+});

package/lib-es/modules/components/apps/index.css

@@ -0,0 +1,10 @@
+.action-bar-apps-container {
+  display: flex;
+  padding: 2px 6px 24px;
+  max-width: 372px;
+  max-height: 468px;
+  overflow-y: auto;
+  flex-wrap: wrap;
+  justify-content: left;
+  align-items: start;
+}

package/lib-es/modules/components/apps/types.js

@@ -0,0 +1 @@
+export {};