Migrate most popular components to PureComponents (#473)

* Migrate most popular components to PureComponents

* Revert BaseInput

Author: emilisb

src/components/avatar/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, ViewPropTypes, TouchableOpacity} from 'react-native';
 import {Colors, BorderRadiuses} from '../../style';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import Badge, {BADGE_SIZES} from '../badge';
 import View from '../view';
 import Text from '../text';
@@ -38,7 +38,7 @@ const DEFAULT_BADGE_POSITION = BADGE_POSITIONS.TOP_RIGHT;
  * @image: https://user-images.githubusercontent.com/33805983/34480603-197d7f64-efb6-11e7-9feb-db8ba756f055.png
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.js
  */
-export default class Avatar extends BaseComponent {
+export default class Avatar extends PureBaseComponent {
   constructor(props) {
     super(props);
 

src/components/badge/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, Text, ViewPropTypes} from 'react-native';
 import {View as AnimatableView} from 'react-native-animatable';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import {BorderRadiuses, Colors, ThemeManager, Typography} from '../../style';
 import View from '../view';
 import Image from '../image';
@@ -27,7 +27,7 @@ export const BADGE_SIZES = {
  * @image: https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.js
  */
-export default class Badge extends BaseComponent {
+export default class Badge extends PureBaseComponent {
   static displayName = 'Badge';
   static propTypes = {
     /**
@@ -109,7 +109,7 @@ export default class Badge extends BaseComponent {
     const {borderWidth, size, icon} = this.props;
     const label = this.getFormattedLabel();
     const badgeHeight = _.isNumber(size) ? size : BADGE_SIZES[size];
-    
+
     const style = {
       paddingHorizontal: this.isSmallBadge() ? 4 : 6,
       height: badgeHeight,

src/components/button/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import {Platform, StyleSheet, LayoutAnimation, Image} from 'react-native';
 import {Constants} from '../../helpers';
 import {Colors, Typography, ThemeManager, BorderRadiuses} from '../../style';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 import Text from '../text';
@@ -38,7 +38,7 @@ const DEFAULT_SIZE = 'large';
  * @gif: https://media.giphy.com/media/xULW8j5WzsuPytqklq/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ButtonsScreen.js
  */
-export default class Button extends BaseComponent {
+export default class Button extends PureBaseComponent {
   static displayName = 'Button';
   static propTypes = {
     ...Text.propTypes,
@@ -185,7 +185,7 @@ export default class Button extends BaseComponent {
       const size = height >= width ? height : width;
       this.setState({size});
     }
-    
+
     if (Constants.isAndroid && Platform.Version <= 17) {
       this.setState({borderRadius: height / 2});
     }
@@ -271,29 +271,29 @@ export default class Button extends BaseComponent {
     const outlineWidth = this.getThemeProps().outlineWidth || 1;
 
     const CONTAINER_STYLE_BY_SIZE = {};
-    CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round ? 
-    {height: this.state.size, width: this.state.size, padding: PADDINGS.XSMALL} : 
+    CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round ?
+    {height: this.state.size, width: this.state.size, padding: PADDINGS.XSMALL} :
     {
       paddingVertical: PADDINGS.XSMALL,
       paddingHorizontal: HORIZONTAL_PADDINGS.XSMALL,
       minWidth: MIN_WIDTH.XSMALL,
     };
     CONTAINER_STYLE_BY_SIZE[Button.sizes.small] = round ?
-    {height: this.state.size, width: this.state.size, padding: PADDINGS.SMALL} : 
+    {height: this.state.size, width: this.state.size, padding: PADDINGS.SMALL} :
     {
       paddingVertical: PADDINGS.SMALL,
       paddingHorizontal: HORIZONTAL_PADDINGS.SMALL,
       minWidth: MIN_WIDTH.SMALL,
     };
-    CONTAINER_STYLE_BY_SIZE[Button.sizes.medium] = round ? 
-    {height: this.state.size, width: this.state.size, padding: PADDINGS.MEDIUM} : 
+    CONTAINER_STYLE_BY_SIZE[Button.sizes.medium] = round ?
+    {height: this.state.size, width: this.state.size, padding: PADDINGS.MEDIUM} :
     {
       paddingVertical: PADDINGS.MEDIUM,
       paddingHorizontal: HORIZONTAL_PADDINGS.MEDIUM,
       minWidth: MIN_WIDTH.MEDIUM,
     };
-    CONTAINER_STYLE_BY_SIZE[Button.sizes.large] = round ? 
-    {height: this.state.size, width: this.state.size, padding: PADDINGS.LARGE} : 
+    CONTAINER_STYLE_BY_SIZE[Button.sizes.large] = round ?
+    {height: this.state.size, width: this.state.size, padding: PADDINGS.LARGE} :
     {
       paddingVertical: PADDINGS.LARGE,
       paddingHorizontal: HORIZONTAL_PADDINGS.LARGE,
@@ -333,7 +333,7 @@ export default class Button extends BaseComponent {
 
   getOutlineStyle() {
     const {outline, outlineColor, outlineWidth, link, disabled} = this.getThemeProps();
-    
+
     let outlineStyle;
     if ((outline || outlineColor) && !link) {
       outlineStyle = {
@@ -410,7 +410,7 @@ export default class Button extends BaseComponent {
 
   renderIcon() {
     const {iconSource} = this.props;
-    
+
     if (iconSource) {
       const iconStyle = this.getIconStyle();
       if (typeof iconSource === 'function') {
@@ -427,7 +427,7 @@ export default class Button extends BaseComponent {
     const typography = this.extractTypographyValue();
     const color = this.getLabelColor();
     const labelSizeStyle = this.getLabelSizeStyle();
-    
+
     if (label) {
       return (
         <Text

src/components/card/index.js

@@ -5,7 +5,7 @@ import {StyleSheet, ViewPropTypes, Animated} from 'react-native';
 import {BlurView} from '@react-native-community/blur';
 import {Constants} from '../../helpers';
 import {Colors, BorderRadiuses} from '../../style';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import View from '../view';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
@@ -32,7 +32,7 @@ const DEFAULT_SELECTION_PROPS = {
  * @gif: https://media.giphy.com/media/l0HU9SKWmv0VTOYMM/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.js
  */
-class Card extends BaseComponent {
+class Card extends PureBaseComponent {
   static displayName = 'Card';
 
   static propTypes = {

src/components/connectionStatusBar/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import {StyleSheet, Text, NetInfo} from 'react-native';
 import * as Constants from '../../helpers/Constants';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import {Colors, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
@@ -13,7 +13,7 @@ import View from '../view';
  * @image: https://user-images.githubusercontent.com/33805983/34683190-f3b1904c-f4a9-11e7-9d46-9a340bd35448.png, https://user-images.githubusercontent.com/33805983/34484206-edc6c6e4-efcb-11e7-88b2-cd394c19dd5e.png
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ConnectionStatusBarScreen.js
  */
-export default class ConnectionStatusBar extends BaseComponent {
+export default class ConnectionStatusBar extends PureBaseComponent {
   static displayName = 'ConnectionStatusBar';
   static propTypes = {
     /**

src/components/image/index.js

@@ -4,15 +4,15 @@ import React from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {Image as RNImage, StyleSheet} from 'react-native';
 import {Constants} from '../../helpers';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 import Assets from '../../assets';
 
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
  * @extendslink: https://facebook.github.io/react-native/docs/image.html
  */
-class Image extends BaseComponent {
+class Image extends PureBaseComponent {
   static displayName = 'Image';
 
   static propTypes = {

src/components/text/index.js

@@ -1,19 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Text as RNText, StyleSheet} from 'react-native';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 
 /**
  * @description: A wrapper for Text component with extra functionality like modifiers support
  * @extends: Text
  * @extendslink: https://facebook.github.io/react-native/docs/text.html
  * @modifiers: margins, color, typography
  */
-export default class Text extends BaseComponent {
+export default class Text extends PureBaseComponent {
   static displayName = 'Text';
   static propTypes = {
     ...RNText.propTypes,
-    ...BaseComponent.propTypes,
+    ...PureBaseComponent.propTypes,
     /**
      * color of the text
      */

src/components/touchableOpacity/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {TouchableOpacity as RNTouchableOpacity} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
-import {BaseComponent} from '../../commons';
+import {PureBaseComponent} from '../../commons';
 
 /**
  * @description: A wrapper for TouchableOpacity component. Support onPress, throttling and activeBackgroundColor
@@ -12,12 +12,12 @@ import {BaseComponent} from '../../commons';
  * @gif: https://media.giphy.com/media/xULW8AMIgw7l31zjm8/giphy.gif
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/src/components/touchableOpacity/index.js
  */
-export default class TouchableOpacity extends BaseComponent {
+export default class TouchableOpacity extends PureBaseComponent {
   static displayName = 'TouchableOpacity';
 
   static propTypes = {
     /**
-     * background color for TouchableOpacity 
+     * background color for TouchableOpacity
      */
     backgroundColor: PropTypes.string,
     /**