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 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | 25x 25x 25x 25x | import { SyntheticEvent } from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
type Props = {
field: { id: string };
index: number;
screenshotUrls: Array<string>;
getValues: Function;
removeScreenshotUrl: Function;
setValue: Function;
register: Function;
setImage: Function;
};
function Screenshot({
field,
index,
screenshotUrls,
getValues,
removeScreenshotUrl,
setValue,
register,
setImage,
}: Props) {
const { attributes, listeners, setNodeRef, transform, transition } =
useSortable({ id: field.id });
const style = {
transform: CSS.Transform.toString(transform),
transition,
};
const screenshotUrl = getValues(`screenshot_urls.${index}`);
return (
<div
ref={screenshotUrl ? setNodeRef : null}
style={style}
{...attributes}
className="snap-image-upload-container p-listing-images__image"
>
{screenshotUrl && (
<button
type="button"
className="p-button--base snap-remove-image"
onClick={() => {
removeScreenshotUrl(index);
setValue(`screenshots.${index}`, new File([], ""));
}}
>
<i className="p-icon--delete">Remove screenshot</i>
</button>
)}
<div className="snap-image-upload-drop-area" {...listeners}>
{screenshotUrl ? (
<div className="snap-image-box">
<div>
<img src={screenshotUrl} alt="" width={132} />
</div>
</div>
) : (
<div
className="snap-add-image"
style={{
width: "132px",
height: "132px",
}}
>
{index <= screenshotUrls.length && (
<i className="p-icon--plus">Add image</i>
)}
</div>
)}
{!screenshotUrl && (
<input
type="file"
disabled={screenshotUrl || index > screenshotUrls.length}
accept="image/gif, image/png, image/jpeg"
className="snap-image-upload-input"
style={{
width: "132px",
height: "132px",
}}
{...register(`screenshots.${index}`, {
onChange: (
e: SyntheticEvent<HTMLInputElement> & {
target: HTMLInputElement;
},
) => {
if (e.target.files) {
setImage(e.target.files[0]);
}
},
})}
/>
)}
</div>
</div>
);
}
export default Screenshot;
|