Includes a form input accompanied with color picker, based on React Color Picker.
See them in action:
You can specify:
import ColorPickerField from '@src/components/color-picker-field/ColorPickerField.jsx';
<ColorPickerField
changeColorHandler={this.changeColor2}
colorValue={this.state.color2}
placement="bottomRight"
fieldName="color2"
/>
Event handler takes 2 parameters: color and field name, for example:
changeColor = (color, fieldName)=>{
let colorVal = {};
colorVal[fieldName] = color;
this.setState(colorVal);
}
import ColorPickerField from '@src/components/color-picker-field/ColorPickerField.jsx';
class ColorPickerFieldDemoView extends Component {
constructor(props) {
super(props);
this.state = {
color: '#DB36AB',
color2: 'red'
};
}
changeColor = (color, fieldName)=>{
let colorVal = {};
colorVal[fieldName] = color;
this.setState(colorVal);
}
render() {
return (
<div className="panel-light">
<div className="row">
<div className="col-md-6">
<h3>Color Picker Field demo
<h5 className="">Bottom Left
<div>
<span>Selected color: <strong>{this.state.color}
</div>
<ColorPickerField
changeColorHandler={this.changeColor}
colorValue={this.state.color}
placement="bottomLeft"
fieldName="color"
/>
<ColorPickerField
changeColorHandler={this.changeColor2}
colorValue={this.state.color2}
placement="bottomRight"
fieldName="color2"
/>
</div>
</div>
</div>);
}
}
export default ColorPickerFieldDemoView;