react-textarea-autosize - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

es/calculateNodeHeight.js

@@ -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 = {

es/TextareaAutosize.js

@@ -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 @@

lib/calculateNodeHeight.js

@@ -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 = {

lib/TextareaAutosize.js

@@ -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 @@

package.json

 {
   "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",

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

31421

increased by3.36%

Lines of code

646

increased by5.21%

No dependency changes