Socket
Socket
Sign inDemoInstall

react-textarea-autosize

Package Overview
Dependencies
Maintainers
4
Versions
98
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-textarea-autosize - npm Package Compare versions

Comparing version 5.1.0 to 5.2.0

255

dist/react-textarea-autosize.js

@@ -10,2 +10,52 @@ (function (global, factory) {

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';

@@ -15,3 +65,2 @@

var hiddenTextarea = isBrowser && document.createElement('textarea');
var HIDDEN_TEXTAREA_STYLE = {

@@ -28,18 +77,23 @@ 'min-height': '0',

};
var SIZING_STYLE = ['letter-spacing', 'line-height', 'font-family', 'font-weight', 'font-size', 'font-style', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'box-sizing'];
var computedStyleCache = {};
function calculateNodeHeight(uiTextNode, uid, useCache, minRows, maxRows) {
if (useCache === void 0) {
useCache = false;
}
function calculateNodeHeight(uiTextNode, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var minRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var maxRows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
if (minRows === void 0) {
minRows = null;
}
if (maxRows === void 0) {
maxRows = null;
}
if (hiddenTextarea.parentNode === null) {
document.body.appendChild(hiddenTextarea);
}
} // Copy all CSS properties that have an impact on the height of the content in
// the textbox
// Copy all CSS properties that have an impact on the height of the content in
// the textbox
var nodeStyling = calculateNodeStyling(uiTextNode, uid, useCache);

@@ -54,5 +108,3 @@

boxSizing = nodeStyling.boxSizing,
sizingStyle = nodeStyling.sizingStyle;
// Need to have the overflow attribute to hide the scrollbar otherwise
sizingStyle = nodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise
// text-lines will not calculated properly as the shadow will technically be

@@ -68,3 +120,2 @@ // narrower for content

hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || 'x';
var minHeight = -Infinity;

@@ -80,5 +131,5 @@ var maxHeight = Infinity;

height = height - paddingSize;
}
} // measure height of a textarea with a single row
// measure height of a textarea with a single row
hiddenTextarea.value = 'x';

@@ -90,12 +141,17 @@ var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);

@@ -106,8 +162,14 @@ }

