ThemeManager - Adding deprecation warning for 'setTheme()'. (#961)

* ThemeManager - Adding deprecation warning for 'setTheme()'.

* Removing setTheme() examples;
Removing ThemeManager theme colors usage;
Setting Colors.primary instead of ThemeManager.primaryColor;
Moving TouchableOpacity defaultProps from ThemeManager to the component.

* TouchableOpacity - replacing default props with default values

Author: Inbal-Tish

demo/src/demoApp.js

@@ -1,15 +1,10 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Navigation} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
-import {
-  AnimatableManager,
-  ThemeManager,
-  Constants,
-  Colors,
-  Typography
-} from 'react-native-ui-lib'; // eslint-disable-line
+import {AnimatableManager, Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
 
+
 /** Examples - uncomment when needed */
 // Typography.loadTypographies({
 //   h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
@@ -21,16 +16,6 @@ import {registerScreens} from './screens';
 //   gold: '#FFD700',
 // });
 
-// ThemeManager.setTheme({
-//   primaryColor: Colors.purple30,
-//   CTA: {
-//     backgroundColor: Colors.purple30,
-//     textColor: Colors.dark10,
-//   },
-//   titleColor: Colors.blue10,
-//   subtitleColor: Colors.blue40,
-// });
-
 // ThemeManager.setComponentTheme('Picker', (props) => {
 //   if (props.useNativePicker) {
 //     return {
@@ -77,7 +62,7 @@ function getDefaultNavigationStyle() {
     statusBar: {
       visible: true,
       style: 'light',
-      backgroundColor: ThemeManager.primaryColor // for Android
+      backgroundColor: Colors.primary // for Android
     },
     layout: {
       backgroundColor: Colors.white,
@@ -88,7 +73,7 @@ function getDefaultNavigationStyle() {
       noBorder: true, // for iOS
       elevation: 0, // for Android
       background: {
-        color: ThemeManager.primaryColor
+        color: Colors.primary
       },
       title: {
         color: Colors.white,

demo/src/screens/animationScreens/ListAnimationsScreen.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet, ScrollView, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, ThemeManager, Colors, View, Button, ListItem, Text} from 'react-native-ui-lib';//eslint-disable-line
+import {AnimatableManager, Colors, View, Button, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
 
 
 const listItems = [
@@ -31,7 +31,7 @@ export default class ListAnimationsScreen extends Component {
       entranceAnimation: true,
       addingAnimation: false,
       animation: animationType.ENTRANCE,
-      counter: 0,
+      counter: 0
     };
   }
 
@@ -53,12 +53,14 @@ export default class ListAnimationsScreen extends Component {
   addItem() {
     const {items, counter} = this.state;
     const itemsCopy = [...items];
+
     itemsCopy.splice(counter, 0, {id: `${itemsCopy.length}-new`, text: 'Item'});
     this.setState({items: itemsCopy, animation: animationType.ADDING});
   }
 
   renderItem(item, index) {
     const {animation, counter} = this.state;
+
     let animationProps;
     switch (animation) {
       case animationType.FADE_IN:
@@ -98,17 +100,17 @@ export default class ListAnimationsScreen extends Component {
         </View>
         <View row center>
           <Button outline size='medium' margin-10 label={`Add at index: ${counter}`} onPress={() => this.addItem()}/>
-          <Button 
-            round outline size='large' label='+' 
+          <Button
+            round outline size='large' label='+'
             onPress={() => this.setState({counter: counter < items.length ? counter + 1 : counter})}
           />
-          <Button 
-            round outline size='large' margin-10 label='-' 
+          <Button
+            round outline size='large' margin-10 label='-'
             onPress={() => this.setState({counter: counter !== 0 ? counter - 1 : 0})}
           />
         </View>
         <ScrollView style={{flex: 1}}>
-          {visible && 
+          {visible &&
           <FlatList
             data={items}
             renderItem={({item, index}) => this.renderItem(item, index)}
@@ -125,6 +127,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     backgroundColor: Colors.dark60,
     borderBottomWidth: 2,
-    borderColor: ThemeManager.dividerColor,
-  },
+    borderColor: Colors.dark70
+  }
 });

demo/src/screens/componentScreens/BasicListScreen.js

@@ -1,18 +1,18 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, ThemeManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
+import {AnimatableManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
 import orders from '../../data/orders';
 
 
 export default class BasicListScreen extends Component {
 
   constructor(props) {
     super(props);
-    
+
     this.state = {
       onEdit: false,
-      updating: false,
+      updating: false
     };
   }
 
@@ -69,10 +69,10 @@ const styles = StyleSheet.create({
     width: 54,
     height: 54,
     borderRadius: BorderRadiuses.br20,
-    marginHorizontal: 14,
+    marginHorizontal: 14
   },
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: ThemeManager.dividerColor,
-  },
+    borderColor: Colors.dark70
+  }
 });

demo/src/screens/componentScreens/ContactsListScreen.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {View as AnimatableView} from 'react-native-animatable';
-import {AnimatableManager, Colors, ThemeManager, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
+import {AnimatableManager, Colors, ListItem, Text, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
 import conversations from '../../data/conversations';
 
 
@@ -12,7 +12,7 @@ export default class ContactsListScreen extends Component {
 
     this.state = {
       onEdit: false,
-      updating: false,
+      updating: false
     };
   }
 
@@ -58,6 +58,6 @@ export default class ContactsListScreen extends Component {
 const styles = StyleSheet.create({
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: ThemeManager.dividerColor,
-  },
+    borderColor: Colors.dark70
+  }
 });

demo/src/screens/componentScreens/ConversationListScreen.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React, {Component, PureComponent} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
-import {ThemeManager, Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
 import conversations from '../../data/conversations';
 
 
@@ -174,7 +174,7 @@ class ContactItem extends PureComponent {
 const styles = StyleSheet.create({
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: ThemeManager.dividerColor,
+    borderColor: Colors.dark70,
     paddingRight: 17
   },
   avatar: {

src/components/badge/index.tsx

@@ -4,11 +4,12 @@ import {ImageSourcePropType, ImageStyle, StyleProp, StyleSheet, Text, TextStyle,
 import {View as AnimatableView} from 'react-native-animatable';
 import {extractAccessibilityProps, extractAnimationProps} from '../../commons/modifiers';
 import {asBaseComponent} from '../../commons/new';
-import {BorderRadiuses, Colors, ThemeManager, Typography} from '../../style';
-import Image from '../image';
+import {BorderRadiuses, Colors, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
+import Image from '../image';
 import View from '../view';
 
+
 const LABEL_FORMATTER_VALUES = [1, 2, 3, 4] as const;
 
 // TODO: depreciate enum badge sizes, use only number for size
@@ -276,7 +277,7 @@ function createStyles(props: BadgeProps) {
     badge: {
       alignSelf: 'flex-start',
       borderRadius: BorderRadiuses.br100,
-      backgroundColor: !props.icon ? ThemeManager.primaryColor : undefined,
+      backgroundColor: !props.icon ? Colors.primary : undefined,
       alignItems: 'center',
       justifyContent: 'center',
       overflow: 'hidden'

src/components/button/index.tsx

@@ -1,6 +1,6 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, TextStyle, StyleProp} from 'react-native';
-import _ from 'lodash';
 import {
   asBaseComponent,
   forwardRef,
@@ -13,7 +13,7 @@ import {
 } from '../../commons/new';
 //@ts-ignore
 import {Constants} from '../../helpers';
-import {Colors, Typography, ThemeManager, BorderRadiuses} from '../../style';
+import {Colors, Typography, BorderRadiuses} from '../../style';
 import {extractColorValue, extractTypographyValue} from '../../commons/modifiers';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import Text, {TextPropTypes} from '../text';
@@ -174,6 +174,7 @@ const MIN_WIDTH = {
   LARGE: 90
 };
 const DEFAULT_SIZE = ButtonSize.large;
+const DISABLED_COLOR = Colors.dark60;
 
 type Props = ButtonPropTypes & BaseComponentInjectedProps & ForwardRefInjectedProps;
 
@@ -231,6 +232,7 @@ class Button extends PureComponent<Props, ButtonState> {
   // This method will be called more than once in case of layout change!
   onLayout = (event: LayoutChangeEvent) => {
     const height = event.nativeEvent.layout.height;
+
     if (this.props.round) {
       const width = event.nativeEvent.layout.width;
       const size = height >= width ? height : width;
@@ -264,7 +266,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
     if (!outline && !link) {
       if (disabled) {
-        return disabledBackgroundColor || ThemeManager.CTADisabledColor;
+        return disabledBackgroundColor || DISABLED_COLOR;
       }
 
       return propsBackgroundColor || stateBackgroundColor || themeBackgroundColor || Colors.blue30;
@@ -274,6 +276,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
   getActiveBackgroundColor() {
     const {getActiveBackgroundColor} = this.props;
+
     if (getActiveBackgroundColor) {
       return getActiveBackgroundColor(this.getBackgroundColor(), this.props);
     }
@@ -292,7 +295,7 @@ class Button extends PureComponent<Props, ButtonState> {
     }
 
     if (disabled && (link || outline)) {
-      return ThemeManager.CTADisabledColor;
+      return DISABLED_COLOR;
     }
 
     color = propsColor || extractColorValue(this.props) || color;
@@ -397,6 +400,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
   getBorderRadiusStyle() {
     const {link, fullWidth, borderRadius: borderRadiusFromProps, modifiers} = this.props;
+
     if (link || fullWidth || borderRadiusFromProps === 0) {
       return {borderRadius: 0};
     }
@@ -409,6 +413,7 @@ class Button extends PureComponent<Props, ButtonState> {
   getShadowStyle() {
     const backgroundColor = this.getBackgroundColor();
     const {enableShadow} = this.props;
+
     if (enableShadow) {
       return [this.styles.shadowStyle, backgroundColor && {shadowColor: backgroundColor}];
     }
@@ -420,8 +425,8 @@ class Button extends PureComponent<Props, ButtonState> {
     const iconStyle: ImageStyle = {
       tintColor: this.getLabelColor()
     };
-
     const marginSide = [Button.sizes.large, Button.sizes.medium].includes(size) ? 8 : 4;
+
     if (!this.isIconButton) {
       if (iconOnRight) {
         iconStyle.marginLeft = marginSide;
@@ -460,6 +465,7 @@ class Button extends PureComponent<Props, ButtonState> {
 
     if (iconSource) {
       const iconStyle = this.getIconStyle();
+
       if (typeof iconSource === 'function') {
         return iconSource(iconStyle);
       } else {

src/components/image/__tests__/index.spec.js

@@ -19,20 +19,6 @@ describe('Image', () => {
       expect(uut.getImageSource()).toBe(2);
     });
 
-    // TODO: currently impossible to test it cause we can't export the Image we use in tests
-    // with asBaseComponent
-    // it('should return transformed source prop, according to sourceTransform in ThemeManager', () => {
-    //   ThemeManager.setTheme({
-    //     components: {
-    //       Image: {
-    //         sourceTransformer: jest.fn(() => 3)
-    //       }
-    //     }
-    //   });
-    //   const uut = new Image({source: 1});
-    //   expect(uut.getImageSource()).toBe(3);
-    // });
-
     it('should return transformed source prop, according to sourceTransform prop and other given props', () => {
       const sourceTransformer = jest.fn(({size, source}) => (size === 'small' ? source : 3));
       let uut = new Image({source: 1, size: 'small', sourceTransformer});

src/components/loaderScreen/index.js

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {StyleSheet, ActivityIndicator} from 'react-native';
-import {Colors, Typography, ThemeManager} from '../../style';
+import {Colors, Typography} from '../../style';
 import {Constants} from '../../helpers';
 import {BaseComponent} from '../../commons';
 import View from '../../components/view';
 import Text from '../../components/text';
 
+
 /**
  * @description: Component that shows a full screen with an activity indicator
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreenScreens/LoadingScreen.js
@@ -50,7 +51,7 @@ export default class LoaderScreen extends BaseComponent {
           <ActivityIndicator
             size={'large'}
             animating
-            color={loaderColor || (Constants.isIOS ? Colors.dark60 : ThemeManager.primaryColor)}
+            color={loaderColor || (Constants.isIOS ? Colors.dark60 : Colors.primary)}
             {...others}
           />
           {!overlay && message && <Text style={[styles.message, messageStyle]}>{message}</Text>}