Merge pull request #49 from magicalcows/propagate-events

[Core] Propagate events as onChange()

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

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 () {

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,

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 () {

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,

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,

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,

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 () {