DND: brandontilley.com blog post, React components and valueLink
var Editor = React.createClass({ | |
mixins: [React.addons.LinkedStateMixin], | |
getInitialState: function() { | |
return { text: "" }; | |
}, | |
render: function() { | |
var valueLink = this.linkState("text"); | |
var handleChange = function(evt) { | |
valueLink.requestChange(evt.target.value); | |
}; | |
return <input type="text" value={valueLink.value} | |
onChange={handleChange} />; | |
} | |
}); |
var ColorPicker = React.createClass({ | |
propTypes: { | |
value: React.PropTypes.string, | |
onChange: React.PropTypes.func | |
}, | |
getDefaultProps: function() { | |
return { | |
value: "", | |
onChange: function() {} | |
}; | |
}, | |
render: function() { | |
return <div />; | |
}, | |
componentDidMount: function() { | |
jQuery(this.getDOMNode()).colorPicker({ | |
// initial color from the `value` prop | |
pickerDefault: this.props.value, | |
onColorChange: this.onColorChange | |
}); | |
}, | |
componentWillReceiveProps: function(nextProps) { | |
if (this.props.value !== nextProps.value) { | |
// new `value` prop triggers manual change in plugin | |
var node = jQuery(this.getDOMNode()); | |
node.val(nextProps.value); | |
node.change(); | |
} | |
}, | |
onColorChange: function(id, color) { | |
// color changes sent to parent via `onChange` prop | |
this.props.onChange(color); | |
} | |
}); |
var ColorPicker = React.createClass({ | |
propTypes: { | |
valueLink: React.PropTypes.shape({ | |
value: React.PropTypes.string.isRequired, | |
requestChange: React.PropTypes.func.isRequired | |
}) | |
}, | |
getDefaultProps: function() { | |
return { | |
valueLink: { | |
value: "", | |
requestChange: function() {} | |
} | |
}; | |
}, | |
render: function() { | |
return <div />; | |
}, | |
componentDidMount: function() { | |
jQuery(this.getDOMNode()).colorPicker({ | |
// initial color from the `valueLink` prop | |
pickerDefault: this.props.valueLink.value, | |
onColorChange: this.onColorChange | |
}); | |
}, | |
componentWillReceiveProps: function(nextProps) { | |
if (this.props.valueLink.value !== nextProps.valueLink.value) { | |
// new `valueLink.value` prop triggers manual change in plugin | |
var node = jQuery(this.getDOMNode()); | |
node.val(nextProps.valueLink.value); | |
node.change(); | |
} | |
}, | |
onColorChange: function(id, color) { | |
// color changes sent to parent via `valueLink` prop | |
this.props.valueLink.requestChange(color); | |
} | |
}); |
var ColorPicker = React.createClass({ | |
propTypes: { | |
value: React.PropTypes.string, | |
onChange: React.PropTypes.func, | |
valueLink: React.PropTypes.shape({ | |
value: React.PropTypes.string.isRequired, | |
requestChange: React.PropTypes.func.isRequired | |
}) | |
}, | |
getDefaultProps: function() { | |
return { | |
value: "", | |
onChange: function() {}, | |
valueLink: null | |
}; | |
}, | |
getValueLink: function(props) { | |
return props.valueLink || { | |
value: props.value, | |
requestChange: props.onChange | |
}; | |
}, | |
render: function() { | |
return <div />; | |
}, | |
componentDidMount: function() { | |
jQuery(this.getDOMNode()).colorPicker({ | |
pickerDefault: this.getValueLink(this.props).value, | |
onColorChange: this.onColorChange | |
}); | |
}, | |
componentWillReceiveProps: function(nextProps) { | |
var currentValueLink = this.getValueLink(this.props), | |
nextValueLink = this.getValueLink(nextProps); | |
if (currentValueLink.value !== nextValueLink.value) { | |
var node = jQuery(this.getDOMNode()); | |
node.val(nextValueLink.value); | |
node.change(); | |
} | |
}, | |
onColorChange: function(id, color) { | |
this.getValueLink(this.props).requestChange(color); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment