Add text to app's signup table

This commit is contained in:
Yang Luo 2023-10-15 17:37:33 +08:00
parent f3d4b45a0f
commit 2dd1dc582f
3 changed files with 44 additions and 6 deletions

View File

@ -30,10 +30,10 @@ import ProviderTable from "./table/ProviderTable";
import SignupTable from "./table/SignupTable";
import PromptPage from "./auth/PromptPage";
import copy from "copy-to-clipboard";
import ThemeEditor from "./common/theme/ThemeEditor";
import {Controlled as CodeMirror} from "react-codemirror2";
import "codemirror/lib/codemirror.css";
import ThemeEditor from "./common/theme/ThemeEditor";
require("codemirror/theme/material-darker.css");
require("codemirror/mode/htmlmixed/htmlmixed");

View File

@ -529,6 +529,10 @@ class SignupPage extends React.Component {
);
} else if (signupItem.name === "Agreement") {
return AgreementModal.renderAgreementFormItem(application, required, tailFormItemLayout, this);
} else if (signupItem.name.startsWith("Text ")) {
return (
<div dangerouslySetInnerHTML={{__html: signupItem.label}} />
);
}
}

View File

@ -14,10 +14,16 @@
import React from "react";
import {DeleteOutlined, DownOutlined, UpOutlined} from "@ant-design/icons";
import {Button, Col, Input, Row, Select, Switch, Table, Tooltip} from "antd";
import {Button, Col, Input, Popover, Row, Select, Switch, Table, Tooltip} from "antd";
import * as Setting from "../Setting";
import i18next from "i18next";
import {Controlled as CodeMirror} from "react-codemirror2";
import "codemirror/lib/codemirror.css";
require("codemirror/theme/material-darker.css");
require("codemirror/mode/htmlmixed/htmlmixed");
const {Option} = Select;
class SignupTable extends React.Component {
@ -81,6 +87,11 @@ class SignupTable extends React.Component {
{name: "Phone", displayName: i18next.t("general:Phone")},
{name: "Invitation code", displayName: i18next.t("application:Invitation code")},
{name: "Agreement", displayName: i18next.t("signup:Agreement")},
{name: "Text 1", displayName: i18next.t("signup:Text 1")},
{name: "Text 2", displayName: i18next.t("signup:Text 2")},
{name: "Text 3", displayName: i18next.t("signup:Text 3")},
{name: "Text 4", displayName: i18next.t("signup:Text 4")},
{name: "Text 5", displayName: i18next.t("signup:Text 5")},
];
const getItemDisplayName = (text) => {
@ -165,11 +176,30 @@ class SignupTable extends React.Component {
},
},
{
title: i18next.t("provider:Label"),
title: i18next.t("signup:Label"),
dataIndex: "label",
key: "label",
width: "150px",
width: "200px",
render: (text, record, index) => {
if (record.name.startsWith("Text ")) {
return (
<Popover placement="right" content={
<div style={{width: "900px", height: "300px"}} >
<CodeMirror value={text}
options={{mode: "htmlmixed", theme: "material-darker"}}
onBeforeChange={(editor, data, value) => {
this.updateField(table, index, "label", value);
}}
/>
</div>
} title={i18next.t("signup:Label HTML")} trigger="click">
<Input value={text} style={{marginBottom: "10px"}} onChange={e => {
this.updateField(table, index, "label", e.target.value);
}} />
</Popover>
);
}
return (
<Input value={text} onChange={e => {
this.updateField(table, index, "label", e.target.value);
@ -178,11 +208,15 @@ class SignupTable extends React.Component {
},
},
{
title: i18next.t("provider:Placeholder"),
title: i18next.t("signup:Placeholder"),
dataIndex: "placeholder",
key: "placeholder",
width: "150px",
width: "200px",
render: (text, record, index) => {
if (record.name.startsWith("Text ")) {
return null;
}
return (
<Input value={text} onChange={e => {
this.updateField(table, index, "placeholder", e.target.value);