From a0261c01710044a9dd84cdabf41a9472cd619f08 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Wed, 6 Apr 2022 14:19:48 +0430
Subject: [PATCH] Deleting the First Image Works

---
 src/assets/img/trash.svg                  |  4 ++
 src/components/input/signUpInput.js       | 56 +++++++++++------------
 src/view/addProduct/components/addPic.js  | 14 +++++-
 src/view/addProduct/components/metrics.js |  5 +-
 4 files changed, 49 insertions(+), 30 deletions(-)
 create mode 100644 src/assets/img/trash.svg

diff --git a/src/assets/img/trash.svg b/src/assets/img/trash.svg
new file mode 100644
index 0000000..77e363c
--- /dev/null
+++ b/src/assets/img/trash.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0697 5.23C19.4597 5.07 17.8497 4.95 16.2297 4.86V4.85L16.0097 3.55C15.8597 2.63 15.6397 1.25 13.2997 1.25H10.6797C8.34967 1.25 8.12967 2.57 7.96967 3.54L7.75967 4.82C6.82967 4.88 5.89967 4.94 4.96967 5.03L2.92967 5.23C2.50967 5.27 2.20967 5.64 2.24967 6.05C2.28967 6.46 2.64967 6.76 3.06967 6.72L5.10967 6.52C10.3497 6 15.6297 6.2 20.9297 6.73C20.9597 6.73 20.9797 6.73 21.0097 6.73C21.3897 6.73 21.7197 6.44 21.7597 6.05C21.7897 5.64 21.4897 5.27 21.0697 5.23Z" fill="#fff"/>
+<path d="M19.2297 8.14C18.9897 7.89 18.6597 7.75 18.3197 7.75H5.67975C5.33975 7.75 4.99975 7.89 4.76975 8.14C4.53975 8.39 4.40975 8.73 4.42975 9.08L5.04975 19.34C5.15975 20.86 5.29975 22.76 8.78975 22.76H15.2097C18.6997 22.76 18.8398 20.87 18.9497 19.34L19.5697 9.09C19.5897 8.73 19.4597 8.39 19.2297 8.14ZM13.6597 17.75H10.3297C9.91975 17.75 9.57975 17.41 9.57975 17C9.57975 16.59 9.91975 16.25 10.3297 16.25H13.6597C14.0697 16.25 14.4097 16.59 14.4097 17C14.4097 17.41 14.0697 17.75 13.6597 17.75ZM14.4997 13.75H9.49975C9.08975 13.75 8.74975 13.41 8.74975 13C8.74975 12.59 9.08975 12.25 9.49975 12.25H14.4997C14.9097 12.25 15.2497 12.59 15.2497 13C15.2497 13.41 14.9097 13.75 14.4997 13.75Z" fill="#fff"/>
+</svg>
diff --git a/src/components/input/signUpInput.js b/src/components/input/signUpInput.js
index eacb557..cbe8f13 100644
--- a/src/components/input/signUpInput.js
+++ b/src/components/input/signUpInput.js
@@ -22,35 +22,35 @@ const inputStatusHandler = (value, focus, status, primary, success, danger) => {
   }
 };
 
-export default function Input(props) {
+export default function Input({ backgroundColor,
+  lang,
+  theme,
+  inputMode,
+  label,
+  status,
+  maxLength,
+  message,
+  onChange,
+  align,
+  name,
+  regex,
+  direction,
+  width,
+
+  title,
+  borderType,
+  gapSize,
+  id,
+  type,
+  className,
+  style,
+  bg}) {
   const [value, setValue] = useState("");
   const [focusToggle, setFocusToggle] = useState(false);
 
-  const {
-    backgroundColor,
-    lang,
-    theme,
-    inputMode,
-    label,
-    status,
-    maxLength,
-    message,
-    onChange,
-    align,
-    name,
-    regex,
-    direction,
-    width,
-
-    title,
-    borderType,
-    gapSize,
-    id,
-    type,
-    className,
-    style,
-    bg
-  } = props;
+  // const {
+   
+  // } = props;
 
   const focusHandler = (id) => {
     let inputs = document.querySelectorAll(".Login-box-form-item");
@@ -106,12 +106,12 @@ const blurHandler = (id) => {
         {label}
       </label> */}
       <input
-        type="text"
+        type={type ? type : "text"}
         inputMode={inputMode}
        
         className={_.join(
           [
-            `flex-1 border border-gray-300 dark:bg-opacity-10  bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
+            `flex-1  border border-gray-300 dark:bg-opacity-10  bg-transparent rounded-md outline-none py-3 px-4 text-tiny ${backgroundColor} ${align}`,
             inputStatusHandler(
               value,
               focusToggle,
diff --git a/src/view/addProduct/components/addPic.js b/src/view/addProduct/components/addPic.js
index d6b3942..e5227c8 100644
--- a/src/view/addProduct/components/addPic.js
+++ b/src/view/addProduct/components/addPic.js
@@ -1,9 +1,11 @@
 import React, {useState, useEffect} from "react";
+import trashIcon from '../../../assets/img/trash.svg';
 
 const AddPic = () => {
     const [imageUrl, setImageUrl] = useState([]);
     const [selectedImage, setSelectedImage] = useState(null);
     const [fakeState, setFakeState] = useState(5);
+    const [deleteFirst, setDeleteFirst] = useState(false)
     
     useEffect(() => {
         if (selectedImage) {
@@ -21,8 +23,18 @@ const AddPic = () => {
             <div className="w-full px-4 flex items-center">
                 <div>
                 {
-                    imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl  flex flex-col items-center">
+                    imageUrl.length > 0 && <div className="w-32 h-32 rounded-xl  flex flex-col items-center"
+                     onMouseOver={() => setDeleteFirst(true)}
+                     onMouseLeave={() => setDeleteFirst(false)}>
                         <img src={imageUrl[0]} className="h-full w-32 rounded-lg" />
+                        {
+                            deleteFirst && <div className="absolute w-32 z-10 h-32 rounded-lg bg-black bg-opacity-50  flex items-center justify-center">
+                                        <img src={trashIcon} className="w-1/3 h-1/3 cursor-pointer" onClick={() => {
+                                            let newImageArray = imageUrl.filter((itm, index) => index !== 0);
+                                            setImageUrl(newImageArray)
+                                        }}/>
+                                </div>
+                        }
                         {/* <p className="">تصویر شاخص</p> */}
                         </div>
                 }
diff --git a/src/view/addProduct/components/metrics.js b/src/view/addProduct/components/metrics.js
index afa4c39..5fc5c1b 100644
--- a/src/view/addProduct/components/metrics.js
+++ b/src/view/addProduct/components/metrics.js
@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from "react";
+import Input from "../../../components/input/signUpInput";
 
 const Metrics = () => {
    const inputs = [
@@ -17,7 +18,9 @@ const Metrics = () => {
                     inputs.map(
                         (item, index) => (
                             <div className="w-1/2 p-2">
-                                <input type="number" placeholder={item} className="bg-white border border-grayE0 h-14 w-full outline-none px-2 rounded-md" />
+                                {/* <input type="number" placeholder={item} className="bg-white border border-grayE0 h-14 w-full outline-none px-2 rounded-md" />7
+                                 */}
+                                 <Input type="number" title={item} className="w-full" id={index} align="w-full"/>
                             </div>    
                         )
                     )