feat(layout): ProHelp support more feature (#6970)

* docs: add more docs * add hrml render * fix: new fetch function * fix ts error * fix ts error * fix ts error * 增加debug 来 * 增加debug 来 * chore: update package locks * 支持名词列表 * 支持名词列表 * 支持名词列表 * 支持名词列表 * 支持名词列表 * 支持名词列表
ant-design · Apr 25, 2023 · b445d0b · b445d0b
1 parent 26cbe28
commit b445d0b
Show file tree

Hide file tree

Showing 20 changed files with 3,599 additions and 1,106 deletions.
diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "@umijs/test-utils": "^3.5.40",
     "@umijs/utils": "^4.0.66",
     "animated-scroll-to": "^2.3.0",
-    "antd": "^5.4.4",
+    "antd": "^5.4.5",
     "antd-style": "beta",
     "babel-loader": "^9.1.2",
     "babel-types": "^6.26.0",
@@ -102,7 +102,7 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.7",
     "dumi": "^2.1.21",
-    "dumi-theme-antd-style": "beta",
+    "dumi-theme-antd-style": "0.22.0",
     "esbuild": "^0.15.18",
     "esbuild-jest": "^0.5.0",
     "eslint": "^7.32.0",
@@ -128,7 +128,7 @@
     "np": "^6.5.0",
     "octokit": "^1.8.1",
     "polished": "^4.2.2",
-    "prettier": "~2.8.7",
+    "prettier": "~2.8.8",
     "prettier-plugin-organize-imports": "^2.3.4",
     "prettier-plugin-packagejson": "^2.4.3",
     "pretty-quick": "^3.1.3",
@@ -141,9 +141,10 @@
     "rc-util": "^5.30.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.5",
     "react-layout-kit": "^1.6.1",
     "react-lazy-load": "^4.0.1",
-    "react-markdown": "^4.3.1",
+    "react-markdown": "^8.0.7",
     "react-sortable-hoc": "^2.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "shiki-es": "^0.2.0",

diff --git a/packages/card/src/components/CheckCard/style.ts b/packages/card/src/components/CheckCard/style.ts
@@ -73,7 +73,7 @@ const genProStyle: GenerateStyle<ProListToken> = (token) => {
             height: '14px',
             marginBlock: '4px',
             background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
-            animationName: cardLoading,
+            animationName: cardLoading as unknown as string,
             animationDuration: '1.4s',
             animationTimingFunction: 'ease',
             animationIterationCount: 'infinite',

diff --git a/packages/card/src/components/Loading/style.ts b/packages/card/src/components/Loading/style.ts
@@ -34,7 +34,7 @@ const genProStyle: GenerateStyle<ProToken> = (token) => {
         background: `linear-gradient(90deg, rgba(54, 61, 64, 0.2), rgba(54, 61, 64, 0.4), rgba(54, 61, 64, 0.2))`,
         backgroundSize: '600% 600%',
         borderRadius: token.borderRadius,
-        animationName: cardLoading,
+        animationName: cardLoading as unknown as string,
         animationDuration: '1.4s',
         animationTimingFunction: 'ease',
         animationIterationCount: 'infinite',

diff --git a/packages/layout/src/components/Help/HelpProvide.tsx b/packages/layout/src/components/Help/HelpProvide.tsx
@@ -44,6 +44,15 @@ type ProHelpDataSourceContentType = {
    * image 图片类型的数据源子项内容。
    */
   image: ImageProps;
+
+  /**
+   * markdown 类型的渲染，支持 基本的 markdown 语法
+   * 会包在一个叫 inner-html 为 markdown 的 div 中
+   */
+  html: {
+    className: string;
+    children: string;
+  };
 };
 
 /**
@@ -111,13 +120,22 @@ export type ProHelpDataSource<ValueType = 'text'> = {
    * title 数据源项的标题。
    */
   title: string;
+
+  /**
+   * 在一页内加载所有的 children 内容
+   */
+  infiniteScrollFull?: boolean;
   /**
    * children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
    */
   children: {
     key: string;
     title: string;
-    children: ProHelpDataSourceChildren<ValueType>[];
+    /**
+     * 是否远程加载children
+     */
+    asyncLoad?: boolean;
+    children?: ProHelpDataSourceChildren<ValueType>[];
   }[];
 };
 
@@ -146,4 +164,11 @@ export const ProHelpProvide = React.createContext<{
     string,
     (item: ProHelpDataSourceChildren<any>, index: number) => React.ReactNode
   >;
+  /**
+   * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
+   */
+  onLoadContext?: (
+    key: React.Key,
+    context: ProHelpDataSource<any>['children'][number],
+  ) => Promise<ProHelpDataSourceChildren<any>[]>;
 }>({ dataSource: [], valueTypeMap: new Map() });