55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
import { FieldValues, FormStore, ResponseData } from "@modular-forms/solid";
|
|
import { Show } from "solid-js";
|
|
import { type JSX } from "solid-js";
|
|
import cx from "classnames";
|
|
|
|
interface SelectInputProps<T extends FieldValues, R extends ResponseData> {
|
|
formStore: FormStore<T, R>;
|
|
value: string;
|
|
options: JSX.Element;
|
|
selectProps: JSX.HTMLAttributes<HTMLSelectElement>;
|
|
label: JSX.Element;
|
|
error?: string;
|
|
required?: boolean;
|
|
topRightLabel?: JSX.Element;
|
|
class?: string;
|
|
}
|
|
|
|
export function SelectInput<T extends FieldValues, R extends ResponseData>(
|
|
props: SelectInputProps<T, R>,
|
|
) {
|
|
return (
|
|
<label
|
|
class={cx("form-control w-full", props.class)}
|
|
aria-disabled={props.formStore.submitting}
|
|
>
|
|
<div class="label">
|
|
<span
|
|
class="label-text block"
|
|
classList={{
|
|
"after:ml-0.5 after:text-primary after:content-['*']":
|
|
props.required,
|
|
}}
|
|
>
|
|
{props.label}
|
|
</span>
|
|
<Show when={props.topRightLabel}>
|
|
<span class="label-text-alt">{props.topRightLabel}</span>
|
|
</Show>
|
|
</div>
|
|
<select
|
|
{...props.selectProps}
|
|
required={props.required}
|
|
class="select select-bordered w-full"
|
|
value={props.value}
|
|
>
|
|
{props.options}
|
|
</select>
|
|
|
|
{props.error && (
|
|
<span class="label-text-alt font-bold text-error">{props.error}</span>
|
|
)}
|
|
</label>
|
|
);
|
|
}
|