fcr-ui-scene-mobile 3.4.0

package/lib/modules/action-bar/member-list-popup/attendee/index.js

@@ -0,0 +1,252 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.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/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.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.ParticipantAttendee = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mobxReactLite = require("mobx-react-lite");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _popover = require("agora-ui-foundation/lib/components/popover");
+require("./index.css");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _participantMoreActions = require("../participant-more-actions");
+var _cameraStateMobile = require("agora-ui-foundation/lib/components/camera-state-mobile");
+var _microphoneStateMobile = require("agora-ui-foundation/lib/components/microphone-state-mobile");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _type2 = require("../../../../type");
+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; } // import { MicrophoneState } from 'agora-ui-foundation/lib/components/room-screen-share-state-bar/microphone-state';
+var ParticipantAttendee = exports.ParticipantAttendee = (0, _mobxReactLite.observer)(function (props) {
+  var t = (0, _i18n.useI18n)();
+  var userName = props.userName,
+    userType = props.userType,
+    isMe = props.isMe,
+    userRole = props.userRole,
+    isScreenSharing = props.isScreenSharing,
+    isBoardActive = props.isBoardActive,
+    audioDeviceType = props.audioDeviceType,
+    hasAudio = props.hasAudio,
+    userId = props.userId,
+    videoDeviceType = props.videoDeviceType,
+    hasVideo = props.hasVideo,
+    isSpotlight = props.isSpotlight,
+    enableSpotlight = props.enableSpotlight;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowDropMenu = _useState2[0],
+    setIsShowDropMenu = _useState2[1];
+  var menuRef = (0, _react.useRef)(null);
+  var handleMoreActionsClick = function handleMoreActionsClick() {
+    setIsShowDropMenu(false);
+  };
+  var userAvatar = function userAvatar() {
+    if (userType === 'meeting-system') {
+      return {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 24,
+          type: _type.FcrIconType.FCR_SIPDEVICE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)',
+            iconSecondary: 'var(--fcr_ui_scene_ramp_green6)'
+          }
+        }),
+        backgroundColor: 'var(--fcr_ui_scene_ramp_purple7)'
+      };
+    }
+    if (userType === 'phone') {
+      return {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 24,
+          type: _type.FcrIconType.FCR_PHONECALL2,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_white10)'
+          }
+        }),
+        backgroundColor: 'var(--fcr_ui_scene_ramp_green6)'
+      };
+    }
+    return {
+      icon: null,
+      backgroundColor: ''
+    };
+  };
+  var userRoleRender = function userRoleRender() {
+    switch (userRole) {
+      case _type2.FcrUserRole.HOST:
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-participant-attendee_info-role fcr-participant-attendee_info-role-host",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_HOST,
+            size: 16
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: t('fmt_role_host')
+          })]
+        });
+      case _type2.FcrUserRole.COHOST:
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-participant-attendee_info-role fcr-participant-attendee_info-role-cohost",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_COHOST1,
+            size: 16
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            children: t('fmt_role_cohost')
+          })]
+        });
+      default:
+        return null;
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsShowDropMenu(false);
+      }
+    };
+    document.addEventListener('touchstart', handleClickOutside);
+    return function () {
+      document.removeEventListener('touchstart', handleClickOutside);
+    };
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-participant-attendee_mobile",
+    ref: menuRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-participant-attendee_container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames["default"])('attendee__user-info-avatar', {
+          'attendee__user-info-avatar_speakerSpotlight': enableSpotlight && isSpotlight
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, _objectSpread({
+          size: 36,
+          nickName: userName,
+          textSize: 14,
+          borderRadius: 10
+        }, userAvatar()))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-participant-attendee_info",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "fcr-participant-attendee_info-name",
+          children: [userName, ' ', isMe && /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+            className: "attendee__me-badge",
+            children: ["(", t('fmt_participant_label_Me'), ")"]
+          })]
+        }), userRoleRender() && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-participant-attendee_info-role-container",
+          children: userRoleRender()
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "fcr-participant-attendee_action",
+        children: [isScreenSharing && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-participant-attendee_action-item', {
+            'fcr-participant-attendee_action-item-screen-sharing': true
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_SCREENSHARING_1,
+            size: 28,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }), isBoardActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-participant-attendee_action-item",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            type: _type.FcrIconType.FCR_WHITEBOARD,
+            size: 28,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_white10)'
+            }
+          })
+        }), audioDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-participant-attendee_action-item', {
+            'fcr-participant-attendee_action-item-microphone': hasAudio
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MicrophoneIndicator, {
+            audioDeviceType: audioDeviceType,
+            hasAudio: hasAudio,
+            isLocal: !!isMe,
+            userId: userId
+          })
+        }), videoDeviceType !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames["default"])('fcr-participant-attendee_action-item', {
+            'fcr-participant-attendee_action-item-camera': hasVideo
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_cameraStateMobile.CameraStateMobile, {
+            isCameraMuted: !hasVideo,
+            size: 28
+          })
+        })]
+      }), userType !== 'meeting-system' && userType !== 'phone' && !isMe && /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+        visible: isShowDropMenu,
+        overlayInnerStyle: {
+          border: 0,
+          boxShadow: '0px 0px 15px var(--fcr_web_light_dropup_m)',
+          borderRadius: 'var(--fcr_cornerradius_l)'
+        },
+        showArrow: true,
+        overlayClassName: "attendee__more-actions",
+        mouseEnterDelay: 0,
+        placement: "bottomRight",
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onTouchStart: function onTouchStart() {
+            setIsShowDropMenu(true);
+          },
+          onTouchEnd: function onTouchEnd() {
+            return setIsShowDropMenu(false);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participantMoreActions.ParticipantMoreActions, {
+            onParticipantsButtonClick: handleMoreActionsClick,
+            userName: userName,
+            userId: userId,
+            userRole: userRole,
+            isMe: !!isMe
+          })
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "fcr-participant-attendee_more",
+          onClick: function onClick() {
+            return setIsShowDropMenu(!isShowDropMenu);
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+            size: 24,
+            type: _type.FcrIconType.FCR_MOBILE_MORE,
+            colors: {
+              iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+            }
+          })
+        })
+      })]
+    })
+  });
+});
+var MicrophoneIndicator = (0, _mobxReactLite.observer)(function (_ref) {
+  var audioDeviceType = _ref.audioDeviceType,
+    hasAudio = _ref.hasAudio;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneStateMobile.MicrophoneStateMobile, {
+    isMicrophoneMuted: !hasAudio,
+    size: 28,
+    isPhoneMic: audioDeviceType === 'phone-mic'
+  });
+});

