agora-ui-foundation 3.8.1 → 3.8.2

package/lib-es/components/action-bar/device/index.js

@@ -0,0 +1,418 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/web.timers.js";
+import { useEffect, useMemo, useState } from 'react';
+import './index.css';
+import { FcrIcon } from '../../icon';
+import { FcrIconType } from '../../icon/type';
+import { MicrophoneIndicator } from '../../microphone-indicator';
+import { useI18n } from '../../../i18n';
+import { FcrToolTip } from '../../tooltip';
+import { FcrPopover } from '../../popover';
+import { FcrRadio } from '../../radio';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$micEnabled = _ref.micEnabled,
+    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
+    _ref$volume = _ref.volume,
+    volume = _ref$volume === void 0 ? 0 : _ref$volume,
+    _ref$pathColor = _ref.pathColor,
+    pathColor = _ref$pathColor === void 0 ? 'white' : _ref$pathColor,
+    _ref$stopStartColor = _ref.stopStartColor,
+    stopStartColor = _ref$stopStartColor === void 0 ? 'white' : _ref$stopStartColor;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var t = useI18n();
+  return !micEnabled ? /*#__PURE__*/_jsx(FcrIcon, {
+    type: FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(MicrophoneIndicator, {
+      size: size,
+      voicePercent: volume,
+      pathColor: pathColor,
+      stopStartColor: stopStartColor
+    })
+  });
+};
+export var MicrophoneDevice = function MicrophoneDevice() {
+  var _useDeviceTooltipVisi = useDeviceTooltipVisible(),
+    tooltipVisible = _useDeviceTooltipVisi.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi.handleTooltipVisibleChanged;
+  var t = useI18n();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    micEnabled = _useState2[0],
+    setMicEnabled = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    volume = _useState4[0],
+    setVolume = _useState4[1];
+  useEffect(function () {
+    var timer = setInterval(function () {
+      setVolume(11 + Math.floor(Math.random() * 90));
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  var title = useMemo(function () {
+    return micEnabled ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
+  }, [micEnabled]);
+  var tooltip = title;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    mouseEnterDelay: 0,
+    visible: tooltipVisible,
+    onVisibleChange: handleTooltipVisibleChanged,
+    content: tooltip,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-action-bar-device",
+        onClick: function onClick() {
+          setMicEnabled(!micEnabled);
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "fcr-action-bar-device-inner",
+          children: [/*#__PURE__*/_jsx(AudioRecordinDeviceIcon, {
+            micEnabled: micEnabled,
+            volume: volume
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fcr-action-bar-device-text",
+            children: title
+          })]
+        }), /*#__PURE__*/_jsx(FcrPopover, {
+          overlayClassName: "fcr-action-bar--device-popover",
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          trigger: "click",
+          content: /*#__PURE__*/_jsx(AudioDeviceListPopoverContent, {
+            onMoreClick: function onMoreClick() {}
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+export var CameraDevice = function CameraDevice() {
+  var t = useI18n();
+  var _useDeviceTooltipVisi2 = useDeviceTooltipVisible(),
+    tooltipVisible = _useDeviceTooltipVisi2.tooltipVisible,
+    popoverOpened = _useDeviceTooltipVisi2.popoverOpened,
+    handlePopoverVisibleChanged = _useDeviceTooltipVisi2.handlePopoverVisibleChanged,
+    handleTooltipVisibleChanged = _useDeviceTooltipVisi2.handleTooltipVisibleChanged,
+    setPopoverOpened = _useDeviceTooltipVisi2.setPopoverOpened;
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraEnabled = _useState6[0],
+    setCameraEnabled = _useState6[1];
+  var muteColor = {
+    iconPrimary: cameraEnabled ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = cameraEnabled ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
+  var title = useMemo(function () {
+    return cameraEnabled ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
+  }, [cameraEnabled]);
+  var tooltip = title;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    mouseEnterDelay: 0,
+    onVisibleChange: handleTooltipVisibleChanged,
+    visible: tooltipVisible,
+    content: tooltip,
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fcr-action-bar-item-wrapper",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-action-bar-device",
+        onClick: function onClick() {
+          setCameraEnabled(!cameraEnabled);
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "fcr-action-bar-device-inner",
+          children: [/*#__PURE__*/_jsx(FcrIcon, {
+            type: icon,
+            colors: muteColor,
+            size: 32
+          }), /*#__PURE__*/_jsx("div", {
+            className: "fcr-action-bar-device-text",
+            children: title
+          })]
+        }), /*#__PURE__*/_jsx(FcrPopover, {
+          visible: popoverOpened,
+          onVisibleChange: handlePopoverVisibleChanged,
+          overlayClassName: "fcr-action-bar--device-popover",
+          content: /*#__PURE__*/_jsx(VideoDeviceListPopoverContent, {
+            onMoreClick: function onMoreClick() {}
+          }),
+          trigger: "click",
+          children: /*#__PURE__*/_jsx("div", {
+            onClick: function onClick(e) {
+              e.stopPropagation();
+            },
+            className: "fcr-action-bar-device-extra",
+            children: /*#__PURE__*/_jsx(FcrIcon, {
+              type: FcrIconType.FCR_DROPUP4,
+              colors: {
+                iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+              },
+              size: 24
+            })
+          })
+        })]
+      })
+    })
+  });
+};
+var useDeviceTooltipVisible = function useDeviceTooltipVisible() {
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    popoverOpened = _useState8[0],
+    setPopoverOpened = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    tooltipVisible = _useState0[0],
+    setTooltipVisible = _useState0[1];
+  var handleTooltipVisibleChanged = function handleTooltipVisibleChanged(visible) {
+    if (popoverOpened) {
+      setTooltipVisible(false);
+    } else {
+      setTooltipVisible(visible);
+    }
+  };
+  var handlePopoverVisibleChanged = function handlePopoverVisibleChanged(visible) {
+    if (tooltipVisible) {
+      setTooltipVisible(false);
+    }
+    setPopoverOpened(visible);
+  };
+  return {
+    popoverOpened: popoverOpened,
+    tooltipVisible: tooltipVisible,
+    handleTooltipVisibleChanged: handleTooltipVisibleChanged,
+    handlePopoverVisibleChanged: handlePopoverVisibleChanged,
+    setPopoverOpened: setPopoverOpened,
+    setTooltipVisible: setTooltipVisible
+  };
+};
+var VideoDeviceListPopoverContent = function VideoDeviceListPopoverContent(_ref2) {
+  var onMoreClick = _ref2.onMoreClick;
+  var t = useI18n();
+  var _useState1 = useState('default'),
+    _useState10 = _slicedToArray(_useState1, 2),
+    cameraDeviceId = _useState10[0],
+    setCameraDeviceId = _useState10[1];
+  var cameraDevicesList = [{
+    text: '默认-imac摄像头（buildt-in）',
+    value: 'default'
+  }, {
+    text: 'Camera device',
+    value: 'device1'
+  }];
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: "Select a camera"
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [cameraDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), cameraDevicesList.map(function (device) {
+            return /*#__PURE__*/_jsx("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/_jsx(FcrRadio, {
+                name: "video",
+                styleType: "transparent",
+                checked: cameraDeviceId === device.value,
+                onChange: function onChange(v) {
+                  return v && setCameraDeviceId(device.value);
+                },
+                label: device.text
+              })
+            }, device.value);
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: t('fmt_device_label_video_list_selectVirtualBackground')
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: t('fmt_device_label_video_list_selectVideoFilter')
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: 'fcr-device-popover-content-more-item contain-icon',
+        onClick: onMoreClick,
+        children: [/*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/_jsxs("span", {
+          children: [t('fmt_setting_option_Video'), "..."]
+        })]
+      })
+    })]
+  });
+};
+var AudioDeviceListPopoverContent = function AudioDeviceListPopoverContent(_ref3) {
+  var onMoreClick = _ref3.onMoreClick;
+  var t = useI18n();
+  var _useState11 = useState('default'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    audioRecordingDeviceId = _useState12[0],
+    setAudioRecordingDeviceId = _useState12[1];
+  var _useState13 = useState('default'),
+    _useState14 = _slicedToArray(_useState13, 2),
+    audioPlaybackDeviceId = _useState14[0],
+    setAudioPlaybackDeviceId = _useState14[1];
+  var recordingDevicesList = [{
+    text: '默认-imac麦克风（buildt-in）',
+    value: 'default'
+  }, {
+    text: 'wechat audio device',
+    value: 'wechat'
+  }];
+  var playbackDevicesList = [{
+    text: '默认-外置耳机2',
+    value: 'default'
+  }, {
+    text: '外置耳机1',
+    value: 'device1'
+  }, {
+    text: 'imac扬声器（buildt-in）',
+    value: 'device2'
+  }];
+  return /*#__PURE__*/_jsxs("div", {
+    className: "fcr-device-popover-content",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "fcr-device-popover-content-device-list",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: t('fmt_pstn_label_micselect')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [recordingDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), recordingDevicesList.map(function (device) {
+            return /*#__PURE__*/_jsx("div", {
+              children: /*#__PURE__*/_jsx(FcrRadio, {
+                name: "mic",
+                styleType: "transparent",
+                checked: audioRecordingDeviceId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setAudioRecordingDeviceId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-device",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "fcr-device-popover-content-device-label",
+          children: t('fmt_pstn_label_micselect')
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "fcr-device-popover-content-device-options",
+          children: [playbackDevicesList.length === 0 && /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(FcrRadio, {
+              name: "No device",
+              styleType: "transparent",
+              checked: true,
+              label: t('fmt_toolbar_tips_nodevice')
+            })
+          }), playbackDevicesList.map(function (device) {
+            return /*#__PURE__*/_jsx("div", {
+              onClick: function onClick() {},
+              children: /*#__PURE__*/_jsx(FcrRadio, {
+                name: "speaker",
+                styleType: "transparent",
+                checked: audioPlaybackDeviceId === device.value,
+                label: device.text,
+                onChange: function onChange(v) {
+                  return v && setAudioPlaybackDeviceId(device.value);
+                }
+              })
+            }, device.value);
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "fcr-device-popover-content-more",
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/_jsx("span", {
+          children: t('fmt_device_label_audio_list_leaveComputerAudio')
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/_jsx("span", {
+          children: t('fmt_device_label_audio_list_switchToPhoneCall')
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "fcr-device-popover-content-more-item",
+        children: /*#__PURE__*/_jsx("span", {
+          children: t('fmt_device_label_audio_list_testAudioDevice')
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fcr-device-popover-content-more",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-device-popover-content-more-item contain-icon",
+        onClick: onMoreClick,
+        children: [/*#__PURE__*/_jsx(FcrIcon, {
+          type: FcrIconType.FCR_SETTING,
+          size: 24
+        }), /*#__PURE__*/_jsxs("span", {
+          children: [t('fmt_pstn_options_audio_setting'), "..."]
+        })]
+      })
+    })]
+  });
+};

package/lib-es/components/action-bar/device/mobile.js

@@ -0,0 +1,95 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/web.timers.js";
+import { useEffect, useMemo, useState } from 'react';
+import './index.css';
+import { FcrIcon } from '../../icon';
+import { FcrIconType } from '../../icon/type';
+import { MicrophoneIndicator } from '../../microphone-indicator';
+import { useI18n } from '../../../i18n';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AudioRecordinDeviceIcon = function AudioRecordinDeviceIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 32 : _ref$size,
+    _ref$micEnabled = _ref.micEnabled,
+    micEnabled = _ref$micEnabled === void 0 ? false : _ref$micEnabled,
+    _ref$volume = _ref.volume,
+    volume = _ref$volume === void 0 ? 0 : _ref$volume;
+  var muteColor = {
+    iconPrimary: "var(--fcr_ui_scene_ramp_red6)",
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  return !micEnabled ? /*#__PURE__*/_jsx(FcrIcon, {
+    type: FcrIconType.FCR_NOMUTE,
+    colors: muteColor,
+    size: size
+  }) : /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(MicrophoneIndicator, {
+      size: size,
+      voicePercent: volume
+    })
+  });
+};
+export var MicrophoneDevice = function MicrophoneDevice(_ref2) {
+  var isMuted = _ref2.isMuted;
+  var t = useI18n();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    volume = _useState2[0],
+    setVolume = _useState2[1];
+  useEffect(function () {
+    var timer = setInterval(function () {
+      setVolume(11 + Math.floor(Math.random() * 90));
+    }, 1000);
+    return function () {
+      return clearInterval(timer);
+    };
+  }, []);
+  var title = useMemo(function () {
+    return !isMuted ? t('fmt_device_label_audio_mute') : t('fmt_device_label_audio_unmute');
+  }, [isMuted]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/_jsx(AudioRecordinDeviceIcon, {
+          micEnabled: !isMuted,
+          volume: volume
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-action-bar-device-text",
+          children: title
+        })]
+      })
+    })
+  });
+};
+export var CameraDevice = function CameraDevice(_ref3) {
+  var isMuted = _ref3.isMuted;
+  var t = useI18n();
+  var muteColor = {
+    iconPrimary: !isMuted ? "var(--fcr_web_ui_scene_mainicon1)" : 'var(--fcr_ui_scene_ramp_red6)',
+    iconSecondary: 'var(--fcr_ui_scene_ramp_red6)'
+  };
+  var icon = !isMuted ? FcrIconType.FCR_CAMERA : FcrIconType.FCR_CAMERAOFF;
+  var title = useMemo(function () {
+    return !isMuted ? t('fmt_toolbar_label_camera') : t('fmt_toolbar_options_enablecamera');
+  }, [isMuted]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-action-bar-item-wrapper",
+    children: /*#__PURE__*/_jsx("div", {
+      className: "fcr-action-bar-device",
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "fcr-action-bar-device-inner",
+        children: [/*#__PURE__*/_jsx(FcrIcon, {
+          type: icon,
+          colors: muteColor,
+          size: 32
+        }), /*#__PURE__*/_jsx("div", {
+          className: "fcr-action-bar-device-text",
+          children: title
+        })]
+      })
+    })
+  });
+};

