llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-03 20:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Reduce code duplication in form item rendering

Browse Source
This commit is contained in:
okatu-loli
2024-09-24 18:17:43 +08:00
parent d769dc5199
commit 65c764e12d
1 changed files with 36 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
web/src/auth/SignupPage.js
View File

@ -50,6 +50,38 @@ const formItemLayout = {
},
};
const renderFormItem = (signupItem) => {
const commonProps = {
name: signupItem.name.toLowerCase(),
label: signupItem.label || signupItem.name,
rules: [
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
],
};
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item {...commonProps}>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item {...commonProps}>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
};
export const tailFormItemLayout = {
wrapperCol: {
xs: {
@ -694,217 +726,13 @@ class SignupPage extends React.Component {
);
} else if (signupItem.name === "Gender") {
if (!signupItem.type) {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
}
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
return renderFormItem(signupItem);
} else if (signupItem.name === "Bio") {
if (!signupItem.type || signupItem === "") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
}
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
return renderFormItem(signupItem);
} else if (signupItem.name === "Tag") {
if (!signupItem.type) {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
}
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
return renderFormItem(signupItem);
} else if (signupItem.name === "Education") {
if (!signupItem.type) {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
}
if (!signupItem.type || signupItem.type === "Input") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`signup:Please input your ${signupItem.label}!`),
},
]}
>
<Input placeholder={signupItem.placeholder} />
</Form.Item>
);
} else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
return (
<Form.Item
name={signupItem.name.toLowerCase()}
label={signupItem.label ? signupItem.label : signupItem.name}
rules={[
{
required: signupItem.required,
message: i18next.t(`Please select your ${signupItem.label || signupItem.name}!`),
},
]}
>
<Select
mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
placeholder={signupItem.placeholder}
showSearch={false}
options={signupItem.options.map(option => ({label: option, value: option}))}
/>
</Form.Item>
);
}
return renderFormItem(signupItem);
}
}