react-input - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.js

 var React = require('react/addons');
+var classes = require('react-classes');
 
 var Input = React.createClass({
 
-  mixins: [React.addons.LinkedStateMixin],
+  mixins: [React.addons.LinkedStateMixin, classes],
 
+  /**
+   * @function focus
+   * @description Focus on the element.
+   */
+  focus: function () {
+    if (this.isMounted()) {
+      this.refs.input.getDOMNode().focus();
+    }
+  },
+
+  /**
+   * @function value
+   * @returns {string} The value of the input.
+   */
+  value: function () {
+    return this.state.value;
+  },
+
+  /**
+   * @function clear
+   * @description Clear the value of the element.
+   */
+  clear: function() {
+    this.setState({
+      value: ''
+    });
+  },
+
+  /**
+   * @private
+   * @function onChange
+   * @descriptin When the value of the input changes, update the state.
+   */
   _onChange: function (event) {
-    this.getValueLink(this.props).requestChange(event.target.value);
+
+    // Get the value from the input
+    var value = event.target.value;
+
+    // Set the state
+    this.setState({
+      value: value
+    }); 
+
+    // Run the onChange function if it exists
+    if (this.props.onChange) {
+      this.props.onChange(event, value);
+    }
+
   },
@@ -14,35 +61,34 @@
     type: React.PropTypes.string,
-    value: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    valueLink: React.PropTypes.shape({
-      value: React.PropTypes.string.isRequired,
-      requestChange: React.PropTypes.func.isRequired
-    })
+    name: React.PropTypes.string,
+    placeholder: React.PropTypes.string,
+    defaultValue: React.PropTypes.string,
+    error: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
+    onChange: React.PropTypes.func
   },
 
+  getInitialState: function () {
+    return {
+      value: this.props.defaultValue || ''
+    }
+  },
+
   getDefaultProps: function () {
     return {
-      label: '',
       type: 'text',
-      value: '',
-      onChange: function () {
-        return;
-      },
-      valueLink: null
+      onChange: this._onChange
     }
   },
 
-  getValueLink: function(props) {
-    return props.valueLink || {
-      value: props.value,
-      requestChange: props.onChange
-    };
-  },
-
   render: function () {
 
-    var Label; // the form label
+    var classes = this.getClass('input-group', {
+      'input-group-error': this.props.error || false,
+      'input-group-disabled': this.props.disabled || false
+    });
 
+    var label; // the form label
+
     if (this.props.label) {
-      Label = (
+      label = (
         <label className="input-group-label" for={this.props.name}>{this.props.label}</label>
@@ -52,13 +98,30 @@ );
 
+    /**
+     * Create the span element used for containing messages
+     * related to the element.
+     */
+    var span; 
+
+    if (this.props.error) {
+      span = (
+        <span className="input-group-span">{this.props.error}</span>
+      );
+    } else if (this.props.message) {
+      span = (
+        <span className="input-group-span">{this.props.message}</span>
+      );
+    } 
+
     return (
-      <div className="input-group">
-        <Label />
+      <div className={classes} ref={this.props.ref}>
+        {label}
         <input
+          ref="input"
+          className="input-group-field"
           type={this.props.type}
-          className="input-group-field"
           name={this.props.name}
-          label={this.props.label}
           placeholder={this.props.placeholder}
-          value={this.getValueLink(this.props).value}
+          value={this.state.value}
           onChange={this._onChange}/>
+        {span}
       </div>
@@ -65,0 +128,0 @@ )

package.json

 {
   "name": "react-input",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple input component for React.",
@@ -26,4 +26,5 @@ "main": "index.js",
   "dependencies": {
-    "react": "^0.12.2"
+    "react": "^0.12.2",
+    "react-classes": "^1.0.3"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5236

increased by146.05%

Number of package files

5

increased by66.67%

Lines of code

109

increased by94.64%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

29

increased byInfinity%

Worsened metrics

Dependency count

2

increased by100%

Number of low license alerts

2

increased byInfinity%

License quality

90

decreased by-10%

Dependency changes

• + Addedreact-classes@^1.0.3

• + Addedreact@0.13.3(transitive)

• + Addedreact-classes@1.1.1(transitive)