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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,8 +5,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
5
5
  function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
6
6
  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; }
7
7
  import { Helmet, useLocale, useRouteMeta, useSiteData } from 'dumi';
8
- import React from 'react';
9
- var SEO = function SEO(_ref) {
8
+ import React, { useLayoutEffect } from 'react';
9
+ var CommonHelmet = function CommonHelmet(_ref) {
10
10
  var titleSuffix = _ref.titleSuffix,
11
11
  propTitle = _ref.title,
12
12
  propDescription = _ref.description,
@@ -21,6 +21,7 @@ var SEO = function SEO(_ref) {
21
21
  defaultDescription = themeConfig.defaultDescription;
22
22
  var title = propTitle || meta.frontmatter.title;
23
23
  var description = propDescription || meta.frontmatter.description || defaultDescription;
24
+ var fullTitle = "".concat(title, " | ").concat(titleSuffix || defaultTitle);
24
25
  var defaultMeta = [{
25
26
  name: "description",
26
27
  content: description
@@ -51,13 +52,16 @@ var SEO = function SEO(_ref) {
51
52
  property: "twitter:image",
52
53
  content: 'https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png'
53
54
  }];
55
+ useLayoutEffect(function () {
56
+ // 直接设置 document.title 作为备份机制
57
+ document.title = fullTitle;
58
+ }, [fullTitle]);
54
59
  return /*#__PURE__*/React.createElement(Helmet, {
55
60
  htmlAttributes: {
56
61
  lang: lang
57
62
  },
58
- titleTemplate: "%s | ".concat(titleSuffix || defaultTitle),
59
- title: title,
63
+ title: fullTitle,
60
64
  meta: [].concat(defaultMeta, _toConsumableArray(propMeta))
61
65
  });
62
66
  };
63
- export default SEO;
67
+ export default CommonHelmet;
@@ -1,3 +1,6 @@
1
+ /**
2
+ * 只在组件进入视口(可见区域)时才会加载和渲染被包裹的懒加载组件
3
+ */
1
4
  import { Skeleton } from 'antd';
2
5
  import React, { Suspense } from 'react';
3
6
  import { InView } from 'react-intersection-observer';
@@ -1,4 +1,7 @@
1
1
  import { useLocale as useDumiLocale } from 'dumi';
2
+ /**
3
+ * 获取国际化
4
+ */
2
5
  var useLocale = function useLocale(localeMap) {
3
6
  var _useDumiLocale = useDumiLocale(),
4
7
  id = _useDumiLocale.id;
@@ -1,4 +1,8 @@
1
1
  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); }
2
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
3
+ 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."); }
4
+ 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; } }
5
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
2
6
  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; } } }; }
3
7
  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); }
4
8
  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"
9
13
  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); }
10
14
  import { useFullSidebarData, useLocale, useLocation, useNavigate, useSiteData } from 'dumi';
11
15
  import { get } from 'lodash-es';
12
- import React, { useMemo } from 'react';
16
+ import React, { useEffect, useMemo, useState } from 'react';
13
17
  import Link from "../common/Link";
14
18
  import styles from "../slots/ManualContent/index.module.less";
15
19
  import { getBaseRoute } from "../slots/ManualContent/utils";
16
20
  import { flattenMenu } from "../utils/menu";
