From 5162be9d56b5058f6f33b72e47d62d2ae8d94ed5 Mon Sep 17 00:00:00 2001 From: Dustin Kane Date: Thu, 19 Sep 2019 20:22:38 -0700 Subject: [PATCH 1/2] Replacing use of deprecated lifecycle method --- src/AutosizeInput.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/AutosizeInput.js b/src/AutosizeInput.js index 423d999..d7505f6 100644 --- a/src/AutosizeInput.js +++ b/src/AutosizeInput.js @@ -45,11 +45,24 @@ const generateId = () => { }; class AutosizeInput extends Component { + // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + static getDerivedStateFromProps (props, state) { + const { id } = props; + if (id !== state.prevPropId) { + return { + ...state, + inputId: id || generateId(), + prevPropId: id + } + } + return null; + } constructor (props) { super(props); this.state = { inputWidth: props.minWidth, inputId: props.id || generateId(), + prevPropId: null }; } componentDidMount () { @@ -57,12 +70,6 @@ class AutosizeInput extends Component { this.copyInputStyles(); this.updateInputWidth(); } - componentWillReceiveProps (nextProps) { - const { id } = nextProps; - if (id !== this.props.id) { - this.setState({ inputId: id || generateId() }); - } - } componentDidUpdate (prevProps, prevState) { if (prevState.inputWidth !== this.state.inputWidth) { if (typeof this.props.onAutosize === 'function') { From 0f83c3bc56757e8643b8c9baea94a7f3fa161248 Mon Sep 17 00:00:00 2001 From: Dustin Kane Date: Mon, 23 Sep 2019 13:02:37 -0700 Subject: [PATCH 2/2] adding newly built files --- dist/react-input-autosize.es.js | 28 ++++++++++++++++++---------- dist/react-input-autosize.js | 28 ++++++++++++++++++---------- dist/react-input-autosize.min.js | 2 +- lib/AutosizeInput.js | 29 +++++++++++++++++++---------- 4 files changed, 56 insertions(+), 31 deletions(-) diff --git a/dist/react-input-autosize.es.js b/dist/react-input-autosize.es.js index 505efee..455f9bc 100644 --- a/dist/react-input-autosize.es.js +++ b/dist/react-input-autosize.es.js @@ -246,6 +246,22 @@ var generateId = function generateId() { var AutosizeInput = function (_Component) { inherits(AutosizeInput, _Component); + createClass(AutosizeInput, null, [{ + key: 'getDerivedStateFromProps', + + // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + value: function getDerivedStateFromProps(props, state) { + var id = props.id; + + if (id !== state.prevPropId) { + return _extends({}, state, { + inputId: id || generateId(), + prevPropId: id + }); + } + return null; + } + }]); function AutosizeInput(props) { classCallCheck(this, AutosizeInput); @@ -269,7 +285,8 @@ var AutosizeInput = function (_Component) { _this.state = { inputWidth: props.minWidth, - inputId: props.id || generateId() + inputId: props.id || generateId(), + prevPropId: null }; return _this; } @@ -281,15 +298,6 @@ var AutosizeInput = function (_Component) { this.copyInputStyles(); this.updateInputWidth(); } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - var id = nextProps.id; - - if (id !== this.props.id) { - this.setState({ inputId: id || generateId() }); - } - } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) { diff --git a/dist/react-input-autosize.js b/dist/react-input-autosize.js index b66e2d2..14f0a06 100644 --- a/dist/react-input-autosize.js +++ b/dist/react-input-autosize.js @@ -252,6 +252,22 @@ var generateId = function generateId() { var AutosizeInput = function (_Component) { inherits(AutosizeInput, _Component); + createClass(AutosizeInput, null, [{ + key: 'getDerivedStateFromProps', + + // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + value: function getDerivedStateFromProps(props, state) { + var id = props.id; + + if (id !== state.prevPropId) { + return _extends({}, state, { + inputId: id || generateId(), + prevPropId: id + }); + } + return null; + } + }]); function AutosizeInput(props) { classCallCheck(this, AutosizeInput); @@ -275,7 +291,8 @@ var AutosizeInput = function (_Component) { _this.state = { inputWidth: props.minWidth, - inputId: props.id || generateId() + inputId: props.id || generateId(), + prevPropId: null }; return _this; } @@ -287,15 +304,6 @@ var AutosizeInput = function (_Component) { this.copyInputStyles(); this.updateInputWidth(); } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - var id = nextProps.id; - - if (id !== this.props.id) { - this.setState({ inputId: id || generateId() }); - } - } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) { diff --git a/dist/react-input-autosize.min.js b/dist/react-input-autosize.min.js index 0d904aa..f4df371 100644 --- a/dist/react-input-autosize.min.js +++ b/dist/react-input-autosize.min.js @@ -1 +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=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.navigator)&&/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)=0||Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}(this.props,[]);return function(t){p.forEach(function(e){return delete t[e]})}(r),r.className=this.props.inputClassName,r.id=this.state.inputId,r.style=i,n.createElement("div",{className:this.props.className,style:e},this.renderStyles(),n.createElement("input",o({},r,{ref:this.inputRef})),n.createElement("div",{ref:this.sizerRef,style:u},t),this.props.placeholder?n.createElement("div",{ref:this.placeHolderSizerRef,style:u},this.props.placeholder):null)}}]),f}();return f.defaultProps={minWidth:1,injectStyles:!0},f}); diff --git a/lib/AutosizeInput.js b/lib/AutosizeInput.js index 50b20f6..f1cb75c 100644 --- a/lib/AutosizeInput.js +++ b/lib/AutosizeInput.js @@ -65,6 +65,23 @@ var generateId = function generateId() { var AutosizeInput = function (_Component) { _inherits(AutosizeInput, _Component); + _createClass(AutosizeInput, null, [{ + key: 'getDerivedStateFromProps', + + // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props + value: function getDerivedStateFromProps(props, state) { + var id = props.id; + + if (id !== state.prevPropId) { + return _extends({}, state, { + inputId: id || generateId(), + prevPropId: id + }); + } + return null; + } + }]); + function AutosizeInput(props) { _classCallCheck(this, AutosizeInput); @@ -87,7 +104,8 @@ var AutosizeInput = function (_Component) { _this.state = { inputWidth: props.minWidth, - inputId: props.id || generateId() + inputId: props.id || generateId(), + prevPropId: null }; return _this; } @@ -99,15 +117,6 @@ var AutosizeInput = function (_Component) { this.copyInputStyles(); this.updateInputWidth(); } - }, { - key: 'componentWillReceiveProps', - value: function componentWillReceiveProps(nextProps) { - var id = nextProps.id; - - if (id !== this.props.id) { - this.setState({ inputId: id || generateId() }); - } - } }, { key: 'componentDidUpdate', value: function componentDidUpdate(prevProps, prevState) {