:construction: create html - > react

dashboard/src/components/studio/term/TermCreate.tsx

@@ -1,9 +1,17 @@
-import { ProForm, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
-import { Layout } from "antd";
 import { useIntl } from "react-intl";
-import { message } from "antd";
+import { Button, Form, message } from "antd";
+import {
+	ModalForm,
+	ProForm,
+	ProFormText,
+	ProFormTextArea,
+} from "@ant-design/pro-components";
+import { PlusOutlined } from "@ant-design/icons";
 
 import SelectLang from "../SelectLang";
+import { ITermResponse } from "../../api/Term";
+import { get } from "../../../request";
+import { useState } from "react";
 
 interface IFormData {
 	word: string;
@@ -16,22 +24,101 @@ interface IFormData {
 }
 
 type IWidgetDictCreate = {
-	studio: string | undefined;
+	studio?: string;
+	edit?: boolean;
+	wordId?: string;
+	word?: string;
 };
-const Widget = (param: IWidgetDictCreate) => {
+const Widget = (prop: IWidgetDictCreate) => {
 	const intl = useIntl();
-	/*
-	const onLangChange = (value: string) => {
-		console.log(`selected ${value}`);
+	const [form] = Form.useForm<IFormData>();
+	const [lang, setLang] = useState("");
+
+	const waitTime = (time: number = 100) => {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				resolve(true);
+			}, time);
+		});
 	};
-*/
+	const editTrigger = (
+		<span>
+			{intl.formatMessage({
+				id: "buttons.edit",
+			})}
+		</span>
+	);
+	const createTrigger = (
+		<Button type="primary">
+			<PlusOutlined />
+			{intl.formatMessage({
+				id: "buttons.create",
+			})}
+		</Button>
+	);
 	return (
-		<Layout>
-			<ProForm<IFormData>
-				onFinish={async (values: IFormData) => {
-					// TODO
-					console.log(values);
-					message.success(intl.formatMessage({ id: "flashes.success" }));
+		<>
+			<ModalForm<IFormData>
+				title={intl.formatMessage({
+					id: prop.edit ? "buttons.edit" : "buttons.create",
+				})}
+				trigger={prop.edit ? editTrigger : createTrigger}
+				form={form}
+				autoFocusFirstInput
+				modalProps={{
+					destroyOnClose: true,
+					onCancel: () => console.log("run"),
+				}}
+				submitTimeout={2000}
+				onFinish={async (values) => {
+					await waitTime(2000);
+					console.log(values.word);
+					message.success("提交成功");
+					return true;
+				}}
+				request={async () => {
+					if (
+						typeof prop.edit !== "undefined" &&
+						prop.edit === true
+					) {
+						// 如果是编辑，就从服务器拉取数据。
+						let url = "/v2/terms/" + (prop.edit ? prop.wordId : "");
+						console.log(url);
+						const res = await get<ITermResponse>(url);
+						console.log(res);
+						setLang(res.data.language);
+						return {
+							word: res.data.word,
+							tag: res.data.tag,
+							meaning: res.data.meaning,
+							meaning2: res.data.other_meaning,
+							note: res.data.note,
+							lang: res.data.language,
+							channel: res.data.channal,
+						};
+					} else if (typeof prop.word !== "undefined") {
+						setLang("zh-Hans");
+						return {
+							word: prop.word ? prop.word : "",
+							tag: "",
+							meaning: "",
+							meaning2: "",
+							note: "",
+							lang: "zh-Hans",
+							channel: "",
+						};
+					} else {
+						setLang("zh-Hans");
+						return {
+							word: "",
+							tag: "",
+							meaning: "",
+							meaning2: "",
+							note: "",
+							lang: "zh-Hans",
+							channel: "",
+						};
+					}
 				}}
 			>
 				<ProForm.Group>
@@ -39,56 +126,83 @@ const Widget = (param: IWidgetDictCreate) => {
 						width="md"
 						name="word"
 						required
-						label={intl.formatMessage({ id: "dict.fields.word.label" })}
+						label={intl.formatMessage({
+							id: "dict.fields.word.label",
+						})}
 						rules={[
 							{
 								required: true,
-								message: intl.formatMessage({ id: "channel.create.message.noname" }),
+								message: intl.formatMessage({
+									id: "channel.create.message.noname",
+								}),
 							},
 						]}
 					/>
-				</ProForm.Group>
-				<ProForm.Group>
 					<ProFormText
 						width="md"
 						name="tag"
-						tooltip={intl.formatMessage({ id: "term.fields.description.tooltip" })}
-						label={intl.formatMessage({ id: "term.fields.description.label" })}
+						tooltip={intl.formatMessage({
+							id: "term.fields.description.tooltip",
+						})}
+						label={intl.formatMessage({
+							id: "term.fields.description.label",
+						})}
 					/>
 				</ProForm.Group>
 				<ProForm.Group>
 					<ProFormText
 						width="md"
 						name="meaning"
-						tooltip={intl.formatMessage({ id: "term.fields.meaning.tooltip" })}
-						label={intl.formatMessage({ id: "term.fields.meaning.label" })}
+						tooltip={intl.formatMessage({
+							id: "term.fields.meaning.tooltip",
+						})}
+						label={intl.formatMessage({
+							id: "term.fields.meaning.label",
+						})}
 					/>
-				</ProForm.Group>
-				<ProForm.Group>
 					<ProFormText
 						width="md"
 						name="meaning2"
-						tooltip={intl.formatMessage({ id: "term.fields.meaning2.tooltip" })}
-						label={intl.formatMessage({ id: "term.fields.meaning2.label" })}
+						tooltip={intl.formatMessage({
+							id: "term.fields.meaning2.tooltip",
+						})}
+						label={intl.formatMessage({
+							id: "term.fields.meaning2.label",
+						})}
 					/>
 				</ProForm.Group>
 				<ProForm.Group>
 					<ProFormText
 						width="md"
 						name="channel"
-						tooltip={intl.formatMessage({ id: "term.fields.channel.tooltip" })}
-						label={intl.formatMessage({ id: "term.fields.channel.label" })}
+						tooltip={intl.formatMessage({
+							id: "term.fields.channel.tooltip",
+						})}
+						label={intl.formatMessage({
+							id: "term.fields.channel.label",
+						})}
 					/>
+
+					<Form.Item
+						name="lang"
+						label={intl.formatMessage({
+							id: "forms.fields.lang.label",
+						})}
+					>
+						<SelectLang lang={lang} />
+					</Form.Item>
 				</ProForm.Group>
 				<ProForm.Group>
-					<div>语言</div>
-					<SelectLang />
-				</ProForm.Group>
-				<ProForm.Group>
-					<ProFormTextArea name="note" label={intl.formatMessage({ id: "forms.fields.note.label" })} />
+					<ProFormTextArea
+						name="note"
+						width="xl"
+						label={intl.formatMessage({
+							id: "forms.fields.note.label",
+						})}
+					/>
 				</ProForm.Group>
-			</ProForm>
-		</Layout>
+			</ModalForm>
+		</>
 	);
 };
 

dashboard/src/components/template/MdTpl.tsx

@@ -0,0 +1,8 @@
+interface IWidgetMdTpl {
+	name?: string;
+}
+const Widget = ({ name }: IWidgetMdTpl) => {
+	return <span>tpl name: {name}</span>;
+};
+
+export default Widget;

dashboard/src/components/template/MdView.tsx

@@ -0,0 +1,11 @@
+import { XmlToReact } from "./utilities";
+
+interface IWidget {
+	html: string;
+}
+const Widget = ({ html }: IWidget) => {
+	const jsx = XmlToReact(html);
+	return <div>{jsx}</div>;
+};
+
+export default Widget;

dashboard/src/components/template/utilities.ts

@@ -0,0 +1,70 @@
+import React from "react";
+import MdTpl from "./MdTpl";
+
+export function XmlToReact(text: string): React.ReactNode[] {
+	const parser = new DOMParser();
+	const xmlDoc = parser.parseFromString(
+		"<root><root>" + text + "</root></root>",
+		"text/xml"
+	);
+	const x = xmlDoc.documentElement.childNodes;
+	return convert(x[0]);
+
+	function getAttr(node: ChildNode, key: number): Object {
+		const ele = node as Element;
+		const attr = ele.attributes;
+		let output: any = { key: key };
+		for (let i = 0; i < attr.length; i++) {
+			if (attr[i].nodeType === 2) {
+				let key: string = attr[i].nodeName;
+				output[key] = attr[i].nodeValue;
+			}
+		}
+		return output;
+	}
+
+	function convert(node: ChildNode): React.ReactNode[] {
+		let output: React.ReactNode[] = [];
+
+		for (let i = 0; i < node.childNodes.length; i++) {
+			const value = node.childNodes[i];
+			console.log(value.nodeName, value.nodeType, value.nodeValue);
+
+			switch (value.nodeType) {
+				case 1: //element node
+					switch (value.nodeName) {
+						case "MdTpl":
+							output.push(
+								React.createElement(
+									MdTpl,
+									getAttr(value, i),
+									convert(value)
+								)
+							);
+							break;
+						default:
+							output.push(
+								React.createElement(
+									value.nodeName,
+									getAttr(value, i),
+									convert(value)
+								)
+							);
+							break;
+					}
+
+					break;
+				case 2: //attribute node
+					return [];
+				case 3: //text node
+					output.push(value.nodeValue);
+					break;
+				case 8:
+					return [];
+				case 9:
+					return [];
+			}
+		}
+		return output;
+	}
+}