Skip to content

Commit edcb706

Browse files
ReaJasonReaJason
committed
refactor: change field location
1 parent 0b2dd23 commit edcb706

File tree

4 files changed

+158
-122
lines changed

4 files changed

+158
-122
lines changed

‎web/app/components/memshell/jreversion-field.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Controller, type UseFormReturn } from "react-hook-form";
2+
import { useTranslation } from "react-i18next";
3+
import {
4+
Field,
5+
FieldContent,
6+
FieldError,
7+
FieldLabel,
8+
} from "@/components/ui/field";
9+
import {
10+
Select,
11+
SelectContent,
12+
SelectItem,
13+
SelectTrigger,
14+
SelectValue,
15+
} from "@/components/ui/select";
16+
import type { MemShellFormSchema } from "@/types/schema";
17+
18+
const JDKVersion = [
19+
{ name: "Java6", value: "50" },
20+
{ name: "Java8", value: "52" },
21+
{ name: "Java9", value: "53" },
22+
{ name: "Java11", value: "55" },
23+
{ name: "Java17", value: "61" },
24+
{ name: "Java21", value: "65" },
25+
];
26+
27+
export function JREVersionFormField({
28+
form,
29+
}: Readonly<{
30+
form: UseFormReturn<MemShellFormSchema>;
31+
}>) {
32+
const { t } = useTranslation(["common"]);
33+
return (
34+
<Controller
35+
control={form.control}
36+
name="targetJdkVersion"
37+
render={({ field, fieldState }) => (
38+
<Field orientation="vertical" data-invalid={fieldState.invalid}>
39+
<FieldContent>
40+
<FieldLabel htmlFor="targetJdkVersion">
41+
{t("common:targetJdkVersion")}
42+
</FieldLabel>
43+
<Select
44+
onValueChange={(v) => {
45+
if (Number.parseInt(v ?? "0", 10) >= 53) {
46+
form.setValue("byPassJavaModule", true);
47+
} else {
48+
form.setValue("byPassJavaModule", false);
49+
}
50+
field.onChange(v);
51+
}}
52+
value={field.value}
53+
>
54+
<SelectTrigger
55+
id="targetJdkVersion"
56+
aria-invalid={fieldState.invalid}
57+
>
58+
<SelectValue
59+
data-placeholder={t("common:placeholders.select")}
60+
/>
61+
</SelectTrigger>
62+
<SelectContent>
63+
{JDKVersion.map((v) => (
64+
<SelectItem key={v.value} value={v.value}>
65+
{v.name}
66+
</SelectItem>
67+
))}
68+
</SelectContent>
69+
</Select>
70+
{fieldState.error && <FieldError errors={[fieldState.error]} />}
71+
</FieldContent>
72+
</Field>
73+
)}
74+
/>
75+
);
76+
}

‎web/app/components/memshell/main-config-card.tsx‎

Lines changed: 5 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {
2525
Field,
2626
FieldContent,
2727
FieldDescription,
28-
FieldError,
2928
FieldLabel,
3029
} from "@/components/ui/field";
3130
import { Label } from "@/components/ui/label";
@@ -50,15 +49,8 @@ import {
5049
} from "@/types/memshell";
5150
import type { MemShellFormSchema } from "@/types/schema";
5251
import { Spinner } from "../ui/spinner";
53-
54-
const JDKVersion = [
55-
{ name: "Java6", value: "50" },
56-
{ name: "Java8", value: "52" },
57-
{ name: "Java9", value: "53" },
58-
{ name: "Java11", value: "55" },
59-
{ name: "Java17", value: "61" },
60-
{ name: "Java21", value: "65" },
61-
];
52+
import { JREVersionFormField } from "./jreversion-field";
53+
import { ServerVersionFormField } from "./serverversion-field";
6254

