dumi-theme-nocobase/dist/layouts/GlobalLayout.js

<h1 align="center">dumi-theme-nocobase</h1>

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { ConfigProvider, theme as antdTheme } from 'antd';
import { Outlet, createSearchParams, usePrefersColor, useSearchParams } from 'dumi';
import { useCallback, useEffect, useMemo, useState } from 'react';
import ThemeSwitch from "../common/ThemeSwitch";
import SiteContext from "dumi/theme/slots/SiteContext";
import { jsx as ___EmotionJSX } from "@emotion/react";
var RESPONSIVE_MOBILE = 768;
var getAlgorithm = function getAlgorithm() {
  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  return themes.map(function (theme) {
    if (theme === 'dark') {
      return antdTheme.darkAlgorithm;
    }
    if (theme === 'compact') {
      return antdTheme.compactAlgorithm;
    }
    return antdTheme.defaultAlgorithm;
  });
};
var GlobalLayout = function GlobalLayout() {
  var _usePrefersColor = usePrefersColor(),
    _usePrefersColor2 = _slicedToArray(_usePrefersColor, 3),
    setPrefersColor = _usePrefersColor2[2];
  var _useState = useState({
      isMobile: false,
      theme: ['light']
    }),
    _useState2 = _slicedToArray(_useState, 2),
    _useState2$ = _useState2[0],
    theme = _useState2$.theme,
    isMobile = _useState2$.isMobile,
    setSiteState = _useState2[1];
  var _useSearchParams = useSearchParams(),
    _useSearchParams2 = _slicedToArray(_useSearchParams, 2),
    searchParams = _useSearchParams2[0],
    setSearchParams = _useSearchParams2[1];
  var updateSiteConfig = useCallback(function (props) {
    setSiteState(function (prev) {
      return _objectSpread(_objectSpread({}, prev), props);
    });
    // updating `searchParams` will clear the hash
    var oldSearchStr = searchParams.toString();
    var nextSearchParams = searchParams;
    Object.entries(props).forEach(function (_ref) {
      var _ref2 = _slicedToArray(_ref, 2),
        key = _ref2[0],
        value = _ref2[1];
      if (key === 'theme') {
        // @ts-ignore
        nextSearchParams = createSearchParams(_objectSpread(_objectSpread({}, nextSearchParams), {}, {
          theme: value.filter(function (t) {
            return t !== 'light';
          })
        }));
        setPrefersColor(value.indexOf('dark') > -1 ? 'dark' : 'light');
      }
    });
    if (nextSearchParams.toString() !== oldSearchStr) {
      setSearchParams(nextSearchParams);
    }
  }, [searchParams, setSearchParams, setPrefersColor]);
  var updateMobileMode = useCallback(function () {
    updateSiteConfig({
      isMobile: typeof window === 'undefined' ? false : window.innerWidth < RESPONSIVE_MOBILE
    });
  }, [updateSiteConfig]);
  useEffect(function () {
    var _theme = searchParams.getAll('theme');
    setSiteState({
      theme: _theme
    });
    // Handle isMobile
    updateMobileMode();
    if (typeof window !== 'undefined') {
      window.addEventListener('resize', updateMobileMode);
    }
    return function () {
      if (typeof window !== 'undefined') {
        window.removeEventListener('resize', updateMobileMode);
      }
    };
  }, [searchParams, updateMobileMode]);
  var siteContextValue = useMemo(function () {
    return {
      isMobile: isMobile,
      theme: theme,
      updateSiteConfig: updateSiteConfig
    };
  }, [isMobile, theme, updateSiteConfig]);
  return ___EmotionJSX(SiteContext.Provider, {
    value: siteContextValue
  }, ___EmotionJSX(ConfigProvider, {
    theme: {
      algorithm: getAlgorithm(theme)
    }
  }, ___EmotionJSX(Outlet, null), ___EmotionJSX(ThemeSwitch, {
    value: theme,
    onChange: function onChange(nextTheme) {
      return updateSiteConfig({
        theme: nextTheme
      });
    }
  })));
};
export default GlobalLayout;