Stefan Hacker
59 lines
2.2 KiB
JavaScript
59 lines
2.2 KiB
JavaScript
import * as React from 'react';
|
|
import { css } from '@fluentui/utilities';
|
|
import { useDocument } from '@fluentui/react-window-provider';
|
|
import { makeStyles } from './makeStyles';
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
var useThemeProviderStyles = makeStyles(function (theme) {
|
|
var semanticColors = theme.semanticColors, fonts = theme.fonts;
|
|
return {
|
|
body: [
|
|
{
|
|
color: semanticColors.bodyText,
|
|
background: semanticColors.bodyBackground,
|
|
fontFamily: fonts.medium.fontFamily,
|
|
fontWeight: fonts.medium.fontWeight,
|
|
fontSize: fonts.medium.fontSize,
|
|
MozOsxFontSmoothing: fonts.medium.MozOsxFontSmoothing,
|
|
WebkitFontSmoothing: fonts.medium.WebkitFontSmoothing,
|
|
},
|
|
],
|
|
};
|
|
});
|
|
/**
|
|
* Hook to add class to body element.
|
|
*/
|
|
function useApplyClassToBody(state, classesToApply) {
|
|
var _a;
|
|
var applyTo = state.applyTo;
|
|
var applyToBody = applyTo === 'body';
|
|
var body = (_a = useDocument()) === null || _a === void 0 ? void 0 : _a.body;
|
|
React.useEffect(function () {
|
|
if (!applyToBody || !body) {
|
|
return;
|
|
}
|
|
for (var _i = 0, classesToApply_1 = classesToApply; _i < classesToApply_1.length; _i++) {
|
|
var classToApply = classesToApply_1[_i];
|
|
if (classToApply) {
|
|
body.classList.add(classToApply);
|
|
}
|
|
}
|
|
return function () {
|
|
if (!applyToBody || !body) {
|
|
return;
|
|
}
|
|
for (var _i = 0, classesToApply_2 = classesToApply; _i < classesToApply_2.length; _i++) {
|
|
var classToApply = classesToApply_2[_i];
|
|
if (classToApply) {
|
|
body.classList.remove(classToApply);
|
|
}
|
|
}
|
|
};
|
|
}, [applyToBody, body, classesToApply]);
|
|
}
|
|
export function useThemeProviderClasses(state) {
|
|
var classes = useThemeProviderStyles(state);
|
|
var className = state.className, applyTo = state.applyTo;
|
|
useApplyClassToBody(state, [classes.root, classes.body]);
|
|
state.className = css(className, classes.root, applyTo === 'element' && classes.body);
|
|
}
|
|
//# sourceMappingURL=useThemeProviderClasses.js.map
|