@antv/dumi-theme-antv 0.1.0

package/es/components/LocaleSelect.less

@@ -0,0 +1,59 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-locale-select {
+  position: relative;
+  display: inline-block;
+  border: 1px solid @c-btn-border;
+  border-radius: 14px;
+  transition: background 0.2s;
+
+  [data-prefers-color=dark] & {
+    border: 1px solid @c-btn-border-dark;
+  }
+
+  @media @mobile {
+    margin-top: 6px;
+  }
+
+  &:hover {
+    background-color: #fafafa;
+    [data-prefers-color=dark] & {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &:not([data-locale-count='1']):not([data-locale-count='2'])::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -3px;
+    width: 0;
+    height: 0;
+    border: 4px solid transparent;
+    border-top: 6px solid #7b7f8d;
+    pointer-events: none;
+  }
+
+  a,
+  span,
+  select {
+    padding: 0 24px 0 16px;
+    height: 28px;
+    text-align: center;
+    text-decoration: none;
+    line-height: 28px;
+    appearance: none;
+    border: 0;
+    font-size: 16px;
+    color: #7b7f8d;
+    background: transparent;
+    outline: none;
+    cursor: pointer;
+  }
+
+  a,
+  span {
+    padding-right: 16px;
+  }
+}

package/es/components/Navbar.js

@@ -0,0 +1,155 @@
+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; }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable jsx-a11y/control-has-associated-label */
+import { context, Link, NavLink } from 'dumi/theme';
+import React, { useContext } from 'react';
+import { useMedia } from 'react-use';
+import Logo from '../antv/Header/Logo';
+import Products from '../antv/Products';
+import LocaleSelect from './LocaleSelect';
+import './Navbar.less';
+
+var Navbar = function Navbar(_ref) {
+  var onMobileMenuClick = _ref.onMobileMenuClick,
+      navPrefix = _ref.navPrefix,
+      location = _ref.location;
+
+  var _useContext = useContext(context),
+      base = _useContext.base,
+      _useContext$config = _useContext.config,
+      mode = _useContext$config.mode,
+      title = _useContext$config.title,
+      logo = _useContext$config.logo,
+      navItems = _useContext.nav;
+
+  var isWide = useMedia('(min-width: 767.99px)', true);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      productMenuVisible = _React$useState2[0],
+      setProductMenuVisible = _React$useState2[1];
+
+  var productMenuHovering = false;
+
+  var onProductMouseEnter = function onProductMouseEnter(e) {
+    productMenuHovering = true;
+    e.persist();
+    setTimeout(function () {
+      // eslint-disable-next-line no-undef
+      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 productItemProps = isWide ? {
+    onMouseEnter: onProductMouseEnter,
+    onMouseLeave: onProductMouseLeave
+  } : {
+    onClick: onToggleProductMenuVisible
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-navbar",
+    "data-mode": mode
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "__dumi-default-navbar-toggle",
+    onClick: onMobileMenuClick
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-navbar-logo",
+    style: {
+      background: 'none',
+      height: '28px',
+      lineHeight: '28px',
+      paddingLeft: '0px'
+    }
+  }, /*#__PURE__*/React.createElement("a", {
+    href: 'https://antv.vision/'
+  }, /*#__PURE__*/React.createElement(Logo, {
+    style: {
+      height: '28px',
+      lineHeight: '28px'
+    }
+  })), /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '16px',
+      width: '1px',
+      height: '24px',
+      backgroundColor: '#ccc',
+      display: ' inline-block',
+      margin: '0 20px'
+    }
+  }), /*#__PURE__*/React.createElement(Link, {
+    to: base
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      fontSize: '16px',
+      color: '#0d1a26',
+      display: 'inline-block',
+      verticalAlign: 'top'
+    }
+  }, title))), /*#__PURE__*/React.createElement("nav", null, navPrefix, navItems.map(function (nav) {
+    var _nav$children;
+
+    var child = Boolean((_nav$children = nav.children) === null || _nav$children === void 0 ? void 0 : _nav$children.length) && /*#__PURE__*/React.createElement("ul", null, nav.children.map(function (item) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: item.path
+      }, /*#__PURE__*/React.createElement(NavLink, {
+        to: item.path
+      }, item.title));
+    }));
+    return /*#__PURE__*/React.createElement("span", {
+      key: nav.title || nav.path
+    }, nav.path ? /*#__PURE__*/React.createElement(NavLink, {
+      to: nav.path,
+      key: nav.path
+    }, nav.title) : nav.title, child);
+  }), /*#__PURE__*/React.createElement("span", productItemProps, "\u6240\u6709\u4EA7\u54C1", /*#__PURE__*/React.createElement("img", {
+    src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
+    alt: "antv logo arrow",
+    className: "arrow ".concat(productMenuVisible && 'open')
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'fixed',
+      top: ' 0px',
+      left: '0px',
+      width: ' 100%',
+      right: '0px'
+    }
+  }, /*#__PURE__*/React.createElement(Products, {
+    show: productMenuVisible,
+    rootDomain: "ant.vison",
+    language: "zh"
+  }))), /*#__PURE__*/React.createElement(LocaleSelect, {
+    location: location
+  })));
+};
+
+export default Navbar;

