diff --git a/README.md b/README.md index b2b9461..7c07628 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,13 @@ var FormsyTime = FMUI.FormsyTime; var FormsyToggle = FMUI.FormsyToggle; ``` +### Events + +As of 0.3.8 events that are used in components (eg, have a binding to their own internal method) are checked for +in `this.props`, and when found, are called with 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..69aa467 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.onCheck) this.props.onCheck(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..b8a700e 100644 --- a/src/FormsyRadioGroup.jsx +++ b/src/FormsyRadioGroup.jsx @@ -16,6 +16,7 @@ let FormsyRadioGroup = React.createClass({ componentDidMount: function () { this.setValue(this._muiComponent.getSelectedValue()); + if (this.props.onChange) this.props.onChange(event, value); }, _setMuiComponentAndMaybeFocus: _setMuiComponentAndMaybeFocus, 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..1ad9bb5 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.onToggle) this.props.onToggle(event, value); }, componentDidMount: function () {