agora-ui-foundation 1.0.0

package/lib/components/live-streaming/index.stories.js

@@ -0,0 +1,69 @@
+"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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Basic = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _container = require("./container");
+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 meta = {
+  title: 'Pages/liveStreaming',
+  tags: ['autodocs'],
+  argTypes: {
+    defaultVideoSteamingUrl: {
+      control: {
+        type: 'text'
+      }
+    },
+    defaultVideoStreamingKey: {
+      control: {
+        type: 'text'
+      }
+    },
+    defaultPlayUrl: {
+      control: {
+        type: 'text'
+      }
+    },
+    isStarted: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    isStartError: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+var Basic = exports.Basic = {
+  args: {
+    defaultPlayUrl: 'https://www.baidu.com',
+    defaultVideoSteamingUrl: 'https://www.baidu.com',
+    defaultVideoStreamingKey: 'https://www.baidu.com',
+    isStarted: false,
+    isStartError: false
+  },
+  render: function render(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_container.FcrLiveStreamingContainer, _objectSpread({}, props))
+    });
+  }
+};
+var _default = exports["default"] = meta;

package/lib/components/local-video-player/index.css

@@ -0,0 +1,98 @@
+.fcr-device-settings-video {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.fcr-device-settings-video__preview {
+  position: relative;
+  z-index: 99;
+  border-radius: var(--fcr_cornerradius_s);
+  background: var(--fcr_ui_scene_video);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.fcr-device-settings-video__beauty-slider-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.fcr-device-settings-video__view-select {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  z-index: 10;
+  display: grid;
+  align-items: start;
+}
+
+.fcr-device-settings-video__top {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 42px;
+  margin: 6px 6px 0 6px;
+  background: var(--fcr_ui_scene_white5);
+  box-shadow: 0px 0px 18.75px 0px #8f8f8f26;
+  border-radius: var(--fcr_cornerradius_xs);
+  padding: 6px;
+
+  font-family: PingFang HK;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  color: var(--fcr_ui_scene_black10);
+}
+
+.fcr-device-settings-video__bottom {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-self: end;
+  align-items: center;
+}
+
+.fcr-device-settings-video__view-select .fcr-tabs {
+  width: fit-content;
+}
+
+.fcr-device-settings-video__mirror-video {
+  height: 46px;
+  display: flex;
+  padding: 11px 25px;
+  position: relative;
+  width: calc(100% + 36px);
+  left: -18px;
+  box-shadow: 0px 0px 15px 0px rgba(151, 151, 151, 0.25);
+}
+
+/* 修复设置时视频窗口没有圆角的问题 */
+.fcr-device-settings-video-player__frame {
+  position: absolute;
+  z-index: 9;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--fcr_cornerradius_s);
+}
+
+.fcr-device-settings-video-player {
+  position: absolute;
+  z-index: 8;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}

package/lib/components/local-video-player/index.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import './index.css';
+export declare const DEFAULT_BEAUTY_VALUE = 50;
+export declare enum VideoViewType {
+    CAMERA_VIEW = "camera",
+    SELFIE_VIEW = "selfie"
+}
+export interface LocalVideoPlayerProps {
+    isLocalMirrorEnabled?: boolean;
+    userName?: string;
+    showSlider?: boolean;
+    handleResetBeautyValueChange?: () => void;
+    handleBeautyValueChange?: (value: number) => void;
+    currentEditValue?: number;
+    containerDom?: HTMLDivElement | null;
+    setVideoOrientation?: () => void;
+    cameraDeviceId?: string;
+    showCameraPreview?: boolean;
+    showTopTips?: boolean;
+    startLocalVideo: (view: HTMLDivElement) => void;
+    stopLocalVideo: (view: HTMLDivElement) => void;
+    handleVideoViewChange?: (key: VideoViewType) => void;
+    currentVideoViewType?: VideoViewType;
+}
+export declare const LocalVideoPlayer: React.FC<LocalVideoPlayerProps>;
+export declare const VideoOrientation: React.FC<{
+    setVideoOrientation: () => void;
+}>;
+export default LocalVideoPlayer;

package/lib/components/local-video-player/index.js

@@ -0,0 +1,158 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.VideoViewType = exports.VideoOrientation = exports.LocalVideoPlayer = exports.DEFAULT_BEAUTY_VALUE = void 0;
+var _react = require("react");
+var _useNamespace = require("../../utilities/use-namespace");
+var _avatar = require("../avatar");
+var _tabs = require("../tabs");
+var _tooltip = require("../tooltip");
+var _iconButton = require("../icon-button");
+var _slider = require("../slider");
+var _type = require("../icon/type");
+require("./index.css");
+var _i18n = require("../../i18n");
+var _jsxRuntime = require("react/jsx-runtime");
+var MIN_VALUE = 0;
+var MAX_VALUE = 100;
+var STEP = 1;
+var DEFAULT_BEAUTY_VALUE = exports.DEFAULT_BEAUTY_VALUE = 50;
+var VideoViewType = exports.VideoViewType = /*#__PURE__*/function (VideoViewType) {
+  VideoViewType["CAMERA_VIEW"] = "camera";
+  VideoViewType["SELFIE_VIEW"] = "selfie";
+  return VideoViewType;
+}({});
+var LocalVideoPlayer = exports.LocalVideoPlayer = function LocalVideoPlayer(_ref) {
+  var _ref$isLocalMirrorEna = _ref.isLocalMirrorEnabled,
+    isLocalMirrorEnabled = _ref$isLocalMirrorEna === void 0 ? false : _ref$isLocalMirrorEna,
+    _ref$userName = _ref.userName,
+    userName = _ref$userName === void 0 ? '' : _ref$userName,
+    _ref$showSlider = _ref.showSlider,
+    showSlider = _ref$showSlider === void 0 ? false : _ref$showSlider,
+    handleResetBeautyValueChange = _ref.handleResetBeautyValueChange,
+    _ref$currentEditValue = _ref.currentEditValue,
+    currentEditValue = _ref$currentEditValue === void 0 ? DEFAULT_BEAUTY_VALUE : _ref$currentEditValue,
+    containerDom = _ref.containerDom,
+    handleBeautyValueChange = _ref.handleBeautyValueChange,
+    _setVideoOrientation = _ref.setVideoOrientation,
+    cameraDeviceId = _ref.cameraDeviceId,
+    showCameraPreview = _ref.showCameraPreview,
+    _ref$showTopTips = _ref.showTopTips,
+    showTopTips = _ref$showTopTips === void 0 ? false : _ref$showTopTips,
+    startLocalVideo = _ref.startLocalVideo,
+    stopLocalVideo = _ref.stopLocalVideo,
+    handleVideoViewChange = _ref.handleVideoViewChange,
+    _ref$currentVideoView = _ref.currentVideoViewType,
+    currentVideoViewType = _ref$currentVideoView === void 0 ? VideoViewType.SELFIE_VIEW : _ref$currentVideoView;
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var frameNs = (0, _useNamespace.useNamespace)('device-settings-video-player');
+  var t = (0, _i18n.useI18n)();
+  var elementRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var element = elementRef.current;
+    if (cameraDeviceId && showCameraPreview && element) {
+      startLocalVideo === null || startLocalVideo === void 0 || startLocalVideo(element);
+    }
+    return function () {
+      if (cameraDeviceId && showCameraPreview && element) {
+        stopLocalVideo === null || stopLocalVideo === void 0 || stopLocalVideo(element);
+      }
+    };
+  }, [cameraDeviceId, showCameraPreview]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: ns.e('preview'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: frameNs.e('frame'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: frameNs.b(),
+        ref: elementRef
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+      size: 80,
+      textSize: 24,
+      nickName: userName || ''
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: ns.e('view-select'),
+      children: [showTopTips && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: ns.e('top'),
+        children: t('fmt_internalsetting_tips_nocamerajoin')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: ns.e('bottom'),
+        children: [isLocalMirrorEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_tabs.FcrTabs, {
+          items: [{
+            label: t('fmt_uimanager_option_Cameraview'),
+            key: VideoViewType.CAMERA_VIEW
+          }, {
+            label: t('fmt_uimanager_option_Selfieview'),
+            key: VideoViewType.SELFIE_VIEW
+          }],
+          activeKey: currentVideoViewType,
+          onChange: function onChange(key) {
+            handleVideoViewChange === null || handleVideoViewChange === void 0 || handleVideoViewChange(key);
+          }
+        }), showSlider && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: ns.e('beauty-slider-container'),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+            content: t('fmt_device_reset'),
+            mouseEnterDelay: 0,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+                className: ns.e('beauty-reset'),
+                size: "small",
+                iconColors: {
+                  iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+                },
+                onClick: handleResetBeautyValueChange,
+                icon: _type.FcrIconType.FCR_RESET
+              })
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: ns.e('beauty-slider'),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_slider.FcrSlider, {
+              value: currentEditValue,
+              min: MIN_VALUE,
+              max: MAX_VALUE,
+              step: STEP,
+              draggableDom: containerDom,
+              onChange: function onChange(v) {
+                handleBeautyValueChange === null || handleBeautyValueChange === void 0 || handleBeautyValueChange(v);
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: ns.e('beauty-slider-value'),
+              children: currentEditValue
+            })]
+          })]
+        })]
+      }), showCameraPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoOrientation, {
+        setVideoOrientation: function setVideoOrientation() {
+          _setVideoOrientation === null || _setVideoOrientation === void 0 || _setVideoOrientation();
+        }
+      })]
+    })]
+  });
+};
+var VideoOrientation = exports.VideoOrientation = function VideoOrientation(_ref2) {
+  var setVideoOrientation = _ref2.setVideoOrientation;
+  var ns = (0, _useNamespace.useNamespace)('device-settings-video');
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_uimanager_option_flipleaf'),
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: ns.e('video-flip-container'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconButton.FcrIconButton, {
+        className: ns.e('video-flip'),
+        size: "small",
+        iconColors: {
+          iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+        },
+        icon: _type.FcrIconType.FCR_ROTATINGVIDEO,
+        onClick: setVideoOrientation
+      })
+    })
+  });
+};
+var _default = exports["default"] = LocalVideoPlayer;

