1 | import type { ImageProps } from 'antd';
|
2 | import type { AnchorHTMLAttributes } from 'react';
|
3 | import React from 'react';
|
4 | /**
|
5 | * ProHelp 数据源子项内容类型。
|
6 | * 该类型定义了多种数据源子项内容类型,例如 h1、h2、link、text、image等。
|
7 | * 其中,link 和 inlineLink 属性都是链接类型的数据源子项内容,不同的是 inlineLink 是内联链接,而 link 是块级链接。
|
8 | *
|
9 | * @typedef {object} ProHelpDataSourceContentType
|
10 | * @property {string} h1 标题1类型的数据源子项内容。
|
11 | * @property {string} h2 标题2类型的数据源子项内容。
|
12 | * @property {{ children: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>} link 链接类型的数据源子项内容。
|
13 | * @property {{ children: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>} inlineLink 内联链接类型的数据源子项内容。
|
14 | * @property {string} text 文本类型的数据源子项内容。
|
15 | * @property {ImageProps} image 图片类型的数据源子项内容。
|
16 | */
|
17 | type ProHelpDataSourceContentType = {
|
18 | /**
|
19 | * h1 标题1类型的数据源子项内容。
|
20 | */
|
21 | h1: string;
|
22 | /**
|
23 | * h2 标题1类型的数据源子项内容。
|
24 | */
|
25 | h2: string;
|
26 | /**
|
27 | * link 链接类型的数据源子项内容。
|
28 | */
|
29 | link: {
|
30 | children: string;
|
31 | } & AnchorHTMLAttributes<HTMLAnchorElement>;
|
32 | /**
|
33 | * 行内链接类型的数据源子项内容。
|
34 | */
|
35 | inlineLink: {
|
36 | children: string;
|
37 | } & AnchorHTMLAttributes<HTMLAnchorElement>;
|
38 | /**
|
39 | * navigation 类型链接,或切换菜单
|
40 | */
|
41 | navigationSwitch: {
|
42 | selectKey: string;
|
43 | children: string;
|
44 | };
|
45 | /**
|
46 | * text 文本类型的数据源子项内容。
|
47 | */
|
48 | text: string;
|
49 | /**
|
50 | * image 图片类型的数据源子项内容。
|
51 | */
|
52 | image: ImageProps;
|
53 | /**
|
54 | * markdown 类型的渲染,支持 基本的 markdown 语法
|
55 | * 会包在一个叫 inner-html 为 markdown 的 div 中
|
56 | */
|
57 | html: {
|
58 | className: string;
|
59 | children: string;
|
60 | };
|
61 | };
|
62 | /**
|
63 | * ProHelp 数据源子项内容类型的类型,可能的取值为 "h1"、"h2"、"link"、"inlineLink"、"text" 和 "image"。
|
64 | * @typedef {'h1' | 'h2' | 'link' | 'inlineLink' | 'text' | 'image'} ProHelpDataSourceChildrenType
|
65 | */
|
66 | type ProHelpDataSourceChildrenType = Extract<keyof ProHelpDataSourceContentType, any>;
|
67 | /**
|
68 | * ProHelp 数据源子项内容属性类型。
|
69 | * @template ValueType 数据源项值的类型,默认为 'text'。
|
70 | * 该类型定义了一个名为 children 的对象属性,根据 valueType 属性的值来确定该属性对象的具体类型,
|
71 | * 如果 valueType 的类型是 ProHelpDataSourceChildrenType,
|
72 | * 则使用 ProHelpDataSourceContentType 中 ProHelpDataSourceChildrenType 所对应的属性类型;
|
73 | * 否则,使用 ProHelpDataSourceContentType 中 ValueType 所对应的属性类型。
|
74 | */
|
75 | type ProHelpDataSourceContentProps<ValueTypeMap, ValueType> = ValueType extends ProHelpDataSourceChildrenType ? ProHelpDataSourceContentType[ValueType] : ValueType extends keyof ValueTypeMap ? ValueTypeMap[ValueType] : ProHelpDataSourceContentType[ProHelpDataSourceChildrenType];
|
76 | /**
|
77 | * ProHelp 数据源子项类型。
|
78 | * @template ValueTypeMap 数据源项值的类型,默认为 'text'。
|
79 | * @property {(ValueType | ProHelpDataSourceChildrenType)} valueType 数据源子项值的类型,可以为指定的类型,也可以是自定义类型。
|
80 | * @property {ProHelpDataSourceContentProps<ValueType>} children 包含数据源子项内容的对象。
|
81 | */
|
82 | export type ProHelpDataSourceChildren<ValueTypeMap = {
|
83 | text: string;
|
84 | }> = {
|
85 | /**
|
86 | * 包含数据源子项内容的对象。
|
87 | * @template ValueType 数据源项值的类型,默认为 'text'。
|
88 | */
|
89 | valueType: ValueTypeMap extends Map<infer ValueType, any> ? ValueType : keyof ValueTypeMap | ProHelpDataSourceChildrenType;
|
90 | /**
|
91 | * 数据源子项值的类型。
|
92 | * @typedef {(ValueTypeMap | ProHelpDataSourceChildrenType)} ProHelpDataSourceChildrenType
|
93 | */
|
94 | children: ProHelpDataSourceContentProps<ValueTypeMap, keyof ValueTypeMap | ProHelpDataSourceChildrenType>;
|
95 | };
|
96 | /**
|
97 | * ProHelp 数据源类型。
|
98 | * @template ValueType 数据源项值的类型,默认为 'text'。
|
99 | * @property {string} key 数据源项的唯一标识。
|
100 | * @property {string} title 数据源项的标题。
|
101 | * @property children 包含子项的数组,每个子项包含一个唯一标识,标题以及子子项数组。
|
102 | */
|
103 | export type ProHelpDataSource<ValueType = 'text'> = {
|
104 | /**
|
105 | * key 数据源项的唯一标识
|
106 | */
|
107 | key: string;
|
108 | /**
|
109 | * title 数据源项的标题。
|
110 | */
|
111 | title: string;
|
112 | /**
|
113 | * 在一页内加载所有的 children 内容
|
114 | */
|
115 | infiniteScrollFull?: boolean;
|
116 | /**
|
117 | * children 包含子项的数组,每个子项包含一个唯一标识,标题以及子子项数组。
|
118 | */
|
119 | children: {
|
120 | key: string;
|
121 | title: string;
|
122 | /**
|
123 | * 是否远程加载children
|
124 | */
|
125 | asyncLoad?: boolean;
|
126 | children?: ProHelpDataSourceChildren<ValueType>[];
|
127 | }[];
|
128 | };
|
129 | /**
|
130 | * 这段代码定义了一个名为 ProHelpProvide 的 React 上下文对象,并且指定了该上下文对象的初始值为 { dataSource: [] }。
|
131 | * 这个上下文对象中包含了一个名为 dataSource 的属性,该属性的值是一个数组,类型为 ProHelpDataSource<any>[]。
|
132 | * 该上下文对象通常用于在 React 组件树中共享数据,即可以通过在组件中使用 ProHelpProvide.Provider 包裹一组组件,
|
133 | * 将 dataSource 和 valueTypeMap 数据源传递给这些组件,这些组件即可从上下文中获取 dataSource 数据源,实现数据的共享和传递。
|
134 | */
|
135 | export declare const ProHelpProvide: React.Context<{
|
136 | /**
|
137 | * 帮助文档的数据源,包含一组帮助文档数据,每个数据包含标题和内容等信息。
|
138 | */
|
139 | dataSource: ProHelpDataSource<any>[];
|
140 | /**
|
141 | * 帮助组件的子组件,用于渲染自定义的帮助内容。
|
142 | * 是一个键值对结构的集合,其中:
|
143 | * 键(key)为字符串类型;
|
144 | * 值(value)为一个函数类型,该函数接受两个参数:一个名为 item 的 ProHelpDataSourceChildren 类型的对象,表示一个 ProHelp 数据源子项的子项;
|
145 | * 一个名为 index 的数字类型参数,表示该子项在父级子项数组中的索引。
|
146 | * 该函数返回一个 ReactNode 类型的元素,用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
|
147 | * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射,从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
|
148 | * 在实际使用时,我们可以通过判断子项的 valueType 属性,从 valueTypeMap 中取出对应的渲染函数,再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
|
149 | */
|
150 | valueTypeMap: Map<string, (item: ProHelpDataSourceChildren<any>, index: number) => React.ReactNode>;
|
151 | /**
|
152 | * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
|
153 | */
|
154 | onLoadContext?: ((key: React.Key, context: ProHelpDataSource<any>['children'][number]) => Promise<ProHelpDataSourceChildren<any>[]>) | undefined;
|
155 | }>;
|
156 | export {};
|
157 |
|
\ | No newline at end of file |