rsuite/esm/CustomProvider/CustomProvider.js

A suite of react components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import React, { useEffect } from 'react';
import { getClassNamePrefix, prefix } from '../utils/prefix';
import { addClass, removeClass, canUseDOM } from '../DOMHelper';
import ToastContainer, { toastPlacements } from '../toaster/ToastContainer';
import { usePortal } from '../utils';
var CustomContext = /*#__PURE__*/React.createContext({});
var Consumer = CustomContext.Consumer,
    Provider = CustomContext.Provider;
var themes = ['light', 'dark', 'high-contrast'];

var CustomProvider = function CustomProvider(props) {
  var children = props.children,
      _props$classPrefix = props.classPrefix,
      classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
      theme = props.theme,
      container = props.toastContainer,
      rest = _objectWithoutPropertiesLoose(props, ["children", "classPrefix", "theme", "toastContainer"]);

  var toasters = React.useRef(new Map());

  var _usePortal = usePortal({
    container: container
  }),
      Portal = _usePortal.Portal;

  var value = React.useMemo(function () {
    return _extends({
      classPrefix: classPrefix,
      theme: theme,
      toasters: toasters
    }, rest);
  }, [classPrefix, theme, rest]);
  useEffect(function () {
    if (canUseDOM && theme) {
      addClass(document.body, prefix(classPrefix, "theme-" + theme)); // Remove the className that will cause style conflicts

      themes.forEach(function (t) {
        if (t !== theme) {
          removeClass(document.body, prefix(classPrefix, "theme-" + t));
        }
      });
    }
  }, [classPrefix, theme]);
  return /*#__PURE__*/React.createElement(Provider, {
    value: value
  }, children, /*#__PURE__*/React.createElement(Portal, null, toastPlacements.map(function (placement) {
    return /*#__PURE__*/React.createElement(ToastContainer, {
      key: placement,
      placement: placement,
      ref: function ref(_ref) {
        toasters.current.set(placement, _ref);
      }
    });
  })));
};

export { CustomContext, Consumer as CustomConsumer };
export default CustomProvider;