Browse Source

Migrate to react v16.3 lifecycle (#2991)

* Migrate to react v16.3 lifecycle & Add backward compatibility for older React versions

* remove yarn.lock
Nicolás Castellanos 6 years ago
parent
commit
83ab78701f
2 changed files with 12 additions and 8 deletions
  1. 11
    8
      lib/src/components/ComponentWrapper.tsx
  2. 1
    0
      package.json

+ 11
- 8
lib/src/components/ComponentWrapper.tsx View File

1
 import * as React from 'react';
1
 import * as React from 'react';
2
 import * as  _ from 'lodash';
2
 import * as  _ from 'lodash';
3
+import * as ReactLifecyclesCompat from 'react-lifecycles-compat';
3
 
4
 
4
 export class ComponentWrapper {
5
 export class ComponentWrapper {
5
 
6
 
7
 
8
 
8
     class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
9
     class WrappedComponent extends React.Component<any, { componentId: string; allProps: {}; }> {
9
 
10
 
11
+      static getDerivedStateFromProps(nextProps, prevState) {
12
+        return {
13
+          allProps: _.merge({}, nextProps, store.getPropsForId(prevState.componentId))
14
+        };
15
+      }
16
+
10
       private originalComponentRef;
17
       private originalComponentRef;
11
 
18
 
12
       constructor(props) {
19
       constructor(props) {
15
         this._saveComponentRef = this._saveComponentRef.bind(this);
22
         this._saveComponentRef = this._saveComponentRef.bind(this);
16
         this.state = {
23
         this.state = {
17
           componentId: props.componentId,
24
           componentId: props.componentId,
18
-          allProps: _.merge({}, props, store.getPropsForId(props.componentId))
25
+          allProps: {}
19
         };
26
         };
20
       }
27
       }
21
 
28
 
22
-      componentWillMount() {
29
+      componentDidMount() {
23
         store.setRefForId(this.state.componentId, this);
30
         store.setRefForId(this.state.componentId, this);
24
       }
31
       }
25
 
32
 
45
         }
52
         }
46
       }
53
       }
47
 
54
 
48
-      componentWillReceiveProps(nextProps) {
49
-        this.setState({
50
-          allProps: _.merge({}, nextProps, store.getPropsForId(this.state.componentId))
51
-        });
52
-      }
53
-
54
       render() {
55
       render() {
55
         return (
56
         return (
56
           <OriginalComponentClass
57
           <OriginalComponentClass
73
       }
74
       }
74
     }
75
     }
75
 
76
 
77
+    ReactLifecyclesCompat.polyfill(WrappedComponent);
78
+
76
     return WrappedComponent;
79
     return WrappedComponent;
77
   }
80
   }
78
 }
81
 }

+ 1
- 0
package.json View File

53
   "dependencies": {
53
   "dependencies": {
54
     "lodash": "4.x.x",
54
     "lodash": "4.x.x",
55
     "prop-types": "15.x.x",
55
     "prop-types": "15.x.x",
56
+    "react-lifecycles-compat": "2.0.0",
56
     "@types/react": "16.x.x",
57
     "@types/react": "16.x.x",
57
     "@types/react-native": "0.51.x",
58
     "@types/react-native": "0.51.x",
58
     "@types/lodash": "4.x.x",
59
     "@types/lodash": "4.x.x",