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

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

@@ -0,0 +1,382 @@
+@import '../_.less';
+
+@nav-height: 64px;
+
+.header {
+  background: #fff;
+  box-shadow: 0 2px 8px #f0f1f2;
+  padding: 0;
+  position: relative;
+  z-index: 200;
+  font-family: Avenir, @font-family;
+  transition: box-shadow 0.3s, background 0.3s;
+
+  &.transparent {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  &.fixed {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #fff;
+  }
+
+  .container {
+    max-width: calc(100% - 80px);
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: @nav-height;
+    line-height: @nav-height;
+  }
+
+  &.isHomePage {
+    margin-bottom: -@nav-height;
+
+    .container {
+      .container1440;
+    }
+  }
+
+  &.lightTheme {
+    margin-bottom: -@nav-height;
+
+    nav {
+
+      a,
+      span,
+      .versions {
+        color: rgba(255, 255, 255, 0.8) !important;
+
+        &:hover {
+          color: rgba(255, 255, 255, 1) !important;
+        }
+      }
+
+      .translation {
+        fill: rgba(255, 255, 255, 0.8) !important;
+
+        &:hover {
+          fill: rgba(255, 255, 255, 1) !important;
+        }
+      }
+    }
+  }
+
+  .left {
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    h1 {
+      margin: 0;
+      height: 100%;
+
+      a {
+        display: block;
+        height: 100%;
+
+        svg {
+          display: inline-block;
+          vertical-align: middle;
+          position: relative;
+          top: -1.5px;
+        }
+
+        img {
+          height: 30px;
+          position: relative;
+          top: -1.5px;
+        }
+      }
+    }
+
+    .divider {
+      width: 1px;
+      height: 24px;
+      background-color: #ccc;
+      display: inline-block;
+      margin: 0 20px;
+      transition: all 0.3s;
+    }
+
+    .subProduceName {
+      margin: 0;
+      white-space: nowrap;
+      font-size: 18px;
+
+      a {
+        color: rgba(0, 0, 0, 0.85);
+        transition: all 0.3s;
+
+        &:hover {
+          color: rgba(0, 0, 0, 1);
+        }
+      }
+    }
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    .menu {
+      font-weight: normal;
+      color: #697b8c;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      white-space: nowrap;
+
+      li {
+        display: inline-block;
+        margin-right: 28px;
+        transition: box-shadow 0.3s;
+        box-shadow: 0 2px 0 transparent inset;
+
+        &.activeItem {
+          box-shadow: 0 2px 0 @primary-color inset;
+
+          a {
+            color: @primary-color;
+          }
+        }
+
+        a {
+          color: #697b8c;
+          transition: all 0.3s;
+          display: block;
+
+          &:hover {
+            color: @primary-color;
+          }
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .ecoSystems {
+        cursor: pointer;
+        transition: all 0.3s;
+
+        svg {
+          opacity: 0.3;
+        }
+
+        &:hover {
+          & {
+            color: @primary-color;
+          }
+
+          svg {
+            color: #697b8c;
+            opacity: 0.5;
+          }
+        }
+      }
+
+      .githubCorner {
+        i {
+          font-size: 20px;
+          position: relative;
+          top: 2px;
+        }
+      }
+
+      .githubStar {
+        &::after {
+          display: block;
+          content: '';
+          clear: both;
+        }
+
+        >span {
+          float: left;
+          height: 28px;
+          transition: all 0.3s;
+        }
+      }
+
+      .translation {
+        fill: #697b8c;
+        width: 20px;
+        cursor: pointer;
+        display: inline-block;
+        vertical-align: middle;
+        position: relative;
+        top: -1px;
+
+        .translationIcon {
+          font-size: 20px;
+        }
+
+        &:hover {
+          fill: @primary-color;
+        }
+      }
+
+      .versions {
+        color: #697b8c;
+        margin-right: -16px;
+        transition: all 0.3s;
+
+        :global {
+          .ant-select-arrow {
+            transition: all 0.3s;
+            font-size: 10px;
+          }
+        }
+
+        &:hover {
+          color: @primary-color;
+
+          :global .ant-select-arrow {
+            color: rgba(0, 0, 0, 0.5);
+          }
+        }
+      }
+
+      .arrow {
+        width: 14px;
+        margin-left: 2px;
+        position: relative;
+        top: -2px;
+        transition: all 0.3s;
+
+        &.open {
+          transform: rotate(180deg);
+        }
+      }
+
+      &.popup {
+        position: fixed;
+        top: 64px;
+        left: 0;
+        right: 0;
+        background: #fff;
+        padding: 8px 0;
+        text-align: center;
+        transition: all 0.3s;
+        height: calc(100vh - 64px);
+        overflow: auto;
+        opacity: 1;
+
+        li {
+          display: block;
+          line-height: 64px;
+          margin-right: 0;
+          font-size: 16px;
+
+          &.activeItem {
+            box-shadow: none;
+            background: tint(@primary-color, 90%);
+
+            a {
+              color: @primary-color;
+            }
+          }
+
+          .productsMenu {
+            position: static !important;
+            text-align: left;
+            max-height: none;
+            height: 0;
+
+            // hide mask
+            +div {
+              display: none;
+            }
+          }
+        }
+
+        &.popupHidden {
+          height: 0;
+          opacity: 0;
+          overflow: hidden;
+          transition: all 0.3s;
+        }
+      }
+    }
+
+    .menuIcon {
+      font-size: 24px;
+      cursor: pointer;
+      color: #666;
+      padding: 0 8px;
+      transition: all 0.3s;
+
+      &:hover {
+        color: #222;
+      }
+    }
+  }
+}
+
+.remindHref {
+  margin: 0px 6px 0px 5px;
+}
+
+.modalContent {
+  padding: 16px;
+}
+
+@media only screen and (max-width: 1024px) {
+  .header {
+    .nav {
+      .menu {
+        li {
+          margin-right: 24px;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 931.99px) {
+  .header {
+    .nav {
+      .menu {
+        li {
+          margin-right: 16px;
+        }
+      }
+    }
+
+    .left {
+      .divider {
+        margin: 0 12px;
+      }
+
+      .subProduceName {
+        font-size: 16px;
+        margin-right: 8px;
+      }
+    }
+
+    .container {
+      max-width: calc(100% - 60px);
+    }
+  }
+}
+
+@media only screen and (max-width: 767.99px) {
+  .header {
+    .container {
+      max-width: calc(100% - 32px);
+    }
+
+    .menu {
+      opacity: 0;
+      height: 0;
+      overflow: hidden;
+      position: fixed;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export declare function getLangUrl(url: string, lang: string): string;

package/dist/slots/Header/utils.js

@@ -0,0 +1,26 @@
+import URI from 'uri-parse';
+/*
+ * parse url like this
+ *
+ * schema://username:password@host:port/path?key=value#fragment;key=value
+ * \____/   \______/ \______/ \__/ \__/ \__/ \_______/ \______/ \______/
+ *   |         |        |       |    |    |      |         |       |
+ * schema      |     password   |   port  |    query    fragment   |
+ *          username          host      path                     extension
+ *
+ * note:
+ *   - username, password, port, path, query, fragment, extension is optional.
+ *   - scheme, host must be setting.
+ *   - username and password must be paired.
+ */
+
+export function getLangUrl(url, lang) {
+  var uri = new URI(url);
+
+  if (uri.path.startsWith('en') || uri.path.startsWith('zh')) {
+    uri.path = uri.path.slice(3);
+  }
+
+  uri.path = lang === 'en' ? "en/".concat(uri.path) : uri.path;
+  return uri.toURI();
+}

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

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

package/dist/slots/Loading/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import styles from "./index.module.less";
+/**
+ * Loading
+ */
+
+var Loading = function Loading() {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative',
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__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"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: "gradient",
+    x1: ".004%",
+    x2: "100.131%",
+    y1: "49.993%",
+    y2: "49.993%"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: "#6500FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "16%",
+    stopColor: "#6A09FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "43%",
+    stopColor: "#7623FF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "77%",
+    stopColor: "#8A4CFF"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "99%",
+    stopColor: "#996BFF"
+  }))), /*#__PURE__*/React.createElement("circle", {
+    id: "test",
+    cx: "40",
+    cy: "40",
+    r: "32",
+    stroke: "url(#gradient)"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "loader triangle"
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 86 80"
+  }, /*#__PURE__*/React.createElement("polygon", {
+    points: "43 8 79 72 7 72",
+    stroke: "url(#gradient)"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "loader"
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 80 80"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "8",
+    y: "8",
+    width: "64",
+    height: "64",
+    stroke: "url(#gradient)"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "loading-text"
+  }, /*#__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 };