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

package/dist/slots/Features/FeatureCard.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 interface FeatureProps {
     icon: string;
     title: IC;

package/dist/slots/Features/index.js

@@ -3,6 +3,7 @@ import { Row, Col } from 'antd';
 import cx from 'classnames';
 import FeatureCard from "./FeatureCard";
 import styles from "./index.module.less";
+import { ic } from "../hooks";
 export var Features = function Features(_ref) {
   var title = _ref.title,
       _ref$features = _ref.features,
@@ -15,7 +16,7 @@ export var Features = function Features(_ref) {
     var children = features.map(function (card) {
       return /*#__PURE__*/React.createElement(Col, {
         className: styles.cardWrapper,
-        key: card.title,
+        key: ic(card.title),
         md: 8,
         xs: 24
       }, /*#__PURE__*/React.createElement(FeatureCard, card));

package/dist/slots/Footer/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["columns", "bottom", "theme", "language", "isDynamicFooter", "rootDomain"];
+var _excluded = ["columns", "bottom", "theme", "language", "isDynamicFooter", "rootDomain", "className"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,6 +31,7 @@ export var Footer = function Footer(props) {
       isDynamicFooter = props.isDynamicFooter,
       _props$rootDomain = props.rootDomain,
       rootDomain = _props$rootDomain === void 0 ? '' : _props$rootDomain,
+      className = props.className,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var locale = useLocale();
@@ -163,7 +164,7 @@ export var Footer = function Footer(props) {
     maxColumnsPerRow: 5,
     theme: theme,
     columns: columns || getColumns(),
-    className: classnames(styles.footer, _defineProperty({}, styles.withMenu, isDynamicFooter)),
+    className: classnames(styles.footer, className, _defineProperty({}, styles.withMenu, isDynamicFooter)),
     bottom: bottom || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: styles.bottom
     }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {

package/dist/slots/Footer/index.module.less

@@ -2,6 +2,7 @@
 @import '../_.less';
 
 .footer {
+  width: 100%;
   font-family: Avenir, @font-family;
 
   :global(.rc-footer-container),

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

@@ -1,11 +1,19 @@
 import React from 'react';
+declare type dropdownItem = {
+    label: {
+        [key: string]: string;
+    };
+    key: string;
+};
 export declare type INav = {
-    slug: string;
+    slug?: string;
     order: number;
     title: {
         [key: string]: string;
     };
     target?: '_blank';
+    notPage?: boolean;
+    dropdownItems?: dropdownItem[];
 };
 export declare type NavProps = {
     navs: INav[];
@@ -15,3 +23,4 @@ export declare type NavProps = {
  * Header 中的导航菜单
  */
 export declare const Navs: React.FC<NavProps>;
+export {};

package/dist/slots/Header/Navs.js

@@ -3,42 +3,59 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from 'react';
 import cx from 'classnames';
 import { isEqual } from 'lodash-es';
-import { LinkOutlined } from '@ant-design/icons';
 import { Link, useLocale } from 'dumi';
+import { Dropdown, Menu } from 'antd';
+import { DownOutlined, LinkOutlined } from '@ant-design/icons';
 import styles from "./index.module.less";
 
-var getDocument = function getDocument(navs) {
-  var slug = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return navs.find(function (doc) {
-    return doc.slug === slug;
-  }) || {
-    title: {}
-  };
-};
 /**
  * Header 中的导航菜单
  */
-
-
 export var Navs = function Navs(_ref) {
   var navs = _ref.navs,
       path = _ref.path;
   var locale = useLocale();
   return /*#__PURE__*/React.createElement(React.Fragment, null, navs.map(function (nav) {
-    var href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
-    var title = getDocument(navs, nav.slug).title[locale.id];
+    var title = nav.title[locale.id];
+    var href = '';
+    var className = '';
+
+    if (nav.slug) {
+      href = nav.slug.startsWith('http') ? nav.slug : "/".concat(nav.slug);
+
+      if (locale.id == 'en' && !href.startsWith('http')) {
+        href = "/en".concat(href);
+      } // 去除 docs  防止二次点击相同nav跳转出现04
 
-    if (window.location.pathname.includes('en')) {
-      href = "/en".concat(href);
+
+      href = href.replace('/docs/', '/');
+      className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
     }
 
-    var className = cx('header-menu-item-active', _defineProperty({}, styles.activeItem, path.startsWith(href) || isEqual(path.split('/').slice(0, 4), href.split('/').slice(0, 4))));
-    return /*#__PURE__*/React.createElement("li", {
+    return nav.notPage ? /*#__PURE__*/React.createElement("li", {
+      key: title,
+      className: className
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      className: styles.ecoSystems,
+      placement: "bottom",
+      overlay: /*#__PURE__*/React.createElement(Menu, null, nav.dropdownItems.map(function (_ref2) {
+        var label = _ref2.label,
+            key = _ref2.key;
+        return /*#__PURE__*/React.createElement(Menu.Item, {
+          key: key
+        }, /*#__PURE__*/React.createElement("a", {
+          target: "_blank",
+          rel: "noreferrer",
+          href: key
+        }, label[locale.id], " ", /*#__PURE__*/React.createElement(LinkOutlined, null)));
+      }))
+    }, /*#__PURE__*/React.createElement("span", null, title, /*#__PURE__*/React.createElement(DownOutlined, null)))) : /*#__PURE__*/React.createElement("li", {
       key: title,
       className: className
     }, nav.target === '_blank' || href.startsWith('http') ? /*#__PURE__*/React.createElement("a", {
       href: href,
-      target: "_blank"
+      target: "_blank",
+      rel: "noreferrer"
     }, title, /*#__PURE__*/React.createElement(LinkOutlined, null)) : /*#__PURE__*/React.createElement(Link, {
       to: href
     }, title));

package/dist/slots/Header/index.js

@@ -22,7 +22,7 @@ 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 { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LinkOutlined, CheckOutlined } from '@ant-design/icons';
 import { Popover, Menu, Dropdown, Select } from 'antd';
 import { map, size } from 'lodash-es';
 import { Search } from "./Search";
@@ -173,12 +173,12 @@ var HeaderComponent = function HeaderComponent(_ref) {
     className: cx(styles.menu, (_cx = {}, _defineProperty(_cx, styles.popup, !isWide), _defineProperty(_cx, styles.popupHidden, !popupMenuVisible), _cx))
   },
   /** 最左侧的菜单，一般是 教程、API、示例，或者其他自定义，有配置文件中的 `navs` 决定 */
-  size(navs) && /*#__PURE__*/React.createElement(Navs, {
+  size(navs) ? /*#__PURE__*/React.createElement(Navs, {
     navs: navs,
     path: window.location.pathname
-  }),
+  }) : null,
   /** 生态产品 */
-  size(ecosystems) && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Dropdown, {
+  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,
@@ -189,13 +189,13 @@ var HeaderComponent = function HeaderComponent(_ref) {
         target: "_blank",
         rel: "noreferrer",
         href: url
-      }, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(LikeOutlined, null)));
+      }, ecosystemName === null || ecosystemName === void 0 ? void 0 : ecosystemName[lang], " ", /*#__PURE__*/React.createElement(LinkOutlined, null)));
     }))
   }, /*#__PURE__*/React.createElement("span", null, useT('周边生态'), /*#__PURE__*/React.createElement(DownOutlined, {
     style: {
       marginLeft: '6px'
     }
-  })))),
+  })))) : null,
   /** 产品列表 */
   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",
@@ -312,7 +312,8 @@ var HeaderComponent = function HeaderComponent(_ref) {
     className: styles.githubCorner
   }, /*#__PURE__*/React.createElement("a", {
     href: githubUrl,
-    target: "_blank"
+    target: "_blank",
+    rel: "noreferrer"
   }, /*#__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))

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

@@ -1,2 +1,7 @@
 import React from 'react';
-export declare const Loading: React.FC;
+/**
+ * Loading
+ */
+declare const Loading: React.FC;
+declare const PageLoading: React.FC;
+export { Loading, PageLoading };

package/dist/slots/Loading/index.js

@@ -1,17 +1,21 @@
 import React from 'react';
-export var Loading = function Loading() {
+import styles from "./index.module.less";
+/**
+ * Loading
+ */
+
+var Loading = function Loading() {
   return /*#__PURE__*/React.createElement("div", {
-    style: {
-      height: '100vh'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative',
-      height: '100%'
+      height: '100%',
+      width: '100%'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: "code-loading"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: styles.loading
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/React.createElement("div", {
     className: "loader"
   }, /*#__PURE__*/React.createElement("svg", {
     viewBox: "0 0 80 80"
@@ -61,5 +65,15 @@ export var Loading = function Loading() {
     stroke: "url(#gradient)"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "loading-text"
-  }, /*#__PURE__*/React.createElement("p", null, "Loading..."))))));
-};
+  }, /*#__PURE__*/React.createElement("p", null, "Loading...")))));
+};
+
+var PageLoading = function PageLoading() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100vh'
+    }
+  }, /*#__PURE__*/React.createElement(Loading, null));
+};
+
+export { Loading, PageLoading };

