import type { FormEvent } from "react"; import { useCallback, useEffect, useState } from "react"; import Cropper from "react-easy-crop"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui"; import type { Area } from "@lib/cropImage"; import { getCroppedImg } from "@lib/cropImage"; import { useFileReader } from "@lib/hooks/useFileReader"; import Slider from "@components/Slider"; type ImageUploaderProps = { id: string; buttonMsg: string; handleAvatarChange: (imageSrc: string) => void; imageSrc?: string; target: string; }; interface FileEvent extends FormEvent { target: EventTarget & T; } // This is separate to prevent loading the component until file upload function CropContainer({ onCropComplete, imageSrc, }: { imageSrc: string; onCropComplete: (croppedAreaPixels: Area) => void; }) { const { t } = useLocale(); const [crop, setCrop] = useState({ x: 0, y: 0 }); const [zoom, setZoom] = useState(1); const handleZoomSliderChange = (value: number) => { value < 1 ? setZoom(1) : setZoom(value); }; return (
onCropComplete(croppedAreaPixels)} onZoomChange={setZoom} />
); } /** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */ export default function ImageUploader({ target, id, buttonMsg, handleAvatarChange, ...props }: ImageUploaderProps) { const { t } = useLocale(); const [imageSrc, setImageSrc] = useState(null); const [croppedAreaPixels, setCroppedAreaPixels] = useState(null); const [{ result }, setFile] = useFileReader({ method: "readAsDataURL", }); useEffect(() => { if (props.imageSrc) setImageSrc(props.imageSrc); }, [props.imageSrc]); const onInputFile = (e: FileEvent) => { if (!e.target.files?.length) { return; } setFile(e.target.files[0]); }; const showCroppedImage = useCallback( async (croppedAreaPixels: Area | null) => { try { if (!croppedAreaPixels) return; 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] ); return ( !opened && setFile(null) // unset file on close }>
{!result && (
{!imageSrc && (

{t("no_target", { target })}

)} {imageSrc && ( // eslint-disable-next-line @next/next/no-img-element {target} )}
)} {result && }
showCroppedImage(croppedAreaPixels)}>{t("save")} {t("cancel")}
); }