Stefan Hacker
92 lines
5.1 KiB
JavaScript
92 lines
5.1 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.MergeStylesRootProvider = exports.MergeStylesRootContext = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = require("react");
|
|
var merge_styles_1 = require("@fluentui/merge-styles");
|
|
var dom_1 = require("../../dom");
|
|
var MergeStylesDefaultContext_1 = require("./MergeStylesDefaultContext");
|
|
var useAdoptedStylesheet_1 = require("../hooks/useAdoptedStylesheet");
|
|
var useShadowConfig_1 = require("../hooks/useShadowConfig");
|
|
var useMergeStylesShadowRoot_1 = require("../hooks/useMergeStylesShadowRoot");
|
|
var useMergeStylesRootStylesheets_1 = require("../hooks/useMergeStylesRootStylesheets");
|
|
var useStyled_1 = require("../hooks/useStyled");
|
|
var react_window_provider_1 = require("@fluentui/react-window-provider");
|
|
exports.MergeStylesRootContext = React.createContext((0, MergeStylesDefaultContext_1.getNewContext)());
|
|
/**
|
|
* Root context provider for mergeStyles shadow DOM.
|
|
* Typically this is placed at the render root of your React application.
|
|
*/
|
|
var MergeStylesRootProvider = function (_a) {
|
|
var userSheets = _a.stylesheets, userWindow = _a.window, useAdoptedStylesheet = _a.useAdoptedStylesheet, useAdoptedStylesheetEx = _a.useAdoptedStylesheetEx, useShadowConfig = _a.useShadowConfig, useMergeStylesShadowRootContext = _a.useMergeStylesShadowRootContext, useHasMergeStylesShadowRootContext = _a.useHasMergeStylesShadowRootContext, useMergeStylesRootStylesheets = _a.useMergeStylesRootStylesheets, useWindow = _a.useWindow, useStyled = _a.useStyled, props = tslib_1.__rest(_a, ["stylesheets", "window", "useAdoptedStylesheet", "useAdoptedStylesheetEx", "useShadowConfig", "useMergeStylesShadowRootContext", "useHasMergeStylesShadowRootContext", "useMergeStylesRootStylesheets", "useWindow", "useStyled"]);
|
|
var win = userWindow !== null && userWindow !== void 0 ? userWindow : (0, dom_1.getWindow)();
|
|
var _b = React.useState(function () { return userSheets || new Map(); }), stylesheets = _b[0], setStylesheets = _b[1];
|
|
var sheetHandler = React.useCallback(function (_a) {
|
|
var key = _a.key, sheet = _a.sheet;
|
|
setStylesheets(function (prev) {
|
|
var next = new Map(prev);
|
|
next.set(key, sheet);
|
|
return next;
|
|
});
|
|
}, []);
|
|
// Update stylesheets based on user style sheet changes
|
|
React.useEffect(function () {
|
|
setStylesheets(userSheets || new Map());
|
|
}, [userSheets]);
|
|
// Wire up listener for adopted stylesheets
|
|
React.useEffect(function () {
|
|
if (!win) {
|
|
return;
|
|
}
|
|
var sheet = merge_styles_1.ShadowDomStylesheet.getInstance((0, merge_styles_1.makeShadowConfig)(merge_styles_1.GLOBAL_STYLESHEET_KEY, false, win));
|
|
var off = sheet.onAddSheet(sheetHandler);
|
|
return function () {
|
|
off();
|
|
};
|
|
}, [win, sheetHandler]);
|
|
// Read stylesheets from window on mount
|
|
React.useEffect(function () {
|
|
if (!win) {
|
|
return;
|
|
}
|
|
var changed = false;
|
|
var next = new Map(stylesheets);
|
|
var sheet = merge_styles_1.ShadowDomStylesheet.getInstance((0, merge_styles_1.makeShadowConfig)(merge_styles_1.GLOBAL_STYLESHEET_KEY, false, win));
|
|
var adoptedSheets = sheet.getAdoptedSheets();
|
|
adoptedSheets.forEach(function (adoptedSheet, key) {
|
|
next.set(key, adoptedSheet);
|
|
changed = true;
|
|
});
|
|
if (changed) {
|
|
setStylesheets(next);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
var defaultValues = React.useMemo(function () {
|
|
return {
|
|
stylesheets: stylesheets,
|
|
useAdoptedStylesheet: useAdoptedStylesheet || useAdoptedStylesheet_1.useAdoptedStylesheet,
|
|
useAdoptedStylesheetEx: useAdoptedStylesheetEx || useAdoptedStylesheet_1.useAdoptedStylesheetEx,
|
|
useShadowConfig: useShadowConfig || useShadowConfig_1.useShadowConfig,
|
|
useMergeStylesShadowRootContext: useMergeStylesShadowRootContext || useMergeStylesShadowRoot_1.useMergeStylesShadowRootContext,
|
|
useHasMergeStylesShadowRootContext: useHasMergeStylesShadowRootContext || useMergeStylesShadowRoot_1.useHasMergeStylesShadowRootContext,
|
|
useMergeStylesRootStylesheets: useMergeStylesRootStylesheets || useMergeStylesRootStylesheets_1.useMergeStylesRootStylesheets,
|
|
useWindow: useWindow || react_window_provider_1.useWindow,
|
|
useStyled: useStyled || useStyled_1.useStyled,
|
|
};
|
|
}, [
|
|
stylesheets,
|
|
useAdoptedStylesheet,
|
|
useAdoptedStylesheetEx,
|
|
useShadowConfig,
|
|
useMergeStylesShadowRootContext,
|
|
useHasMergeStylesShadowRootContext,
|
|
useMergeStylesRootStylesheets,
|
|
useWindow,
|
|
useStyled,
|
|
]);
|
|
return (React.createElement(MergeStylesDefaultContext_1.MergeStylesDefaultContext.Provider, { value: defaultValues },
|
|
React.createElement(exports.MergeStylesRootContext.Provider, tslib_1.__assign({ value: defaultValues }, props))));
|
|
};
|
|
exports.MergeStylesRootProvider = MergeStylesRootProvider;
|
|
//# sourceMappingURL=MergeStylesRootContext.js.map
|