74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { ISlider } from '@/types/IArticle';
|
|
import { reorderFields } from '@/utils/reorderFields';
|
|
import { Reorder } from 'framer-motion';
|
|
import {
|
|
Control,
|
|
useFieldArray,
|
|
UseFieldArrayRemove,
|
|
UseFormSetValue,
|
|
} from 'react-hook-form';
|
|
import { PlusIcon } from '../icons/PlusIcon';
|
|
import { TrashIcon } from '../icons/TrashIcon';
|
|
import { IArticleFormInput } from '../modals/ArticleFormModal';
|
|
import { ArticleSliderImageInput } from './ArticleSliderImageInput';
|
|
|
|
interface IArticleSliderInputProps {
|
|
setValue: UseFormSetValue<IArticleFormInput>;
|
|
item: ISlider & Record<'id', string>;
|
|
index: number;
|
|
control: Control<IArticleFormInput, any>;
|
|
remove: UseFieldArrayRemove;
|
|
}
|
|
|
|
export function ArticleSliderInput({
|
|
index,
|
|
item,
|
|
setValue,
|
|
control,
|
|
remove: removeSlider,
|
|
}: IArticleSliderInputProps) {
|
|
const { swap, append, remove, fields } = useFieldArray({
|
|
control,
|
|
name: `blocks.${index}.images`,
|
|
});
|
|
|
|
return (
|
|
<Reorder.Item
|
|
value={item}
|
|
className="border border-[#3D425C] rounded-3xl p-4 col-span-full space-y-4"
|
|
>
|
|
<div className="flex gap-x-4 justify-center">
|
|
<button
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
append({ img: '' });
|
|
}}
|
|
>
|
|
<PlusIcon />
|
|
</button>
|
|
<button
|
|
onClick={e => {
|
|
e.preventDefault();
|
|
removeSlider(index);
|
|
}}
|
|
>
|
|
<TrashIcon />
|
|
</button>
|
|
</div>
|
|
<Reorder.Group
|
|
axis="x"
|
|
values={fields}
|
|
onReorder={reorderFields(fields, swap)}
|
|
className="flex gap-4 flex-wrap"
|
|
>
|
|
{fields.map((item, imgIndex) => (
|
|
<ArticleSliderImageInput
|
|
key={item.id}
|
|
{...{ imgIndex, item, setValue, remove, index }}
|
|
/>
|
|
))}
|
|
</Reorder.Group>
|
|
</Reorder.Item>
|
|
);
|
|
}
|