Imagine you want a "controlled" color picker, so write the following:
class ColorPicker {
constructor(props) {
this.props = props;
etch.initialize(this);
}
handleChange(event) {
const value = event.target.value;
if (value !== this.props.value) {
// revert the value so that it stays consistent with the `props`
// this is the part that doesn't currently work <------------------------------
etch.update(this);
// notify the parent of the change
this.props.onChange(value);
}
}
render() {
return <input {...this.props} type="color" onChange={this.handleChange} />;
}
update(nextProps) {
if (shallowDiffers(this.props, nextProps)) {
this.props = nextProps;
etch.update(this);
}
}
}
And imagine you want to have an instance that refuses some colors:
const picker = new ColorPicker({value: '#fff', onChange: handleChange});
document.body.appendChild(picker.element)
function handleChange(color) {
if (color.endsWith('ff')) {
// color must have the blue at max
picker.update({value: color, onChange: handleChange});
}
}
This is not currently possible because when the etch.update(this) in the handleChange is called, it calls updateProps which updates the input.value only if the new value is !== than the old one.
But in this case the new value is always === the old one.
Ref. lib/update-props.js:59
This PR solves this case for input and select type elements.
Imagine you want a "controlled" color picker, so write the following:
And imagine you want to have an instance that refuses some colors:
This is not currently possible because when the
etch.update(this)
in thehandleChange
is called, it callsupdateProps
which updates theinput.value
only if the new value is!==
than the old one. But in this case the new value is always===
the old one. Ref. lib/update-props.js:59This PR solves this case for
input
andselect
type elements.