package/lib/components/message-bar/index.css

@@ -0,0 +1,62 @@
+.fcr-message-bar {
+  height: 100%;
+  width: 100%;
+  padding: 4px;
+
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 14px;
+
+  font-size: 10px;
+  color: var(--fcr_ui_scene_icontext1);
+  line-height: 10px;
+
+  border-top-left-radius: var(--fcr_cornerradius_m);
+  border-top-right-radius: var(--fcr_cornerradius_m);
+
+  margin-bottom: -10px;
+
+  background-color: var(--fcr_web_ui_scene_fill4_popup);
+
+  min-height: calc(32px + 10px);
+}
+
+.fcr-message-bar > span:first-child {
+  margin-right: 4px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper {
+  height: 24px;
+  width: 35px;
+}
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected {
+  height: 24px;
+  width: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select {
+  justify-content: center;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > .fcr-select__icon {
+  height: 16px;
+  width: 16px;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__selected > span {
+  font-family: 'Helvetica Neue';
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.fcr-message-bar > .fcr-select-wrapper > .fcr-select > .fcr-select__options > .fcr-select__option {
+  display: flex;
+  padding: 4px 4px 4px 6px;
+}

package/lib/components/message-bar/index.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from 'react';
+import './index.css';
+export interface MessageBarProps {
+    styles?: CSSProperties;
+    tips?: string;
+    options?: {
+        text: string;
+        value: string;
+    }[];
+    onSelect?: (visible: string) => void;
+}
+export declare const MessageBar: React.FC<React.PropsWithChildren<MessageBarProps>>;

package/lib/components/message-bar/index.js

@@ -0,0 +1,65 @@
+"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.iterator.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/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageBar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _select = require("../select");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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 MessageBar = exports.MessageBar = function MessageBar(_ref) {
+  var styles = _ref.styles,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [{
+      text: 'All',
+      value: 'All'
+    }] : _ref$options,
+    _ref$tips = _ref.tips,
+    tips = _ref$tips === void 0 ? 'Send to:' : _ref$tips,
+    onSelect = _ref.onSelect;
+  var cls = (0, _classnames["default"])('fcr-message-bar', {});
+  var _useState = (0, _react.useState)('All'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    style: _objectSpread({}, styles),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: tips
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_select.FcrSelect, {
+      size: "small",
+      onChange: function onChange(val) {
+        setValue(val);
+        onSelect && onSelect(val);
+      },
+      options: options,
+      value: value
+    })]
+  });
+};

package/lib/components/message-bar/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { MessageBar, MessageBarProps } from '.';
+declare const meta: Meta<typeof MessageBar>;
+export declare const Doc: (props: MessageBarProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/message-bar/index.stories.js

@@ -0,0 +1,63 @@
+"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/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Doc = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = require(".");
+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 meta = {
+  title: 'Components/MessageBar',
+  tags: ['autodocs'],
+  component: _.MessageBar,
+  args: {
+    styles: {
+      display: 'flex'
+    },
+    options: [{
+      text: 'All',
+      value: 'All'
+    }, {
+      text: 'Tony',
+      value: 'Tony'
+    }]
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var options = props.options;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50
+      },
+      children: ["Basic:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.MessageBar, {
+        styles: _objectSpread({}, {
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0
+        }),
+        options: options,
+        onSelect: function onSelect(val) {
+          alert('Selected value: ' + val);
+        }
+      })]
+    })
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/message-bubble/emoji-msg.d.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param msg
+ * @description 文本消息处理，将表情文本转换为表情图片，返回 ReactNode
+ * @returns
+ */
+export declare function processEmojiTextMsg(msg: string, className?: string): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/message-bubble/emoji-msg.js

