@antv/dumi-theme-antv 0.3.0-beta.11 → 0.3.0-beta.12

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.
@@ -9,7 +9,7 @@ export declare type PlaygroundProps = {
9
9
  */
10
10
  rid?: string;
11
11
  /**
12
- * 预览区、代码区的宽度占比,默认为 0.62
12
+ * 预览区、代码区的宽度占比,默认为 0.38
13
13
  */
14
14
  ratio?: number;
15
15
  /**
@@ -43,6 +43,7 @@ var Playground = function Playground(_ref) {
43
43
 
44
44
  var themeConfig = useSiteData();
45
45
  var defaultSize = get(themeConfig, 'editor.playgroundSize', 0.38);
46
+ var size = isNaN(Number(ratio)) ? defaultSize : Number(ratio);
46
47
  return /*#__PURE__*/React.createElement("div", {
47
48
  className: styles.container,
48
49
  style: {
@@ -54,7 +55,7 @@ var Playground = function Playground(_ref) {
54
55
  topic: topic,
55
56
  example: example,
56
57
  demo: demo,
57
- size: ratio || defaultSize,
58
+ size: size,
58
59
  replaceId: rid
59
60
  }));
60
61
  };
@@ -84,7 +84,7 @@ export var Cases = function Cases(_ref) {
84
84
  }, /*#__PURE__*/React.createElement("div", {
85
85
  className: styles.appContent
86
86
  }, /*#__PURE__*/React.createElement("img", {
87
- className: styles.appLogo,
87
+ className: cx(styles.appLogo, 'index-case-logo'),
88
88
  src: app.logo,
89
89
  alt: "logo",
90
90
  style: {
@@ -118,6 +118,7 @@ export var CodeEditor = function CodeEditor(_ref) {
118
118
  };
119
119
  }, []);
120
120
  var executeCode = useCallback(debounce(function (v) {
121
+ if (currentEditorTab !== EDITOR_TABS.JAVASCRIPT) return;
121
122
  if (!v) return; // 1. 先编译代码
122
123
 
123
124
  var compiled;
@@ -132,7 +133,7 @@ export var CodeEditor = function CodeEditor(_ref) {
132
133
 
133
134
 
134
135
  execute(compiled, containerId, playground === null || playground === void 0 ? void 0 : playground.container, replaceId);
135
- }, 300), []);
136
+ }, 300), [containerId, currentEditorTab]);
136
137
  useEffect(function () {
137
138
  setCode(source);
138
139
  }, [source]);
@@ -140,7 +141,7 @@ export var CodeEditor = function CodeEditor(_ref) {
140
141
  executeCode(code);
141
142
  }, [code]);
142
143
  useEffect(function () {
143
- var dom = document.getElementById('containerId');
144
+ var dom = document.getElementById(containerId);
144
145
 
145
146
  if (dom) {
146
147
  bind(dom, debounce(function () {
@@ -178,14 +179,15 @@ export var CodeEditor = function CodeEditor(_ref) {
178
179
  }, []);
179
180
  useEffect(function () {
180
181
  if (monacoRef.current) {
181
- monacoRef.current.setValue(currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2));
182
+ var v = currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2);
183
+ monacoRef.current.setValue(v);
182
184
  }
183
185
  }, [currentEditorTab]);
184
186
  var onCodeChange = useCallback(function (value) {
185
187
  if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
186
188
  setCode(value);
187
189
  }
188
- }, []);
190
+ }, [currentEditorTab]);
189
191
  return /*#__PURE__*/React.createElement("div", {
190
192
  className: styles.editor
191
193
  }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -208,8 +210,9 @@ export var CodeEditor = function CodeEditor(_ref) {
208
210
  height: 'calc(100% - 36px)'
209
211
  }
210
212
  }, /*#__PURE__*/React.createElement(MonacoEditor, {
211
- language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
212
- value: code,
213
+ language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json' // value={currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2)}
214
+ ,
215
+ defaultValue: code,
213
216
  path: relativePath,
214
217
  loading: /*#__PURE__*/React.createElement(Loading, null),
215
218
  options: {
@@ -3,11 +3,16 @@ import { Result } from 'antd';
3
3
  import { useT } from "../hooks";
4
4
  import styles from "./index.module.less";
5
5
 
6
+ function getErrorMessage(e) {
7
+ return (e.reason ? e.reason : e.message ? e.message : e).toString();
8
+ }
6
9
  /**
7
10
  * DEMO 预览页面的预览,主要包含有:
8
11
  * 1. 一些 header 菜单
9
12
  * 2. 错误预览
10
13
  */
14
+
15
+
11
16
  export var CodePreview = function CodePreview(_ref) {
12
17
  var isPlayground = _ref.isPlayground,
13
18
  exampleId = _ref.exampleId,
@@ -26,6 +31,6 @@ export var CodePreview = function CodePreview(_ref) {
26
31
  className: styles.result,
27
32
  status: "error",
28
33
  title: useT('演示代码报错,请检查'),
29
- subTitle: /*#__PURE__*/React.createElement("pre", null, error && error.toString())
34
+ subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
30
35
  }) : null));
31
36
  };
