Stefan Hacker
88 lines
4.9 KiB
JavaScript
88 lines
4.9 KiB
JavaScript
import { __assign, __rest } from "tslib";
|
|
import * as React from 'react';
|
|
import { GLOBAL_STYLESHEET_KEY, ShadowDomStylesheet, makeShadowConfig } from '@fluentui/merge-styles';
|
|
import { getWindow } from '../../dom';
|
|
import { MergeStylesDefaultContext, getNewContext } from './MergeStylesDefaultContext';
|
|
import { useAdoptedStylesheet as useAdoptedStylesheetDefault, useAdoptedStylesheetEx as useAdoptedStylesheetExDefault, } from '../hooks/useAdoptedStylesheet';
|
|
import { useShadowConfig as useShadowConfigDefault } from '../hooks/useShadowConfig';
|
|
import { useHasMergeStylesShadowRootContext as useHasMergeStylesShadowRootContextDefault, useMergeStylesShadowRootContext as useMergeStylesShadowRootContextDefault, } from '../hooks/useMergeStylesShadowRoot';
|
|
import { useMergeStylesRootStylesheets as useMergeStylesRootStylesheetsDefault } from '../hooks/useMergeStylesRootStylesheets';
|
|
import { useStyled as useStyledDefault } from '../hooks/useStyled';
|
|
import { useWindow as useWindowDefault } from '@fluentui/react-window-provider';
|
|
export var MergeStylesRootContext = React.createContext(getNewContext());
|
|
/**
|
|
* Root context provider for mergeStyles shadow DOM.
|
|
* Typically this is placed at the render root of your React application.
|
|
*/
|
|
export 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 = __rest(_a, ["stylesheets", "window", "useAdoptedStylesheet", "useAdoptedStylesheetEx", "useShadowConfig", "useMergeStylesShadowRootContext", "useHasMergeStylesShadowRootContext", "useMergeStylesRootStylesheets", "useWindow", "useStyled"]);
|
|
var win = userWindow !== null && userWindow !== void 0 ? userWindow : 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 = ShadowDomStylesheet.getInstance(makeShadowConfig(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 = ShadowDomStylesheet.getInstance(makeShadowConfig(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 || useAdoptedStylesheetDefault,
|
|
useAdoptedStylesheetEx: useAdoptedStylesheetEx || useAdoptedStylesheetExDefault,
|
|
useShadowConfig: useShadowConfig || useShadowConfigDefault,
|
|
useMergeStylesShadowRootContext: useMergeStylesShadowRootContext || useMergeStylesShadowRootContextDefault,
|
|
useHasMergeStylesShadowRootContext: useHasMergeStylesShadowRootContext || useHasMergeStylesShadowRootContextDefault,
|
|
useMergeStylesRootStylesheets: useMergeStylesRootStylesheets || useMergeStylesRootStylesheetsDefault,
|
|
useWindow: useWindow || useWindowDefault,
|
|
useStyled: useStyled || useStyledDefault,
|
|
};
|
|
}, [
|
|
stylesheets,
|
|
useAdoptedStylesheet,
|
|
useAdoptedStylesheetEx,
|
|
useShadowConfig,
|
|
useMergeStylesShadowRootContext,
|
|
useHasMergeStylesShadowRootContext,
|
|
useMergeStylesRootStylesheets,
|
|
useWindow,
|
|
useStyled,
|
|
]);
|
|
return (React.createElement(MergeStylesDefaultContext.Provider, { value: defaultValues },
|
|
React.createElement(MergeStylesRootContext.Provider, __assign({ value: defaultValues }, props))));
|
|
};
|
|
//# sourceMappingURL=MergeStylesRootContext.js.map
|