Avatar and Badge - props deprecation

demo/src/screens/componentScreens/AvatarsScreen.tsx

@@ -1,12 +1,11 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {ScrollView, View, Text, StyleSheet, Alert} from 'react-native';
-import _ from 'lodash';
 import {Avatar, AvatarHelper, Colors, Typography} from 'react-native-ui-lib'; //eslint-disable-line
 
-const star = require('../../assets/icons/star.png');
 
+const star = require('../../assets/icons/star.png');
 const onlineColor = Colors.green30;
-
 const examples = [
   {title: 'Custom Background', backgroundColor: Colors.violet60},
   {title: 'Empty Avatar with ribbon', ribbonLabel: 'New'},
@@ -25,7 +24,7 @@ const examples = [
       uri:
         'https://lh3.googleusercontent.com/-cw77lUnOvmI/AAAAAAAAAAI/AAAAAAAAAAA/WMNck32dKbc/s181-c/104220521160525129167.jpg'
     },
-    badgeProps: {size: 'pimpleBig', backgroundColor: Colors.yellow30},
+    badgeProps: {size: 10, backgroundColor: Colors.yellow30},
     badgePosition: 'BOTTOM_RIGHT'
   },
 
@@ -36,7 +35,7 @@ const examples = [
       uri:
         'https://lh3.googleusercontent.com/-CMM0GmT5tiI/AAAAAAAAAAI/AAAAAAAAAAA/-o9gKbC6FVo/s181-c/111308920004613908895.jpg'
     },
