agora-ui-foundation 1.0.0

package/lib/components/room-screen-share-state-bar/share-state-nav/index.css

@@ -0,0 +1,55 @@
+.share-state-nav {
+  height: 30px;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  width: fit-content;
+  margin: 0 auto;
+  padding-left: 8px;
+  gap: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 12px;
+  color: var(--fcr_ui_scene_black8);
+  display: flex;
+  align-items: center;
+}
+
+.share-state-nav-top {
+  border-radius: 0 0 var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs);
+}
+
+.share-state-nav-bottom {
+  border-radius: var(--fcr_cornerradius_xs) var(--fcr_cornerradius_xs) 0 0;
+}
+
+.share-state-nav__drag-button,
+.share-state-nav__transfer-position{
+  border-radius: var(--fcrcornerradiusxs);
+
+}
+.share-state-nav__drag-button:hover,
+.share-state-nav__transfer-position:hover{
+  background-color: var(--fcr_ui_scene_white4);
+}
+
+
+.share-state-nav__drag-icon {
+  transform: rotate(90deg);
+}
+
+
+.share-state-nav__stop-share {
+  background-color: var(--fcr_ui_scene_ramp_red6);
+  height: 100%;
+  padding: 0 6px;
+  color: var(--fcr_ui_scene_white10);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.share-state-nav__stop-share:active {
+  background-color: var(--fcr_ui_scene_ramp_red8);
+}
+
+.share-state-nav__state-text {
+  margin-right: 28px;
+}

package/lib/components/room-screen-share-state-bar/share-state-nav/index.d.ts

@@ -0,0 +1,9 @@
+import { TransferPosition } from '../transfer-position-icon';
+import './index.css';
+interface IShareStateNav {
+    onShareStateNavTransferPosition: (targetPosition: TransferPosition) => void;
+    currentPosition: TransferPosition;
+}
+export declare const DragIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShareStateNav: (props: IShareStateNav) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/room-screen-share-state-bar/share-state-nav/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShareStateNav = exports.DragIcon = void 0;
+var _i18n = require("../../../i18n");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _microphoneState = require("../microphone-state");
+var _transferPositionIcon = require("../transfer-position-icon");
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+var DragIcon = exports.DragIcon = function DragIcon() {
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: t('fmt_popup_button_drag'),
+    trigger: "hover",
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__drag-button",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_WHITEBOARD_MOVE,
+        className: "share-state-nav__drag-icon",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};
+var ShareStateNav = exports.ShareStateNav = function ShareStateNav(props) {
+  var onShareStateNavTransferPosition = props.onShareStateNavTransferPosition,
+    currentPosition = props.currentPosition;
+  var t = (0, _i18n.useI18n)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "share-state-nav fcr-flex fcr-items-center \n                 fcr-justify-center share-action-nav__can-draggable \n                ".concat(currentPosition === _transferPositionIcon.TransferPosition.TOP ? 'share-state-nav-top' : 'share-state-nav-bottom'),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DragIcon, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_transferPositionIcon.TransferPositionIcon, {
+      onTransferPositionButtonClick: onShareStateNavTransferPosition,
+      currentPosition: currentPosition
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-state-nav__state-text",
+      children: t('fmt_settings_tips_sharing')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_microphoneState.MicrophoneState, {
+      isMicrophoneMuted: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-state-nav__meeting-elapsed-time",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "00:10:00"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: ["(", t('fmt_settings_labels_miniutes', {
+          reason1: 60
+        }), ")"]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "share-state-nav__stop-share fcr-flex fcr-items-center fcr-justify-center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_RECORDING_STOP,
+        size: 20,
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_white10)'
+        }
+      }), t('fmt_screenshare_controlbar_button_stop')]
+    })]
+  });
+};

package/lib/components/room-screen-share-state-bar/transfer-position-icon/index.d.ts

