@fluentui/react
Version:
Reusable React components for building web experiences.
108 lines • 4.74 kB
JavaScript
import { useTheme } from './useTheme';
import { getId } from '@fluentui/utilities';
import { useWindow } from '@fluentui/react-window-provider';
import { mergeStylesRenderer } from './styleRenderers/mergeStylesRenderer';
import { useEffect } from '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.
*/
export 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 = useWindow();
if (win) {
win.__id__ = win.__id__ || getId();
winId = win.__id__;
if (!allWindows.has(winId)) {
allWindows.add(winId);
win.addEventListener('unload', cleanupMapEntries);
}
}
var contextualTheme = useTheme();
theme = theme || contextualTheme;
var renderer = mergeStylesRenderer;
var id = renderer.getId();
var path = [winId, id, theme];
var value = graphGet(graph, path);
// Don't keep around unused styles
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.renderStyles(styles, { targetWindow: win, rtl: !!theme.rtl });
graphSet(graph, path, value);
}
return value;
};
}
function isStyleFunction(styleOrFunction) {
return typeof styleOrFunction === 'function';
}
//# sourceMappingURL=makeStyles.js.map