@antv/dumi-theme-antv 0.3.0-beta.3 → 0.3.0-beta.5

package/dist/layouts/DocLayout.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useOutlet, useLocation } from 'dumi';
 import { Index } from "./entry/Index";
 import { API } from "./entry/API";
@@ -11,25 +11,29 @@ import "../slots/_.less";
  */
 
 export default (function () {
+  // 打印控制台文案
+  useEffect(function () {
+    console.log("%cAntV 让数据栩栩如生", "color:#5B7102; font-size: 20px;"), console.log("%c新一代数据可视化解决方案", "color:#5B7102;"), console.log("--------------------------"), console.log("%c关注我们的微信公众号 %c“数据可视化 AntV”%c，获取我们团队最新的进展、动态、分享，也欢迎加入我们！", "color: red", "color: pink", "color: red");
+  }, []);
   var outlet = useOutlet();
 
   var _useLocation = useLocation(),
       pathname = _useLocation.pathname;
 
-  var p = pathname.toLowerCase(); // @todo 南洋
-  // 做一些跳转，比如：/zh/examples/xxx -> /examples/xxx
-  // 首页
+  var path = pathname.toLowerCase(); // 统一去掉中英文前缀
 
-  if (p === '/' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // API 页面
+  var p = path.replace('/zh/', '/').replace('/en/', '/'); // 首页
 
-  if (p.startsWith('/api') || p.startsWith('/en/api') || // 这两个是兼容之前的
-  p.startsWith('/zh/docs/api') || p.startsWith('/en/docs/api')) {
+  if (p === '/' || p === '/zh' || p === '/en' || p === '/en/') return /*#__PURE__*/React.createElement(Index, null); // API 页面
+
+  if (p.startsWith('/api') || // 这两个是兼容之前的
+  p.startsWith('/docs/api')) {
     return /*#__PURE__*/React.createElement(API, null, " ", outlet, " ");
   } // 教程页面
 
 
-  if (p.startsWith('/manual') || p.startsWith('/en/manual') || // 这两个是兼容之前的
-  p.startsWith('/zh/docs/manual/') || p.startsWith('/en/docs/manual/')) {
+  if (p.startsWith('/manual') || // 这两个是兼容之前的
+  p.startsWith('/docs/manual')) {
     return /*#__PURE__*/React.createElement(Manual, null, " ", outlet, " ");
   } // More router, add here...
 

package/dist/pages/Example/index.js

@@ -1,9 +1,3 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 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."); }
@@ -39,8 +33,6 @@ var Example = function Example() {
   var nav = useNavigate();
 
   var _useParams = useParams(),
-      _useParams$language = _useParams.language,
-      language = _useParams$language === void 0 ? 'zh' : _useParams$language,
       topic = _useParams.topic,
       example = _useParams.example;
   /** 示例页面的元数据信息 */
@@ -56,51 +48,17 @@ var Example = function Example() {
       currentDemo = _useState2[0],
       setCurrentDemo = _useState2[1];
 
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isCollapsed = _useState4[0],
+      setIsCollapsed = _useState4[1];
+
   useEffect(function () {
     if (topic && example && demo) {
       var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
       setCurrentDemo(targetDemoInfo);
     }
-  }, [topic, example, hash]); // 提取出来获取 唯一value值的 方法
-
-  var getPath = function getPath(item) {
-    var _item$relativePath;
-
-    if (!item) {// @todo 怀策
-      // debugger
-    }
-
-    var demoSlug = (_item$relativePath = item.relativePath) === null || _item$relativePath === void 0 ? void 0 : _item$relativePath.replace(/\/demo\/(.*)\..*/, function (_, filename) {
-      return "#".concat(filename);
-    });
-    return "/".concat(locale.id, "/examples/").concat(demoSlug);
-  }; // 一级菜单，二级菜单 数据 treeData + 二级菜单，示例 数据 result 写成一个 一级，二级，示例的三层树结构 数据
-
-
-  var transformNode = function transformNode(data, result) {
-    return data.map(function (item) {
-      var _result$find;
-
-      if (item.children && !item.node) {
-        return _objectSpread(_objectSpread({}, item), {}, {
-          children: transformNode(item.children, result)
-        });
-      }
-
-      var _item$node = item.node,
-          frontmatter = _item$node.frontmatter,
-          fields = _item$node.fields;
-      return _objectSpread(_objectSpread({}, frontmatter), {}, {
-        // 提前给二级菜单的key值加入 特殊值 好辨别
-        value: "secondaryKey-".concat(fields === null || fields === void 0 ? void 0 : fields.slug),
-        children: (_result$find = result.find(function (_ref) {
-          var k = _ref.title;
-          return k === frontmatter.title;
-        })) === null || _result$find === void 0 ? void 0 : _result$find.children
-      });
-    });
-  };
-
+  }, [topic, example, hash]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.example
   }, /*#__PURE__*/React.createElement(Header, {
@@ -112,7 +70,8 @@ var Example = function Example() {
     width: 250,
     trigger: null,
     collapsible: true,
-    className: styles.sider,
+    collapsed: isCollapsed,
+    className: styles.menuSider,
     theme: "light"
   }, currentDemo && /*#__PURE__*/React.createElement(ExampleSider, {
     showExampleDemoTitle: true,

package/dist/pages/Example/index.module.less

@@ -16,14 +16,6 @@
     flex: 1;
     background-color: #fff;
 
-    .sider {
-      height: 100%;
-
-      .exampleList {
-
-      }
-    }
-
     .content {
       position: relative;
       height: 100%;
@@ -38,3 +30,53 @@
     }
   }
 }
+
+.menuSider {
+  background-color: #f8f9fc;
+  border-right: 1px solid #ececec;
+
+  :global {
+    .ant-layout-sider-children {
+      overflow-y: hidden;
+      overflow-x: hidden;
+
+      &:hover {
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
+.trigger {
+  font-size: 12px;
+  position: relative;
+  margin: auto;
+  color: #6c7f90;
+  left: -1px;
+  z-index: 4;
+  width: 22px;
+  cursor: pointer;
+  transition: color 0.3s;
+  border: 1px solid #ececec;
+  border-left: none;
+  background-color: #fff;
+  height: 66px;
+  box-sizing: border-box;
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+  text-align: center;
+
+  &[type='menu-unfold'] {
+    background-color: #f8f9fc;
+  }
+
+  svg {
+    position: absolute;
+    left: 3px;
+    top: 25px;
+  }
+}
+
+.trigger:hover {
+  color: @primary-color;
+}

package/dist/pages/Examples/components/GalleryPageContent/DemoCard/index.js

@@ -25,7 +25,7 @@ export var DemoCard = function DemoCard(props) {
 
   return /*#__PURE__*/React.createElement(Link, {
     className: styles.galleryCardLink,
-    to: "/".concat(locale.id, "/examples/").concat(topicId, "/").concat(exampleId, "/#").concat(demo.id)
+    to: "".concat(locale.id == 'zh' ? '' : '/en', "/examples/").concat(topicId, "/").concat(exampleId, "/#").concat(demo.id)
   }, demo.isNew ? /*#__PURE__*/React.createElement(Badge.Ribbon, {
     text: "new",
     className: styles.customRibbon

package/dist/pages/Examples/index.js

@@ -11,7 +11,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React from 'react';
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { BackTop, Layout as AntLayout } from 'antd';
 import { Header } from "../../slots/Header";
 import { Footer } from "../../slots/Footer";
@@ -30,15 +31,25 @@ import styles from "./index.module.less";
  */
 
 var Example = function Example() {
+  var nav = useNavigate();
   /** 示例页面的元数据信息 */
+
   var metaData = useContext(ThemeAntVContext);
   var exampleTopics = metaData.meta.exampleTopics;
 
   var _usePrevAndNext = usePrevAndNext(),
       _usePrevAndNext2 = _slicedToArray(_usePrevAndNext, 2),
       prev = _usePrevAndNext2[0],
-      next = _usePrevAndNext2[1];
+      next = _usePrevAndNext2[1]; // 为 zh 做兜底
+
 
+  useEffect(function () {
+    var p = window.location.pathname;
+
+    if (p.includes('/zh/')) {
+      nav(p.replace('/zh/', '/'));
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
     isHomePage: false
   }), /*#__PURE__*/React.createElement(AntLayout, {

package/dist/pages/Examples/index.module.less

@@ -268,6 +268,7 @@
 .sider {
   width: 280px !important;
   height: inherit;
+  background-color: #fff;
 
   // menu 滚动
   :global {
@@ -282,6 +283,7 @@
 }
 
 .affix {
+  background-color: #fff;
   & > div {
     height: 100%;
   }

package/dist/plugin/examples.d.ts

@@ -1,12 +1,17 @@
+import { Example, ExampleTopic } from '../types';
 /**
  * 获取案例页面的所有主题
  *
- * @returns {ExamplesPage.ExampleTopic[]} 案例主题列表
+ * @returns {ExampleTopic[]} 案例主题列表
  * @author YuZhanglong <loveyzl1123@gmail.com>
  */
-export declare const getExamplesPageTopics: (exampleTopics: ExamplesPage.ExampleTopic[]) => {
+export declare const getExamplesPageTopics: (exampleTopics: ExampleTopic[]) => {
     id: string;
-    title: ExamplesPage.ExampleTopic;
-    icon: ExamplesPage.ExampleTopic;
-    examples: ExamplesPage.Example[];
+    title: {
+        zh: string;
+        en: string;
+    };
+    icon: string;
+    examples: Example[];
+    childrenKey: string;
 }[];

package/dist/plugin/examples.js

@@ -63,10 +63,12 @@ var getTopicExamples = (topicPath) => {
       title: {
         en: exampleMetaEnContent.attributes.title,
         zh: exampleMetaZhContent.attributes.title
-      }
+      },
+      childrenKey: "demos",
+      order: exampleMetaZhContent.attributes.order || 0
     };
     return example;
-  });
+  }).sort((a, b) => a.order - b.order);
 };
 var getExamplesPageTopics = (exampleTopics) => {
   return exampleTopics.map(({ id, slug, title, icon }) => {
@@ -81,7 +83,8 @@ var getExamplesPageTopics = (exampleTopics) => {
       id: nid,
       title,
       icon,
-      examples
+      examples,
+      childrenKey: "examples"
     };
   });
 };

package/dist/plugin/index.js

@@ -26,6 +26,10 @@ var import_examples = require("./examples");
 var import_utils = require("./utils");
 var plugin_default = (api) => {
   api.describe({ key: `dumi-theme:${require("../../package.json").name}` });
+  api.modifyDefaultConfig((memo) => {
+    memo.resolve.codeBlockMode = "passive";
+    return memo;
+  });
   const pages = [
     {
       id: "dumi-theme-antv-example-list-zh",

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
+import { IC } from '../../types';
 interface Case {
     logo?: string;
     isAppLogo?: boolean;

package/dist/slots/CodeEditor/Toolbar.js

@@ -19,7 +19,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 import React, { useEffect, useState } from 'react';
-import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { CodeSandboxOutlined, PlayCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { Typography, Tooltip } from 'antd';
 import { useLocale } from 'dumi';
 import { getParameters } from 'codesandbox/lib/api/define';
@@ -68,8 +68,8 @@ export var Toolbar = function Toolbar(_ref) {
       updateRiddleVisible = _useState2[1];
 
   useEffect(function () {
-    ping(function (status) {
-      updateRiddleVisible(status === 'responded');
+    ping().then(function (status) {
+      return updateRiddleVisible(status === 'responded');
     });
   }, []);
   return /*#__PURE__*/React.createElement("div", {
@@ -129,19 +129,7 @@ export var Toolbar = function Toolbar(_ref) {
     style: {
       marginLeft: 6
     }
-  }), onToggleFullscreen ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: isFullScreen ? useT('离开全屏') : useT('进入全屏')
-  }, isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  }) : /*#__PURE__*/React.createElement(FullscreenOutlined, {
-    onClick: onToggleFullscreen,
-    style: {
-      marginLeft: 12
-    }
-  })) : null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React.createElement(Tooltip, {
     title: useT('执行代码')
   }, /*#__PURE__*/React.createElement(PlayCircleOutlined, {
     onClick: onExecuteCode,

package/dist/slots/CodeEditor/index.js

@@ -16,6 +16,7 @@ import { useSiteData, useLocale } from 'dumi';
 import { debounce, noop } from 'lodash-es';
 import { replaceInsertCss, execute, compile } from "./utils";
 import { Toolbar, EDITOR_TABS } from "./Toolbar";
+import { Loading } from "../Loading";
 import styles from "./index.module.less";
 loader.config({
   'vs/nls': {
@@ -149,6 +150,11 @@ export var CodeEditor = function CodeEditor(_ref) {
       });
     }
   }, []);
+  useEffect(function () {
+    if (monacoRef.current) {
+      monacoRef.current.setValue(currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2));
+    }
+  }, [currentEditorTab]);
   var onCodeChange = useCallback(function (value) {
     if (currentEditorTab === EDITOR_TABS.JAVASCRIPT) {
       setCode(value);
@@ -177,9 +183,9 @@ export var CodeEditor = function CodeEditor(_ref) {
     }
   }, /*#__PURE__*/React.createElement(MonacoEditor, {
     language: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? 'javascript' : 'json',
-    value: currentEditorTab === EDITOR_TABS.JAVASCRIPT ? code : JSON.stringify(data, null, 2),
+    value: code,
     path: relativePath,
-    loading: "Loading...",
+    loading: /*#__PURE__*/React.createElement(Loading, null),
     options: {
       readOnly: currentEditorTab === EDITOR_TABS.DATA,
       automaticLayout: true,

package/dist/slots/CodePreview/CodeHeader.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { PageHeader, Tooltip, Space, Divider } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import { useT } from "../hooks";
-import { getGithubSourceUrl } from "../utils";
+import { getGithubSourceURL } from "../utils";
 import styles from "./CodeHeader.module.less";
 
 /**
@@ -18,7 +18,7 @@ export var CodeHeader = function CodeHeader(_ref) {
     subTitle: /*#__PURE__*/React.createElement(Tooltip, {
       title: useT('在 GitHub 上编辑')
     }, /*#__PURE__*/React.createElement("a", {
-      href: getGithubSourceUrl(githubUrl, relativePath, 'examples'),
+      href: getGithubSourceURL(githubUrl, relativePath, 'examples'),
       target: "_blank",
       rel: "noopener noreferrer",
       className: styles.editOnGtiHubButton

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

@@ -10,24 +10,22 @@
   flex-direction: column;
 
   .header {
-    flex: 0
   }
 
   .content {
-    width: 100%;
-    height: 100%;
     position: relative;
+    flex: 1;
+    min-height: 0;
   
     :global(#playgroundScriptContainer) {
-      flex: 1;
       position: relative;
       width: 100%;
       height: 100%;
 
       :global(#container) {
+        position: relative;
         width: 100%;
         height: 100%;
-        position: relative;
       }
     }
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { ExamplesPage } from '../../typings';
+import { ExampleTopic } from '../../types';
 declare type CodeRunnerProps = {
     topic: string;
     example: string;
     demo: string;
-    exampleTopics: ExamplesPage.ExampleTopic[];
+    exampleTopics: ExampleTopic[];
     notFound?: React.Element;
 };
 /**

package/dist/slots/CodeRunner/index.js

@@ -40,7 +40,8 @@ export var CodeRunner = function CodeRunner(_ref) {
   var _useSiteData = useSiteData(),
       themeConfig = _useSiteData.themeConfig;
 
-  var githubUrl = themeConfig.githubUrl;
+  var githubUrl = themeConfig.githubUrl,
+      playground = themeConfig.playground;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -71,6 +72,7 @@ export var CodeRunner = function CodeRunner(_ref) {
     onError: setError,
     onFullscreen: setFullscreen,
     onDestroy: noop,
-    onReady: noop
+    onReady: noop,
+    playground: playground
   }));
 };

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

@@ -1,10 +1,11 @@
+import { Demo, ExampleTopic } from '../../types';
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-export declare function getExampleTopicMap(exampleTopics: ExamplesPage.ExampleTopic[]): Map<string, ExamplesPage.Demo>;
+export declare function getExampleTopicMap(exampleTopics: ExampleTopic[]): Map<string, Demo>;
 /**
  * 从 Context 信息中，获取到 Example 相关的信息，用于页面渲染
  */
-export declare function getDemoInfo(exampleTopics: ExamplesPage.ExampleTopic[], topic: string, example: string, demo: string): ExamplesPage.Demo | undefined;
+export declare function getDemoInfo(exampleTopics: ExampleTopic[], topic: string, example: string, demo: string): Demo;

package/dist/slots/CodeRunner/utils.js

@@ -5,12 +5,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { map } from 'lodash-es';
+
 /**
  * 将数据结构转化成 map，便于后续检索的速度
  * @param exampleTopics
  * @returns
  */
-
 export function getExampleTopicMap(exampleTopics) {
   var exampleTopicMap = new Map();
   map(exampleTopics, function (topic) {

package/dist/slots/Detail/News.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 export interface NewsProps {
     index?: number;
     type: IC;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IC } from '../../types';
 import { NewsProps } from './News';
 declare type DetailButtonProps = {
     text: IC;

package/dist/slots/Detail/index.js

@@ -81,7 +81,7 @@ export var Detail = function Detail(_ref) {
         link = _ref2.link,
         shape = _ref2.shape;
     return /*#__PURE__*/React.createElement("a", {
-      key: text,
+      key: ic(text),
       className: cx(styles.buttonLink, styles[type || ''], type === 'primary' ? 'primary-button' : 'common-button'),
       style: _objectSpread({
         borderRadius: shape === 'square' ? '4px' : '1000px'

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

@@ -1,39 +1,4 @@
 import React from 'react';
-export interface PlayGroundItemProps {
-    source: string;
-    examples: PlayGroundItemProps[];
-    babeledSource: string;
-    absolutePath?: string;
-    relativePath?: string;
-    screenshot?: string;
-    recommended?: boolean;
-    filename: string;
-    title?: string;
-    location?: Location;
-    playground?: {
-        container?: string;
-        playgroundDidMount?: string;
-        playgroundWillUnmount?: string;
-        dependencies?: {
-            [key: string]: string;
-        };
-        devDependencies?: {
-            [key: string]: string;
-        };
-        htmlCodeTemplate?: string;
-    };
-}
-export interface TreeItem {
-    title?: string;
-    value?: string;
-    key?: string;
-    children?: any;
-    icon?: string;
-    relativePath?: string;
-    filename?: string;
-    screenshot?: string;
-    node?: any;
-}
 export interface ExampleSiderProps {
     /**
      * 当前 Example (受控)