@@ -0,0 +1,11 @@
+export declare enum TransferPosition {
+    TOP = 0,
+    BOTTOM = 1,
+    CENTER = 2
+}
+interface ITransferPositionIconProps {
+    currentPosition: TransferPosition;
+    onTransferPositionButtonClick: (targetPosition: TransferPosition) => void;
+}
+export declare const TransferPositionIcon: (props: ITransferPositionIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/room-screen-share-state-bar/transfer-position-icon/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TransferPositionIcon = exports.TransferPosition = void 0;
+var _i18n = require("../../../i18n");
+var _icon = require("../../icon");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _jsxRuntime = require("react/jsx-runtime");
+var TransferPosition = exports.TransferPosition = /*#__PURE__*/function (TransferPosition) {
+  TransferPosition[TransferPosition["TOP"] = 0] = "TOP";
+  TransferPosition[TransferPosition["BOTTOM"] = 1] = "BOTTOM";
+  TransferPosition[TransferPosition["CENTER"] = 2] = "CENTER";
+  return TransferPosition;
+}({});
+var TransferPositionIcon = exports.TransferPositionIcon = function TransferPositionIcon(props) {
+  var currentPosition = props.currentPosition,
+    onTransferPositionButtonClick = props.onTransferPositionButtonClick;
+  var t = (0, _i18n.useI18n)();
+  var handlerTransferPositionClick = function handlerTransferPositionClick() {
+    if (currentPosition === TransferPosition.BOTTOM) {
+      onTransferPositionButtonClick(TransferPosition.TOP);
+      return;
+    }
+    onTransferPositionButtonClick(TransferPosition.BOTTOM);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: currentPosition === TransferPosition.TOP ? t('fmt_uimanager_option_Movebottom') : t('fmt_uimanager_option_Movetop'),
+    mouseEnterDelay: 0,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "share-action-nav__not-draggable share-state-nav__transfer-position",
+      onClick: handlerTransferPositionClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: currentPosition === TransferPosition.TOP ? _type.FcrIconType.FCR_SHARINGBAR_DOWN : _type.FcrIconType.FCR_SHARINGBAR_UP,
+        className: "share-state-nav__transfer-position-button",
+        colors: {
+          iconPrimary: 'var(--fcr_ui_scene_black8)'
+        },
+        size: 20
+      })
+    })
+  });
+};

package/lib/components/select/index.css

