@react-awesome-query-builder/fluent
Version:
User-friendly query builder for React. Fluent 8 widgets
38 lines • 2.15 kB
JavaScript
import React from "react";
import { useTheme } from "@fluentui/react";
import { generateCssVars as defaultGenerateCssVars } from "../../utils/theming";
var CssVarsProvider = function CssVarsProvider(_ref) {
var _config$settings$them, _config$settings$desi;
var children = _ref.children,
config = _ref.config;
var ref = /*#__PURE__*/React.createRef();
var themeMode = (_config$settings$them = config.settings.themeMode) !== null && _config$settings$them !== void 0 ? _config$settings$them : "light";
var compactMode = !!config.settings.compactMode;
var liteMode = config.settings.liteMode;
var enableCssVars = !!((_config$settings$desi = config.settings.designSettings) !== null && _config$settings$desi !== void 0 && _config$settings$desi.generateCssVarsFromThemeLibrary);
var theme = useTheme();
React.useEffect(function () {
var cssVarsTarget = ref.current;
var cssVars = {};
if (enableCssVars) {
var _config$settings$desi2, _config$settings$desi3;
var generateCssVars = (_config$settings$desi2 = (_config$settings$desi3 = config.settings.designSettings) === null || _config$settings$desi3 === void 0 || (_config$settings$desi3 = _config$settings$desi3.generateCssVars) === null || _config$settings$desi3 === void 0 ? void 0 : _config$settings$desi3.fluent) !== null && _config$settings$desi2 !== void 0 ? _config$settings$desi2 : defaultGenerateCssVars;
cssVars = generateCssVars.call(config.ctx, theme, config);
for (var k in cssVars) {
if (cssVars[k] != undefined) {
cssVarsTarget === null || cssVarsTarget === void 0 || cssVarsTarget.style.setProperty(k, cssVars[k]);
}
}
}
return function () {
for (var _k in cssVars) {
cssVarsTarget === null || cssVarsTarget === void 0 || cssVarsTarget.style.removeProperty(_k);
}
};
}, [themeMode, ref, theme, config, enableCssVars]);
return /*#__PURE__*/React.createElement("div", {
ref: ref,
className: "qb-fluent qb-".concat(themeMode, " ").concat(compactMode ? "qb-compact" : "", " ").concat(liteMode ? "qb-lite" : "")
}, children);
};
export { CssVarsProvider };