138 lines
3.7 KiB
JavaScript
138 lines
3.7 KiB
JavaScript
'use client'
|
|
|
|
import { yupResolver } from '@hookform/resolvers/yup'
|
|
import { TextField, Button, UploadImage } from 'components'
|
|
import Image from 'next/image'
|
|
import { useEffect } from 'react'
|
|
|
|
import { useForm } from 'react-hook-form'
|
|
import { categorySchema } from 'utils'
|
|
|
|
const CategoryForm = props => {
|
|
//? Props
|
|
const { mode, selectedCategory, createHandler, updateHandler, isLoading, parentLvl } = props
|
|
|
|
//? Assets
|
|
const defaultValues = {
|
|
name: '',
|
|
slug: '',
|
|
image: '',
|
|
colors: { start: '#000000', end: '#000000' },
|
|
}
|
|
|
|
//? Form Hook
|
|
const {
|
|
handleSubmit,
|
|
control,
|
|
formState: { errors: formErrors },
|
|
reset,
|
|
register,
|
|
watch,
|
|
getValues,
|
|
setValue,
|
|
} = useForm({
|
|
resolver: yupResolver(categorySchema),
|
|
defaultValues,
|
|
})
|
|
|
|
//? Re-Renders
|
|
//* Set Category Details on Edit Mode
|
|
useEffect(() => {
|
|
if (selectedCategory && mode === 'edit') {
|
|
const { image, name, slug, colors } = selectedCategory
|
|
reset({ image, name, slug, colors })
|
|
}
|
|
}, [selectedCategory])
|
|
|
|
//? Handlers
|
|
const handleAddUploadedImageUrl = url => setValue('image', url)
|
|
|
|
return (
|
|
<section className="p-3 md:px-3 xl:px-8 2xl:px-10">
|
|
<form
|
|
className="flex flex-col justify-between flex-1 overflow-y-auto gap-y-5"
|
|
onSubmit={mode === 'create' ? handleSubmit(createHandler) : handleSubmit(updateHandler)}
|
|
>
|
|
<TextField label="分类名称" control={control} errors={formErrors.name} name="name" />
|
|
|
|
<TextField
|
|
label="路径（英文字母）"
|
|
control={control}
|
|
errors={formErrors.slug}
|
|
name="slug"
|
|
/>
|
|
|
|
<TextField label="图片地址" control={control} errors={formErrors.image} name="image" />
|
|
|
|
<UploadImage folder="/icons" handleAddUploadedImageUrl={handleAddUploadedImageUrl} />
|
|
|
|
{categorySchema.isValidSync(watch()) && (
|
|
<div className="mx-auto max-w-max">
|
|
{getValues('image') && (
|
|
<Image
|
|
src={getValues('image')}
|
|
width={200}
|
|
height={200}
|
|
className="mx-auto"
|
|
alt="category image"
|
|
/>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{((selectedCategory && selectedCategory.level <= 1) || parentLvl === 0) && (
|
|
<div className="flex justify-evenly">
|
|
<div className="flex flex-col space-y-3">
|
|
<label className="text-field__label" htmlFor="colors.start">
|
|
开始颜色
|
|
</label>
|
|
<input
|
|
className="w-40 h-10"
|
|
id="colors.start"
|
|
type="color"
|
|
{...register('colors.start')}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-3">
|
|
<label className="text-field__label" htmlFor="colors.end">
|
|
结束颜色
|
|
</label>
|
|
<input
|
|
className="w-40 h-10"
|
|
id="colors.end"
|
|
type="color"
|
|
{...register('colors.end')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="py-3 lg:pb-0 ">
|
|
{mode === 'edit' ? (
|
|
<Button
|
|
className="mx-auto bg-amber-500"
|
|
isRounded={true}
|
|
type="submit"
|
|
isLoading={isLoading}
|
|
>
|
|
更新信息
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="submit"
|
|
className="mx-auto !bg-green-500 "
|
|
isLoading={isLoading}
|
|
isRounded={true}
|
|
>
|
|
提交信息
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default CategoryForm
|