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