Merge pull request #177 from Methuselah96/remove-unsafe

Remove usage of UNSAFE React method
JedWatson · Dec 11, 2020 · f42ae1c · f42ae1c
2 parents 6bc3cb7 + 6016207
commit f42ae1c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 38 deletions.
diff --git a/dist/react-input-autosize.es.js b/dist/react-input-autosize.es.js
@@ -246,6 +246,14 @@ var generateId = function generateId() {
 
 var AutosizeInput = function (_Component) {
 	inherits(AutosizeInput, _Component);
+	createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
 
 	function AutosizeInput(props) {
 		classCallCheck(this, AutosizeInput);
@@ -269,7 +277,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -281,15 +290,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_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
@@ -252,6 +252,14 @@ var generateId = function generateId() {
 
 var AutosizeInput = function (_Component) {
 	inherits(AutosizeInput, _Component);
+	createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
 
 	function AutosizeInput(props) {
 		classCallCheck(this, AutosizeInput);
@@ -275,7 +283,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -287,15 +296,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_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
diff --git a/lib/AutosizeInput.js b/lib/AutosizeInput.js
@@ -65,6 +65,15 @@ var generateId = function generateId() {
 var AutosizeInput = function (_Component) {
 	_inherits(AutosizeInput, _Component);
 
+	_createClass(AutosizeInput, null, [{
+		key: 'getDerivedStateFromProps',
+		value: function getDerivedStateFromProps(props, state) {
+			var id = props.id;
+
+			return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+		}
+	}]);
+
 	function AutosizeInput(props) {
 		_classCallCheck(this, AutosizeInput);
 
@@ -87,7 +96,8 @@ var AutosizeInput = function (_Component) {
 
 		_this.state = {
 			inputWidth: props.minWidth,
-			inputId: props.id || generateId()
+			inputId: props.id || generateId(),
+			prevId: props.id
 		};
 		return _this;
 	}
@@ -99,15 +109,6 @@ var AutosizeInput = function (_Component) {
 			this.copyInputStyles();
 			this.updateInputWidth();
 		}
-	}, {
-		key: 'UNSAFE_componentWillReceiveProps',
-		value: function UNSAFE_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/package.json b/package.json
@@ -51,7 +51,7 @@
     "webpack-dev-server": "^2.7.1"
   },
   "peerDependencies": {
-    "react": "^0.14.9 || ^15.3.0 || ^16.0 || ^17.0.1"
+    "react": "^16.3.0 || ^17.0.0"
   },
   "scripts": {
     "build": "NODE_ENV=production nps build",

diff --git a/src/AutosizeInput.js b/src/AutosizeInput.js
@@ -45,24 +45,23 @@ const generateId = () => {
 };
 
 class AutosizeInput extends Component {
+	static getDerivedStateFromProps(props, state) {
+		const { id } = props;
+		return id !== state.prevId ? { inputId: id || generateId(), prevId: id } : null;
+	}
 	constructor (props) {
 		super(props);
 		this.state = {
 			inputWidth: props.minWidth,
 			inputId: props.id || generateId(),
+			prevId: props.id,
 		};
 	}
 	componentDidMount () {
 		this.mounted = true;
 		this.copyInputStyles();
 		this.updateInputWidth();
 	}
-	UNSAFE_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') {