package/dist/slots/Loading/index.module.less

@@ -1,12 +1,279 @@
-@import '~antd/es/style/themes/default.less';
+.loading {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
 
-.container {
-  padding: 30vh 0 0;
-  text-align: center;
+  :global {
+    .container {
+      display: inline-block;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: -50px 0 0 -120px;
+    }
+    .loader {
+      --duration: 3s;
+      width: 44px;
+      height: 44px;
+      position: relative;
+      display: inline-block;
+      margin: 0 16px;
+    }
+  
+    .loader:before {
+      content: ' ';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      position: absolute;
+      display: block;
+      background: #ff700a;
+      top: 37px;
+      left: 19px;
+      -webkit-transform: translate(-18px, -18px);
+      transform: translate(-18px, -18px);
+      -webkit-animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+      animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+    }
+  
+    .loader svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  
+    .loader svg rect,
+    .loader svg polygon,
+    .loader svg circle {
+      fill: none;
+      stroke-width: 10px;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+    }
+  
+    .loader svg polygon {
+      stroke-dasharray: 145 76 145 76;
+      stroke-dashoffset: 0;
+      -webkit-animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+      animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+    }
+  
+    .loader svg rect {
+      stroke-dasharray: 192 64 192 64;
+      stroke-dashoffset: 0;
+      -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+      animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+    }
+  
+    .loader svg circle {
+      stroke-dasharray: 150 50 150 50;
+      stroke-dashoffset: 75;
+      -webkit-animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+      animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+    }
+  
+    .loader.triangle {
+      width: 48px;
+    }
+  
+    .loader.triangle:before {
+      left: 21px;
+      -webkit-transform: translate(-10px, -18px);
+      transform: translate(-10px, -18px);
+      -webkit-animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+      animation: dotTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+    }
+  
+    .loading-text {
+      text-align: center;
+      height: 40px;
+      line-height: 40px;
+      font-size: 12px;
+      letter-spacing: 0.1em;
+      color: #666;
+    }
+  }
+}
+
+@-webkit-keyframes ~":global(pathTriangle)" {
+  33% {
+    stroke-dashoffset: 74;
+  }
+
+  66% {
+    stroke-dashoffset: 147;
+  }
+
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@keyframes ~":global(pathTriangle)" {
+  33% {
+    stroke-dashoffset: 74;
+  }
+
+  66% {
+    stroke-dashoffset: 147;
+  }
+
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@-webkit-keyframes ~":global(dotTriangle)" {
+  33% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  66% {
+    -webkit-transform: translate(10px, -18px);
+    transform: translate(10px, -18px);
+  }
+
+  100% {
+    -webkit-transform: translate(-10px, -18px);
+    transform: translate(-10px, -18px);
+  }
+}
+
+@keyframes ~":global(dotTriangle)" {
+  33% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  66% {
+    -webkit-transform: translate(10px, -18px);
+    transform: translate(10px, -18px);
+  }
+
+  100% {
+    -webkit-transform: translate(-10px, -18px);
+    transform: translate(-10px, -18px);
+  }
+}
+
+@-webkit-keyframes ~":global(pathRect)" {
+  25% {
+    stroke-dashoffset: 64;
+  }
+
+  50% {
+    stroke-dashoffset: 128;
+  }
+
+  75% {
+    stroke-dashoffset: 192;
+  }
+
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+
+@keyframes ~":global(pathRect)" {
+  25% {
+    stroke-dashoffset: 64;
+  }
+
+  50% {
+    stroke-dashoffset: 128;
+  }
+
+  75% {
+    stroke-dashoffset: 192;
+  }
+
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+
+@-webkit-keyframes ~":global(dotRect)" {
+  25% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  50% {
+    -webkit-transform: translate(18px, -18px);
+    transform: translate(18px, -18px);
+  }
+
+  75% {
+    -webkit-transform: translate(0, -36px);
+    transform: translate(0, -36px);
+  }
+
+  100% {
+    -webkit-transform: translate(-18px, -18px);
+    transform: translate(-18px, -18px);
+  }
+}
+
+@keyframes ~":global(dotRect)" {
+  25% {
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+
+  50% {
+    -webkit-transform: translate(18px, -18px);
+    transform: translate(18px, -18px);
+  }
+
+  75% {
+    -webkit-transform: translate(0, -36px);
+    transform: translate(0, -36px);
+  }
+
+  100% {
+    -webkit-transform: translate(-18px, -18px);
+    transform: translate(-18px, -18px);
+  }
+}
+
+@-webkit-keyframes ~":global(pathCircle)" {
+  25% {
+    stroke-dashoffset: 125;
+  }
+
+  50% {
+    stroke-dashoffset: 175;
+  }
+
+  75% {
+    stroke-dashoffset: 225;
+  }
+
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
+
+@keyframes ~":global(pathCircle)" {
+  25% {
+    stroke-dashoffset: 125;
+  }
+
+  50% {
+    stroke-dashoffset: 175;
+  }
+
+  75% {
+    stroke-dashoffset: 225;
+  }
 
-  .loading {
-    font-size: 36px;
-    color: @primary-color;
-    text-align: center;
+  100% {
+    stroke-dashoffset: 275;
   }
-}
+}