react-textarea-autosize
Advanced tools
Comparing version 4.2.0 to 4.2.1
@@ -5,21 +5,15 @@ /** | ||
var HIDDEN_TEXTAREA_STYLE = '\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n'; | ||
var HIDDEN_TEXTAREA_STYLE = { | ||
'min-height': '0', | ||
'max-height': 'none', | ||
'height': '0', | ||
'visibility': 'hidden', | ||
'overflow': 'hidden', | ||
'position': 'absolute', | ||
'z-index': '-1000', | ||
'top': '0', | ||
'right': '0' | ||
}; | ||
var SIZING_STYLE = [ | ||
'letter-spacing', | ||
'line-height', | ||
'padding-top', | ||
'padding-bottom', | ||
'font-family', | ||
'font-weight', | ||
'font-size', | ||
'text-rendering', | ||
'text-transform', | ||
'width', | ||
'text-indent', | ||
'padding-left', | ||
'padding-right', | ||
'border-width', | ||
'box-sizing' | ||
]; | ||
var SIZING_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing']; | ||
@@ -53,3 +47,8 @@ var computedStyleCache = {}; | ||
hiddenTextarea.setAttribute('style', sizingStyle + ';' + HIDDEN_TEXTAREA_STYLE); | ||
Object.keys(sizingStyle).map(function (key) { | ||
hiddenTextarea.style[key] = sizingStyle[key]; | ||
}); | ||
Object.keys(HIDDEN_TEXTAREA_STYLE).map(function (key) { | ||
hiddenTextarea.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important'); | ||
}); | ||
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || 'x'; | ||
@@ -108,5 +107,6 @@ | ||
var sizingStyle = SIZING_STYLE.map(function (name) { | ||
return name + ':' + style.getPropertyValue(name); | ||
}).join(';'); | ||
var sizingStyle = SIZING_STYLE.reduce(function (obj, name) { | ||
obj[name] = style.getPropertyValue(name); | ||
return obj; | ||
}, {}); | ||
@@ -113,0 +113,0 @@ var nodeInfo = { |
@@ -39,3 +39,2 @@ 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; }; | ||
_this._onChange = function (event) { | ||
_this._resizeComponent(); | ||
var _this$props = _this.props, | ||
@@ -53,3 +52,14 @@ valueLink = _this$props.valueLink, | ||
_this._resizeComponent = function () { | ||
_this.setState(calculateNodeHeight(_this._rootDOMNode, _this.props.useCacheForDOMMeasurements, _this.props.rows || _this.props.minRows, _this.props.maxRows)); | ||
if (!_this._rootDOMNode) { | ||
return; | ||
} | ||
var _calculateNodeHeight = calculateNodeHeight(_this._rootDOMNode, _this.props.useCacheForDOMMeasurements, _this.props.rows || _this.props.minRows, _this.props.maxRows), | ||
height = _calculateNodeHeight.height, | ||
minHeight = _calculateNodeHeight.minHeight, | ||
maxHeight = _calculateNodeHeight.maxHeight; | ||
if (_this.state.height !== height || _this.state.minHeight !== minHeight || _this.state.maxHeight !== maxHeight) { | ||
_this.setState({ height: height, minHeight: minHeight, maxHeight: maxHeight }); | ||
} | ||
}; | ||
@@ -56,0 +66,0 @@ |
@@ -9,3 +9,13 @@ 'use strict'; | ||
var HIDDEN_TEXTAREA_STYLE = '\n min-height:0 !important;\n max-height:none !important;\n height:0 !important;\n visibility:hidden !important;\n overflow:hidden !important;\n position:absolute !important;\n z-index:-1000 !important;\n top:0 !important;\n right:0 !important\n'; | ||
var HIDDEN_TEXTAREA_STYLE = { | ||
'min-height': '0', | ||
'max-height': 'none', | ||
'height': '0', | ||
'visibility': 'hidden', | ||
'overflow': 'hidden', | ||
'position': 'absolute', | ||
'z-index': '-1000', | ||
'top': '0', | ||
'right': '0' | ||
}; | ||
@@ -41,3 +51,8 @@ var SIZING_STYLE = ['letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing']; | ||
hiddenTextarea.setAttribute('style', sizingStyle + ';' + HIDDEN_TEXTAREA_STYLE); | ||
Object.keys(sizingStyle).map(function (key) { | ||
hiddenTextarea.style[key] = sizingStyle[key]; | ||
}); | ||
Object.keys(HIDDEN_TEXTAREA_STYLE).map(function (key) { | ||
hiddenTextarea.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important'); | ||
}); | ||
hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || 'x'; | ||
@@ -96,5 +111,6 @@ | ||
var sizingStyle = SIZING_STYLE.map(function (name) { | ||
return name + ':' + style.getPropertyValue(name); | ||
}).join(';'); | ||
var sizingStyle = SIZING_STYLE.reduce(function (obj, name) { | ||
obj[name] = style.getPropertyValue(name); | ||
return obj; | ||
}, {}); | ||
@@ -101,0 +117,0 @@ var nodeInfo = { |
@@ -19,5 +19,5 @@ 'use strict'; | ||
var _calculateNodeHeight = require('./calculateNodeHeight'); | ||
var _calculateNodeHeight2 = require('./calculateNodeHeight'); | ||
var _calculateNodeHeight2 = _interopRequireDefault(_calculateNodeHeight); | ||
var _calculateNodeHeight3 = _interopRequireDefault(_calculateNodeHeight2); | ||
@@ -52,3 +52,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
_this._onChange = function (event) { | ||
_this._resizeComponent(); | ||
var _this$props = _this.props, | ||
@@ -66,3 +65,14 @@ valueLink = _this$props.valueLink, | ||
_this._resizeComponent = function () { | ||
_this.setState((0, _calculateNodeHeight2.default)(_this._rootDOMNode, _this.props.useCacheForDOMMeasurements, _this.props.rows || _this.props.minRows, _this.props.maxRows)); | ||
if (!_this._rootDOMNode) { | ||
return; | ||
} | ||
var _calculateNodeHeight = (0, _calculateNodeHeight3.default)(_this._rootDOMNode, _this.props.useCacheForDOMMeasurements, _this.props.rows || _this.props.minRows, _this.props.maxRows), | ||
height = _calculateNodeHeight.height, | ||
minHeight = _calculateNodeHeight.minHeight, | ||
maxHeight = _calculateNodeHeight.maxHeight; | ||
if (_this.state.height !== height || _this.state.minHeight !== minHeight || _this.state.maxHeight !== maxHeight) { | ||
_this.setState({ height: height, minHeight: minHeight, maxHeight: maxHeight }); | ||
} | ||
}; | ||
@@ -69,0 +79,0 @@ |
{ | ||
"name": "react-textarea-autosize", | ||
"description": "textarea component for React which grows with content", | ||
"version": "4.2.0", | ||
"version": "4.2.1", | ||
"keywords": "autosize, grow, react, react-component, textarea", | ||
@@ -6,0 +6,0 @@ "repository": "andreypopp/react-textarea-autosize", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
31421
646