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

package/{es/antv → dist/slots/Header}/Products/Product.d.ts

@@ -1,12 +1,12 @@
-import React from "react";
-import { ProductType } from "./getProducts";
+import React from 'react';
+import { ProductType } from './getProducts';
 interface ProductProps {
     name?: string;
     icon?: string;
     slogan?: string;
     description?: string;
     url?: string;
-    links: ProductType["links"];
+    links: ProductType['links'];
     style?: React.CSSProperties;
     language?: string;
 }

package/{es/antv → dist/slots/Header}/Products/Product.js

@@ -1,29 +1,24 @@
-import React from "react";
-import { useTranslation } from "react-i18next"; //@ts-ignore
-
+import React from 'react';
+import { useT } from "../../hooks";
 import styles from "./Product.module.less";
 
 var getTarget = function getTarget(url) {
-  return url.startsWith("http") && !url.includes("gitee.io") && !url.includes("antv.vision") ? "_blank" : "_self";
+  return url.startsWith('http') && !url.includes('gitee.io') && !url.includes('antv.vision') ? '_blank' : '_self';
 };
 
 var Product = function Product(_ref) {
+  var _links$home$title, _links$example$title;
+
   var name = _ref.name,
       icon = _ref.icon,
       _ref$url = _ref.url,
-      url = _ref$url === void 0 ? "" : _ref$url,
+      url = _ref$url === void 0 ? '' : _ref$url,
       slogan = _ref.slogan,
       description = _ref.description,
       _ref$links = _ref.links,
       links = _ref$links === void 0 ? {} : _ref$links,
       style = _ref.style,
       language = _ref.language;
-
-  var _a, _b;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
   return /*#__PURE__*/React.createElement("li", {
     className: styles.product,
     style: style
@@ -41,7 +36,7 @@ var Product = function Product(_ref) {
   }, /*#__PURE__*/React.createElement("h4", null, name, /*#__PURE__*/React.createElement("span", {
     className: styles.productSlogan,
     style: {
-      opacity: language === "en" ? 0.7 : ""
+      opacity: language === 'en' ? 0.7 : ''
     }
   }, slogan))), /*#__PURE__*/React.createElement("div", {
     className: styles.productDescription
@@ -49,13 +44,13 @@ var Product = function Product(_ref) {
     className: styles.productLinks
   }, links.home && /*#__PURE__*/React.createElement("a", {
     href: links.home.url,
-    target: getTarget(links.home.url || ""),
+    target: getTarget(links.home.url || ''),
     key: links.home.url
-  }, (_a = links.home.title) !== null && _a !== void 0 ? _a : t("产品首页")), links.example && /*#__PURE__*/React.createElement("a", {
+  }, (_links$home$title = links.home.title) !== null && _links$home$title !== void 0 ? _links$home$title : useT('产品首页')), links.example && /*#__PURE__*/React.createElement("a", {
     href: links.example.url,
-    target: getTarget(links.example.url || ""),
+    target: getTarget(links.example.url || ''),
     key: links.example.url
-  }, (_b = links.example.title) !== null && _b !== void 0 ? _b : t("图表示例")))));
+  }, (_links$example$title = links.example.title) !== null && _links$example$title !== void 0 ? _links$example$title : useT('图表示例')))));
 };
 
 export default Product;

package/{src/antv → dist/slots/Header}/Products/Product.module.less

@@ -1,4 +1,5 @@
-@import '../mixins';
+@import '~antd/es/style/themes/default.less';
+@import '../../_.less';
 
 .products {
   width: 100%;
@@ -7,11 +8,12 @@
   left: 0;
   top: 64px;
   opacity: 0;
+  max-height: calc(100vh - 64px);
   transform: translateY(-12px);
   transition: all 0.3s ease-in;
   background: #fff;
-  padding: 0;
-  overflow: hidden;
+  padding: 8px 0 0;
+  overflow: auto;
   box-shadow: none;
   line-height: 1.5;
   font-weight: normal;
@@ -26,18 +28,18 @@
     opacity: 1;
     box-shadow: 0 2px 8px #f0f1f2 inset;
     pointer-events: auto;
-    max-height: unset !important;
     transform: translateY(0);
+    height: auto !important;
   }
 
-  &.show + .mask {
+  &.show+.mask {
     opacity: 1;
   }
 
   h3 {
     font-size: 14px;
     line-height: 22px;
-    margin: 32px 0 24px 0;
+    margin: 24px 0;
     color: #a3b1bf;
     font-weight: normal;
     padding-bottom: 8px;
@@ -97,7 +99,7 @@
       }
 
       .productLinks {
-        > a {
+        >a {
           margin-right: 12px;
           font-size: 12px;
           line-height: 20px;
@@ -143,4 +145,4 @@
       padding-right: 0;
     }
   }
-}
+}

package/{es/antv → dist/slots/Header}/Products/getProducts.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react';
 declare const Categories: ["basic", "extension", "ecology"];
 export interface ProductItem {
     title: string;
@@ -14,11 +14,6 @@ export interface ProductItem {
     }>;
 }
 export declare type ValuesOf<T extends any[]> = T[number];
-export declare const getProducts: ({ t, language, isChinaMirrorHost, }: {
-    t: (key: string) => string;
-    language: string;
-    isChinaMirrorHost?: boolean;
-}) => ProductItem[];
 declare const CATEGORY_TYPE: ["basic", "extension", "mobile", "ecology"];
 export declare const CATEGORIES: Array<{
     type: typeof CATEGORY_TYPE[number];
@@ -45,7 +40,7 @@ export declare type ProductType = {
     [k: string]: any;
 };
 export declare function getNewProducts({ language, isChinaMirrorHost, }: {
-    language: "zh" | "en";
+    language: 'zh' | 'en';
     isChinaMirrorHost: boolean;
 }): Promise<ProductType[]>;
 export {};

package/dist/slots/Header/Products/getProducts.js

@@ -0,0 +1,67 @@
+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; }
+
+import { each } from 'lodash-es';
+
+var tuple = function tuple() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return args;
+};
+
+var Categories = tuple('basic', 'extension', 'ecology');
+var Link = tuple('home', 'example', 'api');
+var ANTV_DOMAIN = 'antv.vision';
+var CATEGORY_TYPE = tuple('basic', 'extension', 'mobile', 'ecology');
+export var CATEGORIES = [{
+  type: 'basic',
+  name: '标准版基础产品'
+}, {
+  type: 'extension',
+  name: '标准版扩展产品'
+}, {
+  type: 'mobile',
+  name: '移动定制（F版）产品'
+}, {
+  type: 'ecology',
+  name: '周边生态'
+}];
+export function getNewProducts(_ref) {
+  var language = _ref.language,
+      isChinaMirrorHost = _ref.isChinaMirrorHost;
+  // 如需要修改产品信息，请到 https://yuyan.antfin-inc.com/datavprod/antv-site-datas/schemas/site-products-h5data/console 修改区块内容
+  return fetch('https://render.alipay.com/p/h5data/antv-site-datas_site-products-h5data.json').then(function (res) {
+    return res.json();
+  }).then(function (products) {
+    return products.filter(function (d) {
+      return d.lang === language;
+    }).map(function (d) {
+      var links = typeof d.links === 'string' ? JSON.parse(d.links) : _objectSpread({}, d.links);
+      var newLinks = {};
+      each(links, function (value, k) {
+        var actualUrl = (value === null || value === void 0 ? void 0 : value.url) || '';
+
+        if (isChinaMirrorHost) {
+          // g2plot.antv.vision => antv-g2plot.gitee.io
+          var match = actualUrl.match(/([http|https]):\/\/(.*)\.antv\.vision/);
+
+          if (match && match[2]) {
+            actualUrl = actualUrl.replace("".concat(match[2], ".antv.vision"), "antv-".concat(match[2], ".gitee.io"));
+          }
+        }
+
+        newLinks[k] = _objectSpread(_objectSpread({}, value), {}, {
+          url: actualUrl
+        });
+      });
+      return _objectSpread(_objectSpread({}, d), {}, {
+        links: newLinks
+      });
+    });
+  });
+}

package/dist/slots/Header/Products/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ProductsProps {
+    show: boolean;
+    rootDomain: string;
+    language?: 'zh' | 'en';
+    className?: string;
+}
+export declare const Products: React.FC<ProductsProps>;
+export {};

package/{es/antv → dist/slots/Header}/Products/index.js

@@ -12,23 +12,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import classNames from "classnames";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { useChinaMirrorHost } from "../hooks";
+import React from 'react';
+import cx from 'classnames';
+import Product from "./Product";
 import { CATEGORIES, getNewProducts } from "./getProducts";
-import Product from "./Product"; //@ts-ignore
-
+import { useChinaMirrorHost, useT } from "../../hooks";
 import styles from "./Product.module.less";
