Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-13 16:40:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor input components

Browse Source
This commit is contained in:
grimsi
2025-06-05 22:53:20 +02:00
parent 7d3bb60321
commit 748a75b675
6 changed files with 52 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gameyfin/src/main/frontend/components/administration/ConfigFormField.tsx
+6 -6
View File
@@ -15,27 +15,27 @@ export default function ConfigFormField({configElement, ...props}: any) {
);
}
switch (configElement.type) {
case "Boolean":
switch (configElement.type.toLowerCase()) {
case "boolean":
return (
<CheckboxInput label={configElement.description} name={configElement.key} {...props}/>
);
case "String":
case "string":
return (
<Input label={configElement.description} name={configElement.key}
type={props.type && "text"} {...props}/>
);
case "Float":
case "float":
return (
<Input label={configElement.description} name={configElement.key} type="number"
step="0.1" {...props}/>
);
case "Int":
case "int":
return (
<Input label={configElement.description} name={configElement.key} type="number"
step="1" {...props}/>
);
case "Array":
case "array":
return (
<ArrayInput label={configElement.description} name={configElement.key} type="text" {...props}/>
);
gameyfin/src/main/frontend/components/general/input/ArrayInput.tsx
+3 -4
View File
@@ -1,8 +1,7 @@
import {FieldArray, useField} from "formik";
import {Button, Chip, Input, Popover, PopoverContent, PopoverTrigger} from "@heroui/react";
import {KeyboardEvent, useState} from "react";
import {Plus, XCircle} from "@phosphor-icons/react";
import {SmallInfoField} from "Frontend/components/general/SmallInfoField";
import {Plus} from "@phosphor-icons/react";
// @ts-ignore
const ArrayInput = ({label, ...props}) => {
@@ -16,7 +15,7 @@ const ArrayInput = ({label, ...props}) => {
function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
if (event.key === "Enter" || event.key == "Tab" || event.key === ",") {
event.preventDefault();
newElementValue
.split(",")
.map((value) => value.trim())
@@ -58,7 +57,7 @@ const ArrayInput = ({label, ...props}) => {
<div className="min-h-6 text-danger">
{meta.touched && meta.error && meta.error.trim().length > 0 && (
<SmallInfoField icon={XCircle} message={meta.error}/>
meta.error
)}
</div>
</div>
gameyfin/src/main/frontend/components/general/input/CheckboxInput.tsx
+12 -6
View File
@@ -1,22 +1,28 @@
import {useField} from "formik";
import {Checkbox} from "@heroui/react";
import {Checkbox, CheckboxGroup} from "@heroui/react";
// @ts-ignore
const CheckboxInput = ({label, ...props}) => {
// @ts-ignore
const [field] = useField(props);
const [field, meta] = useField(props);
return (
<div className="flex flex-row flex-1 items-center gap-2 mb-6">
<CheckboxGroup
className="flex flex-row flex-1 items-baseline gap-2"
isInvalid={!!meta.error}
errorMessage={meta.initialError || meta.error}
value={field.value ? [field.name] : []}
>
<Checkbox
className="items-baseline"
{...field}
{...props}
id={field.name}
isSelected={field.value}
// @ts-ignore
value={field.name}
>
{label}
</Checkbox>
</div>
</CheckboxGroup>
);
}
gameyfin/src/main/frontend/components/general/input/Input.tsx
+9 -16
View File
@@ -1,7 +1,5 @@
import {useField} from "formik";
import {Input as NextUiInput} from "@heroui/react";
import {SmallInfoField} from "Frontend/components/general/SmallInfoField";
import {XCircle} from "@phosphor-icons/react";
// @ts-ignore
const Input = ({label, showErrorUntouched = false, ...props}) => {
@@ -9,20 +7,15 @@ const Input = ({label, showErrorUntouched = false, ...props}) => {
const [field, meta] = useField(props);
return (
<div className="flex flex-col flex-1 items-start gap-2">
<NextUiInput
{...props}
{...field}
id={label}
label={label}
isInvalid={(meta.touched || showErrorUntouched) && !!meta.error}
/>
<div className="min-h-6 text-danger">
{(meta.touched || showErrorUntouched) && meta.error && meta.error.trim().length > 0 && (
<SmallInfoField icon={XCircle} message={meta.error}/>
)}
</div>
</div>
<NextUiInput
className="min-h-20"
{...props}
{...field}
id={label}
label={label}
isInvalid={(meta.touched || showErrorUntouched) && !!meta.error}
errorMessage={meta.initialError || meta.error}
/>
);
}
gameyfin/src/main/frontend/components/general/input/SelectInput.tsx
+16 -11
View File
@@ -4,21 +4,26 @@ import {Select, SelectItem} from "@heroui/react";
// @ts-ignore
const SelectInput = ({label, values, ...props}) => {
// @ts-ignore
const [field] = useField(props);
const [field, meta] = useField(props);
const items = values.map((v: string) => ({key: v, label: v}));
return (
<Select
{...field}
{...props}
label={label}
items={items}
selectedKeys={[field.value]}
disallowEmptySelection
>
{(item: { key: string, label: string }) => <SelectItem>{item.label}</SelectItem>}
</Select>
<div>
<Select
className="min-h-20"
{...field}
{...props}
label={label}
items={items}
selectedKeys={[field.value]}
isInvalid={!!meta.error}
errorMessage={meta.initialError || meta.error}
disallowEmptySelection
>
{(item: { key: string, label: string }) => <SelectItem>{item.label}</SelectItem>}
</Select>
</div>
);
}
gameyfin/src/main/frontend/components/general/input/PluginConfigFormField.tsx → gameyfin/src/main/frontend/components/general/plugin/PluginConfigFormField.tsx
+6 -5
View File
@@ -12,18 +12,19 @@ export default function PluginConfigFormField({pluginConfigMetadata, ...props}:
<SelectInput label={metadata.label}
name={metadata.key}
values={metadata.allowedValues}
isRequired={metadata.required}
{...props}/>
);
}
switch (metadata.type) {
case "Boolean":
switch (metadata.type.toLowerCase()) {
case "boolean":
return (
<CheckboxInput label={metadata.label}
name={metadata.key}
{...props}/>
);
case "String":
case "string":
return (
<Input label={metadata.label}
name={metadata.key}
@@ -31,7 +32,7 @@ export default function PluginConfigFormField({pluginConfigMetadata, ...props}:
isRequired={metadata.required}
{...props}/>
);
case "Float":
case "float":
return (
<Input label={metadata.label}
name={metadata.key}
@@ -40,7 +41,7 @@ export default function PluginConfigFormField({pluginConfigMetadata, ...props}:
step="0.1"
{...props}/>
);
case "Int":
case "int":
return (
<Input label={metadata.label}
name={metadata.key}