rename react unsafe lifecycle methods (wix#409)

* rename react unsafe lifecycle methods

* disable camelcase lint for now

Author: ethanshar

.eslintrc.js

@@ -4,17 +4,19 @@
 // const deprecationsJson = require('./eslint-rules/tests/component_deprecation.json');
 
 module.exports = {
-  'parser': 'babel-eslint',
-  'plugins': ['react-native', 'uilib'],
-  'extends': ['airbnb'],
-  'rules': {
+  parser: 'babel-eslint',
+  plugins: ['react-native', 'uilib'],
+  extends: ['airbnb'],
+  rules: {
     'arrow-body-style': 'off',
     'arrow-parens': 'off',
+    // TODO: remove after migration of legacy lifecycle methods
+    'camelcase': 'off',
     'class-methods-use-this': 'off',
     'consistent-return': 'off',
-    'comma-dangle': "off",
+    'comma-dangle': 'off',
     'global-require': 'off',
-    'max-len': [2, 130, 4, {'ignoreUrls': true}],
+    'max-len': [2, 130, 4, {ignoreUrls: true}],
     'no-nested-ternary': 'off',
     'no-else-return': 'off',
     'no-mixed-operators': ['off'],
@@ -33,31 +35,37 @@ module.exports = {
     'react/jsx-tag-spacing': 'off',
     // 'react/no-did-mount-set-state': 'warn',
     'react/prefer-stateless-function': 'off',
-    "react/prop-types": ['error', { ignore: ['children', 'style', 'testID'] }],
+    'react/prop-types': ['error', {ignore: ['children', 'style', 'testID']}],
     'react/require-default-props': 'off',
-    'react/jsx-no-bind': ['warn', {
-      ignoreRefs: true,
-      allowArrowFunctions: false,
-      allowBind: false,
-    }],
-    'import/no-extraneous-dependencies': ['warn', {'devDependencies': true, 'optionalDependencies': false, 'peerDependencies': true}],
+    'react/jsx-no-bind': [
+      'warn',
+      {
+        ignoreRefs: true,
+        allowArrowFunctions: false,
+        allowBind: false,
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      'warn',
+      {devDependencies: true, optionalDependencies: false, peerDependencies: true},
+    ],
     'import/prefer-default-export': 'off',
     // 'uilib/assets-deprecation': ['error', {deprecations: assetsDepJson, source: '../../assets', dueDate: '2 November, Friday'}],
     // 'uilib/component-deprecation': ['error', {deprecations: deprecationsJson, dueDate: 'Friday 21 December'}],
     // 'uilib/no-direct-import': ['error', {origin: 'react-native-ui-lib', destination: 'some-other-source'}],
     // 'uilib/no-hard-coded-color': ['error', validColors, extraFixColorsMap],
     // 'uilib/no-hard-coded-font': 'error'
   },
-  'env': {
-    'browser': true,
-    'node': true,
-    'jest': true
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
   },
-  'settings': {
+  settings: {
     'import/resolver': {
-      'node': {
-        'extensions': ['.js', '.ios.js', '.android.js']
-      }
-    }
-  }
-}
+      node: {
+        extensions: ['.js', '.ios.js', '.android.js'],
+      },
+    },
+  },
+};

src/commons/SelectableComponent.js

@@ -56,7 +56,7 @@ export default class SelectableComponent extends BaseComponent {
     this.onSelect = this.onSelect.bind(this);
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.selected !== this.state.selected) {
       this.setState({
         selected: newProps.selected,

src/commons/asBaseComponent.js

@@ -9,7 +9,7 @@ function asBaseComponent(WrappedComponent) {
   class BaseComponent extends UIComponent {
     state = Modifiers.generateModifiersStyle(undefined, this.props);
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       const options = Modifiers.getAlteredModifiersOptions(this.props, nextProps);
       if (!_.isEmpty(options)) {
         this.setState(Modifiers.generateModifiersStyle(undefined, nextProps));

src/commons/baseComponent.js

@@ -28,7 +28,7 @@ export default function baseComponent(usePure) {
       };
     }
 
-    componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps) {
       this.updateModifiers(this.props, nextProps);
     }
 

src/components/actionSheet/index.js

@@ -74,7 +74,7 @@ export default class ActionSheet extends BaseComponent {
     showCancelButton: false,
   };
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {useNativeIOS} = this.getThemeProps();
     const wasVisible = this.props.visible;
     const willBeVisible = nextProps.visible;

src/components/animatedScanner/index.js

@@ -75,7 +75,7 @@ export default class AnimatedScanner extends BaseComponent {
     this.styles = createStyles(this.props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {progress} = this.props;
     if (nextProps.progress !== progress) {
       this.animate(nextProps.progress, nextProps.duration);

src/components/featureHighlight/index.js

@@ -132,7 +132,7 @@ class FeatureHighlight extends BaseComponent {
     this.setTargetPosition();
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     this.setTargetPosition(nextProps);
   }
 

src/components/inputs/TextField.js

@@ -150,7 +150,7 @@ export default class TextField extends BaseInput {
     this.generatePropsWarnings(props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({value: nextProps.value}, this.updateFloatingPlaceholderState);
     }

src/components/inputs/TextInput.js

@@ -144,7 +144,7 @@ export default class TextInput extends BaseInput {
     this.generatePropsWarnings(props);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.value !== this.props.value) {
       this.setState({value: nextProps.value}, this.updateFloatingPlaceholderState);
     }

src/components/picker/index.js

@@ -143,7 +143,7 @@ class Picker extends BaseComponent {
     }
   }
 
-  componentWillReceiveProps(nexProps) {
+  UNSAFE_componentWillReceiveProps(nexProps) {
     this.setState({
       value: nexProps.value,
     });

src/components/radioButton/RadioGroup.js

@@ -31,7 +31,7 @@ class RadioGroup extends BaseComponent {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.value !== nextProps.value) {
       this.setState({value: nextProps.value});
     }

src/components/switch/index.js

@@ -72,7 +72,7 @@ class Switch extends BaseComponent {
     this.styles = createStyles(this.getThemeProps());
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (this.props.value !== nextProps.value) {
       this.toggle(nextProps.value);
     }

src/components/tabBar/TabBarItem.js

@@ -81,7 +81,7 @@ export default class TabBarItem extends BaseComponent {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (!_.isEqual(nextProps.label, this.props.label) && !_.isEqual(nextProps.width, this.props.width)) {
       /** dynamic item's label */
       this.setState({fontStyle: this.getFontStyle(this.getThemeProps())});

src/components/tabBar/index.js

@@ -124,7 +124,7 @@ export default class TabBar extends BaseComponent {
     this.labels = this.getLabels(this.props.children);
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (React.Children.count(nextProps.children) !== this.childrenCount) {
       /** dynamic children count */
       this.initializeValues(nextProps);

src/components/tagsInput/index.js

@@ -118,7 +118,7 @@ export default class TagsInput extends BaseComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.tags !== this.state.tags) {
       this.setState({
         tags: nextProps.tags,

src/components/toast/index.js

@@ -129,7 +129,7 @@ export default class Toast extends BaseComponent {
     }
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     const {visible, animated} = nextProps;
     const {isVisible} = this.state;
     if (visible !== isVisible) {

src/interactableComponents/drawer/index.js

@@ -92,7 +92,7 @@ export default class Drawer extends BaseComponent {
     };
   }
 
-  componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps) {
     if (JSON.stringify(this.props.leftItem) !== JSON.stringify(nextProps.leftItem) || 
     JSON.stringify(this.props.rightItems) !== JSON.stringify(nextProps.rightItems)) {
       this.closeDrawer();