@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.2

package/dist/slots/Header/index.js

@@ -0,0 +1,379 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// import { navigate } from 'gatsby';
+import React, { useState, useEffect } from 'react';
+import { useMedia } from 'react-use';
+import { useNavigate } from "react-router-dom";
+import cx from 'classnames';
+import { useSiteData, useLocale } from 'dumi';
+import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LikeOutlined, CheckOutlined } from '@ant-design/icons';
+import { Popover, Menu, Dropdown, Select } from 'antd';
+import { map, size } from 'lodash-es';
+import { Search } from "./Search";
+import { Products } from "./Products";
+import { Navs } from "./Navs";
+import { Logo } from "./Logo";
+import { LogoWhite } from "./LogoWhite";
+import { getLangUrl } from "./utils";
+import { useT } from "../hooks";
+import styles from "./index.module.less";
+
+/**
+ * 头部菜单
+ */
+var HeaderComponent = function HeaderComponent(_ref) {
+  var _cx, _cx4;
+
+  var _ref$subTitle = _ref.subTitle,
+      subTitle = _ref$subTitle === void 0 ? '' : _ref$subTitle,
+      subTitleHref = _ref.subTitleHref,
+      _ref$pathPrefix = _ref.pathPrefix,
+      pathPrefix = _ref$pathPrefix === void 0 ? '' : _ref$pathPrefix,
+      _ref$navs = _ref.navs,
+      navs = _ref$navs === void 0 ? [] : _ref$navs,
+      _ref$showSearch = _ref.showSearch,
+      showSearch = _ref$showSearch === void 0 ? true : _ref$showSearch,
+      _ref$showGithubStar = _ref.showGithubStar,
+      showGithubStar = _ref$showGithubStar === void 0 ? false : _ref$showGithubStar,
+      _ref$showGithubCorner = _ref.showGithubCorner,
+      showGithubCorner = _ref$showGithubCorner === void 0 ? true : _ref$showGithubCorner,
+      _ref$showAntVProducts = _ref.showAntVProductsCard,
+      showAntVProductsCard = _ref$showAntVProducts === void 0 ? true : _ref$showAntVProducts,
+      _ref$showLanguageSwit = _ref.showLanguageSwitcher,
+      showLanguageSwitcher = _ref$showLanguageSwit === void 0 ? true : _ref$showLanguageSwit,
+      _ref$showChinaMirror = _ref.showChinaMirror,
+      showChinaMirror = _ref$showChinaMirror === void 0 ? true : _ref$showChinaMirror,
+      logo = _ref.logo,
+      onLanguageChange = _ref.onLanguageChange,
+      _ref$showWxQrcode = _ref.showWxQrcode,
+      showWxQrcode = _ref$showWxQrcode === void 0 ? true : _ref$showWxQrcode,
+      siteUrl = _ref.siteUrl,
+      _ref$githubUrl = _ref.githubUrl,
+      githubUrl = _ref$githubUrl === void 0 ? 'https://github.com/antvis' : _ref$githubUrl,
+      defaultLanguage = _ref.defaultLanguage,
+      _ref$Link = _ref.Link,
+      Link = _ref$Link === void 0 ? 'a' : _ref$Link,
+      transparent = _ref.transparent,
+      isHomePage = _ref.isHomePage,
+      _ref$isAntVSite = _ref.isAntVSite,
+      isAntVSite = _ref$isAntVSite === void 0 ? false : _ref$isAntVSite,
+      _ref$rootDomain = _ref.rootDomain,
+      rootDomain = _ref$rootDomain === void 0 ? '' : _ref$rootDomain,
+      versions = _ref.versions,
+      ecosystems = _ref.ecosystems,
+      searchOptions = _ref.searchOptions;
+  var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页
+
+  var locale = useLocale();
+  var nav = useNavigate();
+
+  var _useState = useState(locale.id),
+      _useState2 = _slicedToArray(_useState, 2),
+      lang = _useState2[0],
+      setLang = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      productMenuVisible = _useState4[0],
+      setProductMenuVisible = _useState4[1];
+
+  var productMenuHovering = false;
+
+  var onProductMouseEnter = function onProductMouseEnter(e) {
+    productMenuHovering = true;
+    e.persist();
+    setTimeout(function () {
+      if (e.target instanceof Element && e.target.matches(':hover')) {
+        setProductMenuVisible(true);
+      }
+    }, 200);
+  };
+
+  var onProductMouseLeave = function onProductMouseLeave(e) {
+    e.persist();
+    productMenuHovering = false;
+    setTimeout(function () {
+      if (productMenuHovering) {
+        return;
+      }
+
+      setProductMenuVisible(false);
+    }, 200);
+  };
+
+  var onToggleProductMenuVisible = function onToggleProductMenuVisible() {
+    setProductMenuVisible(!productMenuVisible);
+  };
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      popupMenuVisible = _useState6[0],
+      setPopupMenuVisible = _useState6[1];
+
+  var onTogglePopupMenuVisible = function onTogglePopupMenuVisible() {
+    setPopupMenuVisible(!popupMenuVisible);
+  };
+
+  var _img$link$logo = _objectSpread({
+    img: isAntVHome ? /*#__PURE__*/React.createElement(LogoWhite, {
+      style: {}
+    }) : /*#__PURE__*/React.createElement(Logo, {
+      style: {}
+    }),
+    link: ''
+  }, logo),
+      img = _img$link$logo.img,
+      link = _img$link$logo.link;
+
+  useEffect(function () {
+    if (popupMenuVisible) {
+      setPopupMenuVisible(false);
+    }
+  }, [window.location.pathname]); // 移动端下弹出菜单时，禁止页面滚动
+
+  useEffect(function () {
+    if (popupMenuVisible) {
+      document.documentElement.style.overflow = 'hidden';
+    } else {
+      document.documentElement.style.overflow = '';
+    }
+
+    return function () {
+      document.documentElement.style.overflow = '';
+    };
+  }, [popupMenuVisible]);
+  var isWide = useMedia('(min-width: 767.99px)', true);
+  var menuIcon = !isWide ? /*#__PURE__*/React.createElement(MenuOutlined, {
+    className: styles.menuIcon,
+    onClick: onTogglePopupMenuVisible
+  }) : null;
+  var productItemProps = isWide ? {
+    onMouseEnter: onProductMouseEnter,
+    onMouseLeave: onProductMouseLeave
+  } : {
+    onClick: onToggleProductMenuVisible
+  };
+  var menu = /*#__PURE__*/React.createElement("ul", {
+    className: cx(styles.menu, (_cx = {}, _defineProperty(_cx, styles.popup, !isWide), _defineProperty(_cx, styles.popupHidden, !popupMenuVisible), _cx))
+  },
+  /** 最左侧的菜单，一般是 教程、API、示例，或者其他自定义，有配置文件中的 `navs` 决定 */
+  size(navs) && /*#__PURE__*/React.createElement(Navs, {
+    navs: navs,
+    path: window.location.pathname
+  }),
+  /** 生态产品 */
+  size(ecosystems) && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, {
+    className: styles.ecoSystems,
+    overlay: /*#__PURE__*/React.createElement(Menu, null, map(ecosystems, function (_ref2) {
+      var url = _ref2.url,
+          ecosystemName = _ref2.name;
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang]
+      }, /*#__PURE__*/React.createElement("a", {
+        target: "_blank",
+        rel: "noreferrer",
+        href: url
+      }, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(LikeOutlined, null)));
+    }))
+  }, /*#__PURE__*/React.createElement("span", null, useT('周边生态'), /*#__PURE__*/React.createElement(DownOutlined, {
+    style: {
+      marginLeft: '6px'
+    }
+  })))),
+  /** 产品列表 */
+  showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, useT('所有产品'), !isAntVHome ? /*#__PURE__*/React.createElement("img", {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
+    alt: "antv logo arrow",
+    className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible))
+  }) : /*#__PURE__*/React.createElement(CaretDownFilled, {
+    style: {
+      top: '1px',
+      color: '#fff'
+    },
+    className: cx(styles.arrow, _defineProperty({}, styles.open, productMenuVisible))
+  })), /*#__PURE__*/React.createElement(Products, {
+    className: styles.productsMenu,
+    show: productMenuVisible,
+    rootDomain: rootDomain,
+    language: defaultLanguage
+  })),
+  /** 版本列表 */
+  versions && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Select, {
+    defaultValue: Object.keys(versions)[0],
+    className: styles.versions,
+    bordered: false,
+    size: "small",
+    onChange: function onChange(value) {
+      window.location.href = value;
+    }
+  }, Object.keys(versions).map(function (version) {
+    var url = versions[version];
+
+    if (url.startsWith('http')) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        key: url,
+        value: url
+      }, version);
+    }
+
+    return null;
+  }))),
+  /** 切换网站语言 */
+  showLanguageSwitcher && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, {
+    placement: "bottomRight",
+    overlay: /*#__PURE__*/React.createElement(Menu, {
+      defaultSelectedKeys: [lang],
+      selectable: true,
+      onSelect: function onSelect(_ref3) {
+        var key = _ref3.key;
+
+        if (key === lang) {
+          return;
+        }
+
+        setLang(key);
+
+        if (onLanguageChange) {
+          onLanguageChange(key.toString());
+          return;
+        }
+
+        var newUrl = getLangUrl(window.location.href, key);
+        nav(newUrl.replace(window.location.origin, ''));
+      }
+    }, /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "en"
+    }, /*#__PURE__*/React.createElement(CheckOutlined, {
+      style: {
+        visibility: lang === 'en' ? 'visible' : 'hidden',
+        color: '#52c41a'
+      }
+    }), "English"), /*#__PURE__*/React.createElement(Menu.Item, {
+      key: "zh"
+    }, /*#__PURE__*/React.createElement(CheckOutlined, {
+      style: {
+        visibility: lang === 'zh' ? 'visible' : 'hidden',
+        color: '#52c41a'
+      }
+    }), "\u7B80\u4F53\u4E2D\u6587")),
+    className: styles.translation
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "ant-dropdown-link",
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: styles.translation,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"
+  }))))),
+  /** 微信公众号 */
+  showWxQrcode && /*#__PURE__*/React.createElement("li", {
+    className: styles.wxQrcode
+  }, /*#__PURE__*/React.createElement(Popover, {
+    content: /*#__PURE__*/React.createElement("img", {
+      width: "100%",
+      height: "100%",
+      src: "https://gw.alipayobjects.com/zos/antfincdn/ZKlx96dsfs/qrcode_for_gh_f52d8b6aa591_258.jpg",
+      alt: "wx-qrcode"
+    }),
+    title: "\u5FAE\u4FE1\u626B\u4E00\u626B\u5173\u6CE8",
+    overlayClassName: "wx-qrcode-popover",
+    overlayStyle: {
+      width: 128,
+      height: 128
+    },
+    overlayInnerStyle: {
+      padding: 2
+    }
+  }, /*#__PURE__*/React.createElement(WechatOutlined, null))),
+  /** GitHub icon */
+  showGithubCorner && /*#__PURE__*/React.createElement("li", {
+    className: styles.githubCorner
+  }, /*#__PURE__*/React.createElement("a", {
+    href: githubUrl,
+    target: "_blank"
+  }, /*#__PURE__*/React.createElement(GithubOutlined, null))));
+  return /*#__PURE__*/React.createElement("header", {
+    className: cx(styles.header, (_cx4 = {}, _defineProperty(_cx4, styles.transparent, !!transparent && !productMenuVisible), _defineProperty(_cx4, styles.isHomePage, !!isHomePage && !isAntVHome), _defineProperty(_cx4, styles.lightTheme, !!isAntVHome && !productMenuVisible && isWide), _defineProperty(_cx4, styles.fixed, popupMenuVisible), _cx4))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.left
+  }, /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement("a", {
+    href: siteUrl
+  }, img)), subTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: styles.divider
+  }), /*#__PURE__*/React.createElement("h2", {
+    className: styles.subProduceName
+  }, /*#__PURE__*/React.createElement("a", {
+    href: window.location.pathname.startsWith('/en') ? '/en' : '/'
+  }, subTitle))), showSearch && !isAntVHome && /*#__PURE__*/React.createElement(Search, searchOptions)), /*#__PURE__*/React.createElement("nav", {
+    className: styles.nav
+  }, menu, menuIcon)));
+};
+
+export var Header = function Header(props) {
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var title = themeConfig.title,
+      siteUrl = themeConfig.siteUrl,
+      githubUrl = themeConfig.githubUrl,
+      isAntVSite = themeConfig.isAntVSite,
+      subTitleHref = themeConfig.subTitleHref,
+      showSearch = themeConfig.showSearch,
+      showGithubCorner = themeConfig.showGithubCorner,
+      showGithubStars = themeConfig.showGithubStars,
+      showLanguageSwitcher = themeConfig.showLanguageSwitcher,
+      showWxQrcode = themeConfig.showWxQrcode,
+      defaultLanguage = themeConfig.defaultLanguage,
+      showAntVProductsCard = themeConfig.showAntVProductsCard,
+      versions = themeConfig.versions,
+      ecosystems = themeConfig.ecosystems,
+      navs = themeConfig.navs,
+      docsearchOptions = themeConfig.docsearchOptions;
+  var searchOptions = {
+    docsearchOptions: docsearchOptions
+  };
+  var headerProps = {
+    subTitle: title,
+    subTitleHref: subTitleHref,
+    githubUrl: githubUrl,
+    isAntVSite: isAntVSite,
+    siteUrl: siteUrl,
+    showSearch: showSearch,
+    showGithubCorner: showGithubCorner,
+    showGithubStars: showGithubStars,
+    showLanguageSwitcher: showLanguageSwitcher,
+    showWxQrcode: showWxQrcode,
+    defaultLanguage: defaultLanguage,
+    showAntVProductsCard: showAntVProductsCard,
+    versions: versions,
+    ecosystems: ecosystems,
+    navs: navs,
+    searchOptions: searchOptions,
+    isHomePage: true
+  };
+  return /*#__PURE__*/React.createElement(HeaderComponent, Object.assign({}, headerProps, props));
+};