cal.pub0.org/components/ImageUploader.tsx

165 lines
5.2 KiB
TypeScript
Raw Normal View History

import { FormEvent, useCallback, useEffect, useState } from "react";
import Cropper from "react-easy-crop";
2021-10-02 11:04:47 +00:00
import { Area, getCroppedImg } from "@lib/cropImage";
import { useFileReader } from "@lib/hooks/useFileReader";
2021-10-15 10:53:42 +00:00
import { useLocale } from "@lib/hooks/useLocale";
2021-10-02 11:04:47 +00:00
import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@components/Dialog";
import Slider from "@components/Slider";
import Button from "@components/ui/Button";
type ImageUploaderProps = {
id: string;
buttonMsg: string;
handleAvatarChange: (imageSrc: string) => void;
imageSrc?: string;
target: string;
};
interface FileEvent<T = Element> extends FormEvent<T> {
target: EventTarget & T;
}
2021-10-02 11:04:47 +00:00
// This is separate to prevent loading the component until file upload
function CropContainer({
onCropComplete,
imageSrc,
}: {
imageSrc: string;
onCropComplete: (croppedAreaPixels: Area) => void;
}) {
2021-10-15 10:53:42 +00:00
const { t } = useLocale();
const [crop, setCrop] = useState({ x: 0, y: 0 });
const [zoom, setZoom] = useState(1);
const handleZoomSliderChange = (value: number) => {
2021-08-13 09:34:20 +00:00
value < 1 ? setZoom(1) : setZoom(value);
};
2021-08-13 07:59:48 +00:00
return (
<div className="w-40 h-40 rounded-full crop-container max-h-40">
<div className="relative w-40 h-40 rounded-full">
2021-10-02 11:04:47 +00:00
<Cropper
image={imageSrc}
crop={crop}
zoom={zoom}
aspect={1}
onCropChange={setCrop}
onCropComplete={(croppedArea, croppedAreaPixels) => onCropComplete(croppedAreaPixels)}
onZoomChange={setZoom}
/>
</div>
<Slider
value={zoom}
min={1}
max={3}
step={0.1}
2021-10-15 10:53:42 +00:00
label={t("slide_zoom_drag_instructions")}
2021-10-02 11:04:47 +00:00
changeHandler={handleZoomSliderChange}
/>
</div>
);
}
2021-10-02 11:04:47 +00:00
export default function ImageUploader({
target,
id,
buttonMsg,
handleAvatarChange,
...props
}: ImageUploaderProps) {
2021-10-15 10:53:42 +00:00
const { t } = useLocale();
2021-10-02 11:04:47 +00:00
const [imageSrc, setImageSrc] = useState<string | null>();
const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>();
const [{ result }, setFile] = useFileReader({
method: "readAsDataURL",
});
useEffect(() => {
setImageSrc(props.imageSrc);
}, [props.imageSrc]);
const onInputFile = (e: FileEvent<HTMLInputElement>) => {
if (!e.target.files?.length) {
return;
}
2021-10-02 11:04:47 +00:00
setFile(e.target.files[0]);
};
2021-10-02 11:04:47 +00:00
const showCroppedImage = useCallback(
async (croppedAreaPixels) => {
try {
const croppedImage = await getCroppedImg(
result as string /* result is always string when using readAsDataUrl */,
croppedAreaPixels
);
setImageSrc(croppedImage);
handleAvatarChange(croppedImage);
} catch (e) {
console.error(e);
}
},
[result, handleAvatarChange]
);
2021-10-02 11:04:47 +00:00
return (
<Dialog
onOpenChange={
(opened) => !opened && setFile(null) // unset file on close
}>
<DialogTrigger asChild>
<div className="flex items-center px-3">
<Button color="secondary" type="button" className="py-1 text-xs">
{buttonMsg}
</Button>
</div>
</DialogTrigger>
<DialogContent>
<div className="mb-4 sm:flex sm:items-start">
2021-10-02 11:04:47 +00:00
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<h3 className="text-lg font-bold leading-6 text-gray-900 font-cal" id="modal-title">
2021-10-15 10:53:42 +00:00
{t("upload_target", { target })}
2021-10-02 11:04:47 +00:00
</h3>
</div>
</div>
<div className="mb-4">
<div className="flex flex-col items-center justify-center p-8 mt-6 cropper bg-gray-50">
2021-10-02 11:04:47 +00:00
{!result && (
<div className="flex items-center justify-start w-20 h-20 bg-gray-500 rounded-full max-h-20">
2021-10-15 10:53:42 +00:00
{!imageSrc && (
<p className="w-full text-sm text-center text-white sm:text-xs">
2021-10-15 10:53:42 +00:00
{t("no_target", { target })}
</p>
)}
{imageSrc && <img className="w-20 h-20 rounded-full" src={imageSrc} alt={target} />}
</div>
2021-10-02 11:04:47 +00:00
)}
{result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
<label className="px-3 py-1 mt-8 text-xs font-medium leading-4 text-gray-700 bg-white border border-gray-300 rounded-sm hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900">
2021-10-02 11:04:47 +00:00
<input
onInput={onInputFile}
type="file"
name={id}
2021-10-15 10:53:42 +00:00
placeholder={t("upload_image")}
className="absolute mt-4 opacity-0 pointer-events-none"
2021-10-02 11:04:47 +00:00
accept="image/*"
/>
2021-10-15 10:53:42 +00:00
{t("choose_a_file")}
2021-10-02 11:04:47 +00:00
</label>
</div>
</div>
2021-10-02 11:04:47 +00:00
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
<DialogClose asChild>
2021-10-15 10:53:42 +00:00
<Button onClick={() => showCroppedImage(croppedAreaPixels)}>{t("save")}</Button>
2021-10-02 11:04:47 +00:00
</DialogClose>
<DialogClose asChild>
2021-10-15 10:53:42 +00:00
<Button color="secondary">{t("cancel")}</Button>
2021-10-02 11:04:47 +00:00
</DialogClose>
</div>
</DialogContent>
</Dialog>
);
}