@antv/dumi-theme-antv 0.2.2 → 0.3.0-beta.10

package/dist/pages/Example/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * 具体单个案例的页面
+ */
+declare const Example: React.FC;
+export default Example;

package/dist/pages/Example/index.js

@@ -0,0 +1,115 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useContext, useEffect, useState } from 'react';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
+import { get } from 'lodash-es';
+import { Layout } from 'antd';
+import { useLocale, useSiteData } from 'dumi';
+import { SEO } from "../../slots/SEO";
+import { Header } from "../../slots/Header";
+import { ExampleSider } from "../../slots/ExampleSider";
+import { CodeRunner } from "../../slots/CodeRunner";
+import { getDemoInfo } from "../../slots/CodeRunner/utils";
+import { ThemeAntVContext } from "../../context";
+import styles from "./index.module.less";
+import { getCurrentTitle } from "./utils";
+var Sider = Layout.Sider,
+    Content = Layout.Content;
+
+/**
+ * 具体单个案例的页面
+ */
+var Example = function Example() {
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var nav = useNavigate();
+
+  var _useParams = useParams(),
+      topic = _useParams.topic,
+      example = _useParams.example;
+  /** 示例页面的元数据信息 */
+
+
+  var metaData = useContext(ThemeAntVContext);
+  var locale = useLocale();
+
+  var _useSiteData = useSiteData(),
+      themeConfig = _useSiteData.themeConfig;
+
+  var exampleTopics = metaData.meta.exampleTopics;
+  var demo = hash.slice(1);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentDemo = _useState2[0],
+      setCurrentDemo = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isCollapsed = _useState4[0],
+      setIsCollapsed = _useState4[1];
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      title = _useState6[0],
+      setTitle = _useState6[1];
+
+  useEffect(function () {
+    if (topic && example && demo) {
+      var targetDemoInfo = getDemoInfo(exampleTopics, topic, example, demo);
+      setCurrentDemo(targetDemoInfo);
+      setTitle(getCurrentTitle(exampleTopics, topic, example));
+    }
+  }, [topic, example, hash]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.example
+  }, /*#__PURE__*/React.createElement(SEO, {
+    title: title[locale.id],
+    lang: locale.id
+  }), /*#__PURE__*/React.createElement(Header, {
+    isHomePage: false
+  }), /*#__PURE__*/React.createElement(Layout, {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(Sider, {
+    collapsedWidth: 0,
+    width: 250,
+    trigger: null,
+    collapsible: true,
+    collapsed: isCollapsed,
+    className: styles.menuSider,
+    theme: "light"
+  }, currentDemo && /*#__PURE__*/React.createElement(ExampleSider, {
+    showExampleDemoTitle: true,
+    currentDemo: currentDemo,
+    onDemoClicked: function onDemoClicked(example) {
+      var demoId = example.id,
+          targetExample = example.targetExample,
+          targetTopic = example.targetTopic; // eg: /zh/examples/case/area/#area1
+
+      var newURL = "/".concat(locale.id, "/examples/").concat(targetTopic === null || targetTopic === void 0 ? void 0 : targetTopic.id, "/").concat(targetExample === null || targetExample === void 0 ? void 0 : targetExample.id, "/#").concat(demoId);
+      nav(newURL);
+    },
+    exampleTopics: exampleTopics
+  })), /*#__PURE__*/React.createElement(Content, {
+    className: styles.content
+  }, topic && example && /*#__PURE__*/React.createElement(CodeRunner, {
+    exampleTopics: exampleTopics,
+    topic: topic,
+    example: example,
+    demo: demo,
+    size: get(themeConfig, 'editor.size', 0.38)
+  }))));
+};
+
+export default Example;

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

