@pnp/spfx-controls-react/lib-commonjs/controls/enhancedThemeProvider/EnhancedThemeProvider.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ThemeContext = exports.useTheme = exports.getDefaultTheme = exports.EnhancedThemeProvider = void 0;
var tslib_1 = require("tslib");
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
var scheme_utilities_1 = require("@fluentui/scheme-utilities");
var Icons_1 = require("@fluentui/react/lib/Icons");
var Styling_1 = require("@fluentui/react/lib/Styling");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var FluentUITeamsDarkTheme_1 = require("../../common/fluentUIThemes/FluentUITeamsDarkTheme");
var FluentUITeamsDefaultTheme_1 = require("../../common/fluentUIThemes/FluentUITeamsDefaultTheme");
var FluentUITeamsHighContrastTheme_1 = require("../../common/fluentUIThemes/FluentUITeamsHighContrastTheme");
var react_theme_provider_2 = require("@fluentui/react-theme-provider");
Object.defineProperty(exports, "ThemeContext", { enumerable: true, get: function () { return react_theme_provider_2.ThemeContext; } });
Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return react_theme_provider_2.useTheme; } });
var telemetry = tslib_1.__importStar(require("../../common/telemetry"));
var sp_webpart_base_1 = require("@microsoft/sp-webpart-base");
var getDefaultTheme = function () {
    var _a;
    var currentTheme;
    var themeColorsFromWindow = (_a = window.__themeState__) === null || _a === void 0 ? void 0 : _a.theme;
    if (themeColorsFromWindow) {
        currentTheme = (0, Styling_1.createTheme)({
            palette: themeColorsFromWindow
        });
    }
    else {
        currentTheme = (0, Styling_1.getTheme)();
    }
    return currentTheme;
};
exports.getDefaultTheme = getDefaultTheme;
var EnhancedThemeProvider = function (props) {
    var _a = (0, react_1.useState)(false), isInTeams = _a[0], setIsInTeams = _a[1];
    var _b = (0, react_1.useState)(null), teamsThemeName = _b[0], setTeamsThemeName = _b[1];
    // track the telemetry as 'ReactEnhancedThemeProvider'
    (0, react_1.useEffect)(function () {
        telemetry.track('ReactEnhancedThemeProvider');
    }, []);
    // *****
    (0, react_1.useEffect)(function () {
        (0, Icons_1.initializeIcons)();
    }, []);
    (0, react_1.useEffect)(function () {
        setIsInTeams(props.context instanceof sp_webpart_base_1.WebPartContext && props.context.sdks.microsoftTeams ? true : false);
    }, [props.context]);
    (0, react_1.useEffect)(function () {
        var _a, _b;
        if (isInTeams) {
            var teamsInstance = props.context.sdks.microsoftTeams;
            setTeamsThemeName((_a = teamsInstance.context) === null || _a === void 0 ? void 0 : _a.theme);
            (_b = teamsInstance.teamsJs) === null || _b === void 0 ? void 0 : _b.registerOnThemeChangeHandler(function (theme) {
                setTeamsThemeName(theme);
            });
        }
    }, [props.context, isInTeams]);
    var themeToApply = (0, react_1.useCallback)(function () {
        var workingTheme;
        if (isInTeams) {
            switch (teamsThemeName) {
                case "default":
                    workingTheme = FluentUITeamsDefaultTheme_1.fluentUITeamsDefaultTheme;
                    break;
                case "dark":
                    workingTheme = FluentUITeamsDarkTheme_1.fluentUITeamsDarkTheme;
                    break;
                case "contrast":
                    workingTheme = FluentUITeamsHighContrastTheme_1.fluentUITeamsHighContrastTheme;
                    break;
                default:
                    workingTheme = FluentUITeamsDefaultTheme_1.fluentUITeamsDefaultTheme;
                    break;
            }
        }
        else if (props.theme) {
            workingTheme = (0, scheme_utilities_1.getVariant)(props.theme, scheme_utilities_1.VariantThemeType.None);
        }
        else {
            workingTheme = getDefaultTheme();
        }
        return workingTheme;
    }, [props.theme, teamsThemeName]);
    return (React.createElement(react_theme_provider_1.ThemeProvider, tslib_1.__assign({}, props, { theme: themeToApply() }), props.children));
};
exports.EnhancedThemeProvider = EnhancedThemeProvider;
//# sourceMappingURL=EnhancedThemeProvider.js.map