@react-awesome-query-builder/antd
Version:
User-friendly query builder for React. AntDesign widgets
41 lines (40 loc) • 2.3 kB
JavaScript
import React from "react";
import { ConfigProvider, theme as antdTheme } from "antd";
import { CssVarsProvider } from "./CssVarsProvider";
import { buildAlgorithms, mergeThemes } from "../../utils/theming";
var Provider = function Provider(_ref) {
var _config$settings$them, _config$settings$loca, _config$settings$desi;
var config = _ref.config,
children = _ref.children;
var themeMode = config.settings.themeMode;
var darkMode = themeMode === "dark";
var compactMode = !!config.settings.compactMode;
var themeConfig = (_config$settings$them = config.settings.theme) === null || _config$settings$them === void 0 ? void 0 : _config$settings$them.antd;
var localeConfig = (_config$settings$loca = config.settings.locale) === null || _config$settings$loca === void 0 ? void 0 : _config$settings$loca.antd;
var canCreateAlgorithms = darkMode || compactMode;
var canCreateTheme = !!themeConfig || localeConfig || canCreateAlgorithms;
var _antdTheme$useToken = antdTheme.useToken(),
existingOuterToken = _antdTheme$useToken.token,
existingTheme = _antdTheme$useToken.theme;
var existingToken = (_config$settings$desi = config.settings.designSettings) !== null && _config$settings$desi !== void 0 && _config$settings$desi.canInheritThemeFromOuterProvider ? existingOuterToken : undefined;
var _React$useMemo = React.useMemo(function () {
return buildAlgorithms(darkMode, compactMode);
}, [darkMode, compactMode]),
algorithms = _React$useMemo.algorithms;
var customThemeConfig = React.useMemo(function () {
return canCreateTheme ? mergeThemes(themeMode, existingToken, themeConfig, algorithms) : undefined;
}, [algorithms, themeConfig, existingTheme.id, themeMode, canCreateTheme]);
var withCssVarsProvider = /*#__PURE__*/React.createElement(CssVarsProvider, {
config: config
}, children);
// https://ant.design/components/config-provider
var withTheme = canCreateTheme ?
/*#__PURE__*/
// @ts-ignore error TS2786: 'ConfigProvider' cannot be used as a JSX component. Its return type 'ReactNode | Promise<ReactNode>' is not a valid JSX element.
React.createElement(ConfigProvider, {
locale: localeConfig,
theme: customThemeConfig
}, withCssVarsProvider) : withCssVarsProvider;
return withTheme;
};
export { Provider };