msteams-react-base-component/lib/esm/useTeams.js

React helper components for Microsoft 365 Teams, Office and Outlook apps

// Copyright (c) Wictor Wilén. All rights reserved.
// Licensed under the MIT license.
// SPDX-License-Identifier: MIT
import { useEffect, useState } from "react";
import { unstable_batchedUpdates as batchedUpdates } from "react-dom";
import { app, pages } from "@microsoft/teams-js";
import { teamsDarkTheme, teamsHighContrastTheme, teamsTheme } from "@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
 */
export function useTeams(options) {
    var _a = useState(undefined), inTeams = _a[0], setInTeams = _a[1];
    var _b = useState(undefined), fullScreen = _b[0], setFullScreen = _b[1];
    var _c = useState(teamsTheme), theme = _c[0], setTheme = _c[1];
    var _d = useState("default"), themeString = _d[0], setThemeString = _d[1];
    var initialTheme = useState((options && options.initialTheme) ? options.initialTheme : getTheme())[0];
    var _e = useState(undefined), context = _e[0], setContext = _e[1];
    var themeChangeHandler = function (theme) {
        setThemeString(theme || "default");
        switch (theme) {
            case "dark":
                setTheme(teamsDarkTheme);
                break;
            case "contrast":
                setTheme(teamsHighContrastTheme);
                break;
            case "default":
            default:
                setTheme(teamsTheme);
        }
    };
    var overrideThemeHandler = (options === null || options === void 0 ? void 0 : options.setThemeHandler) ? options.setThemeHandler : themeChangeHandler;
    useEffect(function () {
        // set initial theme based on options or query string
        overrideThemeHandler(initialTheme);
        app.initialize().then(function () {
            app.getContext().then(function (context) {
                batchedUpdates(function () {
                    setInTeams(true);
                    setContext(context);
                    setFullScreen(context.page.isFullScreen);
                });
                overrideThemeHandler(context.app.theme);
                app.registerOnThemeChangeHandler(overrideThemeHandler);
                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 }];
}