@@ -0,0 +1,82 @@
+@import 'antd/es/style/themes/default.less';
+@import '../../slots/_.less';
+
+:global(#root) {
+  width: 100%;
+  height: 100%;
+}
+
+.example {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .container {
+    flex: 1;
+    background-color: #fff;
+
+    .content {
+      position: relative;
+      height: 100%;
+
+      .left {
+        height: 100%;
+      }
+
+      .right {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.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/Example/utils.d.ts

@@ -0,0 +1 @@
+export declare function getCurrentTitle(exampleTopics: any, topic: any, example: any): any;

package/dist/pages/Example/utils.js

@@ -0,0 +1,9 @@
+export function getCurrentTitle(exampleTopics, topic, example) {
+  var topicItem = exampleTopics.find(function (item) {
+    return item.id === topic;
+  });
+  var exmapleItem = topicItem.examples.find(function (item) {
+    return item.id === example;
+  });
+  return exmapleItem.title;
+}

package/dist/pages/Examples/components/Accouncement/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AnnouncementProps } from '../../types';
+/**
+ * 通用公告组件，根据 bannerId 来更新 localStorage
+ */
+export declare const Announcement: React.FC<AnnouncementProps>;

package/dist/pages/Examples/components/Accouncement/index.js

@@ -0,0 +1,60 @@
+var _excluded = ["message", "bannerId", "localStorageId"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useEffect } from 'react';
+import { Alert } from 'antd';
+import { get } from 'lodash-es';
+import { NotificationFilled } from '@ant-design/icons';
+import cx from 'classnames';
+import styles from "./index.module.less";
+/**
+ * 通用公告组件，根据 bannerId 来更新 localStorage
+ */
+
+export var Announcement = function Announcement(props) {
+  var message = props.message,
+      bannerId = props.bannerId,
+      localStorageId = props.localStorageId,
+      alertProps = _objectWithoutProperties(props, _excluded);
+
+  var isBrowser = typeof window !== 'undefined';
+  /** 公告 id 更新，更新下本地缓存 */
+
+  useEffect(function () {
+    try {
+      var item = isBrowser && localStorage.getItem(localStorageId) || '{}';
+
+      if (get(JSON.parse(item), [bannerId]) !== false && isBrowser) {
+        localStorage.setItem(localStorageId, JSON.stringify(_defineProperty({}, bannerId, true)));
+      }
+    } catch (e) {
+      console.error(e); // eslint-disable-line no-console
+    }
+  }, [bannerId]);
+  return get(JSON.parse(isBrowser && localStorage.getItem(localStorageId) || '{}'), [bannerId]) ? /*#__PURE__*/React.createElement(Alert, _extends({
+    message: message,
+    type: "info",
+    showIcon: true,
+    icon: /*#__PURE__*/React.createElement(NotificationFilled, {
+      style: {
+        height: '16px',
+        color: '#4776E8'
+      }
+    }),
+    closable: true,
+    className: cx('banner-announcement', styles.bannerAnnouncement),
+    onClose: function onClose() {
+      // 关闭公告
+      if (isBrowser) {
+        localStorage.setItem(localStorageId, JSON.stringify(_defineProperty({}, bannerId, false)));
+      }
+    }
+  }, alertProps)) : null;
+};

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

@@ -0,0 +1,9 @@
+.bannerAnnouncement {
+  background: #e6f7ff;
+  border-color: rgba(71, 118, 232, 0.65);
+  color: #4776e8;
+
+  a {
+    color: #4776e8 !important;
+  }
+}

package/dist/pages/Examples/components/Article/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Article: React.FC<any>;

package/dist/pages/Examples/components/Article/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Layout } from 'antd';
+import styles from "./index.module.less";
+export var Article = function Article(props) {
+  return /*#__PURE__*/React.createElement(Layout.Content, {
+    className: styles.article
+  }, /*#__PURE__*/React.createElement("article", props));
+};

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

@@ -0,0 +1,2 @@
+.article {
+}

package/dist/pages/Examples/components/ExampleTopicMenu/components/LeftMenu/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LeftMenuProps } from '../../../../types';
+/**
+ * LeftMenu
+ *
+ * @param {LeftMenuProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+export declare const LeftMenu: React.FC<LeftMenuProps>;

package/dist/pages/Examples/components/ExampleTopicMenu/components/LeftMenu/index.js

@@ -0,0 +1,74 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { useState } from 'react';
+import { Anchor, Menu } from 'antd';
+import { useLocale } from 'dumi';
+import { createFromIconfontCN } from '@ant-design/icons';
+import styles from "../../../../index.module.less";
+var MenuIcon = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_470089_1lnym745udm.js' // generated by iconfont.cn
+
+});
+/**
+ * LeftMenu
+ *
+ * @param {LeftMenuProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+
+export var LeftMenu = function LeftMenu(props) {
+  var exampleTopics = props.exampleTopics;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
+
+  var locale = useLocale();
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openKeys = _useState4[0],
+      setOpenKeys = _useState4[1];
+
+  return /*#__PURE__*/React.createElement(Anchor, {
+    className: styles.galleryAnchor
+  }, /*#__PURE__*/React.createElement(Menu, {
+    mode: "inline",
+    selectedKeys: selectedKeys,
+    style: {
+      height: '100%'
+    },
+    openKeys: openKeys,
+    onOpenChange: function onOpenChange(currentOpenKeys) {
+      return setOpenKeys(currentOpenKeys);
+    },
+    forceSubMenuRender: true
+  }, exampleTopics.map(function (topic) {
+    return /*#__PURE__*/React.createElement(Menu.SubMenu, {
+      key: topic.id,
+      title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuIcon, {
+        className: styles.menuIcon,
+        type: "icon-".concat(topic.icon)
+      }), /*#__PURE__*/React.createElement("span", null, topic.title[locale.id]))
+    }, topic.examples.map(function (example) {
+      return /*#__PURE__*/React.createElement(Menu.Item, {
+        key: example.id
+      }, /*#__PURE__*/React.createElement(Anchor.Link, {
+        href: "#category-".concat(example.id.replace(/\s/g, '')),
+        title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, example.title[locale.id]))
+      }));
+    }));
+  })));
+};

