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

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,139 @@
+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."); }
+
+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 { Layout } from 'antd';
+import { useLocale } from 'dumi';
+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";
+var Sider = Layout.Sider,
+    Content = Layout.Content;
+
+/**
+ * 具体单个案例的页面
+ */
+var Example = function Example() {
+  var _useLocation = useLocation(),
+      hash = _useLocation.hash;
+
+  var nav = useNavigate();
+
+  var _useParams = useParams(),
+      _useParams$language = _useParams.language,
+      language = _useParams$language === void 0 ? 'zh' : _useParams$language,
+      topic = _useParams.topic,
+      example = _useParams.example;
+  /** 示例页面的元数据信息 */
+
+
+  var metaData = useContext(ThemeAntVContext);
+  var locale = useLocale();
+  var exampleTopics = metaData.meta.exampleTopics;
+  var demo = hash.slice(1);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentDemo = _useState2[0],
+      setCurrentDemo = _useState2[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
+      });
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.example
+  }, /*#__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,
+    className: styles.sider,
+    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
+  }))));
+};
+
+export default Example;

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

@@ -0,0 +1,40 @@
+@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;
+
+    .sider {
+      height: 100%;
+
+      .exampleList {
+
+      }
+    }
+
+    .content {
+      position: relative;
+      height: 100%;
+
+      .left {
+        height: 100%;
+      }
+
+      .right {
+        height: 100%;
+      }
+    }
+  }
+}

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/Table.js → dist/pages/Examples/components/ExampleTopicMenu/index.js}

@@ -10,47 +10,53 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useRef, useState } from 'react';
-import throttle from 'lodash.throttle';
-import './Table.less';
-
-var Table = function Table(_ref) {
-  var children = _ref.children;
-  var container = useRef();
+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),
-      leftFolded = _useState2[0],
-      setLeftFolded = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      rightFolded = _useState4[0],
-      setRightFolded = _useState4[1]; // watch content scroll to render folded shadow
-
-
-  useEffect(function () {
-    var elm = container.current;
-    var handler = throttle(function () {
-      setLeftFolded(elm.scrollLeft > 0);
-      setRightFolded(elm.scrollLeft < elm.scrollWidth - elm.offsetWidth);
-    }, 100);
-    handler();
-    elm.addEventListener('scroll', handler);
-    window.addEventListener('resize', handler);
-    return function () {
-      elm.removeEventListener('scroll', handler);
-      window.removeEventListener('resize', handler);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-table"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "__dumi-default-table-content",
-    ref: container,
-    "data-left-folded": leftFolded || undefined,
-    "data-right-folded": rightFolded || undefined
-  }, /*#__PURE__*/React.createElement("table", null, children)));
-};
-
-export default Table;
+      drawOpen = _useState2[0],
+      setDrawOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Affix, {
+    offsetTop: 0,
+    className: styles.affix,
+    style: {
+      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);
+    },
+    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, "/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;