package/es/components/Navbar.less

@@ -0,0 +1,180 @@
+@import (reference) "../style/variables.less";
+
+.@{prefix}-navbar {
+  position: fixed;
+  z-index: 101;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 58px;
+  height: @s-nav-height;
+  white-space: nowrap;
+  background: #fff;
+  box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.05);
+
+  @media @mobile {
+    display: flex;
+    justify-content: center;
+    height: @s-mobile-nav-height;
+  }
+
+  &-toggle {
+    position: absolute;
+    top: 14px;
+    left: 16px;
+    display: none;
+    width: 22px;
+    height: 22px;
+    border: 0;
+    outline: none;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA4CAYAAAB5YT9uAAAAAXNSR0IArs4c6QAAASVJREFUeAHt3DuOwjAUBVAHscWZjaSkAIqU2QjskV80QwpsF3ArdGiw3hW3OGnQM2Iof6/dfr7+n71/LjAdx+HRsvm8SkNPAHBPJ5ABDiD2KgD3dAIZ4ABirwJwTyeQAQ4g9ioA93QC2fbZsSm/z7MDAQIECBAgQIAAAQIECBAgQIAAAQKvAsvV8mO8O8yn19jkXYHpMC7byXVdeS0/75b5XFvAwr1tE0kARxjbJYDbNpEEcISxXQK4bRNJAEcY2yWA2zaRZP0ePJRzpFEJAQIECBAgQIAAAQIECBAgQIAAgW8VWK/tj7Nb5eBTnvbjsp1c15WX4ncRQeB7lb8zyHrW29xo1F1iU8AxynoR4LpLbAo4RlkvAlx3iU0BxyjrRYDrLrHpDVSAEEPXScHTAAAAAElFTkSuQmCC")
+      no-repeat center / contain;
+
+    @media @mobile {
+      display: block;
+    }
+  }
+
+  &-logo {
+    display: inline-block;
+    height: 40px;
+    color: #080e29;
+    font-weight: 500;
+    text-decoration: none;
+    font-size: 24px;
+    line-height: 40px;
+
+    &:not([data-plaintext]) {
+      padding-left: 56px;
+      background: url(@img-logo) no-repeat 0 / contain;
+    }
+
+    &:active,
+    &:hover {
+      color: #080e29;
+    }
+
+    @media @mobile {
+      height: 28px;
+      line-height: 28px;
+
+      &:not([data-plaintext]) {
+        padding-left: 36px;
+      }
+    }
+  }
+
+  nav {
+    > span {
+      position: relative;
+      margin-left: 40px;
+      display: inline-block;
+      height: @s-nav-height;
+      cursor: pointer;
+      font-size: 14px;
+      line-height: @s-nav-height;
+      text-decoration: none;
+      letter-spacing: 0;
+
+      > a {
+        color: #4d5164;
+        text-decoration: none;
+
+        &:hover,
+        &.active {
+          color: @c-primary;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: -18px;
+          left: -18px;
+        }
+
+        &.active::after {
+          content: "";
+          position: absolute;
+          bottom: 0;
+          left: -2px;
+          right: -2px;
+          height: 2px;
+          background-color: @c-primary;
+          border-radius: 1px;
+        }
+      }
+
+      + *:not(a) {
+        margin-left: 40px;
+      }
+
+      // second nav
+      > ul {
+        list-style: none;
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        margin: 0;
+        min-width: 100px;
+        padding: 8px 18px;
+        line-height: 2;
+        background-color: #fff;
+        box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.08);
+        transform: translate(-50%);
+        transform-origin: top;
+        border-radius: 1px;
+        transition: all 0.2s;
+
+        a {
+          position: relative;
+          display: block;
+          color: @c-text;
+
+          &:hover,
+          &.active {
+            color: @c-primary;
+          }
+        }
+      }
+
+      &:not(:hover) > ul {
+        visibility: hidden;
+        pointer-events: none;
+        transform: translate(-50%) scaleY(0.9);
+        opacity: 0;
+      }
+    }
+
+    .@{prefix}-search + .@{prefix}-locale-select {
+      margin-left: 40px;
+    }
+
+    @media @mobile {
+      > a,
+      > span,
+      > div {
+        display: none;
+      }
+    }
+  }
+
+  &[data-mode="site"] {
+    display: flex;
+  }
+
+  .arrow {
+    width: 14px;
+    margin-left: 2px;
+    position: relative;
+    top: -2px;
+    transition: all 0.3s;
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+}

