Migrate Badge to TS (#937)

* Migrate Badge to TS

* Add extractAnimationProps to modifiers

* Adding extractAnimationProps to modifiers

* Update types post Badge TS migration

* Fix tests

* Use BadgeProps

Author: ArnonZ

demo/src/screens/componentScreens/BadgesScreen.js renamed to demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -33,7 +33,7 @@ export default class BadgesScreen extends Component {
         </Text>
         <View row center style={{alignItems: 'flex-start'}}>
           <View center paddingH-10>
-            <Badge label={this.state.value.toString()} backgroundColor={Colors.red30}/>
+            <Badge size={'default'} label={this.state.value.toString()} backgroundColor={Colors.red30}/>
             <Badge
               label={this.state.value.toString()}
               containerStyle={{marginTop: BadgesSpace}}
@@ -133,7 +133,7 @@ export default class BadgesScreen extends Component {
           <View style={styles.iconBadgeColumnContainer}>
             <Badge icon={star} borderRadius={6} iconStyle={{backgroundColor: Colors.red30}}/>
             <Text text80 style={{marginTop: 10}}>
-              border radius (6)
+              border radius
             </Text>
           </View>
         </View>

generatedTypes/commons/modifiers.d.ts

@@ -85,6 +85,7 @@ export declare function extractPositionStyle(props: Dictionary<any>): {
 } | undefined;
 export declare function extractFlexStyle(props: Dictionary<any>): Partial<Record<NativeFlexModifierKeyType, number>> | undefined;
 export declare function extractAccessibilityProps(props?: any): Partial<any>;
+export declare function extractAnimationProps(props?: any): Pick<any, "onAnimationEnd" | "animation" | "duration" | "delay" | "direction" | "easing" | "iterationCount" | "transition" | "onAnimationBegin" | "useNativeDriver">;
 export declare function extractBorderRadiusValue(props: Dictionary<any>): number | undefined;
 export declare function extractModifierProps(props: Dictionary<any>): _.Dictionary<any>;
 export declare function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]): Pick<Partial<Dictionary<any>>, number>;

generatedTypes/components/avatar/index.d.ts

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { ImageSourcePropType, StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle } from 'react-native';
+import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 export declare enum StatusModes {
     ONLINE = "ONLINE",
@@ -29,7 +30,7 @@ export declare type AvatarPropTypes = {
     /**
      * Badge props passed down to Badge component
      */
-    badgeProps?: object;
+    badgeProps?: BadgeProps;
     /**
      * Additional spacing styles for the container
      */
@@ -134,11 +135,8 @@ declare class Avatar extends PureComponent<AvatarPropTypes> {
     getStatusBadgeColor(status: StatusModes | undefined): string | null;
     getBadgeBorderWidth: () => any;
     getBadgeColor(): any;
-    getBadgeSize: () => any;
-    getBadgePosition(): {
-        [x: string]: string | number;
-        position: string;
-    };
+    getBadgeSize: () => number;
+    getBadgePosition: () => object;
     renderBadge(): JSX.Element | undefined;
     renderRibbon(): JSX.Element | undefined;
     renderImage(): JSX.Element | undefined;

generatedTypes/components/badge/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleProp, ViewStyle, ViewProps, TouchableOpacityProps, ImageStyle, ImageProps, TextStyle, ImageSourcePropType } from 'react-native';
-import { BadgeProps } from 'typings';
 import { AvatarPropTypes } from '../avatar';
+import { BadgeProps } from '../badge';
 export declare type ChipPropTypes = ViewProps & TouchableOpacityProps & {
     /**
      * Chip's size. Number or a width and height object.

generatedTypes/components/chip/index.d.ts

@@ -94,7 +94,7 @@ declare const _default: React.ComponentClass<BaseComponentInjectedProps & {
     /**
      * Badge component props to display next the item label
      */
-    badge?: any;
+    badge?: BadgeProps | undefined;
     /**
      * maximum number of lines the label can break
      */

generatedTypes/components/tabBar/TabBarItem.d.ts

@@ -89,7 +89,7 @@ declare const _default: React.ComponentClass<BaseComponentInjectedProps & ViewPr
         iconSelectedColor?: string | undefined;
         label?: string | undefined;
         labelStyle?: import("react-native").TextStyle | undefined;
-        badge?: any;
+        badge?: import("../badge").BadgeProps | undefined;
         maxLines?: number | undefined;
         selectedLabelStyle: import("react-native").TextStyle;
         selected?: boolean | undefined;

generatedTypes/components/tabBar/index.d.ts

@@ -260,6 +260,22 @@ export function extractAccessibilityProps(props: any = this.props) {
   });
 }
 
+//@ts-ignore
+export function extractAnimationProps(props: any = this.props) {
+  return _.pick(props, [
+    'animation',
+    'duration',
+    'delay',
+    'direction',
+    'easing',
+    'iterationCount',
+    'transition',
+    'onAnimationBegin',
+    'onAnimationEnd',
+    'useNativeDriver'
+  ]);
+}
+
 export function extractBorderRadiusValue(props: Dictionary<any>) {
   let borderRadius;
 
@@ -367,7 +383,7 @@ export function generateModifiersStyle(options = {
   return style;
   // clean empty objects and undefined
   // (!) This change is currently breaking UI layout for some reason - worth investigating
-  // return _.omitBy(style, value => _.isUndefined(value) || (_.isPlainObject(value) && _.isEmpty(value))); 
+  // return _.omitBy(style, value => _.isUndefined(value) || (_.isPlainObject(value) && _.isEmpty(value)));
 }
 
 export function getAlteredModifiersOptions(currentProps: any, nextProps: any) {

src/commons/modifiers.ts

@@ -5,7 +5,7 @@ import {Colors} from '../../style';
 import {forwardRef, asBaseComponent} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 //@ts-ignore
-import Badge, {BADGE_SIZES} from '../badge';
+import Badge, {BadgeProps, BADGE_SIZES} from '../badge';
 import View from '../view';
 import Text from '../text';
 import Image, {ImageProps} from '../image';
@@ -50,7 +50,7 @@ export type AvatarPropTypes = {
   /**
    * Badge props passed down to Badge component
    */
-  badgeProps?: object;
+  badgeProps?: BadgeProps;
   /**
    * Additional spacing styles for the container
    */
@@ -222,16 +222,16 @@ class Avatar extends PureComponent<AvatarPropTypes> {
     return _.get(this.props, 'badgeProps.backgroundColor') || statusColor || onlineColor;
   }
 
-  getBadgeSize = () => {
-    const badgeSize = _.get(this.props, 'badgeProps.size', DEFAULT_BADGE_SIZE);
+  getBadgeSize = (): number => {
+    const badgeSize: BadgeProps['size'] = _.get(this.props, 'badgeProps.size', DEFAULT_BADGE_SIZE);
 
     if (_.isString(badgeSize)) {
       return BADGE_SIZES[badgeSize] || BADGE_SIZES[DEFAULT_BADGE_SIZE];
     }
     return badgeSize;
   }
 
-  getBadgePosition() {
+  getBadgePosition = (): object => {
     const {size, badgePosition} = this.props;
     const radius = size / 2;
     const x = Math.sqrt(radius ** 2 * 2);

src/components/avatar/index.tsx

@@ -1,4 +1,4 @@
-import Badge from '../index';
+import {Badge} from '../index';
 
 describe('Badge Label', () => {
   it('Should return the label sent (unformatted)', () => {