dumi-theme-antd/dist/slots/LangSwitch/index.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
// 多语言切换
import { Select } from 'antd';
import { history, useIntl, useLocale, useLocation, useSearchParams, useSiteData } from 'dumi';
import { useCallback } from 'react';
import useAdditionalThemeConfig from "../../hooks/useAdditionalThemeConfig";
import { getTargetLocalePath } from "../../utils";
import SwitchBtn from "../Header/SwitchBtn";
import { jsx as ___EmotionJSX } from "@emotion/react";
var Option = Select.Option;
var LangSwitch = function LangSwitch() {
  var _useSearchParams = useSearchParams(),
    _useSearchParams2 = _slicedToArray(_useSearchParams, 1),
    searchParams = _useSearchParams2[0];
  var _useAdditionalThemeCo = useAdditionalThemeConfig(),
    localesEnhance = _useAdditionalThemeCo.localesEnhance;
  var _useSiteData = useSiteData(),
    locales = _useSiteData.locales;
  var _useIntl = useIntl(),
    locale = _useIntl.locale;
  var current = useLocale();
  var _useLocation = useLocation(),
    pathname = _useLocation.pathname;
  var handleLangChange = useCallback(function (lang) {
    var path = getTargetLocalePath({
      pathname: pathname,
      current: current,
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      target: locales.find(function (_ref) {
        var id = _ref.id;
        return id === lang;
      })
    });

    // 多多语言首页做特殊处理 eg. /index-en
    if (path.startsWith('/-')) {
      path = "/index".concat(path.substring(1));
    } else if (path.endsWith('/index')) {
      path = path.replace('/index', '/');
    }
    history.push({
      pathname: path,
      search: searchParams.toString()
    });
  }, [pathname, current, locales, searchParams]);
  var onLangChange = useCallback(function () {
    handleLangChange(locales.filter(function (item) {
      return item.id !== locale;
    })[0].id);
  }, [locale, handleLangChange, locales]);
  var LangSwitchJSX;
  // do not render in single language
  if (locales.length > 2 || !localesEnhance && locales.length > 2) {
    var langOptions = locales.map(function (lang) {
      return ___EmotionJSX(Option, {
        value: lang.id,
        key: lang.id
      }, lang.name);
    });
    LangSwitchJSX = ___EmotionJSX(Select, {
      key: "lang",
      className: "version",
      size: "small",
      defaultValue: locale,
      onChange: handleLangChange,
      popupMatchSelectWidth: false,
      getPopupContainer: function getPopupContainer(trigger) {
        return trigger.parentNode;
      }
    }, langOptions);
  } else if (locales.length === 2 && Array.isArray(localesEnhance) && localesEnhance.length > 1) {
    // 按 locales 顺序展示
    var switchValue = locales[0].id === locale ? 1 : 2;
    LangSwitchJSX = ___EmotionJSX(SwitchBtn, {
      key: "lang",
      onClick: onLangChange,
      value: switchValue,
      label1: localesEnhance[0].switchPrefix,
      label2: localesEnhance[1].switchPrefix,
      tooltip1: "".concat(locales[0].name, " / ").concat(locales[1].name),
      tooltip2: "".concat(locales[1].name, " / ").concat(locales[0].name)
    });
  }
  return LangSwitchJSX;
};
export default LangSwitch;