Deleting the First Image Works

main
Pedram Keshavarzi 2 years ago
parent d39db59de0
commit a0261c0171
  1. 4
      src/assets/img/trash.svg
  2. 18
      src/components/input/signUpInput.js
  3. 14
      src/view/addProduct/components/addPic.js
  4. 5
      src/view/addProduct/components/metrics.js

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -22,12 +22,7 @@ const inputStatusHandler = (value, focus, status, primary, success, danger) => {
} }
}; };
export default function Input(props) { export default function Input({ backgroundColor,
const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
const {
backgroundColor,
lang, lang,
theme, theme,
inputMode, inputMode,
@ -49,8 +44,13 @@ export default function Input(props) {
type, type,
className, className,
style, style,
bg bg}) {
} = props; const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
// const {
// } = props;
const focusHandler = (id) => { const focusHandler = (id) => {
let inputs = document.querySelectorAll(".Login-box-form-item"); let inputs = document.querySelectorAll(".Login-box-form-item");
@ -106,7 +106,7 @@ const blurHandler = (id) => {
{label} {label}
</label> */} </label> */}
<input <input
type="text" type={type ? type : "text"}
inputMode={inputMode} inputMode={inputMode}
className={_.join( className={_.join(

@ -1,9 +1,11 @@
import React, {useState, useEffect} from "react"; import React, {useState, useEffect} from "react";
import trashIcon from '../../../assets/img/trash.svg';
const AddPic = () => { const AddPic = () => {
const [imageUrl, setImageUrl] = useState([]); const [imageUrl, setImageUrl] = useState([]);
const [selectedImage, setSelectedImage] = useState(null); const [selectedImage, setSelectedImage] = useState(null);
const [fakeState, setFakeState] = useState(5); const [fakeState, setFakeState] = useState(5);
const [deleteFirst, setDeleteFirst] = useState(false)
useEffect(() => { useEffect(() => {
if (selectedImage) { if (selectedImage) {
@ -21,8 +23,18 @@ const AddPic = () => {
<div className="w-full px-4 flex items-center"> <div className="w-full px-4 flex items-center">
<div> <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" /> <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> */} {/* <p className="">تصویر شاخص</p> */}
</div> </div>
} }

@ -1,4 +1,5 @@
import React, {useState, useEffect} from "react"; import React, {useState, useEffect} from "react";
import Input from "../../../components/input/signUpInput";
const Metrics = () => { const Metrics = () => {
const inputs = [ const inputs = [
@ -17,7 +18,9 @@ const Metrics = () => {
inputs.map( inputs.map(
(item, index) => ( (item, index) => (
<div className="w-1/2 p-2"> <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> </div>
) )
) )

Loading…
Cancel
Save