var rowCount = Math.floor(height / singleRowHeight);
return { height: height, minHeight: minHeight, maxHeight: maxHeight, rowCount: rowCount };
return {
height: height,
minHeight: minHeight,
maxHeight: maxHeight,
rowCount: rowCount
};
}
function calculateNodeStyling(node, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
function calculateNodeStyling(node, uid, useCache) {
if (useCache === void 0) {
useCache = false;
}

@@ -128,7 +190,5 @@ if (useCache && computedStyleCache[uid]) {

}, {});
var boxSizing = sizingStyle['box-sizing']; // IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
var boxSizing = sizingStyle['box-sizing'];
// IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
if (isIE && boxSizing === 'border-box') {

@@ -139,5 +199,3 @@ sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(style['border-right-width']) + parseFloat(style['border-left-width']) + parseFloat(style['padding-right']) + parseFloat(style['padding-left']) + 'px';

var paddingSize = parseFloat(sizingStyle['padding-bottom']) + parseFloat(sizingStyle['padding-top']);
var borderSize = parseFloat(sizingStyle['border-bottom-width']) + parseFloat(sizingStyle['border-top-width']);
var nodeInfo = {

@@ -161,4 +219,6 @@ sizingStyle: sizingStyle,

function autoInc() {
var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}

@@ -172,94 +232,23 @@ return function () {

var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
/**
* <TextareaAutosize />
*/
var noop = function noop() {}; // IE11 has a problem with eval source maps, can be reproduced with:
// eval('"use strict"; var onNextFrame = window.cancelAnimationFrame; onNextFrame(4);')
// so we bind window as context in dev modes
var noop = function noop() {};
var _ref = isBrowser && window.requestAnimationFrame ? [window.requestAnimationFrame, window.cancelAnimationFrame] : [setTimeout, clearTimeout];
var _ref = isBrowser && window.requestAnimationFrame ? [window.requestAnimationFrame.bind(window), window.cancelAnimationFrame.bind(window)] : [setTimeout, clearTimeout];
var onNextFrame = _ref[0];
var clearNextFrameAction = _ref[1];
var TextareaAutosize = function (_React$Component) {
inherits(TextareaAutosize, _React$Component);
var TextareaAutosize =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(TextareaAutosize, _React$Component);
function TextareaAutosize(props) {
classCallCheck(this, TextareaAutosize);
var _this;
var _this = possibleConstructorReturn(this, _React$Component.call(this, props));
_this = _React$Component.call(this, props) || this;
_this._resizeLock = false;

@@ -279,7 +268,10 @@

}
_this.props.onChange(event);
};
_this._resizeComponent = function () {
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
_this._resizeComponent = function (callback) {
if (callback === void 0) {
callback = noop;
}

@@ -302,8 +294,11 @@ if (typeof _this._rootDOMNode === 'undefined') {

rowCount = nodeHeight.rowCount;
_this.rowCount = rowCount;
if (_this.state.height !== height || _this.state.minHeight !== minHeight || _this.state.maxHeight !== maxHeight) {
_this.setState({ height: height, minHeight: minHeight, maxHeight: maxHeight }, callback);
_this.setState({
height: height,
minHeight: minHeight,
maxHeight: maxHeight
}, callback);
return;

@@ -320,3 +315,2 @@ }

};
_this._uid = uid();

@@ -327,3 +321,5 @@ _this._controlled = typeof props.value === 'string';

TextareaAutosize.prototype.render = function render() {
var _proto = TextareaAutosize.prototype;
_proto.render = function render() {
var _props = this.props,

@@ -335,9 +331,6 @@ _minRows = _props.minRows,

_inputRef = _props.inputRef,
props = objectWithoutProperties(_props, ['minRows', 'maxRows', 'onHeightChange', 'useCacheForDOMMeasurements', 'inputRef']);
props = _objectWithoutProperties(_props, ["minRows", "maxRows", "onHeightChange", "useCacheForDOMMeasurements", "inputRef"]);
props.style = _extends({}, props.style, {
height: this.state.height
});
var maxHeight = Math.max(props.style.maxHeight || Infinity, this.state.maxHeight);

@@ -349,3 +342,3 @@

return React.createElement('textarea', _extends({}, props, {
return React.createElement("textarea", _extends({}, props, {
onChange: this._onChange,

@@ -356,9 +349,10 @@ ref: this._onRootDOMNode

TextareaAutosize.prototype.componentDidMount = function componentDidMount() {
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
this._resizeComponent();
// Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
this._resizeComponent(); // Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
// causing competing rerenders (due to setState in the listener) in React.
// More can be found here - facebook/react#6324
this._resizeListener = function () {

@@ -368,3 +362,5 @@ if (_this2._resizeLock) {

}
_this2._resizeLock = true;
_this2._resizeComponent(function () {

@@ -374,9 +370,11 @@ return _this2._resizeLock = false;

};
window.addEventListener('resize', this._resizeListener);
};
TextareaAutosize.prototype.componentWillReceiveProps = function componentWillReceiveProps() {
_proto.componentWillReceiveProps = function componentWillReceiveProps() {
var _this3 = this;
this._clearNextFrame();
this._onNextFrameActionId = onNextFrame(function () {

@@ -387,3 +385,3 @@ return _this3._resizeComponent();

TextareaAutosize.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (this.state.height !== prevState.height) {

@@ -394,4 +392,5 @@ this.props.onHeightChange(this.state.height, this);

TextareaAutosize.prototype.componentWillUnmount = function componentWillUnmount() {
_proto.componentWillUnmount = function componentWillUnmount() {
this._clearNextFrame();
window.removeEventListener('resize', this._resizeListener);

@@ -401,3 +400,3 @@ purgeCache(this._uid);

TextareaAutosize.prototype._clearNextFrame = function _clearNextFrame() {
_proto._clearNextFrame = function _clearNextFrame() {
clearNextFrameAction(this._onNextFrameActionId);

@@ -404,0 +403,0 @@ };

2

dist/react-textarea-autosize.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.TextareaAutosize=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null;null===a.parentNode&&document.body.appendChild(a);var h=o(e,t,n);if(null===h)return null;var u=h.paddingSize,l=h.borderSize,p=h.boxSizing,d=h.sizingStyle;Object.keys(d).forEach(function(e){a.style[e]=d[e]}),Object.keys(s).forEach(function(e){a.style.setProperty(e,s[e],"important")}),a.value=e.value||e.placeholder||"x";var c=-1/0,f=1/0,g=a.scrollHeight;"border-box"===p?g+=l:"content-box"===p&&(g-=u),a.value="x";var m=a.scrollHeight-u;return null===r&&null===i||(null!==r&&(c=m*r,"border-box"===p&&(c=c+u+l),g=Math.max(c,g)),null!==i&&(f=m*i,"border-box"===p&&(f=f+u+l),g=Math.min(f,g))),{height:g,minHeight:c,maxHeight:f,rowCount:Math.floor(g/m)}}function o(e,t){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(n&&u[t])return u[t];var o=window.getComputedStyle(e);if(null===o)return null;var r=h.reduce(function(e,t){return e[t]=o.getPropertyValue(t),e},{}),a=r["box-sizing"];i&&"border-box"===a&&(r.width=parseFloat(r.width)+parseFloat(o["border-right-width"])+parseFloat(o["border-left-width"])+parseFloat(o["padding-right"])+parseFloat(o["padding-left"])+"px");var s={sizingStyle:r,paddingSize:parseFloat(r["padding-bottom"])+parseFloat(r["padding-top"]),borderSize:parseFloat(r["border-bottom-width"])+parseFloat(r["border-top-width"]),boxSizing:a};return n&&(u[t]=s),s}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var r="undefined"!=typeof window&&"undefined"!=typeof document,i=!!r&&!!document.documentElement.currentStyle,a=r&&document.createElement("textarea"),s={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},h=["letter-spacing","line-height","font-family","font-weight","font-size","font-style","text-rendering","text-transform","width","text-indent","padding-top","padding-right","padding-bottom","padding-left","border-top-width","border-right-width","border-bottom-width","border-left-width","box-sizing"],u={},l=function(e){return delete u[e]},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return function(){return++e}}(),d=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},c=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},g=function(e,t){var n={};for(var o in e)0>t.indexOf(o)&&Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},m=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},y=function(){},b=r&&window.requestAnimationFrame?[window.requestAnimationFrame,window.cancelAnimationFrame]:[setTimeout,clearTimeout],w=b[0],v=b[1],x=function(t){function o(e){d(this,o);var r=m(this,t.call(this,e));return r._resizeLock=!1,r._onRootDOMNode=function(e){r._rootDOMNode=e,r.props.inputRef&&r.props.inputRef(e)},r._onChange=function(e){r._controlled||r._resizeComponent(),r.props.onChange(e)},r._resizeComponent=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:y;if(void 0!==r._rootDOMNode){var t=n(r._rootDOMNode,r._uid,r.props.useCacheForDOMMeasurements,r.props.minRows,r.props.maxRows);if(null!==t){var o=t.height,i=t.minHeight,a=t.maxHeight,s=t.rowCount;r.rowCount=s,r.state.height===o&&r.state.minHeight===i&&r.state.maxHeight===a?e():r.setState({height:o,minHeight:i,maxHeight:a},e)}else e()}else e()},r.state={height:e.style&&e.style.height||0,minHeight:-1/0,maxHeight:1/0},r._uid=p(),r._controlled="string"==typeof e.value,r}return f(o,t),o.prototype.render=function(){var t=this.props,n=g(t,["minRows","maxRows","onHeightChange","useCacheForDOMMeasurements","inputRef"]);n.style=c({},n.style,{height:this.state.height});var o=Math.max(n.style.maxHeight||1/0,this.state.maxHeight);return this.state.height>o&&(n.style.overflow="hidden"),e.createElement("textarea",c({},n,{onChange:this._onChange,ref:this._onRootDOMNode}))},o.prototype.componentDidMount=function(){var e=this;this._resizeComponent(),this._resizeListener=function(){e._resizeLock||(e._resizeLock=!0,e._resizeComponent(function(){return e._resizeLock=!1}))},window.addEventListener("resize",this._resizeListener)},o.prototype.componentWillReceiveProps=function(){var e=this;this._clearNextFrame(),this._onNextFrameActionId=w(function(){return e._resizeComponent()})},o.prototype.componentDidUpdate=function(e,t){this.state.height!==t.height&&this.props.onHeightChange(this.state.height,this)},o.prototype.componentWillUnmount=function(){this._clearNextFrame(),window.removeEventListener("resize",this._resizeListener),l(this._uid)},o.prototype._clearNextFrame=function(){v(this._onNextFrameActionId)},o}(e.Component);return x.propTypes={value:t.string,onChange:t.func,onHeightChange:t.func,useCacheForDOMMeasurements:t.bool,minRows:t.number,maxRows:t.number,inputRef:t.func},x.defaultProps={onChange:y,onHeightChange:y,useCacheForDOMMeasurements:!1},x});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.TextareaAutosize=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(){return(n=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var o="undefined"!=typeof window&&"undefined"!=typeof document,i=!!o&&!!document.documentElement.currentStyle,r=o&&document.createElement("textarea"),a={"min-height":"0","max-height":"none",height:"0",visibility:"hidden",overflow:"hidden",position:"absolute","z-index":"-1000",top:"0",right:"0"},s=["letter-spacing","line-height","font-family","font-weight","font-size","font-style","text-rendering","text-transform","width","text-indent","padding-top","padding-right","padding-bottom","padding-left","border-top-width","border-right-width","border-bottom-width","border-left-width","box-sizing"],h={},u=function(e){return void 0===e&&(e=0),function(){return++e}}(),d=function(){},l=o&&window.requestAnimationFrame?[window.requestAnimationFrame,window.cancelAnimationFrame]:[setTimeout,clearTimeout],p=l[0],c=l[1],f=function(t){function o(e){var n;return n=t.call(this,e)||this,n._resizeLock=!1,n._onRootDOMNode=function(e){n._rootDOMNode=e,n.props.inputRef&&n.props.inputRef(e)},n._onChange=function(e){n._controlled||n._resizeComponent(),n.props.onChange(e)},n._resizeComponent=function(e){if(void 0===e&&(e=d),void 0!==n._rootDOMNode){var t=function(e,t,n,o,u){void 0===n&&(n=!1),void 0===o&&(o=null),void 0===u&&(u=null),null===r.parentNode&&document.body.appendChild(r);var d=function(e,t,n){if(void 0===n&&(n=!1),n&&h[t])return h[t];var o=window.getComputedStyle(e);if(null===o)return null;var r=s.reduce(function(e,t){return e[t]=o.getPropertyValue(t),e},{}),a=r["box-sizing"];i&&"border-box"===a&&(r.width=parseFloat(r.width)+parseFloat(o["border-right-width"])+parseFloat(o["border-left-width"])+parseFloat(o["padding-right"])+parseFloat(o["padding-left"])+"px");var u={sizingStyle:r,paddingSize:parseFloat(r["padding-bottom"])+parseFloat(r["padding-top"]),borderSize:parseFloat(r["border-bottom-width"])+parseFloat(r["border-top-width"]),boxSizing:a};return n&&(h[t]=u),u}(e,t,n);if(null===d)return null;var l=d.paddingSize,p=d.borderSize,c=d.boxSizing,f=d.sizingStyle;Object.keys(f).forEach(function(e){r.style[e]=f[e]}),Object.keys(a).forEach(function(e){r.style.setProperty(e,a[e],"important")}),r.value=e.value||e.placeholder||"x";var g=-1/0,m=1/0,b=r.scrollHeight;"border-box"===c?b+=p:"content-box"===c&&(b-=l),r.value="x";var y=r.scrollHeight-l;return null===o&&null===u||(null!==o&&(g=y*o,"border-box"===c&&(g=g+l+p),b=Math.max(g,b)),null!==u&&(m=y*u,"border-box"===c&&(m=m+l+p),b=Math.min(m,b))),{height:b,minHeight:g,maxHeight:m,rowCount:Math.floor(b/y)}}(n._rootDOMNode,n._uid,n.props.useCacheForDOMMeasurements,n.props.minRows,n.props.maxRows);if(null!==t){var o=t.height,u=t.minHeight,l=t.maxHeight;n.rowCount=t.rowCount,n.state.height===o&&n.state.minHeight===u&&n.state.maxHeight===l?e():n.setState({height:o,minHeight:u,maxHeight:l},e)}else e()}else e()},n.state={height:e.style&&e.style.height||0,minHeight:-1/0,maxHeight:1/0},n._uid=u(),n._controlled="string"==typeof e.value,n}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(o,t);var l=o.prototype;return l.render=function(){var t=this.props,o=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;r.length>o;o++)0>t.indexOf(n=r[o])&&(i[n]=e[n]);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;a.length>o;o++)0>t.indexOf(n=a[o])&&Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(t,["minRows","maxRows","onHeightChange","useCacheForDOMMeasurements","inputRef"]);o.style=n({},o.style,{height:this.state.height});var i=Math.max(o.style.maxHeight||1/0,this.state.maxHeight);return this.state.height>i&&(o.style.overflow="hidden"),e.createElement("textarea",n({},o,{onChange:this._onChange,ref:this._onRootDOMNode}))},l.componentDidMount=function(){var e=this;this._resizeComponent(),this._resizeListener=function(){e._resizeLock||(e._resizeLock=!0,e._resizeComponent(function(){return e._resizeLock=!1}))},window.addEventListener("resize",this._resizeListener)},l.componentWillReceiveProps=function(){var e=this;this._clearNextFrame(),this._onNextFrameActionId=p(function(){return e._resizeComponent()})},l.componentDidUpdate=function(e,t){this.state.height!==t.height&&this.props.onHeightChange(this.state.height,this)},l.componentWillUnmount=function(){this._clearNextFrame(),window.removeEventListener("resize",this._resizeListener),function(e){delete h[e]}(this._uid)},l._clearNextFrame=function(){c(this._onNextFrameActionId)},o}(e.Component);return f.propTypes={value:t.string,onChange:t.func,onHeightChange:t.func,useCacheForDOMMeasurements:t.bool,minRows:t.number,maxRows:t.number,inputRef:t.func},f.defaultProps={onChange:d,onHeightChange:d,useCacheForDOMMeasurements:!1},f});

255

es/index.js
import React from 'react';
import PropTypes from 'prop-types';
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';

@@ -8,3 +58,2 @@

var hiddenTextarea = isBrowser && document.createElement('textarea');
var HIDDEN_TEXTAREA_STYLE = {

@@ -21,18 +70,23 @@ 'min-height': '0',

};
var SIZING_STYLE = ['letter-spacing', 'line-height', 'font-family', 'font-weight', 'font-size', 'font-style', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'box-sizing'];
var computedStyleCache = {};
function calculateNodeHeight(uiTextNode, uid, useCache, minRows, maxRows) {
if (useCache === void 0) {
useCache = false;
}
function calculateNodeHeight(uiTextNode, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var minRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var maxRows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
if (minRows === void 0) {
minRows = null;
}
if (maxRows === void 0) {
maxRows = null;
}
if (hiddenTextarea.parentNode === null) {
document.body.appendChild(hiddenTextarea);
}
} // Copy all CSS properties that have an impact on the height of the content in
// the textbox
// Copy all CSS properties that have an impact on the height of the content in
// the textbox
var nodeStyling = calculateNodeStyling(uiTextNode, uid, useCache);

@@ -47,5 +101,3 @@

boxSizing = nodeStyling.boxSizing,
sizingStyle = nodeStyling.sizingStyle;
// Need to have the overflow attribute to hide the scrollbar otherwise
sizingStyle = nodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise
// text-lines will not calculated properly as the shadow will technically be

@@ -61,3 +113,2 @@ // narrower for content

hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || 'x';
var minHeight = -Infinity;

@@ -73,5 +124,5 @@ var maxHeight = Infinity;

height = height - paddingSize;
}
} // measure height of a textarea with a single row
// measure height of a textarea with a single row
hiddenTextarea.value = 'x';

@@ -83,12 +134,17 @@ var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);

@@ -99,8 +155,14 @@ }

var rowCount = Math.floor(height / singleRowHeight);
return { height: height, minHeight: minHeight, maxHeight: maxHeight, rowCount: rowCount };
return {
height: height,
minHeight: minHeight,
maxHeight: maxHeight,
rowCount: rowCount
};
}
function calculateNodeStyling(node, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
function calculateNodeStyling(node, uid, useCache) {
if (useCache === void 0) {
useCache = false;
}

@@ -121,7 +183,5 @@ if (useCache && computedStyleCache[uid]) {

}, {});
var boxSizing = sizingStyle['box-sizing']; // IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
var boxSizing = sizingStyle['box-sizing'];
// IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
if (isIE && boxSizing === 'border-box') {

@@ -132,5 +192,3 @@ sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(style['border-right-width']) + parseFloat(style['border-left-width']) + parseFloat(style['padding-right']) + parseFloat(style['padding-left']) + 'px';

var paddingSize = parseFloat(sizingStyle['padding-bottom']) + parseFloat(sizingStyle['padding-top']);
var borderSize = parseFloat(sizingStyle['border-bottom-width']) + parseFloat(sizingStyle['border-top-width']);
var nodeInfo = {

@@ -154,4 +212,6 @@ sizingStyle: sizingStyle,

function autoInc() {
var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}

@@ -165,94 +225,23 @@ return function () {

var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
/**
* <TextareaAutosize />
*/
var noop = function noop() {}; // IE11 has a problem with eval source maps, can be reproduced with:
// eval('"use strict"; var onNextFrame = window.cancelAnimationFrame; onNextFrame(4);')
// so we bind window as context in dev modes
var noop = function noop() {};
var _ref = isBrowser && window.requestAnimationFrame ? [window.requestAnimationFrame, window.cancelAnimationFrame] : [setTimeout, clearTimeout];
var _ref = isBrowser && window.requestAnimationFrame ? process.env.NODE_ENV !== 'development' ? [window.requestAnimationFrame, window.cancelAnimationFrame] : [window.requestAnimationFrame.bind(window), window.cancelAnimationFrame.bind(window)] : [setTimeout, clearTimeout];
var onNextFrame = _ref[0];
var clearNextFrameAction = _ref[1];
var TextareaAutosize = function (_React$Component) {
inherits(TextareaAutosize, _React$Component);
var TextareaAutosize =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(TextareaAutosize, _React$Component);
function TextareaAutosize(props) {
classCallCheck(this, TextareaAutosize);
var _this;
var _this = possibleConstructorReturn(this, _React$Component.call(this, props));
_this = _React$Component.call(this, props) || this;
_this._resizeLock = false;

@@ -272,7 +261,10 @@

}
_this.props.onChange(event);
};
_this._resizeComponent = function () {
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
_this._resizeComponent = function (callback) {
if (callback === void 0) {
callback = noop;
}

@@ -295,8 +287,11 @@ if (typeof _this._rootDOMNode === 'undefined') {

rowCount = nodeHeight.rowCount;
_this.rowCount = rowCount;
if (_this.state.height !== height || _this.state.minHeight !== minHeight || _this.state.maxHeight !== maxHeight) {
_this.setState({ height: height, minHeight: minHeight, maxHeight: maxHeight }, callback);
_this.setState({
height: height,
minHeight: minHeight,
maxHeight: maxHeight
}, callback);
return;

@@ -313,3 +308,2 @@ }

};
_this._uid = uid();

@@ -320,3 +314,5 @@ _this._controlled = typeof props.value === 'string';

TextareaAutosize.prototype.render = function render() {
var _proto = TextareaAutosize.prototype;
_proto.render = function render() {
var _props = this.props,

@@ -328,9 +324,6 @@ _minRows = _props.minRows,

_inputRef = _props.inputRef,
props = objectWithoutProperties(_props, ['minRows', 'maxRows', 'onHeightChange', 'useCacheForDOMMeasurements', 'inputRef']);
props = _objectWithoutProperties(_props, ["minRows", "maxRows", "onHeightChange", "useCacheForDOMMeasurements", "inputRef"]);
props.style = _extends({}, props.style, {
height: this.state.height
});
var maxHeight = Math.max(props.style.maxHeight || Infinity, this.state.maxHeight);

@@ -342,3 +335,3 @@

return React.createElement('textarea', _extends({}, props, {
return React.createElement("textarea", _extends({}, props, {
onChange: this._onChange,

@@ -349,9 +342,10 @@ ref: this._onRootDOMNode

TextareaAutosize.prototype.componentDidMount = function componentDidMount() {
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
this._resizeComponent();
// Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
this._resizeComponent(); // Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
// causing competing rerenders (due to setState in the listener) in React.
// More can be found here - facebook/react#6324
this._resizeListener = function () {

@@ -361,3 +355,5 @@ if (_this2._resizeLock) {

}
_this2._resizeLock = true;
_this2._resizeComponent(function () {

@@ -367,9 +363,11 @@ return _this2._resizeLock = false;

};
window.addEventListener('resize', this._resizeListener);
};
TextareaAutosize.prototype.componentWillReceiveProps = function componentWillReceiveProps() {
_proto.componentWillReceiveProps = function componentWillReceiveProps() {
var _this3 = this;
this._clearNextFrame();
this._onNextFrameActionId = onNextFrame(function () {

@@ -380,3 +378,3 @@ return _this3._resizeComponent();

TextareaAutosize.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (this.state.height !== prevState.height) {

@@ -387,4 +385,5 @@ this.props.onHeightChange(this.state.height, this);

TextareaAutosize.prototype.componentWillUnmount = function componentWillUnmount() {
_proto.componentWillUnmount = function componentWillUnmount() {
this._clearNextFrame();
window.removeEventListener('resize', this._resizeListener);

@@ -394,3 +393,3 @@ purgeCache(this._uid);

TextareaAutosize.prototype._clearNextFrame = function _clearNextFrame() {
_proto._clearNextFrame = function _clearNextFrame() {
clearNextFrameAction(this._onNextFrameActionId);

@@ -397,0 +396,0 @@ };

255

lib/index.js

@@ -8,2 +8,52 @@ 'use strict';

function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';

@@ -13,3 +63,2 @@

var hiddenTextarea = isBrowser && document.createElement('textarea');
var HIDDEN_TEXTAREA_STYLE = {

@@ -26,18 +75,23 @@ 'min-height': '0',

};
var SIZING_STYLE = ['letter-spacing', 'line-height', 'font-family', 'font-weight', 'font-size', 'font-style', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'box-sizing'];
var computedStyleCache = {};
function calculateNodeHeight(uiTextNode, uid, useCache, minRows, maxRows) {
if (useCache === void 0) {
useCache = false;
}
function calculateNodeHeight(uiTextNode, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var minRows = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var maxRows = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
if (minRows === void 0) {
minRows = null;
}
if (maxRows === void 0) {
maxRows = null;
}
if (hiddenTextarea.parentNode === null) {
document.body.appendChild(hiddenTextarea);
}
} // Copy all CSS properties that have an impact on the height of the content in
// the textbox
// Copy all CSS properties that have an impact on the height of the content in
// the textbox
var nodeStyling = calculateNodeStyling(uiTextNode, uid, useCache);

@@ -52,5 +106,3 @@

boxSizing = nodeStyling.boxSizing,
sizingStyle = nodeStyling.sizingStyle;
// Need to have the overflow attribute to hide the scrollbar otherwise
sizingStyle = nodeStyling.sizingStyle; // Need to have the overflow attribute to hide the scrollbar otherwise
// text-lines will not calculated properly as the shadow will technically be

@@ -66,3 +118,2 @@ // narrower for content

hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || 'x';
var minHeight = -Infinity;

@@ -78,5 +129,5 @@ var maxHeight = Infinity;

height = height - paddingSize;
}
} // measure height of a textarea with a single row
// measure height of a textarea with a single row
hiddenTextarea.value = 'x';

@@ -88,12 +139,17 @@ var singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);

@@ -104,8 +160,14 @@ }

var rowCount = Math.floor(height / singleRowHeight);
return { height: height, minHeight: minHeight, maxHeight: maxHeight, rowCount: rowCount };
return {
height: height,
minHeight: minHeight,
maxHeight: maxHeight,
rowCount: rowCount
};
}
function calculateNodeStyling(node, uid) {
var useCache = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
function calculateNodeStyling(node, uid, useCache) {
if (useCache === void 0) {
useCache = false;
}

@@ -126,7 +188,5 @@ if (useCache && computedStyleCache[uid]) {

}, {});
var boxSizing = sizingStyle['box-sizing']; // IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
var boxSizing = sizingStyle['box-sizing'];
// IE (Edge has already correct behaviour) returns content width as computed width
// so we need to add manually padding and border widths
if (isIE && boxSizing === 'border-box') {

@@ -137,5 +197,3 @@ sizingStyle.width = parseFloat(sizingStyle.width) + parseFloat(style['border-right-width']) + parseFloat(style['border-left-width']) + parseFloat(style['padding-right']) + parseFloat(style['padding-left']) + 'px';

var paddingSize = parseFloat(sizingStyle['padding-bottom']) + parseFloat(sizingStyle['padding-top']);
var borderSize = parseFloat(sizingStyle['border-bottom-width']) + parseFloat(sizingStyle['border-top-width']);
var nodeInfo = {

@@ -159,4 +217,6 @@ sizingStyle: sizingStyle,

function autoInc() {
var seed = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}

@@ -170,94 +230,23 @@ return function () {

var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var objectWithoutProperties = function (obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
/**
* <TextareaAutosize />
*/
var noop = function noop() {}; // IE11 has a problem with eval source maps, can be reproduced with:
// eval('"use strict"; var onNextFrame = window.cancelAnimationFrame; onNextFrame(4);')
// so we bind window as context in dev modes
var noop = function noop() {};
var _ref = isBrowser && window.requestAnimationFrame ? [window.requestAnimationFrame, window.cancelAnimationFrame] : [setTimeout, clearTimeout];
var _ref = isBrowser && window.requestAnimationFrame ? process.env.NODE_ENV !== 'development' ? [window.requestAnimationFrame, window.cancelAnimationFrame] : [window.requestAnimationFrame.bind(window), window.cancelAnimationFrame.bind(window)] : [setTimeout, clearTimeout];
var onNextFrame = _ref[0];
var clearNextFrameAction = _ref[1];
var TextareaAutosize = function (_React$Component) {
inherits(TextareaAutosize, _React$Component);
var TextareaAutosize =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(TextareaAutosize, _React$Component);
function TextareaAutosize(props) {
classCallCheck(this, TextareaAutosize);
var _this;
var _this = possibleConstructorReturn(this, _React$Component.call(this, props));
_this = _React$Component.call(this, props) || this;
_this._resizeLock = false;

@@ -277,7 +266,10 @@

}
_this.props.onChange(event);
};
_this._resizeComponent = function () {
var callback = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : noop;
_this._resizeComponent = function (callback) {
if (callback === void 0) {
callback = noop;
}

@@ -300,8 +292,11 @@ if (typeof _this._rootDOMNode === 'undefined') {

rowCount = nodeHeight.rowCount;
_this.rowCount = rowCount;
if (_this.state.height !== height || _this.state.minHeight !== minHeight || _this.state.maxHeight !== maxHeight) {
_this.setState({ height: height, minHeight: minHeight, maxHeight: maxHeight }, callback);
_this.setState({
height: height,
minHeight: minHeight,
maxHeight: maxHeight
}, callback);
return;

@@ -318,3 +313,2 @@ }

};
_this._uid = uid();

@@ -325,3 +319,5 @@ _this._controlled = typeof props.value === 'string';

TextareaAutosize.prototype.render = function render() {
var _proto = TextareaAutosize.prototype;
_proto.render = function render() {
var _props = this.props,

@@ -333,9 +329,6 @@ _minRows = _props.minRows,

_inputRef = _props.inputRef,
props = objectWithoutProperties(_props, ['minRows', 'maxRows', 'onHeightChange', 'useCacheForDOMMeasurements', 'inputRef']);
props = _objectWithoutProperties(_props, ["minRows", "maxRows", "onHeightChange", "useCacheForDOMMeasurements", "inputRef"]);
props.style = _extends({}, props.style, {
height: this.state.height
});
var maxHeight = Math.max(props.style.maxHeight || Infinity, this.state.maxHeight);

@@ -347,3 +340,3 @@

return React.createElement('textarea', _extends({}, props, {
return React.createElement("textarea", _extends({}, props, {
onChange: this._onChange,

@@ -354,9 +347,10 @@ ref: this._onRootDOMNode

TextareaAutosize.prototype.componentDidMount = function componentDidMount() {
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
this._resizeComponent();
// Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
this._resizeComponent(); // Working around Firefox bug which runs resize listeners even when other JS is running at the same moment
// causing competing rerenders (due to setState in the listener) in React.
// More can be found here - facebook/react#6324
this._resizeListener = function () {

@@ -366,3 +360,5 @@ if (_this2._resizeLock) {

}
_this2._resizeLock = true;
_this2._resizeComponent(function () {

@@ -372,9 +368,11 @@ return _this2._resizeLock = false;

};
window.addEventListener('resize', this._resizeListener);
};
TextareaAutosize.prototype.componentWillReceiveProps = function componentWillReceiveProps() {
_proto.componentWillReceiveProps = function componentWillReceiveProps() {
var _this3 = this;
this._clearNextFrame();
this._onNextFrameActionId = onNextFrame(function () {

@@ -385,3 +383,3 @@ return _this3._resizeComponent();

TextareaAutosize.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
if (this.state.height !== prevState.height) {

@@ -392,4 +390,5 @@ this.props.onHeightChange(this.state.height, this);

TextareaAutosize.prototype.componentWillUnmount = function componentWillUnmount() {
_proto.componentWillUnmount = function componentWillUnmount() {
this._clearNextFrame();
window.removeEventListener('resize', this._resizeListener);

@@ -399,3 +398,3 @@ purgeCache(this._uid);

TextareaAutosize.prototype._clearNextFrame = function _clearNextFrame() {
_proto._clearNextFrame = function _clearNextFrame() {
clearNextFrameAction(this._onNextFrameActionId);

@@ -402,0 +401,0 @@ };

35

package.json
{
"name": "react-textarea-autosize",
"description": "textarea component for React which grows with content",
"version": "5.1.0",
"version": "5.2.0",
"keywords": "autosize, grow, react, react-component, textarea",

@@ -11,3 +11,4 @@ "repository": "andreypopp/react-textarea-autosize",

"jsnext:main": "es/index.js",
"author": "Andrey Popp <8mayday@gmail.com> (https://andreypopp.com/)",
"unpkg": "dist/react-textarea-autosize.min.js",
"author": "Andrey Popp <8mayday@gmail.com> (httsps://andreypopp.com/)",
"scripts": {

@@ -25,7 +26,7 @@ "prebuild": "npm run clean",

"prepare": "npm run build",
"precommit": "lint-staged && run-p build:umd:** && git add dist",
"precommit": "lint-staged",
"prerelease": "npm run lint",
"release:patch": "npm run prerelease && npm version patch && git push --follow-tags && npm publish",
"release:minor": "npm run prerelease && npm version minor && git push --follow-tags && npm publish",
"release:major": "npm run prerelease && npm version major && git push --follow-tags && npm publish"
"release:patch": "npm run prerelease && npm version patch && npm publish && git push --follow-tags",
"release:minor": "npm run prerelease && npm version minor && npm publish && git push --follow-tags",
"release:major": "npm run prerelease && npm version major && npm publish && git push --follow-tags"
},

@@ -36,7 +37,8 @@ "peerDependencies": {

"devDependencies": {
"babel-cli": "^6.24.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"@babel/cli": "7.0.0-beta.31",
"@babel/core": "7.0.0-beta.31",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.31",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.31",
"@babel/preset-env": "7.0.0-beta.31",
"@babel/preset-react": "7.0.0-beta.31",
"cross-env": "^5.0.1",

@@ -49,11 +51,10 @@ "eslint": "^3.3.1",

"npm-run-all": "^4.0.2",
"prettier": "^1.5.3",
"prettier": "^1.8.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"rimraf": "^2.6.1",
"rollup": "^0.45.2",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^8.0.2",
"rollup": "^0.51.0",
"rollup-plugin-babel": "4.0.0-beta.0",
"rollup-plugin-node-resolve": "^3.0.0",
"rollup-plugin-replace": "^1.1.1",
"rollup-plugin-replace": "^2.0.0",
"rollup-plugin-uglify": "^2.0.1"

@@ -67,4 +68,4 @@ },

"dependencies": {
"prop-types": "^15.5.10"
"prop-types": "^15.6.0"
}
}

42

README.md

@@ -0,5 +1,8 @@

[![npm version](https://img.shields.io/npm/v/react-textarea-autosize.svg)](https://www.npmjs.com/package/react-textarea-autosize)
[![npm](https://img.shields.io/npm/dm/react-textarea-autosize.svg)](https://www.npmjs.com/package/react-textarea-autosize)
# react-textarea-autosize
Drop-in replacement for the textarea component which automatically resizes textarea as content changes.
A native React version of the popular [jQuery
Drop-in replacement for the textarea component which automatically resizes
textarea as content changes. A native React version of the popular [jQuery
Autosize](http://www.jacklmoore.com/autosize/)!

@@ -10,6 +13,5 @@

```javascript
import Textarea from 'react-textarea-autosize';
import Textarea from "react-textarea-autosize";
// If you use CommonJS syntax:
//
// var Textarea = require('react-textarea-autosize').default;

@@ -19,5 +21,6 @@

<div>
<Textarea></Textarea>
<Textarea />
</div>,
document.getElementById('element'));
document.getElementById("element")
);
```

@@ -33,2 +36,22 @@

## FAQ
### How to test it with jest and react-test-renderer
Because [jest](https://github.com/facebook/jest) provides polyfills for DOM
objects by requiring [jsdom](https://github.com/tmpvar/jsdom) and
[react-test-renderer](https://www.npmjs.com/package/react-test-renderer) doesn't
provide refs for rendered components out of the box (calling ref callbacks with
`null`), you need to supply a mocked ref in your tests. You can do it like this
(more can be read
[here](https://github.com/facebook/react/issues/7740#issuecomment-247335106)):
```js
const tree = renderer
.create(<Textarea />, {
createNodeMock: () => document.createElement("textarea")
})
.toJSON();
```
## Development

@@ -42,4 +65,5 @@

This will run eslint, compile sources from `src/` to `lib/`, `es/` and `dist/`, bump a
version in `package.json` and then create a new git commit with tag. If tests or
linter fails — commit won't be created. If tasks succeed it publishes to npm and pushes a tag to github.
This will run eslint, compile sources from `src/` to `lib/`, `es/` and `dist/`,
bump a version in `package.json` and then create a new git commit with tag. If
tests or linter fails — commit won't be created. If tasks succeed it publishes
to npm and pushes a tag to github.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc