120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
"use client";
|
|
import {
|
|
FieldValues,
|
|
Path,
|
|
RegisterOptions,
|
|
UseFormReturn,
|
|
} from "react-hook-form";
|
|
import SelectTemplate, {
|
|
Props as SelectTemplateProps,
|
|
StylesConfig,
|
|
} from "react-select";
|
|
import { cn } from "../../../helper/cn";
|
|
import dynamic from "next/dynamic";
|
|
import { CSSProperties } from "react";
|
|
|
|
interface SelectProps<T extends FieldValues>
|
|
extends Omit<SelectTemplateProps, "form"> {
|
|
label?: any;
|
|
name: Path<T>;
|
|
form: UseFormReturn<T> | any;
|
|
formOptions?: RegisterOptions<T>;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
}
|
|
|
|
const customStyles: StylesConfig<any, false> = {
|
|
control: (provided) => ({
|
|
...provided,
|
|
backgroundColor: "var(--color-base-100)",
|
|
borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
|
|
borderRadius: "0.5rem",
|
|
padding: "0.25rem",
|
|
boxShadow: "none",
|
|
"&:hover": {
|
|
borderColor: "color-mix(in oklab, var(--color-base-content) 20%, #0000);",
|
|
},
|
|
}),
|
|
option: (provided, state) => ({
|
|
...provided,
|
|
backgroundColor: state.isSelected ? "hsl(var(--p))" : "hsl(var(--b1))",
|
|
color: "var(--color-primary-content)",
|
|
"&:hover": { backgroundColor: "var(--color-base-200)" }, // DaisyUI secondary color
|
|
}),
|
|
multiValueLabel: (provided) => ({
|
|
...provided,
|
|
color: "var(--color-primary-content)",
|
|
}),
|
|
singleValue: (provided) => ({
|
|
...provided,
|
|
color: "var(--color-primary-content)",
|
|
}),
|
|
multiValue: (provided) => ({
|
|
...provided,
|
|
backgroundColor: "var(--color-base-300)",
|
|
}),
|
|
menu: (provided) => ({
|
|
...provided,
|
|
backgroundColor: "var(--color-base-100)",
|
|
borderRadius: "0.5rem",
|
|
}),
|
|
};
|
|
|
|
const SelectCom = <T extends FieldValues>({
|
|
name,
|
|
label = name,
|
|
placeholder = label,
|
|
form,
|
|
formOptions,
|
|
className,
|
|
...inputProps
|
|
}: SelectProps<T>) => {
|
|
return (
|
|
<div>
|
|
<span className="label-text text-lg flex items-center gap-2">
|
|
{label}
|
|
</span>
|
|
<SelectTemplate
|
|
onChange={(newValue: any) => {
|
|
if (Array.isArray(newValue)) {
|
|
form.setValue(name, newValue.map((v: any) => v.value) as any, {
|
|
shouldDirty: true,
|
|
});
|
|
} else {
|
|
form.setValue(name, newValue.value, {
|
|
shouldDirty: true,
|
|
});
|
|
}
|
|
form.trigger(name);
|
|
form.Dirty;
|
|
}}
|
|
value={
|
|
(inputProps as any)?.isMulti
|
|
? (inputProps as any).options?.filter((o: any) =>
|
|
form.watch(name)?.includes(o.value),
|
|
)
|
|
: (inputProps as any).options?.find(
|
|
(o: any) => o.value === form.watch(name),
|
|
)
|
|
}
|
|
styles={customStyles as any}
|
|
className={cn("w-full placeholder:text-neutral-600", className)}
|
|
placeholder={placeholder}
|
|
{...inputProps}
|
|
/>
|
|
{form.formState.errors[name]?.message && (
|
|
<p className="text-error">
|
|
{form.formState.errors[name].message as string}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SelectWrapper = <T extends FieldValues>(props: SelectProps<T>) => (
|
|
<SelectCom {...props} />
|
|
);
|
|
|
|
export const Select = dynamic(() => Promise.resolve(SelectWrapper), {
|
|
ssr: false,
|
|
});
|