@antv/dumi-theme-antv 0.6.4-alpha.0 → 0.6.4-alpha.3

package/dist/common/{SEO.js → CommonHelmet.js}

@@ -5,8 +5,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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; }
 import { Helmet, useLocale, useRouteMeta, useSiteData } from 'dumi';
-import React from 'react';
-var SEO = function SEO(_ref) {
+import React, { useLayoutEffect } from 'react';
+var CommonHelmet = function CommonHelmet(_ref) {
   var titleSuffix = _ref.titleSuffix,
     propTitle = _ref.title,
     propDescription = _ref.description,
@@ -21,6 +21,7 @@ var SEO = function SEO(_ref) {
     defaultDescription = themeConfig.defaultDescription;
   var title = propTitle || meta.frontmatter.title;
   var description = propDescription || meta.frontmatter.description || defaultDescription;
+  var fullTitle = "".concat(title, " | ").concat(titleSuffix || defaultTitle);
   var defaultMeta = [{
     name: "description",
     content: description
@@ -51,13 +52,16 @@ var SEO = function SEO(_ref) {
     property: "twitter:image",
     content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
   }];
+  useLayoutEffect(function () {
+    // 直接设置 document.title 作为备份机制
+    document.title = fullTitle;
+  }, [fullTitle]);
   return /*#__PURE__*/React.createElement(Helmet, {
     htmlAttributes: {
       lang: lang
     },
-    titleTemplate: "%s | ".concat(titleSuffix || defaultTitle),
-    title: title,
+    title: fullTitle,
     meta: [].concat(defaultMeta, _toConsumableArray(propMeta))
   });
 };
-export default SEO;
+export default CommonHelmet;

package/dist/common/InViewSuspense.js

@@ -1,3 +1,6 @@
+/**
+ * 只在组件进入视口（可见区域）时才会加载和渲染被包裹的懒加载组件
+ */
 import { Skeleton } from 'antd';
 import React, { Suspense } from 'react';
 import { InView } from 'react-intersection-observer';

package/dist/hooks/useLocale.js

@@ -1,4 +1,7 @@
 import { useLocale as useDumiLocale } from 'dumi';
+/**
+ * 获取国际化
+ */
 var useLocale = function useLocale(localeMap) {
   var _useDumiLocale = useDumiLocale(),
     id = _useDumiLocale.id;

package/dist/hooks/useMenu.js

@@ -1,4 +1,8 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 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; }
@@ -9,13 +13,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { useFullSidebarData, useLocale, useLocation, useNavigate, useSiteData } from 'dumi';
 import { get } from 'lodash-es';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import Link from "../common/Link";
 import styles from "../slots/ManualContent/index.module.less";
 import { getBaseRoute } from "../slots/ManualContent/utils";
 import { flattenMenu } from "../utils/menu";
 export var useMenu = function useMenu() {
-  var _navOf;
   var fullData = useFullSidebarData();
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
@@ -109,28 +112,37 @@ export var useMenu = function useMenu() {
   var flattedMenuData = useMemo(function () {
     return flattenMenu(menuData);
   }, [menuData]);
-  var selectedKey = pathname;
 
-  // Nav 跳转但不在菜单中，则选中第一个菜单项
-  var navOf = function navOf(navs) {
-    return navs.some(function (nav) {
-      var _nav$slug;
-      return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
-    });
-  };
-  var isNavLink = !!navOf(navs);
-  var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
-  var isLinkInMenu = flattedMenuData.some(function (item) {
-    return item.link === pathname;
-  });
-  if (isNavLink && !isExactLink && !isLinkInMenu) {
-    var firstValidMenuItem = flattedMenuData.find(function (item) {
-      return item.link;
+  // 添加本地状态来存储选中的key
+  var _useState = useState(pathname),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedKey = _useState2[0],
+    setSelectedKey = _useState2[1];
+  useEffect(function () {
+    var _navOf;
+    // Nav 跳转但不在菜单中，则选中第一个菜单项
+    var navOf = function navOf(navs) {
+      return navs.some(function (nav) {
+        var _nav$slug;
+        return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
+      });
+    };
+    var isNavLink = !!navOf(navs);
+    var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
+    var isLinkInMenu = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.some(function (item) {
+      return item.link === pathname;
     });
-    if (firstValidMenuItem) {
-      navigate(firstValidMenuItem.link);
-      selectedKey = firstValidMenuItem.link;
+    if (isNavLink && !isExactLink && !isLinkInMenu) {
+      var firstValidMenuItem = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.find(function (item) {
+        return item.link;
+      });
+      if (firstValidMenuItem) {
+        navigate(firstValidMenuItem.link);
+        setSelectedKey(firstValidMenuItem.link);
+      }
+    } else {
+      setSelectedKey(pathname);
     }
-  }
+  }, [pathname, flattedMenuData, navs, navigate]);
   return [menuData, selectedKey, flattedMenuData];
 };

package/dist/layouts/ManualLayout/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import SEO from "../../common/SEO";
 import Footer from "dumi/theme/slots/Footer";
 import Header from "dumi/theme/slots/Header";
 import { ManualContent } from "dumi/theme/slots/ManualContent";
@@ -9,7 +8,7 @@ import { ManualContent } from "dumi/theme/slots/ManualContent";
  */
 var ManualLayout = function ManualLayout(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, null), /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(ManualContent, null, children), /*#__PURE__*/React.createElement(Footer, {
     isDynamicFooter: true

package/dist/pages/404.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import SEO from "../common/SEO";
+import CommonHelmet from "../common/CommonHelmet";
 import { NotFound as NotFoundPage } from "dumi/theme/slots/404";
 import Footer from "dumi/theme/slots/Footer";
 import Header from "dumi/theme/slots/Header";
@@ -8,7 +8,7 @@ import Header from "dumi/theme/slots/Header";
  * 404 页面
  */
 var NotFound = function NotFound() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
     title: "404: Not found"
   }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false

package/dist/pages/Example/index.js

@@ -4,8 +4,8 @@ import { every, find, get } from 'lodash-es';
 import React, { useContext } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useSnapshot } from 'valtio';
+import CommonHelmet from "../../common/CommonHelmet";
 import InViewSuspense from "../../common/InViewSuspense";
-import SEO from "../../common/SEO";
 import { ThemeAntVContext } from "../../context";
 import { store } from "../../model";
 import { API } from "dumi/theme/slots/API";
@@ -25,6 +25,7 @@ var ExampleSider = /*#__PURE__*/React.lazy(function () {
  * 解析 Example 页面的元数据
  */
 var useExampleMeta = function useExampleMeta() {
+  var _exampleTopics$find;
   /** 示例页面的元数据信息 */
   var metaData = useContext(ThemeAntVContext);
   var exampleTopics = metaData.meta.exampleTopics;
@@ -33,9 +34,12 @@ var useExampleMeta = function useExampleMeta() {
     example = _useParams.example;
   var _useLocation = useLocation(),
     hash = _useLocation.hash;
-  var examples = get(exampleTopics, ['0', 'examples']);
-  var exampleDemo = find(examples, function (_ref) {
+  var examples = (_exampleTopics$find = exampleTopics.find(function (_ref) {
     var id = _ref.id;
+    return id === topic;
+  })) === null || _exampleTopics$find === void 0 ? void 0 : _exampleTopics$find.examples;
+  var exampleDemo = find(examples, function (_ref2) {
+    var id = _ref2.id;
     return id === example;
   });
   // examples/case/id hash 为空，可以默认第一个 example 对应的 demo
@@ -85,8 +89,8 @@ var Example = function Example() {
   }
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
-  }, /*#__PURE__*/React.createElement(SEO, {
-    title: exampleTitle,
+  }, /*#__PURE__*/React.createElement(CommonHelmet, {
+    title: "".concat(demoTitle, "\xB7").concat(exampleTitle),
     description: demoTitle
   }), /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false

package/dist/pages/Examples/index.js

@@ -9,7 +9,7 @@ import { Layout as AntLayout, BackTop } from 'antd';
 import React, { lazy, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import InViewSuspense from "../../common/InViewSuspense";
-import SEO from "../../common/SEO";
+import CommonHelmet from "../../common/CommonHelmet";
 import { ThemeAntVContext } from "../../context";
 import useLocale from "../../hooks/useLocale";
 import Footer from "dumi/theme/slots/Footer";
@@ -49,7 +49,7 @@ var Examples = function Examples() {
       nav(p.replace('/zh/', '/'));
     }
   }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
     title: locale.title
   }), /*#__PURE__*/React.createElement(Header, {
     isHomePage: false

package/dist/pages/Index/index.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { useIntl, useSiteData } from 'dumi';
 import { get, isArray, size } from 'lodash-es';
 import React from 'react';
-import SEO from "../../common/SEO";
+import CommonHelmet from "../../common/CommonHelmet";
 import { ic } from "../../slots/hooks";
 import { Cases } from "./components/Cases";
 import { Companies } from "./components/Companies";
@@ -47,7 +47,7 @@ var Index = function Index() {
     style: style,
     className: className
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
     title: ic(title),
     titleSuffix: "AntV"
   }), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {

package/dist/slots/ManualContent/Main.js

@@ -1,9 +1,10 @@
 import { VerticalAlignTopOutlined } from '@ant-design/icons';
 import { BackTop, Layout } from 'antd';
 import { useRouteMeta } from 'dumi';
-import React, { lazy, Suspense } from 'react';
+import React, { lazy } from 'react';
 import { useMedia } from 'react-use';
 import readingTime from 'reading-time';
+import ClientOnly from "../../common/ClientOnly";
 import InViewSuspense from "../../common/InViewSuspense";
 import { ContentTable } from "dumi/theme/slots/ContentTable";
 import { Feedback } from "dumi/theme/slots/Feedback";
@@ -26,9 +27,7 @@ export var Main = function Main(_ref) {
     time = _readingTime.time;
   var is991Wide = useMedia('(min-width: 991.99px)', true);
   var showToc = is991Wide && meta.frontmatter.showToc !== false;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(ObPreview, null)), /*#__PURE__*/React.createElement(Layout.Content, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClientOnly, null, /*#__PURE__*/React.createElement(ObPreview, null)), /*#__PURE__*/React.createElement(Layout.Content, {
     className: styles.content
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.main

package/dist/slots/ManualContent/index.js

@@ -1,5 +1,6 @@
 import { Layout } from 'antd';
 import React from 'react';
+import CommonHelmet from "../../common/CommonHelmet";
 import styles from "./index.module.less";
 import { Main } from "./Main";
 import { Sidebar } from "./Sidebar";
@@ -8,5 +9,5 @@ export var ManualContent = function ManualContent(_ref) {
   return /*#__PURE__*/React.createElement(Layout, {
     hasSider: true,
     className: styles.layout
-  }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Main, null, children));
+  }, /*#__PURE__*/React.createElement(CommonHelmet, null), /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Main, null, children));
 };

package/dist/slots/ManualContent/usePreview.js

@@ -38,7 +38,6 @@ function blockOf() {
 export function usePreview() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var select = arguments.length > 1 ? arguments[1] : undefined;
-  if (typeof document === 'undefined') return;
   var key = select + ',' + blockOf().length;
   useEffect(function () {
     var blocks = blockOf();

package/dist/utils/location.js

@@ -1,3 +1,6 @@
+/**
+ * 统一去掉中英文前缀
+ */
 export function getPurePathname(pathname) {
   return pathname.replace('/zh', '').replace('/en', '');
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/dumi-theme-antv",
-  "version": "0.6.4-alpha.0",
+  "version": "0.6.4-alpha.3",
   "description": "AntV website theme based on dumi2.",
   "keywords": [
     "dumi",
@@ -110,7 +110,7 @@
     "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.34",
     "@umijs/lint": "^4.3.34",
-    "dumi": "2.4.13",
+    "dumi": "^2.4.13",
     "eslint": "^8.57.1",
     "father": "^4.5.1",
     "father-plugin-dumi-theme": "1.0.0-rc.1",

package/dist/pages/Example/components/ExampleSider/index.js

@@ -1,190 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { createFromIconfontCN, SearchOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
-import { Input, Menu, Tooltip } from 'antd';
-import classNames from 'classnames';
-import { FormattedMessage, useIntl, useLocale } from 'dumi';
-import { cloneDeep } from 'lodash-es';
-import React, { useEffect, useRef, useState } from 'react';
-import styles from "./index.module.less";
-
-// menu icon
-var MenuIcon = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
-});
-/**
- * DEMO 预览页面的菜单
- */
-var ExampleSider = function ExampleSider(props) {
-  var currentDemo = props.currentDemo,
-    onDemoClicked = props.onDemoClicked,
-    exampleTopics = props.exampleTopics;
-  // 菜单栏展开keys
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    openKeys = _useState2[0],
-    setOpenKeys = _useState2[1];
-  var menuRef = useRef(null);
-
-  // 初始化点击进来的示例按钮a的dom
-  var _useState3 = useState(),
-    _useState4 = _slicedToArray(_useState3, 2),
-    aRef = _useState4[0],
-    setARef = _useState4[1];
-
-  // input 搜索框的value
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    searchValue = _useState6[0],
-    setSearchValue = _useState6[1];
-  var locale = useLocale();
-  var intl = useIntl();
-  var getCurrentTopics = function getCurrentTopics() {
-    var res = filterTreeNode({
-      id: 'FAKE_ID',
-      childrenKey: 'exampleTopics',
-      title: {
-        zh: 'FAKE_TITLE',
-        en: 'FAKE_TITLE'
-      },
-      exampleTopics: cloneDeep(exampleTopics)
-    }, searchValue, locale.id);
-    return (res === null || res === void 0 ? void 0 : res.exampleTopics) || [];
-  };
-
-  // 初始化菜单栏展开keys
-  useEffect(function () {
-    var targetExample = currentDemo.targetExample,
-      targetTopic = currentDemo.targetTopic;
-    var keys = ["TOPIC-".concat(targetTopic === null || targetTopic === void 0 ? void 0 : targetTopic.id), "EXAMPLE-".concat(targetTopic.id, "-").concat(targetExample === null || targetExample === void 0 ? void 0 : targetExample.id)];
-    setOpenKeys(keys);
-  }, [currentDemo]);
-
-  // 初始化滚动到中间
-  useEffect(function () {
-    if (aRef) {
-      aRef.scrollIntoView({
-        block: 'center',
-        behavior: 'smooth'
-      });
-    }
-  }, [aRef]);
-
-  // 获取搜索后的文本结构 左文本 + 搜索文本 + 右文本
-  var getSearchValueTitle = function getSearchValueTitle(title) {
-    return searchValue && title.match(searchValue) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, title.replace(new RegExp("".concat(searchValue, ".*")), '')), /*#__PURE__*/React.createElement("span", {
-      className: styles.searchValue
-    }, searchValue), /*#__PURE__*/React.createElement("span", null, title.replace(new RegExp(".*?".concat(searchValue)), ''))) : title;
-  };
-
-  // 图例按钮 + img + tooltip文本
-  var renderExampleDemoCard = function renderExampleDemoCard(demo) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
-      placement: "right",
-      title: getSearchValueTitle(demo.title[locale.id] || ''),
-      key: demo.id
-    }, /*#__PURE__*/React.createElement("a", {
-      ref: function ref(dom) {
-        // TODO: DEAL WITH ME
-        // if (dom && !aRef && item.value === getPath(currentExample)) {
-        //   setARef(dom);
-        // }
-      },
-      className: classNames(styles.card, _defineProperty({}, styles.current, currentDemo.id === demo.id))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles.screenshot),
-      style: {
-        backgroundImage: "url(".concat(demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png', ")")
-      },
-      title: demo.title[locale.id]
-    })));
-  };
-  var renderSubMenu = function renderSubMenu() {
-    return getCurrentTopics().map(function (topic) {
-      return /*#__PURE__*/React.createElement(Menu.SubMenu, {
-        key: "TOPIC-".concat(topic.id),
-        title: /*#__PURE__*/React.createElement("div", null, topic.icon && /*#__PURE__*/React.createElement(MenuIcon, {
-          className: styles.menuIcon,
-          type: "icon-".concat(topic.icon)
-        }), /*#__PURE__*/React.createElement("span", {
-          className: classNames(styles.menuTitleContent, styles.subMenuTitleContent)
-        }, topic.title && getSearchValueTitle(topic.title[locale.id])))
-      }, topic.examples.map(function (example) {
-        return /*#__PURE__*/React.createElement(Menu.SubMenu, {
-          key: "EXAMPLE-".concat(topic.id, "-").concat(example.id),
-          title: example.title[locale.id]
-        }, example.demos.map(function (demo) {
-          return /*#__PURE__*/React.createElement(Menu.Item, {
-            key: "DEMO-".concat(topic.id, "-").concat(example.id, "-").concat(demo.id),
-            style: {
-              height: 70,
-              padding: 0,
-              cursor: 'pointer'
-            },
-            onClick: function onClick() {
-              onDemoClicked(_objectSpread(_objectSpread({}, demo), {}, {
-                targetExample: example,
-                targetTopic: topic
-              }));
-            }
-          }, /*#__PURE__*/React.createElement("span", {
-            className: styles.menuTitleContent
-          }, renderExampleDemoCard(demo)));
-        }));
-      }));
-    });
-  };
-
-  // 搜索栏
-  var renderSearchBar = function renderSearchBar() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.searchSider
-    }, /*#__PURE__*/React.createElement(Input, {
-      size: "small",
-      placeholder: intl.formatMessage({
-        id: '搜索…'
-      }),
-      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
-      value: searchValue,
-      onChange: function onChange(e) {
-        return setSearchValue(e.target.value);
-      }
-    }), /*#__PURE__*/React.createElement(Tooltip, {
-      placement: "right",
-      title: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "\u6536\u8D77\u6240\u6709"
-      })
-    }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, {
-      className: styles.searchSiderIcon,
-      onClick: function onClick() {
-        return setOpenKeys([]);
-      }
-    })));
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.shadowWrapper)
-  }, renderSearchBar(), /*#__PURE__*/React.createElement(Menu, {
-    ref: menuRef,
-    mode: "inline",
-    style: {
-      width: '100%'
-    },
-    className: styles.sideBarMenu,
-    openKeys: openKeys,
-    selectedKeys: ["DEMO-".concat(currentDemo.id)],
-    onOpenChange: function onOpenChange(keys) {
-      setOpenKeys(keys);
-    }
-  }, renderSubMenu()));
-};
-export default ExampleSider;