packages/components/containers/contacts/edit/fields/ContactFieldImage.tsx

   1 import { useEffect, useState } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import RemoteImage from '@proton/components/components/image/RemoteImage';
   7 import type { ContactImageProps } from '@proton/components/containers/contacts/modals/ContactImageModal';
   8 import type { VCardProperty } from '@proton/shared/lib/interfaces/contacts/VCard';
   9
  10 interface Props {
  11     vCardProperty: VCardProperty<string>;
  12     onChange: (vCardProperty: VCardProperty) => void;
  13     onSelectImage: (props: ContactImageProps) => void;
  14 }
  15
  16 const ContactFieldImage = ({ vCardProperty, onChange, onSelectImage }: Props) => {
  17     const [loadNewImage, setLoadNewImage] = useState(false);
  18
  19     const handleChangeImage = () => {
  20         const handleSubmit = (value: string) => {
  21             onChange({ ...vCardProperty, value });
  22             setLoadNewImage(true);
  23         };
  24         onSelectImage({ url: vCardProperty.value, onSubmit: handleSubmit });
  25     };
  26
  27     /**
  28      * Load image by default in edit mode
  29      * AND allow image update when "default" contact photo is deleted
  30      * In that case, photo from "Other" field will become the contact photo (if any).
  31      * But we need to reload them, using this useEffect
  32      */
  33     useEffect(() => {
  34         if (vCardProperty.value) {
  35             setLoadNewImage(true);
  36         }
  37     }, [vCardProperty.value]);
  38
  39     return (
  40         <div>
  41             {vCardProperty.value ? (
  42                 <RemoteImage src={vCardProperty.value} autoLoad={loadNewImage} />
  43             ) : (
  44                 <Button onClick={handleChangeImage}>{c('Action').t`Upload picture`}</Button>
  45             )}
  46         </div>
  47     );
  48 };
  49
  50 export default ContactFieldImage;