react-input-autosize - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

dist/react-input-autosize.es.js

@@ -239,2 +239,10 @@ import React, { Component } from 'react';
 
+var isIE = /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+
+var generateId = function generateId() {
+	// we only need an auto-generated ID for stylesheet injection, which is only
+	// used for IE. so if the browser is not IE, this should return undefined.
+	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
+};
+
 var AutosizeInput = function (_Component) {
@@ -265,3 +273,3 @@ inherits(AutosizeInput, _Component);
 			inputWidth: props.minWidth,
-			inputId: '_' + Math.random().toString(36).substr(2, 12)
+			inputId: props.id || generateId()
 		};
@@ -279,2 +287,11 @@ return _this;
 	}, {
+		key: 'componentWillReceiveProps',
+		value: function componentWillReceiveProps(nextProps) {
+			var id = nextProps.id;
+
+			if (id !== this.props.id) {
+				this.setState({ inputId: id || generateId() });
+			}
+		}
+	}, {
 		key: 'componentDidUpdate',
@@ -357,5 +374,8 @@ value: function componentDidUpdate(prevProps, prevState) {
 		value: function renderStyles() {
+			// this method injects styles to hide IE's clear indicator, which messes
+			// with input size detection. the stylesheet is only injected when the
+			// browser is IE, and can also be disabled by the `injectStyles` prop.
 			var injectStyles = this.props.injectStyles;
 
-			return injectStyles ? React.createElement('style', { dangerouslySetInnerHTML: {
+			return isIE && injectStyles ? React.createElement('style', { dangerouslySetInnerHTML: {
 					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
@@ -386,2 +406,3 @@ } }) : null;
 			inputProps.className = this.props.inputClassName;
+			inputProps.id = this.state.inputId;
 			inputProps.style = inputStyle;
@@ -393,3 +414,3 @@
 				this.renderStyles(),
-				React.createElement('input', _extends({ id: this.state.inputId }, inputProps, { ref: this.inputRef })),
+				React.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
 				React.createElement(
@@ -416,2 +437,3 @@ 'div',
 	defaultValue: PropTypes.any, // default field value
+	id: PropTypes.string, // id to use for the input, can be set for consistent snapshots
 	injectStyles: PropTypes.bool, // inject the custom stylesheet to hide clear UI, defaults to true
@@ -418,0 +440,0 @@ inputClassName: PropTypes.string, // className for the input element

dist/react-input-autosize.js

@@ -245,2 +245,10 @@ (function (global, factory) {
 
+var isIE = /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+
+var generateId = function generateId() {
+	// we only need an auto-generated ID for stylesheet injection, which is only
+	// used for IE. so if the browser is not IE, this should return undefined.
+	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
+};
+
 var AutosizeInput = function (_Component) {
@@ -271,3 +279,3 @@ inherits(AutosizeInput, _Component);
 			inputWidth: props.minWidth,
-			inputId: '_' + Math.random().toString(36).substr(2, 12)
+			inputId: props.id || generateId()
 		};
@@ -285,2 +293,11 @@ return _this;
 	}, {
+		key: 'componentWillReceiveProps',
+		value: function componentWillReceiveProps(nextProps) {
+			var id = nextProps.id;
+
+			if (id !== this.props.id) {
+				this.setState({ inputId: id || generateId() });
+			}
+		}
+	}, {
 		key: 'componentDidUpdate',
@@ -363,5 +380,8 @@ value: function componentDidUpdate(prevProps, prevState) {
 		value: function renderStyles() {
+			// this method injects styles to hide IE's clear indicator, which messes
+			// with input size detection. the stylesheet is only injected when the
+			// browser is IE, and can also be disabled by the `injectStyles` prop.
 			var injectStyles = this.props.injectStyles;
 
-			return injectStyles ? React__default.createElement('style', { dangerouslySetInnerHTML: {
+			return isIE && injectStyles ? React__default.createElement('style', { dangerouslySetInnerHTML: {
 					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
@@ -392,2 +412,3 @@ } }) : null;
 			inputProps.className = this.props.inputClassName;
+			inputProps.id = this.state.inputId;
 			inputProps.style = inputStyle;
@@ -399,3 +420,3 @@
 				this.renderStyles(),
-				React__default.createElement('input', _extends({ id: this.state.inputId }, inputProps, { ref: this.inputRef })),
+				React__default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
 				React__default.createElement(
@@ -422,2 +443,3 @@ 'div',
 	defaultValue: PropTypes.any, // default field value
+	id: PropTypes.string, // id to use for the input, can be set for consistent snapshots
 	injectStyles: PropTypes.bool, // inject the custom stylesheet to hide clear UI, defaults to true
@@ -424,0 +446,0 @@ inputClassName: PropTypes.string, // className for the input element

dist/react-input-autosize.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.AutosizeInput=e(t.React,t.PropTypes)}(this,function(t,e){"use strict";var n="default"in t?t.default:t;e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function t(t){this.value=t}function e(e){function n(o,r){try{var s=e[o](r),u=s.value;u instanceof t?Promise.resolve(u.value).then(function(t){n("next",t)},function(t){n("throw",t)}):i(s.done?"return":"normal",s.value)}catch(t){i("throw",t)}}function i(t,e){switch(t){case"return":o.resolve({value:e,done:!0});break;case"throw":o.reject(e);break;default:o.resolve({value:e,done:!1})}(o=o.next)?n(o.key,o.arg):r=null}var o,r;this._invoke=function(t,e){return new Promise(function(i,s){var u={key:t,arg:e,resolve:i,reject:s,next:null};r?r=r.next=u:(o=r=u,n(t,e))})},"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}();var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},u=function(t,e){var n={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n},l=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},p={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},a=["injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],c=function(t){return a.forEach(function(e){return delete t[e]}),t},f=function(t,e){e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.fontWeight=t.fontWeight,e.style.fontStyle=t.fontStyle,e.style.letterSpacing=t.letterSpacing,e.style.textTransform=t.textTransform},h=function(t){function e(t){i(this,e);var n=l(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.inputRef=function(t){n.input=t,"function"==typeof n.props.inputRef&&n.props.inputRef(t)},n.placeHolderSizerRef=function(t){n.placeHolderSizer=t},n.sizerRef=function(t){n.sizer=t},n.state={inputWidth:t.minWidth,inputId:"_"+Math.random().toString(36).substr(2,12)},n}return s(e,t),o(e,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentDidUpdate",value:function(t,e){e.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var t=this.input&&window.getComputedStyle(this.input);t&&(f(t,this.sizer),this.placeHolderSizer&&f(t,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var t=void 0;t=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,"number"===this.props.type&&(t+=16),t<this.props.minWidth&&(t=this.props.minWidth),t!==this.state.inputWidth&&this.setState({inputWidth:t})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){return this.props.injectStyles?n.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var t=[this.props.defaultValue,this.props.value,""].reduce(function(t,e){return null!==t&&void 0!==t?t:e}),e=r({},this.props.style);e.display||(e.display="inline-block");var i=r({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),o=u(this.props,[]);return c(o),o.className=this.props.inputClassName,o.style=i,n.createElement("div",{className:this.props.className,style:e},this.renderStyles(),n.createElement("input",r({id:this.state.inputId},o,{ref:this.inputRef})),n.createElement("div",{ref:this.sizerRef,style:p},t),this.props.placeholder?n.createElement("div",{ref:this.placeHolderSizerRef,style:p},this.props.placeholder):null)}}]),e}(t.Component);return h.defaultProps={minWidth:1,injectStyles:!0},h});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],e):t.AutosizeInput=e(t.React,t.PropTypes)}(this,function(t,e){"use strict";var n="default"in t?t.default:t;e=e&&e.hasOwnProperty("default")?e.default:e;!function(){function t(t){this.value=t}function e(e){function n(o,r){try{var s=e[o](r),u=s.value;u instanceof t?Promise.resolve(u.value).then(function(t){n("next",t)},function(t){n("throw",t)}):i(s.done?"return":"normal",s.value)}catch(t){i("throw",t)}}function i(t,e){switch(t){case"return":o.resolve({value:e,done:!0});break;case"throw":o.reject(e);break;default:o.resolve({value:e,done:!1})}(o=o.next)?n(o.key,o.arg):r=null}var o,r;this._invoke=function(t,e){return new Promise(function(i,s){var u={key:t,arg:e,resolve:i,reject:s,next:null};r?r=r.next=u:(o=r=u,n(t,e))})},"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}();var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},u=function(t,e){var n={};for(var i in t)e.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n},p=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},l={position:"absolute",top:0,left:0,visibility:"hidden",height:0,overflow:"scroll",whiteSpace:"pre"},a=["injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],c=function(t){return a.forEach(function(e){return delete t[e]}),t},f=function(t,e){e.style.fontSize=t.fontSize,e.style.fontFamily=t.fontFamily,e.style.fontWeight=t.fontWeight,e.style.fontStyle=t.fontStyle,e.style.letterSpacing=t.letterSpacing,e.style.textTransform=t.textTransform},h=/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),d=function(){return h?"_"+Math.random().toString(36).substr(2,12):void 0},y=function(t){function e(t){i(this,e);var n=p(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.inputRef=function(t){n.input=t,"function"==typeof n.props.inputRef&&n.props.inputRef(t)},n.placeHolderSizerRef=function(t){n.placeHolderSizer=t},n.sizerRef=function(t){n.sizer=t},n.state={inputWidth:t.minWidth,inputId:t.id||d()},n}return s(e,t),o(e,[{key:"componentDidMount",value:function(){this.mounted=!0,this.copyInputStyles(),this.updateInputWidth()}},{key:"componentWillReceiveProps",value:function(t){var e=t.id;e!==this.props.id&&this.setState({inputId:e||d()})}},{key:"componentDidUpdate",value:function(t,e){e.inputWidth!==this.state.inputWidth&&"function"==typeof this.props.onAutosize&&this.props.onAutosize(this.state.inputWidth),this.updateInputWidth()}},{key:"componentWillUnmount",value:function(){this.mounted=!1}},{key:"copyInputStyles",value:function(){if(this.mounted&&window.getComputedStyle){var t=this.input&&window.getComputedStyle(this.input);t&&(f(t,this.sizer),this.placeHolderSizer&&f(t,this.placeHolderSizer))}}},{key:"updateInputWidth",value:function(){if(this.mounted&&this.sizer&&void 0!==this.sizer.scrollWidth){var t=void 0;t=this.props.placeholder&&(!this.props.value||this.props.value&&this.props.placeholderIsMinWidth)?Math.max(this.sizer.scrollWidth,this.placeHolderSizer.scrollWidth)+2:this.sizer.scrollWidth+2,"number"===this.props.type&&(t+=16),t<this.props.minWidth&&(t=this.props.minWidth),t!==this.state.inputWidth&&this.setState({inputWidth:t})}}},{key:"getInput",value:function(){return this.input}},{key:"focus",value:function(){this.input.focus()}},{key:"blur",value:function(){this.input.blur()}},{key:"select",value:function(){this.input.select()}},{key:"renderStyles",value:function(){var t=this.props.injectStyles;return h&&t?n.createElement("style",{dangerouslySetInnerHTML:{__html:"input#"+this.state.inputId+"::-ms-clear {display: none;}"}}):null}},{key:"render",value:function(){var t=[this.props.defaultValue,this.props.value,""].reduce(function(t,e){return null!==t&&void 0!==t?t:e}),e=r({},this.props.style);e.display||(e.display="inline-block");var i=r({boxSizing:"content-box",width:this.state.inputWidth+"px"},this.props.inputStyle),o=u(this.props,[]);return c(o),o.className=this.props.inputClassName,o.id=this.state.inputId,o.style=i,n.createElement("div",{className:this.props.className,style:e},this.renderStyles(),n.createElement("input",r({},o,{ref:this.inputRef})),n.createElement("div",{ref:this.sizerRef,style:l},t),this.props.placeholder?n.createElement("div",{ref:this.placeHolderSizerRef,style:l},this.props.placeholder):null)}}]),e}(t.Component);return y.defaultProps={minWidth:1,injectStyles:!0},y});

HISTORY.md

 # react-input-autosize
 
+## v2.1.1 / 2017-11-26
+
+* fixed; `props.id` was overriding the internal `inputId` on the input element, but not being used in the stylesheet
+* fixed; IE stylesheet is now only injected when IE is detected in navigator.userAgent
+
+## v2.1.0 / 2017-11-23
+
+* fixed; inputId wasn't being applied correctly, thanks [Jacco Flenter](https://github.com/flenter)
+* added; new `injectStyles` prop controls whether the IE stylesheet it injected
+* improved; allow override of `boxSizing` and `width` styles via `inputStyles`, thanks [Mike Fanger](https://github.com/mvf4z7)
+* improved; propTypes are now stripped from the production build, thanks [jochenberger](https://github.com/jochenberger)
+
 ## v2.0.1 / 2017-09-13
@@ -4,0 +16,0 @@

lib/AutosizeInput.js

@@ -57,2 +57,10 @@ 'use strict';
 
+var isIE = /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+
+var generateId = function generateId() {
+	// we only need an auto-generated ID for stylesheet injection, which is only
+	// used for IE. so if the browser is not IE, this should return undefined.
+	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
+};
+
 var AutosizeInput = function (_Component) {
@@ -83,3 +91,3 @@ _inherits(AutosizeInput, _Component);
 			inputWidth: props.minWidth,
-			inputId: '_' + Math.random().toString(36).substr(2, 12)
+			inputId: props.id || generateId()
 		};
@@ -97,2 +105,11 @@ return _this;
 	}, {
+		key: 'componentWillReceiveProps',
+		value: function componentWillReceiveProps(nextProps) {
+			var id = nextProps.id;
+
+			if (id !== this.props.id) {
+				this.setState({ inputId: id || generateId() });
+			}
+		}
+	}, {
 		key: 'componentDidUpdate',
@@ -175,5 +192,8 @@ value: function componentDidUpdate(prevProps, prevState) {
 		value: function renderStyles() {
+			// this method injects styles to hide IE's clear indicator, which messes
+			// with input size detection. the stylesheet is only injected when the
+			// browser is IE, and can also be disabled by the `injectStyles` prop.
 			var injectStyles = this.props.injectStyles;
 
-			return injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: {
+			return isIE && injectStyles ? _react2.default.createElement('style', { dangerouslySetInnerHTML: {
 					__html: 'input#' + this.state.inputId + '::-ms-clear {display: none;}'
@@ -204,2 +224,3 @@ } }) : null;
 			inputProps.className = this.props.inputClassName;
+			inputProps.id = this.state.inputId;
 			inputProps.style = inputStyle;
@@ -211,3 +232,3 @@
 				this.renderStyles(),
-				_react2.default.createElement('input', _extends({ id: this.state.inputId }, inputProps, { ref: this.inputRef })),
+				_react2.default.createElement('input', _extends({}, inputProps, { ref: this.inputRef })),
 				_react2.default.createElement(
@@ -235,2 +256,3 @@ 'div',
 	defaultValue: _propTypes2.default.any, // default field value
+	id: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots
 	injectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true
@@ -237,0 +259,0 @@ inputClassName: _propTypes2.default.string, // className for the input element

package.json

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

src/AutosizeInput.js

@@ -38,2 +38,10 @@ import React, { Component } from 'react';
 
+const isIE = /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+
+const generateId = () => {
+	// we only need an auto-generated ID for stylesheet injection, which is only
+	// used for IE. so if the browser is not IE, this should return undefined.
+	return isIE ? '_' + Math.random().toString(36).substr(2, 12) : undefined;
+};
+
 class AutosizeInput extends Component {
@@ -44,3 +52,3 @@ constructor (props) {
 			inputWidth: props.minWidth,
-			inputId: '_' + Math.random().toString(36).substr(2, 12),
+			inputId: props.id || generateId(),
 		};
@@ -53,2 +61,8 @@ }
 	}
+	componentWillReceiveProps (nextProps) {
+		const { id } = nextProps;
+		if (id !== this.props.id) {
+			this.setState({ inputId: id || generateId() });
+		}
+	}
 	componentDidUpdate (prevProps, prevState) {
@@ -126,4 +140,7 @@ if (prevState.inputWidth !== this.state.inputWidth) {
 	renderStyles () {
+		// this method injects styles to hide IE's clear indicator, which messes
+		// with input size detection. the stylesheet is only injected when the
+		// browser is IE, and can also be disabled by the `injectStyles` prop.
 		const { injectStyles } = this.props;
-		return injectStyles ? (
+		return isIE && injectStyles ? (
 			<style dangerouslySetInnerHTML={{
@@ -154,2 +171,3 @@ __html: `input#${this.state.inputId}::-ms-clear {display: none;}`,
 		inputProps.className = this.props.inputClassName;
+		inputProps.id = this.state.inputId;
 		inputProps.style = inputStyle;
@@ -160,3 +178,3 @@
 				{this.renderStyles()}
-				<input id={this.state.inputId} {...inputProps} ref={this.inputRef} />
+				<input {...inputProps} ref={this.inputRef} />
 				<div ref={this.sizerRef} style={sizerStyle}>{sizerValue}</div>
@@ -175,2 +193,3 @@ {this.props.placeholder
 	defaultValue: PropTypes.any,               // default field value
+	id: PropTypes.string,                      // id to use for the input, can be set for consistent snapshots
 	injectStyles: PropTypes.bool,              // inject the custom stylesheet to hide clear UI, defaults to true
@@ -177,0 +196,0 @@ inputClassName: PropTypes.string,          // className for the input element

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

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

Improved metrics

Total package byte prevSize

444952

increased by1.74%

Lines of code

1555

increased by5.07%

No dependency changes