msteams-react-base-component
Version:
React helper components for Microsoft 365 Teams, Office and Outlook apps
77 lines (76 loc) • 3.49 kB
JavaScript
;
// Copyright (c) Wictor Wilén. All rights reserved.
// Licensed under the MIT license.
// SPDX-License-Identifier: MIT
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTeams = void 0;
var react_1 = require("react");
var react_dom_1 = require("react-dom");
var teams_js_1 = require("@microsoft/teams-js");
var react_northstar_1 = require("@fluentui/react-northstar");
var getTheme = function () {
var urlParams = new URLSearchParams(window.location.search);
var theme = urlParams.get("theme");
return theme == null ? undefined : theme;
};
/**
* Microsoft Teams React hook
* @param options optional options
* @returns A tuple with properties and methods
* properties:
* - inTeams: boolean = true if inside Microsoft Teams
* - fullscreen: boolean = true if in full screen mode
* - theme: Fluent UI Theme
* - themeString: string - representation of the theme (default, dark or contrast)
* - context - the Microsoft Teams JS SDK context
* methods:
* - setTheme - manually set the theme
*/
function useTeams(options) {
var _a = (0, react_1.useState)(undefined), inTeams = _a[0], setInTeams = _a[1];
var _b = (0, react_1.useState)(undefined), fullScreen = _b[0], setFullScreen = _b[1];
var _c = (0, react_1.useState)(react_northstar_1.teamsTheme), theme = _c[0], setTheme = _c[1];
var _d = (0, react_1.useState)("default"), themeString = _d[0], setThemeString = _d[1];
var initialTheme = (0, react_1.useState)((options && options.initialTheme) ? options.initialTheme : getTheme())[0];
var _e = (0, react_1.useState)(undefined), context = _e[0], setContext = _e[1];
var themeChangeHandler = function (theme) {
setThemeString(theme || "default");
switch (theme) {
case "dark":
setTheme(react_northstar_1.teamsDarkTheme);
break;
case "contrast":
setTheme(react_northstar_1.teamsHighContrastTheme);
break;
case "default":
default:
setTheme(react_northstar_1.teamsTheme);
}
};
var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler) ? options.setThemeHandler : themeChangeHandler;
(0, react_1.useEffect)(function () {
// set initial theme based on options or query string
overrideThemeHandler(initialTheme);
teams_js_1.app.initialize().then(function () {
teams_js_1.app.getContext().then(function (context) {
(0, react_dom_1.unstable_batchedUpdates)(function () {
setInTeams(true);
setContext(context);
setFullScreen(context.page.isFullScreen);
});
overrideThemeHandler(context.app.theme);
teams_js_1.app.registerOnThemeChangeHandler(overrideThemeHandler);
teams_js_1.pages.registerFullScreenHandler(function (isFullScreen) {
setFullScreen(isFullScreen);
});
}).catch(function () {
setInTeams(false);
});
}).catch(function () {
setInTeams(false);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return [{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString }, { setTheme: overrideThemeHandler }];
}
exports.useTeams = useTeams;