66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { z } from "zod"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { Plus } from "lucide-react"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { FieldGroup } from "@/shared/components/ui/field"
|
|
import { Rhform, RhfTextField } from "@/shared/components/form"
|
|
import { toast } from "sonner"
|
|
import type { InlineCreateFormProps } from "./rhf-async-select-field"
|
|
|
|
const schema = z.object({ title: z.string().min(1, "Required") })
|
|
type FormValues = z.infer<typeof schema>
|
|
|
|
export type SimpleTitleFormProps = InlineCreateFormProps & {
|
|
placeholder?: string
|
|
submitLabel?: string
|
|
createFn: (title: string) => Promise<any>
|
|
mapResult?: (data: any) => { value: string; label: string }
|
|
}
|
|
|
|
const defaultMapResult = (data: any) => {
|
|
const item = data?.data ?? data
|
|
return {
|
|
value: String(item.id),
|
|
label: item.name ?? item.title ?? String(item.id),
|
|
}
|
|
}
|
|
|
|
export function SimpleTitleForm({
|
|
onSuccess,
|
|
placeholder = "Enter name",
|
|
submitLabel = "Create",
|
|
createFn,
|
|
mapResult = defaultMapResult,
|
|
}: SimpleTitleFormProps) {
|
|
const form = useForm<FormValues>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: { title: "" },
|
|
})
|
|
|
|
const handleSubmit = async (values: FormValues) => {
|
|
try {
|
|
const result = await createFn(values.title)
|
|
toast.success(`${submitLabel}d successfully`)
|
|
form.reset()
|
|
onSuccess(mapResult(result))
|
|
} catch {
|
|
toast.error(`Failed to ${submitLabel.toLowerCase()}`)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Rhform form={form} onSubmit={handleSubmit}>
|
|
<FieldGroup>
|
|
<RhfTextField name="title" label="Name" placeholder={placeholder} required />
|
|
<Button type="submit" disabled={form.formState.isSubmitting}>
|
|
<Plus />
|
|
{form.formState.isSubmitting ? "Creating..." : submitLabel}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|