diff --git a/README.md b/README.md index b2b9461..3ca4573 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,15 @@ var FormsyTime = FMUI.FormsyTime; var FormsyToggle = FMUI.FormsyToggle; ``` +### Events + +As of 0.3.8, components allow for `onChange` event handlers in props. They are fired when the value of the +component changes, regardless of the underlying handler (eg, `FomrsyToggle` uses `onToggle` internally, but we +still use `onChange` in props to hook into the event.) +The call back signatures for all `onChange` handlers conform to + Material-UI's proposed [Standardized Callback Signatures](https://github.com/callemall/material-ui/issues/2957). +An example usage of this would be to use an `onChange` for the FormsySelect and receive notifications when it changes. + ### Examples #### Example App diff --git a/src/FormsyCheckbox.jsx b/src/FormsyCheckbox.jsx index f88e047..eb8e886 100644 --- a/src/FormsyCheckbox.jsx +++ b/src/FormsyCheckbox.jsx @@ -12,6 +12,7 @@ let FormsyCheckbox = React.createClass({ handleValueChange: function (event, value) { this.setValue(value); + if (this.props.onChange) this.props.onChange(event, value); }, componentDidMount: function () { diff --git a/src/FormsyDate.jsx b/src/FormsyDate.jsx index 341d7b0..c1e55b5 100644 --- a/src/FormsyDate.jsx +++ b/src/FormsyDate.jsx @@ -12,6 +12,7 @@ let FormsyDate = React.createClass({ handleValueChange: function (event, value) { this.setValue(value); + if (this.props.onChange) this.props.onChange(event, value); }, _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus, diff --git a/src/FormsyRadioGroup.jsx b/src/FormsyRadioGroup.jsx index 4616a67..bcc5b08 100644 --- a/src/FormsyRadioGroup.jsx +++ b/src/FormsyRadioGroup.jsx @@ -12,6 +12,7 @@ let FormsyRadioGroup = React.createClass({ handleValueChange: function (event, value) { this.setValue(value); + if (this.props.onChange) this.props.onChange(event, value); }, componentDidMount: function () { diff --git a/src/FormsySelect.jsx b/src/FormsySelect.jsx index 5f715d8..dff198c 100644 --- a/src/FormsySelect.jsx +++ b/src/FormsySelect.jsx @@ -19,6 +19,7 @@ let FormsySelect = React.createClass({ handleChange: function (event, index, value) { this.setValue(value); this.setState({hasChanged: true}); + if (this.props.onChange) this.props.onChange(event, value, index); }, _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus, diff --git a/src/FormsyText.jsx b/src/FormsyText.jsx index 18ac53a..b2e74d0 100644 --- a/src/FormsyText.jsx +++ b/src/FormsyText.jsx @@ -16,16 +16,19 @@ let FormsyText = React.createClass({ handleChange: function handleChange(event) { if(this.getErrorMessage() != null){ this.setValue(event.currentTarget.value); + if (this.props.onChange) this.props.onChange(event, event.currentTarget.value); } else{ if (this.isValidValue(event.target.value)) { this.setValue(event.target.value); + if (this.props.onChange) this.props.onChange(event, event.target.value); } else{ this.setState({ _value: event.currentTarget.value, _isPristine: false }); + if (this.props.onChange) this.props.onChange(event, event.currentTarget.value); } } }, @@ -37,6 +40,7 @@ let FormsyText = React.createClass({ handleEnterKeyDown: function handleEnterKeyDown(event) { this.setValue(event.currentTarget.value); + if (this.props.onEnterKeyDown) this.props.onEnterKeyDown(event, event.currentTarget.value); }, _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus, diff --git a/src/FormsyTime.jsx b/src/FormsyTime.jsx index abcfb28..381c479 100644 --- a/src/FormsyTime.jsx +++ b/src/FormsyTime.jsx @@ -12,6 +12,7 @@ let FormsyTime = React.createClass({ handleValueChange: function (event, value) { this.setValue(value); + if (this.props.onChange) this.props.onChange(event, value); }, _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus, diff --git a/src/FormsyToggle.jsx b/src/FormsyToggle.jsx index d58c52a..33b9586 100644 --- a/src/FormsyToggle.jsx +++ b/src/FormsyToggle.jsx @@ -12,6 +12,7 @@ let FormsyToggle = React.createClass({ handleValueChange: function (event, value) { this.setValue(value); + if (this.props.onChange) this.props.onChange(event, value); }, componentDidMount: function () {