Merge branch 'master' into release

ethanshar · ethanshar · commit e20634722c0e · 2019-07-23T11:07:40.000+03:00
diff --git a/demo/src/screens/MainScreen.js b/demo/src/screens/MainScreen.js
@@ -307,7 +307,7 @@ export default class UiLibExplorerMenu extends Component {
     const data = this.getMenuData();
 
     return (
-      <View flex bg-dark80>
+      <View testID="demo_main_screen" flex bg-dark80>
         {this.renderHeader()}
         {showNoResults && (
           <View paddingH-24>
diff --git a/eslint-rules/index.js b/eslint-rules/index.js
@@ -1,8 +1,13 @@
 module.exports = {
   rules: {
     'no-hard-coded-color': require('./lib/rules/no-hard-coded-color'),
-    'component-deprecation': require('./lib/rules/component-deprecation'),
     'no-direct-import': require('./lib/rules/no-direct-import'),
+    'component-deprecation': require('./lib/rules/component-deprecation'),
     'assets-deprecation': require('./lib/rules/assets-deprecation'),
+    // for duplicate rules usage
+    'component-deprecation_warn': require('./lib/rules/component-deprecation'),
+    'assets-deprecation_warn': require('./lib/rules/assets-deprecation'),
+    'component-deprecation_error': require('./lib/rules/component-deprecation'),
+    'assets-deprecation_error': require('./lib/rules/assets-deprecation'),
   },
 };
diff --git a/eslint-rules/package.json b/eslint-rules/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-uilib",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "uilib set of eslint rules",
   "keywords": [
     "eslint",
@@ -16,7 +16,7 @@
     "type": "git",
     "url": "https://github.com/wix/react-native-ui-lib"
   },
-  "main": "lib/index.js",
+  "main": "index.js",
   "scripts": {
     "test": "mocha tests --recursive",
     "test:watch": "mocha tests --recursive --watch"
diff --git a/src/components/avatar/index.js b/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);
 
diff --git a/src/components/badge/index.js b/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,
diff --git a/src/components/button/index.js b/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
diff --git a/src/components/card/index.js b/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 = {
diff --git a/src/components/connectionStatusBar/index.js b/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 = {
     /**
diff --git a/src/components/hint/index.js b/src/components/hint/index.js
@@ -124,7 +124,7 @@ class Hint extends BaseComponent {
   };
 
   onTargetLayout = ({nativeEvent: {layout}}) => {
-    if (!this.state.targetLayout) {
+    if (!_.isEqual(this.state.targetLayout, layout)) {
       this.setState({
         targetLayout: layout,
       });
diff --git a/src/components/image/index.js b/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 = {
diff --git a/src/components/text/index.js b/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
      */
diff --git a/src/components/touchableOpacity/index.js b/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,
     /**
diff --git a/src/helpers/Constants.js b/src/helpers/Constants.js
@@ -1,30 +1,77 @@
+import _ from 'lodash';
 import {Platform, Dimensions, NativeModules, I18nManager} from 'react-native';
 
-const {StatusBarManager} = NativeModules;
-const {height, width} = Dimensions.get('window');
 
+const dimensionsScope = {
+  WINDOW: 'window',
+  SCREEN: 'screen'
+}
+const orientations = {
+  PORTRAIT: 'portrait',
+  LANDSCAPE: 'landscape'
+}
+
+/* Platform */
 export const isAndroid = Platform.OS === 'android';
 export const isIOS = Platform.OS === 'ios';
-export const screenWidth = width;
-export const screenHeight = height;
-// export const isSmallScreen = isIOS ? screenWidth <= 320 : screenWidth <= 360;
-export const isSmallScreen = screenWidth <= 340;
-export const isShortScreen = screenHeight <= 600;
-export let statusBarHeight = isIOS ? 20 : StatusBarManager.HEIGHT; // eslint-disable-line
-export const isIphoneX = isIOS && !Platform.isPad && !Platform.isTVOS && (screenHeight >= 812 || screenWidth >= 812);
-export const isRTL = I18nManager.isRTL;
 
 export function getAndroidVersion() {
   return isAndroid ? parseInt(Platform.Version, 10) : undefined;
 }
 
-export function getSafeAreaInsets(mode) {
-  return (mode === 'landscape') ? 
+/* Navigation */
+const {StatusBarManager} = NativeModules;
+export let statusBarHeight = setStatusBarHeight();
+
+function setStatusBarHeight() {
+  statusBarHeight = isIOS ? 20 : StatusBarManager.HEIGHT; // eslint-disable-line
+  if (isIOS) {
+    // override guesstimate height with the actual height from StatusBarManager
+    StatusBarManager.getHeight(data => (statusBarHeight = data.height));
+  }
+}
+
+/* Layout */
+export const isRTL = I18nManager.isRTL;
+
+const {height, width} = Dimensions.get(dimensionsScope.WINDOW);
+export let orientation = getOrientation(height, width);
+export let screenWidth = width;
+export let screenHeight = height;
+export let isSmallScreen = screenWidth <= 340;
+export let isShortScreen = screenHeight <= 600;
+
+export function getSafeAreaInsets() {
+  return (orientation === orientation.LANDSCAPE) ? 
     {left: 44, right: 44, bottom: 24, top: 0} : 
     {left: 0, right: 0, bottom: 34, top: 44};
 }
 
-// override guesstimate height with the actual height from StatusBarManager
-if (isIOS) {
-  StatusBarManager.getHeight(data => (statusBarHeight = data.height));
+/* Devices */
+export const isIphoneX = isIOS && !Platform.isPad && !Platform.isTVOS && (screenHeight >= 812 || screenWidth >= 812);
+
+/* Orientation */
+function getOrientation(height, width) {
+  return width < height ? orientations.PORTRAIT : orientations.LANDSCAPE;
+}
+
+function updateConstants() {
+  const {height, width} = Dimensions.get(dimensionsScope.WINDOW);
+  orientation = getOrientation(height, width);
+  screenWidth = width;
+  screenHeight = height;
+  isSmallScreen = screenWidth <= 340;
+  isShortScreen = screenHeight <= 600;
+
+  setStatusBarHeight();
+}
+
+Dimensions.addEventListener('change', updateConstants);
+
+export function addDimensionsEventListener(callback) {
+  Dimensions.addEventListener('change', callback);
+}
+
+export function removeDimensionsEventListener(callback) {
+  Dimensions.removeEventListener('change', callback);
 }
diff --git a/src/interactableComponents/drawer/Swipeable.js b/src/interactableComponents/drawer/Swipeable.js
diff --git a/src/interactableComponents/drawer/newDrawer.js b/src/interactableComponents/drawer/newDrawer.js
diff --git a/src/style/spacings.js b/src/style/spacings.js
diff --git a/src/style/typography.js b/src/style/typography.js
