@rspress-theme-anatole/theme-default 0.1.25 → 0.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/tabs.tsx +125 -113
- package/package.json +1 -1
package/components/tabs.tsx
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import React, { useState, Children, isValidElement } from 'react';
|
|
2
|
-
import ReactDOMServer from 'react-dom/server';
|
|
1
|
+
import React, { useState, useEffect, Children, isValidElement } from 'react';
|
|
2
|
+
// import ReactDOMServer from 'react-dom/server';
|
|
3
|
+
import { usePageData } from '@rspress/runtime';
|
|
3
4
|
|
|
4
5
|
interface TabItem {
|
|
5
6
|
label: string;
|
|
6
|
-
content:
|
|
7
|
+
content: React.ReactNode;
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
interface TabsProps {
|
|
@@ -11,113 +12,126 @@ interface TabsProps {
|
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
export const Tabs: React.FC<TabsProps> = ({ children }) => {
|
|
14
|
-
|
|
15
|
-
const outputItems: TabItem[] = [];
|
|
16
|
-
|
|
17
|
-
const convertToHTML = (node: any): string => {
|
|
18
|
-
// console.log(node);
|
|
19
|
-
if (node === null || node === undefined) return '';
|
|
20
|
-
|
|
21
|
-
if (typeof node === 'string' || typeof node === 'number') {
|
|
22
|
-
return String(node);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
if (Array.isArray(node)) {
|
|
26
|
-
return node.map(item => {
|
|
27
|
-
return convertToHTML(item);
|
|
28
|
-
}
|
|
29
|
-
).join('');
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (isValidElement(node)) {
|
|
33
|
-
const element = node as React.ReactElement;
|
|
34
|
-
const props = element.props as Record<string, any>;
|
|
35
|
-
|
|
36
|
-
if (element.type === React.Fragment) {
|
|
37
|
-
return convertToHTML(props.children);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
if (typeof element.type === 'string') {
|
|
41
|
-
// Build attributes string
|
|
42
|
-
const attributes = Object.entries(props)
|
|
43
|
-
.filter(([key]) => key !== 'children' && key !== 'className')
|
|
44
|
-
.map(([key, value]) => `${key}="${value}"`)
|
|
45
|
-
.concat(props.className ? [`class="${props.className}"`] : [])
|
|
46
|
-
.join(' ');
|
|
47
|
-
|
|
48
|
-
const attributeString = attributes ? ` ${attributes}` : '';
|
|
49
|
-
|
|
50
|
-
// Convert children to HTML
|
|
51
|
-
const childrenContent = props.children ? convertToHTML(props.children) : '';
|
|
15
|
+
const { page } = usePageData();
|
|
52
16
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
// Handle regular elements
|
|
60
|
-
return `<${element.type}${attributeString}>${childrenContent}</${element.type}>`;
|
|
61
|
-
}
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
// 触发 Rspress 的标题重新扫描
|
|
19
|
+
const event = new CustomEvent('rspress:content-updated');
|
|
20
|
+
window.dispatchEvent(event);
|
|
21
|
+
}, [children]); // 当内容更新时重新扫描
|
|
62
22
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
} catch (error) {
|
|
66
|
-
// return convertToHTML(props.children);
|
|
67
|
-
if (element) {
|
|
68
|
-
const modifiedElement = {
|
|
69
|
-
...element,
|
|
70
|
-
props: {
|
|
71
|
-
...(typeof element.props === 'object' && element.props !== null ? element.props : {}),
|
|
72
|
-
children: DealWithUrl(props.children)
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
// console.log(modifiedElement);
|
|
77
|
-
if (modifiedElement) {
|
|
78
|
-
try {
|
|
79
|
-
return ReactDOMServer.renderToStaticMarkup(modifiedElement);
|
|
80
|
-
}
|
|
81
|
-
catch {
|
|
82
|
-
return convertToHTML(props.children);
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
// Handle objects with props (like context providers)
|
|
90
|
-
if (node && typeof node === 'object' && 'props' in node) {
|
|
91
|
-
return convertToHTML((node as any).props.children);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
return '';
|
|
95
|
-
};
|
|
23
|
+
// console.log(children);
|
|
24
|
+
const outputItems: TabItem[] = [];
|
|
96
25
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
26
|
+
// const convertToHTML = (node: any): string => {
|
|
27
|
+
// // console.log(node);
|
|
28
|
+
// if (node === null || node === undefined) return '';
|
|
29
|
+
|
|
30
|
+
// if (typeof node === 'string' || typeof node === 'number') {
|
|
31
|
+
// return String(node);
|
|
32
|
+
// }
|
|
33
|
+
|
|
34
|
+
// if (Array.isArray(node)) {
|
|
35
|
+
// return node.map(item => {
|
|
36
|
+
// return convertToHTML(item);
|
|
37
|
+
// }
|
|
38
|
+
// ).join('');
|
|
39
|
+
// }
|
|
40
|
+
|
|
41
|
+
// if (isValidElement(node)) {
|
|
42
|
+
// const element = node as React.ReactElement;
|
|
43
|
+
// const props = element.props as Record<string, any>;
|
|
44
|
+
|
|
45
|
+
// if (element.type === React.Fragment) {
|
|
46
|
+
// return convertToHTML(props.children);
|
|
47
|
+
// }
|
|
48
|
+
|
|
49
|
+
// if (typeof element.type === 'string') {
|
|
50
|
+
// // Build attributes string
|
|
51
|
+
// const attributes = Object.entries(props)
|
|
52
|
+
// .filter(([key]) => key !== 'children' && key !== 'className')
|
|
53
|
+
// .map(([key, value]) => `${key}="${value}"`)
|
|
54
|
+
// .concat(props.className ? [`class="${props.className}"`] : [])
|
|
55
|
+
// .join(' ');
|
|
56
|
+
|
|
57
|
+
// const attributeString = attributes ? ` ${attributes}` : '';
|
|
58
|
+
|
|
59
|
+
// // Convert children to HTML
|
|
60
|
+
// const childrenContent = props.children ? convertToHTML(props.children) : '';
|
|
61
|
+
|
|
62
|
+
// // Handle void elements
|
|
63
|
+
// const voidElements = ['img', 'br', 'hr', 'input', 'meta', 'link'];
|
|
64
|
+
// if (voidElements.includes(element.type)) {
|
|
65
|
+
// return `<${element.type}${attributeString}>`;
|
|
66
|
+
// }
|
|
67
|
+
|
|
68
|
+
// // Handle regular elements
|
|
69
|
+
// return `<${element.type}${attributeString}>${childrenContent}</${element.type}>`;
|
|
70
|
+
// }
|
|
71
|
+
|
|
72
|
+
// try {
|
|
73
|
+
// return ReactDOMServer.renderToStaticMarkup(element);
|
|
74
|
+
// } catch (error) {
|
|
75
|
+
// // return convertToHTML(props.children);
|
|
76
|
+
// if (element) {
|
|
77
|
+
// const modifiedElement = {
|
|
78
|
+
// ...element,
|
|
79
|
+
// props: {
|
|
80
|
+
// ...(typeof element.props === 'object' && element.props !== null ? element.props : {}),
|
|
81
|
+
// children: DealWithUrl(props.children)
|
|
82
|
+
// }
|
|
83
|
+
// };
|
|
84
|
+
|
|
85
|
+
// // console.log(modifiedElement);
|
|
86
|
+
// if (modifiedElement) {
|
|
87
|
+
// try {
|
|
88
|
+
// return ReactDOMServer.renderToStaticMarkup(modifiedElement);
|
|
89
|
+
// }
|
|
90
|
+
// catch {
|
|
91
|
+
// return convertToHTML(props.children);
|
|
92
|
+
// }
|
|
93
|
+
// }
|
|
94
|
+
// }
|
|
95
|
+
// }
|
|
96
|
+
// }
|
|
97
|
+
|
|
98
|
+
// // Handle objects with props (like context providers)
|
|
99
|
+
// if (node && typeof node === 'object' && 'props' in node) {
|
|
100
|
+
// return convertToHTML((node as any).props.children);
|
|
101
|
+
// }
|
|
102
|
+
|
|
103
|
+
// return '';
|
|
104
|
+
// };
|
|
105
|
+
|
|
106
|
+
// function DealWithUrl(para: any): any {
|
|
107
|
+
// if (Array.isArray(para)) {
|
|
108
|
+
// return para.map((child: any) => {
|
|
109
|
+
// if (child && child.type) {
|
|
110
|
+
// if ("href" in child.props) {
|
|
111
|
+
// // console.log(child.props);
|
|
112
|
+
// if (child.props.children === "#") {
|
|
113
|
+
// return <a class={child.props.className} aria-hidden={child.props["aria-hidden"]} href={child.props.href}>#</a>;
|
|
114
|
+
// }
|
|
115
|
+
// else {
|
|
116
|
+
// return child.props.children;
|
|
117
|
+
// }
|
|
118
|
+
// }
|
|
119
|
+
// else if (child.props && child.props.children) {
|
|
120
|
+
// return {
|
|
121
|
+
// ...child,
|
|
122
|
+
// props: {
|
|
123
|
+
// ...child.props,
|
|
124
|
+
// children: DealWithUrl(child.props.children)
|
|
125
|
+
// }
|
|
126
|
+
// };
|
|
127
|
+
// }
|
|
128
|
+
// }
|
|
129
|
+
// return child;
|
|
130
|
+
// });
|
|
131
|
+
// } else {
|
|
132
|
+
// return para;
|
|
133
|
+
// }
|
|
134
|
+
// }
|
|
121
135
|
|
|
122
136
|
// function convertUrlsToLinks(content: string) {
|
|
123
137
|
// const urlPattern = /(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/g;
|
|
@@ -151,16 +165,14 @@ export const Tabs: React.FC<TabsProps> = ({ children }) => {
|
|
|
151
165
|
else {
|
|
152
166
|
const lastTab = outputItems[outputItems.length - 1];
|
|
153
167
|
if (lastTab) {
|
|
154
|
-
|
|
155
|
-
lastTab.content += htmlContent;
|
|
168
|
+
lastTab.content = <>{lastTab.content}{inputItem}</>;
|
|
156
169
|
}
|
|
157
170
|
}
|
|
158
171
|
}
|
|
159
172
|
else {
|
|
160
173
|
const lastTab = outputItems[outputItems.length - 1];
|
|
161
174
|
if (lastTab) {
|
|
162
|
-
|
|
163
|
-
lastTab.content += htmlContent;
|
|
175
|
+
lastTab.content = <>{lastTab.content}{inputItem}</>;
|
|
164
176
|
}
|
|
165
177
|
}
|
|
166
178
|
}
|
|
@@ -186,8 +198,8 @@ export const Tabs: React.FC<TabsProps> = ({ children }) => {
|
|
|
186
198
|
</button>
|
|
187
199
|
))}
|
|
188
200
|
</div>
|
|
189
|
-
<div className="tabs-content"
|
|
190
|
-
|
|
201
|
+
<div className="tabs-content">
|
|
202
|
+
{tabs.find((tab) => tab.label === activeTab)?.content}
|
|
191
203
|
</div>
|
|
192
204
|
|
|
193
205
|
<style>{`
|