package/lib/modules/action-bar/member-list-popup/attendee/list.d.ts

@@ -0,0 +1 @@
+export declare const FcrMobileMemberList: () => import("react/jsx-runtime").JSX.Element;

package/lib/modules/action-bar/member-list-popup/attendee/list.js

@@ -0,0 +1,82 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.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/es.object.to-string.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.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.FcrMobileMemberList = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _mobxReact = require("mobx-react");
+var _react = require("react");
+var _ = require(".");
+var _constant = require("../../../../utilities/constant");
+var _participants = require("agora-ui-foundation/lib/components/participants");
+var _globalContext = require("../../../../common/global-context");
+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 FcrMobileMemberList = exports.FcrMobileMemberList = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    participantStore = _useContext.participantStore;
+  var memberList = participantStore.memberList,
+    handlerSearchUser = participantStore.handlerSearchUser,
+    enableSpotlight = participantStore.enableSpotlight,
+    searchText = participantStore.searchText,
+    hasPinnedStream = participantStore.hasPinnedStream,
+    currentPerspectiveType = participantStore.currentPerspectiveType,
+    checkIsPin = participantStore.checkIsPin,
+    getAllowedOperations = participantStore.getAllowedOperations;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-participant_list",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_participants.FcrParticipants, {
+        type: 'modal',
+        userList: memberList,
+        onSearch: handlerSearchUser,
+        searchText: searchText,
+        onInvite: function onInvite() {},
+        isShowInvite: false,
+        hasPinnedStream: false,
+        toggleParticipantAction: function toggleParticipantAction() {},
+        viewMode: 'MOBILE',
+        userRenderer: function userRenderer(user) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobxReact.Observer, {
+            children: function children() {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ParticipantAttendee, _objectSpread(_objectSpread({
+                activeTab: _constant.RoomType.MAIN_ROOM,
+                moveToMainRoomByUserIds: function moveToMainRoomByUserIds() {},
+                hasMutePermission: false,
+                hasUnmutePermission: false,
+                hasRequestStartAudioPermission: false,
+                currentPerspectiveType: currentPerspectiveType,
+                onParticipantsButtonClick: function onParticipantsButtonClick() {}
+              }, user), {}, {
+                isBoardActive: false,
+                isPin: checkIsPin(user.userId),
+                hasPinnedStream: hasPinnedStream,
+                enableSpotlight: enableSpotlight,
+                allowedOperations: getAllowedOperations(user.userRole, !!user.isMe)
+              }));
+            }
+          });
+        }
+      })
+    })
+  });
+});

package/lib/modules/action-bar/member-list-popup/index.css

