refactor: remove componentWillReceiveProps

BREAKING CHANGE: require react ^16.4.0

package.json

@@ -22,10 +22,12 @@
     "slider",
     "gallery",
     "slideshow",
+    "carousel",
     "react-component",
     "react-slider",
     "react-gallery",
     "react-slideshow",
+    "react-carousel",
     "image slider",
     "image gallery",
     "animations"
@@ -39,6 +41,9 @@
   "dependencies": {
     "react": "^16.12.0"
   },
+  "peerDependencies": {
+    "react": "^16.4.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.1.5",
     "@babel/core": "^7.1.5",

src/index.js

@@ -46,7 +46,6 @@ class Slider extends React.PureComponent {
 			currentSlideIndex: slideIndex,
 			animating: false,
 		};
-		this.slideCount = React.Children.count(this.props.children);
 		this.direction = direction;
 		this.swipeProperty = direction === HORIZONTAL ? 'left' : 'top';
 		this.swipeEventProperty = direction === HORIZONTAL ? 'clientX' : 'clientY';
@@ -63,11 +62,12 @@ class Slider extends React.PureComponent {
 		}
 	}
 
-	componentWillReceiveProps(props) {
-		this.slideCount = React.Children.count(props.children);
-		if (this.state.currentSlideIndex >= this.slideCount) {
-			this.setState({ currentSlideIndex: 0 });
+	static getDerivedStateFromProps(props, state) {
+		const slideCount = React.Children.count(props.children);
+		if (state.currentSlideIndex >= slideCount) {
+			return { currentSlideIndex: 0 };
 		}
+		return null;
 	}
 
 	setupAutoplay = () => {
@@ -286,6 +286,7 @@ class Slider extends React.PureComponent {
 	}
 
 	render() {
+		this.slideCount = React.Children.count(this.props.children);
 		const {
 			children,
 			className = 'slider',

src/index.test.js

@@ -158,6 +158,19 @@ test('can handle removing children', () => {
 	expect(slider.getInstance().slideCount).toBe(2);
 });
 
+test('should disable next button when reducing to one child', () => {
+	const slider = ReactTestRenderer.create(<Slider><div /><div /></Slider>);
+	slider.update(<Slider><div /></Slider>);
+	expect(slider.root.findByProps({ className: 'nextButton disabled' })).toBeDefined();
+});
+
+test('should disable next button when reducing to current slide', () => {
+	const slider = ReactTestRenderer.create(<Slider><div /><div /><div /></Slider>);
+	slider.getInstance().setState({ currentSlideIndex: 1 });
+	slider.update(<Slider><div /><div /></Slider>);
+	expect(slider.root.findByProps({ className: 'nextButton disabled' })).toBeDefined();
+});
+
 test('should not reset currentSlideIndex when removing next slide(s)', () => {
 	const slider = ReactTestRenderer.create(<Slider slideIndex={1}><div /><div /><div /></Slider>);
 	expect(slider.getInstance().slideCount).toBe(3);