package/es/components/SearchBar.js

@@ -0,0 +1,83 @@
+function _extends() { _extends = Object.assign || 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); }
+
+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 React, { useState, useEffect, useRef } from 'react';
+import { useSearch, AnchorLink } from 'dumi/theme';
+import './SearchBar.less';
+export var highlight = function highlight(key, title) {
+  var index = title.toLowerCase().indexOf(key.toLowerCase());
+  var l = key.length;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title.substring(0, index), /*#__PURE__*/React.createElement("span", {
+    className: "__dumi-default-search-highlight"
+  }, title.substring(index, index + l)), title.substring(index + l, title.length));
+};
+export default (function () {
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      keywords = _useState2[0],
+      setKeywords = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var input = useRef();
+  var result = useSearch(keywords);
+  var emptySvg = /*#__PURE__*/React.createElement("svg", {
+    className: "__dumi-default-search-empty",
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "2347",
+    width: "32",
+    height: "32"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18zM673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4H673.4zM819.9 209.5c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4 0.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8zM375.4 261.1L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1 0.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4zM512 239.3h2.5c19.5 0.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1h2.5z"
+  }));
+  useEffect(function () {
+    if (Array.isArray(result)) {
+      setItems(result);
+    } else if (typeof result === 'function') {
+      result(".".concat(input.current.className));
+    }
+  }, [result]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "__dumi-default-search"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    className: "__dumi-default-search-input",
+    type: "search",
+    ref: input
+  }, Array.isArray(result) ? {
+    value: keywords,
+    onChange: function onChange(ev) {
+      return setKeywords(ev.target.value);
+    }
+  } : {})), /*#__PURE__*/React.createElement("ul", null, items.length > 0 && items.map(function (meta) {
+    var _meta$parent;
+
+    return /*#__PURE__*/React.createElement("li", {
+      key: meta.path,
+      onClick: function onClick() {
+        return setKeywords('');
+      }
+    }, /*#__PURE__*/React.createElement(AnchorLink, {
+      to: meta.path
+    }, ((_meta$parent = meta.parent) === null || _meta$parent === void 0 ? void 0 : _meta$parent.title) && /*#__PURE__*/React.createElement("span", null, meta.parent.title), highlight(keywords, meta.title)));
+  }), items.length === 0 && keywords && /*#__PURE__*/React.createElement("li", {
+    style: {
+      textAlign: 'center'
+    }
+  }, emptySvg)));
+});