-    badgeProps: {size: 'pimpleBig', backgroundColor: Colors.dark50},
+    badgeProps: {size: 10, backgroundColor: Colors.dark50},
     badgePosition: 'BOTTOM_LEFT'
   },
   {
@@ -53,7 +52,7 @@ const examples = [
     source: {
       uri: 'https://randomuser.me/api/portraits/women/24.jpg'
     },
-    badgeProps: {size: 'pimpleHuge', borderWidth: 0, backgroundColor: onlineColor},
+    badgeProps: {size: 14, borderWidth: 0, backgroundColor: onlineColor},
     badgePosition: 'TOP_LEFT'
   },
   {
@@ -64,7 +63,7 @@ const examples = [
     },
     badgeProps: {
       icon: star,
-      size: 'pimpleHuge',
+      size: 14,
       borderWidth: 1.5,
       borderColor: Colors.white,
       iconStyle: {backgroundColor: Colors.yellow20}
@@ -106,19 +105,16 @@ const examples = [
     badgePosition: 'BOTTOM_RIGHT',
     badgeProps: {
       label: '+2',
-      size: 'large',
+      size: 24,
       borderWidth: 1.5,
-      borderColor: Colors.white,
+      borderColor: Colors.white
     }
   }
 ];
 
 export default class AvatarsScreen extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  onAvatarPress = (item) => {
+
+  onAvatarPress = (item: any) => {
     const {title, source, label} = item;
     const uri = _.get(source, 'uri');
     const isGravatar = !!uri && AvatarHelper.isGravatarUrl(uri);

demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -1,6 +1,8 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
+
+
 const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
@@ -45,15 +47,15 @@ export default class BadgesScreen extends Component {
         </Text>
         <View row center style={{alignItems: 'flex-start'}}>
           <View center paddingH-10>
-            <Badge size={'default'} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
+            <Badge size={20} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
             <Badge
               label={this.state.value.toString()}
               containerStyle={{marginTop: BadgesSpace}}
               backgroundColor={Colors.red30}
               borderWidth={1}
             />
             <Badge
-              size="small"
+              size={16}
               label={this.state.value.toString()}
               containerStyle={{marginTop: BadgesSpace}}
               backgroundColor={Colors.red30}
@@ -69,7 +71,7 @@ export default class BadgesScreen extends Component {
               borderWidth={2}
               borderColor={Colors.white}
             />
-            <Badge labelFormatterLimit={1} size="small" label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
+            <Badge labelFormatterLimit={1} size={16} label={'99999999'} containerStyle={{marginTop: BadgesSpace}}/>
           </View>
         </View>
 
@@ -102,26 +104,26 @@ export default class BadgesScreen extends Component {
             style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
           >
             <Text text80 row>
-              size={'{\'pimpleSmall\'}'}
+              size={'{6}'}
             </Text>
-            <Text text80>size={'{\'pimpleBig\'}'}</Text>
+            <Text text80>size={'{10}'}</Text>
             <Text text80 row>
-              size={'{\'pimpleHuge\'}'}
+              size={'{14}'}
             </Text>
           </View>
 
           <View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
-            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={6}/>
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
+            <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>
           </View>
         </View>
         <Text text50 marginB-10 row center marginT-25>
           Icon Badges
         </Text>
         <View row paddingH-15>
           <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={'small'} icon={star} borderWidth={1} borderColor={Colors.red30}/>
+            <Badge size={16} icon={star} borderWidth={1} borderColor={Colors.red30}/>
             <Text text80 style={{marginTop: 10}}>
               small(16)
             </Text>
@@ -135,7 +137,7 @@ export default class BadgesScreen extends Component {
           </View>
 
           <View style={styles.iconBadgeColumnContainer}>
-            <Badge size={'large'} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
+            <Badge size={24} icon={star} iconStyle={{backgroundColor: Colors.red30}}/>
             <Text text80 style={{marginTop: 10}}>
               large(24)
             </Text>

demo/src/screens/componentScreens/DrawerScreen.tsx

@@ -192,7 +192,7 @@ class DrawerScreen extends Component {
         style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
         testID="drawer_item"
       >
-        {this.state.unread && <Badge testID="drawer_item_badge" size={'pimpleSmall'} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
+        {this.state.unread && <Badge testID="drawer_item_badge" size={6} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
         <Avatar source={{uri: data.thumbnail}}/>
         <View marginL-20>
           <Text text70R={!this.state.unread} text70BO={this.state.unread}>{data.name}</Text>

demo/src/screens/componentScreens/TabBarScreen.tsx

@@ -167,7 +167,7 @@ export default class TabBarScreen extends Component {
 
           <TabBar style={styles.tabbar} selectedIndex={0} ref={r => (this.tabbar = r)} enableShadow>
             <TabBar.Item label="Scroll"/>
-            <TabBar.Item label="View" badgeProps={{size: 'pimpleSmall'}}/>
+            <TabBar.Item label="View" badgeProps={{size: 6}}/>
             <TabBar.Item label="tab"/>
             <TabBar.Item label="bar"/>
             <TabBar.Item label="Container"/>

generatedTypes/src/components/avatar/index.d.ts

@@ -2,12 +2,6 @@ import React, { PureComponent } from 'react';
 import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
-export declare enum StatusModes {
-    ONLINE = "ONLINE",
-    OFFLINE = "OFFLINE",
-    AWAY = "AWAY",
-    NONE = "NONE"
-}
 export declare enum BadgePosition {
     TOP_RIGHT = "TOP_RIGHT",
     TOP_LEFT = "TOP_LEFT",
@@ -116,14 +110,6 @@ export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'>
      * Custom ribbon
      */
     customRibbon?: JSX.Element;
-    /**
-     * Determine if to show online badge
-     */
-    isOnline?: boolean;
-    /**
-     * AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
-     */
-    status?: StatusModes;
     /**
      * Custom size for the Avatar
      */
@@ -144,21 +130,19 @@ export declare type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'>
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/AvatarsScreen.tsx
  */
 declare class Avatar extends PureComponent<AvatarProps> {
+    static displayName: string;
     styles: ReturnType<typeof createStyles>;
     constructor(props: AvatarProps);
-    static displayName: string;
-    static modes: typeof StatusModes;
-    static badgePosition: typeof BadgePosition;
     static defaultProps: {
         animate: boolean;
         size: number;
         labelColor: string;
         badgePosition: BadgePosition;
     };
+    static badgePosition: typeof BadgePosition;
     getContainerStyle(): StyleProp<ViewStyle>;
     getInitialsContainer(): StyleProp<ViewStyle>;
     getRibbonStyle(): StyleProp<ViewStyle>;
-    getStatusBadgeColor(status: StatusModes | undefined): string | null;
     getBadgeBorderWidth: () => any;
     getBadgeColor(): any;
     getBadgeSize: () => number;
@@ -279,14 +263,6 @@ declare const _default: React.ComponentClass<Pick<AccessibilityProps, "accessibi
      * Custom ribbon
      */
     customRibbon?: JSX.Element | undefined;
-    /**
-     * Determine if to show online badge
-     */
-    isOnline?: boolean | undefined;
-    /**
-     * AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop)
-     */
-    status?: StatusModes | undefined;
     /**
      * Custom size for the Avatar
      */

generatedTypes/src/components/badge/index.d.ts

@@ -1,16 +1,7 @@
 import React, { PureComponent } from 'react';
 import { ImageSourcePropType, ImageStyle, StyleProp, TextStyle, TouchableOpacityProps, ViewStyle, ViewProps } from 'react-native';
 declare const LABEL_FORMATTER_VALUES: readonly [1, 2, 3, 4];
-export declare enum BADGE_SIZES {
-    pimpleSmall = 6,
-    pimpleBig = 10,
-    pimpleHuge = 14,
-    small = 16,
-    default = 20,
-    large = 24
-}
 declare type LabelFormatterValues = typeof LABEL_FORMATTER_VALUES[number];
-export declare type BadgeSizes = keyof typeof BADGE_SIZES;
 export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
     /**
      * Text to show inside the badge.
@@ -24,7 +15,7 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
     /**
      * the badge size (default, small)
      */
-    size?: BadgeSizes | number;
+    size?: number;
     /**
      * Press handler
      */
@@ -76,28 +67,23 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
      * Custom element to render instead of an icon
      */
     customElement?: JSX.Element;
-    /**
-     * Use to identify the badge in tests
-     */
-    testId?: string;
 };
 /**
  * @description: Round colored badge, typically used to show a number
- * @extends: Animatable.View
- * @extendsLink: https://github.com/oblador/react-native-animatable
+ * @extends: View
  * @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.tsx
  */
 declare class Badge extends PureComponent<BadgeProps> {
-    styles: ReturnType<typeof createStyles>;
     static displayName: string;
+    styles: ReturnType<typeof createStyles>;
     constructor(props: BadgeProps);
-    get size(): number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
     getAccessibilityProps(): {
         accessible: boolean;
         accessibilityRole: string;
         accessibilityLabel: string;
     };
+    get size(): number;
     isSmallBadge(): boolean;
     getBadgeSizeStyle(): any;
     getFormattedLabel(): any;
@@ -355,9 +341,9 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      */
     backgroundColor?: string | undefined;
     /**
-     * the badge size (default, small)
+     * the badge size
      */
-    size?: number | "default" | "small" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large" | undefined;
+    size?: number | undefined;
     /**
      * Press handler
      */
@@ -409,10 +395,6 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      * Custom element to render instead of an icon
      */
     customElement?: JSX.Element | undefined;
-    /**
-     * Use to identify the badge in tests
-     */
-    testId?: string | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any> & typeof Badge;