Stefan Hacker
109 lines
5.7 KiB
JavaScript
109 lines
5.7 KiB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/merge-styles", "@fluentui/react-window-provider", "./useMergeStylesRootStylesheets", "./useMergeStylesShadowRoot"], function (require, exports, tslib_1, React, merge_styles_1, react_window_provider_1, useMergeStylesRootStylesheets_1, useMergeStylesShadowRoot_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.useAdoptedStylesheetEx = exports.useAdoptedStylesheet = void 0;
|
|
/**
|
|
* Use adopted stylesheets in the parent shadow root.
|
|
*/
|
|
var useAdoptedStylesheet = function (stylesheetKey) {
|
|
var shadowCtx = (0, useMergeStylesShadowRoot_1.useMergeStylesShadowRootContext)();
|
|
var rootMergeStyles = (0, useMergeStylesRootStylesheets_1.useMergeStylesRootStylesheets)();
|
|
var win = (0, react_window_provider_1.useWindow)();
|
|
return (0, exports.useAdoptedStylesheetEx)(stylesheetKey, shadowCtx, rootMergeStyles, win);
|
|
};
|
|
exports.useAdoptedStylesheet = useAdoptedStylesheet;
|
|
/**
|
|
* Optimization for specific cases like nested customizables.
|
|
*/
|
|
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;
|
|
};
|
|
exports.useAdoptedStylesheetEx = useAdoptedStylesheetEx;
|
|
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 (merge_styles_1.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 (merge_styles_1.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 = tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__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) {
|
|
(0, merge_styles_1.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 = merge_styles_1.Stylesheet.getInstance((0, merge_styles_1.makeShadowConfig)(stylesheetKey, true, (_e = doc.defaultView) !== null && _e !== void 0 ? _e : undefined));
|
|
listenerRef[stylesheetKey] = polyfillSheet.onInsertRule(onInsert);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
});
|
|
//# sourceMappingURL=useAdoptedStylesheet.js.map
|