react-input-placeholder - npm Package Compare versions

Comparing version 0.1.3 to 1.0.0

dist/react-input-placeholder.js

@@ -1,2 +0,2 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var isPlaceholderSupported = 'placeholder' in document.createElement('input');
@@ -8,5 +8,5 @@
  */
-module.exports = function(React) {
+var createShimmedElement = function(React, elementConstructor, name) {
   return React.createClass({
-    displayName: 'Input',
+    displayName: name,
 
@@ -81,15 +81,15 @@ componentWillMount: function() {
 
-    componentDidUpdate: function(prevProps, prevState, node) {
-      this.setSelectionIfNeeded(node);
+    componentDidUpdate: function() {
+      this.setSelectionIfNeeded(this.getDOMNode());
     },
 
     render: function() {
-      var input = this.transferPropsTo(React.DOM.input());
+      var element = this.transferPropsTo(elementConstructor());
       if (this.needsPlaceholding) {
         // override valueLink and event handlers
-        input.props.onFocus = this.onFocus;
-        input.props.onBlur = this.onBlur;
-        input.props.onChange = this.onChange;
-        input.props.onSelect = this.onSelect;
-        input.props.valueLink = undefined;
+        element.props.onFocus = this.onFocus;
+        element.props.onBlur = this.onBlur;
+        element.props.onChange = this.onChange;
+        element.props.onSelect = this.onSelect;
+        element.props.valueLink = undefined;
 
@@ -100,12 +100,19 @@ var value = this.getValue();
           value = this.props.placeholder;
-          input.props.type = 'text';
-          input.props.className += ' placeholder';
+          element.props.type = 'text';
+          element.props.className += ' placeholder';
         } else {
           this.isPlaceholding = false;
         }
-        input.props.value = value;
+        element.props.value = value;
       }
-      return input;
+      return element;
     }
   });
+}
+
+module.exports = function(React) {
+  return {
+    Input: createShimmedElement(React, React.DOM.input, "Input"),
+    Textarea: createShimmedElement(React, React.DOM.textarea, "Textarea")
+  }
 };
@@ -121,6 +128,5 @@
 } else {
-  window.React.addons = window.React.addons || {};
-  window.React.addons.Input = reactInputPlaceholder(window.React);
+  window.PlaceholderShim = reactInputPlaceholder(window.React);
 }
-
-},{"./react-input-placeholder":1}]},{},[2])
+},{"./react-input-placeholder":1}]},{},[2])
+;

dist/react-input-placeholder.min.js

