From b6f68f4d6f732bf67dabf8fbfa4533360ad38d4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Ros=C5=82aniec?=
 <radoslaw.roslaniec@grupawp.pl>
Date: Fri, 5 Oct 2018 14:50:52 +0200
Subject: [PATCH] responsive prop can be attached in lifecycle

---
 src/slider.js | 74 +++++++++++++++++++++++++++++----------------------
 1 file changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/slider.js b/src/slider.js
index d4833da43..b988b40fa 100644
--- a/src/slider.js
+++ b/src/slider.js
@@ -32,38 +32,7 @@ export default class Slider extends React.Component {
     //whyDidYouUpdate(React)
     //}
     if (this.props.responsive) {
-      let breakpoints = this.props.responsive.map(
-        breakpt => breakpt.breakpoint
-      );
-      // sort them in increasing order of their numerical value
-      breakpoints.sort((x, y) => x - y);
-
-      breakpoints.forEach((breakpoint, index) => {
-        // media query for each breakpoint
-        let bQuery;
-        if (index === 0) {
-          bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
-        } else {
-          bQuery = json2mq({
-            minWidth: breakpoints[index - 1] + 1,
-            maxWidth: breakpoint
-          });
-        }
-        // when not using server side rendering
-        canUseDOM() &&
-          this.media(bQuery, () => {
-            this.setState({ breakpoint: breakpoint });
-          });
-      });
-
-      // Register media query for full screen. Need to support resize from small to large
-      // convert javascript object to media query string
-      let query = json2mq({ minWidth: breakpoints.slice(-1)[0] });
-
-      canUseDOM() &&
-        this.media(query, () => {
-          this.setState({ breakpoint: null });
-        });
+      this.calculateBreakpoints(this.props.responsive);
     }
   }
 
@@ -73,6 +42,47 @@ export default class Slider extends React.Component {
     });
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.responsive !== nextProps.responsive) {
+      this.calculateBreakpoints(nextProps.responsive);
+    }
+  }
+
+  calculateBreakpoints = (responsive) => {
+    let breakpoints = responsive.map(
+      breakpt => breakpt.breakpoint
+    );
+    // sort them in increasing order of their numerical value
+    breakpoints.sort((x, y) => x - y);
+
+    breakpoints.forEach((breakpoint, index) => {
+      // media query for each breakpoint
+      let bQuery;
+      if (index === 0) {
+        bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
+      } else {
+        bQuery = json2mq({
+          minWidth: breakpoints[index - 1] + 1,
+          maxWidth: breakpoint
+        });
+      }
+      // when not using server side rendering
+      canUseDOM() &&
+        this.media(bQuery, () => {
+          this.setState({ breakpoint: breakpoint });
+        });
+    });
+
+    // Register media query for full screen. Need to support resize from small to large
+    // convert javascript object to media query string
+    let query = json2mq({ minWidth: breakpoints.slice(-1)[0] });
+
+    canUseDOM() &&
+      this.media(query, () => {
+        this.setState({ breakpoint: null });
+      });
+  }
+
   slickPrev = () => this.innerSlider.slickPrev();
 
   slickNext = () => this.innerSlider.slickNext();