react-textarea-autosize
Advanced tools
Comparing version 4.1.0 to 4.2.0
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.__esModule = true; | ||
exports.default = calculateNodeHeight; | ||
@@ -7,0 +5,0 @@ /** |
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.default = undefined; | ||
exports.__esModule = true; | ||
@@ -14,6 +11,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; }; | ||
var _class, _temp; /** | ||
* <TextareaAutosize /> | ||
*/ | ||
var _react = require('react'); | ||
@@ -39,7 +32,9 @@ | ||
function _inherits(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; } | ||
function _inherits(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; } /** | ||
* <TextareaAutosize /> | ||
*/ | ||
var emptyFunction = function emptyFunction() {}; | ||
var noop = function noop() {}; | ||
var TextareaAutosize = (_temp = _class = function (_React$Component) { | ||
var TextareaAutosize = function (_React$Component) { | ||
_inherits(TextareaAutosize, _React$Component); | ||
@@ -50,4 +45,26 @@ | ||
var _this = _possibleConstructorReturn(this, (TextareaAutosize.__proto__ || Object.getPrototypeOf(TextareaAutosize)).call(this, props)); | ||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); | ||
_this._onRootDOMNode = function (node) { | ||
_this._rootDOMNode = node; | ||
if (_this.props.inputRef) _this.props.inputRef(node); | ||
}; | ||
_this._onChange = function (event) { | ||
_this._resizeComponent(); | ||
var _this$props = _this.props, | ||
valueLink = _this$props.valueLink, | ||
onChange = _this$props.onChange; | ||
if (valueLink) { | ||
valueLink.requestChange(event.target.value); | ||
} else { | ||
onChange(event); | ||
} | ||
}; | ||
_this._resizeComponent = function () { | ||
_this.setState((0, _calculateNodeHeight2.default)(_this._rootDOMNode, _this.props.useCacheForDOMMeasurements, _this.props.rows || _this.props.minRows, _this.props.maxRows)); | ||
}; | ||
_this.state = { | ||
@@ -58,126 +75,89 @@ height: null, | ||
}; | ||
_this._onNextFrameActionId = null; | ||
_this._rootDOMNode = null; | ||
_this._onChange = _this._onChange.bind(_this); | ||
_this._resizeComponent = _this._resizeComponent.bind(_this); | ||
_this._onRootDOMNode = _this._onRootDOMNode.bind(_this); | ||
return _this; | ||
} | ||
_createClass(TextareaAutosize, [{ | ||
key: 'render', | ||
value: function render() { | ||
var _props = this.props, | ||
valueLink = _props.valueLink, | ||
_minRows = _props.minRows, | ||
_maxRows = _props.maxRows, | ||
_onHeightChange = _props.onHeightChange, | ||
_useCacheForDOMMeasurements = _props.useCacheForDOMMeasurements, | ||
props = _objectWithoutProperties(_props, ['valueLink', 'minRows', 'maxRows', 'onHeightChange', 'useCacheForDOMMeasurements']); | ||
TextareaAutosize.prototype.render = function render() { | ||
var _props = this.props, | ||
valueLink = _props.valueLink, | ||
_minRows = _props.minRows, | ||
_maxRows = _props.maxRows, | ||
_onHeightChange = _props.onHeightChange, | ||
_useCacheForDOMMeasurements = _props.useCacheForDOMMeasurements, | ||
_inputRef = _props.inputRef, | ||
props = _objectWithoutProperties(_props, ['valueLink', 'minRows', 'maxRows', 'onHeightChange', 'useCacheForDOMMeasurements', 'inputRef']); | ||
if ((typeof valueLink === 'undefined' ? 'undefined' : _typeof(valueLink)) === 'object') { | ||
props.value = valueLink.value; | ||
} | ||
props.style = _extends({}, props.style, { | ||
height: this.state.height || 0 | ||
}); | ||
var maxHeight = Math.max(props.style.maxHeight ? props.style.maxHeight : Infinity, this.state.maxHeight); | ||
if (maxHeight < this.state.height) { | ||
props.style.overflow = 'hidden'; | ||
} | ||
return _react2.default.createElement('textarea', _extends({}, props, { | ||
onChange: this._onChange, | ||
ref: this._onRootDOMNode | ||
})); | ||
if ((typeof valueLink === 'undefined' ? 'undefined' : _typeof(valueLink)) === 'object') { | ||
props.value = valueLink.value; | ||
} | ||
}, { | ||
key: 'componentDidMount', | ||
value: function componentDidMount() { | ||
this._resizeComponent(); | ||
window.addEventListener('resize', this._resizeComponent); | ||
props.style = _extends({}, props.style, { | ||
height: this.state.height || 0 | ||
}); | ||
var maxHeight = Math.max(props.style.maxHeight || Infinity, this.state.maxHeight); | ||
if (maxHeight < this.state.height) { | ||
props.style.overflow = 'hidden'; | ||
} | ||
}, { | ||
key: 'componentWillReceiveProps', | ||
value: function componentWillReceiveProps() { | ||
// Re-render with the new content then recalculate the height as required. | ||
this._clearNextFrame(); | ||
this._onNextFrameActionId = onNextFrame(this._resizeComponent); | ||
} | ||
}, { | ||
key: 'componentDidUpdate', | ||
value: function componentDidUpdate(prevProps, prevState) { | ||
// Invoke callback when old height does not equal to new one. | ||
if (this.state.height !== prevState.height) { | ||
this.props.onHeightChange(this.state.height); | ||
} | ||
} | ||
}, { | ||
key: 'componentWillUnmount', | ||
value: function componentWillUnmount() { | ||
// Remove any scheduled events to prevent manipulating the node after it's | ||
// been unmounted. | ||
this._clearNextFrame(); | ||
window.removeEventListener('resize', this._resizeComponent); | ||
} | ||
}, { | ||
key: '_clearNextFrame', | ||
value: function _clearNextFrame() { | ||
if (this._onNextFrameActionId) { | ||
clearNextFrameAction(this._onNextFrameActionId); | ||
} | ||
} | ||
}, { | ||
key: '_onRootDOMNode', | ||
value: function _onRootDOMNode(node) { | ||
this._rootDOMNode = node; | ||
if (this.props.inputRef) this.props.inputRef(node); | ||
} | ||
}, { | ||
key: '_onChange', | ||
value: function _onChange(e) { | ||
this._resizeComponent(); | ||
var _props2 = this.props, | ||
valueLink = _props2.valueLink, | ||
onChange = _props2.onChange; | ||
if (valueLink) { | ||
valueLink.requestChange(e.target.value); | ||
} else { | ||
onChange(e); | ||
} | ||
return _react2.default.createElement('textarea', _extends({}, props, { | ||
onChange: this._onChange, | ||
ref: this._onRootDOMNode | ||
})); | ||
}; | ||
TextareaAutosize.prototype.componentDidMount = function componentDidMount() { | ||
this._resizeComponent(); | ||
window.addEventListener('resize', this._resizeComponent); | ||
}; | ||
TextareaAutosize.prototype.componentWillReceiveProps = function componentWillReceiveProps() { | ||
// Re-render with the new content then recalculate the height as required. | ||
this._clearNextFrame(); | ||
this._onNextFrameActionId = onNextFrame(this._resizeComponent); | ||
}; | ||
TextareaAutosize.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { | ||
// Invoke callback when old height does not equal to new one. | ||
if (this.state.height !== prevState.height) { | ||
this.props.onHeightChange(this.state.height); | ||
} | ||
}, { | ||
key: '_resizeComponent', | ||
value: function _resizeComponent() { | ||
var useCacheForDOMMeasurements = this.props.useCacheForDOMMeasurements; | ||
}; | ||
this.setState((0, _calculateNodeHeight2.default)(this._rootDOMNode, useCacheForDOMMeasurements, this.props.rows || this.props.minRows, this.props.maxRows)); | ||
TextareaAutosize.prototype.componentWillUnmount = function componentWillUnmount() { | ||
// Remove any scheduled events to prevent manipulating the node after it's | ||
// been unmounted. | ||
this._clearNextFrame(); | ||
window.removeEventListener('resize', this._resizeComponent); | ||
}; | ||
TextareaAutosize.prototype._clearNextFrame = function _clearNextFrame() { | ||
if (this._onNextFrameActionId) { | ||
clearNextFrameAction(this._onNextFrameActionId); | ||
} | ||
}; | ||
/** | ||
* Read the current value of <textarea /> from DOM. | ||
*/ | ||
/** | ||
* Put focus on a <textarea /> DOM element. | ||
*/ | ||
TextareaAutosize.prototype.focus = function focus() { | ||
this._rootDOMNode.focus(); | ||
}; | ||
}, { | ||
key: 'focus', | ||
/** | ||
* Shifts focus away from a <textarea /> DOM element. | ||
*/ | ||
/** | ||
* Put focus on a <textarea /> DOM element. | ||
*/ | ||
value: function focus() { | ||
this._rootDOMNode.focus(); | ||
} | ||
TextareaAutosize.prototype.blur = function blur() { | ||
this._rootDOMNode.blur(); | ||
}; | ||
_createClass(TextareaAutosize, [{ | ||
key: 'value', | ||
/** | ||
* Shifts focus away from a <textarea /> DOM element. | ||
* Read the current value of <textarea /> from DOM. | ||
*/ | ||
}, { | ||
key: 'blur', | ||
value: function blur() { | ||
this._rootDOMNode.blur(); | ||
} | ||
}, { | ||
key: 'value', | ||
get: function get() { | ||
@@ -233,3 +213,5 @@ return this._rootDOMNode.value; | ||
return TextareaAutosize; | ||
}(_react2.default.Component), _class.propTypes = { | ||
}(_react2.default.Component); | ||
TextareaAutosize.propTypes = { | ||
/** | ||
@@ -278,7 +260,8 @@ * Current textarea value. | ||
inputRef: _propTypes2.default.func | ||
}, _class.defaultProps = { | ||
onChange: emptyFunction, | ||
onHeightChange: emptyFunction, | ||
}; | ||
TextareaAutosize.defaultProps = { | ||
onChange: noop, | ||
onHeightChange: noop, | ||
useCacheForDOMMeasurements: false | ||
}, _temp); | ||
}; | ||
exports.default = TextareaAutosize; | ||
@@ -285,0 +268,0 @@ |
{ | ||
"name": "react-textarea-autosize", | ||
"description": "textarea component for React which grows with content", | ||
"version": "4.1.0", | ||
"version": "4.2.0", | ||
"keywords": "autosize, grow, react, react-component, textarea", | ||
@@ -9,2 +9,4 @@ "repository": "andreypopp/react-textarea-autosize", | ||
"main": "lib/TextareaAutosize.js", | ||
"module": "es/TextareaAutosize.js", | ||
"jsnext:main": "es/TextareaAutosize.js", | ||
"author": "Andrey Popp <8mayday@gmail.com> (https://andreypopp.com/)", | ||
@@ -18,6 +20,7 @@ "scripts": { | ||
"devDependencies": { | ||
"babel-cli": "^6.11.4", | ||
"babel-preset-prometheusresearch": "^0.1.0", | ||
"babelify": "^7.3.0", | ||
"browserify": "^13.1.0", | ||
"babel-cli": "^6.24.1", | ||
"babel-preset-es2015": "^6.24.1", | ||
"babel-preset-react": "^6.24.1", | ||
"babel-preset-stage-2": "^6.24.1", | ||
"cross-env": "^4.0.0", | ||
"eslint": "^3.3.1", | ||
@@ -31,2 +34,3 @@ "eslint-config-prometheusresearch": "^0.2.0", | ||
"files": [ | ||
"es", | ||
"lib" | ||
@@ -33,0 +37,0 @@ ], |
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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
30399
8
614
0
11