react-input-autosize - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

bower.json

 {
   "name": "react-input-autosize",
   "main": "dist/react-input-autosize.min.js",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "homepage": "https://github.com/JedWatson/react-input-autosize",
@@ -6,0 +6,0 @@ "authors": [

dist/react-input-autosize.js

 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.AutosizeInput=e()}}(function(){var define,module,exports;return (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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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 (global){
+"use strict";
+
 var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
 
-var sizerStyle = { position: 'absolute', visibility: 'hidden', height: 0, width: 0, overflow: 'scroll', whiteSpace: 'nowrap' };
+var sizerStyle = { position: "absolute", visibility: "hidden", height: 0, width: 0, overflow: "scroll", whiteSpace: "nowrap" };
 
 var AutosizeInput = React.createClass({
-	
-	displayName: 'AutosizeInput',
 
-	propTypes: {
-		value: React.PropTypes.any,                 // field value
-		defaultValue: React.PropTypes.any,          // default field value
-		onChange: React.PropTypes.func,             // onChange handler: function(newValue) {}
-		style: React.PropTypes.object,              // css styles for the outer element
-		className: React.PropTypes.string,          // className for the outer element
-		inputStyle: React.PropTypes.object,         // css styles for the input element
-		inputClassName: React.PropTypes.string      // className for the input element
-	},
-	
-	getDefaultProps: function() {
-		return {
-			minWidth: 1
-		};
-	},
-	
-	getInitialState: function() {
-		return {
-			inputWidth: this.props.minWidth
-		};
-	},
-	
-	componentDidMount: function() {
-		this.copyInputStyles();
-		this.updateInputWidth();
-	},
-	
-	componentDidUpdate: function() {
-		this.updateInputWidth();
-	},
-	
-	copyInputStyles: function() {
-		if (!this.isMounted() || !window.getComputedStyle) {
-			return;
-		}
-		var inputStyle = window.getComputedStyle(this.refs.input.getDOMNode());
-		var widthNode = this.refs.sizer.getDOMNode();
-		widthNode.style.fontSize = inputStyle.fontSize;
-		widthNode.style.fontFamily = inputStyle.fontFamily;
-	},
-	
-	updateInputWidth: function() {
-		if (!this.isMounted()) {
-			return;
-		}
-		var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth + 2;
-		if (newInputWidth < this.props.minWidth) {
-			newInputWidth = this.props.minWidth;
-		}
-		if (newInputWidth !== this.state.inputWidth) {
-			this.setState({
-				inputWidth: newInputWidth
-			});
-		}
-	},
-	
-	getInput: function() {
-		return this.refs.input;
-	},
-	
-	focus: function() {
-		this.refs.input.getDOMNode().focus();
-	},
-	
-	select: function() {
-		this.refs.input.getDOMNode().select();
-	},
-	
-	render: function() {
-		
-		var nbspValue = (this.props.value || '').replace(/ /g, '&nbsp;');
-		
-		var wrapperStyle = this.props.style || {};
-		wrapperStyle.display = 'inline-block';
-		
-		var inputStyle = this.props.inputStyle || {};
-		inputStyle.width = this.state.inputWidth;
-		
-		return (
-			React.createElement("div", {className: this.props.className, style: wrapperStyle}, 
-				React.createElement("input", React.__spread({},  this.props, {ref: "input", className: this.props.inputClassName, style: inputStyle})), 
-				React.createElement("div", {ref: "sizer", style: sizerStyle, dangerouslySetInnerHTML: { __html: nbspValue}})
-			)
-		);
-		
-	}
-	
+  displayName: "AutosizeInput",
+
+  propTypes: {
+    value: React.PropTypes.any, // field value
+    defaultValue: React.PropTypes.any, // default field value
+    onChange: React.PropTypes.func, // onChange handler: function(newValue) {}
+    style: React.PropTypes.object, // css styles for the outer element
+    className: React.PropTypes.string, // className for the outer element
+    inputStyle: React.PropTypes.object, // css styles for the input element
+    inputClassName: React.PropTypes.string // className for the input element
+  },
+
+  getDefaultProps: function () {
+    return {
+      minWidth: 1
+    };
+  },
+
+  getInitialState: function () {
+    return {
+      inputWidth: this.props.minWidth
+    };
+  },
+
+  componentDidMount: function () {
+    this.copyInputStyles();
+    this.updateInputWidth();
+  },
+
+  componentDidUpdate: function () {
+    this.updateInputWidth();
+  },
+
+  copyInputStyles: function () {
+    if (!this.isMounted() || !window.getComputedStyle) {
+      return;
+    }
+    var inputStyle = window.getComputedStyle(this.refs.input.getDOMNode());
+    var widthNode = this.refs.sizer.getDOMNode();
+    widthNode.style.fontSize = inputStyle.fontSize;
+    widthNode.style.fontFamily = inputStyle.fontFamily;
+  },
+
+  updateInputWidth: function () {
+    if (!this.isMounted()) {
+      return;
+    }
+    var newInputWidth = this.refs.sizer.getDOMNode().scrollWidth + 2;
+    if (newInputWidth < this.props.minWidth) {
+      newInputWidth = this.props.minWidth;
+    }
+    if (newInputWidth !== this.state.inputWidth) {
+      this.setState({
+        inputWidth: newInputWidth
+      });
+    }
+  },
+
+  getInput: function () {
+    return this.refs.input;
+  },
+
+  focus: function () {
+    this.refs.input.getDOMNode().focus();
+  },
+
+  select: function () {
+    this.refs.input.getDOMNode().select();
+  },
+
+  render: function () {
+    var nbspValue = (this.props.value || "").replace(/ /g, "&nbsp;");
+
+    var wrapperStyle = this.props.style || {};
+    wrapperStyle.display = "inline-block";
+
+    var inputStyle = this.props.inputStyle || {};
+    inputStyle.width = this.state.inputWidth;
+
+    return React.createElement(
+      "div",
+      { className: this.props.className, style: wrapperStyle },
+      React.createElement("input", React.__spread({}, this.props, { ref: "input", className: this.props.inputClassName, style: inputStyle })),
+      React.createElement("div", { ref: "sizer", style: sizerStyle, dangerouslySetInnerHTML: { __html: nbspValue } })
+    );
+  }
+
 });
 
 module.exports = AutosizeInput;
-
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
 },{}]},{},[1])(1)
 });

