UNPKG

7.42 kBTypeScriptView Raw
1import type { ImageProps } from 'antd';
2import type { AnchorHTMLAttributes } from 'react';
3import 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 */
17type 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 */
66type 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 */
75type 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 */
82export 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 */
103export 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 */
135export 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}>;
156export {};
157
\No newline at end of file