@microsoft/teamsfx-react
Version:
React helper functions for Microsoft TeamsFx
93 lines (92 loc) • 3.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTeams = void 0;
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
var react_1 = require("react");
var react_dom_1 = require("react-dom");
var teams_js_1 = require("@microsoft/teams-js");
var react_components_1 = require("@fluentui/react-components");
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
* @deprecated This package will be deprecated by 2026-07.
*/
function useTeams(options) {
var _a = (0, react_1.useState)(undefined), loading = _a[0], setLoading = _a[1];
var _b = (0, react_1.useState)(undefined), inTeams = _b[0], setInTeams = _b[1];
var _c = (0, react_1.useState)(undefined), fullScreen = _c[0], setFullScreen = _c[1];
var _d = (0, react_1.useState)(react_components_1.teamsLightTheme), theme = _d[0], setTheme = _d[1];
var _e = (0, react_1.useState)("default"), themeString = _e[0], setThemeString = _e[1];
var initialTheme = (0, react_1.useState)(options && options.initialTheme ? options.initialTheme : getTheme())[0];
var _f = (0, react_1.useState)(undefined), context = _f[0], setContext = _f[1];
var themeChangeHandler = function (theme) {
setThemeString(theme || "default");
switch (theme) {
case "dark":
setTheme(react_components_1.teamsDarkTheme);
break;
case "contrast":
setTheme(react_components_1.teamsHighContrastTheme);
break;
case "default":
default:
setTheme(react_components_1.teamsLightTheme);
}
};
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
if (initialTheme) {
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);
});
setLoading(false);
})
.catch(function () {
setLoading(false);
setInTeams(false);
});
})
.catch(function () {
setLoading(false);
setInTeams(false);
});
}, []);
return [
{ inTeams: inTeams, fullScreen: fullScreen, theme: theme, context: context, themeString: themeString, loading: loading },
{ setTheme: overrideThemeHandler },
];
}
exports.useTeams = useTeams;