@dnb/eufemia/cjs/shared/Theme.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeWrapper = ThemeWrapper;
exports.default = Theme;
exports.getThemeClasses = getThemeClasses;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _Context = _interopRequireDefault(require("./Context.js"));
var _Provider = _interopRequireDefault(require("./Provider.js"));
var _componentHelper = require("./component-helper.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function Theme(themeProps) {
  const context = _react.default.useContext(_Context.default);
  const {
    children,
    element,
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode,
    darkBackground,
    ...restProps
  } = themeProps;
  const theme = (0, _componentHelper.extendPropsWithContext)({
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode,
    darkBackground
  }, null, context === null || context === void 0 ? void 0 : context.theme);
  return _react.default.createElement(_Provider.default, {
    theme: theme
  }, _react.default.createElement(ThemeWrapper, _extends({
    element: element,
    theme: theme
  }, restProps), children));
}
Theme.Provider = ({
  element,
  ...themeProps
}) => {
  return _react.default.createElement(Theme, _extends({}, themeProps, {
    element: false
  }));
};
Theme.Provider['_supportsSpacingProps'] = 'children';
function ThemeWrapper({
  children,
  theme,
  element = null,
  className = null,
  ...rest
}) {
  const Wrapper = element === false ? _react.default.Fragment : element || 'div';
  const ref = _react.default.useRef(null);
  if (Wrapper === _react.default.Fragment) {
    return children;
  }
  rest['ref'] = ref;
  const classNames = getThemeClasses(theme, className);
  const {
    name,
    variant,
    size
  } = theme;
  return _react.default.createElement(Wrapper, _extends({
    "data-name": name,
    "data-variant": variant,
    "data-size": size,
    className: classNames
  }, rest), children);
}
function getThemeClasses(theme, className = null) {
  if (!theme) {
    return className;
  }
  const {
    name,
    variant,
    size,
    propMapping,
    contrastMode,
    darkMode
  } = theme;
  return (0, _classnames.default)(className, 'eufemia-theme', name && `eufemia-theme__${name}` + (variant ? ` eufemia-theme__${name}--${variant}` : ""), propMapping && `eufemia-theme__prop-mapping--${propMapping}`, contrastMode && 'eufemia-theme__contrast-mode', darkMode && 'eufemia-theme__dark-mode', size && `eufemia-theme__size--${size}`);
}
//# sourceMappingURL=Theme.js.map