fcr-ui-scene-mobile 3.4.0

package/lib/modules/whiteboard/components/switch-theme/index.js

@@ -0,0 +1,89 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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");
+require("core-js/modules/esnext.async-iterator.find.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.find.js");
+require("core-js/modules/esnext.iterator.map.js");
+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 _item = _interopRequireDefault(require("./item"));
+var _libs = _interopRequireDefault(require("./libs"));
+var _react = require("react");
+var _store = require("../toolbar/store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _context = require("../../context");
+var _mobxReact = require("mobx-react");
+var _jsxRuntime = require("react/jsx-runtime");
+var WhiteboardSwitchTheme = (0, _mobxReact.observer)(function () {
+  var _useContext = (0, _react.useContext)(_store.ToolbarContext),
+    setTheme = _useContext.setTheme,
+    currentThemeType = _useContext.observables.currentThemeType;
+  // const [visible, setVisible] = useState(false);
+  var _useContext2 = (0, _react.useContext)(_context.BoardUIContext),
+    whiteboardVisible = _useContext2.observables.whiteboardVisible,
+    setWhiteboardVisible = _useContext2.setWhiteboardVisible;
+  var t = (0, _i18n.useI18n)();
+  var handleCancel = function handleCancel() {
+    setWhiteboardVisible(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.FcrPopover, {
+    trigger: "click",
+    overlayClassName: "whiteboard-switch-theme-popover",
+    overlayInnerStyle: {
+      width: '100%'
+    },
+    overlayOffset: 2,
+    visible: whiteboardVisible,
+    content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "whiteboard-switch-theme",
+      children: [(0, _libs["default"])(t).map(function (theme) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_item["default"], {
+          colors: theme.showColors,
+          title: theme.title,
+          theme: theme.theme,
+          isActive: currentThemeType.theme === theme.theme,
+          onClick: function onClick(theme) {
+            var result = (0, _libs["default"])(t).find(function (item) {
+              return item.theme === theme.theme;
+            });
+            setTheme(result);
+            setWhiteboardVisible(false);
+          }
+        }, theme.theme);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "whiteboard-switch-theme_item-close",
+        onClick: handleCancel,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          size: 20,
+          type: _type.FcrIconType.FCR_CLOSE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          }
+        })
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: _type.FcrIconType.FCR_WHITEBOARD_BG,
+      size: 22,
+      colors: {
+        iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+      },
+      onClick: function onClick() {
+        return setWhiteboardVisible(!whiteboardVisible);
+      }
+    })
+  });
+});
+var _default = exports["default"] = WhiteboardSwitchTheme;

package/lib/modules/whiteboard/components/switch-theme/item.d.ts

@@ -0,0 +1,9 @@
+export type SwitchThemeItemProps = {
+    colors: string[][];
+    title: string;
+    theme: string;
+    isActive?: boolean;
+};
+export default function WhiteboardSwitchThemeItem(props: SwitchThemeItemProps & {
+    onClick: (theme: SwitchThemeItemProps) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/modules/whiteboard/components/switch-theme/item.js

@@ -0,0 +1,53 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = WhiteboardSwitchThemeItem;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/esnext.async-iterator.map.js");
+require("core-js/modules/esnext.iterator.map.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+function WhiteboardSwitchThemeItem(props) {
+  var title = props.title,
+    colors = props.colors,
+    theme = props.theme,
+    _props$isActive = props.isActive,
+    isActive = _props$isActive === void 0 ? false : _props$isActive;
+  var cls = (0, _classnames["default"])('whiteboard-switch-theme_item', {
+    'whiteboard-switch-theme_item-active': isActive
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: cls,
+    onClick: function onClick() {
+      return props.onClick({
+        colors: colors,
+        title: title,
+        theme: theme
+      });
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "whiteboard-switch-theme_item-inner ".concat(theme),
+      children: colors.map(function (color, idx) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "whiteboard-switch-theme_color-group",
+          children: color.map(function (background, idx) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              className: "whiteboard-switch-theme_color-group-item",
+              style: {
+                background: background
+              }
+            }, "".concat(color, "-").concat(idx));
+          })
+        }, color + '-' + idx);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "whiteboard-switch-theme-item_title",
+      children: title
+    })]
+  });
+}

package/lib/modules/whiteboard/components/switch-theme/libs.d.ts

@@ -0,0 +1,4 @@
+import { GenerateI18nKey } from 'agora-ui-foundation/lib/i18n';
+import { WhiteboardThemeType } from '../../type';
+declare const whiteboardTheme: (t: (t: GenerateI18nKey<I18nResouceTypes>) => string) => Required<WhiteboardThemeType>[];
+export default whiteboardTheme;

package/lib/modules/whiteboard/components/switch-theme/libs.js

@@ -0,0 +1,29 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var whiteboardTheme = function whiteboardTheme(t) {
+  return [{
+    showColors: [['#E2E2E2', '#968D86', '#0E0E0E'], ['#A1C473', '#FFC908', '#FF86C9', '#FC3141']],
+    colors: ['#E2E2E2', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
+    background: '#ffffff',
+    title: t('fmt_screenshare_whiteboard_tips_defaultwhiteboard'),
+    theme: 'whiteboard'
+  }, {
+    showColors: [['#FFFFFF', '#968D86', '#717171'], ['#A1C473', '#FFC908', '#FF86C9', '#FC3141']],
+    colors: ['#FFFFFF', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
+    background: '#000000',
+    title: t('fmt_screenshare_whiteboard_tips_blackboard'),
+    theme: 'blackboard'
+  }, {
+    showColors: [['#E2E2E2', '#E8B288', '#0E0E0E'], ['#A1C473', '#FFC908', '#FFAFDC', '#FF616D']],
+    colors: ['#E2E2E2', '#A1C473', '#FFC908', '#CC3100', '#968D86', '#4262FF', '#51BD69', '#EB47A2', '#0E0E0E', '#50E3C2', '#FC3141', '#7740EC'],
+    background: '#5A7D75',
+    title: t('fmt_screenshare_whiteboard_lables_wallpoaster'),
+    theme: 'chalkboard'
+  }];
+};
+var _default = exports["default"] = whiteboardTheme;