@react-awesome-query-builder/mui/cjs/widgets/core/CssVarsProvider.js

User-friendly query builder for React. MUI 5 widgets

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CssVarsProvider = void 0;
var _react = _interopRequireDefault(require("react"));
var _styles = require("@mui/material/styles");
var _theming = require("../../utils/theming");
var CssVarsProvider = exports.CssVarsProvider = function CssVarsProvider(_ref) {
  var _config$settings$them, _config$settings$desi;
  var children = _ref.children,
    config = _ref.config;
  var ref = /*#__PURE__*/_react["default"].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 = (0, _styles.useTheme)();
  _react["default"].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.mui) !== null && _config$settings$desi2 !== void 0 ? _config$settings$desi2 : _theming.generateCssVars;
      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, theme, config, enableCssVars]);
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: ref,
    className: "qb-mui qb-".concat(themeMode, " ").concat(compactMode ? "qb-compact" : "", " ").concat(liteMode ? "qb-lite" : "")
  }, children);
};