@@ -62,22 +62,18 @@ export var CodeRunner = function CodeRunner(_ref) {
62
62
  relativePath: relativePath,
63
63
  githubUrl: githubUrl
64
64
  });
65
-
66
- function getExampleId() {
67
- return "".concat(topic, "_").concat(example, "_").concat(demo);
68
- }
69
-
65
+ var exampleId = "".concat(topic, "_").concat(example, "_").concat(demo);
70
66
  return /*#__PURE__*/React.createElement(SplitPane, {
71
67
  split: "vertical",
72
68
  defaultSize: "".concat((1 - size) * 100, "%"),
73
69
  minSize: 100
74
70
  }, /*#__PURE__*/React.createElement(CodePreview, {
75
- exampleId: getExampleId(),
71
+ exampleId: exampleId,
76
72
  error: error,
77
73
  header: header,
78
74
  isPlayground: isPlayground
79
75
  }), /*#__PURE__*/React.createElement(CodeEditor, {
80
- exampleId: getExampleId(),
76
+ exampleId: exampleId,
81
77
  source: source,
82
78
  relativePath: relativePath,
83
79
  replaceId: replaceId,
@@ -16,6 +16,13 @@ export declare type HeaderProps = {
16
16
  showGithubStar?: boolean;
17
17
  /** 是否显示切换语言选项 */
18
18
  showLanguageSwitcher?: boolean;
19
+ /**
20
+ * 国内镜像相关的信息
21
+ */
22
+ internalSite?: {
23
+ url: string;
24
+ name: object;
25
+ };
19
26
  /** 切换语言的回调 */
20
27
  onLanguageChange?: (language: string) => void;
21
28
  /** 是否二维码 */
@@ -40,8 +47,6 @@ export declare type HeaderProps = {
40
47
  isAntVSite?: boolean;
41
48
  /** AntV root 域名,直接用主题的可不传 */
42
49
  rootDomain?: string;
43
- /** 是否展示国内镜像链接 */
44
- showChinaMirror?: boolean;
45
50
  /** 是否显示 AntV 产品卡片 */
46
51
  showAntVProductsCard?: boolean;
47
52
  /** 展示版本切换 */
@@ -23,20 +23,25 @@ import { useNavigate } from "react-router-dom";
23
23
  import cx from 'classnames';
24
24
  import { useSiteData, useLocale } from 'dumi';
25
25
  import { GithubOutlined, MenuOutlined, CaretDownFilled, DownOutlined, WechatOutlined, LinkOutlined, CheckOutlined } from '@ant-design/icons';
26
- import { Popover, Menu, Dropdown, Select } from 'antd';
27
- import { map, size } from 'lodash-es';
26
+ import { Modal, Button, Popover, Menu, Dropdown, Select } from 'antd';
27
+ import { get, map, size } from 'lodash-es';
28
28
  import { Search } from "./Search";
29
29
  import { Products } from "./Products";
30
30
  import { Navs } from "./Navs";
31
31
  import { Logo } from "./Logo";
32
32
  import { LogoWhite } from "./LogoWhite";
33
33
  import { getLangUrl } from "./utils";
34
- import { useT } from "../hooks";
34
+ import { ic, useT } from "../hooks";
35
35
  import styles from "./index.module.less";
36
36
 
37
+ function redirectChinaMirror(chinaMirrorOrigin) {
38
+ window.location.href = window.location.href.replace(window.location.origin, chinaMirrorOrigin);
39
+ }
37
40
  /**
38
41
  * 头部菜单
39
42
  */
43
+
44
+
40
45
  var HeaderComponent = function HeaderComponent(_ref) {
41
46
  var _cx, _cx4;
42
47
 
@@ -57,8 +62,6 @@ var HeaderComponent = function HeaderComponent(_ref) {
57
62
  showAntVProductsCard = _ref$showAntVProducts === void 0 ? true : _ref$showAntVProducts,
58
63
  _ref$showLanguageSwit = _ref.showLanguageSwitcher,
59
64
  showLanguageSwitcher = _ref$showLanguageSwit === void 0 ? true : _ref$showLanguageSwit,
60
- _ref$showChinaMirror = _ref.showChinaMirror,
61
- showChinaMirror = _ref$showChinaMirror === void 0 ? true : _ref$showChinaMirror,
62
65
  logo = _ref.logo,
63
66
  onLanguageChange = _ref.onLanguageChange,
64
67
  _ref$showWxQrcode = _ref.showWxQrcode,
@@ -76,22 +79,41 @@ var HeaderComponent = function HeaderComponent(_ref) {
76
79
  _ref$rootDomain = _ref.rootDomain,
77
80
  rootDomain = _ref$rootDomain === void 0 ? '' : _ref$rootDomain,
78
81
  versions = _ref.versions,
82
+ internalSite = _ref.internalSite,
79
83
  ecosystems = _ref.ecosystems,
80
84
  searchOptions = _ref.searchOptions;
81
85
  var isAntVHome = isAntVSite && isHomePage; // 是否为AntV官网首页
82
86
 
83
- var locale = useLocale();
84
- var nav = useNavigate();
87
+ var showChinaMirror = !!internalSite;
88
+ var chinaMirrorUrl = get(internalSite, 'url');
85
89
 
86
- var _useState = useState(locale.id),
90
+ var _useState = useState(false),
87
91
  _useState2 = _slicedToArray(_useState, 2),
88
- lang = _useState2[0],
89
- setLang = _useState2[1];
92
+ chinaMirrorHintVisible = _useState2[0],
93
+ updateChinaMirrorHintVisible = _useState2[1];
94
+
95
+ useEffect(function () {
96
+ var timeout = setTimeout(function () {
97
+ if (showChinaMirror && lang === 'zh' && !localStorage.getItem('china-mirror-no-more-hint') && window.location.host.includes('antv.vision')) {
98
+ updateChinaMirrorHintVisible(true);
99
+ }
100
+ }, 5000);
101
+ return function () {
102
+ clearTimeout(timeout);
103
+ };
104
+ });
105
+ var locale = useLocale();
106
+ var nav = useNavigate();
90
107
 
91
- var _useState3 = useState(false),
108
+ var _useState3 = useState(locale.id),
92
109
  _useState4 = _slicedToArray(_useState3, 2),
93
- productMenuVisible = _useState4[0],
94
- setProductMenuVisible = _useState4[1];
110
+ lang = _useState4[0],
111
+ setLang = _useState4[1];
112
+
113
+ var _useState5 = useState(false),
114
+ _useState6 = _slicedToArray(_useState5, 2),
115
+ productMenuVisible = _useState6[0],
116
+ setProductMenuVisible = _useState6[1];
95
117
 
96
118
  var productMenuHovering = false;
97
119
 
@@ -121,10 +143,10 @@ var HeaderComponent = function HeaderComponent(_ref) {
121
143
  setProductMenuVisible(!productMenuVisible);
122
144
  };
123
145
 
124
- var _useState5 = useState(false),
125
- _useState6 = _slicedToArray(_useState5, 2),
126
- popupMenuVisible = _useState6[0],
127
- setPopupMenuVisible = _useState6[1];
146
+ var _useState7 = useState(false),
147
+ _useState8 = _slicedToArray(_useState7, 2),
148
+ popupMenuVisible = _useState8[0],
149
+ setPopupMenuVisible = _useState8[1];
128
150
 
129
151
  var onTogglePopupMenuVisible = function onTogglePopupMenuVisible() {
130
152
  setPopupMenuVisible(!popupMenuVisible);
@@ -195,7 +217,79 @@ var HeaderComponent = function HeaderComponent(_ref) {
195
217
  style: {
196
218
  marginLeft: '6px'
197
219
  }
198
- })))) : null,
220
+ })))) : null, showChinaMirror && isWide ? /*#__PURE__*/React.createElement(Popover, {
221
+ title: null,
222
+ content: /*#__PURE__*/React.createElement("div", {
223
+ style: {
224
+ width: 300
225
+ }
226
+ }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
227
+ role: "img",
228
+ "aria-labelledby": "\u4E2D\u56FD",
229
+ style: {
230
+ marginRight: '8px'
231
+ }
232
+ }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80\u56FD\u5185\u955C\u50CF\u7AD9\u70B9\u3002"), /*#__PURE__*/React.createElement("div", {
233
+ style: {
234
+ marginTop: 16,
235
+ textAlign: 'right'
236
+ }
237
+ }, /*#__PURE__*/React.createElement(Button, {
238
+ onClick: function onClick() {
239
+ return updateChinaMirrorHintVisible(false);
240
+ },
241
+ size: "small",
242
+ style: {
243
+ marginRight: 8
244
+ }
245
+ }, "\u6682\u65F6\u5173\u95ED"), /*#__PURE__*/React.createElement(Button, {
246
+ type: "primary",
247
+ size: "small",
248
+ onClick: function onClick() {
249
+ localStorage.setItem('china-mirror-no-more-hint', Date.now().toString());
250
+ updateChinaMirrorHintVisible(false);
251
+ }
252
+ }, "\u4E0D\u518D\u63D0\u9192"))),
253
+ visible: chinaMirrorHintVisible,
254
+ placement: "bottomRight",
255
+ align: {
256
+ offset: [-12, -16]
257
+ }
258
+ }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("a", {
259
+ href: chinaMirrorUrl,
260
+ onClick: function onClick(e) {
261
+ e.preventDefault();
262
+ redirectChinaMirror(chinaMirrorUrl);
263
+ }
264
+ }, ic(get(internalSite, 'name')), !isAntVHome && /*#__PURE__*/React.createElement(LinkOutlined, null)))) : null, showChinaMirror && !isWide && /*#__PURE__*/React.createElement(Modal, {
265
+ visible: chinaMirrorHintVisible,
266
+ cancelText: "\u4E0D\u518D\u63D0\u9192",
267
+ okText: "\u7ACB\u5373\u524D\u5F80",
268
+ onCancel: function onCancel() {
269
+ updateChinaMirrorHintVisible(false);
270
+ },
271
+ onOk: function onOk() {
272
+ return redirectChinaMirror(chinaMirrorUrl);
273
+ },
274
+ cancelButtonProps: {
275
+ onClick: function onClick() {
276
+ localStorage.setItem('china-mirror-no-more-hint', Date.now().toString());
277
+ updateChinaMirrorHintVisible(false);
278
+ }
279
+ }
280
+ }, /*#__PURE__*/React.createElement("div", {
281
+ className: styles.modalContent
282
+ }, /*#__PURE__*/React.createElement("span", {
283
+ role: "img",
284
+ "aria-labelledby": "\u4E2D\u56FD"
285
+ }, "\uD83C\uDDE8\uD83C\uDDF3"), "AntV \u7CFB\u5217\u7F51\u7AD9\u90E8\u7F72\u5728 gh-pages \u4E0A\uFF0C\u82E5\u8BBF\u95EE\u901F\u5EA6\u4E0D\u4F73\uFF0C\u53EF\u4EE5\u524D\u5F80", /*#__PURE__*/React.createElement("a", {
286
+ href: chinaMirrorUrl,
287
+ onClick: function onClick(e) {
288
+ e.preventDefault();
289
+ window.location.href = chinaMirrorUrl;
290
+ },
291
+ className: styles.remindHref
292
+ }, ic(get(internalSite, 'name')), /*#__PURE__*/React.createElement(LinkOutlined, null)), /*#__PURE__*/React.createElement("span", null, " \u7AD9\u70B9\u3002"))),
199
293
  /** 产品列表 */
