90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
'use client'
|
|
import { useRef } from 'react'
|
|
|
|
import { Control, UseFormRegister, useFieldArray } from 'react-hook-form'
|
|
|
|
import { AddIconBtn, DeleteIconBtn } from 'components'
|
|
|
|
const DetailsList = props => {
|
|
//? Props
|
|
const { categoryName, name, control, register } = props
|
|
|
|
//? Refs
|
|
const newDetailRef = useRef(null)
|
|
|
|
//? Form
|
|
const { fields, append, remove } = useFieldArray({
|
|
name,
|
|
control,
|
|
})
|
|
|
|
//? Handlers
|
|
const handleAddNewDetail = () => {
|
|
if (newDetailRef.current) {
|
|
append({ title: newDetailRef.current.value })
|
|
newDetailRef.current.value = ''
|
|
}
|
|
}
|
|
|
|
//? Render
|
|
return (
|
|
<section>
|
|
<div className="mb-2 text-sm lg:text-base">
|
|
{name === 'info' ? <span>特点</span> : <span>规格</span>}{' '}
|
|
<span className={name === 'info' ? ' text-emerald-600' : ' text-fuchsia-600'}>
|
|
{categoryName}
|
|
</span>
|
|
</div>
|
|
<table className="w-full">
|
|
<thead
|
|
className={
|
|
name === 'info' ? 'bg-emerald-50 text-emerald-500' : 'bg-fuchsia-50 text-fuchsia-500'
|
|
}
|
|
>
|
|
<tr className="">
|
|
<th>名称</th>
|
|
<th className="w-1/4 p-2.5">值</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{fields.map((field, index) => (
|
|
<tr key={field.id} className="border-b-2 border-gray-100">
|
|
<td className="flex items-center p-2 gap-x-2">
|
|
<DeleteIconBtn onClick={() => remove(index)} />
|
|
<input className="text-field__input" {...register(`${name}.${index}.title`)} />
|
|
</td>
|
|
<td
|
|
className={
|
|
name === 'info'
|
|
? 'bg-emerald-50 text-emerald-500'
|
|
: 'bg-fuchsia-50 text-fuchsia-500'
|
|
}
|
|
></td>
|
|
</tr>
|
|
))}
|
|
<tr className="border-b-2 border-green-50">
|
|
<td className="flex p-2">
|
|
<AddIconBtn onClick={handleAddNewDetail} />
|
|
<input
|
|
type="text"
|
|
className="text-field__input "
|
|
ref={newDetailRef}
|
|
placeholder="..."
|
|
/>
|
|
</td>
|
|
<td
|
|
className={
|
|
name === 'info'
|
|
? 'bg-emerald-50 text-emerald-500'
|
|
: 'bg-fuchsia-50 text-fuchsia-500'
|
|
}
|
|
></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default DetailsList
|