@@ -0,0 +1,35 @@
+.fcr-mobile-participants-cfg-con-wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 483px;
+}
+
+.fcr-mobile-participants-cfg-con-header {
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.fcr-mobile-participants-cfg-con-header-title {
+  color: var(--fcr_ui_scene_icontext1);
+  font-size: 15px;
+  margin-left: 15px;
+  font-weight: 800;
+}
+.fcr-mobile-cfg-body {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+}
+
+.fcr-mobile-scope .fcr-participant__list > div {
+  overflow: auto !important;
+  height: 390px !important;
+  width: 100% !important;
+}
+
+.fcr-mobile-scope .fcr-participant__list .ReactVirtualized__List {
+  overflow: unset !important;
+  height: 390px !important;
+}

package/lib/modules/action-bar/member-list-popup/index.d.ts

@@ -0,0 +1,7 @@
+import './index.css';
+interface FcrMobileParticipantsPopupProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const FcrMobileParticipantsPopup: (props: FcrMobileParticipantsPopupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/action-bar/member-list-popup/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrMobileParticipantsPopup = void 0;
+var _popup = require("agora-ui-foundation/lib/components/popup");
+var _mobxReact = require("mobx-react");
+require("./index.css");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _list = require("./attendee/list");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrMobileParticipantsPopup = exports.FcrMobileParticipantsPopup = (0, _mobxReact.observer)(function (props) {
+  var visible = props.visible,
+    _onClose = props.onClose;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popup.FcrPopup, {
+    showCloseButton: true,
+    visible: visible,
+    onMaskClick: function onMaskClick() {
+      _onClose();
+    },
+    onClose: function onClose() {
+      _onClose();
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-mobile-participants-cfg-con-wrap",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-participants-cfg-con-header",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "fcr-mobile-participants-cfg-con-header-title",
+          children: (0, _i18n.transI18n)('fmt_participants_label_participants')
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-mobile-cfg-body",
+        children: visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_list.FcrMobileMemberList, {})
+      })]
+    })
+  });
+});

package/lib/modules/action-bar/member-list-popup/participant-more-actions/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import './index.css';
+import { FcrUserRole } from 'fcr-core';
+interface ParticipantMoreActionsProps {
+    userName?: string;
+    userId: string;
+    userRole: FcrUserRole;
+    isMe: boolean;
+    onParticipantsButtonClick: () => void;
+}
+export declare const ParticipantMoreActions: FC<ParticipantMoreActionsProps>;
+export {};

package/lib/modules/action-bar/member-list-popup/participant-more-actions/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ParticipantMoreActions = void 0;
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.includes.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.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _react = require("react");
+require("./index.css");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _dropMenu = require("agora-ui-foundation/lib/components/drop-menu");
+var _attendee = require("agora-ui-foundation/lib/components/participants/attendee");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _globalContext = require("../../../../common/global-context");
+var _jsxRuntime = require("react/jsx-runtime");
+var ParticipantMoreActions = exports.ParticipantMoreActions = function ParticipantMoreActions(_ref) {
+  var userId = _ref.userId,
+    userRole = _ref.userRole,
+    isMe = _ref.isMe,
+    onParticipantsButtonClick = _ref.onParticipantsButtonClick;
+  var _useContext = (0, _react.useContext)(_globalContext.FcrMobileGlobalContext),
+    participantStore = _useContext.participantStore;
+  var handlerUserAction = participantStore.handlerUserAction,
+    getAllowedOperations = participantStore.getAllowedOperations;
+  var allowOperationKeys = getAllowedOperations(userRole, isMe);
+  var allOperationMenu = [{
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_MOBILE_CHAT3,
+      size: 32,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext5)'
+      }
+    }),
+    title: (0, _i18n.transI18n)('fmt_attendies_label_privatechat'),
+    key: 'private_chat',
+    type: 'primary',
+    canOperation: !isMe,
+    onButtonClick: function onButtonClick() {
+      onParticipantsButtonClick();
+      handlerUserAction(_attendee.ParticipantActionType.PRIVATE_CHAT, userId);
+    }
+  }];
+  var operationMenu = allOperationMenu.filter(function (menu) {
+    return menu.canOperation && allowOperationKeys.includes(menu.key);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+    className: "fcr-participants-more-dropmenu",
+    options: operationMenu
+  });
+};

package/lib/modules/action-bar/more-popup/index.css

@@ -0,0 +1,71 @@
+
+.fcr-mobile-more-cfg-con-wrap{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 483px;
+}
+
+.fcr-mobile-more-cfg-con-header{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+.fcr-mobile-more-cfg-con-header-title{
+    color:var(--fcr_ui_scene_icontext1);
+    font-size: 15px;
+    margin-left: 15px;
+    font-weight: 800;
+}
+
+.fcr-mobile-more-cfg-card{
+    width: 345px;
+    min-height: 150px;
+    background-color: var(--fcr_mobile_ui_scene_color_popup_block1);
+    border-radius: 12px;
+    margin: 0 auto;
+    margin-top: 11px;
+    display: flex;
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 13px;
+}
+.fcr-mobile-more-cfg-card-item{
+    height: 50px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.fcr-mobile-more-cfg-card-item.border{
+    border-bottom: 0.5px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-mobile-more-cfg-card-item-linechoose{
+    min-width: 104px;
+    height: 32px;
+    border:0.5px solid var(--fcr_ui_scene_line1);
+    display: flex;
+    align-items: center;
+    background-color: var(--fcr_mobile_ui_scene_fill1);
+}
+
+.fcr-mobile-more-cfg-card-item-btn{
+    min-width: 50px;
+    height: 28px;
+    color: var(--fcr_ui_scene_icontext1);
+    font-size: 13px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--fcr_cornerradius_xxs);
+    padding: 0px 2px;
+}
+
+.fcr-mobile-more-cfg-card-item-btn.active{
+    background-color: #ffffff;
+    color:var(--fcr_ui_scene_ramp_brand6);
+}
+

package/lib/modules/action-bar/more-popup/index.d.ts

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