package/es/components/SearchBar.less

@@ -0,0 +1,165 @@
+@import (reference) '../style/variables.less';
+
+.@{prefix}-search {
+  margin-left: 20px;
+  position: relative;
+  display: inline-block;
+
+  &-input {
+    width: 200px;
+    height: 32px;
+    padding: 0 38px 0 14px;
+    color: @c-heading;
+    font-size: 14px;
+    border: 0;
+    outline: none;
+    transition: all 0.2s;
+    border-radius: 16px;
+    background: url('data:image/png;base64,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')
+      #f5f6f7 no-repeat right 14px center / 16px;
+    appearance: none;
+
+    [data-prefers-color=dark] & {
+      color: @c-secondary-dark;
+      background: url('data:image/png;base64,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')
+      #ffffff1f no-repeat right 14px center / 16px;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 1px fade(@c-primary, 20%) inset;
+    }
+
+    &:not(:focus) + ul:not(:hover) {
+      visibility: hidden;
+    }
+  }
+
+  > ul {
+    list-style: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    margin: 8px 0 0;
+    min-width: 280px;
+    max-width: 400px;
+    max-height: 230px;
+    padding: 6px 0;
+    background-color: #fff;
+    border: 1px solid @c-border;
+    border-radius: 1px;
+    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.05);
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    [data-prefers-color=dark] & {
+      border: none;
+      background-color: @c-bg-dark;
+      box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    &:empty {
+      display: none;
+    }
+
+    li {
+      font-size: 15px;
+
+      a {
+        display: block;
+        padding: 6px 20px;
+        color: @c-secondary;
+        text-decoration: none;
+        line-height: 1.5715;
+        transition: background-color 0.3s;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        [data-prefers-color=dark] & {
+          color: @c-secondary-dark;
+        }
+
+        &:hover {
+          color: @c-primary;
+          background-color: @c-light-bg;
+
+          [data-prefers-color=dark] & {
+            color: @c-primary-dark;
+            background-color: @c-light-bg-dark;
+          }
+        }
+      }
+
+      span:first-child:not(.@{prefix}-search-highlight) {
+        position: relative;
+        display: inline-block;
+        max-width: 50%;
+        padding-right: 26px;
+        vertical-align: bottom;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        opacity: 0.8;
+
+        &::after {
+          content: '>';
+          position: absolute;
+          top: 50%;
+          right: 6px;
+          opacity: 0.6;
+          transform: translateY(-54%);
+        }
+      }
+    }
+  }
+
+  &-empty {
+    margin: 6px 0;
+    opacity: 0.6;
+    fill: @c-text;
+    [data-prefers-color=dark] & {
+      fill: @c-text-dark;
+    }
+  }
+
+  &-highlight {
+    padding: 2px 0;
+    color: #736b2d;
+    vertical-align: bottom;
+    background: #fff9cb;
+
+    [data-prefers-color=dark] & {
+      color: @c-text;
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    margin-right: -14px;
+
+    > input:not(:focus) {
+      color: transparent;
+      width: 32px;
+      padding-right: 0;
+      box-shadow: none;
+      cursor: pointer;
+      background-position: right 8px center;
+
+      + ul {
+        transition: 0.1s visibility;
+        visibility: hidden;
+      }
+    }
+  }
+
+  @media @mobile {
+    position: absolute;
+    top: 9px;
+    right: 24px;
+    display: block !important;
+
+    > ul {
+      right: 0;
+      left: auto;
+    }
+  }
+}