@@ -0,0 +1,156 @@
+.fcr-select-wrapper-l {
+  height: 48px;
+}
+.fcr-select-wrapper-m {
+  height: 36px;
+}
+.fcr-select-wrapper-s {
+  height: 32px;
+}
+.fcr-select {
+  background-color: var(--fcr_ui_scene_input);
+  border-width: 1px;
+  border-style: solid;
+  transition: all 0.2s ease-in-out;
+  border-width: 1px;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  user-select: none;
+  font-weight: 400;
+  border-color: var(--fcr_ui_scene_line1);
+}
+
+.fcr-select.fcr-select-white {
+  border-color: var(--fcr_web_ui_scene_line4);
+  background: var(--fcr_ui_scene_input2);
+}
+
+.fcr-select.fcr-select--blurred:not(.fcr-select--focused) {
+  border-color: transparent;
+  background: var(--fcr_ui_scene_black3);
+  backdrop-filter: blur(25px);
+}
+
+.fcr-select.fcr-select-l {
+  border-radius: var(--fcr_cornerradius_l);
+}
+.fcr-select.fcr-select-m {
+  border-radius: var(--fcr_cornerradius_s);
+}
+.fcr-select.fcr-select-s {
+  border-radius: var(--fcr_cornerradius_xs);
+}
+
+.fcr-select__selected span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+.fcr-select .fcr-select__selected.fcr-select__selected--unselected {
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-select.fcr-select-l .fcr-select__selected {
+  padding: 11px 6px 11px 12px;
+}
+.fcr-select.fcr-select-l .fcr-select__option {
+  padding: 15px 6px 15px 12px;
+}
+
+.fcr-select.fcr-select-m .fcr-select__selected {
+  padding: 5px 12px;
+}
+.fcr-select.fcr-select-m .fcr-select__option {
+  padding: 12px;
+}
+
+.fcr-select.fcr-select-s .fcr-select__selected {
+  padding: 6px 6px 6px 12px;
+}
+.fcr-select.fcr-select-s .fcr-select__option {
+  padding: 9px 6px 9px 12px;
+}
+.fcr-select__icon {
+  flex-shrink: 0;
+}
+.fcr-select.fcr-select-s .fcr-select__icon {
+  height: 18px;
+}
+
+.fcr-select:hover:not(.fcr-select--disabled) {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+  box-shadow: 0 0 0 3px var(--fcr_ui_scene_ramp_brand3);
+}
+
+.fcr-select.fcr-select--focused {
+  border-color: var(--fcr_ui_scene_ramp_brand6);
+  position: relative;
+  z-index: 100;
+  box-shadow: 0 0 0 3px var(--fcr_ui_scene_ramp_brand3);
+}
+.fcr-select .fcr-select__icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+}
+
+.fcr-select.fcr-select--focused .fcr-select__icon {
+  transform: rotate(180deg);
+}
+
+.fcr-select .fcr-select__selected {
+  color: var(--fcr_ui_scene_icontext1);
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fcr-select.fcr-select--blurred:not(.fcr-select--focused) .fcr-select__selected {
+  color: var(--fcr_ui_scene_white10);
+}
+
+.fcr-select .fcr-select__options--invisible {
+  display: none;
+}
+
+.fcr-select .fcr-select__option {
+  color: var(--fcr_ui_scene_icontext1);
+  transition: all 0.3s;
+}
+
+.fcr-select .fcr-select__option:hover,
+.fcr-select .fcr-select__option--active {
+  background-color: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-select .fcr-select__option--active {
+  font-weight: var(--fcr_font_weight_x);
+}
+
+.fcr-select.fcr-select--disabled {
+  cursor: not-allowed;
+}
+
+.fcr-select__selected--unselected span {
+  color: var(--fcr_ui_scene_icontext2);
+}
+
+.fcr-select.fcr-select-white .fcr-select__selected--unselected span {
+  color: var(--fcr_ui_scene_icontext3);
+}
+
+.fcr-select--blurred:not(.fcr-select--focused) .fcr-select__selected--unselected span {
+  color: var(--fcr_ui_scene_white6);
+}
+
+.fcr-select__options {
+  list-style-type: none;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}

package/lib/components/select/index.d.ts

@@ -0,0 +1,73 @@
+import { FC } from 'react';
+import './index.css';
+export type SelectStyleType = 'white';
+export type SelectProps = {
+    /**
+     * 下拉框选中的值
+     */
+    /** @en
+     * The select selected value
+     */
+    value?: string;
+    /**
+     * 下拉框的提示符
+     */
+    /** @en
+     * Placeholder of the select
+     */
+    placeholder?: string;
+    /**
+     * 下拉框选项
+     */
+    /** @en
+     * The select options
+     */
+    options?: {
+        text: string;
+        value: string;
+    }[];
+    /**
+     * 输入框的尺寸：
+     * small - 小
+     * medium - 中等(default)
+     * large - 大
+     */
+    /** @en
+     * Size of the select:
+     * small
+     * medium
+     * large
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * 下拉框样式类型，可选值为 'white'
+     */
+    /** @en
+     * Set the style type of select, can be set to 'white'.
+     */
+    styleType?: SelectStyleType;
+    /**
+     * 值变更事件
+     * @param value 变更值
+     */
+    /** @en
+     * Change event of the input's value
+     * @param value changed value
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 下拉框是否禁用
+     */
+    /** @en
+     * Whether the select is disabled
+     */
+    disabled?: boolean;
+    /**
+     * 是否背景模糊（用于特殊场景，如视频设置中的摄像头设备选择）
+     */
+    /** @en
+     * Is the background blurred (for special scenarios, such as selecting camera equipment in video settings)
+     */
+    blurred?: boolean;
+};
+export declare const FcrSelect: FC<SelectProps>;

package/lib/components/select/index.js

@@ -0,0 +1,125 @@
+"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.string.iterator.js");
+require("core-js/modules/es.weak-map.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.FcrSelect = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+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 _icon = require("../icon");
+var _type = require("../icon/type");
+var _useClickAnywhere = require("../../utilities/hooks/use-click-anywhere");
+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 FcrSelect = exports.FcrSelect = function FcrSelect(_ref) {
+  var placeholder = _ref.placeholder,
+    options = _ref.options,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    styleType = _ref.styleType,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    disabled = _ref.disabled,
+    blurred = _ref.blurred;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    focused = _useState2[0],
+    setFocused = _useState2[1];
+  var cls = (0, _classnames["default"])('fcr-select', (0, _defineProperty2["default"])({
+    'fcr-select--focused': focused,
+    'fcr-select--disabled': disabled,
+    'fcr-select--blurred': blurred,
+    'fcr-select-l': size === 'large',
+    'fcr-select-m': size === 'medium',
+    'fcr-select-s': size === 'small'
+  }, "fcr-select-".concat(styleType), !!styleType));
+  var wrapperCls = (0, _classnames["default"])('fcr-select-wrapper', {
+    'fcr-select-wrapper-l': size === 'large',
+    'fcr-select-wrapper-m': size === 'medium',
+    'fcr-select-wrapper-s': size === 'small'
+  });
+  var handleClick = disabled ? function () {} : function () {
+    setFocused(!focused);
+  };
+  var optionsCls = (0, _classnames["default"])('fcr-select__options', {
+    'fcr-select__options--invisible': !focused
+  });
+  var ref = (0, _useClickAnywhere.useClickAnywhere)(function () {
+    setFocused(false);
+  });
+  var _useMemo = (0, _react.useMemo)(function () {
+      var _selectedOption$text;
+      var selectedOption = options === null || options === void 0 ? void 0 : options.find(function (_ref2) {
+        var ov = _ref2.value;
+        return value === ov;
+      });
+      return {
+        selectedText: (_selectedOption$text = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.text) !== null && _selectedOption$text !== void 0 ? _selectedOption$text : placeholder,
+        isUnselected: !selectedOption
+      };
+    }, [value, options, placeholder]),
+    isUnselected = _useMemo.isUnselected,
+    selectedText = _useMemo.selectedText;
+  var arrowIconPrimaryColor = (0, _react.useMemo)(function () {
+    return blurred && !focused ? 'var(--fcr_web_ui_scene_mainicon1)' : 'var(--fcr_ui_scene_icontext1)';
+  }, [blurred, focused]);
+  var selectedCls = (0, _classnames["default"])('fcr-select__selected', {
+    'fcr-select__selected--unselected': isUnselected
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: wrapperCls,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: cls,
+      onClick: handleClick,
+      ref: ref,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: selectedCls,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: selectedText
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          className: "fcr-select__icon",
+          colors: {
+            iconPrimary: arrowIconPrimaryColor
+          },
+          type: _type.FcrIconType.FCR_DROPDOWN,
+          size: 24
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: optionsCls,
+        children: options === null || options === void 0 ? void 0 : options.map(function (_ref3) {
+          var text = _ref3.text,
+            ov = _ref3.value;
+          var optionCls = (0, _classnames["default"])('fcr-select__option', {
+            'fcr-select__option--active': value === ov
+          });
+          var handleClick = function handleClick() {
+            if (value !== ov) {
+              onChange(ov);
+            }
+          };
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: optionCls,
+            onClick: handleClick,
+            children: text
+          }, ov);
+        })
+      })]
+    })
+  });
+};

package/lib/components/select/index.stories.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '.';
+declare const meta: {
+    title: string;
+    component: React.FC<SelectProps>;
+    args: {
+        options: {
+            text: string;
+            value: string;
+        }[];
+        placeholder: string;
+    };
+};
+export declare const Docs: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;