Hey, Could Anyone Be Able To Help Me To Add This Functionality by With Adding A Close Button For The Selected Colors From The Color Picker.
This Is What Happen, Click On The "Plus" Icon "Color Picker" Popup
Then It'll Show The Selected Colors In Circles, Like In The Bottom
The Issue Is Unable To Remove This Selected Colors, Could Anyone Tell How Can I Be Able To Add A Close Button Above The Selected Color Circles.
This Is The Code :
Thank You !
This Is What Happen, Click On The "Plus" Icon "Color Picker" Popup
Then It'll Show The Selected Colors In Circles, Like In The Bottom
The Issue Is Unable To Remove This Selected Colors, Could Anyone Tell How Can I Be Able To Add A Close Button Above The Selected Color Circles.
This Is The Code :
JavaScript:
<div className="col">
<div className="form-group add-products">
<label htmlFor="productPrice">Product Colors</label>
<div>
{colors.length > 0 &&
<CirclePicker colors={colors}/>
}
<div className="form-check form-check-inline">
<button type="button" className="btn rounded-circle"
style={{padding: "0px 0px"}}
onClick={() => setDisplayColorPicker(!displayColorPicker)}>
<img src={PlusButton} alt=""/>
</button>
{displayColorPicker ?
<div style={{position: "absolute", zIndex: "2"}}>
<div style={{
position: 'fixed',
top: '0px',
right: '0px',
bottom: '0px',
left: '0px'
}} onClick={() => {
if (!colors.includes(color)) {
setColors(values => [...values, color]);
}
setDisplayColorPicker(false);
}} />
<ChromePicker color={color} onChangeComplete={handleColorChange}/>
</div>
: null
}
</div>
</div>
</div>
</div>
Thank You !