From fe1b8115163ab3d7fd225841cdf64a980bcaec07 Mon Sep 17 00:00:00 2001
From: rishichawda <chawda.rishii@gmail.com>
Date: Wed, 31 Oct 2018 15:03:20 +0530
Subject: [PATCH] fix(themr.js): Remove warning caused due to usage of
 componentWillRecieveProps

Since componentWillRecieveProps will not be supported in future versions of react (v17.0), when used
with static getDerivedStateFromProps method in a component it throws a warning that it contains
legacy lifecycle method (v16.4 and above). Using shouldComponentUpdate to check props and re-render
the component provides us with a way to do the same without componentWillRecieveProps. Also, now we
don't need to pass props between themr component's methods since we can access updated props through
`this`.

94
---
 src/components/themr.js | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/themr.js b/src/components/themr.js
index e19711f..f02bac6 100644
--- a/src/components/themr.js
+++ b/src/components/themr.js
@@ -77,7 +77,7 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
 
     constructor(...args) {
       super(...args)
-      this.theme_ = this.calcTheme(this.props)
+      this.theme_ = this.calcTheme()
     }
 
     getWrappedInstance() {
@@ -89,8 +89,8 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
       return this.refs.wrappedInstance
     }
 
-    getNamespacedTheme(props) {
-      const { themeNamespace, theme } = props
+    getNamespacedTheme() {
+      const { themeNamespace, theme } = this.props
       if (!themeNamespace) return theme
       if (themeNamespace && !theme) throw new Error('Invalid themeNamespace use in react-css-themr. ' +
         'themeNamespace prop should be used only with theme prop.')
@@ -100,8 +100,9 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
         .reduce((result, key) => ({ ...result, [removeNamespace(key, themeNamespace)]:  theme[key] }), {})
     }
 
-    getThemeNotComposed(props) {
-      if (props.theme) return this.getNamespacedTheme(props)
+    getThemeNotComposed() {
+      const { theme } = this.props
+      if (theme) return this.getNamespacedTheme()
       if (config.localTheme) return config.localTheme
       return this.getContextTheme()
     }
@@ -112,34 +113,38 @@ export default (componentName, localTheme, options = {}) => (ThemedComponent) =>
         : {}
     }
 
-    getTheme(props) {
-      return props.composeTheme === COMPOSE_SOFTLY
+    getTheme() {
+      const { composeTheme } = this.props
+      return composeTheme === COMPOSE_SOFTLY
         ? {
           ...this.getContextTheme(),
           ...config.localTheme,
-          ...this.getNamespacedTheme(props)
+          ...this.getNamespacedTheme()
         }
         : themeable(
           themeable(this.getContextTheme(), config.localTheme),
-          this.getNamespacedTheme(props)
+          this.getNamespacedTheme()
         )
     }
 
-    calcTheme(props) {
-      const { composeTheme } = props
+    calcTheme() {
+      const { composeTheme } = this.props
       return composeTheme
-        ? this.getTheme(props)
-        : this.getThemeNotComposed(props)
+        ? this.getTheme()
+        : this.getThemeNotComposed()
     }
 
-    componentWillReceiveProps(nextProps) {
+    shouldComponentUpdate(prevProps) {
+      const { composeTheme, theme, themeNamespace } = this.props
       if (
-        nextProps.composeTheme !== this.props.composeTheme ||
-        nextProps.theme !== this.props.theme ||
-        nextProps.themeNamespace !== this.props.themeNamespace
+        composeTheme !== prevProps.composeTheme ||
+        theme !== prevProps.theme ||
+        themeNamespace !== prevProps.themeNamespace
       ) {
-        this.theme_ = this.calcTheme(nextProps)
+        this.theme_ = this.calcTheme()
+        return true
       }
+      return false
     }
 
     render() {