FormstText implementation based on https://github.com/christianalfoni…

…/formsy-react/wiki/validate-on-blur
formsy · Nov 2, 2015 · 174fc0c · 174fc0c
1 parent 572e3b6
commit 174fc0c
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 5 deletions.
diff --git a/formsy-material-ui.jsx b/formsy-material-ui.jsx
@@ -100,13 +100,54 @@ let FormsySelect = React.createClass({
 });
 
 let FormsyText = React.createClass({
-  mixins: [ Formsy.Mixin, FormComponentMixin ],
+  displayName: 'FormsyText',
+
+  propTypes: {
+    name: React.PropTypes.string.isRequired,
+    validations: React.PropTypes.string,
+    validationError: React.PropTypes.string,
+    hintText: React.PropTypes.string,
+    floatingLabelText: React.PropTypes.string
+  },
+
+  handleChange: function handleChange(event) {
+    if(this.getErrorMessage() != null){
+      this.setValue(event.currentTarget.value);
+    }
+    else{
+      if (this.isValidValue(event.target.value)) {
+        this.setValue(event.target.value);
+      }
+      else{
+        this.setState({
+          _value: event.currentTarget.value,
+          _isPristine: false
+        });
+      }
+    }
+  },
+
+  handleValueChange: function handleValueChange(event, value) {
+    this.setValue(value);
+  },
+
+  handleBlur: function handleBlur(event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  handleEnterKeyDown: function handleEnterKeyDown(event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  mixins: [ Formsy.Mixin ],
 
   render: function () {
     return (
       <TextField
         {...this.props}
-        onBlur={this.handleChange}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+        onEnterKeyDown={this.handleEnterKeyDown}
         errorText={this.getErrorMessage()}
         value={this.getValue()} />
     );

diff --git a/index.js b/index.js
@@ -115,11 +115,48 @@ var FormsySelect = React.createClass({
 var FormsyText = React.createClass({
   displayName: 'FormsyText',
 
-  mixins: [Formsy.Mixin, FormComponentMixin],
+  propTypes: {
+    name: React.PropTypes.string.isRequired,
+    validations: React.PropTypes.string,
+    validationError: React.PropTypes.string,
+    hintText: React.PropTypes.string,
+    floatingLabelText: React.PropTypes.string
+  },
+
+  handleChange: function handleChange(event) {
+    if (this.getErrorMessage() != null) {
+      this.setValue(event.currentTarget.value);
+    } else {
+      if (this.isValidValue(event.target.value)) {
+        this.setValue(event.target.value);
+      } else {
+        this.setState({
+          _value: event.currentTarget.value,
+          _isPristine: false
+        });
+      }
+    }
+  },
+
+  handleValueChange: function handleValueChange(event, value) {
+    this.setValue(value);
+  },
+
+  handleBlur: function handleBlur(event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  handleEnterKeyDown: function handleEnterKeyDown(event) {
+    this.setValue(event.currentTarget.value);
+  },
+
+  mixins: [Formsy.Mixin],
 
   render: function render() {
     return React.createElement(TextField, _extends({}, this.props, {
-      onBlur: this.handleChange,
+      onChange: this.handleChange,
+      onBlur: this.handleBlur,
+      onEnterKeyDown: this.handleEnterKeyDown,
       errorText: this.getErrorMessage(),
       value: this.getValue() }));
   }
@@ -165,4 +202,4 @@ module.exports = {
   FormsyText: FormsyText,
   FormsyTime: FormsyTime,
   FormsyToggle: FormsyToggle
-};
+};