react-input-autosize - npm Package Compare versions

Comparing version 0.6.2 to 0.6.3

bower.json

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

dist/react-input-autosize.js

@@ -11,2 +11,8 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.AutosizeInput = f()}})(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){
 
+var nextFrame = (function () {
+	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+		window.setTimeout(callback, 1000 / 60);
+	};
+})();
+
 var AutosizeInput = React.createClass({
@@ -41,3 +47,3 @@ displayName: 'AutosizeInput',
 	componentDidUpdate: function componentDidUpdate() {
-		this.updateInputWidth();
+		this.queueUpdateInputWidth();
 	},
@@ -60,2 +66,5 @@ copyInputStyles: function copyInputStyles() {
 	},
+	queueUpdateInputWidth: function queueUpdateInputWidth() {
+		nextFrame(this.updateInputWidth);
+	},
 	updateInputWidth: function updateInputWidth() {
@@ -65,3 +74,3 @@ if (!this.isMounted() || typeof this.refs.sizer.scrollWidth === 'undefined') {
 		}
-		var newInputWidth;
+		var newInputWidth = undefined;
 		if (this.props.placeholder) {
@@ -68,0 +77,0 @@ newInputWidth = Math.max(this.refs.sizer.scrollWidth, this.refs.placeholderSizer.scrollWidth) + 2;

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;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.AutosizeInput=e()}}(function(){return function e(t,i,n){function s(o,p){if(!i[o]){if(!t[o]){var l="function"==typeof require&&require;if(!p&&l)return l(o,!0);if(r)return r(o,!0);var u=new Error("Cannot find module '"+o+"'");throw u.code="MODULE_NOT_FOUND",u}var a=i[o]={exports:{}};t[o][0].call(a.exports,function(e){var i=t[o][1][e];return s(i?i:e)},a,a.exports,e,t,i,n)}return i[o].exports}for(var r="function"==typeof require&&require,o=0;o<n.length;o++)s(n[o]);return s}({1:[function(e,t,i){(function(e){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},n="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,s={position:"absolute",visibility:"hidden",height:0,width:0,overflow:"scroll",whiteSpace:"nowrap"},r=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,minWidth:n.PropTypes.oneOfType([n.PropTypes.number,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),t=this.refs.sizer;if(t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily,t.style.letterSpacing=e.letterSpacing,this.props.placeholder){var i=this.refs.placeholderSizer;i.style.fontSize=e.fontSize,i.style.fontFamily=e.fontFamily,i.style.letterSpacing=e.letterSpacing}}},updateInputWidth:function(){if(this.isMounted()&&"undefined"!=typeof this.refs.sizer.scrollWidth){var e;e=this.props.placeholder?Math.max(this.refs.sizer.scrollWidth,this.refs.placeholderSizer.scrollWidth)+2:this.refs.sizer.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.focus()},select:function(){this.refs.input.select()},render:function(){var e=(this.props.value||"").replace(/\&/g,"&amp;").replace(/ /g,"&nbsp;").replace(/\</g,"&lt;").replace(/\>/g,"&gt;"),t=this.props.style||{};t.display||(t.display="inline-block");var r=i({},this.props.inputStyle);r.width=this.state.inputWidth,r.boxSizing="content-box";var o=this.props.placeholder?n.createElement("div",{ref:"placeholderSizer",style:s},this.props.placeholder):null;return n.createElement("div",{className:this.props.className,style:t},n.createElement("input",i({},this.props,{ref:"input",className:this.props.inputClassName,style:r})),n.createElement("div",{ref:"sizer",style:s,dangerouslySetInnerHTML:{__html:e}}),o)}});t.exports=r}).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;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.AutosizeInput=e()}}(function(){return function e(t,i,n){function o(s,p){if(!i[s]){if(!t[s]){var l="function"==typeof require&&require;if(!p&&l)return l(s,!0);if(r)return r(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var a=i[s]={exports:{}};t[s][0].call(a.exports,function(e){var i=t[s][1][e];return o(i?i:e)},a,a.exports,e,t,i,n)}return i[s].exports}for(var r="function"==typeof require&&require,s=0;s<n.length;s++)o(n[s]);return o}({1:[function(e,t,i){(function(e){"use strict";var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},n="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o={position:"absolute",visibility:"hidden",height:0,width:0,overflow:"scroll",whiteSpace:"nowrap"},r=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}(),s=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,minWidth:n.PropTypes.oneOfType([n.PropTypes.number,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.queueUpdateInputWidth()},copyInputStyles:function(){if(this.isMounted()&&window.getComputedStyle){var e=window.getComputedStyle(this.refs.input),t=this.refs.sizer;if(t.style.fontSize=e.fontSize,t.style.fontFamily=e.fontFamily,t.style.letterSpacing=e.letterSpacing,this.props.placeholder){var i=this.refs.placeholderSizer;i.style.fontSize=e.fontSize,i.style.fontFamily=e.fontFamily,i.style.letterSpacing=e.letterSpacing}}},queueUpdateInputWidth:function(){r(this.updateInputWidth)},updateInputWidth:function(){if(this.isMounted()&&"undefined"!=typeof this.refs.sizer.scrollWidth){var e=void 0;e=this.props.placeholder?Math.max(this.refs.sizer.scrollWidth,this.refs.placeholderSizer.scrollWidth)+2:this.refs.sizer.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.focus()},select:function(){this.refs.input.select()},render:function(){var e=(this.props.value||"").replace(/\&/g,"&amp;").replace(/ /g,"&nbsp;").replace(/\</g,"&lt;").replace(/\>/g,"&gt;"),t=this.props.style||{};t.display||(t.display="inline-block");var r=i({},this.props.inputStyle);r.width=this.state.inputWidth,r.boxSizing="content-box";var s=this.props.placeholder?n.createElement("div",{ref:"placeholderSizer",style:o},this.props.placeholder):null;return n.createElement("div",{className:this.props.className,style:t},n.createElement("input",i({},this.props,{ref:"input",className:this.props.inputClassName,style:r})),n.createElement("div",{ref:"sizer",style:o,dangerouslySetInnerHTML:{__html:e}}),s)}});t.exports=s}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)});

example/dist/bundle.js

@@ -10,2 +10,8 @@ require=(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})({"react-input-autosize":[function(require,module,exports){
 
+var nextFrame = (function () {
+	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+		window.setTimeout(callback, 1000 / 60);
+	};
+})();
+
 var AutosizeInput = React.createClass({
@@ -40,3 +46,3 @@ displayName: 'AutosizeInput',
 	componentDidUpdate: function componentDidUpdate() {
-		this.updateInputWidth();
+		this.queueUpdateInputWidth();
 	},
@@ -59,2 +65,5 @@ copyInputStyles: function copyInputStyles() {
 	},
+	queueUpdateInputWidth: function queueUpdateInputWidth() {
+		nextFrame(this.updateInputWidth);
+	},
 	updateInputWidth: function updateInputWidth() {
@@ -64,3 +73,3 @@ if (!this.isMounted() || typeof this.refs.sizer.scrollWidth === 'undefined') {
 		}
-		var newInputWidth;
+		var newInputWidth = undefined;
 		if (this.props.placeholder) {
@@ -67,0 +76,0 @@ newInputWidth = Math.max(this.refs.sizer.scrollWidth, this.refs.placeholderSizer.scrollWidth) + 2;

lib/AutosizeInput.js

@@ -9,2 +9,8 @@ 'use strict';
 
+var nextFrame = (function () {
+	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+		window.setTimeout(callback, 1000 / 60);
+	};
+})();
+
 var AutosizeInput = React.createClass({
@@ -39,3 +45,3 @@ displayName: 'AutosizeInput',
 	componentDidUpdate: function componentDidUpdate() {
-		this.updateInputWidth();
+		this.queueUpdateInputWidth();
 	},
@@ -58,2 +64,5 @@ copyInputStyles: function copyInputStyles() {
 	},
+	queueUpdateInputWidth: function queueUpdateInputWidth() {
+		nextFrame(this.updateInputWidth);
+	},
 	updateInputWidth: function updateInputWidth() {
@@ -63,3 +72,3 @@ if (!this.isMounted() || typeof this.refs.sizer.scrollWidth === 'undefined') {
 		}
-		var newInputWidth;
+		var newInputWidth = undefined;
 		if (this.props.placeholder) {
@@ -66,0 +75,0 @@ newInputWidth = Math.max(this.refs.sizer.scrollWidth, this.refs.placeholderSizer.scrollWidth) + 2;

package.json

 {
   "name": "react-input-autosize",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Auto-resizing Input Component for React",
@@ -5,0 +5,0 @@ "main": "lib/AutosizeInput.js",

src/AutosizeInput.js

@@ -1,6 +0,15 @@
-var React = require('react');
+const React = require('react');
 
-var sizerStyle = { position: 'absolute', visibility: 'hidden', height: 0, width: 0, overflow: 'scroll', whiteSpace: 'nowrap' };
+const sizerStyle = { position: 'absolute', visibility: 'hidden', height: 0, width: 0, overflow: 'scroll', whiteSpace: 'nowrap' };
 
-var AutosizeInput = React.createClass({
+const nextFrame = (function(){
+	return window.requestAnimationFrame
+		|| window.webkitRequestAnimationFrame
+		|| window.mozRequestAnimationFrame
+		|| function (callback) {
+			window.setTimeout(callback, 1000 / 60);
+		};
+})();
+
+const AutosizeInput = React.createClass({
 	propTypes: {
@@ -34,3 +43,3 @@ value: React.PropTypes.any,                 // field value
 	componentDidUpdate () {
-		this.updateInputWidth();
+		this.queueUpdateInputWidth();
 	},
@@ -41,4 +50,4 @@ copyInputStyles () {
 		}
-		var inputStyle = window.getComputedStyle(this.refs.input);
-		var widthNode = this.refs.sizer;
+		const inputStyle = window.getComputedStyle(this.refs.input);
+		const widthNode = this.refs.sizer;
 		widthNode.style.fontSize = inputStyle.fontSize;
@@ -48,3 +57,3 @@ widthNode.style.fontFamily = inputStyle.fontFamily;
 		if (this.props.placeholder) {
-			var placeholderNode = this.refs.placeholderSizer;
+			const placeholderNode = this.refs.placeholderSizer;
 			placeholderNode.style.fontSize = inputStyle.fontSize;
@@ -55,2 +64,5 @@ placeholderNode.style.fontFamily = inputStyle.fontFamily;
 	},
+	queueUpdateInputWidth () {
+		nextFrame(this.updateInputWidth);
+	},
 	updateInputWidth () {
@@ -60,3 +72,3 @@ if (!this.isMounted() || typeof this.refs.sizer.scrollWidth === 'undefined') {
 		}
-		var newInputWidth;
+		let newInputWidth;
 		if (this.props.placeholder) {
@@ -86,9 +98,9 @@ newInputWidth = Math.max(this.refs.sizer.scrollWidth, this.refs.placeholderSizer.scrollWidth) + 2;
 	render () {
-		var escapedValue = (this.props.value || '').replace(/\&/g, '&amp;').replace(/ /g, '&nbsp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
-		var wrapperStyle = this.props.style || {};
+		const escapedValue = (this.props.value || '').replace(/\&/g, '&amp;').replace(/ /g, '&nbsp;').replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
+		const wrapperStyle = this.props.style || {};
 		if (!wrapperStyle.display) wrapperStyle.display = 'inline-block';
-		var inputStyle = Object.assign({}, this.props.inputStyle);
+		const inputStyle = Object.assign({}, this.props.inputStyle);
 		inputStyle.width = this.state.inputWidth;
 		inputStyle.boxSizing = 'content-box';
-		var placeholder = this.props.placeholder ? <div ref="placeholderSizer" style={sizerStyle}>{this.props.placeholder}</div> : null;
+		const placeholder = this.props.placeholder ? <div ref="placeholderSizer" style={sizerStyle}>{this.props.placeholder}</div> : null;
 		return (
@@ -95,0 +107,0 @@ <div className={this.props.className} style={wrapperStyle}>

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

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

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

695874

increased by0.01%

Number of low supply chain risk alerts

10

decreased by-54.55%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

Lines of code

17397

decreased by-0.18%

No dependency changes