react-input-autosize - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

dist/react-input-autosize.es.js

@@ -221,3 +221,3 @@ import React, { Component } from 'react';
 
-var INPUT_PROPS_BLACKLIST = ['injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
+var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
 
@@ -240,3 +240,3 @@ var cleanInputProps = function cleanInputProps(inputProps) {
 
-var isIE = typeof window === 'undefined' ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+var isIE = typeof window === 'undefined' && window.document ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
 
@@ -337,6 +337,5 @@ var generateId = function generateId() {
 			}
-			// allow for stepper UI on number types
-			if (this.props.type === 'number') {
-				newInputWidth += 16;
-			}
+			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
+			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
+			newInputWidth += extraWidth;
 			if (newInputWidth < this.props.minWidth) {
@@ -429,7 +428,7 @@ newInputWidth = this.props.minWidth;
 
-
-
 AutosizeInput.propTypes = {
 	className: PropTypes.string, // className for the outer element
 	defaultValue: PropTypes.any, // default field value
+	extraWidth: PropTypes.oneOfType([// additional width for input element
+	PropTypes.number, PropTypes.string]),
 	id: PropTypes.string, // id to use for the input, can be set for consistent snapshots
@@ -443,3 +442,3 @@ injectStyles: PropTypes.bool, // inject the custom stylesheet to hide clear UI, defaults to true
 	onAutosize: PropTypes.func, // onAutosize handler: function(newWidth) {}
-	onChange: PropTypes.func, // onChange handler: function(newValue) {}
+	onChange: PropTypes.func, // onChange handler: function(event) {}
 	placeholder: PropTypes.string, // placeholder text
@@ -446,0 +445,0 @@ placeholderIsMinWidth: PropTypes.bool, // don't collapse size to less than the placeholder

dist/react-input-autosize.js

@@ -227,3 +227,3 @@ (function (global, factory) {
 
-var INPUT_PROPS_BLACKLIST = ['injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
+var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
 
@@ -246,3 +246,3 @@ var cleanInputProps = function cleanInputProps(inputProps) {
 
-var isIE = typeof window === 'undefined' ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+var isIE = typeof window === 'undefined' && window.document ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
 
@@ -343,6 +343,5 @@ var generateId = function generateId() {
 			}
-			// allow for stepper UI on number types
-			if (this.props.type === 'number') {
-				newInputWidth += 16;
-			}
+			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
+			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
+			newInputWidth += extraWidth;
 			if (newInputWidth < this.props.minWidth) {
@@ -435,7 +434,7 @@ newInputWidth = this.props.minWidth;
 
-
-
 AutosizeInput.propTypes = {
 	className: PropTypes.string, // className for the outer element
 	defaultValue: PropTypes.any, // default field value
+	extraWidth: PropTypes.oneOfType([// additional width for input element
+	PropTypes.number, PropTypes.string]),
 	id: PropTypes.string, // id to use for the input, can be set for consistent snapshots
@@ -449,3 +448,3 @@ injectStyles: PropTypes.bool, // inject the custom stylesheet to hide clear UI, defaults to true
 	onAutosize: PropTypes.func, // onAutosize handler: function(newWidth) {}
-	onChange: PropTypes.func, // onChange handler: function(newValue) {}
+	onChange: PropTypes.func, // onChange handler: function(event) {}
 	placeholder: PropTypes.string, // placeholder text
@@ -452,0 +451,0 @@ placeholderIsMinWidth: PropTypes.bool, // don't collapse size to less than the placeholder

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},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="undefined"!=typeof window&&/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});
+!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=["extraWidth","injectStyles","inputClassName","inputRef","inputStyle","minWidth","onAutosize","placeholderIsMinWidth"],c=function(t){return a.forEach(function(e){return delete t[e]}),t},h=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},f=("undefined"!=typeof window||!window.document)&&/MSIE |Trident\/|Edge\//.test(window.navigator.userAgent),d=function(){return f?"_"+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&&(h(t,this.sizer),this.placeHolderSizer&&h(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,(t+="number"===this.props.type&&void 0===this.props.extraWidth?16:parseInt(this.props.extraWidth)||0)<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 f&&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});

examples/src/app.js

@@ -24,3 +24,3 @@ /* eslint-disable react/jsx-no-bind */
 		this.setState(newState);
-	}
+	};
 	render () {
@@ -27,0 +27,0 @@ return (

HISTORY.md

 # react-input-autosize
 
+## v2.2.0 / 2018-01-09
+
+* added; `extraWidth` prop allows you to customise how much width is added to the detected width
+* fixed; SSR support is more robust, thanks [Ivo Bathke](https://github.com/ivoba)
+
 ## v2.1.2 / 2017-11-27
@@ -4,0 +9,0 @@

lib/AutosizeInput.js

@@ -39,3 +39,3 @@ 'use strict';
 
-var INPUT_PROPS_BLACKLIST = ['injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
+var INPUT_PROPS_BLACKLIST = ['extraWidth', 'injectStyles', 'inputClassName', 'inputRef', 'inputStyle', 'minWidth', 'onAutosize', 'placeholderIsMinWidth'];
 
@@ -58,3 +58,3 @@ var cleanInputProps = function cleanInputProps(inputProps) {
 
-var isIE = typeof window === 'undefined' ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+var isIE = typeof window === 'undefined' && window.document ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
 
@@ -155,6 +155,5 @@ var generateId = function generateId() {
 			}
-			// allow for stepper UI on number types
-			if (this.props.type === 'number') {
-				newInputWidth += 16;
-			}
+			// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
+			var extraWidth = this.props.type === 'number' && this.props.extraWidth === undefined ? 16 : parseInt(this.props.extraWidth) || 0;
+			newInputWidth += extraWidth;
 			if (newInputWidth < this.props.minWidth) {
@@ -248,7 +247,7 @@ newInputWidth = this.props.minWidth;
 
-;
-
 AutosizeInput.propTypes = {
 	className: _propTypes2.default.string, // className for the outer element
 	defaultValue: _propTypes2.default.any, // default field value
+	extraWidth: _propTypes2.default.oneOfType([// additional width for input element
+	_propTypes2.default.number, _propTypes2.default.string]),
 	id: _propTypes2.default.string, // id to use for the input, can be set for consistent snapshots
@@ -262,3 +261,3 @@ injectStyles: _propTypes2.default.bool, // inject the custom stylesheet to hide clear UI, defaults to true
 	onAutosize: _propTypes2.default.func, // onAutosize handler: function(newWidth) {}
-	onChange: _propTypes2.default.func, // onChange handler: function(newValue) {}
+	onChange: _propTypes2.default.func, // onChange handler: function(event) {}
 	placeholder: _propTypes2.default.string, // placeholder text
@@ -265,0 +264,0 @@ placeholderIsMinWidth: _propTypes2.default.bool, // don't collapse size to less than the placeholder

package.json

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

README.md

@@ -84,2 +84,2 @@ React-Input-Autosize
 
-Copyright (c) 2017 Jed Watson. [MIT](LICENSE) License.
+Copyright (c) 2018 Jed Watson. [MIT](LICENSE) License.

src/AutosizeInput.js

@@ -15,2 +15,3 @@ import React, { Component } from 'react';
 const INPUT_PROPS_BLACKLIST = [
+	'extraWidth',
 	'injectStyles',
@@ -39,3 +40,3 @@ 'inputClassName',
 
-const isIE = (typeof window === 'undefined') ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
+const isIE = (typeof window === 'undefined' && window.document) ? false : /MSIE |Trident\/|Edge\//.test(window.navigator.userAgent);
 
@@ -83,9 +84,9 @@ const generateId = () => {
 		}
-	}
+	};
 	placeHolderSizerRef = (el) => {
 		this.placeHolderSizer = el;
-	}
+	};
 	sizerRef = (el) => {
 		this.sizer = el;
-	}
+	};
 	copyInputStyles () {
@@ -114,6 +115,6 @@ if (!this.mounted || !window.getComputedStyle) {
 		}
-		// allow for stepper UI on number types
-		if (this.props.type === 'number') {
-			newInputWidth += 16;
-		}
+		// add extraWidth to the detected width. for number types, this defaults to 16 to allow for the stepper UI
+		const extraWidth = (this.props.type === 'number' && this.props.extraWidth === undefined)
+			? 16 : parseInt(this.props.extraWidth) || 0;
+		newInputWidth += extraWidth;
 		if (newInputWidth < this.props.minWidth) {
@@ -186,3 +187,3 @@ newInputWidth = this.props.minWidth;
 	}
-};
+}
 
@@ -192,2 +193,6 @@ AutosizeInput.propTypes = {
 	defaultValue: PropTypes.any,               // default field value
+	extraWidth: PropTypes.oneOfType([          // additional width for input element
+		PropTypes.number,
+		PropTypes.string,
+	]),
 	id: PropTypes.string,                      // id to use for the input, can be set for consistent snapshots
@@ -203,3 +208,3 @@ injectStyles: PropTypes.bool,              // inject the custom stylesheet to hide clear UI, defaults to true
 	onAutosize: PropTypes.func,                // onAutosize handler: function(newWidth) {}
-	onChange: PropTypes.func,                  // onChange handler: function(newValue) {}
+	onChange: PropTypes.func,                  // onChange handler: function(event) {}
 	placeholder: PropTypes.string,             // placeholder text
@@ -206,0 +211,0 @@ placeholderIsMinWidth: PropTypes.bool,     // don't collapse size to less than the placeholder

No alert changes

Improved metrics

Lines of code

1563

increased by0.51%

Worsened metrics

Total package byte prevSize

444046

decreased by-0.28%

No dependency changes