parent
0ede1bb75a
commit
d879791dae
12 changed files with 152 additions and 19 deletions
@ -0,0 +1,98 @@ |
|||||||
|
import React, { useState, useEffect } from "react"; |
||||||
|
import { HexColorPicker } from "react-colorful"; |
||||||
|
|
||||||
|
const LableInput = () => { |
||||||
|
const [tags, setTags] = useState([]); |
||||||
|
const [tag, setTag] = useState(null); |
||||||
|
const [fakeState, setFakeState] = useState(5); |
||||||
|
const initialColor = 'linear-gradient(143deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(137,71,8,1) 9%, rgba(147,143,7,1) 18%, rgba(71,159,6,1) 29%, rgba(5,178,69,1) 37%, rgba(5,178,185,1) 48%, rgba(4,56,197,1) 57%, rgba(54,3,209,1) 66%, rgba(160,3,216,1) 76%, rgba(236,1,167,1) 87%, rgba(255,0,0,1) 100%)' |
||||||
|
const [color, setColor] = useState(initialColor); |
||||||
|
const [colorPopUp, setColorPopUp] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (tag) { |
||||||
|
tags.push(tag); |
||||||
|
setFakeState(fakeState + 1) |
||||||
|
console.log(tags) |
||||||
|
} |
||||||
|
|
||||||
|
}, [tag]); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full rtl bg-white border mx-2 my-4 rounded-lg border-grayE0 flex flex-col py-6"> |
||||||
|
<h1 className="text-blue3A text-lg font-bold w-full text-right px-4 mb-2 border-r-4 border-blue65"> |
||||||
|
لیبل محصول |
||||||
|
</h1> |
||||||
|
<p className="text-xs font-bold text-right pr-4 text-gray-600 mb-6">توجه: امکان اضافه کردن فقط 3 لیبل بر روی تصاویر شاخص وجود دارد</p> |
||||||
|
<div className="flex px-4 mb-2"> |
||||||
|
<input type="text" className="bg-white border border-grayE0 h-12 w-full outline-none px-2 ml-2 rounded-md" id="lableInput" |
||||||
|
onKeyDown={(e) => { |
||||||
|
if (e.key == 'Enter' && document.getElementById('colorInput').value) { |
||||||
|
setTag({ |
||||||
|
title: e.target.value, |
||||||
|
color: document.getElementById('colorInput').value |
||||||
|
}); |
||||||
|
document.getElementById('lableInput').value = null |
||||||
|
} |
||||||
|
}} /> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="w-full px-4 flex items-center justify-between"> |
||||||
|
<div className="flex items-center"> |
||||||
|
<input type="text" className="bg-white border border-grayE0 h-14 w-2/5 text-center outline-none px-2 ml-2 rounded-lg" id="colorInput" |
||||||
|
value={colorPopUp ? color : null} |
||||||
|
placeholder="کد رنگ" |
||||||
|
onChange={(e) => { if (e.target.value !== '') { setColor(e.target.value) } else { setColor(initialColor) } console.log(color, e.target.value); }} /> |
||||||
|
|
||||||
|
<div className="h-14 w-14 rounded-lg cursor-pointer" |
||||||
|
style={{ background: color }} |
||||||
|
onClick={() => setColorPopUp(true)} |
||||||
|
> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<button className="bg-grayE0 w-24 h-14 mx-2 font-bold text-gray-600 rounded-lg" onClick={() => { |
||||||
|
setTag({ |
||||||
|
title: document.getElementById('lableInput').value, |
||||||
|
color: document.getElementById('colorInput').value |
||||||
|
}); |
||||||
|
document.getElementById('lableInput').value = null; |
||||||
|
document.getElementById('colorInput').value = null |
||||||
|
setColor(initialColor) |
||||||
|
}}> |
||||||
|
افزودن |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
{colorPopUp && <div className="flex flex-col absolute left-2 p-6 py-2 pb-6 bg-gray-100 border border-gray-200 rounded-lg mr-20 "> |
||||||
|
<div className="w-full text-left flex justify-end"><p className="cursor-pointer text-xl bg-gray-300 w-1/6 flex items-center justify-center text-gray-500 mb-2 rounded-md" |
||||||
|
onClick={() => setColorPopUp(false)}>X</p></div> |
||||||
|
<HexColorPicker color={color} onChange={setColor} /> |
||||||
|
</div> |
||||||
|
} |
||||||
|
<div className="w-full px-4 flex flex-wrap mt-2"> |
||||||
|
{ |
||||||
|
tags.map( |
||||||
|
(item, index) => ( |
||||||
|
<div className="bg-opacity-30 py-1 flex items-center justify-center px-4 m-1 rtl rounded-md" style={{ color: item.color, background:item.color+15 }}> |
||||||
|
|
||||||
|
<p>{item.title}</p> |
||||||
|
<p className="mr-1 cursor-pointer" onClick={() => { tags.splice(tags.findIndex(e => e === item), 1); setFakeState(!fakeState); }}>x</p> |
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
) |
||||||
|
} |
||||||
|
</div> |
||||||
|
|
||||||
|
|
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default LableInput; |
||||||
Loading…
Reference in new issue