Added edit and remove button

src/components/ImagePicker/ImagePicker.js

@@ -1,22 +1,42 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import {
   AddFile,
   AddIcon,
+  ImageOverlay,
   ImagePickerContainer,
   ImageUploaded,
-  Trash,
+  Tools,
 } from "./ImagePicker.styled";
-import { Tooltip } from "@mui/material";
-import { Icon } from "../Icon/Icon";
+import { IconButton } from "../Buttons/IconButton/IconButton";
+import { ReactComponent as EditIcon } from "../../assets/images/svg/edit.svg";
+import { ReactComponent as TrashIcon } from "../../assets/images/svg/trash.svg";
+
 // import { Input } from "@mui/material";
 
 const ImagePicker = (props) => {
   const fileInputRef = useRef(null);
-  const [isOpened, setIsOpened] = useState(false);
+  const imageRef = useRef(null);
   const [image, setImage] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
+
+  let listener;
+  useEffect(() => {
+    listener = (event) => {
+      if (imageRef.current) {
+        if (imageRef.current.contains(event.target)) {
+          setIsEditing(true);
+        } else {
+          setIsEditing(false);
+        }
+      }
+    };
+    window.addEventListener("click", listener);
+    return () => window.removeEventListener("click", listener);
+  }, [imageRef]);
 
   const handleChange = () => {
+    fileInputRef.current.value = "";
     fileInputRef.current.click();
   };
   const handleImage = (event) => {
@@ -24,52 +44,49 @@ const ImagePicker = (props) => {
     reader.readAsDataURL(event.target.files[0]);
     reader.onload = () => {
       if (props.setImage) props.setImage(reader.result);
-      setImage(reader.result)
+      setImage(reader.result);
     };
     reader.onerror = (error) => {
       console.log(error);
     };
   };
-  const handleOpen = () => {
-    setIsOpened(true);
-    if (!props.image) setIsOpened(false);
-  };
-  const handleClose = () => {
-    setIsOpened(false);
-  };
+
   const handleDelete = () => {
     if (props.deleteImage) props.deleteImage();
     setImage("");
-    setIsOpened(false)
-  }
+    setIsEditing(false);
+  };
   return (
-    <Tooltip
-      open={isOpened}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      enterDelay={500}
-      enterNextDelay={500}
-      arrow
-      title={
-        <Icon style={{width: "50px", height: "42px", paddingTop: "10px"}}>
-          <Trash onClick={handleDelete} />
-        </Icon>
-      }
-      d
+    <ImagePickerContainer
+      className={props.className}
+      onClick={!image ? handleChange : () => {}}
+      hasImage={props.image}
     >
-      <ImagePickerContainer
-        className={props.className}
-        onClick={!image ? handleChange : () => {}}
-        hasImage={props.image}
-      >
-        <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
-        {image ? (
-          <ImageUploaded src={image} draggable={false}></ImageUploaded>
-        ) : (
-          <AddIcon />
-        )}
-      </ImagePickerContainer>
-    </Tooltip>
+      <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
+      {image ? (
+        <React.Fragment>
+          <ImageUploaded src={image} draggable={false} ref={imageRef} />
+          {isEditing && (
+            <React.Fragment>
+              <ImageOverlay />
+              <Tools showDeleteIcon={props.showDeleteIcon}>
+                <IconButton onClick={handleChange}>
+                  <EditIcon />
+                </IconButton>
+                {props.showDeleteIcon && (
+                  <IconButton onClick={handleDelete}>
+                    <TrashIcon />
+                  </IconButton>
+                )}
+              </Tools>
+            </React.Fragment>
+          )}
+        </React.Fragment>
+      ) : (
+        <AddIcon />
+      )}
+      {props.children}
+    </ImagePickerContainer>
   );
 };
 
@@ -78,7 +95,8 @@ ImagePicker.propTypes = {
   className: PropTypes.string,
   setImage: PropTypes.func,
   image: PropTypes.func,
-  deleteImage: PropTypes.func
+  deleteImage: PropTypes.func,
+  showDeleteIcon: PropTypes.bool,
 };
 
 export default ImagePicker;

src/components/ImagePicker/ImagePicker.styled.js

@@ -1,20 +1,20 @@
 import { Box } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../themes";
-import {ReactComponent as Plus} from "../../assets/images/svg/plus.svg";
+import { ReactComponent as Plus } from "../../assets/images/svg/plus.svg";
 import { ReactComponent as TrashIcon } from "../../assets/images/svg/trash.svg";
 
-
 export const ImagePickerContainer = styled(Box)`
   flex: 1;
   display: flex;
-  flex-basis: 216px;
+  flex-basis: 144px;
   flex-grow: 0;
   flex-shrink: 0;
   height: 144px;
   width: 144px;
   margin: 0 9px;
   border-radius: 4px;
+  position: relative;
   cursor: pointer;
   background-color: ${selectedTheme.imagePickerBackground};
   background-image: linear-gradient(
@@ -44,37 +44,68 @@ export const ImagePickerContainer = styled(Box)`
   &:last-of-type {
     margin-right: 0;
   }
-  ${props => props.hasImage && `
+  ${(props) =>
+    props.hasImage &&
+    `
     background-image: none;
     border: 1px solid ${selectedTheme.primaryPurple};
   `}
 `;
 export const AddIcon = styled(Plus)`
-    margin: auto;
-`
+  margin: auto;
+  z-index: 1;
+  width: 60px;
+  height: 60px;
+`;
 export const AddFile = styled.input`
-    display: none;
-`
+  display: none;
+`;
 export const ImageUploaded = styled.img`
-    width: 216px;
-    height: 144px;
-    object-fit: scale-down;
+  width: 144px;
+  height: 144px;
+  border-radius: 100px;
+  object-fit: scale-down;
+  z-index: 1;
+`;
+export const ImageOverlay = styled(Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+  z-index: 3;
+  overflow: hidden;
 `
 export const Tooltip = styled(Box)`
-    background-color: rgba(255, 255, 255, 0.5);
-    width: 100px;
-    height: 100px;
-    position: absolute;
-    left: 0;
-    top: 0;
-`
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 100px;
+  height: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+`;
 export const Trash = styled(TrashIcon)`
   cursor: pointer;
   margin: auto;
   width: 22px;
-    height: 22px;
+  height: 22px;
   & path {
     stroke: white;
-    
+  }
+`;
+export const Tools = styled(Box)`
+  position: absolute;
+  padding-top: 44px;
+  padding-left: ${props => props.showDeleteIcon ? "16px" : "45px"};
+  z-index: 4;
+  flex-direction: row;
+  display: flex;
+  & div {
+    background-color: ${selectedTheme.primaryIconBackgroundColor};
+    border-radius: 100px;
+    display: flex;
+    flex: 1;
+    margin: 10px;
   }
 `;