dist/react-input-autosize.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;"undefined"!=typeof window?t=window:"undefined"!=typeof global?t=global:"undefined"!=typeof self&&(t=self),t.AutosizeInput=e()}}(function(){return function e(t,n,i){function o(p,r){if(!n[p]){if(!t[p]){var u="function"==typeof require&&require;if(!r&&u)return u(p,!0);if(s)return s(p,!0);var f=new Error("Cannot find module '"+p+"'");throw f.code="MODULE_NOT_FOUND",f}var d=n[p]={exports:{}};t[p][0].call(d.exports,function(e){var n=t[p][1][e];return o(n?n:e)},d,d.exports,e,t,n,i)}return n[p].exports}for(var s="function"==typeof require&&require,p=0;p<i.length;p++)o(i[p]);return o}({1:[function(e,t){(function(e){var n="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i={position:"absolute",visibility:"hidden",height:0,width:0,overflow:"scroll",whiteSpace:"nowrap"},o=n.createClass({displayName:"AutosizeInput",propTypes:{value:n.PropTypes.any,defaultValue:n.PropTypes.any,onChange:n.PropTypes.func,style:n.PropTypes.object,className:n.PropTypes.string,inputStyle:n.PropTypes.object,inputClassName:n.PropTypes.string},getDefaultProps:function(){return{minWidth:1}},getInitialState:function(){return{inputWidth:this.props.minWidth}},componentDidMount:function(){this.copyInputStyles(),this.updateInputWidth()},componentDidUpdate:function(){this.updateInputWidth()},copyInputStyles:function(){if(this.isMounted()&&window.getComputedStyle){var e=window.getComputedStyle(this.refs.input.getDOMNode()),t=this.refs.sizer.getDOMNode();t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily}},updateInputWidth:function(){if(this.isMounted()){var e=this.refs.sizer.getDOMNode().scrollWidth+2;e<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}},getInput:function(){return this.refs.input},focus:function(){this.refs.input.getDOMNode().focus()},select:function(){this.refs.input.getDOMNode().select()},render:function(){var e=(this.props.value||"").replace(/ /g,"&nbsp;"),t=this.props.style||{};t.display="inline-block";var o=this.props.inputStyle||{};return o.width=this.state.inputWidth,n.createElement("div",{className:this.props.className,style:t},n.createElement("input",n.__spread({},this.props,{ref:"input",className:this.props.inputClassName,style:o})),n.createElement("div",{ref:"sizer",style:i,dangerouslySetInnerHTML:{__html:e}}))}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;"undefined"!=typeof window?t=window:"undefined"!=typeof global?t=global:"undefined"!=typeof self&&(t=self),t.AutosizeInput=e()}}(function(){return function e(t,n,i){function o(r,p){if(!n[r]){if(!t[r]){var u="function"==typeof require&&require;if(!p&&u)return u(r,!0);if(s)return s(r,!0);var f=new Error("Cannot find module '"+r+"'");throw f.code="MODULE_NOT_FOUND",f}var d=n[r]={exports:{}};t[r][0].call(d.exports,function(e){var n=t[r][1][e];return o(n?n:e)},d,d.exports,e,t,n,i)}return n[r].exports}for(var s="function"==typeof require&&require,r=0;r<i.length;r++)o(i[r]);return o}({1:[function(e,t){(function(e){"use strict";var n="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,i={position:"absolute",visibility:"hidden",height:0,width:0,overflow:"scroll",whiteSpace:"nowrap"},o=n.createClass({displayName:"AutosizeInput",propTypes:{value:n.PropTypes.any,defaultValue:n.PropTypes.any,onChange:n.PropTypes.func,style:n.PropTypes.object,className:n.PropTypes.string,inputStyle:n.PropTypes.object,inputClassName:n.PropTypes.string},getDefaultProps:function(){return{minWidth:1}},getInitialState:function(){return{inputWidth:this.props.minWidth}},componentDidMount:function(){this.copyInputStyles(),this.updateInputWidth()},componentDidUpdate:function(){this.updateInputWidth()},copyInputStyles:function(){if(this.isMounted()&&window.getComputedStyle){var e=window.getComputedStyle(this.refs.input.getDOMNode()),t=this.refs.sizer.getDOMNode();t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily}},updateInputWidth:function(){if(this.isMounted()){var e=this.refs.sizer.getDOMNode().scrollWidth+2;e<this.props.minWidth&&(e=this.props.minWidth),e!==this.state.inputWidth&&this.setState({inputWidth:e})}},getInput:function(){return this.refs.input},focus:function(){this.refs.input.getDOMNode().focus()},select:function(){this.refs.input.getDOMNode().select()},render:function(){var e=(this.props.value||"").replace(/ /g,"&nbsp;"),t=this.props.style||{};t.display="inline-block";var o=this.props.inputStyle||{};return o.width=this.state.inputWidth,n.createElement("div",{className:this.props.className,style:t},n.createElement("input",n.__spread({},this.props,{ref:"input",className:this.props.inputClassName,style:o})),n.createElement("div",{ref:"sizer",style:i,dangerouslySetInnerHTML:{__html:e}}))}});t.exports=o}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

gulpfile.js

@@ -17,2 +17,3 @@ var browserify = require('browserify'),
 	reactify = require('reactify'),
+	to5 = require('gulp-6to5'),
 	source = require('vinyl-source-stream'),
@@ -27,2 +28,3 @@ watchify = require('watchify');
 var SRC_PATH = 'src';
+var LIB_PATH = 'lib';
 var DIST_PATH = 'dist';
@@ -214,5 +216,20 @@
 /**
- * Build task
+ * Build tasks for lib
  */
 
+gulp.task('prepare:lib', function(done) {
+	del([LIB_PATH], done);
+});
+
+gulp.task('build:lib', ['prepare:lib'], function(done) {
+	return gulp.src(SRC_PATH + '/**/*.js')
+		.pipe(to5())
+		.pipe(gulp.dest(LIB_PATH));
+});
+
+
+/**
+ * Build tasks for dist
+ */
+
 gulp.task('prepare:dist', function(done) {
@@ -222,5 +239,5 @@ del([DIST_PATH], done);
 
-gulp.task('build:dist', ['prepare:dist'], function() {
+gulp.task('build:dist', ['prepare:dist', 'build:lib'], function() {
 	
-	var standalone = browserify('./' + SRC_PATH + '/' + PACKAGE_FILE, {
+	var standalone = browserify('./' + LIB_PATH + '/' + PACKAGE_FILE, {
 			standalone: COMPONENT_NAME
@@ -227,0 +244,0 @@ })

package.json

 {
   "name": "react-input-autosize",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Auto-resizing Input Component for React",
-  "main": "src/AutosizeInput.js",
+  "main": "lib/AutosizeInput.js",
   "author": "Jed Watson",
@@ -13,29 +13,25 @@ "license": "MIT",
   "dependencies": {
-    "react": "~0.12.0",
-    "reactify": "~0.17.0"
+    "react": "^0.12.0",
+    "reactify": "^0.17.0"
   },
   "devDependencies": {
-    "browserify": "~6.2.0",
-    "browserify-shim": "~3.8.0",
-    "chalk": "~0.5.1",
-    "del": "~0.1.3",
-    "gulp": "~3.8.10",
-    "gulp-bump": "~0.1.11",
-    "gulp-connect": "~2.2.0",
-    "gulp-gh-pages": "~0.4.0",
-    "gulp-git": "~0.5.4",
-    "gulp-less": "~1.3.6",
-    "gulp-rename": "~1.2.0",
-    "gulp-streamify": "~0.0.5",
-    "gulp-uglify": "~1.0.1",
-    "gulp-util": "~3.0.1",
-    "merge-stream": "~0.1.6",
-    "vinyl-source-stream": "~1.0.0",
-    "watchify": "~2.1.1"
+    "browserify": "^6.2.0",
+    "browserify-shim": "^3.8.0",
+    "chalk": "^0.5.1",
+    "del": "^0.1.3",
+    "gulp": "^3.8.10",
+    "gulp-6to5": "^2.0.2",
+    "gulp-bump": "^0.1.11",
+    "gulp-connect": "^2.2.0",
+    "gulp-gh-pages": "^0.4.0",
+    "gulp-git": "^0.5.4",
+    "gulp-less": "^1.3.6",
+    "gulp-rename": "^1.2.0",
+    "gulp-streamify": "^0.0.5",
+    "gulp-uglify": "^1.0.1",
+    "gulp-util": "^3.0.1",
+    "merge-stream": "^0.1.6",
+    "vinyl-source-stream": "^1.0.0",
+    "watchify": "^2.1.1"
   },
-  "browserify": {
-    "transform": [
-      "reactify"
-    ]
-  },
   "browserify-shim": {
@@ -42,0 +38,0 @@ "react": "global:React"

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

616401

increased by1658.58%

Number of package files

22

increased by10%

Lines of code

17074

increased by2277.99%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of low supply chain risk alerts

213

increased by2030%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• Updatedreact@^0.12.0

• Updatedreactify@^0.17.0