package/lib-es/components/action-bar/end/index.js

@@ -0,0 +1,19 @@
+import { useI18n } from '../../../i18n';
+import { FcrButton } from '../../button';
+import { FcrIconType } from '../../icon/type';
+import { FcrToolTip } from '../../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var End = function End() {
+  var t = useI18n();
+  var handleClick = function handleClick() {};
+  var icon = true ? FcrIconType.FCR_WHITEBOARD_ON : FcrIconType.FCR_WHITEBOARD;
+  return /*#__PURE__*/_jsx(FcrToolTip, {
+    content: t('fmt_toolbar_button_end'),
+    children: /*#__PURE__*/_jsx(FcrButton, {
+      shape: "rounded",
+      size: "XS",
+      styleType: "danger",
+      children: t('fmt_toolbar_button_end')
+    })
+  });
+};

package/lib-es/components/action-bar/index.css

@@ -0,0 +1,92 @@
+html {
+  --fcr-action-bar-height: 58px;
+}
+.fcr-action-bar {
+  background: var(--fcr_web_ui_scene_fill2);
+  width: 100%;
+  height: var(--fcr-action-bar-height);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  transition: all 0.2s;
+  pointer-events: all;
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+.fcr-action-bar-hide {
+  transform: translateY(var(--fcr-action-bar-height));
+}
+
+.fcr-action-bar-left,
+.fcr-action-bar-mid,
+.fcr-action-bar-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.fcr-action-bar-right {
+  padding-right: 12px;
+}
+.fcr-action-bar-mid {
+  flex: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+  padding: 0 10px;
+}
+.fcr-action-bar-collapse {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+}
+.fcr-action-bar-item-wrapper {
+  background: transparent;
+  width: fit-content;
+  height: 52px;
+  user-select: none;
+  min-width: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.fcr-action-bar-item:hover,
+.fcr-action-bar-item-active {
+  background: var(--fcr_web_ui_scene_hover2);
+  border-radius: var(--fcr_cornerradius_s);
+}
+.fcr-action-bar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+}
+.fcr-action-bar-item-disabled {
+  cursor: not-allowed;
+}
+.fcr-action-bar-item-disabled .fcr-action-bar-item-icon,
+.fcr-action-bar-item-disabled .fcr-action-bar-item-text {
+  opacity: 0.5;
+}
+.fcr-action-bar-item-text {
+  color: var(--fcr_ui_scene_icontext2);
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 0 8px;
+}
+.fcr-action-bar-item-text span {
+  white-space: nowrap;
+}
+.fcr-action-bar-cancel-leave {
+  margin-right: 15px;
+  margin-left: auto;
+  text-align: center;
+  cursor: pointer;
+  align-self: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}