Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 5x 5x 5x 5x 25x | import { useState } from "react";
import {
DndContext,
closestCenter,
PointerSensor,
useSensor,
useSensors,
} from "@dnd-kit/core";
import {
arrayMove,
SortableContext,
horizontalListSortingStrategy,
} from "@dnd-kit/sortable";
import Screenshot from "./Screenshot";
type Props = {
screenshots: Array<{ id: string }>;
screenshotUrls: Array<string>;
getValues: Function;
removeScreenshotUrl: Function;
setValue: Function;
register: Function;
setImage: Function;
moveScreenshotUrl: Function;
};
function ScreenshotList({
screenshots,
screenshotUrls,
getValues,
removeScreenshotUrl,
setValue,
register,
setImage,
moveScreenshotUrl,
}: Props) {
const [items, setItems] = useState(screenshots);
const sensors = useSensors(useSensor(PointerSensor));
const handleDragEnd = (e: any) => {
const { active, over } = e;
if (active && over && active?.id !== over?.id) {
const oldIndex = items.findIndex((item) => item.id === active.id);
const newIndex = items.findIndex((item) => item.id === over.id);
moveScreenshotUrl(oldIndex, newIndex);
setItems((items) => {
return arrayMove(items, oldIndex, newIndex);
});
}
};
return (
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
<div className="p-listing-images">
{items.map((field, index) => (
<Screenshot
key={field.id}
field={field}
index={index}
screenshotUrls={screenshotUrls}
getValues={getValues}
removeScreenshotUrl={removeScreenshotUrl}
setValue={setValue}
register={register}
setImage={setImage}
/>
))}
</div>
</SortableContext>
</DndContext>
);
}
export default ScreenshotList;
|