17
21
  export var useMenu = function useMenu() {
18
- var _navOf;
19
22
  var fullData = useFullSidebarData();
20
23
  var _useLocation = useLocation(),
21
24
  pathname = _useLocation.pathname;
@@ -109,28 +112,37 @@ export var useMenu = function useMenu() {
109
112
  var flattedMenuData = useMemo(function () {
110
113
  return flattenMenu(menuData);
111
114
  }, [menuData]);
112
- var selectedKey = pathname;
113
115
 
114
- // Nav 跳转但不在菜单中,则选中第一个菜单项
115
- var navOf = function navOf(navs) {
116
- return navs.some(function (nav) {
117
- var _nav$slug;
118
- return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
119
- });
120
- };
121
- var isNavLink = !!navOf(navs);
122
- var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
123
- var isLinkInMenu = flattedMenuData.some(function (item) {
124
- return item.link === pathname;
125
- });
126
- if (isNavLink && !isExactLink && !isLinkInMenu) {
127
- var firstValidMenuItem = flattedMenuData.find(function (item) {
128
- return item.link;
116
+ // 添加本地状态来存储选中的key
117
+ var _useState = useState(pathname),
118
+ _useState2 = _slicedToArray(_useState, 2),
119
+ selectedKey = _useState2[0],
120
+ setSelectedKey = _useState2[1];
121
+ useEffect(function () {
122
+ var _navOf;
123
+ // Nav 跳转但不在菜单中,则选中第一个菜单项
124
+ var navOf = function navOf(navs) {
125
+ return navs.some(function (nav) {
126
+ var _nav$slug;
127
+ return (nav === null || nav === void 0 || (_nav$slug = nav.slug) === null || _nav$slug === void 0 ? void 0 : _nav$slug.replace('docs/', '/')) === pathname;
128
+ });
129
+ };
130
+ var isNavLink = !!navOf(navs);
131
+ var isExactLink = (_navOf = navOf(navs)) === null || _navOf === void 0 ? void 0 : _navOf.exact;
132
+ var isLinkInMenu = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.some(function (item) {
133
+ return item.link === pathname;
129
134
  });
130
- if (firstValidMenuItem) {
131
- navigate(firstValidMenuItem.link);
132
- selectedKey = firstValidMenuItem.link;
135
+ if (isNavLink && !isExactLink && !isLinkInMenu) {
136
+ var firstValidMenuItem = flattedMenuData === null || flattedMenuData === void 0 ? void 0 : flattedMenuData.find(function (item) {
137
+ return item.link;
138
+ });
139
+ if (firstValidMenuItem) {
140
+ navigate(firstValidMenuItem.link);
141
+ setSelectedKey(firstValidMenuItem.link);
142
+ }
143
+ } else {
144
+ setSelectedKey(pathname);
133
145
  }
134
- }
146
+ }, [pathname, flattedMenuData, navs, navigate]);
135
147
  return [menuData, selectedKey, flattedMenuData];
136
148
  };
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import SEO from "../../common/SEO";
3
2
  import Footer from "dumi/theme/slots/Footer";
4
3
  import Header from "dumi/theme/slots/Header";
5
4
  import { ManualContent } from "dumi/theme/slots/ManualContent";
@@ -9,7 +8,7 @@ import { ManualContent } from "dumi/theme/slots/ManualContent";
9
8
  */
10
9
  var ManualLayout = function ManualLayout(_ref) {
11
10
  var children = _ref.children;
12
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, null), /*#__PURE__*/React.createElement(Header, {
11
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
13
12
  isHomePage: false
14
13
  }), /*#__PURE__*/React.createElement(ManualContent, null, children), /*#__PURE__*/React.createElement(Footer, {
15
14
  isDynamicFooter: true
package/dist/pages/404.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import SEO from "../common/SEO";
2
+ import CommonHelmet from "../common/CommonHelmet";
3
3
  import { NotFound as NotFoundPage } from "dumi/theme/slots/404";
4
4
  import Footer from "dumi/theme/slots/Footer";
5
5
  import Header from "dumi/theme/slots/Header";
@@ -8,7 +8,7 @@ import Header from "dumi/theme/slots/Header";
8
8
  * 404 页面
9
9
  */
10
10
  var NotFound = function NotFound() {
11
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
11
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
12
12
  title: "404: Not found"
13
13
  }), /*#__PURE__*/React.createElement(Header, {
14
14
  isHomePage: false
@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
5
5
  import { useLocation, useNavigate, useParams } from 'react-router-dom';
6
6
  import { useSnapshot } from 'valtio';
7
7
  import InViewSuspense from "../../common/InViewSuspense";
8
- import SEO from "../../common/SEO";
8
+ import CommonHelmet from "../../common/CommonHelmet";
9
9
  import { ThemeAntVContext } from "../../context";
10
10
  import { store } from "../../model";
11
11
  import { API } from "dumi/theme/slots/API";
@@ -85,7 +85,7 @@ var Example = function Example() {
85
85
  }
86
86
  return /*#__PURE__*/React.createElement("div", {
87
87
  className: styles.example
88
- }, /*#__PURE__*/React.createElement(SEO, {
88
+ }, /*#__PURE__*/React.createElement(CommonHelmet, {
89
89
  title: exampleTitle,
90
90
  description: demoTitle
91
91
  }), /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(Header, {
@@ -9,7 +9,7 @@ import { Layout as AntLayout, BackTop } from 'antd';
9
9
  import React, { lazy, useContext, useEffect } from 'react';
10
10
  import { useNavigate } from 'react-router-dom';
11
11
  import InViewSuspense from "../../common/InViewSuspense";
12
- import SEO from "../../common/SEO";
12
+ import CommonHelmet from "../../common/CommonHelmet";
13
13
  import { ThemeAntVContext } from "../../context";
14
14
  import useLocale from "../../hooks/useLocale";
15
15
  import Footer from "dumi/theme/slots/Footer";
@@ -49,7 +49,7 @@ var Examples = function Examples() {
49
49
  nav(p.replace('/zh/', '/'));
50
50
  }
51
51
  }, []);
52
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
52
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
53
53
  title: locale.title
54
54
  }), /*#__PURE__*/React.createElement(Header, {
55
55
  isHomePage: false
@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
7
7
  import { useIntl, useSiteData } from 'dumi';
8
8
  import { get, isArray, size } from 'lodash-es';
9
9
  import React from 'react';
10
- import SEO from "../../common/SEO";
10
+ import CommonHelmet from "../../common/CommonHelmet";
11
11
  import { ic } from "../../slots/hooks";
12
12
  import { Cases } from "./components/Cases";
13
13
  import { Companies } from "./components/Companies";
@@ -47,7 +47,7 @@ var Index = function Index() {
47
47
  style: style,
48
48
  className: className
49
49
  };
50
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
50
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
51
51
  title: ic(title),
52
52
  titleSuffix: "AntV"
53
53
  }), 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, {
@@ -1,9 +1,10 @@
1
1
  import { VerticalAlignTopOutlined } from '@ant-design/icons';
2
2
  import { BackTop, Layout } from 'antd';
3
3
  import { useRouteMeta } from 'dumi';
4
- import React, { lazy, Suspense } from 'react';
4
+ import React, { lazy } from 'react';
5
5
  import { useMedia } from 'react-use';
6
6
  import readingTime from 'reading-time';
7
+ import ClientOnly from "../../common/ClientOnly";
7
8
  import InViewSuspense from "../../common/InViewSuspense";
8
9
  import { ContentTable } from "dumi/theme/slots/ContentTable";
9
10
  import { Feedback } from "dumi/theme/slots/Feedback";
@@ -26,9 +27,7 @@ export var Main = function Main(_ref) {
26
27
  time = _readingTime.time;
27
28
  var is991Wide = useMedia('(min-width: 991.99px)', true);
28
29
  var showToc = is991Wide && meta.frontmatter.showToc !== false;
29
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Suspense, {
30
- fallback: null
31
- }, /*#__PURE__*/React.createElement(ObPreview, null)), /*#__PURE__*/React.createElement(Layout.Content, {
30
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ClientOnly, null, /*#__PURE__*/React.createElement(ObPreview, null)), /*#__PURE__*/React.createElement(Layout.Content, {
32
31
  className: styles.content
33
32
  }, /*#__PURE__*/React.createElement("div", {
34
33
  className: styles.main
@@ -1,5 +1,6 @@
1
1
  import { Layout } from 'antd';
2
2
  import React from 'react';
3
+ import CommonHelmet from "../../common/CommonHelmet";
3
4
  import styles from "./index.module.less";
4
5
  import { Main } from "./Main";
5
6
  import { Sidebar } from "./Sidebar";
@@ -8,5 +9,5 @@ export var ManualContent = function ManualContent(_ref) {
8
9
  return /*#__PURE__*/React.createElement(Layout, {
9
10
  hasSider: true,
10
11
  className: styles.layout
11
- }, /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Main, null, children));
12
+ }, /*#__PURE__*/React.createElement(CommonHelmet, null), /*#__PURE__*/React.createElement(Sidebar, null), /*#__PURE__*/React.createElement(Main, null, children));
12
13
  };
@@ -38,7 +38,6 @@ function blockOf() {
38
38
  export function usePreview() {
39
39
  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
40
40
  var select = arguments.length > 1 ? arguments[1] : undefined;
41
- if (typeof document === 'undefined') return;
42
41
  var key = select + ',' + blockOf().length;
43
42
  useEffect(function () {
44
43
  var blocks = blockOf();
@@ -1,3 +1,6 @@
1
+ /**
2
+ * 统一去掉中英文前缀
3
+ */
1
4
  export function getPurePathname(pathname) {
2
5
  return pathname.replace('/zh', '').replace('/en', '');
3
6
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antv/dumi-theme-antv",
3
- "version": "0.6.4-alpha.0",
3
+ "version": "0.6.4-alpha.1",
4
4
  "description": "AntV website theme based on dumi2.",
5
5
  "keywords": [
6
6
  "dumi",
@@ -110,7 +110,7 @@
110
110
  "@types/react-slick": "^0.23.13",
111
111
  "@types/styled-components": "^5.1.34",
112
112
  "@umijs/lint": "^4.3.34",
113
- "dumi": "2.4.13",
113
+ "dumi": "^2.4.13",
114
114
  "eslint": "^8.57.1",
115
115
  "father": "^4.5.1",
116
116
  "father-plugin-dumi-theme": "1.0.0-rc.1",
@@ -1,190 +0,0 @@
1
- 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); }
2
- 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; }
3
- 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; }
4
- 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; }
5
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
- 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); }
7
- function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
- 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."); }
9
- 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); }
10
- 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; }
11
- 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; } }
12
- function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
13
- import { createFromIconfontCN, SearchOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
14
- import { Input, Menu, Tooltip } from 'antd';
15
- import classNames from 'classnames';
16
- import { FormattedMessage, useIntl, useLocale } from 'dumi';
17
- import { cloneDeep } from 'lodash-es';
18
- import React, { useEffect, useRef, useState } from 'react';
19
- import styles from "./index.module.less";
20
-
21
- // menu icon
22
- var MenuIcon = createFromIconfontCN({
23
- scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
24
- });
25
- /**
26
- * DEMO 预览页面的菜单
27
- */
28
- var ExampleSider = function ExampleSider(props) {
29
- var currentDemo = props.currentDemo,
30
- onDemoClicked = props.onDemoClicked,
31
- exampleTopics = props.exampleTopics;
32
- // 菜单栏展开keys
33
- var _useState = useState([]),
34
- _useState2 = _slicedToArray(_useState, 2),
35
- openKeys = _useState2[0],
36
- setOpenKeys = _useState2[1];
37
- var menuRef = useRef(null);
38
-
39
- // 初始化点击进来的示例按钮a的dom
40
- var _useState3 = useState(),
41
- _useState4 = _slicedToArray(_useState3, 2),
42
- aRef = _useState4[0],
43
- setARef = _useState4[1];
44
-
45
- // input 搜索框的value
46
- var _useState5 = useState(''),
47
- _useState6 = _slicedToArray(_useState5, 2),
48
- searchValue = _useState6[0],
49
- setSearchValue = _useState6[1];
50
- var locale = useLocale();
51
- var intl = useIntl();
52
- var getCurrentTopics = function getCurrentTopics() {
53
- var res = filterTreeNode({
54
- id: 'FAKE_ID',
55
- childrenKey: 'exampleTopics',
56
- title: {
57
- zh: 'FAKE_TITLE',
58
- en: 'FAKE_TITLE'
59
- },
60
- exampleTopics: cloneDeep(exampleTopics)
61
- }, searchValue, locale.id);
62
- return (res === null || res === void 0 ? void 0 : res.exampleTopics) || [];
63
- };
64
-
65
- // 初始化菜单栏展开keys
66
- useEffect(function () {
67
- var targetExample = currentDemo.targetExample,
68
- targetTopic = currentDemo.targetTopic;
69
- 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)];
70
- setOpenKeys(keys);
71
- }, [currentDemo]);
72
-
73
- // 初始化滚动到中间
74
- useEffect(function () {
75
- if (aRef) {
76
- aRef.scrollIntoView({
77
- block: 'center',
78
- behavior: 'smooth'
79
- });
80
- }
81
- }, [aRef]);
82
-
83
- // 获取搜索后的文本结构 左文本 + 搜索文本 + 右文本
84
- var getSearchValueTitle = function getSearchValueTitle(title) {
85
- 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", {
86
- className: styles.searchValue
87
- }, searchValue), /*#__PURE__*/React.createElement("span", null, title.replace(new RegExp(".*?".concat(searchValue)), ''))) : title;
88
- };
89
-
90
- // 图例按钮 + img + tooltip文本
91
- var renderExampleDemoCard = function renderExampleDemoCard(demo) {
92
- return /*#__PURE__*/React.createElement(Tooltip, {
93
- placement: "right",
94
- title: getSearchValueTitle(demo.title[locale.id] || ''),
95
- key: demo.id
96
- }, /*#__PURE__*/React.createElement("a", {
97
- ref: function ref(dom) {
98
- // TODO: DEAL WITH ME
99
- // if (dom && !aRef && item.value === getPath(currentExample)) {
100
- // setARef(dom);
101
- // }
102
- },
103
- className: classNames(styles.card, _defineProperty({}, styles.current, currentDemo.id === demo.id))
104
- }, /*#__PURE__*/React.createElement("div", {
105
- className: classNames(styles.screenshot),
106
- style: {
107
- backgroundImage: "url(".concat(demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png', ")")
108
- },
109
- title: demo.title[locale.id]
110
- })));
111
- };
112
- var renderSubMenu = function renderSubMenu() {
113
- return getCurrentTopics().map(function (topic) {
114
- return /*#__PURE__*/React.createElement(Menu.SubMenu, {
115
- key: "TOPIC-".concat(topic.id),
116
- title: /*#__PURE__*/React.createElement("div", null, topic.icon && /*#__PURE__*/React.createElement(MenuIcon, {
117
- className: styles.menuIcon,
118
- type: "icon-".concat(topic.icon)
119
- }), /*#__PURE__*/React.createElement("span", {
120
- className: classNames(styles.menuTitleContent, styles.subMenuTitleContent)
121
- }, topic.title && getSearchValueTitle(topic.title[locale.id])))
122
- }, topic.examples.map(function (example) {
123
- return /*#__PURE__*/React.createElement(Menu.SubMenu, {
124
- key: "EXAMPLE-".concat(topic.id, "-").concat(example.id),
125
- title: example.title[locale.id]
126
- }, example.demos.map(function (demo) {
127
- return /*#__PURE__*/React.createElement(Menu.Item, {
128
- key: "DEMO-".concat(topic.id, "-").concat(example.id, "-").concat(demo.id),
129
- style: {
130
- height: 70,
131
- padding: 0,
132
- cursor: 'pointer'
133
- },
134
- onClick: function onClick() {
135
- onDemoClicked(_objectSpread(_objectSpread({}, demo), {}, {
136
- targetExample: example,
137
- targetTopic: topic
138
- }));
139
- }
140
- }, /*#__PURE__*/React.createElement("span", {
141
- className: styles.menuTitleContent
142
- }, renderExampleDemoCard(demo)));
143
- }));
144
- }));
145
- });
146
- };
147
-
148
- // 搜索栏
149
- var renderSearchBar = function renderSearchBar() {
150
- return /*#__PURE__*/React.createElement("div", {
151
- className: styles.searchSider
152
- }, /*#__PURE__*/React.createElement(Input, {
153
- size: "small",
154
- placeholder: intl.formatMessage({
155
- id: '搜索…'
156
- }),
157
- prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
158
- value: searchValue,
159
- onChange: function onChange(e) {
160
- return setSearchValue(e.target.value);
161
- }
162
- }), /*#__PURE__*/React.createElement(Tooltip, {
163
- placement: "right",
164
- title: /*#__PURE__*/React.createElement(FormattedMessage, {
165
- id: "\u6536\u8D77\u6240\u6709"
166
- })
167
- }, /*#__PURE__*/React.createElement(VerticalAlignTopOutlined, {
168
- className: styles.searchSiderIcon,
169
- onClick: function onClick() {
170
- return setOpenKeys([]);
171
- }
172
- })));
173
- };
174
- return /*#__PURE__*/React.createElement("div", {
175
- className: classNames(styles.shadowWrapper)
176
- }, renderSearchBar(), /*#__PURE__*/React.createElement(Menu, {
177
- ref: menuRef,
178
- mode: "inline",
179
- style: {
180
- width: '100%'
181
- },
182
- className: styles.sideBarMenu,
183
- openKeys: openKeys,
184
- selectedKeys: ["DEMO-".concat(currentDemo.id)],
185
- onOpenChange: function onOpenChange(keys) {
186
- setOpenKeys(keys);
187
- }
188
- }, renderSubMenu()));
189
- };
190
- export default ExampleSider;