dumi-theme-antd/dist/builtins/BashTabs/index.js

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

/**
 * bash 选项卡切换组件
 */
import { useMemo, useCallback, useContext } from 'react';
import { Tabs } from 'antd';
import SourceCode from 'dumi/theme-default/builtins/SourceCode';
import SiteContext from "dumi/theme/slots/SiteContext";
import { jsx as ___EmotionJSX } from "@emotion/react";
var BashTabs = function BashTabs(props) {
  var tabItems = props.tabItems,
    defaultActiveKey = props.defaultActiveKey;
  var _useContext = useContext(SiteContext),
    theme = _useContext.theme;
  var renderLabel = useCallback(function (item) {
    var label = item.label,
      iconRender = item.iconRender,
      iconSrc = item.iconSrc;
    return ___EmotionJSX("span", {
      className: "snippet-label"
    }, typeof iconRender === 'function' ? iconRender({
      theme: theme
    }) : null, iconSrc ? ___EmotionJSX("img", {
      src: iconSrc,
      alt: "iconSrc"
    }) : null, label);
  }, [theme]);
  var items = useMemo(function () {
    return tabItems === null || tabItems === void 0 ? void 0 : tabItems.map(function (item) {
      var _item$key = item.key,
        key = _item$key === void 0 ? String(Date.now()) : _item$key,
        children = item.children,
        _item$lang = item.lang,
        lang = _item$lang === void 0 ? 'bash' : _item$lang;
      if (children) {
        return {
          key: key,
          children: ___EmotionJSX(SourceCode, {
            lang: lang
          }, children),
          label: renderLabel(item)
        };
      }
      return {
        key: '',
        label: ''
      };
    }).filter(function (i) {
      return i.key;
    });
  }, [tabItems, renderLabel]);
  return ___EmotionJSX(Tabs, {
    className: "antd-site-snippet",
    defaultActiveKey: defaultActiveKey,
    items: items
  });
};
export default BashTabs;