jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): useAntdForm

Browse Source
This commit is contained in:
Fu Diwei
2024-12-25 14:51:32 +08:00
parent c9024c5611
commit 4d0f7c2e02
43 changed files with 779 additions and 677 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/access/AccessEditFormSSHConfig.tsx
View File

@@ -7,25 +7,26 @@ import { createSchemaFieldRule } from "antd-zod";
import { z } from "zod";
import { Upload as UploadIcon } from "lucide-react";
import { useAntdForm } from "@/hooks";
import { type SSHAccessConfig } from "@/domain/access";
import { readFileContent } from "@/utils/file";
type AccessEditFormSSHConfigModelType = Partial<SSHAccessConfig>;
type AccessEditFormSSHConfigModelValues = Partial<SSHAccessConfig>;
export type AccessEditFormSSHConfigProps = {
form: FormInstance;
formName: string;
disabled?: boolean;
model?: AccessEditFormSSHConfigModelType;
onModelChange?: (model: AccessEditFormSSHConfigModelType) => void;
model?: AccessEditFormSSHConfigModelValues;
onModelChange?: (model: AccessEditFormSSHConfigModelValues) => void;
};
const initModel = () => {
const initFormModel = (): AccessEditFormSSHConfigModelValues => {
return {
host: "127.0.0.1",
port: 22,
username: "root",
} as AccessEditFormSSHConfigModelType;
};
};
const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChange }: AccessEditFormSSHConfigProps) => {
@@ -71,21 +72,21 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
.and(z.string().refine((v) => !v || form.getFieldValue("key"), { message: t("access.form.ssh_key.placeholder") })),
});
const formRule = createSchemaFieldRule(formSchema);
const formInst = form as FormInstance<z.infer<typeof formSchema>>;
const { form: formInst, formProps } = useAntdForm<z.infer<typeof formSchema>>({
form: form,
initialValues: model ?? initFormModel(),
});
const [initialValues, setInitialValues] = useState<Partial<z.infer<typeof formSchema>>>(model ?? initModel());
const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
useDeepCompareEffect(() => {
setInitialValues(model ?? initModel());
setKeyFileList(model?.key?.trim() ? [{ uid: "-1", name: "sshkey", status: "done" }] : []);
}, [model]);
const [keyFileList, setKeyFileList] = useState<UploadFile[]>([]);
const handleFormChange = (_: unknown, fields: AccessEditFormSSHConfigModelType) => {
onModelChange?.(fields);
const handleFormChange = (_: unknown, values: z.infer<typeof formSchema>) => {
onModelChange?.(values as AccessEditFormSSHConfigModelValues);
};
const handleUploadChange: UploadProps["onChange"] = async ({ file }) => {
const handleKeyFileChange: UploadProps["onChange"] = async ({ file }) => {
if (file && file.status !== "removed") {
formInst.setFieldValue("key", (await readFileContent(file.originFileObj ?? (file as unknown as File))).trim());
setKeyFileList([file]);
@@ -98,7 +99,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
};
return (
<Form form={form} disabled={disabled} initialValues={initialValues} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<Form {...formProps} form={formInst} disabled={disabled} layout="vertical" name={formName} onValuesChange={handleFormChange}>
<div className="flex space-x-2">
<div className="w-2/3">
<Form.Item name="host" label={t("access.form.ssh_host.label")} rules={[formRule]}>
@@ -138,7 +139,7 @@ const AccessEditFormSSHConfig = ({ form, formName, disabled, model, onModelChang
<Input.TextArea autoComplete="new-password" hidden placeholder={t("access.form.ssh_key.placeholder")} value={formInst.getFieldValue("key")} />
</Form.Item>
<Form.Item label={t("access.form.ssh_key.label")} tooltip={<span dangerouslySetInnerHTML={{ __html: t("access.form.ssh_key.tooltip") }}></span>}>
<Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleUploadChange}>
<Upload beforeUpload={() => false} fileList={keyFileList} maxCount={1} onChange={handleKeyFileChange}>
<Button icon={<UploadIcon size={16} />}>{t("access.form.ssh_key.upload")}</Button>
</Upload>
</Form.Item>