rsuite/cjs/CustomProvider/CustomProvider.js

A suite of react components

'use client';
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = CustomProvider;
var _react = _interopRequireWildcard(require("react"));
var _IconProvider = _interopRequireDefault(require("@rsuite/icons/IconProvider"));
var _hooks = require("../internals/hooks");
var _utils = require("../internals/utils");
var _DOMHelper = require("../DOMHelper");
var _CustomContext = require("../internals/Provider/CustomContext");
var _ToastContainer = _interopRequireWildcard(require("../toaster/ToastContainer"));
var _DialogContainer = _interopRequireDefault(require("../useDialog/DialogContainer"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const themes = ['light', 'dark', 'high-contrast'];

/**
 * CustomProvider is used to provide global configuration, such as language, theme, etc.
 *
 * @see https://rsuitejs.com/components/custom-provider
 */
function CustomProvider(props) {
  const {
    children,
    classPrefix = (0, _utils.getClassNamePrefix)(),
    components,
    iconClassPrefix = classPrefix,
    theme,
    toastContainer = _ToastContainer.defaultToasterContainer,
    disableRipple,
    csp,
    disableInlineStyles,
    ...rest
  } = props;
  const toasters = (0, _react.useRef)(new Map());
  // This creates a ref that matches the expected type in CustomContext
  const dialogContainerRef = (0, _react.useRef)(null);
  const {
    Portal
  } = (0, _hooks.usePortal)({
    container: toastContainer,
    waitMount: true
  });
  const value = (0, _react.useMemo)(() => ({
    classPrefix,
    theme,
    toasters,
    disableRipple,
    components,
    toastContainer,
    ...rest
  }), [classPrefix, theme, disableRipple, components, toastContainer, rest]);
  const iconContext = (0, _react.useMemo)(() => ({
    classPrefix: iconClassPrefix,
    csp,
    disableInlineStyles
  }), [iconClassPrefix, csp, disableInlineStyles]);
  (0, _hooks.useIsomorphicLayoutEffect)(() => {
    if (_DOMHelper.canUseDOM && theme) {
      (0, _DOMHelper.addClass)(document.body, (0, _utils.prefix)(classPrefix, `theme-${theme}`));

      // Remove the className that will cause style conflicts
      themes.forEach(t => {
        if (t !== theme) {
          (0, _DOMHelper.removeClass)(document.body, (0, _utils.prefix)(classPrefix, `theme-${t}`));
        }
      });
    }
  }, [classPrefix, theme]);

  // Create a context value with proper types
  const contextValue = {
    dialogContainer: dialogContainerRef,
    ...value
  };
  return /*#__PURE__*/_react.default.createElement(_CustomContext.CustomContext.Provider, {
    value: contextValue
  }, /*#__PURE__*/_react.default.createElement(_IconProvider.default, {
    value: iconContext
  }, children, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("div", {
    className: `${classPrefix}toast-provider`
  }, _ToastContainer.toastPlacements.map(placement => /*#__PURE__*/_react.default.createElement(_ToastContainer.default, {
    key: placement,
    placement: placement,
    ref: ref => {
      toasters.current.set(placement, ref);
    }
  }))), /*#__PURE__*/_react.default.createElement(_DialogContainer.default, {
    ref: dialogContainerRef
  }))));
}