@@ -1,2 +0,2 @@
-/*! react-input-placeholder - v 0.1.0 - enigma.io 2014-02-03 */
-!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);throw new Error("Cannot find module '"+g+"'")}var j=c[g]={exports:{}};b[g][0].call(j.exports,function(a){var c=b[g][1][a];return e(c?c:a)},j,j.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b){var c="placeholder"in document.createElement("input");b.exports=function(a){return a.createClass({displayName:"Input",componentWillMount:function(){this.needsPlaceholding=this.props.placeholder&&!c},componentWillReceiveProps:function(a){this.needsPlaceholding=a.placeholder&&!c},getValue:function(){return this.props.valueLink?this.props.valueLink.value:this.props.value},getOnChange:function(){return this.props.valueLink?this._handleLinkedValueChange:this.props.onChange},_handleLinkedValueChange:function(a){this.props.valueLink.requestChange(a.target.value)},onFocus:function(a){return this.hasFocus=!0,this.setSelectionIfNeeded(a.target),this.props.onFocus?this.props.onFocus(a):void 0},onBlur:function(a){return this.hasFocus=!1,this.props.onBlur?this.props.onBlur(a):void 0},setSelectionIfNeeded:function(a){return this.needsPlaceholding&&this.hasFocus&&this.isPlaceholding&&(0!==a.selectionStart||0!==a.selectionEnd)?(a.setSelectionRange(0,0),!0):!1},onChange:function(a){if(this.isPlaceholding){var b=a.target.value,c=b.indexOf(this.props.placeholder);-1!==c&&(a.target.value=b.slice(0,c))}var d=this.getOnChange();return d?d(a):void 0},onSelect:function(a){return this.isPlaceholding?(this.setSelectionIfNeeded(a.target),!1):this.props.onSelect?this.props.onSelect(a):void 0},componentDidUpdate:function(a,b,c){this.setSelectionIfNeeded(c)},render:function(){var b=this.transferPropsTo(a.DOM.input());if(this.needsPlaceholding){b.props.onFocus=this.onFocus,b.props.onBlur=this.onBlur,b.props.onChange=this.onChange,b.props.onSelect=this.onSelect,b.props.valueLink=void 0;var c=this.getValue();c?this.isPlaceholding=!1:(this.isPlaceholding=!0,c=this.props.placeholder,b.props.type="text",b.props.className+=" placeholder"),b.props.value=c}return b}})}},{}],2:[function(a){var b=a("./react-input-placeholder");"function"==typeof define&&define.amd?define(["react"],function(a){return b(a)}):(window.React.addons=window.React.addons||{},window.React.addons.Input=b(window.React))},{"./react-input-placeholder":1}]},{},[2]);
+/*! react-input-placeholder - v 1.0.0 -  2014-10-22 */
+!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);throw new Error("Cannot find module '"+g+"'")}var j=c[g]={exports:{}};b[g][0].call(j.exports,function(a){var c=b[g][1][a];return e(c?c:a)},j,j.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b){var c="placeholder"in document.createElement("input"),d=function(a,b,d){return a.createClass({displayName:d,componentWillMount:function(){this.needsPlaceholding=this.props.placeholder&&!c},componentWillReceiveProps:function(a){this.needsPlaceholding=a.placeholder&&!c},getValue:function(){return this.props.valueLink?this.props.valueLink.value:this.props.value},getOnChange:function(){return this.props.valueLink?this._handleLinkedValueChange:this.props.onChange},_handleLinkedValueChange:function(a){this.props.valueLink.requestChange(a.target.value)},onFocus:function(a){return this.hasFocus=!0,this.setSelectionIfNeeded(a.target),this.props.onFocus?this.props.onFocus(a):void 0},onBlur:function(a){return this.hasFocus=!1,this.props.onBlur?this.props.onBlur(a):void 0},setSelectionIfNeeded:function(a){return this.needsPlaceholding&&this.hasFocus&&this.isPlaceholding&&(0!==a.selectionStart||0!==a.selectionEnd)?(a.setSelectionRange(0,0),!0):!1},onChange:function(a){if(this.isPlaceholding){var b=a.target.value,c=b.indexOf(this.props.placeholder);-1!==c&&(a.target.value=b.slice(0,c))}var d=this.getOnChange();return d?d(a):void 0},onSelect:function(a){return this.isPlaceholding?(this.setSelectionIfNeeded(a.target),!1):this.props.onSelect?this.props.onSelect(a):void 0},componentDidUpdate:function(){this.setSelectionIfNeeded(this.getDOMNode())},render:function(){var a=this.transferPropsTo(b());if(this.needsPlaceholding){a.props.onFocus=this.onFocus,a.props.onBlur=this.onBlur,a.props.onChange=this.onChange,a.props.onSelect=this.onSelect,a.props.valueLink=void 0;var c=this.getValue();c?this.isPlaceholding=!1:(this.isPlaceholding=!0,c=this.props.placeholder,a.props.type="text",a.props.className+=" placeholder"),a.props.value=c}return a}})};b.exports=function(a){return{Input:d(a,a.DOM.input,"Input"),Textarea:d(a,a.DOM.textarea,"Textarea")}}},{}],2:[function(a){var b=a("./react-input-placeholder");"function"==typeof define&&define.amd?define(["react"],function(a){return b(a)}):window.PlaceholderShim=b(window.React)},{"./react-input-placeholder":1}]},{},[2]);

package.json

 {
   "name": "react-input-placeholder",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "",
@@ -19,3 +19,3 @@ "main": "src/react-input-placeholder.js",
   ],
-  "author": "enigma.io",
+  "contributors": ["enigma.io","Joe Natalzia"],
   "license": "MIT",
