Image picker

package.json

@@ -29,6 +29,7 @@
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
+    "react-indiana-drag-scroll": "^2.2.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",

src/components/ImagePicker/ImagePicker.js

@@ -0,0 +1,109 @@
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import {
+  AddFile,
+  AddIcon,
+  ImagePickerContainer,
+  ImageUploaded,
+} from "./ImagePicker.styled";
+import { Tooltip } from "@mui/material";
+import { Trash } from "../Cards/CreateOfferCard/SecondPart/SecondPartCreateOffer.styled";
+import { Icon } from "../Icon/Icon";
+// import { Input } from "@mui/material";
+
+const ImagePicker = (props) => {
+  const fileInputRef = useRef(null);
+  const [isOpened, setIsOpened] = useState(false);
+
+  const handleChange = () => {
+    fileInputRef.current.click();
+    console.log(fileInputRef.current.click);
+  };
+  const handleImage = (event) => {
+    console.log("fileEvent: ", event.target.files[0]);
+    let reader = new FileReader();
+    reader.readAsDataURL(event.target.files[0]);
+    reader.onload = () => {
+      console.log(reader.result.toString());
+      props.setImage(reader.result);
+    };
+    reader.onerror = () => {};
+  };
+  // let timeoutObject = {
+  //   timeoutFunctionSet: false,
+  //   timeoutFunction: () => {},
+  // };
+  // const showMessage = (event) => {
+  //   console.log(event);
+  // };
+  // const handleMouseEnter = (event) => {
+  //   timeoutObject.timeoutFunctionSet = true;
+  //   timeoutObject.timeoutFunction = setTimeout(() => {
+  //     showMessage(event);
+  //   }, 1000);
+  // };
+  // const handleMouseMove = (event) => {
+  //   if (timeoutObject.timeoutFunctionSet) {
+  //     clearTimeout(timeoutObject.timeoutFunction);
+  //     timeoutObject.timeoutFunction = setTimeout(() => {
+  //       showMessage(event);
+  //     }, 1000);
+  //   }
+  // };
+  // const handleMouseLeave = () => {
+  //   if (timeoutObject.timeoutFunctionSet) {
+  //     clearTimeout(timeoutObject.timeoutFunction);
+  //     timeoutObject.timeoutFunctionSet = false;
+  //   }
+  // };
+  const handleOpen = () => {
+    setIsOpened(true);
+    if (!props.image) setIsOpened(false);
+  };
+  const handleClose = () => {
+    setIsOpened(false);
+  };
+  const handleDelete = () => {
+    props.deleteImage();
+    setIsOpened(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={!props.image ? handleChange : () => {}}
+        hasImage={props.image}
+      >
+        <AddFile type="file" ref={fileInputRef} onInput={handleImage} />
+        {props.image ? (
+          <ImageUploaded src={props.image} draggable={false}></ImageUploaded>
+        ) : (
+          <AddIcon />
+        )}
+      </ImagePickerContainer>
+    </Tooltip>
+  );
+};
+
+ImagePicker.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  setImage: PropTypes.func,
+  image: PropTypes.func,
+  deleteImage: PropTypes.func
+};
+
+export default ImagePicker;

src/components/ImagePicker/ImagePicker.styled.js

@@ -0,0 +1,67 @@
+import { Box } from "@mui/material";
+import styled from "styled-components";
+import selectedTheme from "../../themes";
+import {ReactComponent as Plus} from "../../assets/images/svg/plus.svg";
+
+export const ImagePickerContainer = styled(Box)`
+  flex: 1;
+  display: flex;
+  flex-basis: 216px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  height: 144px;
+  margin: 0 9px;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: ${selectedTheme.imagePickerBackground};
+  background-image: linear-gradient(
+      to right,
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      to right,
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    ),
+    linear-gradient(
+      ${selectedTheme.primaryPurple} 50%,
+      rgba(255, 255, 255, 0) 0%
+    );
+  background-position: bottom, right, top, left;
+  background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px;
+  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
+  &:first-of-type {
+    margin-left: 0;
+  }
+  &:last-of-type {
+    margin-right: 0;
+  }
+  ${props => props.hasImage && `
+    background-image: none;
+    border: 1px solid ${selectedTheme.primaryPurple};
+  `}
+`;
+export const AddIcon = styled(Plus)`
+    margin: auto;
+`
+export const AddFile = styled.input`
+    display: none;
+`
+export const ImageUploaded = styled.img`
+    width: 216px;
+    height: 144px;
+    object-fit: scale-down;
+`
+export const Tooltip = styled(Box)`
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    left: 0;
+    top: 0;
+`