200
294
  showAntVProductsCard && /*#__PURE__*/React.createElement("li", productItemProps, /*#__PURE__*/React.createElement("a", null, useT('所有产品'), !isAntVHome ? /*#__PURE__*/React.createElement("img", {
201
295
  src: "https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png",
@@ -343,6 +437,7 @@ export var Header = function Header(props) {
343
437
  githubUrl = themeConfig.githubUrl,
344
438
  isAntVSite = themeConfig.isAntVSite,
345
439
  subTitleHref = themeConfig.subTitleHref,
440
+ internalSite = themeConfig.internalSite,
346
441
  showSearch = themeConfig.showSearch,
347
442
  showGithubCorner = themeConfig.showGithubCorner,
348
443
  showGithubStars = themeConfig.showGithubStars,
@@ -363,6 +458,7 @@ export var Header = function Header(props) {
363
458
  githubUrl: githubUrl,
364
459
  isAntVSite: isAntVSite,
365
460
  siteUrl: siteUrl,
461
+ internalSite: internalSite,
366
462
  showSearch: showSearch,
367
463
  showGithubCorner: showGithubCorner,
368
464
  showGithubStars: showGithubStars,
@@ -26,6 +26,7 @@ import { useLocale, useSiteData, useFullSidebarData, useRouteMeta } from 'dumi';
26
26
  import { useNavigate } from "react-router-dom";
27
27
  import { EditOutlined, MenuFoldOutlined, MenuUnfoldOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
28
28
  import readingTime from 'reading-time';
29
+ import URI from 'uri-parse';
29
30
  import { SEO } from "../SEO";
30
31
  import { getBaseRoute, getIndexRoute, getOpenKeys, getNavigateUrl } from "./utils";
31
32
  import { NavigatorBanner } from "./NavigatorBanner";
@@ -202,10 +203,12 @@ export var ManualContent = function ManualContent(_ref) {
202
203
  sidebarRoutes.push(route);
203
204
  }
204
205
 
205
- var url = getNavigateUrl(window.location.pathname, indexRoute, sidebarRoutes);
206
+ var uri = new URI(location.href);
207
+ uri.path = getNavigateUrl("/".concat(uri.path), indexRoute, sidebarRoutes);
206
208
 
207
- if (url !== window.location.pathname) {
208
- navigate(url);
209
+ if ("".concat(uri.path) !== window.location.pathname) {
210
+ uri.path = uri.path.slice(1);
211
+ navigate(uri.toURI().replace(location.origin, ''));
209
212
  } // 改变菜单栏选中和 openKeys 状态
210
213
 
211
214
 
@@ -54,8 +54,8 @@ export function getNavigateUrl(pathname, first, siderbarMenu) {
54
54
  return pathname.replace('/docs/', '/').replace('/zh/', '/');
55
55
  }
56
56
 
57
- if (!siderbarMenu.some(function (item) {
58
- return item === pathname;
57
+ if (siderbarMenu.every(function (item) {
58
+ return ![item, "".concat(item, "/")].includes(pathname);
59
59
  })) {
60
60
  return first;
61
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antv/dumi-theme-antv",
3
- "version": "0.3.0-beta.11",
3
+ "version": "0.3.0-beta.12",
4
4
  "description": "AntV website theme based on dumi2.",
5
5
  "types": "dist/types.d.ts",
6
6
  "scripts": {