@@ -22,0 +22,0 @@ "bugs": {

README.md

@@ -1,7 +0,7 @@
-React Input with Placeholder Shim
+React Input and Textarea with Placeholder Shim
 =======================
 
-`Input` is a small wrapper around `React.DOM.input` that shims in `placeholder` functionality for browsers that don't natively support it. Currently only tested with IE9.
+`PlaceholderShim` provides `Input` and `Textarea`, small wrappers around `React.DOM.input`  and `React.DOM.textarea` respectively that shims in `placeholder` functionality for browsers that don't natively support it. Currently only tested with IE9.
 
-Demo: http://jsfiddle.net/gb4xq/6/
+Demo: http://jsfiddle.net/gb4xq/12/
 
@@ -14,7 +14,11 @@ ## Getting Started
 
-Require: `Input = require('react-input-placeholder')(React);`
+Require:
+```
+Input = require('react-input-placeholder')(React).Input;
+Textarea = require('react-input-placeholder')(React).Textarea;
+```
 
 ### No module
 
-The compiled component sits in the `dist` folder, and places itself in `React.addons`.
+The compiled component sits in the `dist` folder.
 
@@ -24,3 +28,4 @@ ```
 <script>
-  var Input = React.addons.Input;
+  var Input = PlaceholderShim.Input;
+  var Textarea = PlaceholderShim.Textarea;
 </script>
@@ -31,7 +36,7 @@ ```
 
-You can use `Input` exactly the same way you'd use `React.DOM.input`. All attributes will be passed on, and all event callbacks will be called. However, please note that the placeholder shim only works on [controlled](http://facebook.github.io/react/docs/forms.html#controlled-components) inputs (i.e., you must provide a `value` or `valueLink` prop).
+You can use `Input` or `Textarea` exactly the same way you'd use `React.DOM.Input`. All attributes will be passed on, and all event callbacks will be called. However, please note that the placeholder shim only works on [controlled](http://facebook.github.io/react/docs/forms.html#controlled-components) inputs (i.e., you must provide a `value` or `valueLink` prop).
 
 When the placeholder text is visible, the `placeholder` CSS class will be added to the `input` element so you can style it, e.g.
 ```
-input.placeholder {
+input.placeholder, textarea.placeholder {
   color: gray;
@@ -38,0 +43,0 @@ font-style: italic;

src/react-input-placeholder.js

@@ -7,5 +7,5 @@ var isPlaceholderSupported = 'placeholder' in document.createElement('input');
  */
-module.exports = function(React) {
+var createShimmedElement = function(React, elementConstructor, name) {
   return React.createClass({
-    displayName: 'Input',
+    displayName: name,
 
@@ -85,10 +85,10 @@ componentWillMount: function() {
     render: function() {
-      var input = this.transferPropsTo(React.DOM.input());
+      var element = this.transferPropsTo(elementConstructor());
       if (this.needsPlaceholding) {
         // override valueLink and event handlers
-        input.props.onFocus = this.onFocus;
-        input.props.onBlur = this.onBlur;
-        input.props.onChange = this.onChange;
-        input.props.onSelect = this.onSelect;
-        input.props.valueLink = undefined;
+        element.props.onFocus = this.onFocus;
+        element.props.onBlur = this.onBlur;
+        element.props.onChange = this.onChange;
+        element.props.onSelect = this.onSelect;
+        element.props.valueLink = undefined;
 
@@ -99,12 +99,19 @@ var value = this.getValue();
           value = this.props.placeholder;
-          input.props.type = 'text';
-          input.props.className += ' placeholder';
+          element.props.type = 'text';
+          element.props.className += ' placeholder';
         } else {
           this.isPlaceholding = false;
         }
-        input.props.value = value;
+        element.props.value = value;
       }
-      return input;
+      return element;
     }
   });
+}
+
+module.exports = function(React) {
+  return {
+    Input: createShimmedElement(React, React.DOM.input, "Input"),
+    Textarea: createShimmedElement(React, React.DOM.textarea, "Textarea")
+  }
 };

src/umd.js

@@ -8,4 +8,3 @@ /*global define*/
 } else {
-  window.React.addons = window.React.addons || {};
-  window.React.addons.Input = reactInputPlaceholder(window.React);
-}
+  window.PlaceholderShim = reactInputPlaceholder(window.React);
+}

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15957

increased by4.31%

Lines of code

298

increased by3.47%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

70

increased by7.69%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes