Stefan Hacker
108 lines
4.6 KiB
JavaScript
108 lines
4.6 KiB
JavaScript
import * as React from 'react';
|
|
import { useTheme } from './useTheme';
|
|
import { getId } from '@fluentui/utilities';
|
|
import { useWindow } from '@fluentui/react-window-provider';
|
|
import { mergeStylesRenderer } from './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.
|
|
*/
|
|
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 @typescript-eslint/no-deprecated
|
|
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
|
|
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.renderStyles(styles, { targetWindow: win, rtl: !!theme.rtl });
|
|
graphSet(graph, path, value);
|
|
}
|
|
return value;
|
|
};
|
|
}
|
|
function isStyleFunction(styleOrFunction) {
|
|
return typeof styleOrFunction === 'function';
|
|
}
|
|
//# sourceMappingURL=makeStyles.js.map
|