Stefan Hacker
111 lines
4.9 KiB
JavaScript
111 lines
4.9 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.makeStyles = makeStyles;
|
|
var React = require("react");
|
|
var useTheme_1 = require("./useTheme");
|
|
var utilities_1 = require("@fluentui/utilities");
|
|
var react_window_provider_1 = require("@fluentui/react-window-provider");
|
|
var mergeStylesRenderer_1 = require("./styleRenderers/mergeStylesRenderer");
|
|
var graphGet = function (graphNode, _a) {
|
|
var _b, _c, _d;
|
|
var windowId = _a[0], id = _a[1], theme = _a[2];
|
|
return (_d = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme)) === null || _d === void 0 ? void 0 : _d.classMap;
|
|
};
|
|
var graphSet = function (graphNode, _a, classMap) {
|
|
var _b, _c;
|
|
var windowId = _a[0], id = _a[1], theme = _a[2];
|
|
var windowNode = (_b = graphNode.get(windowId)) !== null && _b !== void 0 ? _b : new Map();
|
|
graphNode.set(windowId, windowNode);
|
|
var idNode = (_c = windowNode.get(id)) !== null && _c !== void 0 ? _c : new Map();
|
|
windowNode.set(id, idNode);
|
|
idNode.set(theme, { classMap: classMap, refCount: 0 });
|
|
};
|
|
function graphRef(graphNode, _a) {
|
|
var _b, _c;
|
|
var windowId = _a[0], id = _a[1], theme = _a[2];
|
|
var node = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme);
|
|
if (node) {
|
|
node.refCount++;
|
|
}
|
|
}
|
|
function graphDeref(graphNode, _a) {
|
|
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
var windowId = _a[0], id = _a[1], theme = _a[2];
|
|
var node = (_c = (_b = graphNode.get(windowId)) === null || _b === void 0 ? void 0 : _b.get(id)) === null || _c === void 0 ? void 0 : _c.get(theme);
|
|
if (node) {
|
|
node.refCount--;
|
|
if (node.refCount === 0) {
|
|
(_e = (_d = graphNode.get(windowId)) === null || _d === void 0 ? void 0 : _d.get(id)) === null || _e === void 0 ? void 0 : _e.delete(theme);
|
|
if (((_g = (_f = graphNode.get(windowId)) === null || _f === void 0 ? void 0 : _f.get(id)) === null || _g === void 0 ? void 0 : _g.size) === 0) {
|
|
(_h = graphNode.get(windowId)) === null || _h === void 0 ? void 0 : _h.delete(id);
|
|
if (((_j = graphNode.get(windowId)) === null || _j === void 0 ? void 0 : _j.size) === 0) {
|
|
graphNode.delete(windowId);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/**
|
|
* Registers a css object, optionally as a function of the theme.
|
|
*
|
|
* @param styleOrFunction - Either a css javascript object, or a function which takes in `ITheme`
|
|
* and returns a css javascript object.
|
|
*
|
|
* @deprecated Use `mergeStyles` instead for v8 related code. We will be using a new implementation of `makeStyles` in
|
|
* future versions of the library.
|
|
*/
|
|
function makeStyles(styleOrFunction) {
|
|
// Create graph of inputs to map to output.
|
|
var graph = new Map();
|
|
// Retain a dictionary of window ids we're tracking
|
|
var allWindows = new Set();
|
|
// cleanupMapEntries will
|
|
// 1. remove all the graph branches for the window,
|
|
// 2. remove the event listener,
|
|
// 3. delete the allWindows entry.
|
|
var cleanupMapEntries = function (ev) {
|
|
var win = ev.currentTarget;
|
|
var winId = win.__id__;
|
|
graph.delete(winId);
|
|
win.removeEventListener('unload', cleanupMapEntries);
|
|
allWindows.delete(winId);
|
|
};
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
return function (options) {
|
|
if (options === void 0) { options = {}; }
|
|
var theme = options.theme;
|
|
var winId;
|
|
var win = (0, react_window_provider_1.useWindow)();
|
|
if (win) {
|
|
win.__id__ = win.__id__ || (0, utilities_1.getId)();
|
|
winId = win.__id__;
|
|
if (!allWindows.has(winId)) {
|
|
allWindows.add(winId);
|
|
win.addEventListener('unload', cleanupMapEntries);
|
|
}
|
|
}
|
|
var contextualTheme = (0, useTheme_1.useTheme)();
|
|
theme = theme || contextualTheme;
|
|
var renderer = mergeStylesRenderer_1.mergeStylesRenderer;
|
|
var id = renderer.getId();
|
|
var path = [winId, id, theme];
|
|
var value = graphGet(graph, path);
|
|
// Don't keep around unused styles
|
|
React.useEffect(function () {
|
|
graphRef(graph, [winId, id, theme]);
|
|
return function () { return graphDeref(graph, [winId, id, theme]); };
|
|
}, [winId, id, theme]);
|
|
if (!value) {
|
|
var styles = isStyleFunction(styleOrFunction)
|
|
? styleOrFunction(theme)
|
|
: styleOrFunction;
|
|
value = mergeStylesRenderer_1.mergeStylesRenderer.renderStyles(styles, { targetWindow: win, rtl: !!theme.rtl });
|
|
graphSet(graph, path, value);
|
|
}
|
|
return value;
|
|
};
|
|
}
|
|
function isStyleFunction(styleOrFunction) {
|
|
return typeof styleOrFunction === 'function';
|
|
}
|
|
//# sourceMappingURL=makeStyles.js.map
|