package/dist/pages/Examples/components/ExampleTopicMenu/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { LeftMenuProps } from '../../types';
+/**
+ * Examples 左侧 LeftMenu
+ *
+ * @param {LeftMenuProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ */
+export declare const ExampleTopicMenu: React.FC<LeftMenuProps>;

package/{es/builtins/Example.js → dist/pages/Examples/components/ExampleTopicMenu/index.js}

@@ -10,39 +10,53 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useRef, useEffect, useState } from 'react';
-import './Example.less';
-export default (function (props) {
-  var elm = useRef();
-
-  var _useState = useState(0),
+import React, { useState } from 'react';
+import { Affix, Layout as AntLayout } from 'antd';
+import Drawer from 'rc-drawer';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
+import { useMedia } from 'react-use';
+import { LeftMenu } from "./components/LeftMenu";
+import styles from "../../index.module.less";
+/**
+ * Examples 左侧 LeftMenu
+ *
+ * @param {LeftMenuProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ */
+
+export var ExampleTopicMenu = function ExampleTopicMenu(props) {
+  var exampleTopics = props.exampleTopics;
+  var isWide = useMedia('(min-width: 767.99px)', true);
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  useEffect(function () {
-    setHeight(elm.current.contentWindow.document.documentElement.scrollHeight);
-  }, [elm]);
-  return props.route.meta.examplePath && /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-example-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-example-wrapper-toolbar"
-  }, props.route.meta.description || props.route.meta.title, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("button", {
-    className: "__dumi-default-icon",
-    onClick: function onClick() {
-      return elm.current.contentWindow.location.reload();
-    }
-  }), /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
-    rel: "noopener noreferrer",
-    href: props.route.meta.examplePath,
-    className: "__dumi-default-icon"
-  }))), /*#__PURE__*/React.createElement("iframe", {
-    src: props.route.meta.examplePath,
-    ref: elm,
+      drawOpen = _useState2[0],
+      setDrawOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Affix, {
+    offsetTop: 0,
+    className: styles.affix,
     style: {
-      height: height
+      height: isWide ? '100vh' : 'inherit'
+    }
+  }, isWide ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AntLayout.Sider, {
+    width: "auto",
+    theme: "light",
+    className: styles.sider
+  }, /*#__PURE__*/React.createElement(LeftMenu, {
+    exampleTopics: exampleTopics
+  }))) : /*#__PURE__*/React.createElement(Drawer, {
+    handler: drawOpen ? /*#__PURE__*/React.createElement(MenuFoldOutlined, {
+      className: styles.menuSwitch
+    }) : /*#__PURE__*/React.createElement(MenuUnfoldOutlined, {
+      className: styles.menuSwitch
+    }),
+    wrapperClassName: styles.menuDrawer,
+    onChange: function onChange(open) {
+      return setDrawOpen(!!open);
     },
-    title: "dumi"
-  }));
-});
+    width: 280
+  }, /*#__PURE__*/React.createElement(LeftMenu, {
+    exampleTopics: exampleTopics
+  })));
+};

