@fluentui/react
Version:
Reusable React components for building web experiences.
112 lines • 5.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.makeStyles = void 0;
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 react_1 = require("react");
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 deprecation/deprecation
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
(0, react_1.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;
};
}
exports.makeStyles = makeStyles;
function isStyleFunction(styleOrFunction) {
return typeof styleOrFunction === 'function';
}
//# sourceMappingURL=makeStyles.js.map