@@ -0,0 +1,98 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.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.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processEmojiTextMsg = processEmojiTextMsg;
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.index-of.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.includes.js");
+var svgExports = _interopRequireWildcard(require("../icon/svg-exports"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var emojiMap = Object.keys(svgExports);
+
+/**
+ *
+ * @param msg
+ * @description 文本消息处理，将表情文本转换为表情图片，返回 ReactNode
+ * @returns
+ */
+function processEmojiTextMsg(msg, className) {
+  var inputString = msg;
+  if (!inputString) {
+    return null;
+  }
+
+  // 表情图片
+  var imgTemplate = function imgTemplate(content) {
+    return (
+      /*#__PURE__*/
+      // TODO: 需要替换为真实的表情图片
+      (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          style: {
+            display: 'inline-block',
+            height: 24,
+            width: 24
+          },
+          src: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
+        })
+      })
+    );
+  };
+
+  // 文本
+  var txtTemplate = function txtTemplate(content) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: content
+    });
+  };
+  var pattern = /\[([a-zA-Z0-9_]+)\]/g;
+  var msgElements = [];
+  var lastPos = 0;
+  var match;
+  while ((match = pattern.exec(inputString)) !== null) {
+    var start = match.index;
+    var end = pattern.lastIndex;
+    var emojiName = match[1];
+
+    // TODO: 连调后删除
+    // console.log({ msg, inputString, emojiName }, 'processEmojiTextMsg - while');
+    // 匹配表情前的文本
+    var prefixStr = inputString.slice(lastPos, start);
+    prefixStr.length > 0 && msgElements.push(txtTemplate(prefixStr));
+
+    // 存在 emoji
+    if (emojiMap.includes(emojiName)) {
+      msgElements.push(imgTemplate(emojiMap[emojiMap.indexOf(emojiName)]));
+    } else {
+      // 当作普通文本处理
+      var contentStr = inputString.slice(start, end);
+      contentStr.length > 0 && msgElements.push(txtTemplate(contentStr));
+    }
+    lastPos = end;
+  }
+  var suffixStr = inputString.slice(lastPos);
+  // 匹配表情后剩余文本
+  suffixStr.length > 0 && msgElements.push(txtTemplate(suffixStr));
+
+  // console.log({ result: msgElements }, ' processEmojiTextMsg function');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: msgElements
+  });
+}