-
-var Products = function Products(_ref) {
+import { useLocale } from 'dumi';
+export var Products = function Products(_ref) {
   var show = _ref.show,
       language = _ref.language,
       className = _ref.className;
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t,
-      i18n = _useTranslation.i18n;
+  var locale = useLocale();
 
   var _useChinaMirrorHost = useChinaMirrorHost(),
       _useChinaMirrorHost2 = _slicedToArray(_useChinaMirrorHost, 1),
@@ -39,7 +34,7 @@ var Products = function Products(_ref) {
       products = _React$useState2[0],
       setProducts = _React$useState2[1];
 
-  var lang = i18n.language === "zh" ? "zh" : "en";
+  var lang = locale.id === 'zh' ? 'zh' : 'en';
   React.useEffect(function () {
     getNewProducts({
       language: lang,
@@ -49,7 +44,7 @@ var Products = function Products(_ref) {
     });
   }, [lang, isChinaMirrorHost]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.products, className, _defineProperty({}, styles.show, !!show))
+    className: cx(styles.products, className, _defineProperty({}, styles.show, !!show))
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, CATEGORIES.map(function (_ref2, idx) {
@@ -57,25 +52,23 @@ var Products = function Products(_ref) {
         type = _ref2.type;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: idx
-    }, /*#__PURE__*/React.createElement("h3", null, t(name)), /*#__PURE__*/React.createElement("ul", null, products.filter(function (item) {
+    }, /*#__PURE__*/React.createElement("h3", null, useT(name)), /*#__PURE__*/React.createElement("ul", null, products.filter(function (item) {
       return item.category === type;
     }).map(function (product) {
-      var _a, _b;
+      var _product$links, _product$links$home;
 
       return /*#__PURE__*/React.createElement(Product, {
         key: product.title,
         name: product.title,
-        slogan: product.slogan || "",
+        slogan: product.slogan || '',
         description: product.description,
-        url: (_b = (_a = product.links) === null || _a === void 0 ? void 0 : _a.home) === null || _b === void 0 ? void 0 : _b.url,
+        url: (_product$links = product.links) === null || _product$links === void 0 ? void 0 : (_product$links$home = _product$links.home) === null || _product$links$home === void 0 ? void 0 : _product$links$home.url,
         icon: product.icon,
         links: product.links,
-        language: language || i18n.language
+        language: language || locale.id
       });
     })));
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles.mask
   }));
-};
-
-export default Products;
+};

package/dist/slots/Header/Search.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import '@docsearch/css';
+import 'docsearch.js/dist/cdn/docsearch.min.css';
+export interface SearchProps {
+    docsearchOptions?: {
+        versionV3?: boolean;
+        appId?: string;
+        apiKey: string;
+        indexName: string;
+    };
+}
+export declare const Search: React.FC<SearchProps>;

package/dist/slots/Header/Search.js

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import { SearchOutlined } from '@ant-design/icons';
+import { DocSearch } from '@docsearch/react';
+import { useLocale } from 'dumi';
+import { useT } from "../hooks";
+import '@docsearch/css';
+import styles from "./Search.module.less";
+import 'docsearch.js/dist/cdn/docsearch.min.css';
+
+function initDocSearchV2(_ref) {
+  var docsearchV2 = _ref.docsearchV2,
+      lang = _ref.lang,
+      docsearchOptions = _ref.docsearchOptions;
+
+  var _ref2 = docsearchOptions || {},
+      _ref2$apiKey = _ref2.apiKey,
+      apiKey = _ref2$apiKey === void 0 ? '194b1be7fb1254c787f4e036912af3eb' : _ref2$apiKey,
+      _ref2$indexName = _ref2.indexName,
+      indexName = _ref2$indexName === void 0 ? 'antv' : _ref2$indexName;
+
+  docsearchV2({
+    apiKey: apiKey,
+    indexName: indexName,
+    inputSelector: ".".concat(styles.input),
+    algoliaOptions: {
+      facetFilters: ["tags:".concat(lang)]
+    },
+    transformData: function transformData(hits) {
+      hits.forEach(function (hit) {
+        /* eslint-disable no-param-reassign */
+        hit.url = hit.url.replace('g2.antv.vision', window.location.host);
+        hit.url = hit.url.replace('g6.antv.vision', window.location.host);
+        hit.url = hit.url.replace('f2.antv.vision', window.location.host);
+        hit.url = hit.url.replace('l7.antv.vision', window.location.host);
+        hit.url = hit.url.replace('x6.antv.vision', window.location.host);
+        hit.url = hit.url.replace('g2plot.antv.vision', window.location.host);
+        hit.url = hit.url.replace('graphin.antv.vision', window.location.host);
+        hit.url = hit.url.replace('https:', window.location.protocol);
+        hit.url = hit.url.replace('#gatsby-focus-wrapper', '');
+        /* eslint-enable no-param-reassign */
+      });
+      return hits;
+    },
+    debug: false // Set debug to true if you want to inspect the dropdown
+
+  });
+}
+
+export var Search = function Search(_ref3) {
+  var docsearchOptions = _ref3.docsearchOptions;
+  var locale = useLocale();
+
+  var _ref4 = docsearchOptions || {},
+      _ref4$apiKey = _ref4.apiKey,
+      apiKey = _ref4$apiKey === void 0 ? '' : _ref4$apiKey,
+      _ref4$indexName = _ref4.indexName,
+      indexName = _ref4$indexName === void 0 ? '' : _ref4$indexName,
+      _ref4$versionV = _ref4.versionV3,
+      versionV3 = _ref4$versionV === void 0 ? false : _ref4$versionV,
+      _ref4$appId = _ref4.appId,
+      appId = _ref4$appId === void 0 ? '' : _ref4$appId;
+
+  useEffect(function () {
+    if (typeof window !== 'undefined' && !versionV3) {
+      import('docsearch.js').then(function (_ref5) {
+        var docsearchV2 = _ref5.default;
+        initDocSearchV2({
+          docsearchV2: docsearchV2,
+          lang: locale.id,
+          docsearchOptions: docsearchOptions
+        });
+      });
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("label", {
+    className: styles.search,
+    htmlFor: "search",
+    id: "search"
+  }, versionV3 ? /*#__PURE__*/React.createElement(DocSearch, {
+    appId: appId,
+    indexName: indexName,
+    apiKey: apiKey
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchOutlined, {
+    className: styles.icon
+  }), /*#__PURE__*/React.createElement("input", {
+    className: styles.input,
+    id: "search",
+    placeholder: useT('搜索…')
+  })));
+};

package/dist/slots/Header/Search.module.less

@@ -0,0 +1,39 @@
+.search {
+  margin-left: 36px;
+  line-height: 1.5;
+  white-space: nowrap;
+  transition: all 0.3s;
+
+  .icon {
+    color: #a3b1bf;
+    opacity: 0.75;
+    margin-right: 8px;
+  }
+
+  .input {
+    border: none;
+    height: 32px;
+    line-height: 32px;
+    outline: none;
+    background: transparent;
+    vertical-align: baseline !important;
+
+    &::placeholder {
+      color: #a3b1bf;
+    }
+  }
+
+  :global {
+    .DocSearch-Search-Icon {
+      width: 1em !important;
+      height: 1em !important;
+      color: #a3b1bf !important;
+    }
+  }
+}
+
+@media only screen and (max-width: 931.99px) {
+  .search {
+    display: none;
+  }
+}

package/dist/slots/Header/index.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { INav } from './Navs';
+export declare type HeaderProps = {
+    pathPrefix?: string;
+    /** 子标题 */
+    subTitle?: React.ReactNode;
+    /** 子标题的链接 */
+    subTitleHref?: string;
+    /** 文档和演示的菜单数据 */
+    navs?: INav[];
+    /** 是否显示搜索框 */
+    showSearch?: boolean;
+    /** 是否显示 Github 图标 */
+    showGithubCorner?: boolean;
+    /** 是否显示 Github Star */
+    showGithubStar?: boolean;
+    /** 是否显示切换语言选项 */
+    showLanguageSwitcher?: boolean;
+    /** 切换语言的回调 */
+    onLanguageChange?: (language: string) => void;
+    /** 是否二维码 */
+    showWxQrcode?: boolean;
+    /** 自定义 logo */
+    logo?: {
+        img?: React.ReactNode;
+        link?: string;
+    };
+    siteUrl?: string;
+    /** github 仓库地址 */
+    githubUrl?: string;
+    /** 默认语言 */
+    defaultLanguage?: 'zh' | 'en';
+    /** 自定义 Link */
+    Link?: React.ComponentType<any>;
+    /** 底色是否透明 */
+    transparent?: boolean;
+    /** 是否首页模式 */
+    isHomePage?: boolean;
+    /** 是否是AntV官网 */
+    isAntVSite?: boolean;
+    /** AntV root 域名，直接用主题的可不传 */
+    rootDomain?: string;
+    /** 是否展示国内镜像链接 */
+    showChinaMirror?: boolean;
+    /** 是否显示 AntV 产品卡片 */
+    showAntVProductsCard?: boolean;
+    /** 展示版本切换 */
+    versions?: {
+        [key: string]: string;
+    };
+    /** 展示周边生态 */
+    ecosystems?: Array<{
+        name: Record<string /** zh, en */, string>;
+        url: string;
+    }>;
+    /** 头部搜索框配置 */
+    searchOptions?: {
+        docsearchOptions: {
+            versionV3: boolean;
+            apiKey: string;
+            indexName: string;
+            appId: string;
+        };
+    };
+};
+export declare const Header: React.FC<Partial<HeaderProps>>;