@react-awesome-query-builder/mui/cjs/utils/theming.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.generateCssVars = exports.buildTheme = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _ui = require("@react-awesome-query-builder/ui");
var _styles = require("@mui/material/styles");
var _mergeWith = _interopRequireDefault(require("lodash/mergeWith"));
var _omit = _interopRequireDefault(require("lodash/omit"));
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // https://mui.com/material-ui/customization/theming/
// https://mui.com/material-ui/customization/palette/
// https://mui.com/material-ui/customization/default-theme/
var _Utils$ColorUtils = _ui.Utils.ColorUtils,
  setColorOpacity = _Utils$ColorUtils.setColorOpacity,
  generateCssVarsForLevels = _Utils$ColorUtils.generateCssVarsForLevels,
  chroma = _Utils$ColorUtils.chroma;
var logger = _ui.Utils.OtherUtils.logger;
var filterBasicTheme = function filterBasicTheme(theme) {
  var filteredPalette = (0, _omit["default"])(theme.palette, ["background", "text", "divider", "action"]);
  // filteredPalette = pick(filteredPalette, [
  //   "primary", "secondary", "error", "warning", "info", "success"
  // ]);
  return _objectSpread(_objectSpread({}, theme), {}, {
    palette: filteredPalette
  });
};
var buildTheme = exports.buildTheme = function buildTheme(config, existingTheme) {
  var _config$settings$them, _config$settings$loca;
  var themeMode = config.settings.themeMode;
  // const compactMode = config.settings.compactMode;
  // const momentLocale = config.settings.locale?.moment;
  var themeConfig = (_config$settings$them = config.settings.theme) === null || _config$settings$them === void 0 ? void 0 : _config$settings$them.mui;
  var localeConfig = (_config$settings$loca = config.settings.locale) === null || _config$settings$loca === void 0 ? void 0 : _config$settings$loca.mui;
  var isFullTheme = function isFullTheme(t) {
    var _t$palette;
    return !!(t !== null && t !== void 0 && t.shadows) && !!(t !== null && t !== void 0 && (_t$palette = t.palette) !== null && _t$palette !== void 0 && _t$palette.mode);
  };
  var existingThemeMode = existingTheme === null || existingTheme === void 0 ? void 0 : existingTheme.palette.mode;
  var canCreateTheme = !!themeConfig || themeMode || localeConfig;
  if (!canCreateTheme) {
    return null;
  }
  var mergedThemeOptions = undefined;
  if (isFullTheme(themeConfig)) {
    // override existing theme completely
    mergedThemeOptions = themeConfig;
  } else {
    // merge with existing theme
    var filteredExistingTheme = themeMode && existingTheme && themeMode != existingThemeMode ? filterBasicTheme(existingTheme) : existingTheme;
    mergedThemeOptions = (0, _mergeWith["default"])({}, filteredExistingTheme !== null && filteredExistingTheme !== void 0 ? filteredExistingTheme : {}, themeConfig !== null && themeConfig !== void 0 ? themeConfig : {}, themeMode && {
      palette: {
        mode: themeMode
      }
    });
  }
  return (0, _styles.createTheme)(mergedThemeOptions, localeConfig !== null && localeConfig !== void 0 ? localeConfig : {});
};
var generateCssVars = exports.generateCssVars = function generateCssVars(theme, config) {
  var _config$settings$desi, _config$settings$desi2, _config$settings$desi3, _config$settings$desi4;
  logger.log("generateCssVars - MUI theme", theme);
  var palette = theme.palette,
    typography = theme.typography,
    shadows = theme.shadows;
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
  var shape = theme.shape;
  var darkMode = palette.mode === "dark";
  var useThickLeftBorderOnHoverItem = (_config$settings$desi = (_config$settings$desi2 = config.settings.designSettings) === null || _config$settings$desi2 === void 0 ? void 0 : _config$settings$desi2.useThickLeftBorderOnHoverItem) !== null && _config$settings$desi !== void 0 ? _config$settings$desi : false;
  var useShadowOnHoverItem = (_config$settings$desi3 = (_config$settings$desi4 = config.settings.designSettings) === null || _config$settings$desi4 === void 0 ? void 0 : _config$settings$desi4.useShadowOnHoverItem) !== null && _config$settings$desi3 !== void 0 ? _config$settings$desi3 : false;
  var cssVars = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
    "--main-background": palette.background.paper,
    "--rule-background": darkMode ? palette.background.paper : palette.background.paper
  }, generateCssVarsForLevels(darkMode, "--group-background", palette.background.paper)), generateCssVarsForLevels(darkMode, "--rulegroup-background", palette.background.paper)), generateCssVarsForLevels(darkMode, "--rulegroupext-background", palette.background.paper)), generateCssVarsForLevels(darkMode, "--switch-background", palette.background.paper)), generateCssVarsForLevels(darkMode, "--case-background", palette.background.paper)), {}, {
    "--rule-border-color": darkMode ? palette.divider : chroma(palette.divider).brighten(3).hex(),
    "--group-border-color": darkMode ? palette.divider : palette.divider,
    "--rulegroup-border-color": darkMode ? palette.divider : palette.divider,
    "--rulegroupext-border-color": darkMode ? palette.divider : palette.divider,
    "--switch-border-color": darkMode ? palette.divider : palette.divider,
    "--case-border-color": darkMode ? palette.divider : palette.divider,
    "--treeline-color": palette.primary.main,
    "--treeline-switch-color": palette.secondary.main,
    "--main-text-color": palette.text.primary,
    "--main-font-family": typography.fontFamily,
    "--main-font-size": typography.fontSize + "px",
    "--item-radius": shape.borderRadius + "px"
  });
  if (useThickLeftBorderOnHoverItem) {
    cssVars = _objectSpread(_objectSpread({}, cssVars), {}, {
      "--rule-border-left-width-hover": "2px",
      "--group-border-left-width-hover": "2px",
      "--rulegroup-border-left-width-hover": "2px",
      "--rulegroupext-border-left-width-hover": "2px"
    });
  }
  if (useShadowOnHoverItem) {
    cssVars = _objectSpread(_objectSpread({}, cssVars), {}, {
      "--rule-shadow-hover": shadows[1],
      "--group-shadow-hover": shadows[1],
      "--rulegroup-shadow-hover": shadows[1],
      "--rulegroupext-shadow-hover": shadows[1]
    });
  }
  return cssVars;
};