6355
const shellToolIcons: Record<ShellToolType, JSX.Element> = {
6456
[ShellToolType.Behinder]: <ShieldOffIcon className="h-4 w-4" />,
@@ -294,54 +286,9 @@ export default function MainConfigCard({
294286
</Field>
295287
)}
296288
/>
297-
<Controller
298-
control={form.control}
299-
name="targetJdkVersion"
300-
render={({ field, fieldState }) => (
301-
<Field
302-
orientation="vertical"
303-
data-invalid={fieldState.invalid}
304-
>
305-
<FieldContent>
306-
<FieldLabel htmlFor="targetJdkVersion">
307-
{t("common:targetJdkVersion")}
308-
</FieldLabel>
309-
<Select
310-
onValueChange={(v) => {
311-
if (Number.parseInt(v ?? "0", 10) >= 53) {
312-
form.setValue("byPassJavaModule", true);
313-
} else {
314-
form.setValue("byPassJavaModule", false);
315-
}
316-
field.onChange(v);
317-
}}
318-
value={field.value}
319-
>
320-
<SelectTrigger
321-
id="targetJdkVersion"
322-
aria-invalid={fieldState.invalid}
323-
>
324-
<SelectValue
325-
data-placeholder={t("common:placeholders.select")}
326-
/>
327-
</SelectTrigger>
328-
<SelectContent>
329-
{JDKVersion.map((v) => (
330-
<SelectItem key={v.value} value={v.value}>
331-
{v.name}
332-
</SelectItem>
333-
))}
334-
</SelectContent>
335-
</Select>
336-
{fieldState.error && (
337-
<FieldError errors={[fieldState.error]} />
338-
)}
339-
</FieldContent>
340-
</Field>
341-
)}
342-
/>
289+
<ServerVersionFormField form={form} />
343290
</div>
344-
<div className="grid grid-cols-1">
291+
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
345292
<Controller
346293
control={form.control}
347294
name="shellTool"
@@ -377,6 +324,7 @@ export default function MainConfigCard({
377324
</Field>
378325
)}
379326
/>
327+
<JREVersionFormField form={form} />
380328
</div>
381329
<div className="flex gap-4 mt-4 flex-col lg:grid lg:grid-cols-2 2xl:grid 2xl:grid-cols-3">
382330
<Controller

‎web/app/components/memshell/serverversion-field.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
2+
import { useTranslation } from "react-i18next";
3+
import {
4+
Field,
5+
FieldContent,
6+
FieldError,
7+
FieldLabel,
8+
} from "@/components/ui/field";
9+
import {
10+
Select,
11+
SelectContent,
12+
SelectItem,
13+
SelectTrigger,
14+
SelectValue,
15+
} from "@/components/ui/select";
16+
import type { MemShellFormSchema } from "@/types/schema";
17+
18+
export function ServerVersionFormField({
19+
form,
20+
}: Readonly<{
21+
form: UseFormReturn<MemShellFormSchema>;
22+
}>) {
23+
const { t } = useTranslation(["common"]);
24+
const server = useWatch({ control: form.control, name: "server" });
25+
const serverVersionOptions = getServerVersionOptions(server);
26+
return (
27+
<Controller
28+
control={form.control}
29+
name="serverVersion"
30+
render={({ field, fieldState }) => (
31+
<Field orientation="vertical" data-invalid={fieldState.invalid}>
32+
<FieldContent>
33+
<FieldLabel htmlFor="serverVersion">
34+
{t("common:serverVersion")}
35+
</FieldLabel>
36+
<Select onValueChange={field.onChange} value={field.value}>
37+
<SelectTrigger
38+
id="serverVersion"
39+
aria-invalid={fieldState.invalid}
40+
>
41+
<SelectValue
42+
data-placeholder={t("common:placeholders.select")}
43+
/>
44+
</SelectTrigger>
45+
<SelectContent>
46+
{serverVersionOptions.map((v) => (
47+
<SelectItem key={v.value} value={v.value}>
48+
{v.name}
49+
</SelectItem>
50+
))}
51+
</SelectContent>
52+
</Select>
53+
{fieldState.error && <FieldError errors={[fieldState.error]} />}
54+
</FieldContent>
55+
</Field>
56+
)}
57+
/>
58+
);
59+
}
60+
61+
function getServerVersionOptions(server: string) {
62+
if (server === "TongWeb") {
63+
return [
64+
{ name: "6", value: "6" },
65+
{ name: "7", value: "7" },
66+
{ name: "8", value: "8" },
67+
];
68+
} else if (server === "Jetty") {
69+
return [
70+
{ name: "6", value: "6" },
71+
{ name: "7+", value: "7+" },
72+
{ name: "12", value: "12" },
73+
];
74+
}
75+
return [{ name: "Unknown", value: "Unknown" }];
76+
}

‎web/app/components/memshell/tabs/shelltype-field.tsx‎

Lines changed: 1 addition & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { Controller, type UseFormReturn, useWatch } from "react-hook-form";
22
import { useTranslation } from "react-i18next";
3-
import {
4-
Field,
5-
FieldContent,
6-
FieldError,
7-
FieldLabel,
8-
} from "@/components/ui/field";
3+
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
94
import { Input } from "@/components/ui/input";
105
import {
116
Select,
@@ -26,13 +21,7 @@ export function ShellTypeFormField({
2621
}>) {
2722
const { t } = useTranslation(["memshell", "common"]);
2823
const shellType = useWatch({ control: form.control, name: "shellType" });
29-
const server = useWatch({ control: form.control, name: "server" });
30-
const needSelectServerVersion =
31-
(server === "TongWeb" && shellType.endsWith("Valve")) ||
32-
(server === "Jetty" &&
33-
(shellType === "Handler" || shellType === "JakartaHandler"));
3424
const needUrlPattern = !notNeedUrlPattern(shellType);
35-
const serverVersionOptions = getServerVersionOptions(server);
3625
return (
3726
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
3827
<Controller
@@ -84,59 +73,6 @@ export function ShellTypeFormField({
8473
</Field>
8574
)}
8675
/>
87-
<Controller
88-
control={form.control}
89-
name="serverVersion"
90-
render={({ field, fieldState }) => (
91-
<Field
92-
className={cn("gap-1", needSelectServerVersion ? "grid" : "hidden")}
93-
orientation="vertical"
94-
data-invalid={fieldState.invalid}
95-
>
96-
<FieldContent>
97-
<FieldLabel htmlFor="serverVersion">
98-
{t("common:serverVersion")}
99-
</FieldLabel>
100-
<Select onValueChange={field.onChange} value={field.value}>
101-
<SelectTrigger
102-
id="serverVersion"
103-
aria-invalid={fieldState.invalid}
104-
>
105-
<SelectValue
106-
data-placeholder={t("common:placeholders.select")}
107-
/>
108-
</SelectTrigger>
109-
<SelectContent>
110-
{serverVersionOptions.map((v) => (
111-
<SelectItem key={v.value} value={v.value}>
112-
{v.name}
113-
</SelectItem>
114-
))}
115-
</SelectContent>
116-
</Select>
117-
{fieldState.error && <FieldError errors={[fieldState.error]} />}
118-
</FieldContent>
119-
</Field>
120-
)}
121-
/>
12276
</div>
12377
);
12478
}
125-
126-
function getServerVersionOptions(server: string) {
127-
let serverVersionOptions = [] as { name: string; value: string }[];
128-
if (server === "TongWeb") {
129-
serverVersionOptions = [
130-
{ name: "6", value: "6" },
131-
{ name: "7", value: "7" },
132-
{ name: "8", value: "8" },
133-
];
134-
} else if (server === "Jetty") {
135-
serverVersionOptions = [
136-
{ name: "6", value: "6" },
137-
{ name: "7+", value: "7+" },
138-
{ name: "12", value: "12" },
139-
];
140-
}
141-
return serverVersionOptions;
142-
}

0 commit comments

Comments
 (0)