Fix Badge's size default prop (#1212)

* Fix Badge's size default prop

* Fix tests

Author: ethanshar

generatedTypes/components/badge/index.d.ts

@@ -24,7 +24,7 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
     /**
      * the badge size (default, small)
      */
-    size: BadgeSizes | number;
+    size?: BadgeSizes | number;
     /**
      * Press handler
      */
@@ -91,10 +91,8 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
 declare class Badge extends PureComponent<BadgeProps> {
     styles: ReturnType<typeof createStyles>;
     static displayName: string;
-    static defaultProps: {
-        size: string;
-    };
     constructor(props: BadgeProps);
+    get size(): number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
     getAccessibilityProps(): {
         accessible: boolean;
         accessibilityRole: string;
@@ -359,7 +357,7 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
     /**
      * the badge size (default, small)
      */
-    size: number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large";
+    size?: number | "small" | "default" | "pimpleSmall" | "pimpleBig" | "pimpleHuge" | "large" | undefined;
     /**
      * Press handler
      */

src/components/avatar/index.tsx

@@ -232,8 +232,8 @@ class Avatar extends PureComponent<AvatarProps> {
     return _.get(this.props, 'badgeProps.backgroundColor') || statusColor || onlineColor;
   }
 
-  getBadgeSize = (): number => {
-    const badgeSize: BadgeProps['size'] = _.get(this.props, 'badgeProps.size', DEFAULT_BADGE_SIZE);
+  getBadgeSize = () => {
+    const badgeSize = this.props?.badgeProps?.size ?? DEFAULT_BADGE_SIZE;
 
     if (_.isString(badgeSize)) {
       return BADGE_SIZES[badgeSize] || BADGE_SIZES[DEFAULT_BADGE_SIZE];

src/components/badge/index.tsx

@@ -48,7 +48,7 @@ export type BadgeProps = ViewProps &
     /**
      * the badge size (default, small)
      */
-    size: BadgeSizes | number;
+    size?: BadgeSizes | number;
     /**
      * Press handler
      */
@@ -117,9 +117,6 @@ class Badge extends PureComponent<BadgeProps> {
   styles: ReturnType<typeof createStyles>;
 
   static displayName = 'Badge';
-  static defaultProps = {
-    size: 'default'
-  };
 
   constructor(props: BadgeProps) {
     super(props);
@@ -130,6 +127,10 @@ class Badge extends PureComponent<BadgeProps> {
     }
   }
 
+  get size() {
+    return this.props.size || 'default';
+  }
+
   getAccessibilityProps() {
     const {onPress, icon, label} = this.props;
 
@@ -142,14 +143,13 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   isSmallBadge() {
-    const {size} = this.props;
-    return size === 'small';
+    return this.size === 'small';
   }
 
   getBadgeSizeStyle() {
-    const {borderWidth, size, icon, customElement} = this.props;
+    const {borderWidth, icon, customElement} = this.props;
     const label = this.getFormattedLabel();
-    const badgeHeight = _.isNumber(size) ? size : BADGE_SIZES[size];
+    const badgeHeight = _.isNumber(this.size) ? this.size : BADGE_SIZES[this.size];
 
     const style: any = {
       paddingHorizontal: this.isSmallBadge() ? 4 : 6,