Stefan Hacker
108 lines
5.0 KiB
JavaScript
108 lines
5.0 KiB
JavaScript
import { __spreadArray } from "tslib";
|
|
import * as React from 'react';
|
|
import { SUPPORTS_CONSTRUCTABLE_STYLESHEETS, SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS, Stylesheet, makeShadowConfig, cloneCSSStyleSheet, } from '@fluentui/merge-styles';
|
|
import { useWindow } from '@fluentui/react-window-provider';
|
|
import { useMergeStylesRootStylesheets } from './useMergeStylesRootStylesheets';
|
|
import { useMergeStylesShadowRootContext } from './useMergeStylesShadowRoot';
|
|
/**
|
|
* Use adopted stylesheets in the parent shadow root.
|
|
*/
|
|
export var useAdoptedStylesheet = function (stylesheetKey) {
|
|
var shadowCtx = useMergeStylesShadowRootContext();
|
|
var rootMergeStyles = useMergeStylesRootStylesheets();
|
|
var win = useWindow();
|
|
return useAdoptedStylesheetEx(stylesheetKey, shadowCtx, rootMergeStyles, win);
|
|
};
|
|
/**
|
|
* Optimization for specific cases like nested customizables.
|
|
*/
|
|
export var useAdoptedStylesheetEx = function (stylesheetKey, shadowCtx, rootMergeStyles, win) {
|
|
var polyfillInsertListners = React.useRef({});
|
|
React.useEffect(function () {
|
|
if (!shadowCtx) {
|
|
return;
|
|
}
|
|
var polyfillListeners = polyfillInsertListners.current;
|
|
polyfillInsertListners.current = {};
|
|
return function () {
|
|
Object.keys(polyfillListeners).forEach(function (key) {
|
|
polyfillListeners[key]();
|
|
});
|
|
};
|
|
}, [win, stylesheetKey, shadowCtx]);
|
|
if (!shadowCtx) {
|
|
return false;
|
|
}
|
|
if (shadowCtx.shadowRoot && !shadowCtx.stylesheets.has(stylesheetKey)) {
|
|
var adoptableStyleSheet = rootMergeStyles.get(stylesheetKey);
|
|
if (adoptableStyleSheet && (win === null || win === void 0 ? void 0 : win.document)) {
|
|
adoptSheet(shadowCtx, win.document, stylesheetKey, adoptableStyleSheet, polyfillInsertListners.current);
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
var updatePolyfillSheet = function (shadowCtx, stylesheetKey, rule) {
|
|
var shadowRoot = shadowCtx.shadowRoot;
|
|
var style = shadowRoot.querySelector("[data-merge-styles-stylesheet-key=\"".concat(stylesheetKey, "\"]"));
|
|
if (style === null || style === void 0 ? void 0 : style.sheet) {
|
|
style.sheet.insertRule(rule);
|
|
}
|
|
};
|
|
var adoptSheet = function (shadowCtx, doc, stylesheetKey, stylesheet, listenerRef) {
|
|
var _a, _b, _c, _d, _e;
|
|
var shadowRoot = shadowCtx.shadowRoot;
|
|
shadowCtx.stylesheets.set(stylesheetKey, stylesheet);
|
|
if (SUPPORTS_CONSTRUCTABLE_STYLESHEETS) {
|
|
// Maintain the sort order of Fluent style sheets
|
|
var prevSheets = shadowRoot.adoptedStyleSheets;
|
|
var i = prevSheets.length;
|
|
var found = i === 0;
|
|
while (i >= 0 && !found) {
|
|
i--;
|
|
var prevSheet = prevSheets[i];
|
|
var prevSortOrder = (_b = (_a = prevSheet.metadata) === null || _a === void 0 ? void 0 : _a.sortOrder) !== null && _b !== void 0 ? _b : 0;
|
|
var sheetSortOrder = (_d = (_c = stylesheet.metadata) === null || _c === void 0 ? void 0 : _c.sortOrder) !== null && _d !== void 0 ? _d : 0;
|
|
if (prevSheet.bucketName === 'merge-styles' && prevSortOrder < sheetSortOrder) {
|
|
found = true;
|
|
}
|
|
}
|
|
if (SUPPORTS_MODIFYING_ADOPTED_STYLESHEETS) {
|
|
// The current spec allows the `adoptedStyleSheets` array to be modified.
|
|
// Previous versions of the spec required a new array to be created.
|
|
// For more details see: https://github.com/microsoft/fast/pull/6703
|
|
shadowRoot.adoptedStyleSheets.splice(i + 1, 0, stylesheet);
|
|
}
|
|
else {
|
|
shadowRoot.adoptedStyleSheets = __spreadArray(__spreadArray(__spreadArray([], shadowRoot.adoptedStyleSheets.slice(0, i + 1), true), [
|
|
stylesheet
|
|
], false), shadowRoot.adoptedStyleSheets.slice(i + 1), true);
|
|
}
|
|
}
|
|
else {
|
|
var style = doc.createElement('style');
|
|
style.setAttribute('data-merge-styles-stylesheet-key', stylesheetKey);
|
|
var otherStyles = shadowRoot.querySelectorAll('[data-merge-styles-stylesheet-key]');
|
|
if (otherStyles.length > 0) {
|
|
shadowRoot.insertBefore(style, otherStyles[otherStyles.length - 1].nextSibling);
|
|
}
|
|
else {
|
|
shadowRoot.insertBefore(style, shadowRoot.firstChild);
|
|
}
|
|
if (style.sheet) {
|
|
cloneCSSStyleSheet(stylesheet, style.sheet);
|
|
if (!listenerRef[stylesheetKey]) {
|
|
var onInsert = function (_a) {
|
|
var key = _a.key, rule = _a.rule;
|
|
if (key === stylesheetKey) {
|
|
if (shadowCtx && rule) {
|
|
updatePolyfillSheet(shadowCtx, key, rule);
|
|
}
|
|
}
|
|
};
|
|
var polyfillSheet = Stylesheet.getInstance(makeShadowConfig(stylesheetKey, true, (_e = doc.defaultView) !== null && _e !== void 0 ? _e : undefined));
|
|
listenerRef[stylesheetKey] = polyfillSheet.onInsertRule(onInsert);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
//# sourceMappingURL=useAdoptedStylesheet.js.map
|