package/dist/pages/Examples/components/GalleryPageContent/DemoCard/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DemoCardProps } from '../../../types';
+/**
+ * DEMO 的卡片预览
+ *
+ * @param {DemoCardProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+export declare const DemoCard: React.FC<DemoCardProps>;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link, useLocale } from 'dumi';
+import { Badge } from 'antd';
+import styles from "../../../index.module.less";
+/**
+ * DEMO 的卡片预览
+ *
+ * @param {DemoCardProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+
+export var DemoCard = function DemoCard(props) {
+  var demo = props.demo,
+      topicId = props.topicId,
+      exampleId = props.exampleId;
+  var locale = useLocale();
+
+  var renderCardInternal = function renderCardInternal() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
+      src: demo.screenshot || 'https://gw.alipayobjects.com/os/s/prod/antv/assets/image/screenshot-placeholder-b8e70.png',
+      alt: demo.title[locale.id]
+    })));
+  };
+
+  return /*#__PURE__*/React.createElement(Link, {
+    className: styles.galleryCardLink,
+    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
+  }, renderCardInternal()) : renderCardInternal(), /*#__PURE__*/React.createElement("h4", null, demo.title[locale.id]));
+};

package/dist/pages/Examples/components/GalleryPageContent/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { GalleryPageContentProps } from '../../types';
+/**
+ * Examples 首页内容预览组件
+ *
+ * @param {GalleryPageContentProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+export declare const GalleryPageContent: React.FC<GalleryPageContentProps>;

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

@@ -0,0 +1,81 @@
+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; }
+
+import React from 'react';
+import { useLocale } from 'dumi';
+import { DemoCard } from "./DemoCard";
+import styles from "../../index.module.less";
+/**
+ * Examples 首页内容预览组件
+ *
+ * @param {GalleryPageContentProps} props 相关参数，详见类型定义
+ * @returns {React.FC} React.FC
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+
+export var GalleryPageContent = function GalleryPageContent(props) {
+  var exampleTopics = props.exampleTopics;
+  var locale = useLocale(); // TODO: 公告功能待后续补充
+  // /** 获取上新的 demo. 直接用英文 title 作为 id */
+  // const demosOnTheNew = useMemo((): Array<NewDemo> => {
+  //   const result: NewDemo[] = [];
+  //   each(allDemosInCategory, (categoryDemos, category) => {
+  //     const newDemos = filter(categoryDemos, (d) => d.new);
+  //     // 大于4个新增 demo 或全部新增，则直接使用 category 作为代替
+  //     if (
+  //       size(newDemos) > 6 ||
+  //       (size(newDemos) && size(newDemos) === size(categoryDemos))
+  //     ) {
+  //       result.push({
+  //         title: category,
+  //         id: getDemoCategory(newDemos[0], 'en'),
+  //         category,
+  //       });
+  //     } else {
+  //       each(newDemos, (demo) =>
+  //         result.push({
+  //           title: demo.title[locale.id],
+  //           id: demo.title.en,
+  //           category: getDemoCategory(demo),
+  //         }),
+  //       );
+  //     }
+  //   });
+  //   return result;
+  // }, [allDemosInCategory, allDemos, locale.id]);
+
+  var flattenExamples = exampleTopics.reduce(function (prev, current) {
+    var exampleWithTopic = current.examples.map(function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        targetTopic: current
+      });
+    });
+    return prev.concat(exampleWithTopic);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.gallery
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.galleryContent
+  }, flattenExamples.map(function (example, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: i
+    }, /*#__PURE__*/React.createElement("h2", {
+      id: "category-".concat(example.id.replace(/\s/g, ''))
+    }, example.title[locale.id]), /*#__PURE__*/React.createElement("ul", {
+      className: styles.galleryList
+    }, example.demos.map(function (demo) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: styles.galleryCard,
+        key: demo.id,
+        title: demo.title[locale.id]
+      }, /*#__PURE__*/React.createElement(DemoCard, {
+        demo: demo,
+        topicId: example.targetTopic.id,
+        exampleId: example.id
+      }));
+    })));
+  })));
+};

package/dist/pages/Examples/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Examples 页面
+ *
+ * @author YuZhanglong <loveyzl1123@gmail.com>
+ */
+declare const Example: () => JSX.Element;
+export default Example;