Feat/support customElement in Badge (#1153)

* Feat/support customElement in Badge

* customElement fixes

Co-authored-by: Ethan Sharabi <[email protected]>

Author: lidord-wix

demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Colors, View, Badge, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
+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');
@@ -25,6 +25,23 @@ export default class BadgesScreen extends Component {
   }
 
   render() {
+    const customElement1 = (
+      <View row>
+        <Image source={bell}/>
+        <Image source={bell}/>
+      </View>
+    );
+
+    const customElement2 = (
+      <View row>
+        <Image source={bell}/>
+        <Text white text90>
+          37
+        </Text>
+        <Image source={bell}/>
+      </View>
+    );
+
     return (
       <ScrollView style={{backgroundColor: Colors.dark70}} contentContainerStyle={styles.container}>
         <Text text50 row center marginB-15>
@@ -141,10 +158,17 @@ export default class BadgesScreen extends Component {
           Counter Icon Badges
         </Text>
         <View row paddingH-15>
-            <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
-            <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
+          <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
+          <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
         </View>
 
+        <Text text50 marginB-10 row center marginT-25>
+          Custom Element Badges
+        </Text>
+        <View row paddingH-15>
+          <Badge marginR-10 label={'17'} customElement={customElement1}/>
+          <Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
+        </View>
       </ScrollView>
     );
   }

generatedTypes/components/badge/index.d.ts

@@ -72,6 +72,10 @@ export declare type BadgeProps = ViewProps & TouchableOpacityProps & {
      * Additional props passed to icon
      */
     iconProps?: object;
+    /**
+     * Custom element to render instead of an icon
+     */
+    customElement?: JSX.Element;
     /**
      * Use to identify the badge in tests
      */
@@ -101,7 +105,8 @@ declare class Badge extends PureComponent<BadgeProps> {
     getFormattedLabel(): any;
     getBorderStyling(): ViewStyle;
     renderLabel(): JSX.Element | undefined;
-    renderIcon(): JSX.Element;
+    renderCustomElement(): JSX.Element | undefined;
+    renderIcon(): 0 | JSX.Element | undefined;
     render(): JSX.Element;
 }
 declare function createStyles(props: BadgeProps): {
@@ -402,6 +407,10 @@ declare const _default: React.ComponentClass<ViewProps & TouchableOpacityProps &
      * Additional props passed to icon
      */
     iconProps?: object | undefined;
+    /**
+     * Custom element to render instead of an icon
+     */
+    customElement?: JSX.Element | undefined;
     /**
      * Use to identify the badge in tests
      */

src/components/badge/index.tsx

@@ -96,6 +96,10 @@ export type BadgeProps = ViewProps &
      * Additional props passed to icon
      */
     iconProps?: object;
+    /**
+     * Custom element to render instead of an icon
+     */
+    customElement?: JSX.Element;
     /**
      * Use to identify the badge in tests
      */
@@ -143,7 +147,7 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   getBadgeSizeStyle() {
-    const {borderWidth, size, icon} = this.props;
+    const {borderWidth, size, icon, customElement} = this.props;
     const label = this.getFormattedLabel();
     const badgeHeight = _.isNumber(size) ? size : BADGE_SIZES[size];
 
@@ -161,7 +165,9 @@ class Badge extends PureComponent<BadgeProps> {
       }
       return style;
     }
-
+    if (customElement) {
+      return style;
+    }
     const isPimple = label === undefined;
     if (isPimple || icon) {
       style.paddingHorizontal = 0;
@@ -230,38 +236,34 @@ class Badge extends PureComponent<BadgeProps> {
     }
   }
 
+  renderCustomElement() {
+    const {customElement} = this.props;
+    return customElement;
+  }
+
   renderIcon() {
     const {icon, iconStyle, iconProps, borderColor, label} = this.props;
     const flex = label ? 0 : 1;
     return (
-      <Image
-        source={icon!}
-        resizeMode="contain"
-        //@ts-ignore
-        borderColor={borderColor}
-        {...iconProps}
-        style={{
-          flex,
-          ...iconStyle
-        }}
-      />
+      icon && (
+        <Image
+          source={icon!}
+          resizeMode="contain"
+          //@ts-ignore
+          borderColor={borderColor}
+          {...iconProps}
+          style={{
+            flex,
+            ...iconStyle
+          }}
+        />
+      )
     );
   }
 
   render() {
     // TODO: remove testId after deprecation
-    const {
-      activeOpacity,
-      backgroundColor,
-      containerStyle,
-      hitSlop,
-      icon,
-      label,
-      onPress,
-      testId,
-      testID,
-      ...others
-    } = this.props;
+    const {activeOpacity, backgroundColor, containerStyle, hitSlop, onPress, testId, testID, ...others} = this.props;
     const backgroundStyle = backgroundColor && {backgroundColor};
     const sizeStyle = this.getBadgeSizeStyle();
     const borderStyle = this.getBorderStyling();
@@ -293,8 +295,9 @@ class Badge extends PureComponent<BadgeProps> {
           {...animationProps}
           row
         >
-          {icon && this.renderIcon()}
-          {label && this.renderLabel()}
+          {this.renderCustomElement()}
+          {this.renderIcon()}
+          {this.renderLabel()}
         </Container>
       </View>
     );
@@ -306,7 +309,7 @@ function createStyles(props: BadgeProps) {
     badge: {
       alignSelf: 'flex-start',
       borderRadius: BorderRadiuses.br100,
-      backgroundColor: !props.icon ? Colors.primary : undefined,
+      backgroundColor: (!props.icon || props.customElement) ? Colors.primary : undefined,
       alignItems: 'center',
       justifyContent: 'center',
       overflow: 'hidden'